Resuma e organize a sintaxe básica do JavaScript

Autor：Eve Cole Data da Última Atualização：2022-08-08 08:55:00

Este artigo traz conhecimentos relevantes sobre JavaScript, que apresenta principalmente questões relacionadas à sintaxe básica. JavaScript é a linguagem de script mais popular na Internet. Vamos dar uma olhada nisso juntos, espero que seja útil para todos.

Introdução

JavaScript é a linguagem de script mais popular na Internet. Essa linguagem pode ser usada para HTML e web e pode ser amplamente utilizada em servidores, PCs, laptops, tablets, smartphones e outros dispositivos.

Recursos do JavaScript

JavaScript é uma linguagem de script.
JavaScript é uma linguagem de programação leve.
JavaScript é 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.
JavaScript é fácil de aprender.

JavaScript foi padronizado como linguagem pela ECMA (European Computer Manufacturers Association) através do ECMAScript.

Ano	Nome	Descrição
1997	ECMAScript 1	Primeira versão
1998	ECMAScript 2	Mudanças de versão
1999	ECMAScript 3	Adicionar expressão regular Adicionar try/catch
	ECMAScript 4	não foi lançado.
2009	ECMAScript	5
adiciona	"	modo estrito" e modo estrito adiciona suporte a JSON
2011	ECMAScript	5.1
adiciona	classes	e módulos.
Adicione

o uso de

Array.prototype.includes

Os scripts em HTML devem estar localizados entre as tags <script> e </script>. Os scripts podem ser colocados nas seções <body> e <head> de uma página HTML.

Freqüentemente, precisamos executar código quando ocorre um evento, como quando o usuário clica em um botão. Se colocarmos o código JavaScript em uma função, poderemos chamar a função quando o evento ocorrer.

Exemplo 1: função de script em head

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>script na tag head</title>
    <roteiro>
        function minhaFunção() {
            document.getElementById("demo").innerHTML = "Esta é minha função";
        }
    </script>
</head>
<corpo>
<h1>Minha função</h1>
<p id="demo">Um parágrafo</p>
<button type="button" onclick="myFunction()">Esta é uma função</button>
</body>
</html>

Exemplo 2: função de script no corpo

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>script no corpo</title>
</head>
<corpo>
<h1>Minha função</h1>
<p id="demo">Minha função</p>
<button type="button" onclick="myFunction()">Clicar</button>
<roteiro>
    function minhaFunção() {
        document.getElementById("demo").innerHTML = "Esta é minha função"
    }
</script>
</body>
</html>

JavaScript também pode ser colocado externamente para chamada. Observe que a extensão externa é .js.

Exemplo 3: chamada externa JavaScriptExternal

call.js

function myFunction() {
    document.getElementById('demo').innerHTML = "Esta é minha função"
}

Chamar script externo

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>Chamando script externo</title>
</head>
<corpo>
<p id="demo">Um parágrafo de texto</p>
<button type="button" onclick="myFunction()">Experimente</button>
<script src="external script.js"></script>
</body>
</html>

JavaScript

de saída

Os dados podem ser gerados de diferentes maneiras:

use window.alert() para exibir uma caixa de aviso.
Use o método document.write() para escrever conteúdo em um documento HTML.
Use innerHTML para escrever em elementos HTML.
Use console.log() para escrever no console do navegador.

Exemplo 1: saída da janela pop-up aler()

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>saída de alerta</title>
</head>
<corpo>
<h1>saída de alerta</h1>
<roteiro>
    janela.alert(5 + 6)
</script>
</body>
</html>

Exemplo 2: saída document.write()

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>saída document.write</title>
</head>
<corpo>
<h1>saída document.write</h1>
<roteiro>
    documento.write(Data());
    document.write("Olá,Web!");
</script>
</body>
</html>

Exemplo 3: Gravar no documento HTML

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>Escrever em documento HTML</title>
</head>
<corpo>
<h1>Gravar em documento HTML</h1>
<roteiro>
    function minhaFunção() {
        document.write("saída da função");
    }
</script>
<button onclick="myFunction()">Clique aqui</button>
</body>
</html>

Exemplo 4: Use console.log() para gravar no console do navegador

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>Use console.log() para escrever no console do navegador</title>
</head>
<corpo>
<h1>console.log() grava no console do navegador</h1>
<roteiro>
    uma = 5;
    b = 6;
    c = a + b;
    console.log(c)
</script>
</body>
</html>

Introdução à sintaxe

JavaScript é uma linguagem de script. É uma linguagem de programação leve, mas poderosa.

Literais

Em linguagens de programação, geralmente valores fixos são chamados de literais.

Literal de número: pode ser um número inteiro ou decimal, ou notação científica (e). Como 3,14, 5,88, etc.
String literal: " Você pode usar aspas simples ou duplas. Como "Hello", "Web", etc.
Expressão literal: valor fixo para cálculo. 3 + 2,2, 3,14 * 2, etc.
Array (Array): Literal: Definir uma matriz. Como [1,2,3,4,5,6].
Objeto: Literal: Defina um objeto como {firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue. "}.
Literal de função: defina uma função. Por exemplo, function myFunction(a, b) { return a * b;}.

Observe que em JavaScript, a instrução precisa ser finalizada com ";" .Variáveis JavaScrip

linguagens de programação, variáveis são usadas para armazenar valores de dados. JavaScript usa a palavra-chave var para definir variáveis e usa o sinal de igual para atribuir valores às variáveis. As variáveis podem operar umas nas outras:

var y = false // valor booleano var length = 16; // Número var points = x * 10; // Cálculo do número var lastName = "Johnson"; // String var cars = ["Saab", "Volvo", "BMW"]; "John", lastName:"Doe"}; //

Função JavaScript

do dicionário de objetos

Para referenciar repetidamente a mesma função e reduzir a conveniência de escrita e manutenção de código, JavaScript fornece funções de função, guiadas pela palavra-chave function:

function myFunc (a , b) {
    return a + b; // Retorna o resultado de a+b}

Recursos do JavaScript

Comparado com outras linguagens, o JavaScript possui os seguintes recursos:

JavaScript diferencia maiúsculas de minúsculas.
JavaScript usa o conjunto de caracteres Unicode.
JavaScript recomenda usar a nomenclatura camel case para definir variáveis e evitar palavras-chave na nomenclatura.
JavaScript é uma linguagem de tipo fraco e as variáveis são definidas usando a palavra-chave var.

transiente

Palavras-chave JavaScript (em ordem alfabética)
abstrato	else	instanceof	super
boolean	enum	int	switch
break	interface	de exportação	sincronizado
byte	estende	deixe	este
caso	false	longo	lance
catch	final	nativo	lança
char	finalmente	nova	classe
float	nulo	verdadeiro	const
para	pacote	tente	continuar
função	tipo	privado	de
depurador	goto	protegido	var
padrão	se	public	void
delete	implements	return	volátil
do	import	short	while
double	in	static	com

comentário JavaScript (o mesmo que Java)

// Este é o código: comentário de frase única, geralmente tecla ctrl + L no editor.

/* Este é o código*/: Comentários multilinhas, geralmente teclas ctrl + shift + L no editor.

Instruções

As instruções JavaScript são comandos emitidos para o navegador, informando ao navegador o que fazer. A seguinte instrução JavaScript gera o texto "Hello World!" para o elemento HTML com id="demo":

document.getElementById("demo").innerHTML = "Hello World!"

; colchetes, isso é muito semelhante ao Java.

Identificador Java

Instrução de O bloco de instrução A chave

Identificador JavaScript Comum
Descrição	break
é	usado para sair de um loop.
catch	é executado quando ocorre um erro durante a execução do bloco de instrução try.
continue	pula uma iteração no loop.
do ... while	executa um bloco de instruções e continua executando o bloco de instruções quando a instrução condicional for verdadeira.
for	pode executar o bloco de código um número especificado de vezes quando a instrução condicional for verdadeira.
for ... in	é usado para percorrer as propriedades de um array ou objeto (percorrer as propriedades de um array ou objeto).
function	define uma função
if...else	para executar ações diferentes com base em condições diferentes.
de função de saída	de retorno
é	usada para executar diferentes ações com base em diferentes condições.
throw	lança (gera) um erro.
try	implementa tratamento de erros e é usado junto com catch.
var	declara uma variável.
while	Quando a instrução condicional for verdadeira, execute o bloco de instrução.

A maioria das linguagens pode preencher espaços automaticamente. Recomendamos adicionar espaços em ambos os lados do operador para torná-lo claro e bonito. No entanto, você deve prestar atenção ao uso de espaços em HTML e não mexer. Em JavaScript, as duas sentenças a seguir são iguais:

var a = 10;
var b=10;

Semelhante ao Python, JavaScript também é uma linguagem de script e é interpretada.

Definição

de objeto

Objeto

Tudo é um objeto, uma instância abstrata de características entre coisas com as mesmas características. Como Xiao Ming entre os humanos.

Em JavaScript, um objeto é um contêiner de variáveis de atributos, semelhante a um dicionário em Python ou a um mapa hash em Java, que define os atributos do objeto.

var pessoas = {
    primeiroNome: "Mike",
    sobrenome: "Smith",
    idade: "18",
    endereço: "Pequim",
    trabalho: "Estudante"
};

O texto acima é a definição do objeto. Claro, você também pode escrevê-lo em uma linha. Eu faço isso por uma questão de beleza e peço a todos que escrevam assim no futuro.

Para acessar as propriedades dos objetos

podemos dizer "Objetos JavaScript são contêineres para variáveis". No entanto, geralmente pensamos em "objetos JavaScript como contêineres de pares de valores-chave". Os pares de valores-chave são geralmente escritos como chave: valor (chave e valor são separados por dois pontos). Os pares de valores-chave são geralmente chamados de propriedades de objeto em objetos JavaScript. Também acessamos propriedades através do universal "." (a maioria dos idiomas usa isso).

<!DOCTYPEhtml>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>Este é o site</title>
</head>
<corpo>
<h1>Acessar atributos de classe</h1>
<!--A instrução a seguir deve vir antes do script-->
<p id="demonstração"></p>
<roteiro>
    var pessoas = {
        primeiroNome: "Mike",
        sobrenome: "Smith",
        idade: "18",
        endereço: "Pequim",
        trabalho: "Estudante"
    };
    document.getElementById("demonstração").innerHTML =
        pessoas["primeiroNome"] + "." + pessoas.sobrenome;
</script>
</body>
</html>

Dois métodos de acesso, você pode usar object name.property ou object name.["property"].

Função

Uma função é um bloco de código reutilizável ou orientado a eventos que é executado quando é chamado. Quando esta função é chamada, o código dentro da função é executado. As funções podem ser chamadas diretamente quando ocorre um evento (como quando o usuário clica em um botão) e podem ser chamadas de qualquer lugar por JavaScript.

Parâmetros e valores de retorno

Ao chamar uma função, você pode passar valores para ela, chamados de parâmetros, e não há limite para o número de parâmetros.

função minhaFunção( var1 , var2 )
{
código
}

Ao chamar parâmetros, eles devem ser passados estritamente de acordo com sua ordem, conforme mostrado abaixo:

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>Este é um site JavaScript</title>
</head>
<corpo>
<h1>Problema na passagem de parâmetros de função</h1>
<p>Clique no botão abaixo para ligar</p>
<button onclick="myFunc('Mike','18','Beijing')">Clique aqui</button>
<roteiro>
    function minhaFunc(nome, idade, endereço) {
        alert("Meu nome é " + nome + ", idade é " + idade + " e minha casa fica em " + endereço);
    }
</script>
</body>
</html>

As funções JavaScript podem ter valores de retorno e a palavra-chave return é return. Quando a função retorna um valor, a função irá parar de ser executada e as instruções após return não serão executadas.

Exemplo: Calcule o produto de dois números e retorne o resultado

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>Site JavaScript</title>
</head>
<corpo>
<h1>Calcule o valor de dois números e retorne</h1>
<p id="demonstração"></p>
<roteiro>
    function minhaFunc(a, b) {
        retornar a*b;
    }

    document.getElementById("demo").innerHTML = myFunc(3, 4);
</script>
</body>
</html>

Variáveis

As variáveis JavaScript são divididas em dois tipos:

Variáveis globais: Variáveis declaradas fora da função são variáveis globais , e todos os scripts e funções na página web podem acessá-las.
Variáveis locais: Uma variável declarada dentro de uma função JavaScript (usando var) é uma variável local, portanto só pode ser acessada dentro da função.

Quando atribuímos um valor a uma variável JavaScript não declarada, a variável será automaticamente tratada como uma propriedade de window. Por exemplo, a seguinte instrução:

name = "Mike"

declarará um nome de atributo de janela. Variáveis globais criadas pela atribuição de valores a variáveis não declaradas em modo não estrito são atributos configuráveis do objeto global e podem ser excluídas. Por exemplo:

var var1 = 1; // As propriedades globais não podem ser configuradas var2 = 2; // Sem a declaração var, as propriedades globais podem ser configuradas console.log(this.var1);
console.log(janela.var1); // 1

delete var1; // false não pode excluir console.log(var1);

excluir var2; 
console.log(excluir var2);
console.log(var2); // A variável de erro foi excluída.

Descrição

do evento

indefinida

eventos HTML são coisas que acontecem em elementos HTML. Quando JavaScript é usado em páginas HTML, o JavaScript pode acionar esses eventos.

Os eventos HTML podem ser ações do navegador ou ações do usuário. A seguir estão exemplos de eventos HTM:

A página HTML termina de carregar
O campo de entrada HTML
é clicado.

Normalmente, quando ocorre um evento, você pode fazer alguma coisa. JavaScript pode executar algum código quando um evento é acionado. Atributos de evento podem ser adicionados a elementos HTML e código JavaScript pode ser usado para adicionar elementos HTML.

Aspas simples: < some-HTML-element some-event = ' JavaScript code ' >
Aspas duplas: < some-HTML-element some-event = " JavaScript code " >

<!DOCTYPE html>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>Evento JavaScript</title>
</head>
<corpo>
<h1>Duas maneiras de lidar com eventos JavaScript</h1>
<p id="demoOne"></p>
<button onclick="getElementById('demoOne').innerHTML=Date()">Clique para visualizar a hora 1</button>
<p id="demoTwo"></p>
<button onclick="this.innerHTML=Date()">Clique para ver a hora 2</button>
</body>
</html>

JavaScript geralmente é um código multilinha, e o menos comum é chamado através de atributos de evento.

<!DOCTYPEhtml>
<html lang="pt">
<cabeça>
    <meta charset="UTF-8">
    <title>Evento JavaScript</title>
</head>
<corpo>
<h1>Chamada de atributo de evento JavaScript</h1>
<p>Clique para executar a função <em>myFunc()</em></p>
<button onclick="myFunc()">Clique aqui</button>
<p id="um"></p>
<roteiro>
    function minhaFunc() {
        document.getElementById("um").innerHTML = Data();
    }
</script>
</body>
</html>

Eventos HTML comuns
Descrição	do evento
onchange	elemento HTML muda
onclick	O usuário clica no elemento HTML
onmouseover	O usuário move o mouse sobre um elemento HTML
onmouseout	O usuário afasta o mouse de um elemento HTML
onkeydown	O usuário pressiona a tecla do teclado
onload	O navegador completou a página Mais eventos continuarão a ser aprendidos após o carregamento

Função de evento

Os eventos podem ser usados para lidar com validação de formulário, entrada do usuário, comportamento do usuário e ações do navegador:

eventos são acionados quando a página é carregada,
eventos são acionados quando a página é fechada,
o usuário clica no botão para executar ações
e para verificar a legitimidade do conteúdo de entrada do usuário,

vários métodos podem ser usados para executar o código de evento JavaScript:

O atributo de evento HTML pode executar diretamente o código JavaScript.
O atributo de evento HTML pode chamar funções JavaScript
.
Você pode impedir a ocorrência de eventos.

String

: Uma coleção de caracteres.

var a = "abc";
var b = "Hello";

Semelhante ao Python,

cada

caractere da string pode ser acessado usando um índice:

var c = b[1]

;

<!DOCTYPEhtml>
<html>
<cabeça>
    <meta charset="utf-8">
    <title>Comprimento da string</title>
</head>
<corpo>
<roteiro>
    var txtOne = "Olá, mundo!";
    document.write("<p>" + txtOne.length + "</p>");
    var txtDois = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    document.write("<p>" + txtTwo.length + "</p>");
</script>
</body>
</html>

JavaScript também possui alguns caracteres especiais. Por exemplo, quando queremos imprimir aspas, precisamos adicionar "" para escapar, caso contrário o compilador não poderá analisá-las.

de caractere especial comum JavaScript
Saída de	código
'	aspas simples
"	aspas duplas
\	barra invertida
nline	feed
rcarriage	return
ttab	(caractere de tabulação)
bbackspace	character
	fformfeed

string de caracteres como um objeto

, geralmente, strings JavaScript são valores primitivos e pode ser criado usando caracteres: var firstName = "Mike", mas também podemos usar a palavra-chave new para definir uma string como um objeto: var firstName = new String("Mike"), que é semelhante às

Java. construtor

de descrição	da propriedade
retorna	a função que cria a string propriedade
length	retorna o comprimento da string
protótipo	permite que você adicione propriedades e métodos ao objeto

concat() concatena duas ou mais strings para maiúsculas

string métodos comuns
descrição	do método
charAt()	retorna o caractere na posição de índice especificada
charCodeAt()	retorna Especificar o valor Unicode do caractere na posição do índice
e	retorna
a	string conectada
fromCharCode()	converte Unicode em uma string.
a string.
lastIndexOf()	retorna a posição da última ocorrência do caractere especificado na string
localeCompare()	usa uma ordem local específica para comparar duas strings
match()	encontra uma correspondência de uma ou mais expressões regulares
replace()	substitui por uma expressão regular Substring correspondente
search()	recupera o valor que corresponde à expressão regular
slice()	extrai um fragmento da string e retorna a parte extraída em uma nova string
split()	divide a string em uma matriz de substrings
substr ()	Extrai o especificado número de caracteres na string a partir do número de índice inicial
substring ()	Extraia os caracteres entre os dois números de índice especificados na string
toLocaleLowerCase ()	Converta a string em minúsculas de acordo com a localidade do host, existem apenas alguns idiomas (como turco) possuem mapeamento de caso específico local
toLocaleUpperCase()	para converter strings em maiúsculas de acordo com a localidade do host. Apenas alguns idiomas (como turco) possuem mapeamento de caso específico local
toLowerCase()	para converter strings.
Converte para minúsculas
toString()	Retorna o valor do objeto string
toUpperCase()	Converte a string para maiúsculas
trim()	Remove os espaços em branco iniciais e finais da string
valueOf()	Retorna o valor original de um objeto string

== e === Diferença

1. Para tipos básicos como string e número, há uma diferença

entre == e === a) Comparação entre diferentes tipos, == compara "valores após conversão para o mesmo tipo" para ver se os "valores "são iguais, === se o tipo Se forem diferentes, o resultado será desigual.
b) Para comparação do mesmo tipo, a comparação direta de "valor" resultará no mesmo resultado.

2. Para tipos avançados como Array e Object, não há diferença entre == e ===

para comparação de "endereço de ponteiro".

3. Há uma diferença entre tipos básicos e tipos avançados

a) Para ==, converta o. tipo avançado para o tipo básico e realizar comparação de "valor"
b) Como os tipos são diferentes, o resultado === é falso

4. != é a não operação de ==, !== é a não operação de == ==

var num=1;

varstr="1";

var teste=1;

test == num //verdadeiro mesmo tipo e mesmo valor test === num //verdadeiro mesmo tipo e mesmo valor teste !== num //falso teste tem o mesmo tipo que num, e seu valor também é o mesmo. a não operação deve ser falsa 

num == str //true Converte str em um número e verifica se é igual. 

num != str //false == não operação num === str //o tipo falso é diferente, retorna false diretamente 

num !== str //true Os diferentes tipos de num e str significam que eles não são iguais A não operação é naturalmente verdadeira.

Operador

Operadores comuns de JavaScript (y=5)
Exemplo	de descrição	do operador	x Resultado da operação	y Resultado da operação
+	adição.	x =y+2	7	5
-Subtração	x	=y-2	3	5
*	Multiplicação	x=y*2	10	5
/	Divisão	x=y/2	2,5	5
%	módulo (resto)	x=y%2	1	5
++	incremento	x =++y	6	6
++	incremento	x=y++	5	6
--decrement	=	--y	4	4
--decrement	=	x=y--	5	4

Exemplos de

operadores de operadores de atribuição comuns JavaScript (x=10, y=5)
são	equivalentes	a	operações Resultado
=	x =s		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=xy	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x= x/y	x=2
%=	x%=y	x=x%y	x=0

Operadores de comparação comuns em JavaScript (x=5)
Valor de retorno	de comparação	da descrição	do operador
==	igual a	x==8	falso
==	igual a	x==5	verdadeiro
= = =	Absolutamente igual (valor e tipo são iguais)	x==="5"	falso
= = =	Absolutamente igual (valor e tipo são iguais)	x===5	verdadeiro
!=	diferente de	x!=8	verdadeiro
!==	Não absolutamente igual (um dos valores e tipo não é igual, ou Ambos não são iguais)	x!=="5"	verdadeiro
!==		x!==5	falso
>	maior que	x>8	falso
<	menor que	x<8	verdadeiro
>=	maior ou igual a	x>=8	falso
<=	menor ou igual a	x<= 8	verdadeiro
<=	menor ou igual a	x<=8	verdadeiro

Operadores lógicos comuns de JavaScript (x=6, y=3)
exemplos	de descrição	de operador
&&	e	(x < 10 && y > 1) é verdadeiro
\|\|	ou	(x== 5 \|\| y==5) é falso
!	(x==y) é	verdadeiro

JavaScript também contém operadores condicionais que atribuem valores a variáveis com base em certas condições. Por exemplo:

nomevariável=(condição)?valor1:valor2

Julgamento condicional

Em JavaScript, podemos usar as seguintes instruções condicionais:

instrução if - somente quando a condição especificada for verdadeira, use esta instrução para executar o código
instrução if...else - quando a condição Executar código quando verdadeiro e outro código quando a condição for falsa
if...else if....else - Use esta instrução para selecionar um dos vários blocos de código para executar
a instrução switch - Use esta instrução para selecionar vários Um dos blocos de código para executar

a instrução if

executará o código somente quando a condição for verdadeira. Por exemplo:

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <title>Site JavaScript</title>
</head>
<corpo>
<h1>Esta é uma instrução if</h1>
<button onclick="myFunc()">Clique aqui</button>
<p id="um"></p>
<roteiro>
    function minhaFunc() {
        var x = "";
        var hora = new Date().getHours();
        se (tempo <20) {
            x = "Olá, antes das 20:00";
        }
        document.getElementById("um").innerHTML = x;
    }
</script>
</body>
</html>

instrução if...else

Use a instrução if...else para executar código quando a condição for verdadeira e outro código quando a condição for falsa.

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <title>Site JavaScript</title>
</head>
<corpo>
<h1>Esta é uma instrução if...else</h1>
<button onclick="myFunc()">Clique aqui</button>
<p id="um"></p>
<roteiro>
    function minhaFunc() {
        var x = "";
        var hora = new Date().getHours();
        se (tempo <20) {
            x = "Olá, antes das 20:00";
        }outro {
            x = "Olá, depois das 20:00";
        }
        document.getElementById("um").innerHTML = x;
    }
</script>
</body>
</html>

Múltiplas instruções if..else

<!DOCTYPE html>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <title>Site JavaScript</title>
</head>
<corpo>
<h1>Várias instruções if...else</h1>
<button onclick="myFunc()">Clique aqui</button>
<p id="um"></p>
<roteiro>
    function minhaFunc() {
        var x = "";
        var hora = new Date().getHours();
        se (tempo <12) {
            x = “Bom dia”;
        } senão if (tempo <14) {
            x = “Boa tarde”;
        }
        outro {
            x = “Boa tarde”;
        }
        document.getElementById("um").innerHTML = x;
    }
</script>
</body>
</html>

instrução switch

Use a instrução switch para selecionar um dos vários blocos de código a serem executados. Por exemplo:

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <title>Site JavaScript</title>
</head>
<corpo>
<h1>instrução switch</h1>
<button onclick="myFunc()">Clique aqui</button>
<p id="um"></p>
<roteiro>
    function minhaFunc() {
        var x = "";
        var hora = new Date().getMonth();
        mudar (tempo) {
            caso 0:
                x = “janeiro”;
                quebrar;
            caso 1:
                x = “fevereiro”;
                quebrar;
            caso 2:
                x = “março”;
                quebrar;
            caso 3:
                x = “abril”;
                quebrar;
            caso 4:
                x = “maio”;
                quebrar;
            caso 5:
                x = “Jane”;
                quebrar;
            caso 6:
                x = “julho”;
                quebrar;
            caso 7:
                x = “agosto”;
                quebrar;
            caso 8:
                x = “setembro”;
                quebrar;
            caso 9:
                x = “Outubro”;
                quebrar;
            caso 10:
                x = “Novembro”;
                quebrar;
            caso 11:
                x = “dezembro”;
                quebrar;
            padrão:
                x = "ERRO";
        }
        document.getElementById("um").innerHTML = x;
    }
</script>
</body>
</html>

Loop

JavaScript suporta diferentes tipos de loops:

for - faz um loop em um bloco de código um certo número de vezes
for/in - faz um loop pelas propriedades do objeto
while - faz um loop no bloco de código especificado quando a condição especificada for verdadeira
do/while - também quando especificado Quando a condição for verdadeira, faça um loop no bloco de código especificado

para loop

<!DOCTYPE html>
<html>
<cabeça>
    <meta charset="utf-8">
    <title>Loop JavaScript</title>
</head>
<corpo>
<h1>Clique no botão para repetir o código 5 vezes. </h1>
<button onclick="myFunc()">Clique aqui</button>
<p id="demonstração"></p>
<roteiro>
    function minhaFunc() {
        var x = "";
        for (var i = 0; i < 5; i++) {
            x = x + "O número é" + i + "<br>";
        }
        document.getElementById("demonstração").innerHTML = x;
    }
</script>
</body>
</html>

fo /in loop

<!DOCTYPE html>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>
<p>Clique no botão abaixo para percorrer os atributos pessoais do objeto</p>
<button onclick="myFunc()">Clique aqui</button>
<p id="um"></p>
<roteiro>
    function minhaFunc() {
        deixe x;
        deixe texto = "";
        const pessoa = {
            primeiroNome: "Bill",
            sobrenome: "Portões",
            idade: 56
        };
        para (x pessoalmente) {
            texto = texto + " " + pessoa[x];
        }
        document.getElementById("um").innerHTML = texto;
    }
</script>
</body>
</html>

loop while

<!DOCTYPE html>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>
<p>Clique no botão e a saída será impressa se i for menor que 5</p>
<button onclick="myFunc()">Clique aqui</button>
<p id="one">Mostrar aqui</p>
<roteiro>
    function minhaFunc() {
        seja x = "", i = 0;
        enquanto (eu < 5) {
            x = x + "Este número é" + i + "<br>";
            eu++;
        }
        document.getElementById("um").innerHTML = x
    }
</script>
</body>
</html>

loop do/while

<!DOCTYPE html>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>
<p>Clique no botão para imprimir um número menor que 5</p>
<button onclick="myFunc()">Clique aqui</button>
<p id="um"></p>
<roteiro>
    function minhaFunc() {
        deixe x = "";
        seja i = 0;
        fazer {
            x = x + "O número é" + i + "<br>";
            eu++;
        }
        enquanto (eu < 5);
        document.getElementById("um").innerHTML=x;
    }
</script>
</body>
</html>

Comparação entre loop for e loop while

<!DOCTYPE html>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>

<p>Isso é funcional</p>
<button onclick="funcOne()">Clique em funcOne</button>
<p id="one">funcOne está aqui</p>

<p>Isso é funcTwo</p>
<button onclick="funcTwo()">Clique em funcTwo</button>
<p id="two">funcTwo está aqui</p>

<roteiro>
    função funcOne() {
        números = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        seja i = 0;
        deixe addRes = 0;
        enquanto (números[i]) {
            addRes += números[i];
            eu++;
        }
        document.getElementById("um").innerHTML = addRes + "<br>";

    }

    função funcDois() {
        números = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        seja i = 0;
        deixe mulRes = 1;
        para (; números[i];) {
            mulRes *= números[i];
            eu++;
        }
        document.getElementById("dois").innerHTML = mulRes + "<br>";
    }
</script>

</body>
</html>

As instruções

break e Continue

break são usadas para interromper loops. continue é usado para pular uma iteração em um loop.

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>
<p>Estas são as instruções continue e break</p>
<button onclick="funcOne()">Clique em funcOne</button>
<p id="one">Isso é funcional</p>
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="funcTwo()">Clique em funcTwo</button>
<p id="two">Isso é funcTwo</p>
<roteiro>
    função funcOne() {
        deixe x = "";
        seja i = 0;
        para (eu = 0; eu < 10; eu++) {
            se (eu < 5) {
                quebrar;
            }
            x = x + "O número é" + i + "<br>";
        }
        document.getElementById("um").innerHTML = x;
    }

    função funcDois() {
        deixe x = "";
        seja i = 0;
        para (eu = 0; eu < 10; eu++) {
            se (eu === 8) {
                continuar;
            }
            x = x + "O número é" + i + "<br>";
        }
        document.getElementById("dois").innerHTML = x;
    }
</script>

</body>
</html>

typeof, null e undefined

usam o operador typeof para detectar o tipo de dados da variável.

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>
<p id="um"></p>
<roteiro>
    document.getElementById("um").innerHTML =
        typeof "joão" + "<br>" +
        typeof 3.14 + "<br>" +
        tipo de falso + "<br>" +
        tipo de [1, 2, 3, 4] + "<br>" +
        typeof {nome: 'joão', idade: 34};

</script>

</body>
</html>

Em JavaScript, um array é um tipo de objeto especial. Portanto typeof [1,2,3,4] retorna objeto.

null significa vazio, ou seja, "nada". Ao usar a detecção typeof, o objeto é retornado. Os objetos podem ser apagados usando indefinido.

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>
<p>um:</p>
<p id="um"></p>
<p>dois:</p>
<p id="dois"></p>

<roteiro>
    var pessoa = {primeiroNome: "Bill", sobrenome: "Gates", idade: 50};
    var pessoa = null;
    document.getElementById("um").innerHTML = tipo de pessoa;
    pessoa = indefinido
    document.getElementById("dois").innerHTML = tipo de pessoa;
</script>

</body>
</html>

propriedade construtor

A propriedade construtor retorna o construtor de todas as variáveis JavaScript. Você pode usar a propriedade construtor para verificar se o objeto é um array ou uma data (contendo a string "Data"), etc.

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>

<p>O atributo construtor retorna uma variável ou construtor</p>
<p id="one">HRER</p>
<roteiro>
    document.getElementById("um").innerHTML =
        "Olá".constructor + "<br>" +
        3.14.construtor + "<br>" +
        falso.construtor + "<br>" +
        [1, 2, 3].construtor + "<br>" +
        {nome: "Olá", idade: 18}.construtor + "<br>" +
        nova Data().constructor + "<br>" +
        função () {
        }.construtor;
</script>

</body>
</html>

Conversão de tipo

Variáveis JavaScript podem ser convertidas em novas variáveis ou outros tipos de dados:

convertidas automaticamente pelo próprio JavaScript
usando funções JavaScript

<!DOCTYPE html>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>

<p>O método String() pode converter números em strings</p>
<p id="one">AQUI</p>
<p>O método toString() pode converter números em strings</p>
<p id="dois">AQUI</p>
<roteiro>
    seja x = 123;
    document.getElementById("um").innerHTML =
        String(x) + "<br>" +
        String(123) + "<br>" +
        Sequência(100 + 23);
    document.getElementById("dois").innerHTML =
        x.toString() + "<br>" +
        (123).toString() + "<br>" +
        (100 + 123,2).toString();
</script>

</body>
</html>

Operador unário+

Operador+ pode ser usado para converter variáveis em números:

<!DOCTYPE html>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>

<P>O operador typeof retorna o tipo de variável ou expressão</P>
<button onclick="myFuncOne()">CLIQUE AQUI UM</button>
<p id="one">AQUI</p>
<button onclick="myFuncTwo()">CLIQUE AQUI DOIS</button>
<p id="dois">AQUI</p>
<roteiro>
    função minhaFuncOne() {
        seja y = "5";
        seja x = +y;
        document.getElementById("um").innerHTML =
            tipo de y + "<br>" + x + "<br>" + tipo de x;
    }

    função minhaFuncTwo() {
        deixe a = "Olá";
        seja b = +a;
        document.getElementById("dois").innerHTML =
            tipo de a + "<br>" + b + "<br>" + tipo de b;
    }

</script>
</body>
</html>

conversão

Conversão de tipo JavaScript
de valor primitivo	em conversão de número	em conversão de string	em valor booleano
falso	0	"falso"	falso
verdadeiro	1	"verdadeiro"	verdadeiro
0	0	"0"	falso
1	1	"1"	verdadeiro
"0"	0	"0 "	verdadeiro
"000"	0	"000"	verdadeiro
"1"	1	"1"	verdadeiro
NaN	NaN	"NaN"	falso
Infinito Infinito	"	Infinito"	verdadeiro
-Infinity	-Infinity	"-Infinity"	verdadeiro
""	0	""	falso
"20"	20	" 20 "	verdadeiro
"Runoob"	NaN	"Runoob"	verdadeiro
[]	0	""	verdadeiro
[20]	20	"20"	verdadeiro
[10,20]	NaN	"10,20"	verdadeiro
["Runoob"]	NaN	"Runoob"	verdadeiro
["Runoob" ,"Google"]	NaN	"Runoob,Google"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[objeto Objeto]"	true
null	0	"null"	false
indefinido	NaN	"indefinido"	false

Expressão regular

Expressão regular (Inglês: Expressão Regular, muitas vezes abreviada como regex, regexp ou RE no código) usa uma única string para descrever e corresponder a uma série de padrões de pesquisa de string que atendem a uma determinada regra de sintaxe.

search()

é usado para recuperar uma substring especificada em uma string ou recuperar uma substring que corresponda a uma expressão regular e retornar a posição inicial da substring.

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatível" content="IE=edge">
    <título>Título</título>
</head>
<corpo>

<p>Recuperar string, corresponder à posição</p>

<button onclick="myFuncOne()">CLIQUE AQUI UM</button>
<p id="one">AQUI</p>

<button onclick="myFuncTwo()">CLIQUE AQUI DOIS</button>
<p id="dois">AQUI</p>

<roteiro>
    função minhaFuncOne() {
        deixe str = "Olá, mundo!";
        document.getElementById("um").innerHTML = str.search(/World/i);
    }

    função minhaFuncTwo() {
        deixe str = "Bem-vindo à China!";
        document.getElementById("dois").innerHTML = str.search("China");
    }
</script>

</body>
</html>

replace()

é usado para substituir alguns caracteres por outros caracteres em uma string ou substituir uma substring que corresponda a uma expressão regular.

<!DOCTYPEhtml>
<html lang="zh-CN">
<cabeça>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<p> Expressão regular Substituição () Substituição </p>

<button onclick = "myfuncOne ()"> clique em um </toblete>
<p id = "One"> Olá, Java </p>

<button onclick = "myfunctwo ()"> clique em dois </button>
<p id = "dois"> Olá, java </p>

<roteiro>
    function myfuncOne () {
        Deixe str = document.getElementById ("One"). Innerhtml;
        document.getElementById ("One"). Innerhtml = str.Replace (/java/i, "python");
    }

    function myfunctwo () {
        Deixe str = document.getElementById ("dois"). Innerhtml;
        document.getElementById ("dois"). innerhtml = str.replace ("java", "javascipt");
    }
</script>

</body>
</html>

Modificador

de expressão regular

Modificador

de expressão regular
Descrição	I
Executa	a correspondência insensível com o caso.
G	executa uma correspondência global (encontra todas as correspondências em vez de parar após a primeira partida é encontrada).
M	executa correspondência multi-line.

Expressão regular

de caracteres especiais
Descrição	da expressão
[ABC]	encontra qualquer caractere entre os colchetes.
[0-9]	encontra qualquer número de 0 a 9.
(x \| y)	encontra quaisquer opções separadas por \|.

Quantificador de expressão regular
Descrição	N
+	corresponde a qualquer string contendo pelo menos um n .
n*	corresponde a qualquer string contendo zero ou mais n 's.
n	?

O teste ()

é usado para detectar se uma string corresponde a um determinado padrão.

<!DOCTYPEhtml>
<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<roteiro>
    Seja obj = novo regexp ("e");
    Seja boolone = obj.test ("Olá, este é JavaScript");
    Seja booltwo = obj.test ("Este é JavaScript");
    document.write (boolone + "<br>" + booltwo);
</script>

</body>
</html>

Exec ()

é usado para recuperar correspondências de expressões regulares em uma sequência. Se nenhuma correspondência for encontrada, o valor de retorno será nulo.

<!DOCTYPEhtml>
<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<roteiro>
    Seja obj = novo regexp (/e/);
    resone = obj.exec ("Olá, este é JavaScript");
    RestWo = obj.exec ("Este é JavaScript");
    /*Não significa nulo*/
    Document.Write (Resone + "<br>" + Restwo);
</script>

</body>
</html>

Tipo de erro

de exceção de erro

Quando o mecanismo JavaScript executa o código JavaScript, vários erros ocorrerão.
Pode ser um erro de sintaxe, geralmente um erro de codificação ou erro de digitação feito pelo programador.
Pode ser um erro de ortografia ou um recurso ausente no idioma (possivelmente devido a diferenças de navegador).
O erro pode ser devido à saída incorreta do servidor ou usuário.
Obviamente, isso também pode ser devido a muitos outros fatores imprevisíveis.

Tente ... Catch

the Try Declaração nos permite definir um bloco de código que é testado quanto a erros durante a execução, e a instrução Catch nos permite definir um bloco de código executado quando ocorre um erro no bloco de código de tentativa.

<!DOCTYPEhtml>
<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<input type = "button" value = "Exibir mensagem" onclick = "myfunc ()">
<roteiro>
    deixe txt = "";

    function myfunc () {
        tentar {
            alert111 ("Olá, mundo!")
        }
        Catch (err) {
            txt = "Há um erro aqui  n  n";
            txt + = "Erro Descrição:" + err.message + " n  n";
            txt += "Clique em OK para continuar  n  n";
            Alerta (TXT)
        }
    }
</script>

</body>
</html>

Throw

the Throt Declaração nos permite criar erros personalizados. O termo técnico correto é: criar ou lançar uma exceção. Se você usar o Throw with Try and Catch, poderá controlar o fluxo do programa e gerar mensagens de erro personalizadas.

<!DOCTYPEhtml>
<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<p> Por favor, digite um número entre 5-10 </p>
<Label para = "One"> </Label> <input id = "One" type = "text">
<button type = "button" onclick = "myfunc ()"> clique em </butut>
<p id = "message"> aqui </p>

<roteiro>
    function myfunc () {
        deixe a mensagem;
        deixe x;
        mensagem = document.getElementById ("message");
        message.innerhtml = "";
        x = document.getElementById ("One"). Value;
        tentar {
            se (x === "")
                lançar "valor está vazio";
            if (isnan (x))
                jogue "não um número";
            x = número (x);
            se (x <5)
                jogar "muito pequeno";
            se (x> 10)
                jogar "muito grande";
        } pegar (erro) {
            message.innerhtml = "erro" + erro;
        }
    }
</script>

</body>
</html>

Chamada de função

Há quatro maneiras de chamar as funções JavaScript. De um modo geral, em JavaScript, isso aponta para o objeto atual quando a função é executada.

Ligue 1: ligue como uma função

uma

função myfunc (a, b) {
    retornar a * b;
}

myfunc

2);

    retornar a * b;
}

Window.myfunc (1, 2

;

<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<p> Funções chamadas como métodos </p>
<p id = "One"> aqui </p>

<roteiro>
    deixe myObject = {
        primeiro nome: "Bill",
        LastName: "Gates",
        FullName: function () {
            Retorne this.FirstName + "" + this.LastName;
        }
    };
    document.getElementById ("One"). Innerhtml = myObject.fullName ();
</script>

</body>
</html>

Ligue para 3: use o construtor para chamar a função

<! Doctype html>
<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<p> Neste exemplo, myfunc () é o construtor da função </p>
<p id = "um"> </p>
<roteiro>
    função myfunc (argone, argtwo) {
        this.name = argone;
        this.number = argtwo;
    }

    Seja x = new MyFunc ("Hello", 123);
    Document.getElementById ("One"). Innerhtml = x.name;
</script>

</body>
</html>

Ligue para 4: ligue para a função como um método de função

<! Doctype html>
<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<p> Chamando funções como métodos de função </p>
<p id = "One"> aqui </p>

<roteiro>
    Deixe Obj, Array;

    função myfunc (a, b) {
        retornar a * b;
    }

    Array = [5, 6];
    obj = myfunc.apply (obj, matriz);
    Document.getElementById ("One"). Innerhtml = obj;
</script>

</body>
</html>

Funções incorporadas

de fechamento

De fato, em JavaScript, todas as funções podem acessar o escopo de seu nível superior. O JavaScript suporta funções aninhadas e as funções aninhadas podem acessar variáveis de função do nível superior. A função embutida Plus () pode acessar a variável contador da função pai:

<! Doctype html>
<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<p> funções embutidas </p>
<p id = "One"> aqui </p>

<roteiro>
    Document.getElementById ("One"). Innerhtml = add ();

    função adicionar() {
        deixe o contador = 0;

        function plus () {
            contador += 1;
        }

        mais();
        contador de retorno;
    }
</script>

</body>
</html>

A auto-investigação da função

de fechamento

é chamada Bibao

<! Doctype html>
<html lang = "zh-cn">
<cabeça>
    <meta http-equiv = "content-type" charset = "utf-8">
    <meta http-equiv = "x-ua compatível com" content = "ie = borda">
    <título>Título</título>
</head>
<corpo>

<p> Contador local </p>
<button type = "button" onclick = "myfunc ()"> contador </butut>
<p id = "One"> aqui </p>

<roteiro>
    deixe add = (function () {
        deixe o contador = 0;
        Return function () {
            contador de retorno += 1;
        }
    })();

    function myfunc () {
        Document.getElementById ("One"). Innerhtml = add ();
    }
</script>
</body>
</html>