1. Introducción al conocimiento de introducción a JavaScript
Tenga en cuenta que JavaScript distingue estrictamente entre mayúsculas y minúsculas. ! ! Cada oración de código debe agregarse con un punto y coma al final;
(1) Cómo escribir código JavaScript
1): Estilo en línea: escriba en la etiqueta.
<div οnclick = "alert ('Inj 666')”> </div>
2): Estilo en línea: escrito en un par de etiquetas <head> </head>.
<head> <script> alert ('Inj 666'); </script> </head>
3): Estilo de enlace externo: escríbalo en un archivo .js separado y luego impórtelo.
<script src = "01-javascript.js"> </script>
punto importante:
1. No se recomienda el formato en línea.
* 2. De forma predeterminada, el análisis de la página web se realiza de arriba a abajo. Si usa el estilo en línea para escribir el código js en el script en el contenido de la etiqueta head, no puede manipular el contenido de la página. Hay dos soluciones, una es agregar window.οnlοad = function ()
{ código javascript; } fuera del código javascript original
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<script>
window.onload=function(){ /*等到界面上所有内容都加载完毕，再执行大括号内的东西*/
var oDiv=document.querySelector("div");
var text=oDiv.innerText;
alert(text);
}
</script>
<body>
<div>生活无非是痛苦和美丽</div>
</body>
</html>
3. La tercera solución es escribir el código js en la última posición del cuerpo. *
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<div>生活无非是痛苦和美丽</div>
<script> /*将代码写在所有代码结束前即body的最后位置*/
var oDiv=document.querySelector("div");
var text=oDiv.innerText;
alert(text);
</script>
</body>
</html>
Tenga en cuenta que importar el código js aquí es equivalente a pegar directamente el código en el archivo js en la ubicación correspondiente, por lo que todo lo que se requiere es el mismo que el código escrito directamente arriba.
Además, si escribe código en la etiqueta del script, no puede llamar al archivo js
(2) Métodos de salida comunes
1) La forma de la ventana emergente:alerta 、 confirmar 、 aviso
Tenga en cuenta que los números se pueden escribir directamente, pero los que no son números se deben generar con comillas dobles / simples.
* alerta ventana emergente ordinaria:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
alert("生活无非是痛苦和美丽");
</script>
</body>
</html>
* Confirmar ventana emergente (con un botón más para cancelar):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
confirm("生活无非是痛苦和美丽");
</script>
</body>
</html>
* mensaje (se agrega un cuadro de entrada adicional):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
prompt("生活无非是痛苦和美丽");
</script>
</body>
</html>
2) Salida en forma de contenido web:document.write (contenido)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
document.write("生活无非是痛苦和美丽！");
</script>
</body>
</html>
3) Salida en forma de consola de herramientas para desarrolladores:console.log (contenido)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript入门1</title>
</head>
<body>
<script type="text/javascript"> /*将代码写在所有代码结束前即body的最后位置*/
console.log("生活无非是痛苦和美丽！");
console.log(123);
console.warn("错误输出");
</script>
</body>
</html>
2. Sintaxis básica de JavaScript
1. Constantes, variables, constantes booleanas
Constante: datos que no se pueden modificar
*Constante entera： 6… *
Real constante: Cualquier decimal.
Constante de cadena: Caracteres entre comillas simples o dobles. 'a' también es una cadena
Constante booleana: Solo hay dos valores, verdadero (verdadero) y falso (falso)
Constante personalizada(Constante fija constante): Formato ----- constante nombre constante = valor constante;
b. Variables: indican datos que se pueden modificar
Definir variables:var nombre de variable;
== Usar variable: == Almacenar datos en el espacio de memoria adquirido. ----- Nombre de la variable = Datos a almacenar == Obtenga los datos
almacenados en la variable: == Simplemente use el nombre de la variable directamente.
Suma de variables:
Modifique la variable directamente y asígnela nuevamente.
Si no está inicializado, el número var indefinido se almacena en la memoria;
También hay algunos métodos de asignación descritos en el siguiente código, que es muy similar al lenguaje C
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript基本语法</title>
</head>
<body>
<script type="text/javascript">
const NUM=666; //常量
console.log(NUM);
var name; //变量
name="生活无非是痛苦和美丽";
console.log(name);
var use="独自美丽"; //定义的时候初始化
console.log(use);
var num1,num2,num3; //同时定义多个变量
var val1=1, vla2=2,val=3; //定义的时候同时初始化多个不同而变量。
val1=val2=100; //也可以同时用一个表达式对多个相同值的变量赋值。
name=123; //修改变量，会直接丢弃旧的值，放入新的值。
console.log(name);
var test; //未初始化的变量
console.log(test);
</script>
</body>
</html>
c. Variable booleana: expresión lógica
//逻辑短路（与、或）
console.log(11||12||0||-1); //逻辑||遇到真就停止，作为最后结果
console.log(0||13||12||-1);
console.log(11&&12&&0&&-1); //逻辑&&遇到假就停止，作为最后结果
console.log(0&&11&&12&&-1);
d. Variables y constantes de cadena
2. Estructura de datos básica: matriz, función
(1) Matriz:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js重要数据结构</title>
</head>
<body>
<script type="text/javascript">
//生成数组的三种方式;
var arr1=new Array(6);
arr1[0]="Romantic"; //数组赋值
console.log(arr1);
var arr2=new Array(1,2,3,4,5,6);
console.log(arr2);
var arr3=[1,2,3,4,5,6];
console.log(arr3);
</script>
</body>
</html>
(2) Función:
a. El formato de creación de una función estática: (la sintaxis básica es casi la misma que la del lenguaje C)
function 函数名（形参1，形参2，...）{
函数体；
（return 返回值) //可有可无;
}
p.ej:
//函数
function max(a,b){
var max_a_b;
max_a_b= a>=b? a:b;
return max_a_b;
}
var a=10,b=5;
var max_a_b;
max_a_b=max(a,b);
console.log(max_a_b);
b. Los métodos para llamar a la función son:
var myVar=函数名;
myVar(实际参数...);
p.ej:
var fun1=max;
console.log(fun1(2,100));
c. Hay una variable de argumentos incorporada dentro de la función para acceder a todos los parámetros pasados a la función
Nota: La lista de parámetros de una función puede ser cualquier número y el tipo de datos puede ser de cualquier tipo. Las funciones de JavaScript, naturalmente, admiten parámetros variables. JavaScript tiene una variable de argumentos que puede acceder a todos los parámetros pasados a la función.
<script type="text/javascript">
/*add函数是一个参数可变的函数*/
function add(){
var result=0;
for(var i=0;i<arguments.length;i++){
//alert(arguments[i]);
result+=arguments[i];
}
return result;
}
alert("add(1,2,3)="+add(1,2,3));//调用add函数时传入3个参数
alert("add(1,2,3,4,5,6)="+add(1,2,3,4,5,6));//调用add函数时传入6个参数
alert("add()="+add());//调用add函数时不传入参数
alert("add(1,\"HelloWorld\")="+add(1,"HelloWorld"));//调用add函数时传入不同类型的参数
</script>
d. javascript crea funciones dinámicas
El formato básico para crear funciones dinámicas: var nombre de variable = nueva función ("parámetro 1", "parámetro 2", "parámetro n", "instrucción de ejecución");
Tenga en cuenta que aquí es para crear un objeto Función y luego asignar el objeto al nombre de la variable
var sum=new Function("x","y","var sum;sum=x+y;return sum");
alert("sum(3+4)="+sum(3,4));
等价于静态函数：
function square (x,y){
var sum;
sum = x+y;
return sum;
}
e. La diferencia entre función estática y función dinámica:
Podemos ver que cada oración está rodeada por comillas "x", "y" y "var sum; sum = x + y ;; return sum;". Ambas están rodeadas por comillas, lo que significa que cada declaración en el Los paréntesis después de la nueva función están entre comillas, lo que significa que todos se expresan y se llaman en forma de cadenas, y las cadenas pueden ser definidas o cambiadas por variables, es decir, podemos definir variables para que el valor de la variable es igual a estas cadenas:
<script type="text/javascript">
var a = "var sum;";
var b = "sum = x + y;";
var c = "return sum;";
var square = new Function ( "x", "y", a+b+c);
alert(square (2,3));
</script>
Aquí, hemos definido las variables a, b, c, dejamos que a = "var sum;", dejemos b = "sum = x + y;", dejemos c = "return sum;"
这样 ： var cuadrado = nueva función (“x”, “y”, “var suma; suma = x + y; devuelve suma;”);
1) Podemos escribir: var cuadrado = nueva función ("x", "y", a + b + c); Debido a que a, byc son tres cadenas, la suma de cadenas sigue siendo una cadena.
2) ¿Por qué dividimos el código en pequeños fragmentos de código? , La ventaja de dividir una cadena en varias cadenas independientes es que podemos cambiar la función de la función en cualquier momento modificando algunas de las cadenas.
<script type="text/javascript">
var a = "var sum;";
var b = "sum = x + y;";
var c = "return sum;";
var square = new Function ( "x", "y", a+b+c);
alert(square (2,3));
b = "sum = x -y;";//就可以将函数的功能改成减法运算
square = new Function ( " x", "y",a+b+c);
alert(square (2,3));
</script>
En el proceso de ejecutar el programa, cambiamos b = "suma = x + y;"; a "suma = xy;"; de esta manera, colocamos la variable modificada b en var cuadrado = nueva Función ("X" , "y", a + b + c); en, luego ("x", "y", "var sum; sum = x + y; return sum;"); se convierte en: ("x", "y" , "var sum; sum = xy; return sum;"); Ponemos los parámetros 2 y 3 pasados a esta función dinámica, se convierte en 2-3, y el resultado es -1.
f. Función anónima:
var f1 = function(i1, i2) { //方法一
return i1 + i2;
}
alert(function(i1, i2) { return i1 + i2; }(10,10)); //方法二
alert(f1(1,2));
El uso de este tipo de función anónima está muy en JQuery, declare una función anónima directamente y úsela inmediatamente. La ventaja de usar funciones anónimas es que evita la necesidad de definir una función que no se usa una vez y evita el problema de los conflictos de nombres. No existe el concepto de espacio de nombres en js, por lo que es fácil entrar en conflicto con los nombres de las funciones. Una vez los conflictos de nomenclatura, prevalecerá la declaración final.
Nota: JavaScript no admite la sobrecarga de funciones. JavaScript no dice que no haya sobrecarga de métodos. Si dos métodos tienen el mismo nombre, incluso si el número de parámetros es diferente, la definición posterior anulará la definición anterior. Cuando el método se llama, siempre se define después de la llamada.
(3) c. Matemáticas (objeto matemático):
Math.abs (...) ------> Tome el valor absoluto
Math.celi (...) ------>
Redondee Math.floor (...) ------ > Redondear hacia abajo
Math .round (...) ------> Redondear al número entero más cercano
Math.max (a, b, c, ...) ------> Tomar el valor máximo de varios números
Math.min (a, b, c, ...) ------> Toma el valor mínimo de varios números
Math.sin (Math.PI / 6) -> Encuentra el valor sinSimilar a otros cos ()
(4) Objeto de matriz de matriz
(1) arr1.concat (arr2);
empalme de matriz, el resultado es empalmar arr2 al final de arr1;
(2) arr.join ();
salida de cadena de matriz, el símbolo de la conexión del elemento se puede especificar entre paréntesis;
eg:
arr=["a","b","c","d"];
console.log(arr.join("|")); (结果为"a|b|c|d")
(3) arr.pop ();
corta el último elemento de la matriz, y el valor de retorno es ese elemento;
(4) arr.slice (start, end)
1) Obtener, obtener el fragmento especificado de la matriz, iniciar debe tener, si el parámetro es negativo, seleccionar desde el final;
2) El valor de retorno es una nueva matriz compuesta por fragmento;
(5) arr.push
1) Agregar, usado para agregar un nuevo elemento al final de la matriz, el parámetro puede ser múltiple;
2) El valor de retorno es la nueva longitud de la matriz;
(6) arr.splice
1) se usa para agregar elementos al índice especificado en la matriz;
arr.splice (2, 0, “William”, “asdfasdf”);
comenzando desde el segundo elemento, el número de elementos que se van a eliminado (puede 0, desde 0 hasta el final), agregar elementos como "William", "asdfasdf";
2) Se usa para reemplazar los elementos en la matriz;
arr.splice (2,1, "William");
3) Se usa para eliminar los elementos en la matriz;
arr.splice (2,2);
(7) arr.indexOf (element);
buscar, encontrar elemento en la matriz, el valor de retorno es el índice, si no existe tal elemento, devuelve -1;
(8) arr.sort (función);
ordenar, la función es una función;
eg:
function sortNumber(a,b){
return a-b;
}
arr.sort(sortNumber);(从小到大排序)
tips：如果a-b改成b-a，那么执行的操作为从大到小；
tips:字符串对象（String）的方法与Array的方法类似；
(4) Objeto de fecha y fecha
date.getTime ()
date.getMilliseconds ()
date.getSeconds ()
date.getMinutes ()
date.getHours ()
date.getDay ()
date.getDate ()
date.getMonth ()
date.getFullYear ()
var time=new Date();
alert(time);
var year=time.getFullYear();
var month=time.getMonth();
var day=time.getDay();
alert(year+"-"+month+'-'+day);
consejos: mucho, consulta la documentación
(4) Objeto de cadena
charAt (index)
str [index] Obtiene el carácter en la posición especificada de la cadena
concat () concatenando
segmento de cadena (inicio, fin) / subcadena (inicio, fin) intercepta los caracteres comenzando desde el inicio y terminando en el final, y devuelve una nueva cadena. Si inicio es un número negativo, entonces comienza desde el último carácter;
substr (inicio, longitud) intercepta caracteres comenzando desde el inicio y la longitud para obtener una nueva cadena
indexOf (char) Obtiene la primera posición del carácter especificado en la cadena
lastIndexOf (char) Obtiene la última posición del carácter especificado en la cadena
trim () eliminar el espacio en blanco antes y después de la cadena
toUpperCase ()
toLocaleUpperCase () convertir a mayúsculas
toLowerCase ()
toLocaleLowerCawse () convertir a minúsculas
reemplazar () reemplazar el carácter
dividir () dividir la cadena en una matriz