Directorio de artículos
1. Introducción
JavaScript a menudo se denomina js o script js.
-
Conceptos:
1. Lenguaje de secuencias de comandos interpretado (el código no está precompilado)
2. Lenguaje de programación liviano
3. Código de programación que se puede insertar en páginas HTML
(ejecutado por todos los navegadores modernos después de insertarse en páginas HTML) -
Función:
agregue funciones dinámicas a las páginas web
para brindar a los usuarios efectos de navegación más fluidos y hermosos.
Por lo general, los scripts de JavaScript implementan sus funciones incrustándolas en HTML.
2. Comentarios
Igual que los comentarios de una sola línea y de varias líneas de Java
Comentarios de una sola línea: comience con //
Comentarios de varias líneas: comienzan con /* y terminan con */
3. Uso
Hay tres tipos
1. js en la página HTML
Debe estar entre etiquetas de bloque de script
Los requisitos del puesto no son estrictos (puedes poner cabeza, cuerpo y último, normalmente cabeza o último)
Debe estar entre etiquetas de bloque de script
Ejemplo 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 externos
Los scripts se pueden guardar en archivos externos. La extensión de archivo de los archivos JavaScript externos es .js
1. Escriba archivos .js externamente
function fun1(){
alert("这是js外部文件");
}
2. Introduzca archivos js (ya sea head o body)
<!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 en atributos de etiqueta
Escrito directamente en algunos atributos de etiquetas HTML para escribir código JavaScript simple
<!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. Mostrar datos
① cuadro emergente window.alert()
- Se puede omitir la ventana, lo que equivale a alerta ("contenido mostrado");
② document.write() escribe el contenido
- document.write("contenido mostrado")
③ escritura HTML interna
- document.getElementById("id value").innerHTML="Contenido mostrado"
Dado que la carga se realiza de arriba a abajo, el valor de id debe cargarse primero, por lo que el script se coloca en la parte inferior del documento.
④ console.log se escribe en la consola del navegador
- console.log("contenido mostrado")
Ejemplo 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 es un lenguaje de secuencias de comandos. El navegador ejecuta el código de secuencia de comandos línea por línea al leer el código (la declaración js envía comandos al navegador para indicarle qué hacer)
- Consejos:
generalmente, escriba solo una declaración por línea y escriba un punto y coma al final de cada oración.
5.1 Variables
5.1.1 Sintaxis básica
Palabras clave: var
Utilice var de manera uniforme para la declaración de variables y el tipo de datos de la variable se determina en función de la asignación.
-
Declarar variables:
var nombre de variable; -
Reglas de nomenclatura:
1. Las variables deben comenzar con una letra
2. Las variables también pueden comenzar con los símbolos $ y _
3. Los nombres de las variables distinguen entre mayúsculas y minúsculas (y e Y son variables diferentes)
4. No se pueden utilizar palabras clave reservadas -
Convención de nomenclatura:
1. Conozca el significado cuando vea el nombre y asígnele el nombre de acuerdo con el significado de la variable
2. Nomenclatura en mayúsculas y minúsculas, la primera letra de la primera palabra es minúscula y la primera letra de cada palabra posterior es en mayúscula.
Ejemplo de código:
var myCompany; //声明变量
myCompany='alibaba'; //赋值
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式
5.1.2 Alcance
- Las variables locales
son variables declaradas dentro de una función y solo se pueden usar dentro de la función. - Las variables globales
son variables declaradas fuera de la función y a ellas pueden acceder todos los scripts y funciones.
5.1.3 Ciclo de vida
La vida útil de una variable comienza cuando se declara.
Las variables locales se eliminarán después de ejecutar la función y las variables globales se eliminarán después de cerrar la página.
5.2 Tipos de datos
5.2.1 Tipos de datos básicos
Cadena
variable para almacenar caracteres
Las cadenas deben utilizar comillas simples o dobles.
- Consejos:
en el anidamiento, las comillas simples se anidan entre comillas dobles o las comillas dobles se anidan entre comillas simples.
Ejemplo de código:
var myCompany="alibaba";
//引号嵌套,单引号嵌套双引号or双引号嵌套单引号
var demo1='字符串中嵌套"字符串"。';
var demo2="字符串中嵌套'字符串'。";
NúmeroNúmero
Sólo hay un tipo numérico que puede representar tanto números de coma flotante como números enteros.
Ejemplo de código:
var intValue=11;
var floatValue=11.1;
//极大或极小的数字可以通过科学计数法来书写:
var demo1=666e5; //66600000
var demo2=-666e-5; //-0.00666
Booleano
verdadero o falso
Ejemplo de código:
var f1=true;
var f2=false;
Nulo
Indica que el valor está vacío.
Borre la variable estableciendo su valor en nulo
var isNULL=null;
Indefinido indefinido
Indica que la variable no contiene un valor.
Hay 4 situaciones en las que aparecerá indefinido.
① Declaración de variable sin asignación
var obj;
alert(obj);//obj值为undefined
② Obtener atributos que no existen en el objeto
var obj;
alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of
undefined"
③ La función requiere parámetros reales, pero no se pasa ningún valor al llamar
En este momento el parámetro formal no está definido.
④ La llamada a la función no devuelve un valor o no hay datos después del retorno.
En este momento, la variable devuelta por la función receptora no está definida.
Ejemplo de código:
function printNum(num){
alert(num);
}
var result=printNum();//调用函数未传递参数,执行函数的时候num的值是undefined
alert(result);//result的值也是undefined,因为printNum()没有返回值
Símbolo
Representa un valor único.
5.2.2 Tipos de datos de referencia
Objeto Objeto
matrizmatriz
Función
5.2.3 Escritura dinámica (en desuso)
Escritura dinámica, es decir, la misma variable se puede utilizar como tipos diferentes
Ejemplo de código:
var param; // param类型为 undefined
param = 5; // param 为数字
param = "alibaba"; // param 为字符串
5.3 Operadores
- Operadores aritméticos
+, -, *, /, %, ++, - - - Operadores de asignación
=, +=, -=, *=, /=, %= - Carácter de concatenación de cadenas
+ - Operadores lógicos
&&, ||, ! - ¿ Operador condicional
? : - Operadores de comparación
==, !=, >, <, >=, <=
===: Igualdad absoluta (tanto los valores como los tipos son iguales)
!==: No igualdad absoluta (uno o dos de los valores y los tipos no son iguales) no son iguales)
Ejemplo 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 comunes
Cadena
.length puede obtener la longitud de una cadena (la longitud es un atributo, no un método, por lo que no es necesario agregar () al llamar)
La longitud del símbolo de transferencia cuenta como uno, es decir, la longitud de \' es 1
método:
método | describir |
---|---|
charAt() | Devuelve el carácter en la posición especificada. |
charCodeAt() | Devuelve la codificación Unicode del carácter en la posición especificada |
concat() | Concatena dos o más cadenas y devuelve una nueva cadena |
desdeCharCode() | Convertir codificación Unicode a caracteres |
índice de() | Devuelve la primera aparición de un valor de cadena especificado en una cadena |
incluye() | Encuentra si una cadena contiene una subcadena especificada |
último índice de() | Busque la cadena de atrás hacia adelante y devuelva la última aparición de la cadena comenzando desde la posición inicial (0) |
fósforo() | Buscar encuentra una coincidencia de una o más expresiones regulares |
repetir() | Copia una cadena un número específico de veces, las concatena y devuelve |
reemplazar() | Encuentre subcadenas coincidentes en una cadena y reemplace las subcadenas que coincidan con una expresión regular |
buscar() | Encuentra valores que coincidan con una expresión regular |
rebanada() | Extrae un fragmento de una cadena y devuelve la parte extraída en una nueva cadena |
dividir() | Dividir cadena en matriz de cadenas |
comienza con() | Comprobar si una cadena comienza con una subcadena especificada |
substr() | Extrae un número específico de caracteres de una cadena a partir del número de índice inicial |
subcadena() | Extraiga caracteres entre dos números de índice especificados en una cadena |
a minúsculas() | Convertir cadena a minúsculas |
a mayúsculas() | Convertir cadena a mayúsculas |
recortar() | Eliminar espacios en blanco de ambos lados de la cuerda |
toLocaleLowerCase() | Convertir una cadena a minúsculas según la configuración regional del host local |
toLocaleUpperCase() | Convertir una cadena a mayúsculas según la configuración regional del host local |
valor de() | Devuelve el valor original de un objeto de cadena. |
Encadenar() | Devolver una cadena |
Formación
Matriz, utilizada para almacenar múltiples valores en una variable.
.length puede obtener la longitud de la matriz.
Tres maneras:
//方法一
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 | describir |
---|---|
concat() | Concatena dos o más matrices y devuelve el resultado |
copiar dentro() | Copia un elemento desde una posición especificada en una matriz a otra posición especificada en una matriz |
entradas() | Devuelve un objeto iterable de una matriz. |
cada() | Compruebe si cada elemento de elementos numéricos cumple con la condición. |
llenar() | Llenar una matriz con un valor fijo |
filtrar() | Detecta elementos numéricos y devuelve una matriz de todos los elementos que cumplen con los criterios. |
encontrar() | Devuelve elementos de matriz que coinciden con las condiciones pasadas en la prueba (función) |
encontrar índice() | Devuelve el índice del elemento de la matriz que cumple con los criterios pasados en la prueba (función) |
para cada() | La función de devolución de llamada se ejecuta una vez para cada elemento de la matriz. |
de() | Crea una matriz a partir de los objetos dados. |
incluye() | Determinar si una matriz contiene un valor específico |
índice de() | Busca un elemento en una matriz y devuelve su posición |
esmatriz() | Determinar si el objeto es una matriz. |
unirse() | Poner todos los elementos de una matriz en una cadena. |
llaves() | Devuelve un objeto iterable de la matriz que contiene las claves de la matriz original. |
último índice de() | Busca un elemento en una matriz y devuelve su última aparición |
mapa() | Procese cada elemento de la matriz a través de la función especificada y devuelva la matriz procesada |
estallido() | Elimina el último elemento de una matriz y devuelve el elemento eliminado |
empujar() | Agrega uno o más elementos al final de una matriz y devuelve la nueva longitud |
reducir() | Cuente los elementos de la matriz en un valor (de izquierda a derecha) |
reducirDerecha() | Cuente los elementos de la matriz en un valor (de derecha a izquierda) |
contrarrestar() | Invertir el orden de los elementos de una matriz. |
cambio() | Elimina y devuelve el primer elemento de una matriz. |
rebanada() | Selecciona una parte de una matriz y devuelve una nueva matriz |
alguno() | Compruebe si algún elemento de la matriz cumple con la condición especificada |
clasificar() | Ordenar los elementos de una matriz |
empalme() | Agregar o eliminar elementos de una matriz |
Encadenar() | Convierte una matriz en una cadena y devuelve el resultado |
desactivar() | Agrega uno o más elementos al comienzo de una matriz y devuelve la nueva longitud |
valor de() | Devuelve el valor original del objeto de matriz. |
Fecha
Crear objeto de fecha:
//返回当前日期
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 comúnmente utilizados:
método | describir |
---|---|
obtener la fecha() | 从 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);