Web Collection 04 (Cognição JavaScript, Gramática Básica)

1. Visão geral do JavaScript

1. O que é JavaScript

1) Introdução de JS

Chamado de JS, é uma linguagem interpretada por navegador, aninhada em arquivos HTML e entregue ao navegador para interpretação e execução. Usado principalmente para obter efeitos dinâmicos de páginas da web, interação do usuário e transmissão de dados entre o front-end e o back-ends.

2) composição JS

1. Gramática central-ECMAScript padroniza a gramática básica de JS
2. 
   Browser Object Model - BOM Browser Object Model, fornece uma série de métodos para operar o navegador
3. Document Object Model-DOM
   Document Object Model, fornece uma série de métodos para manipular documentos

2. Como usar

[1] Evento de vinculação de elemento

• Evento: refere-se ao comportamento do usuário (clique, clique duplo, etc.) ou ao estado do elemento (o estado de foco da caixa de entrada, etc.)

• Tratamento de eventos: o elemento escuta um determinado evento e executa automaticamente a função de processamento de eventos após a ocorrência do evento.

• Eventos comumente usados: onclick (evento de clique)

• Sintaxe: vincule o nome do evento ao elemento na forma de um atributo de rótulo e personalize o tratamento do evento.

  <!--实现点击按钮在控制台输出-->
  <button onclick="console.log('Hello World');">点击</button>
  

[2] O documento está incorporado. Use tags para escrever código JS

• gramática:

<script type="text/javascript">
  alert("网页警告框");
</script>

• Observação: a tag pode ser escrita em qualquer posição do documento e será escrita várias vezes. Depois de carregada na tag de script, o código JS interno será executado imediatamente, portanto, posições diferentes afetarão o efeito de execução final do código .

[3] Links externos

• Crie um arquivo JS externo XX.js e use-o no documento HTML

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

• Nota: O código JS incorporado pode ser implementado ou o arquivo JS externo pode ser importado, mas apenas um dos dois pode ser selecionado.

2. Gramática básica

1. Especificação gramatical

[1] JS é composto por sentenças, que são compostas por palavras-chave, variáveis, constantes, operadores e métodos. O ponto-e-vírgula pode ser usado como um sinal do final da frase ou pode ser omitido
[2] JS é estritamente diferencia maiúsculas de minúsculas
[3] Sintaxe de comentário

 单行注释使用 //
 多行注释使用 /* */

2. Variáveis ​​e constantes JS

1) Variável

【1】 Função: usado para armazenar os dados que podem ser modificados dinamicamente durante a execução do programa

[2] Sintaxe: Use a declaração de var chave, nome de variável personalizada

var a;		//变量声明
a = 100;	//变量赋值
var b = 200; //声明并赋值
var m,n,k;	//同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量

[3] Convenção de nomenclatura:

• Nomes de variáveis, nomes de constantes, nomes de funções e nomes de métodos podem ser personalizados, podem ser compostos por números, letras, sublinhados e $, e é proibido começar com um número
• Proibir conflitos com palavras-chave (função var const if else por enquanto quebre o caso, alterne a classe de retorno)
• Nomes de variáveis ​​são estritamente sensíveis a maiúsculas e minúsculas
• Os nomes das variáveis ​​devem ser o mais claros possível e várias palavras devem ser compostas de pequenos camelos, por exemplo: "userName"

[4] Nota para uso:

• Se a palavra-chave var for omitida e a variável não for atribuída, o acesso direto relatará um erro
• As variáveis ​​são declaradas com a palavra-chave var, mas não atribuídas, e o valor inicial da variável é indefinido
• A variável omite a declaração de palavra-chave var, foi atribuída e pode ser usada normalmente. Afeta o escopo da variável

2) Constante

【1】 Função: Armazena dados que não podem ser modificados, uma vez definidos

[2] Sintaxe: deve ser declarada e atribuída ao mesmo tempo

const PI = 3.14;

【3】 Nota:

• Uma vez que uma constante é definida, ela não pode ser modificada, e um erro será relatado se for forçada a modificar
• A convenção de nomenclatura é a mesma das variáveis. Para distinguir as variáveis, os nomes das constantes são todos maiúsculos.

3. Tipo de dados

1) Tipos de dados básicos (tipos de dados simples)

Inteiro

(1) Representação decimal

var a = 100;

(2) Representação octal (prefixado com 0)

var b = 021; //结果为十进制的 17

(3) Representação hexadecimal (prefixado com 0x)

var c = 0x35;//结果为十进制的 53

Uso: os inteiros podem ser expressos em hexadecimais diferentes e sempre serão exibidos em decimais quando forem produzidos no console

Decimal

(1) O ponto decimal significa var m = 1,2345;

(2) Notação científica

2. string Tipo de
   string String: É composto por um ou mais caracteres, que são representados por "" ou ", e cada caractere possui um código Unicode correspondente.

   var s = "100";
   var s1 = "张三";
   

3. boolean Boolean type
   Existem apenas dois valores, true e false, e os valores boolean e numéricos podem ser convertidos um no outro. verdadeiro é 1, falso é 0

   var isSave = true;
   var isChecked = false;
   

4. valor
   especial undefined (valor retornado pelo programa) , undefined é exibido quando a declaração da variável não é atribuída

   var a;
   console.log(a);//undefined
   

5. null Tipo vazio (usado ativamente)
   Use null ao cancelar a referência de um objeto, indicando que o objeto está vazio

2) Tipo de dados de referência

Principalmente se refere a objetos, funções, etc.

3) Tipo de dados de detecção

tipo de variável ou expressão
tipo de (variável ou expressão)

var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string

4. Conversão de tipo de dados

Diferentes tipos de dados precisam ser convertidos ao participar de operações

1) Conversão de tipo forçada

[1]
Método do tipo de string de conversão : toString ()
retorna a string convertida

var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"

[2] Converter tipo de número

• O parâmetro Number (param)
  é a variável ou valor a ser convertido para o tipo de dados, e o resultado após a
  conversão é retornado : se a conversão for bem-sucedida, o valor do número
  é retornado. Se a conversão falhar, NaN, (Não é um Número) é retornado, desde que haja caracteres não numéricos nos dados, Sempre falha ao converter, retorna NaN

Demo

    Number("abc")
    typeof NaN
    Number(undefined)
    Number(null)

Demo

/*整体转number,使用Number()*/
var s1 = '123';
var s2 = '101a';
var s3 = true;
var s4 = 'true';
var s5 = null;
var s6;
console.log(Number(s1),s1)    //123 '123'
console.log(Number(s2),s2)    //NaN '101a'
console.log(Number(s3),s3)    //1 true
console.log(Number(s4),s4)    //NaN 'true'
console.log(Number(s5),s5)    //0 null
console.log(Number(s6),s6)    //NaN undefined

• O parâmetro parseInt (param)
  são os dados a serem analisados.
  Função: Analisa o valor inteiro dos dados.
  Processo:
  1. Se o parâmetro não for um tipo de string, ele será automaticamente convertido em uma string
  . 2. Gire cada um caractere para número da esquerda para a direita., Se a conversão falhar, a análise reversa é interrompida e o resultado é retornado

/*
提取字符串中的number部分：会将非字符串的数据自动转换成字符串
parseInt(n)
parseFloat(n)
*/
console.log(parseInt(35.5))            //35
console.log(parseInt("35.5"))          //35
console.log(parseFloat('35.5.6.6'))    //35.5
console.log(parseFloat('a35.5'))       //NaN
console.log(parseFloat('101a'))        //101 

• função parseFloat (param)
  : extrair o valor do número, incluindo inteiro e parte decimal

2) Conversão de tipo implícita (conversão automática)

1. Quando uma string de caracteres e outros tipos de dados são submetidos à operação "+", isso significa que a string é emendada, o que não é mais uma operação matemática.
   Regra de conversão: depois de converter dados não-string em uma string, a emenda é o resultado final é uma corda

2. Em outros casos, sempre converta o operando em número para operações matemáticas

Demo

var r1 = "我学"+"Python";
console.log(r1,typeof r1)　　//我学Python string
var r2 = 'maple'+31;
console.log(r2,typeof r2)　　//maple31 string
var r3 = 'maple'+true;
console.log(r3,typeof r3)　　//mapletrue string
var r4 = 'maple'+null;
console.log(r4,typeof r4)　　//maplenull string
var r5 = 'maple'+undefined;
console.log(r5,typeof r5)　　//mapleundefined string
var r6 = 'maple'+NaN;
console.log(r6,typeof r6)　　//mapleNaN string        
var r7 = 'maple'+5+10;
console.log(r7,typeof r7)　　//maple510 string
var r8 = 10+5+'maple';  
console.log(r8,typeof r8)　　//15maple string

5. Operadores

1) Operador de atribuição

= 将右边的值赋给左边变量

2) Operadores aritméticos

+ - * / %  加 减 乘 除 取余

3) Operador composto

+= -= *= /= %=

4) Operador de incremento ou decremento

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

Demo

var s = true;
s++;
console.log(s,typeof s)        //2 Number


var n =5;
var r =n++ + ++n + n++ + ++n +n;
        //5+   7+  7+     9+  9
//分解
var r1=n++;    //r1=5 n=6
var r2=++n;    //r2=7 n=7
var r3=n++;    //r3=7 n=8
var r4=++n;    //r4=9 n=9
var r5=+n;    //r5=9 n=9

Nota:

• Quando o operador de incremento ou decremento é combinado com uma variável sozinha, não há diferença entre antes e depois
• Se o operador de incremento ou decremento for usado em combinação com outros operadores, é necessário distinguir o prefixo e o sufixo. Como um prefixo, primeiro ++ / - e, em seguida, execute a atribuição ou outras operações. Se você fizer um sufixo, combine outros operadores primeiro. Continue ++ / -

5) Operador relacional / operador de comparação

> <     
>= <=
==(相等) !=(不相等)
===(全等) !==(不全等)

[1] Operadores relacionais são usados ​​para determinar a relação entre as expressões, e o resultado é sempre um booleano verdadeiro / falso

【2】 Use

• Comparação entre string e string Compare
  o código Unicode de cada caractere por sua vez, contanto que um caractere compare o resultado, o resultado final é retornado
• Em outros casos,
  o operando é sempre convertido em número para comparação numérica. Se um operando não puder ser convertido em número, ele se torna NaN e participa da operação de comparação, e o resultado é sempre falso

null和其他数据类型做等值比较运算 不转换成数字
null和undefined相等 但是 null和undefined不全等

Demo

var res1=10>2;
var res2='10'>'2';                    //'1'>'2'
var res3 = '人生苦短'>'我学Python';     //'人'>'我';
console.log(res1,res2,res3)           //true false false
var s1 = '人';
var s2 = '我';
//获取字符的 Unicode编码charCodeAt(index)
console.log(s1.charCodeAt(),s2.charCodeAt(),res3)//20154 25105 false

var res4 = '10'>2;
var res5 = '10'>true;            //10>1
var res6 = true > false;         //1>0
console.log(res4,res5,res6)      //true true true

var res7 = '10'>undefined;       //10>NaN  false
var res8 = '10'>null;            //10>0
var res9 = 'true' > false;       //NaN>0
console.log(res7,res8,res9)      //false true false

[3] Igualdade e congruência

• Igualdade: independentemente do tipo de dados, apenas comparação de valor (incluindo conversão automática de tipo)
• Congruência: a conversão do tipo de dados não será realizada, e o tipo de dados deve ser consistente e o valor é igual para julgar a congruência

Demo

var r1 = 10=='10';
var r2 = 10==='10';
console.log(r1,r2);    //true false

6) Operadores lógicos

1. && Lógica e condição 1 && condição 2 (e)
   expressão é estabelecida ao mesmo tempo, o resultado final é verdadeiro; todo 1 é 1
2. || Condição OR lógica 1 || Condição 2 (ou)
   Contanto que uma das expressões seja verdadeira, o resultado final é verdadeiro; se houver 1, então 1

Demo

//给出闰年判断的条件 能被4整除，不能被100整除，或者被400整除
var year=2015;
var r=year%4==0&&year%100!==0 ||year%400==0;
console.log(typeof year,r)        

//"number" false

3. ! Negação lógica! A condição (não)
   nega o resultado de uma expressão existente.
   Observação: todos os valores, exceto zero, são verdadeiros

Demo

var r1 = !5;        　//false
//逻辑非的优先级高于关系运算
var r2 = !5<3;        //true  false<3
console.log(r1,r2)    //false true

7) Operador ternário

Sintaxe:

表达式1 ? 表达式2 : 表达式3;

Processar:

	判断表达式1是否成立,返回布尔值
​	如果表达式1成立,执行表达式2;
​	如果表达式1不成立,执行表达式3;

Demo

var a = 10;
if (a>5){
    
    
    console.log('成立');    //成立
}else{
    
    
    console.log('不成立');
}
var res=a>5?'ok':'error';
console.log(res)    //ok
a = 3;
var res2 = a>5?'ok':a>=3?'>=3':'<3';
console.log(res2)    //>=3