Notas básicas de JavaScript 1
Bem-vindo ao escanear o código QR para seguir a conta pública do WeChat "Ambição e Família"
Aprenda e organize de acordo com o vídeo do professor rosa https://www.bilibili.com/video/BV1Sy4y1C7ha
1.1 JavaScript inicial
Composição de JavaScript:
1.ECMAScript
ECMAScript é uma linguagem de programação padronizada pela ECMA International (anteriormente European Computer Manufacturers Association). Essa linguagem é amplamente usada na World Wide Web. É frequentemente chamada de JavaScript ou JScript, mas na verdade os dois últimos são implementações da linguagem ECMAScript. E expandir
2.DOM-Document Object Model
O Document Object Model (DOM) é uma interface de programação padrão para processar linguagens de marcação extensíveis recomendadas pela organização W3C. Através da interface fornecida pelo DOM, vários elementos da página podem ser operados (tamanho, posição, cor, etc.)
3. Modelo de Objeto de Navegador BOM
BOM (Browser Object Model, BOM para abreviar) refere-se ao modelo de objeto do navegador, que fornece uma estrutura de objeto que é independente do conteúdo e pode interagir com a janela do navegador. Por meio do BOM, você pode operar a janela do navegador, como uma caixa pop-up, controlar o salto do navegador, obter resolução, etc.
1.2 Comentários de JavaScript
1. Comentário de linha única
Para melhorar a legibilidade do código, JS, assim como CSS, também fornece uma função de comentário. Existem dois tipos principais de comentários em JS, comentários de uma linha e comentários de várias linhas.
A maneira de comentar comentários de uma linha é a seguinte:
// 我是一行文字，不想被 JS引擎 执行，所以 注释起来
2. Comentários multilinhas
/*
获取用户年龄和姓名
并通过提示框显示出来
*/
1.3 Instruções de entrada e saída de JavaScript
| método | Descrição | Atribuição |
|---|---|---|
| alerta (msg) | Caixa de aviso pop-up do navegador | Navegador |
| console.log (msg) | O console do navegador imprime informações | Navegador |
| prompt (informações) | O navegador exibe uma caixa de entrada e o usuário pode inserir | Navegador |
Nota: alert () é usado principalmente para exibir mensagens aos usuários, console.log () é usado para mostrar mensagens de tempo de execução aos programadores, console.log () está localizado no console F12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS输入输出</title>
<script>
// 这是一个输入框
prompt('请输入您的年龄');
// alert 弹出警示框 输出的 展示给用户的
alert('年龄为:')
// console 控制台输出 给程序员测试用的
console.log('我是程序员能看到的');
</script>
</head>
<body>
</body>
</html>
2.1 Variáveis
1. Declarar variáveis
// 声明变量
var age; // 声明一个 名称为age 的变量
var é uma palavra-chave JS usada para declarar variáveis (variável significa variável). Depois de usar esta palavra-chave para declarar uma variável, o computador alocará automaticamente espaço de memória para a variável. O programador não precisa gerenciar essa
idade é o nome da variável definido pelo programador. Precisamos usar o nome da variável para acessar o espaço alocado na memória.
2. Atribuição
age = 20; // 给 age 这个变量赋值为 20
3. Inicialização de variáveis
var age = 20; // 声明变量同时赋值为 20
Declarando uma variável e atribuindo um valor, chamamos isso de inicialização da variável
Caso:
1. Uma caixa de entrada é exibida, solicitando que o usuário insira um nome.
2. Uma caixa de diálogo aparece para mostrar o nome que o usuário acabou de inserir
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输入输出案例</title>
<script>
// 1.用户输入名字
var name=prompt('请输入您的名字:');
// 2.打印名字
alert(name);
</script>
</head>
<body>
</body>
</html>
5. Atualizar variáveis
Depois que uma variável é reatribuída, seu valor original será sobrescrito, e o valor da variável estará sujeito ao valor da última atribuição
var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了
6. Declare várias variáveis ao mesmo tempo
Ao declarar várias variáveis ao mesmo tempo, você só precisa escrever uma var. Use vírgulas para separar vários nomes de variáveis
var age = 10, name = 'zs', sex = 2;
2.2 Convenção de nomenclatura de variável
1.由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
2.严格区分大小写 var app; 和 var App; 是两个变量
3.不能以数字开头 18age 是错误的
4.不能是关键字、保留字例如：var、for、while
5.变量名必须有意义 MMD BBD nl → age
6.遵守驼峰命名法-首字母小写,后面单词的首字母需要大写. myFirstName
3. Tipo de dados
3.1 Introdução aos tipos de dados
3.1.1 Por que precisamos de tipos de dados
Em um computador, o espaço de armazenamento necessário para diferentes dados é diferente.A fim de facilitar a divisão dos dados em dados com diferentes tamanhos de memória necessários e fazer uso total do espaço de armazenamento, diferentes tipos de dados são definidos.
Simplificando, o tipo de dados é o modelo de categoria dos dados. Por exemplo, o nome "Zhang San" e a idade têm 18 anos. Os tipos desses dados são diferentes.
3.1.2 Tipo de dados variável
As variáveis são usadas para armazenar valores. Elas têm nomes e tipos de dados. O tipo de dado da variável determina como os bits que representam esses valores são armazenados na memória do computador. JavaScript é uma linguagem fracamente tipada ou dinâmica. Isso significa que não há necessidade de declarar o tipo da variável com antecedência, o tipo será determinado automaticamente durante a execução do programa
var age = 10; // 这是一个数字型
var areYouOk = '是的'; // 这是一个字符串
Quando o código está em execução, o tipo de dados da variável é julgado pelo mecanismo JS de acordo com o tipo de dados do valor da variável no lado direito de =. Após a execução, a variável determina o tipo de dados
JavaScript possui tipagem dinâmica, o que também significa que a mesma variável pode ser usada como um tipo diferente:
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
3.1.3 Classificação dos tipos de dados
JavaScript divide os tipos de dados em duas categorias:
1. Tipos de dados simples (Número, String, Booleano, Indefinido, Nulo)
2. Tipos de dados complexos (objeto)
3.2. Tipos de dados simples
Os tipos de dados simples em JavaScript e suas descrições são os seguintes:
| Tipo de dados simples | Descrição | Padrões |
|---|---|---|
| Número | Numérico, incluindo valores inteiros e de ponto flutuante | 0 |
| boleano | Os tipos de valor booleano, como verdadeiro e falso, são equivalentes a 1 e 0 | falso |
| Fragmento | Tipo de string, como "Zhang San" | “” |
| Underfined | var a; a variável a é declarada, mas nenhum valor é fornecido, neste momento a = subfinido | subfinido |
| Nulo | var a = null; declara que a variável a é nula | nulo |
3.2.1 Número
Os tipos de número JavaScript podem ser usados para armazenar valores inteiros, bem como decimais (números de ponto flutuante)
var age = 21; // 整数
var Age = 21.3747; // 小数
1. Base digital
As bases mais comuns são binárias, octal, decimal e hexadecimal.
// 1.八进制数字序列范围：0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
// 2.十六进制数字序列范围：0~9以及A~F
var num = 0xA;
八进制前面加0，十六进制前面加 0x
2. Faixa de numeração
Valores máximo e mínimo em JavaScript
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
Valor máximo: Number.MAX_VALUE, este valor é: 1,7976931348623157e + 308
Valor mínimo: Number.MIN_VALUE, este valor é: 5e-32
3. Três valores especiais do tipo digital
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
Infinito, representando infinito, maior que qualquer valor numérico
-Infinito, representando infinitesimal, menor que qualquer valor numérico
NaN, Não é um número, representando um valor não numérico
4.isNaN ()
Usado para determinar se uma variável é um tipo não numérico, retorna verdadeiro ou falso
isNaN (x), se x for um número, retorna falso, se não for um número, retorna verdadeiro, x é um tipo não numérico
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一个非数字
3.2.2 String
O tipo de string pode ser qualquer texto entre aspas e sua sintaxe é aspas duplas "" e aspas simples ``
var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法
Como os atributos em tags HTML usam aspas duplas, recomendamos o uso de aspas simples em JS.
1. Aspas da string aninhadas
JS pode usar aspas simples para aninhar aspas duplas ou usar aspas duplas para aninhar aspas simples (duplas externas e simples internas, simples externas e duplas internas)
var strMsg = '我是"一个"程序猿'; // 可以用''包含""
var strMsg2 = "我是'一个'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配
2. Caractere de escape da string
Semelhante aos caracteres especiais em HTML, existem caracteres especiais em strings, que chamamos de caracteres de escape.
Todos os caracteres de escape começam com \. Os caracteres de escape comumente usados e suas descrições são os seguintes:
| Escapes | explicar |
|---|---|
| \ n | Caractere de nova linha, n significa nova linha |
| \ \ | Golpear \ |
| \ ' | 'apóstrofo |
| \ " | "Aspas duplas |
| \ t | tabulação |
| \ b | Espaço, b significa em branco |
3. Comprimento da corda
Uma string é composta de vários caracteres, e o número desses caracteres é o comprimento da string. O comprimento de toda a string pode ser obtido por meio da propriedade length da string.
var strMsg = "Hello!";
alert(strMsg.length); // 显示 6
4. União de cordas
Várias strings podem ser emendadas usando +. O método de emenda é string + qualquer tipo = nova string após a
emenda, antes de emendar qualquer tipo adicionado à string em uma string e, em seguida, fazer a emenda em uma nova string String
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112
O sinal "+" resume a fórmula: adicione valores numéricos e conecte os caracteres
5. Aprimoramento de emenda de cordas
console.log('pink老师' + 18); // 只要有字符就会相连
var age = 18;
// console.log('pink老师age岁啦'); // 这样不行哦
console.log('pink老师' + age); // pink老师18
console.log('pink老师' + age + '岁啦'); // pink老师18岁啦
Freqüentemente, concatenamos strings e variáveis, porque as variáveis podem modificar facilmente os valores internos. As
variáveis não podem ser colocadas entre aspas, porque as variáveis entre aspas se tornarão strings.
Se houver concatenações de strings em ambos os lados da variável, o mantra "Citar ", exclua o número, escreva a variável e adicione o meio
3.2.3 Booleano
O tipo booleano tem dois valores: verdadeiro e falso, onde verdadeiro significa verdadeiro (certo) e falso significa falso (falso).
Ao adicionar um tipo booleano e um tipo de número, o valor de verdadeiro é 1 e o valor de falso é 0.
console.log(true + 1); // 2
console.log(false + 1); // 1
3.2.4 Indefinido 和 Nulo
Uma variável que não é atribuída após a declaração terá um valor padrão de indefinido (se conectar ou adicionar, preste atenção ao resultado)
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
Uma variável declarada fornece um valor nulo, e o valor armazenado nela é nulo (ao aprender o objeto, continuaremos estudando nulo)
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
3.3 Obter tipo de dados variável
3.3.1 Obtenha o tipo de dados da variável de detecção
typeof pode ser usado para obter o tipo de dados da variável de detecção
var num = 18;
console.log(typeof num) // 结果 number
Diferentes tipos de valores de retorno
| Tipos de | Exemplo | resultado |
|---|---|---|
| Fragmento | tipo de "Little White" | "fragmento" |
| Número | tipo de 18 | "número" |
| boleano | tipo de verdade | "boleano" |
| Underfined | tipo de subfinido | “Underfined” |
| Nulo | typeof null | "nulo" |
3.3.2 Literal
A quantidade literal é a representação de um valor fixo no código-fonte, em termos leigos, é como a quantidade literal expressa esse valor.
1. Literais de número: 8, 9, 10
2. Literais de string: 'back end', "front end"
3. Literais booleanos: verdadeiro, falso
3.4 Conversão de tipo de dados
3.4.1 Converter para tipo digital (ênfase)
| o caminho | Descrição | Estudo de caso |
|---|---|---|
| função parselnt (String) | Converter tipo de string em tipo numérico inteiro | parcelnt ('78 ') |
| função parseFloat (string) | Converter tipo de string em tipo numérico de ponto flutuante | parseFloat ('78 .21 ') |
| Função de lançamento de número () | Converter tipo de string em tipo numérico | Número ('12 ') |
| conversão implícita js (. * /) | Use operações aritméticas para converter implicitamente em numérico | '12'-0 |
Nota: Dificuldades de conversão implícita para js https://blog.csdn.net/itcast_cn/article/details/82887895
https://www.cnblogs.com/chenmeng0818/p/5954215.html
Caso 1: Calculando a idade
Peça uma caixa de entrada para aparecer na página, depois de inserirmos o ano de nascimento, podemos calcular nossa idade
// 1. 弹出输入框，输入出生年份，并存储在变量中
var year = prompt('请输入您的出生年份：'); // 用户输入
// 2. 用今年减去刚才输入的年份
var result = 2019 - year; // 程序内部处理
// 3. 弹出提示框
alert('您的年龄是:' + result + '岁'); // 输出结果
Caso 2: somador simples
Calcule o valor dos dois números. Depois que o usuário inserir o primeiro valor, a segunda caixa de entrada aparecerá e insira o segundo valor. Finalmente, o resultado da adição dos dois valores de entrada será exibido através do pop- janela para cima.
// 1. 先弹出第一个输入框，提示用户输入第一个值
var num1 = prompt('请输入第一个值：');
// 2. 再弹出第二个框，提示用户输入第二个值
var num2 = prompt('请输入第二个值：');
// 3. 将输入的值转换为数字型后，把这两个值相加，并将结果赋给新的变量
//**如果是减法,除法,乘法则不需要转换
var result = parseFloat(num1) + parseFloat(num2);
// 4. 弹出结果
alert('结果是:' + result);
3.4.2 Converter para booleano
| o caminho | Descrição | Estudo de caso |
|---|---|---|
| boleano | Converta outros tipos em booleanos | Boolean ('true'); |
Os valores que representam nulo e negação serão convertidos em falsos, como '', 0, NaN, nulo, indefinido e o
restante será convertido em verdadeiro
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true
4. Operadores
Operador precedente
| prioridade | Operador | pedido |
|---|---|---|
| 1 | Parênteses | () |
| 2 | Operador unário | ++ -! |
| 3 | Operador Aritmético | 先* / 后+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != !== === |
| 6 | 逻辑运算符 | 先&& 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |