Introducción a js Operaciones básicas y funciones de objeto integradas de sentencias de bucle 044
El nombre completo de js es javascript, que describe el comportamiento desde la perspectiva de la interacción.
Método de anotación 1.js:
//Comentario de una sola línea declarar variable var
2. Declarar múltiples variables: var a = '2' , b = 4, c = true
Reglas gramaticales:
No es sensible a los saltos de línea, sangría y espacios. Recuerde agregar un punto y coma al final de cada declaración; no es necesario, pero para la futura compresión del programa, no se ejecutará sin la compresión de punto y coma.
alerta de cuadro de advertencia emergente () salida de consola consola.log ()
Entrada del usuario: declaración de solicitud ()
prompt()Se utiliza especialmente para abrir un cuadro de diálogo que permite al usuario ingresar.
el código se muestra a continuación:
<script type= " text/javascript " > var a = prompt( ' ¿Qué tiempo hace hoy? ' ); console.log(a); </script>
El contenido ingresado por el usuario en el código anterior se pasará a la variable a. Luego, el resultado ingresado por el usuario se mostrará en la consola.
Tenga en cuenta que var siempre se usa para definir variables en js. Las variables deben definirse antes de que puedan usarse.
Tipo de variable:
Tipo numérico: número define una variable que almacena números, y esta variable es numérica
var a = 100 ; // Se define una variable a y se le asigna un valor de 100 console.log( typeof a); // El resultado de generar el tipo de variable a es number
//typeof() significa 'obtener el tipo de variable'
cadena: cadena
Diferencia entre guión y signo más:
+ puede ser un guión o un signo más para los números.
console.log("I" + "Love" + "You"); // El guión conecta tres caracteres chinos independientes juntos
console.log("I+Love+You"); // Salida tal como es
console.log( 1+2+3); // salida 6
Resumen: si hay valores a ambos lados del signo más, es una suma, de lo contrario, es un guión
var str = 'Eres muy amable';
//NaN es un tipo especial No es un número pero es un tipo numérico
// console.log(parseInt(str));
// console.log(typeof parseInt(str))
//Si la variable es un valor, devuelve false
console.log(isNaN(2));
//Conserva solo el entero
console.log(parseInt(5.8)); 5
parseInt() cadena a número sin redondeo
Con la función de purificación automática, solo los caracteres chinos después del número al comienzo de la cadena desaparecerán automáticamente, y los números posteriores no volverán a aparecer.
Redondeo sin redondeo con truncamiento automático de decimales
Tipos de datos básicos:
número (tipo numérico) cadena (tipo de cadena) booleano (tipo de valor booleano) nulo (objeto vacío) (su propio tipo es objeto) indefinido (indica que la variable no está definida)
log( tipo de a); // indefinido </script> </cuerpo> </html>
Operadores: Operadores de asignación Operadores aritméticos Operadores de comparación Casos especiales
Operador de asignación demostrado con var x = 12 , y = 5
Operadores aritméticos var a = 5 b = 2
operador de comparación var x = 5
concatenación de cadenas
Estalló la guerra de Irak y las fuerzas de la coalición dominadas por ${name} derrotaron al ejército de Saddam en poco más de 20 días. Esta es otra victoria militar abrumadora a gran escala para ${am} después de la Guerra del Golfo hace más de una década. `
// La conversión implícita de un valor + una cadena es equivalente a empalmar cadenas
var a = '1' ;
var b = 2
console.log(a + b); //12
var num = 4545454555 ;
console.log(num + ' ' );
</script>
</cuerpo>
</html>
La cadena concatenada `` tecla de tabulación de ES6 sobre la variable de acento grave usa ${nombre de la variable} recuerda
Conversión de tipo de datos
1 Convierte el tipo numérico a un tipo de cadena
Conversión implícita Un valor + una cadena es equivalente a empalmar cadenas
var a = '1';
var b = 2
consola.log(a+b); //'12'
var num = 4545454555;
console.log(num+''); // El resultado también es una cadena
Cast
// Conversión de tipo forzado String(),toString() var str1 = String(n1); console.log( typeof str1); var num = 234 ; console.log(num.toString())
Convertir tipo de cadena a tipo numérico
var stringNum = '789.123wadjhkd' ; var num2 = Number(stringNum); console.log(num2) // parseInt() puede analizar una cadena y devolver un entero console.log(parseInt(stringNum)) console.log(parseFloat ( número de cadena));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Título</title>
</head>
<body>
<script> var a = 5 ;
/ / Conversión forzada de tipos // constructor console.log(String(a));
console.log(a.toString()); // cadena a tipo numérico var numStr = '7788.44563563563535616743516748146148914189489' ;
console.log(Number(numStr )) ;
console.log(parseFloat(numStr)); // float es más preciso a medida que aumenta el número de dígitos después del punto decimal; double es menos preciso a medida que aumenta el número de dígitos después del punto decimal, pero es más preciso que float //
1.111111111111111111111111 1.111111119098000000 1.111111111111189080000
var b = 7 / 0 ;
console.log(b);
console.log( typeof b);
//Convertirlo a tipo booleano
var b 1 = '123'; // true
var b2 = 0; // falso
var b3 = -123; // verdadero
var b4 = infinito; // verdadero
var b5 = NaN; // falso
var b6; // indefinido falso
var b7 = nulo ;
console.log(Boolean(b7));
</ guion>
</cuerpo>
</html>
Control de flujo: if if-else else-if
if ( true ) { // Ejecutar la operación } else if ( true ){ // Ejecutar si se cumple la condición } else if ( true ){ // Ejecutar si se cumple la condición } else { // Ejecutar si se cumple la condición met } // Nota: código de análisis del navegador La orden se ejecuta de arriba a abajo y de izquierda a derecha
Lógico Y && Lógico O ||
// 1. Simulación Si la Universidad de Tsinghua ingresa el puntaje total> 400 y el puntaje de matemáticas> 89 // La lógica y && son verdaderos si (suma> 400 && matemáticas> 90 ) { console.log ( ' La Universidad de Tsinghua ingresó con éxito ' ) } else { alert( 'Fracaso en el examen de ingreso a la universidad' ) } // 2. Simule si el puntaje total es >400 o si su inglés es superior a 85 y la Universidad de Fudan lo ingresa // lógica o solo si una condición es true (sum>500 || english>85 ){ alert( 'Inscrito en la Universidad de Fudan' ) } else { alert( 'El examen de ingreso a la universidad falló nuevamente' ) }
cambiar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Título</title>
</head>
<body>
<script> // console.log( 0&&1 || 2&&3); // operación ternaria // console.log( 1 < 2 ? 'true' : 'false'); // if(1<2) console.log(2); // switch Cambiar control de proceso // Tenga cuidado con la penetración de case var weather = 'rainy day' ;
switch (weather){
case 'sunny day' :
console.log( 'Hoy hace buen tiempo' );
break ;
case 'dia lluvioso' :
console.log( 'El tiempo no es bueno hoy' );
break ;
case 'Nevando' :
console.log( 'El clima no es bueno hoy' );
break ;
default :
console.log( 'El clima no es bueno' )
}
< /guión>
</cuerpo>
</html>
mientras bucle
1 Inicializar la variable de bucle 2 Determinar la condición de bucle 3 Actualizar la variable de bucle
var i = 1; // Inicializar la variable de ciclo while (i<=9){ // Juzgar la condición del ciclo console.log(i); i = i+1; // Actualizar la condición del ciclo }
El bucle do-while se ejecuta primero en el juicio
// Ya sea que la condición en while se cumpla o no, el código en do irá una vez var i = 3; // Inicialice la variable de bucle do { console.log(i) i ++; // Actualice la condición de bucle } while (i<10) // Determinar la condición del ciclo
en bucle
// Calcular la suma de todos los números entre 1 y 100
var sum = 0 ; for ( var j = 1;j<=100;j++ ){ sum = sum+ j } console.log(sum)
Triángulo rectángulo de salida en el navegador
for ( var i=1;i<=6;i++ ){ for ( var j=1;j<=i;j++ ){ documento.escribir( "*" )； } documento.escribir( '<br>' ) ； }
El efecto es el siguiente
* ** *** **** ***** ******
triángulo isósceles
for ( var i=1;i<=6;i++){ // Número de líneas // Controlar nuestro número de espacios for ( var s=i;s<6;s++ ){ document.write( ' ' ) } for ( var j=1;j<=2*i-1;j++ ){ documento.escribir( '*' ) } documento.escribir( '<br>' ) }
El resultado es el siguiente:
*
***
*****
*******
*********
***********
Objetos incorporados comunes:
1. Matriz Matriz
Como crear:
Manera literal de crear (recomendado para usar de esta manera, simple y grosero)
var colores = ['rojo','color','amarillo'];
Utilice el constructor para crear objetos con la nueva palabra clave.
var colores2 = nueva matriz ();
2. Asignación de matriz
var arr = []; // Asignar uno por uno por subíndice arr[0] = 123 ; arr[ 1] = 'jajaja' ; arr[ 2] = 'hey hey'
3. Métodos comunes de arreglos:
3.1 Fusión de matrices concat() sigue siendo una matriz después de la fusión
var norte = ['Beijing','Shandong','Tianjin' ]; var sur = ['Dongguan','Shenzhen','Shanghai' ]; var nuevaCiudad = norte.concat(sur); console.log(nuevaCiudad) // ['Pekín','Shandong','Tianjin','Dongguan','Shenzhen','Shanghái']
3.2 join() conecta los elementos de la matriz con la cadena especificada para formar una nueva cadena
puntuación var = [98,78,76,100,0 ]; var str = puntuación.join('|' ); consola.log(cadena); // 98|78|76|100|0
3.3 Convertir una matriz en una cadena toString() cast
var score = [98,78,76,100,0 ]; // toString() se convierte directamente en una cadena y cada elemento está separado por una coma var str = score.toString(); console.log(str); // 98,78,76,100,0
3.4 slice(start,end); devuelve un segmento de la matriz, cerrado a la izquierda y abierto a la derecha
var arr = ['Zhang San','Li Si','Wang Wen','Zhao Liu' ]; var newArr = arr.slice(1,3 ); console.log(newArr); // ["Li Si ", "Wang Wen"]
3.5 pop elimina el último elemento de la matriz y devuelve el elemento eliminado
var arr = ['Zhang San','Li Si','Wang Wu','Zhao Liu' ]; var item = arr.pop(); console.log(arr); // ["Zhang San", " Li Si", "Wang Wu"] console.log(elemento); // Zhao Liu
3.6 push() agrega uno o más elementos al final de la matriz y devuelve la nueva longitud
var arr = ['Zhang San','Li Si','Wang Wen','Zhao Liu' ]; var newLength= arr.push('Little Ma'); // Se pueden agregar varios, separados por comas console. log(nuevaLongitud); // 5 console.log(arr); // ["Zhang San", "Li Si", "Wang Wen", "Zhao Liu", "Pequeña Ma"]
3.7reverse() voltea la matriz
var nombres = ['alex','xiaoma','tanhuang','ángulo' ]; // 4. Invierta la matriz nombres.reverse(); consola.log(nombres); // ['ángulo','tanhuang ','xiaoma','alex']
3.8 sort() ordena la matriz
var nombres = ['alex','xiaoma','tanhuang','abngel' ]; nombres.sort(); console.log(nombres); // ["alex", "ángulo", "tanhuang", "xiaoma"]
3.9 Determinar si es una matriz: isArray()
Valor booleano = Array.isArray(valor comprobado);
3.10 shift() elimina y devuelve el primer elemento de la matriz unshift() agrega uno o más elementos al principio de la matriz y devuelve la nueva longitud
3.11 empalme()
// Agregar o eliminar elementos en la matriz // Eliminar: El primer parámetro indica la posición inicial El número de eliminaciones del segundo parámetro // Agregar: El segundo parámetro es 0, lo que significa agregar // arr.splice( 0,1 ,elementos...)
4. El enlace del método de cadena es el siguiente: https://www.cnblogs.com/majj/p/9095590.html
5. Fecha objeto de fecha Solo hay una forma de crear un objeto de fecha usando la nueva palabra clave
// creó un objeto de fecha var myDate = new Date();
// Crear un objeto de fecha var myDate= new Date(); // Obtener un día en un mes console.log(myDate.getDate()); // Devolver la hora local console.log(myDate().toLocalString()) // 2018/5/27 22:36:23
Nota: El método anterior de getxxx es para obtener la hora. Si desea configurar la hora, use setxxx, consulte el enlace: http://www.runoob.com/jsref/jsref-obj-date.html
6.objeto integrado matemático
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Título</title>
</head>
<body>
<script> var a = 3.003 ;
//Consola.log(Matemáticas.piso(a ) );
//Console.log(Math.ceil(a ) ); // 0~1 consola.log(Matemáticas.aleatorio()); // 300 ~ 500 min~max 公式： min+Math.random()*(max-min)
console.log(300+Math.random()*(500-300 ));
</script>
</cuerpo>
</html>
Para obtener más información, consulte el enlace: http://www.runoob.com/jsref/jsref-tutorial.html
8 funciones
Función: Es encapsular algunas declaraciones , y luego ejecutar estas declaraciones en forma de llamada .
Qué hace la función:
-
-
Escriba una gran cantidad de declaraciones repetidas en la función, y cuando necesite estas declaraciones en el futuro, puede llamar directamente a la función para evitar la duplicación del trabajo.
-
Simplifique la programación y haga que la programación sea modular.
-
9- Argumentos de pseudo-matriz
los argumentos representan parámetros reales. Hay un punto particular: los argumentos solo se usan en funciones .
(1) Devuelve el número de argumentos de la función: arguments.lenth
(2) La razón por la cual arguments es una pseudo matriz es porque los argumentos pueden modificar elementos, pero no pueden cambiar la longitud de la matriz .
registro(['alex']); } fn( 'alex','wusir' ) </script> </body> </html>
Hay varias formas de borrar una matriz:
var array = [1,2,3,4,5,6 ]; array.splice( 0); // Método 1: eliminar todos los elementos de la matriz array.length = 0; // Método 1: el atributo de longitud puede ser asignado, en otros idiomas la longitud es de solo lectura array = []; // Método 3: Recomendado
10- Operaciones en DOM
1 Composición de .js
ECMAScript: El estándar gramatical de js. Incluye expresiones variables, operadores, funciones, etc.
DOM: Document Object Model API para manipular elementos en páginas web, como mover cuadros, cambiar colores, carruseles, etc.
BOM: la API del modelo de objeto del navegador que opera algunas funciones del navegador, como permitir que el navegador se desplace automáticamente
2. Eventos
Tres elementos de eventos: fuente de eventos evento controlador de eventos
Origen del evento: la etiqueta HTML que generó el evento posterior
Evento: js ha definido el cuadro de origen del evento. Event onclick = function () {controlador de eventos};
Programa dirigido por eventos: la manipulación de estilos y HTML es el DOM
Pasos de escritura:
(1) Obtener el origen del evento: document.getElementById('box');
(2) Evento vinculante: caja de origen del evento. evento onclick = función () {controlador de eventos};
(3) Escribir un programa basado en eventos: sobre el funcionamiento de DOM;
Ejemplo de código:
<body> <div id="box1"></div> <script type="text/javascript"> // 1. Obtener el origen del evento var div = document.getElementById("box1" ); // 2. Evento de vinculación div.onclick = function () { // 3. Escriba la alerta del controlador de eventos ("Soy el contenido emergente" ); } </script> </body>
Los eventos comunes son los siguientes:
Tres elementos de un evento:
1 Formas de obtener el origen del evento (adquisición de nodos DOM):
Formas comunes de obtener:
Obtener una sola etiqueta por ID Obtener una etiqueta por nombre de etiqueta Obtener una etiqueta por nombre de clase
|
1
2
3
|
var
div1 = document.getElementById(
"box1"
);
//方式一：通过id获取单个标签
var
arr1 = document.getElementsByTagName(
"div1"
);
//方式二：通过 标签名 获得 标签数组，所以有s
var
arr2 = document.getElementsByClassName(
"hehe"
);
//方式三：通过 类名 获得 标签数组，所以有s
|
//La última forma de obtener el origen del evento de la pajita que salva vidas es obtener todos los orígenes del evento
var oD = documento .querySelectorAll('div p' ) console.log(oD); oD.forEach( función (elemento,índice)( consola.log(elemento); ))
2 formas de enlazar eventos
Método 1: enlazar directamente funciones anónimas
<div id="box1" ></div> <script type="text/javascript"> var div1 = document.getElementById("box1" ); // La primera forma de enlazar eventos div1.onclick = function ( ) { alert( "Soy el contenido emergente" ); } </script>
Método 2: primero defina la función por separado y luego vincúlela
<div id="box1" ></div> <script type="text/javascript"> var div1 = document.getElementById("box1" ); // El segundo método para vincular eventos div1.onclick = fn; // Tenga en cuenta que aquí está fn, no fn(). fn() se refiere al valor de retorno. // Definir la función por separado function fn() { alert( "Soy el contenido emergente" ); } </script>
Recuerde: cuando enlace, escriba fn, no fn(), fn representa la función completa y fn() representa el valor devuelto.
Método 3: enlace en línea
<!--Enlace en línea--> <div id="box1" onclick="fn()"></div> <script type="text/javascript"> function fn() { alert( "Soy una ventana emergente contenido de " ); } </script>
Recuerde: cuando enlace en línea, escriba fn() en lugar de fn porque el código de enlace no está escrito en el código js sino que se reconoce como una cadena.