contenido
La relación entre JavaScript y HTML y CSS
Proceso de ejecución de JavaScript
3. Descripción general de la sintaxis
indefinido tipo de datos indefinido
eliminar un elemento de una matriz
1. ¿Qué es JavaScript?
JavaScript (JS para abreviar)
es uno de los lenguajes de programación más populares del mundo
es un lenguaje de secuencias de comandos que se ejecuta a través de un intérprete
Se ejecuta principalmente en el lado del cliente (navegador), ahora también se puede ejecutar en el lado del servidor basado en node.js.
La relación entre JavaScript y HTML y CSS
HTML: La Estructura de la Página Web (Bone)
CSS: rendimiento de la página web (piel)
JavaScript: comportamiento de la página web (alma)
Proceso de ejecución de JavaScript
El código escrito se guarda en el archivo, es decir, se almacena en el disco duro (memoria externa).
Haga doble clic en el explorador de archivos .html (aplicación) para leer el archivo y cargar el contenido del archivo en la memoria (flujo de datos: disco duro => memoria)
El navegador analiza el código escrito por el usuario, lo traduce a binario y permite que la computadora reconozca las instrucciones (el trabajo del intérprete) para obtener
Las instrucciones binarias serán cargadas y ejecutadas por la CPU (flujo de datos: memoria => CPU)
Componentes de JavaScript
ECMAScript (ES para abreviar) : sintaxis de JavaScript
DOM : el modelo de objeto de documento de página, que opera en los elementos de la página.
BOM: modelo de objetos del navegador, que opera en la ventana del navegador
2. Conocimientos preliminares
primer programa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("你好！");
</script>
</body>
</html>
Cómo se escribe JavaScript
expresión en línea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点我一下" onclick = "alert('haha')">
</body>
</html>
Tipo de ajuste interior
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("hello word");
</script>
</body>
</html>
fórmula externa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html>alert("jjjjj");
de entrada y salida
entrada: aviso
mostrar un cuadro de entrada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
prompt("请输入你的姓名");
</script>
</body>
</html>
salida: alerta
<body>
<script>
alert("sjs");
</script>
</body>
Salida: consola.log
<body>
<script>
console.log("日志");
</script>
</body>
3. Descripción general de la sintaxis
uso de variables
var name = 'zhangsan';
var age = 20;usar variables
console.log(age); // 读取变量内容
age = 30; // 修改变量内容
<body>
<script>
var name = prompt("输入姓名");
var age = prompt("输入年龄");
var socre = prompt("输入分数");
alert("姓名" + name);
alert("年龄"+age);
alert("分数"+ socre);
</script>
</body>
comprender la escritura dinámica
var a = 10; // 数字
var b = "hehe"; // 字符串El tipo de la variable puede cambiar a medida que se ejecuta el programa.
var a = 10; // 数字
a = "hehe"; // 字符串tipo de datos básicos
número tipo numérico
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头Un dígito octal corresponde a tres dígitos binarios
Un dígito hexadecimal corresponde a cuatro dígitos binarios (Dos dígitos hexadecimales son un byte
valor numérico especial
nfinity: Infinito, mayor que cualquier número. Indica que el número ha excedido el rango que JS puede representar. -Infinity: Infinito negativo, menor que cualquier número. Indica que el número ha excedido el rango que JS puede representar. NaN: Indica que el resultado actual no es un número.
<body>
<script>
var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);
</script>
</body>
cadena tipo de cadena
var a = "haha";
var b = 'hehe';
var c = hehe; // 运行出错var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引
号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号tipo booleano booleano
console.log(true + 1);
console.log(false + 1)
<body>
<script>
console.log(true + 1);
console.log(false + 1)
</script>
</body>
indefinido tipo de datos indefinido
<body>
<script>
var a;
console.log(a)
</script>
</body>
4. matriz
crear matriz
</head>
<body>
<script>
var arr = new Array();
</script>
</body>
obtener elemento de matriz
<body>
<script>
var arr = ['1','2','3'];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
</script>
</body>
añadir elemento de matriz
<body>
<script>
var arr = [9, 5, 2, 7];
arr.length = 6;
console.log(arr);
console.log(arr[4], arr[5]);
</script>
</body>
<body>
<script>
var arr = [];
arr[2] = 10;
console.log(arr)
</script>
</body>
<body>
<script>
var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 != 0) {
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
</body>
eliminar un elemento de una matriz
<body>
<script>
var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
</script>
</body>
5. Función
formato de sintaxis
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值<body>
<script>
// 调用函数
hello();
// 定义函数
function hello() {
console.log("hello");
}
</script>
</body>
expresión de función
<body>
<script>
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add);
</script>
</body>
cadena de alcance
<body>
<script>
var num = 1;
function test1() {
var num = 10;
function test2() {
var num = 20;
console.log(num);
}
test2();
}
test1();
</script>
</body>
Las funciones se pueden definir dentro de las funciones y las funciones internas pueden acceder a las variables locales de las funciones externas.
Cuando se ejecuta console.log(num), ahora buscará num en el ámbito local de prueba 2. Si no se encuentra, continuará buscando en prueba 1. Si no se encuentra, se buscará en el ámbito global. alcance.