Introduction

First experience with typescript

what is javascript

what is typescript

Advantages of typescript compared to js

Development tools (vscode)

Development tools (Node.js)

Why install a toolkit for parsing TS?

Install the toolkit for parsing TS

The first TS file

Simplify the steps to perform TS

Comment

output statement

Typescript first experience summary

An introduction to variables and data types

what is a variable

Use of variables

Configure vscode

type annotation

Naming rules and specifications

Exercises with variables (exchanging the values ​​of two variables)

Data type overview

Numeric type

string type

Boolean type

underfined and null types

Basic Types - Summary

Introduction to operators

arithmetic operators

Plus sign implements string concatenation

Thoughts caused by the plus sign

assignment operator

Increment and decrement operators

comparison operator

Logical Operators

Statement introduction

Conditional statements overview

if statement

else statement

if else statement practice

Overview of the ternary operator

Exercises with the ternary operator

Overview of loop statements

Look at the composition of the for loop from the example of writing homework

Basic use of for loop

The execution process of for loop

Breakpoint debugging to view the for loop execution process

vscode breakpoint debugging configuration (1 configuration step)

vscode breakpoint debugging configuration (2 debugging tips)

For loop exercises (1 print 1-5)

Exercises in for loop (2 print the nth bun being eaten)

For loop exercises (3 Calculate the sum of 1-100)

break keyword

continue keyword

Introduction to arrays

Array overview

Create an array (Syntax 1)

Create an array (syntax 2)

Array length and index

Array value acquisition and storage (value acquisition)

Array value acquisition and storage (storage value)

Add elements to array

Iterate over the array (calculator default value is 0)

Traverse the array (the judgment condition is the length of the array minus 1)

Traverse the array (optimizing judgment conditions)

Array exercises (finding the sum of all elements in an array)

Array exercises (finding the maximum value in an array)

Array exercises (find elements in an array that are not 0)

Introduction to function basics

Function overview

Function usage

Function exercises

Function parameters overview

formal parameters and actual parameters

Additional description of parameters

Function parameter exercises (1)

Function parameter exercises (2)

Function return value overview

Basic usage of function return values

Function return value exercise (transformation of getSum function)

Function return value exercise (triangle area)

Function return value practice (finding the maximum value)

Description of return

Summary of function basics

Advanced introduction to functions

Function debugging (basic operations)

Function debugging (function execution process)

variable scope

Object introduction

Object overview

Create object

Interface (type annotation of object)

Type annotations for object methods

Use of interface

Object value

Object storage value

Summary of basic usage of objects

Built-in objects overview

Array object (length property)

Array object (push)

Array object (forEach)

Array object (explanation of forEach)

forEach exercises

Array object (some)

Type inference of TS

An overview of web development basics

Basic use of HTML (create the first html page and use it)

Basic use of HTML (common tags)

Basic usage of CSS (style attribute)

Basic usage of CSS (style tag)

Basic use of CSS (css file)

Use javascript in your browser

Use Live Server plug-in - automatically refresh the browser

Run TS in browser

DOM manipulation overview

Get elements (querySelector)

TS type assertion

Get elements (querySelectorAll)

Manipulate text content (innerText)

Exercise (querySelectorAll and innerText)

Operation style (style attribute)

Operation demonstration (classList attribute)

Operation event (addEventListener add event)

Operation event (event object)

removeEventListener removes events (1)

removeEventListener removes events (2)

Two notes on event handlers in the form of function declarations

Chess game demonstration and gameplay introduction

Game template description

Cell click (playing chess)

Cell click (optimized)

Adjust vscode and browser window position

Switch players (1)

Switch players (2)

Basic usage of enumerations

Numeric enumeration and string enumeration

Modify the current player using an enum

The idea of ​​​​judging victory

Analyze winning array

Cell element list description

Encapsulating the winning function

Implement the winning function (1)

Implement the winning function (2)

Optimize the winning function

Determine a draw

Show winning information

restart game

Optimize restart the game