é uma das linguagens de programação mais populares do mundo
é uma linguagem de script executada por meio de um interpretador
Ele é executado principalmente no cliente ( navegador ) e agora também pode ser executado no servidor com base no node.js

O JavaScript foi originalmente usado apenas para concluir a validação de formulário simples (verificar a validade dos dados), mas tornou-se popular mais tarde acidentalmente.

Atualmente, o JavaScript se tornou uma linguagem de programação de propósito geral

Coisas que o JavaScript pode fazer :

Desenvolvimento Web ( efeitos especiais mais complexos e interação com o usuário )
Desenvolvimento de jogos na web
Desenvolvimento de servidor (node.js)
Desenvolvimento de programas de desktop (Electron, VSCode é assim )
desenvolvimento de aplicativos móveis

História do Desenvolvimento

Brendan Eich, pai do JavaScript

Em 1995, demorou 10 dias para concluir o projeto do JS (porque o tempo de projeto era muito curto, alguns detalhes da linguagem não foram cuidadosamente considerados, o que levou a um longo período de tempo depois, e o programa escrito em Javascript era confuso )

Originalmente na Netscape, chamado LiveScript,

Geralmente acredita-se que a razão pela qual o Netscape nomeou LiveScript JavaScript naquela época foi porque Java era a linguagem de programação mais popular da época, e o nome com "Java" ajudou a espalhar a nova linguagem.

Na verdade, o estilo de sintaxe entre Java e JavaScript é muito diferente.

A relação entre JavaScript e HTML e CSS

HTML: A estrutura de uma página da Web ( Bone )
CSS: desempenho da página da Web ( skin )
JavaScript: Comportamento de páginas da Web ( Soul )

Processo de execução do JavaScript

O código escrito é salvo no arquivo , ou seja, armazenado no disco rígido ( armazenamento externo ).
Clique duas vezes no navegador de arquivos .html ( aplicativo ) para ler o arquivo e carregar o conteúdo do arquivo na memória ( direção do fluxo de dados : disco rígido => memória )
O navegador analisará o código escrito pelo usuário e traduzirá o código em instruções binárias que podem ser reconhecidas pelo computador ( o trabalho do intérprete )
As instruções binárias obtidas serão carregadas e executadas pela CPU ( direção do fluxo de dados : memória => CPU)

O navegador é dividido em mecanismo de renderização + mecanismo JS .

Mecanismo de renderização : parse html + CSS, comumente conhecido como " kernel "
Mecanismo JS : isto é, o interpretador JS . Típico é o V8 embutido no Chrome

A composição do JavaScript

ECMAScript ( ES para abreviar ): sintaxe JavaScript
DOM: Page Document Object Model , que opera nos elementos da página
BOM: modelo de objeto do navegador , para operar na janela do navegador

Somente com a sintaxe JS, apenas alguns processos lógicos básicos podem ser escritos.

Mas, para concluir tarefas mais complexas e concluir a interação com navegadores e páginas, a API DOM e a API BOM são necessárias por muito tempo.

Conceitos Chave: ECMAScript

Este é um conjunto de "padrões", não importa que tipo de mecanismo JS seja, ele deve obedecer a esse padrão.

Pré-conhecimento

<script>
    alert("你好!");
</script>

O código JavaScript pode ser incorporado em tags de script HTML.

Forma escrita de JavaScript

1. Em linha

Incorpore diretamente dentro do elemento html

<input type="button" value="点我一下" onclick="alert('haha')">

Perceber

Constantes de string em JS podem ser expressas em aspas simples ou duplas .
Aspas duplas são recomendadas em HTML e aspas simples são recomendadas em JS .

2. Incorporado

escreva na tag do script

<script>
    alert("haha");
</script>

3. Fórmula externa

Gravar em um arquivo .js separado

<script src="hello.js"></script>

alert("hehe");

Neste caso, o código não pode ser escrito no meio da tag script, deve estar vazio (o código não será executado se for escrito).

observação

Comentários de linha única // [recomendado]

Comentário de várias linhas /* */

Use ctrl + / para alternar os comentários .
Comentários multilinha não podem ser aninhados .

entrada Saída

entrada : prompt

abrir uma caixa de entrada

// 弹出一个输入框
prompt("请输入您的姓名:");

Saída : alerta

Abra uma caixa de diálogo de aviso , mostre o resultado

// 弹出一个输出框
alert("hello");

+ indica concatenação de strings , ou seja, duas strings são conectadas ponta a ponta para formar uma string .
\n significa nova linha

Caixa de seleção: confirme

Uma caixa de diálogo de seleção aparece, confirme ou cancele

// 弹出选择框
confirm("确认删除吗？");

Saída : console.log

Imprima um log no console ( para os programadores verem )

// 向控制台输出日志
console.log("这是一条日志");

Digite "log" diretamente no VSCode e pressione a tecla tab para entrar rapidamente em console.log

Você precisa abrir as ferramentas de desenvolvedor do navegador (F12) => guia Console para ver os resultados.

Conceitos Chave : Logging

Os logs são um meio importante para os programadores depurarem programas

Conceitos importantes : .

console é um " objeto " em js

.Indica tomar uma determinada propriedade ou método no objeto . Pode ser entendido intuitivamente como " de "

console.log pode ser entendido como : use o " método log " do objeto " console " .

Visão geral da gramática

Embora alguns conceitos de design do JavaScript estejam longe do Java, ainda existem algumas semelhanças no nível básico da gramática.Com a base do Java, é fácil entender um pouco da gramática básica do JavaScript.

uso de variáveis

uso básico

Criar variáveis (definição de variável/declaração de variável/inicialização de variável)

var name = 'zhangsan';
var age = 20;

var é uma palavra-chave em JS , indicando que esta é uma variável .
= significa " atribuição " em JS , o que equivale a colocar dados em uma caixa de memória . Recomenda-se um espaço em ambos os lados de =
Cada instrução termina com um ; no final.Pode ser omitido em JS , mas é recomendável adicioná-lo .
Observe que o ; aqui é um ponto e vírgula em inglês.Toda a pontuação em JS é pontuação em inglês .
Se o valor inicializado for uma string , ele deve ser colocado entre aspas simples ou duplas .
Se o valor inicializado for um número , ele pode ser atribuído diretamente .

usar variáveis

console.log(age); // 读取变量内容
age = 30;         // 修改变量内容

Entenda a digitação dinâmica

1) O tipo de variável de JS é determinado durante a execução do programa ( o tipo será determinado somente quando a instrução = for executada )

var a = 10;     // 数字
var b = "hehe"; // 字符串

2) Conforme o programa roda , o tipo da variável pode mudar .

var a = 10;    // 数字
a = "hehe";    // 字符串

tipo de dados básico

Vários tipos embutidos em JS

number: number .Inteiros e decimais não são diferenciados .
booleano: verdadeiro verdadeiro , falso falso .
string: tipo de string .
indefinido: Apenas o valor único indefinido. Indica um valor indefinido .
null: Somente o valor único null Indica um valor nulo .

número tipo de número

JS não distingue entre inteiros e números de ponto flutuante e usa "tipos de número" para representá-los uniformemente.

representação digital

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

Nota :

Um dígito octal corresponde a três dígitos binários
Um dígito hexadecimal corresponde a quatro dígitos binários ( dois dígitos hexadecimais são um byte )

valor numérico especial

Infinity: Infinito , maior que qualquer número , significa que o número ultrapassou o intervalo que JS pode representar .
-Infinito: Infinito negativo , menor que qualquer número , significa que o número excedeu o intervalo que o JS pode expressar .
NaN: indica que o resultado atual não é um número .

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

Nota :

Infinito negativo e infinitesimal não são a mesma coisa . Infinito pequeno significa aproximação infinita de 0, o valor é 1 / Infinito
O resultado de 'hehe' + 10 não é NaN, mas 'hehe10', que converterá implicitamente o número em uma string e , em seguida, concatenará a string .
Você pode usar a função isNaN para determinar se é um não-número .

tipo de string

regras básicas

Os literais de string precisam ser colocados entre aspas, aspas simples ou duplas.

Se a string já contiver aspas, caracteres de escape precisam ser usados.

personagem de escape

Alguns caracteres são inconvenientes para serem inseridos diretamente , então eles devem ser expressos de algumas maneiras especiais .

Encontre o comprimento

Use a propriedade length de String

concatenação de strings

Use + para unir
Números e strings também podem ser concatenados

booleano tipo booleano

Indica "verdadeiro" e "falso"

Quando Boolean participa de operações, é tratado como 1 e 0 .

tipo de dado indefinido indefinido

Se uma variável não foi inicializada , o resultado é indefinido , que é do tipo indefinido

var a;
console.log(a)

Adicione undefined e string , e o resultado é a concatenação de strings

console.log(a + "10");  // undefined10

Indefinido é adicionado a um número e o resultado é NaN

console.log(a + 10);

tipo de valor nulo vazio

null indica que a variável atual é um " valor nulo ".

var b = null;
console.log(b + 10);    // 10
console.log(b + "10");  // null10

Nota :

Ambos null e undefined indicam valores ilegais , mas a ênfase é diferente .
Nulo significa que o valor atual está vazio . ( equivale a ter uma caixa vazia )
indefinido significa que a variável atual é indefinida . ( equivale a nem mesmo ter uma caixa )

operador

Operadores em JavaScript são basicamente os mesmos que em Java

operador aritmético

Operadores de atribuição e operadores de atribuição compostos

Operadores de incremento e decremento

++: incrementa em 1
--: decremento em 1

operador de comparação

<
>
<=
>=
== compara igual ( realizará conversão de tipo implícita )
!=
=== compara igual ( sem conversão de tipo implícita )
!==

Operadores lógicos

Usado para avaliar várias expressões booleanas .

&& e : um falso é falso
|| ou : um verdadeiro é verdadeiro
! Não

operação de bit

& bit a bit AND
| bit a bit ou
~ negação bit a bit
^ XOR bit a bit

operação de turno

<< deslocar para a esquerda
>> deslocamento à direita com sinal ( deslocamento aritmético à direita )
>>> Deslocamento à direita sem sinal ( deslocamento à direita lógico )

Declarações condicionais

se declaração

formato gramatical básico

Se a expressão condicional for verdadeira, execute o código em { } de if

// 形式1
if (条件) {
    语句
}
// 形式2
if (条件) {
    语句1
} else {
    语句2
}
// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else if .... {
    语句...
} else {
    语句N
}

expressão ternária

É uma forma simplificada de escrever if else .

条件 ? 表达式1 : 表达式2

Se a condição for verdadeira , retorne o valor da expressão1 . Se a condição for falsa , retorne o valor da expressão2

trocar

Mais adequado para cenários multi-ramificação

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2:
        break;
    default:
        语句N;
}

instrução de loop

repetir algumas declarações

loop while

while (条件) {
    循环体;
}

Processo de execução :

afirmação condicional
Se a condição for verdadeira, execute o código do corpo do loop .
Se a condição for falsa, o loop termina diretamente

continuar

terminar este loop

quebrar

terminar todo o loop

para loop

for (表达式1; 表达式2; 表达式3) {
 循环体
}

Expressão 1: Usada para inicializar a variável do loop .
Expressão 2: condição de loop
Expressão 3: variável de loop de atualização

Processo de execução :

Execute a expressão 1 primeiro, inicialize a variável de loop
Execute a expressão 2 novamente para determinar a condição do loop
Se a condição for falsa, finalize o loop
Se a condição for verdadeira, execute o código do corpo do loop .
Execute a expressão 3 para atualizar a variável de loop

variedade

criar matriz

Criado usando a nova palavra-chave

// Array 的 A 要大写
var arr = new Array();

Use o método literal para criar [ comumente usado ]

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

As matrizes JS não exigem que os elementos sejam do mesmo tipo

obter elemento de matriz

Acessar elementos da matriz usando subscritos ( começando em 0 )
Se o subscrito estiver fora do intervalo para ler o elemento , o resultado será indefinido

Adicionar novo elemento de matriz

1. Adicionado modificando o comprimento

É equivalente a adicionar um elemento no final . O valor padrão do novo elemento adicionado é indefinido

2. Adicionar por subscrito

Se o subscrito exceder o intervalo do elemento atribuído , um novo elemento será inserido na posição especificada

3. Use push para adicionar elementos

var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
   newArr.push(arr[i]);
}

excluir um elemento em uma matriz

Remover elementos usando o método splice

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

função

formato gramatical

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

A definição da função não executa o conteúdo do corpo da função , ela deve ser chamada antes de ser executada.Ela será executada várias vezes depois de ser chamada várias vezes .
Quando a função é chamada, ela entra na execução interna da função , e quando a função termina, ela retorna ao local de chamada e continua a executar , isso pode ser observado com a ajuda de um depurador .
Não há nenhum requisito para a ordem de definição e chamada da função ( isso é diferente das variáveis , as variáveis devem ser definidas antes do uso ).

Sobre o número de parâmetros

O número de parâmetros reais e parâmetros formais pode não corresponder. No entanto, o desenvolvimento real geralmente requer que o número de parâmetros formais e parâmetros reais correspondam

1) Se o número de parâmetros reais for maior que o número de parâmetros formais , os parâmetros extras não participarão da operação da função
2) Se o número de parâmetros reais for menor que o número de parâmetros formais , o valor dos parâmetros formais extras neste momento é indefinido

expressão de função

Outra forma de definir uma função

var add = function() {
 var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
   }
    return sum;
}
console.log(add(10, 20));            // 30
console.log(add(1, 2, 3, 4));        // 10
console.log(typeof add);             // function

Um texto como function() { } define uma função anônima e , em seguida, representa a função anônima com uma variável .

escopo

O escopo válido de um nome de identificador no código.

Antes do padrão ES6, o escopo era dividido principalmente em dois

Escopo global : entra em vigor na tag script inteira ou em um arquivo js separado .
Escopo local / escopo da função : tem efeito dentro da função .

cadeia de escopo

Plano de fundo :

Funções podem ser definidas dentro de funções
Funções internas podem acessar variáveis locais de funções externas .

objeto

conceito básico

objeto refere-se a uma coisa específica

Em JS, strings, números, arrays e funções são todos objetos.

Cada objeto contém várias propriedades e métodos .

Atributos : características das coisas .
Método : o comportamento das coisas .

O conceito de objetos JavaScript e objetos Java é basicamente o mesmo , apenas que as entradas da tabela de sintaxe específica são bem diferentes .

1. Use literais para criar objetos [ comumente usados ]

Crie objetos usando { }

Crie objetos usando { }
Propriedades e métodos são organizados como pares chave-valor .
Usado entre pares chave-valor , split . Após o último atributo , opcional
Uso : dividido entre chaves e valores .
O valor do método é uma função anônima

2. Use o novo objeto para criar objetos

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
    console.log("hello");
}

3. Crie objetos usando construtores

O método anterior de criação de um objeto pode criar apenas um objeto. Usar o construtor pode criar facilmente vários objetos

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
    
var obj = new 构造函数名(实参);