Conceitos básicos de JavaScript e sintaxe básica

Diretório de artigos

1. Introdução
2. Comentários
3. Uso
4. Exibir dados
5. Gramática Básica

1. Introdução

JavaScript é frequentemente referido como js ou js script

Conceitos:
1. Linguagem de script interpretada (o código não é pré-compilado)
2. Linguagem de programação leve
3. Código de programação que pode ser inserido em páginas HTML
(executado por todos os navegadores modernos após ser inserido em páginas HTML)
Função:
Adicione funções dinâmicas às páginas da web
para fornecer aos usuários efeitos de navegação mais suaves e bonitos

Normalmente os scripts JavaScript implementam suas funções incorporando-as em HTML

2. Comentários

Igual aos comentários de linha única e multilinha do Java

Comentários de linha única: comece com //

Comentários de várias linhas: comece com /* e termine com */

3. Uso

Existem três tipos

1. js na página HTML

Deve estar entre tags de bloco de script

Os requisitos de posição não são rígidos (você pode colocar cabeça, corpo e por último, geralmente cabeça ou último)

Deve estar entre tags de bloco de script

Exemplo de código:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js位置1</title>					
		<!--
			内部：js位置没有严格的要求
		-->
		<!--写在head-->
		<script>
			alert("hello script111!")
		</script>

	</head>
	<body>
		<!--写在body-->
		<script>
			alert("hello script222!")
		</script>
		
	</body>
</html>
	<!--写在最后-->
	<script>
		alert("hello script333!")
	</script>

2. Js externo

Os scripts podem ser salvos em arquivos externos. A extensão dos arquivos JavaScript externos é .js

1. Escreva arquivos .js externamente

function fun1(){
    
    
	alert("这是js外部文件");
}

2. Introduzir arquivos js (cabeça ou corpo)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js位置2</title>			
		<!--
			外部：写在js文件中，外部文件不需要script标签
			引入外部script文件
			调用script文件
		-->
		<script type="text/javascript" src="../../js/myScript.js" ></script>
		<script>
			fun1();
		</script>	
			
	</head>
	
	<body>
	</body>
	
</html>

3. js em atributos de tag

Escrito diretamente em alguns atributos de tags HTML para escrever código JavaScript simples

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js位置3</title>			
	</head>
	<body>
		<!--
			行内的js写法
		-->
		<a href="javascript:alert('行内的js写法')">行内的js写法</a>
		
	</body>
</html>

4. Exibir dados

① caixa pop-up window.alert()

window pode ser omitida, o que equivale a alert("displayed content");

② document.write() escreve o conteúdo

document.write("conteúdo exibido")

③ escrita innerHTML

document.getElementById("id value").innerHTML="Displayed content"
Como o carregamento é de cima para baixo, o valor do id precisa ser carregado primeiro, então o script é colocado na parte inferior do documento

④ console.log é gravado no console do navegador

console.log("conteúdo exibido")

Exemplo de código:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示数据</title>
		<script>	
			/*
			1、使用windows弹出框,弹出数据，两种写法都可以
			*/
			alert("hello")
			window.alert("hello again")

			/*
			2、使用document,显示数据
			 */
			document.write("hello document")

			/*
			 3、使用innerHTML写入
			 加载从上往下，因此先获取div1，此时div1还未加载，因此将script放在文档最下面
			 */
			//document.getElementById("div1").innerHTML="hello innerHTML"
			/*
			 4、使用console.log写入到浏览器控制台
			 */
			console.log("hello log")
		</script>
	</head>
	<body>
		<div id = "div1">			
		</div>
	</body>
</html>

<!--
3、使用innerHTML写入
加载从上往下，因此先获取div1，此时div1还未加载，因此将script放在文档最下面
-->
<script>
	document.getElementById("div1").innerHTML="hello innerHTML!"
</script>

5. Gramática Básica

JavaScript é uma linguagem de script. O navegador executa o código do script linha por linha ao ler o código (a instrução js envia comandos ao navegador para dizer ao navegador o que fazer)

Dicas:
Geralmente, escreva apenas uma afirmação por linha e um ponto e vírgula no final de cada frase.

5.1 Variáveis

5.1.1 Sintaxe básica

Palavras-chave: var

Use var uniformemente para declaração de variável, e o tipo de dados da variável é determinado com base na atribuição.

Declarar variáveis:
var nome da variável;
Regras de nomenclatura:
1. As variáveis devem começar com uma letra
2. As variáveis também podem começar com os símbolos $ e _
3. Os nomes das variáveis diferenciam maiúsculas de minúsculas (y e Y são variáveis diferentes)
4. Palavras reservadas por palavra-chave não podem ser usadas
Convenção de nomenclatura:
1. Saiba o significado quando vir o nome e nomeie-o de acordo com o significado da variável.
2. Nomenclatura em maiúsculas e minúsculas, a primeira letra da primeira palavra é minúscula e a primeira letra de cada palavra subsequente é capitalizado.

Exemplo de código:

var myCompany; //声明变量
myCompany='alibaba'; //赋值

var x=5;//声明的同时赋值
var y=6;

var z=x+y;//变量也可以存储表达式

5.1.2 Escopo

Variáveis locais
são variáveis declaradas dentro de uma função e só podem ser usadas dentro da função.
Variáveis globais
são variáveis declaradas fora da função e podem ser acessadas por todos os scripts e funções.

5.1.3 Ciclo de vida

O tempo de vida de uma variável começa quando ela é declarada

As variáveis locais serão excluídas após a execução da função e as variáveis globais serão excluídas após o fechamento da página.

5.2 Tipos de dados

5.2.1 Tipos de dados básicos

Corda

variável para armazenar caracteres

Strings devem usar aspas simples ou duplas

Dicas:
No aninhamento, aspas simples são aninhadas entre aspas duplas ou aspas duplas são aninhadas entre aspas simples.

Exemplo de código:

var myCompany="alibaba";

//引号嵌套,单引号嵌套双引号or双引号嵌套单引号
var demo1='字符串中嵌套"字符串"。';
var demo2="字符串中嵌套'字符串'。";

NúmeroNúmero

Existe apenas um tipo numérico que pode representar números de ponto flutuante e inteiros

Exemplo de código:

var intValue=11;
var floatValue=11.1;

//极大或极小的数字可以通过科学计数法来书写：
var demo1=666e5; //66600000
var demo2=-666e-5; //-0.00666

boleano

verdadeiro ou falso

Exemplo de código:

var f1=true;
var f2=false;

Nulo

Indica que o valor está vazio

Limpe a variável definindo seu valor como nulo

var isNULL=null;

Indefinido Indefinido

Indica que a variável não contém um valor

Existem 4 situações em que aparecerá indefinido

① Declaração de variável sem atribuição

var obj;
alert(obj);//obj值为undefined

② Obtenha atributos que não existem no objeto

var obj;
alert(obj.name);//报错信息： "Uncaught TypeError: Cannot read property 'name' of
undefined"

③ A função requer parâmetros reais, mas nenhum valor é passado ao chamar

Neste momento o parâmetro formal é indefinido

④ A chamada de função não retorna um valor ou não há dados após o retorno.

Neste momento, a variável retornada pela função receptora é indefinida.

Exemplo de código:

function printNum(num){
    
    
	alert(num);
}
var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined
alert(result);//result的值也是undefined，因为printNum()没有返回值

Símbolo

Representa um valor único

5.2.2 Tipos de dados de referência

ObjetoObjeto

MatrizArray

Função

5.2.3 Digitação dinâmica (obsoleto)

Tipagem dinâmica, ou seja, a mesma variável pode ser usada como tipos diferentes

Exemplo de código:

var param; // param类型为 undefined
param = 5; // param 为数字
param = "alibaba"; // param 为字符串

5.3 Operadores

Operadores aritméticos
+, -, *, /, %, ++, - -
Operadores de atribuição
=, +=, -=, *=, /=, %=
Caractere de concatenação de string
+
Operadores lógicos
&&, ||, !
Operador condicional
? :
Operadores de comparação
==, !=, >, <, >=, <=
===: Igualdade absoluta (ambos os valores e tipos são iguais)
!==: Não igualdade absoluta (um ou dois dos valores e tipos não são iguais) não são iguais)

Exemplo de código:

var x=5;
var f=(x===5); // true
f=(x==='5');// false
f=(x!==5); // false
f=(x!=='5');// true

5.4 Objetos

5.4.1 Objetos comuns

Corda

.length pode obter o comprimento de uma string (comprimento é um atributo, não um método, portanto não há necessidade de adicionar () ao chamar)

O comprimento do símbolo de transferência conta como um, ou seja, o comprimento de \' é 1

método:

método	descrever
charAt()	Retorna o caractere na posição especificada
charCodeAt()	Retorna a codificação Unicode do caractere na posição especificada
concat()	Concatena duas ou mais strings e retorna uma nova string
fromCharCode()	Converter codificação Unicode em caracteres
índice de()	Retorna a primeira ocorrência de um valor de string especificado em uma string
inclui()	Descobre se uma string contém uma substring especificada
lastIndexOf()	Pesquise a string de trás para frente e retorne a última ocorrência da string começando na posição inicial (0)
corresponder()	Find encontra uma correspondência de uma ou mais expressões regulares
repita()	Copia uma string um número especificado de vezes e as concatena e retorna
substituir()	Encontre substrings correspondentes em uma string e substitua as substrings que correspondem a uma expressão regular
procurar()	Encontre valores que correspondam a uma expressão regular
fatiar()	Extrai um fragmento de uma string e retorna a parte extraída em uma nova string
dividir()	Dividir string em array de string
começa com()	Verifique se uma string começa com uma substring especificada
substr()	Extrai um número especificado de caracteres de uma string do número de índice inicial
substring()	Extraia caracteres entre dois números de índice especificados em uma string
paraLowerCase()	Converter string em minúscula
paraUpperCase()	Converter string em maiúscula
aparar()	Remova os espaços em branco de ambos os lados da string
toLocaleLowerCase()	Converter uma string em minúsculas de acordo com a localidade do host local
toLocaleUpperCase()	Converter uma string em maiúsculas com base na localidade do host local
valor de()	Retorna o valor original de um objeto string
para sequenciar()	Retornar uma string

Variedade

Array, usado para armazenar vários valores em uma variável

.length pode obter o comprimento do array

Três caminhos:

	//方法一
	var letters = new Array();
	for(var i = 0; i < 4; i++) {
    
    
		letters[i] = "letter" + i;
	}
	for(var i = 0; i < letters.length; i++) {
    
    
		document.write(letters[i] + "<br/>");
	}
	
	//方法二	
	var numbers = [1,2,3,4,5];
	for(var i = 0; i < numbers.length; i++) {
    
    
		document.write(numbers[i] + "<br/>");
	}
	
	//方法三	
	var classes = new Array("class1","class2","class3");
	for(var i = 0; i < classes.length; i++) {
    
    
		document.write(classes[i] + "<br/>");
	}

método:

método	descrever
concat()	Concatena dois ou mais arrays e retorna o resultado
copiarDentro()	Copia um elemento de uma posição especificada em uma matriz para outra posição especificada em uma matriz
entradas()	Retorna um objeto iterável de um array
todo()	Verifique se cada elemento dos elementos numéricos atende à condição
preencher()	Preencha uma matriz com um valor fixo
filtro()	Detecte elementos numéricos e retorne uma matriz de todos os elementos que atendem aos critérios
encontrar()	Retorna elementos do array que correspondem às condições passadas no teste (função)
encontrarIndex()	Retorna o índice do elemento do array que atende aos critérios passados no teste (função)
para cada()	A função de retorno de chamada é executada uma vez para cada elemento do array
de()	Crie um array a partir dos objetos fornecidos
inclui()	Determinar se uma matriz contém um valor especificado
índice de()	Procura um elemento em um array e retorna sua posição
isArray()	Determine se o objeto é uma matriz
juntar()	Coloque todos os elementos de um array em uma string
chaves()	Retorna um objeto iterável do array contendo as chaves do array original
lastIndexOf()	Procura um elemento em um array e retorna sua última ocorrência
mapa()	Processe cada elemento do array por meio da função especificada e retorne o array processado
pop()	Remove o último elemento de um array e retorna o elemento removido
empurrar()	Adiciona um ou mais elementos ao final de um array e retorna o novo comprimento
reduzir()	Contar os elementos da matriz em um valor (da esquerda para a direita)
reduzirDireita()	Conte os elementos da matriz em um valor (da direita para a esquerda)
reverter()	Inverter a ordem dos elementos de um array
mudança()	Remove e retorna o primeiro elemento de um array
fatiar()	Seleciona uma parte de um array e retorna um novo array
alguns()	Verifique se algum elemento da matriz atende à condição especificada
organizar()	Classifique os elementos de um array
emenda()	Adicionar ou remover elementos de um array
para sequenciar()	Converta um array em uma string e retorne o resultado
não mudar()	Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento
valor de()	Retorna o valor original do objeto array

Data

Criar objeto de data:

//返回当前日期
var date1 = new Date();

//milliseconds：1970-1-1~现在的毫秒数
var date2 = new Date(milliseconds);

//符合日期类型的字符串（年月日-时分秒）
var date3 = new Date(dateString);

//月份取值为0~11，周日~周六取值为0~6
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Métodos comumente usados:

método	descrever
getData()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。

其他方法：

方法	描述
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear()	已废弃。请使用 getFullYear() 方法代替。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()	setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear()	已废弃。请使用 setFullYear() 方法代替。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	已废弃。请使用 toUTCString() 方法代替。
toISOString()	使用 ISO 标准返回字符串的日期格式。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。实例： var today = new Date(); var UTCstring = today.toUTCString();
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

Math

属性：

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）
LN2	返回 2 的自然对数（约等于0.693）
LN10	返回 10 的自然对数（约等于2.302）
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
PI	返回圆周率（约等于3.14159）
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）
SQRT2	返回 2 的平方根（约等于 1.414）

常用方法：

方法	描述
ceil(x)	对数进行上舍入
floor(x)	对 x 进行下舍入
round(x)	四舍五入
pow(x,y)	返回 x 的 y 次幂
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值
random()	返回 0 ~ 1 之间的随机数

其他方法：

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值
asin(x)	返回 x 的反正弦值
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
cos(x)	返回数的余弦
exp(x)	返回 Ex 的指数
log(x)	返回数的自然对数（底为e）
sin(x)	返回数的正弦
sqrt(x)	返回数的平方根
tan(x)	返回角的正切

5.4.2 自定义对象

对象是变量的容器，里面可以定义多个变量

定义

定义属性：
变量以键值对形式进行存储（name : value）
不同属性以逗号分隔，可换行可不换行
定义方法：
方法名称后面直接跟function

代码示例：

var people = {
    
    name:"SelcouthAI",age:20,codeYear:"1年"};
			
var student = {
    
    
	name:"SelcouthAI",	
	age:20,
	//方法后面直接跟function
	job:function(){
    
    
		alert("正在被包工头支配的新生代农民工");
	}			
}

调用

调用属性
第一种方式：类名.属性名
第二种方式：类名[“属性名”]
调用方法
类名.方法

代码示例：

var name = people.name;
document.write("name:"+name);
			
var age = people["age"];
document.write("age:"+age);
			
student.job();

5.5 函数

5.5.1 常用全局函数

isNaN(param)

tips：
全局属性NaN：非数值（Not a Number）

用于检查其参数是否是非数字值，不是数值返回true

代码示例：

console.log(isNaN(666));//false
console.log(isNaN(6+66));//false
console.log(isNaN("hello"));//true

parseFloat(String)

解析字符串，并返回一个浮点数

tips：
只返回字符串中第一个数字，开头和结尾允许空格
如果字符串的第一个非空字符不能被转换为数字，则返回 NaN

代码示例：

console.log(parseFloat("66"));//66
console.log(parseFloat("666.66"));//666.66
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 666 "));//666
console.log(parseFloat("1年"));//1
console.log(parseFloat("码龄1年"));//NaN

parseInt(string,radix)

解析一个字符串，返回整数

string ：必要参数，被解析的字符串
radix ：表示要解析的数字的基数（ 2 ~ 36 ）

当参数 radix 的值为 0或没有设置参数时，根据 string 来判断数字的基数：
“0x” 开头，其余部分解析为十六进制的整数
以 0 开头，其余部分解析为八进制或十六进制的数字
以 1 ~ 9 开头，解析为十进制的整数
tips：
只返回字符串中第一个数字，开头和结尾允许空格
如果字符串的第一个非空字符不能被转换为数字，则返回 NaN

代码示例：

console.log(parseInt("66"));//66
console.log(parseInt("666.6"));//666.6
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt("1年"));//1
console.log(parseInt("码龄1年"));//NaN

console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16

5.5.2 自定义函数

关键字：function

tips：
不需要声明类型，直接写参数名称
函数是否有返回值取决于函数体中是否有return关键字
返回值的类型取决于return中内容的类型

function 自定义函数名称(参数列表){
    
    
	...
}

代码示例：

	//无参无返回值的函数
	function print(){
    
    
		document.write("无参无返回值的函数");
	}
	print();
	
	//有参无返回值的函数
	function print1(num){
    
    
		document.write("有参无返回值的函数，参数为" + num);
	}
	print1(666);
	
	//有参有返回值的函数
	function print2(a,b){
    
    
		document.write("有参有返回值的函数，参数分别为"+a+"和"+b);
		return a+b;
	}
	var sum = print2(1,6);

5.5.3 匿名函数

把函数赋给一个变量，再调用变量

代码示例：

	//无参无返回值的函数
	var fun = function(){
    
    
		document.write("无参无返回值的函数");
	}
	fun();
	
	//有参无返回值的函数
	var fun1 = function(num){
    
    
		document.write("有参无返回值的函数，参数为" + num);
	}
	fun1(6);
	
	//有参有返回值的函数
	var fun2 = function(a,b){
    
    
		document.write("有参有返回值的函数，参数分别为"+a+"和"+b);
		return a+b;
	}
	var sum = fun2(1,6);
	alert(sum);