Diretório de artigos
-
-
- 1. Primeira introdução ao JavaScript
- 2.Tipos de dados básicos JavaScript
- 3.Tipos de dados de objetos JavaScript
- 4. Estrutura de dados da matriz JavaScript
- 5.Operadores e controle de fluxo em JavaScript
- 6. Funções em JavaScript
- 7.Protótipo JavaScript e cadeia de protótipos
- 8. Atualização parcial de JavaScript ajax
- 9. Objeto de documento JavaScript DOM
- 10. BOM do objeto do navegador JavaScript
-
1. Primeira introdução ao JavaScript
1.1. Introdução à linguagem JavaScript
(1. Introdução
JavaScript é a linguagem de script mais popular na Internet. Essa linguagem pode ser usada para HTML e para a Web, e pode ser amplamente utilizada em servidores, PCs, laptops, tablets, smartphones e outros dispositivos.
JavaScript é uma linguagem de programação leve que é um código de programação que pode ser inserido em páginas HTML. Quando o JavaScript é inserido em uma página HTML, ele pode ser executado por todos os navegadores modernos.
(2) Três partes principais do Javascript
- Padrão de sintaxe ECMAScript: uma especificação padronizada para linguagens de script formulada pela ECMA.
- DOM: Manipule páginas da web através do Document Object Model (dom).
- BOM: Manipule o navegador através do modelo de objeto do navegador (bom).
(3) versão JavaScript e versão ECMAScript
(4) Por que JavaScript é um mecanismo de thread único
JavaScript é single-threaded, o que significa que ele só pode fazer uma coisa ao mesmo tempo. Somente a coisa anterior foi executada antes que a próxima coisa possa ser executada. Como resultado, o código subsequente não pode ser executado quando uma tarefa demorada é encontrada.
Como js é single-threaded (há apenas um thread JS executando o programa JS a qualquer momento em uma página Tab), ele depende da fila de tarefas para executar o código js, então o mecanismo js sempre aguardará a chegada das tarefas na fila de tarefas e, em seguida, ser processado.
Se js for multithread, então há dois eventos que operam o dom ao mesmo tempo, um evento edita o dom e o outro evento exclui o dom, então instruções contraditórias ocorrerão neste momento.
1.2.Métodos de introdução e comentários do JavaScript
(1) Método de introdução
Método de introdução interna
htmlIntroduzir tags dentro de bodytags ou headtagsscript
Nota: A ordem de execução introduzida nos dois locais é diferente.
- Quando introduzido no corpo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是李祥
<script>
document.write("我是JS追加的内容")
</script>
</body>
</html>
- Quando introduzido na cabeça:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.write("我是JS追加的内容")
</script>
</head>
<body>
我是李祥
</body>
</html>
O motivo é que os arquivos html são executados sequencialmente de cima para baixo. Como são executados em um único thread, ao renderizar a página, tente renderizar primeiro a tag html e depois obter os dados por meio de js. Evite entupimentos.
Método de introdução externa
- arquivo index.js
document.write("我是JS外部追加的内容")
- arquivo index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="index.js"></script>
</head>
<body>
我是李祥
</body>
</html>
Nota: Recomenda-se usar a estrutura, estilo e separação de comportamento padrão do w3c e apresentá-los externamente.
(2) Método de anotação
单行：//
多行：/* */
Não há muito a dizer sobre isso, apenas lembre-se.
1.3. Explicação detalhada da declaração de variáveis Javascript
(1) Declaração de variável
Use var para definir variáveis (sintaxe es6: let, const). Haverá um artigo sobre es6 mais tarde. Aqui só precisamos saber var primeiro.
- Combinação de declaração e atribuição
var name = '李祥';
console.log(name);
- Declaração e atribuição separadas
var age;
age = 18;
console.log(age);
- Declare múltiplas variáveis ao mesmo tempo
var city = "天津市", area = "宝坻区";
console.log(city,area);
Código de teste:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
var name = "李祥";
console.log(name);
var age;
age = 18;
console.log(age);
var city = "天津市",
area = "宝坻区";
console.log(city, area);
</script>
</head>
<body></body>
</html>
resultado em execução:
(2) Regras de nomenclatura
As variáveis em JS são de tipo fraco e podem salvar todos os tipos de dados, ou seja, as variáveis não têm tipo, mas os valores têm tipos.
Podemos usar typeof para determinar que tipo é uma variável.
var name = "李祥";
console.log(typeof name);
- Os nomes das variáveis devem começar com uma letra, sublinhado "
_" ou " ".$Outros caracteres podem ser字母, ou ._美元符号数字 - Espaços e outros sinais de pontuação não são permitidos em nomes de variáveis e o primeiro caractere não pode ser um número.
- Os nomes das variáveis não podem exceder 255 caracteres.
- Os nomes das variáveis diferenciam maiúsculas de minúsculas. (Javascript é uma linguagem que diferencia maiúsculas de minúsculas).
- Os nomes das variáveis devem ser colocados na mesma linha.
- Palavras-chave, palavras reservadas, verdadeiro, falso e nulo reservados em linguagens de script não podem ser usadas como identificadores.
1.4. Explicação detalhada da promoção de variáveis JavaScript
(1) O que é promoção variável?
O içamento de variável é considerado uma compreensão de como o contexto de execução (especialmente as fases de criação e execução) funciona em Javascript. A palavra Hoisting não pode ser encontrada na documentação JavaScript anterior à especificação de linguagem ECMAScript® 2015.
No sentido literal do conceito, "elevação de variáveis" significa que as declarações de variáveis e funções são movidas fisicamente para a frente do código, mas isso não é exato. Na verdade, a localização das declarações de variáveis e funções no código não mudará, mas será colocada na memória durante a fase de compilação.
Simplificando, a promoção de variável ocorre durante a execução do código js. O mecanismo js promove a parte de declaração da variável e a parte de declaração da função para o início do código; depois que a variável é promovida, a variável receberá um padrão valor de indefinido.
Vamos usar um exemplo para demonstrar a promoção variável.
console.log(name);
var name = "李祥";
Pelo que pensamos, um erro deve ser relatado, pois primeiro o nome é impresso e depois a variável name é declarada.
Mas os resultados foram além das nossas expectativas. O console imprime indefinido.
O código real executado é este:
var name;
console.log(name);
name = "李祥";
A variável é declarada, mas não recebe um valor, portanto o valor padrão é indefinido, portanto o resultado impresso é indefinido.
(2) Por que existe promoção variável?
A promoção de variáveis existe no estágio de execução do código js. Então o código js é igual a outras linguagens. Ele precisa passar pelos estágios de compilação e execução. No estágio de "compilação", js coletará todas as declarações de variáveis e tornará as declarações efetivas antecipadamente.O restante As instruções devem ser interpretadas durante a fase de execução.
(3) Desativar promoção variável
As palavras-chave let e const introduzidas em es6 formarão um escopo em nível de bloco e não haverá promoção de variáveis. Elas são chamadas de zonas mortas temporárias em js .
Haverá artigos sobre let e const mais tarde, agora você só precisa dominar as palavras-chave let e const para resolver o problema de promoção de variáveis.
2.Tipos de dados básicos JavaScript
2.1. Introdução aos tipos de dados básicos do JavaScript
| Tipos de dados básicos | ilustrar | valor padrão |
|---|---|---|
| Número | Tipo numérico, incluindo valores inteiros e valores de ponto flutuante, como 21, 0,23 | 0 |
| boleano | Tipo booleano, como verdadeiro, falso, equivalente a 0 ou 1 | falso |
| Corda | Tipo de string, como "Zhang San" | “” |
| Indefinido | var a, declara a variável a mas não atribui um valor a a, neste momento a=indefinido | indefinido |
| Nulo | var a = null, declara a variável a vazia | nulo |
Os valores dos tipos de dados básicos são armazenados na pilha. Quando uma variável é declarada, a variável irá para o espaço de memória para encontrar o valor correspondente. Se o valor correspondente for encontrado, o endereço de memória do valor é armazenado diretamente em a variável; se não for encontrado, crie um novo espaço para armazenar o valor correspondente e armazene o endereço de memória do novo espaço na variável. Em js, as variáveis não armazenam nenhum valor, mas sim o endereço de memória do valor. Uma vez criado um tipo de dados básico, ele é imutável porque o espaço que ocupa é fixo. Modificar o valor de uma variável equivale a recriar um espaço de memória, e a variável aponta para o endereço do espaço de memória.
2.2.Número de dados do tipo básico
(1) Definição da declaração
//字面量声明
var num = 1;
console.log(typeof num);
//数字对象方式声明
var xd = new Number(2);
console.log(xd+3); //5
(2) Determine se é um número inteiro
console.log(Number.isInteger(1.3)); //false
(3) Especifique o número de casas decimais retornadas e quantas casas decimais devem ser retidas
console.log((12.345).toFixed(2)); //12.35
(4) NaN- representa um valor não numérico, usado para determinar se é um número
isNaN() //用来判断一个值是不是数字
// 如果该值转换为number等于 NaN，则此函数返回 true，可以转化成数字的字符串也被认为是数字。
注意：null, "" 两个值会被判断为数字，所以使用前应该屏蔽
console.log(isNaN('11'));
console.log(isNaN('11s'));
(5) Precisão de ponto flutuante
A linguagem js tem problema de erro de precisão ao calcular números de ponto flutuante.
var num = 0.1 + 0.2;
console.log(num);
Para resolver o problema de precisão, você pode usar o método de retenção de várias casas decimais.
var num = 0.1 + 0.2;
console.log(num.toFixed(1))
2.3.String de dados do tipo básico
(1) Definição de declaração de string
//字面量声明，可以使用单引号或者双引号
var name = '李祥';
console.log(name);
//字符串对象方式声明
var name = new String('李祥');
console.log(name);
(2) Conexão de string
//连接运算符
var name = "李祥",
info = "是一个软件工程师。";
console.log(name + info);
(3) Obtenha o comprimento da string
var name = "李祥"
console.log(name.length);
(4) Conversão de caso
console.log('小写转大写：'+'lixiang'.toUpperCase());
console.log('大写转小写：'+'LIXIANG'.toLowerCase());
(5) Remova os espaços em ambas as extremidades da string. Observe que os espaços no meio da string não podem ser removidos.
var str = ' li xiang ';
console.log(str.length);
console.log(str.trim().length);
(6) Obtenha um único caractere na string
//两种写法获取的值相同
console.log('lixiang'.charAt(3))
console.log('lixiang'[3])
(7) Intercepte a corda, feche a esquerda e abra a direita
var n = 'lixiang'.slice(1,5);
console.log(n);
(8) Encontrar string
console.log('lixiang'.indexOf('s')); //5
console.log('lixiang'.indexOf('s', 6)); //6 从第6个字符开始搜索（包含第6个）
(9) Substitua a string
var name = "李祥";
var changeName = name.replace("祥", "二祥");
console.log(changeName); //李二祥
(10) Corte e emenda de cordas
var date = '2023-08-28';
console.log(date.split('-')); //['2023', '08', '28']
var a = date.split('-');
console.log(a.join('/')); //2023/08/28
2.4. Dados de tipo básico-Booleano
(1) Definir tipo booleano
//字面量声明
var flag =true;
console.log(flag);
(2) Conversão implícita
几乎所有的类型都可以隐式转换为 Boolean 类型
true false
String 非空字符串 空字符串
Number 非0的数值 0/NaN
Array 数组不参与比较时 参与比较的空数组
Object ✅
undefined ✅
null ✅
NaN ✅
Ao comparar outros tipos com o tipo booleano, os outros tipos serão convertidos em tipos numéricos antes da comparação.
(3) Conversão de exibição
var str = '';
console.log(!!str); //false
var num = 0;
console.log(!!num); //false
var obj = null;
console.log(!!obj); //false
2.5. Dados de tipo básico - indefinidos
Indefinido é uma variável que já existe, mas não tem nenhum valor atribuído. Javascript dará a esta variável existente um valor padrão de indefinido.
// 变量被声明了，但没有赋值时，就等于undefined
var i; // i undefined
console.log(i);
// 对象没有赋值的属性，该属性的值为undefined
var o = new Object(); // o.p undefined
console.log(o.p);
// 函数没有返回值时，默认返回undefined
var x = f(); //x undefined
console.log(x);
function f(){
}
2.6. Dados do tipo básico-Nulo
null表示"没有对象"，即该处不应该有值。
用法：
（1） 作为函数的参数，表示该函数的参数不是对象
（2） 作为对象原型链的终点
Object.getPrototypeOf(Object.prototype);
2.7.Símbolo de dados do tipo básico
Símbolo é um novo tipo de dados primitivo introduzido no ES6 para representar valores únicos.
Os valores dos símbolos são gerados por meio da função Símbolo. Isso significa que o nome do atributo do objeto agora pode ter dois tipos, um é a string original e o outro é o novo tipo de Símbolo. Todos os nomes de atributos pertencentes ao tipo Símbolo são exclusivos e pode-se garantir que não entrarão em conflito com outros nomes de atributos.
<script>
var x = {
a:'1'}
var a = Symbol('a');
x[a] = '2'
console.log(x);
</script>
3.Tipos de dados de objetos JavaScript
1.Forma básica do objeto Javascript
criar um objeto
var car = {
color: 'red', //键值对
height: 1.8,
start: function () {
console.log('‘启动');
},
stop: function () {
console.log('熄火');
},
suv: true,
luntai:[1,2,3,4]
};
Chamar um método em um objeto
car.start()
Obtenha as propriedades de um objeto
car.suv
2. Operações convencionais em objetos js
(1) Adicionar/modificar atributos no objeto
console.log(car);
car.pinpai='mg7';
console.log(car);
console.log(car);
car.pinpai='保时捷';
console.log(car);
(2) Excluir usando o operador delete
console.log(car);
delete car.pinpai;
console.log(car);
(3) Consulte os atributos no objeto
- As propriedades do objeto podem ser acessadas através do operador "."
- "[]" acesso do operador, "[]" escreve uma string
console.log(car.color);
console.log(car['height']);
3. Isso acessa suas próprias propriedades em js
- Através
thispodemos acessar as propriedades e métodos do próprio objeto
var person = {
name: 'lixiang',
sayHello: function() {
console.log('Hello, I am ' + this.name)
}
}
person.sayHello();
4. Como criar objetos em js
(1) Método literal
- Declare um objeto e atribua-o a uma variável
var person = {
name: 'lixiang',
age: 18,
sex: 1
}
(2) Método construtor personalizado
- Cenários de aplicação de parâmetros fixos
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var person = new Person('lixiang',18,1);
console.log(person);
- Parâmetros de tipo de objeto
function Person(obj) {
this.name = obj.name;
this.age = obj.age;
this.sex = obj.sex;
}
var person = new Person({
name:'lixiang',age:18,sex:1});
console.log(person);
4. Estrutura de dados da matriz JavaScript
1. Como criar arrays em js
Definição de array: um array é um objeto de lista. Seu protótipo fornece operações relacionadas para percorrer e modificar elementos. O comprimento e o tipo de elemento de um array JavaScript não são fixos.
Diferente de Java, o comprimento do array em js é controlado dinamicamente, incluindo o tipo de elemento, que não é único.
Como declarar um array
// 字面量形式
var arr1=[1,2,true,'lx']
// 构造函数声明
var arr2=new Array(1,2,true,'lx')
2. Métodos básicos de operação de arrays
(1) Adicione um elemento ao array
- Adicionar método de subscrito
var arr = [1, 2, true, "lx"];
console.log(arr);
arr[4]=false;
console.log(arr);
- Insira um dado após o array
var arr = [1, 2, true, "lx"];
console.log(arr);
arr.push(0);
console.log(arr);
- Insira um dado no primeiro bit da matriz
var arr = [1, 2, true, "lx"];
console.log(arr);
arr.unshift(0);
console.log(arr);
(2) Excluir um elemento da matriz
- O último elemento da matriz é excluído
var arr = [1, 2, true, "lx"];
console.log(arr);
arr.pop();
console.log(arr);
- O primeiro elemento da matriz é excluído
var arr = [1, 2, true, "lx"];
console.log(arr);
arr.shift();
console.log(arr);
(3) Modifique os elementos da matriz
- Modificação do método subscrito
var arr = [1, 2, true, "lx"];
console.log(arr);
arr[1]=3;
console.log(arr);
(4) Consulte os elementos do array
- Consulta por subscrito
var arr = [1, 2, true, "lx"];
console.log(arr[1]);
3. Operações avançadas em arrays
(1) método de emenda
- Usado para excluir ou substituir elementos
- A função possui um valor de retorno e o que é retornado é o elemento excluído.
- Este método também alterará o array original
list.splice(2, 2, 'hello','lx')
// 第⼀个参数是控制从第几位（包含）开始删除或者替换(得看第三个参数有没有值)
// 第⼆个参数控制删除的数量
// 第三个参数将删除了的元素替换掉，可⽤逗号隔开
-
cenas a serem usadas
-
Substitua elementos em uma matriz
-
Exclua parte da matriz
-
O papel das matrizes limpas
-
var arr1=[1,2,3,4]
arr1.splice(2, 2, 'hello','lx')
console.log(arr1);
(2) Como aderir
- Converter dados do tipo array em string
- A diferença de toString pode ser separada por símbolos personalizados entre elementos personalizados.
var list=[1,2,3,4]
console.log(list.join(','))
(3) método concat
- Usado para unir dois ou mais arrays
- Não altera o array existente, mas retorna um novo array contendo os valores do array concatenado
var arr1=[1,2,3,4]
var arr2=[5,6,7,8]
var arr3 = arr1.concat(arr2);
console.log(arr3);
5.Operadores e controle de fluxo em JavaScript
1. Operadores comuns
(1) Operador de atribuição =
var name = '李祥';
console.log(name);
(2) Operadores aritméticos
*método restante
var num = 2 * 4;
console.log(num);
/divisão
var num = 4 / 2;
console.log(num);
+Adição
var num = 4 + 2;
console.log(num);
var name = 'li' + 'xiang';
console.log(name);
var arr1 = [1,2,3,4];
console.log(1+arr1);
-Subtração
var num = 6 - 4;
console.log(num);
%restante
var num = 6 % 4;
console.log(num);
(3) Operadores de incremento automático e decremento automático
- ++, -- A operação anterior será executada primeiro na expressão
var x = 1;
++x;
console.log(x);
--x;
console.log(x);
var y = 2;
var f = 30 + ++y;
console.log(y);
console.log(f);
- ++, -- As seguintes operações serão executadas no final da expressão
var y = 2;
var f = 30 + y++;
console.log(y);
console.log(f);
2. Comparação e operadores lógicos
(1) Operador de comparação
| operador | ilustrar |
|---|---|
| > | mais do que o |
| < | menor que |
| >= | Melhor que ou igual a |
| <= | menos que ou igual a |
| == | Comparação de elenco |
| === | Sem comparação de elenco |
(2) Operadores lógicos
-
AND lógico
&&: quando a expressão do lado esquerdo do operador é falsa, o valor atual é retornado imediatamente; quando a expressão do lado esquerdo é verdadeira, o valor do lado direito é retornado imediatamente. -
OR lógico
||: quando um dos dois lados do operador é verdadeiro, o valor verdadeiro é retornado, caso contrário é falso. -
prioridade
//&& 的优先级高所以结果是 true
console.log(true || false && false);
//用 () 来提高优先级
console.log((true || false) && false);
3.if, if/else, expressão ternária
(1) if executa o bloco de código quando a condição é verdadeira
//当条件为真时执行表达式代码块
if (){
//表达式或者变量=》布尔值
//条件为 true 时执行
}
//如果只有一条代码块，可以不用写 {}
if () console.log(xx)
var x = 2;
if(x===2){
console.log('x为2')
}
(2) if/else executa o bloco de código if quando a condição é verdadeira, caso contrário executa o bloco de código else
if (){
//条件为 true 时执行
}else{
//条件为 false 时执行
}
//if...else if...else语句
if (){
//条件1为 true 时执行
}else if(){
//条件2为 true 时执行
}else{
//条件都不满足时执行
}
var x = 3;
if(x===2){
console.log('x为2')
}else{
console.log('x不为2')
}
var x = 3;
if(x===2){
console.log('x为2')
}else if(x===3){
console.log('x为3')
}else{
console.log('x不为2或3')
}
(3) Expressão ternária
- gramática
条件 ? 表达式1 : 表达式2
条件为true时，执⾏表达式1，否则执⾏表达式2
var x = 4;
x===3?console.log('x is 3'):console.log('x is not 3')
4. instrução switch em js
Uma instrução switch avalia uma expressão e executa o bloco de código correspondente que corresponde ao resultado da expressão.
switch(变量/表达式) {
case 值1:
// case 1的代码块
break;
case 值2:
// case 2的代码块
break;
case 值N:
// case N的代码块
break;
default:
// default的代码块
}
var musicType = '摇滚';
switch (musicType) {
case '国风':
console.log('开始播放国风目录音乐');
break;
case '舞曲':
console.log('开始播放舞曲目录音乐');
break;
case '摇滚':
console.log('开始播放摇滚目录音乐');
break;
default:
console.log('未找到对应类型的音乐');
break;
}
5. Explicação detalhada de loops em js
(1) para loop
O loop for é uma instrução de loop em linguagem de programação. A instrução de loop consiste em duas partes: o corpo do loop e a condição de julgamento do loop. Sua expressão é:
for（单次表达式;条件表达式;末尾循环体）{
中间循环体;
}
//计算1-9累加
var num = 0;
for(var i = 1;i<10;i++){
num+=i;
}
console.log('num='+num)
(2) loop while
O loop while executará o bloco de código ciclicamente somente quando a condição for verdadeira, e o loop do-while significa que o bloco de código será executado independentemente de a condição ser verdadeira ou não.
while (条件表达式或者变量) {
代码块
}
do {
代码块
} while (条件);
var a=0
while (a<10) {
a++;
}
console.log('a='+a);
do {
console.log('执行代码块');
}while (false)
6. Funções em JavaScript
1. Introdução às funções em js
(1) Gramática
function name(参数 1, 参数 2, 参数 3) {
//要执⾏的代码
}
function name(参数 1, 参数 2, 参数 3) {
//要执⾏的代码
return x;
}
Algumas funções podem ter um valor de retorno e outras não. Falaremos sobre a função do retorno em detalhes mais tarde.
(2) O que são parâmetros formais?
- Parâmetros definidos ao declarar a função
// a、b是形参
function sum(a,b){
// 要执行的代码
return a+b;
}
(3) Quais são os parâmetros reais?
- Um parâmetro passado ao chamar a função
var num = sum(1,2) // 1、2就是实参
Resumo dos recursos:
-
Parâmetros formais e parâmetros reais são correspondência um-para-um
-
A quantidade pode não corresponder
-
O tipo do parâmetro é indefinido
-
Funções podem definir parâmetros padrão
-
Os parâmetros reais podem ser literais ou variáveis
2. Método de declaração de função js
(1) Declaração de função
function sum(参数) {
// 执⾏语句
}
// 匿名函数表达式
var sum=function(参数){
// 执⾏语句
}
// 构造函数声明
var sum =new Function([arg1[, arg2[, ...argN]],] functionBody)
function sum1(a,b) {
return a+b;
}
var sum2 = function (a,b) {
return a+b;
}
var sum3 =new Function('a','b','return a+b;');
console.log(sum1(1,2));
console.log(sum2(1,2));
console.log(sum3(1,2));
Função 3.js retorna pontos de conhecimento
(1) Como valor de retorno
function sum(a,b) {
return a+b;
}
var num = sum(1,2);
console.log(num);
Foi verificado acima.
(2) Função de interrupção
function sum(a,b) {
console.log('sum='+a+b)
return;
console.log('end')
}
sum(1,3);
4. Escopo da variável da função Js
(1) Variáveis globais
- O escopo global é executado em todo o documento JavaScript. Todas as variáveis, exceto aquelas declaradas dentro de funções e declaradas com let e const entre chaves, estão no escopo global, portanto também são chamadas de variáveis globais.
- Depois que uma variável global é declarada, ela pode ser usada em qualquer lugar do documento JavaScript, inclusive dentro de funções.
(2) Variáveis locais
- Quando definimos uma variável em uma função, ela pode ser usada em qualquer lugar da função. Este é o escopo da função.
- No entanto, deve-se notar que as variáveis definidas dentro da função não podem ser acessadas fora da função, portanto as variáveis definidas dentro da função também são chamadas de variáveis locais.
5. Argumentos de objetos semelhantes a array em js
- argumentos, que é um objeto incorporado à função em js, e os parâmetros reais do método da função são armazenados em argumentos.
- Para obter esses parâmetros reais, você precisa usar subscritos/índices para localizar cada valor como um array, mas não pode dizer que é um array porque contém outros atributos, como callee.
- E você não pode usar shift, push, join e outros métodos nele. Parâmetros nomeados sem valor serão automaticamente atribuídos como indefinidos.
function sum(){
var result = 0;
for(var i = 0;i<arguments.length;i++){
result+=arguments[i];
}
return result;
}
var num = sum(1,2,3,4,5,6);
console.log(num);
6. Execução imediata de funções em js
- Executar imediatamente uma função, como o nome sugere, declarar uma função e chamá-la imediatamente é chamado de função de execução imediata.
- Pode-se dizer também que a função de execução imediata é uma sintaxe que permite que sua função seja executada imediatamente após ser definida. A função de execução imediata também é chamada de função autoexecutável.
- A execução imediata de uma função pode acessar variáveis globais internamente. Mas é inacessível de fora, exceto dentro de si mesmo.
- gramática
( function ( “ 参数 ” ) {
" 函数方法 " ; } ) ( “ 给参数传的值 ” )
//我们的函数并没有调用的地方
(function() {
console.log('js⽴即执⾏函数');
})();
7. Compreendendo os fechamentos em js
Um encerramento é uma função que pode ler as variáveis internas de outras funções. Por exemplo, em JavaScript, apenas subfunções dentro de uma função podem ler variáveis locais, portanto os encerramentos podem ser entendidos como “funções definidas dentro de uma função”. Em essência, os encerramentos são uma ponte entre o interior de uma função e o exterior da função.
function sum () {
var x = 1;
return function () {
x++;
console.log(x);
}
}
var num = sum();
num();
num();
O código acima retorna uma função dentro de sum e executa ++ em sua variável x interna.
7.Protótipo JavaScript e cadeia de protótipos
1.O que é protótipo js
- Todas as funções possuem uma propriedade pública e não enumerável como "prototype" por padrão, que aponta para outro objeto, que é o protótipo.
- Sempre que um objeto (a função também é um objeto) é definido, um atributo __proto__ é gerado, que é chamado de protótipo implícito.
- O atributo __proto__ aponta para o protótipo do construtor do objeto, que é chamado de protótipo explícito. Todo objeto “herda” propriedades do protótipo.
function Person(name){
this.name = name;
this.eat = function (){
console.log(this.name+'吃东西');
}
}
var p = new Person('李祥');
console.log(p);
Publicidade de métodos de atributos. Por exemplo, se eu quiser adicionar um atributo através de protótipo, todos os objetos instanciados poderão acessá-lo.
Person.prototype.age=18;
Person.prototype.eat = function (name){
console.log(name+'吃东西');
}
function Person(name){
this.name = name;
}
var p1 = new Person('李祥');
var p2 = new Person('张三');
console.log(p1.age);
p1.eat("李祥");
console.log(p2.age);
p2.eat("张三");
Nota: Somente o construtor pode alterar as propriedades do protótipo.
2.O que é cadeia de protótipo js
Somente funções possuem prototypepropriedades, objetos possuem __proto__ || [[prototype]]propriedades
cadeia de protótipos
- Tudo em js é um objeto, então sempre acessar
__proto__as propriedades criará uma cadeia. - O fim da cadeia é nulo
- Quando o mecanismo js procura as propriedades de um objeto, ele primeiro determina se a propriedade existe no próprio objeto.
- Propriedades que não existem serão pesquisadas ao longo da cadeia de protótipos.
function Car() {
}
var car = new Car()
O que é cadeia de protótipos
原型链解决的主要是继承问题。
每个对象拥有一个原型对象，通过 proto 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法
3. Detecção de tipo em js
(1) typeof: usado para determinar o tipo de dados básicos, não pode distinguir entre objetos e arrays.
var a = 1;
console.log('a:'+typeof a);
var b = "1";
console.log('b:'+typeof b);
var s;
console.log('s:'+typeof s);
function fun() {
}
console.log('fun:'+typeof fun);
var c = [1, 2, 3];
console.log('c:'+typeof c);
var o = {
name: "lixiang" };
console.log('o:'+typeof d);
(2) instanceof: usado para determinar o tipo de dados complexos e pode distinguir objetos de matrizes
instanceofO operador é usado para detectar prototypese as propriedades do construtor aparecem na cadeia de protótipos de um objeto de instância, o que pode ser entendido como se se trata de uma instância de um objeto.
var arr = [];
console.log(arr instanceof Array);
var obj = {
};
console.log(obj instanceof Array);
console.log(obj instanceof Object);
var fun = new Fun();
console.log(fun instanceof Fun);
8. Atualização parcial de JavaScript ajax
1. Entenda o que são dados JSON
(1) O que é JSON
- JSON (JavaScript Object Notation) é um formato leve de troca de dados. É baseado em um subconjunto de JavaScript e é fácil de escrever e ler por humanos e fácil de analisar por máquinas.
- JSON usa um formato de texto completamente independente de linguagem, mas também usa convenções semelhantes às da família de linguagens C (incluindo C, C++, C#, Java, JavaScript, Perl, Python, etc.).
- Essas características tornam o JSON uma linguagem ideal para troca de dados.
- JSON é usado para transmitir dados entre redes
(2) Formato de sintaxe JSON
- O nome da propriedade deve ser uma string entre aspas duplas
- Não pode haver vírgula após o último atributo
(3) Serialização e desserialização
var obj = {
name: "李祥",
age: "18",
};
var a = JSON.stringify(obj); // 序列化、转换成JSON格式
var b = JSON.parse(a); // 反序列化 、转换成对象格式
console.log(a);
console.log(b);
2. Introdução ao Ajax e seus cenários de uso
(1) O que é ajax
O nome completo do Ajax é "Asynchronous Javascript And XML", que significa "Asynchronous JavaScript and XML" em chinês. É uma tecnologia usada para criar páginas da web dinâmicas e rápidas. É uma tecnologia que pode atualizar parte da página da web sem recarregar toda a página da web. .
(2) Princípio
-
Envie uma solicitação assíncrona ao servidor por meio do objeto XmlHttpRequest para obter dados do servidor
-
Em seguida, use js para operar o DOM e atualizar a página
-
Foi introduzido pela primeira vez no IE5 e é uma tecnologia que oferece suporte a solicitações assíncronas.
-
Simplificando, o javascript pode fazer solicitações ao servidor e processar as respostas em tempo hábil, sem bloquear a execução do programa, obtendo o efeito de não atualização.
-
Observação: o JavaScript é de thread único e bloqueará a execução do código, portanto, o XmlHttpRequest é introduzido para processar dados assíncronos.
3. Prática de caso ajax manuscrita
(1) Etapas de criação do Ajax
- Criar objeto ajax
var xhr;
if (window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5 兼容
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
- Definir endereço e método de solicitação
//第⼀个参数是⽤于指定请求的⽅式，⼀般⽤⼤写
//第二个参数代表请求的URL
//第三个参数是表示是否异步发送请求的布尔值，如果不填写，默认为true，表示异步发送，同步已经被弃用
xhr.open("GET","服务端接口url")
- Enviar solicitação (parâmetros opcionais, nulos)
xhr.send()
- (Evento de registro) Espere até que o navegador retorne o resultado para aceitar a resposta
//注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
xhr.onreadystatechange = function () {
// 为了保证数据完整返回，我们一般会判断两个值
if (xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText);
} else {
alert('出错了，Err:' + xhr.status);
}
};
(2) Prática de caso
Uma interface de servidor de teste está escrita aqui.
var xhr;
if (window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5 兼容
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","http://localhost:8088/spring-test/query")
xhr.send();
xhr.onreadystatechange = function () {
// 为了保证数据完整返回，我们一般会判断两个值
if (xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText);
} else {
alert('出错了,Err:' + xhr.status);
}
};
9. Objeto de documento JavaScript DOM
1. Explicação detalhada do DOM em js
(1) DOM (um padrão proposto pelo w3c)
- DOM é o Document Object Model, que é um conceito abstrato.
- Define métodos para acessar e manipular documentos HTML
(2) A diferença entre HTML e texto txt
- HTML é hipertexto, que pode conter diversos formatos, funções, links, imagens, vídeos, etc.
- TXT é a extensão de um arquivo de texto, o que indica que esse tipo de arquivo precisa ser aberto com o Bloco de Notas para visualização ou edição.
(3) O que é árvore DOM
- O navegador armazena documentos estruturados na memória do navegador em uma estrutura de “árvore”.
- Cada elemento HTML é definido como um nó.
- Este nó possui atributos próprios (nome, tipo, conteúdo, etc.).
- Possui relacionamento hierárquico próprio (pai, filho, irmão).
2. Operações comuns de nós DOM
(1) Encontre nós
| Método | descrever |
|---|---|
| documento.getElementById(id) | Encontre elementos por ID de elemento |
| document.getElementsByTagName(nome) | Encontre elementos por nome de tag |
| document.getElementsByClassName(nome) | Encontre elementos por nome de classe |
| document.querySelector(seletor) | Selecione elementos através do seletor CSS ou ID, a pseudoclasse não pode ser selecionada |
<h1 id="h1" class="h1">李祥</h1>
<script>
//根据标签名
var h1 = document.getElementsByTagName("h1")[0];
console.log(h1.outerHTML);
//根据id
var h2 = document.getElementById("h1");
console.log(h2.outerHTML);
//根据className
var h3 = document.getElementsByClassName("h1")[0];
console.log(h3.outerHTML);
//根据className
var h4 = document.querySelector(".h1");
console.log(h4.outerHTML);
//根据ID
var h5 = document.querySelector("#h1");
console.log(h5.outerHTML);
</script>
(2) Alterar o conteúdo do elemento
| Método | descrever |
|---|---|
| element.innerHTML = novo conteúdo HTML | Alterar o HTML interno de um elemento |
| elemento.atributo = novo valor | Alterar valores de atributos de elementos HTML |
| element.setAttribute(atributo, valor) | Alterar valores de atributos de elementos HTML |
| element.style.property = novo estilo | Como mudar o estilo dos elementos HTML |
<h1 id="h1" class="h1">李祥</h1>
<script>
//根据标签名
var h1 = document.getElementsByTagName("h1")[0];
h1.innerHTML = 'lixiang';
h1.id='h2'
h1.style.backgroundColor='red'
</script>
Nota: outerHTML fará com que os estilos sejam perdidos.
h1.outerHTML = 'lixiang';
(3) Adicionar e excluir elementos
| Método | descrever |
|---|---|
| document.createElement(elemento) | Crie elementos HTML |
| documento.removeChild(elemento) | Excluir elementos HTML |
| documento.appendChild(elemento) | Adicione elementos HTML |
| documento.replaceChild(elemento) | Substitua elementos HTML |
| documento.write(texto) | Método HTML gravável |
var div = document.createElement('div');
div.innerHTML = '我是动态创建的HTML';
document.body.append(div);
3. Operações de eventos JS no DOM
(1) O que é um evento?
- Eventos referem-se a coisas que acontecem em elementos HTML.
- Por exemplo, quando um elemento de imagem é clicado, uma série de operações é acionada.
- Quando o evento é acionado, você pode definir um trecho de código js para ser executado.
(2) Eventos HTML comuns
| descrever | evento |
|---|---|
| mudanças no elemento html | em mudança |
| O usuário clicou no elemento | ao clicar |
| O mouse passa sobre o elemento | passar o mouse |
| Elemento de folhas de rato | onmouseout |
| pressione o teclado | onkeydown |
| A página terminou de carregar | carregando |
<div id="d1" onclick="test()">点击</div>
<script>
function test(){
console.log("点击事件");
}
</script>
<div id="d1">点击</div>
<script>
document.getElementById("d1").addEventListener('click',function(){
console.log("点击事件");
})
</script>
Nota: Usando addEventListener, você pode adicionar vários outros eventos.
<div id="d1">点击</div>
<script>
document.getElementById("d1").addEventListener('click',function(){
console.log("点击事件1");
})
document.getElementById("d1").addEventListener('click',function(){
console.log("点击事件2");
})
document.getElementById("d1").addEventListener('click',function(){
console.log("点击事件3");
})
</script>
<div id="d1">鼠标移入移出事件</div>
<script>
document.getElementById("d1").addEventListener('mouseover',function(){
console.log("鼠标移入事件");
})
document.getElementById("d1").addEventListener('mouseout',function(){
console.log("鼠标移出事件");
})
</script>
4. Alguns mecanismos de eventos em js
(1) Dois mecanismos de propagação de eventos
Borbulhamento de eventos: os eventos são inicialmente recebidos pelo elemento mais específico e depois se propagam para nós menos específicos. Somente ouvintes marcados como não-capturadores serão chamados durante a fase de bolha do evento. Ou seja, esses ouvintes são registrados quando o terceiro parâmetro é falso ao chamar addEventListener(). O valor padrão é falso.
Captura de eventos: nós DOM menos específicos devem receber eventos mais cedo, enquanto os nós mais específicos devem receber eventos por último. Durante esta fase, apenas os ouvintes configurados para trabalhar durante a fase de captura são chamados. Para definir um ouvinte para a fase de captura, defina o terceiro parâmetro como true ao chamar addEventListener.
(2) Ilustração de captura de eventos e borbulhamento de eventos
(3) O que é um agente de eventos?
- O proxy de eventos usa o evento bubbling para gerenciar todos os eventos de um determinado tipo, especificando apenas um manipulador de eventos.
(4) Cancelar borbulhamento ou captura
- Clique na subcategoria para exibir a subcategoria, clique na categoria pai para exibir a categoria pai.
<ul id="father">
父类
<li id="son">子类</li>
</ul>
<script>
document.getElementById("father").addEventListener("click", function (e) {
console.log("父类");
});
document.getElementById("son").addEventListener("click", function (e) {
console.log("子类");
e.stopPropagation();
});
5.Temporizador em js
(1) Execução atrasada
setTimeout(function(){
}, 毫秒)
clearTimeout(timer) // 停止,参数必须是由 setTimeout() 返回的timer
console.log('1');
console.log('2');
setTimeout(function(){
console.log('5');
},5000)
console.log('3');
console.log('4');
(2) Execução agendada
setInterval(function(){
}, 毫秒)
clearInterval(timer) // 参数必须是由 setInterval() 返回的timer
console.log('1');
console.log('2');
setInterval(function(){
console.log('5');
},2000)
console.log('3');
console.log('4');
10. BOM do objeto do navegador JavaScript
1. Funções integradas comumente usadas do BOM
(1) O que é lista técnica
BOM (Browser Object Model) é o modelo de objeto do navegador. Ele fornece objetos que interagem com a janela do navegador independentemente do conteúdo. Seu objeto principal é a janela.
(2) Objetos BOM comumente usados
- objeto janela
- O objeto janela é o objeto BOM de nível superior.
- O objeto window é uma interface para JS acessar a janela do navegador.
- O objeto janela é um objeto global e todas as variáveis globais declaradas e métodos e funções globais são, em última análise, propriedades ou métodos do objeto janela.
- window.open(): abre uma nova janela do navegador, aceitando quatro parâmetros (URL/método de abertura/parâmetros de janela/valor booleano para substituir o histórico da página atual).
- window.close() ：关闭新打开的窗口（仅限open（）打开的窗口）。
- window.moveTo()：移动当前窗口。
- window.resizeTo()：调整当前窗口的尺寸。
- screen对象 ：包含显示设备的信息
- screen.height、screen.width：返回设备的分辨率。
- screen.availWidth、screen.availHeight：返回屏幕可用宽高，值为屏幕的实际大小减去操作系统某些功能占据的空间，如系统任务栏。
- location对象：保存当前文档信息，将URL解析为独立片段
- location.href 返回当前页面完整的URL ,修改这个属性，即跳转新页面
- location.hash 返回URL中的hash（#号后跟零或多个字符）
- location.host 返回服务器名称和端口号
- location.port 返回服务器端口号
- location.pathname 返回URL中的目录和文件名
- location.hostname 返回不带端口号的服务器名称
- location.protocol 返回页面使用的协议（http://或https://)
- location.search 返回URL的查询字符串，字符串以问号开头
- navigator对象：提供一系列属性用于检测浏览器
- window.navigator.userAgent：通过userAgent可以判断用户浏览器的类型
- window.navigator.platform：通过platform可以判断浏览器所在的系统平台类型
- window.navigator.online：判断是否联网
- history 对象
- history.back()：与在浏览器点击后退按钮相同
- history.forward()：与在浏览器中点击按钮向前相同
- history.go(参数)：前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面，如果是N则前进或后退N个页面
- history.length(): 保存历史记录的数量
- armazenamento local
- localStorage.setItem: definir valor
- localStorage.removeItem: remover valor
2. Caixa pop-up JavaScript
(1) Caixa de advertência
alert('hello')
(2) Caixa de confirmação
var isConfirm = confirm('请确认')
console.log('下⼀步', isConfirm)
(3) Caixa de aviso
var isPrompt = prompt('请输⼊姓名')
console.log(isPrompt) // 是null 或者 ⽤户输⼊的值
3. Conceitos básicos de cookies de navegador
(1) O que é biscoito
- Os cookies são utilizados para armazenar dados do navegador no seu computador, com capacidade aproximada de 4KB.
- Sintaxe básica: document.cookie
(2) Função de cookie
- Depois que o navegador for fechado, o servidor esquecerá tudo sobre o usuário
- Deixe o navegador lembrar as informações do usuário: informações de login
(3) Operação de cookies
- Como criar e ler cookies
// 通过Document对象
document.cookie="username=Nick; expires=Thu, 18 Dec 2043 12:00:00 GMT";
- Apagar cookies
// 设置过期时间
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // nul
- Caso
window.onload = function(){
checkCookie();
}
// 保存cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = 'expires=' + d.toGMTString();
document.cookie = cname + '=' + cvalue + ';' + expires;
}
// 获取cookie
function getCookie(cname) {
var name = cname + '=';
var ca = document.cookie.split(';'); // 将多个cookie字符串以;分割数组;
for (var i = 0; i < ca.length; i++) {
if (ca[i].indexOf(name)>= 0) {
return ca[i].split('=')[1]
}
}
return '';
}
function checkCookie(){
var user=getCookie("username");
if (user){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user){
setCookie("username",user,30);
}
}
}
