04_Comenzando con JavaScript

1 ¿Qué es JavaScript?

JavaScript es un poderoso lenguaje de programación en el mundo del desarrollo web. Se utiliza principalmente para desarrollar páginas web interactivas para hacerlas más interactivas y proporcionar una mejor experiencia de usuario.

JavaScript es uno de los lenguajes más populares del mundo y es un lenguaje de secuencias de comandos (Script significa secuencia de comandos) que se ejecuta en el cliente.

Lenguaje de script: no se requiere compilación, durante el proceso de ejecución, el intérprete js (motor js) lo interpretará y ejecutará línea por línea.

Una página web se compone de varias páginas web. Tecnologías involucradas en la producción web: HTML, CSS y JavaScript.

• HTML representa la estructura, que es el esqueleto de una página web y describe la estructura de la página desde una perspectiva semántica.
• CSS significa estilo, que es la apariencia de una página web y, desde un punto de vista estético, embellece la página.
• JavaScript representa el comportamiento, que es la lógica interactiva de las páginas web. Mejora la experiencia del usuario desde una perspectiva interactiva.

JavaScript está integrado en páginas web HTML y se compila directamente a través del motor JavaScript integrado del navegador, transformando una página que originalmente solo se usaba para visualización en un programa de página que admite la interacción del usuario.

2 El origen de JavaScript

En 1995, Brendan Eich de Netscape, ahora Mozilla, diseñó por primera vez JavaScript en el navegador Netscape Navigator.

Netscape originalmente llamó a este lenguaje de scripting LiveScript. Debido a que el lenguaje Java lanzado por Sun (adquirido por Oracle en 2009) atrajo mucha atención en ese momento, Netscape tomó prestado el nombre Java con fines de marketing. JavaScript y Java son esencialmente dos lenguajes de programación diferentes y no tienen relación alguna .

JavaScript se diseñó originalmente como un lenguaje de programación que podía integrarse en páginas web para controlar el comportamiento del navegador. Por ejemplo, la verificación del formulario se realiza directamente en el navegador. Los usuarios solo pueden enviar el formulario después de completar el contenido en el formato correcto, evitando envíos repetidos causados ​​por el llenado incorrecto del formulario, lo que ahorra tiempo y recursos de red.

Desventajas de JavaScript:

• El lenguaje JavaScript es muy flexible y sus características del lenguaje también tienen algunos efectos indeseables.
• Utilice JavaScript para crear anuncios flotantes y ventanas emergentes en páginas web para molestar a los usuarios.
• Aprovechar las vulnerabilidades de seguridad en el desarrollo web, escribir código malicioso en páginas web, robar información de identidad del sitio web del usuario, propagar virus, etc.

Funciones de JavaScript:

• lenguaje interpretativo
• Orientado a objetos basado en prototipos
• Tras el auge de la tecnología Ajax, los navegadores y los servidores pueden interactuar de forma asincrónica y la experiencia del usuario del sitio web ha mejorado enormemente. Cuando las personas ingresan algunas palabras en el cuadro de búsqueda de Baidu, la página web detectará de manera inteligente lo que el usuario buscará a continuación.
• El lenguaje JavaScript no depende del sistema operativo y sólo requiere soporte del navegador.

3 La relación entre JavaScript y ECMAScript

• ECMAScript se refiere al estándar para lenguajes de programación de navegadores publicado por Ecma.
• JavaScript es el lenguaje de programación integrado de Netscape en el navegador Navigator 2.0.
• ES6 se refiere a la nueva versión ECMAScript 2015 lanzada por Ecma International en 2015.

JavaScript incluye ECMAScript, DOM, BOM

• ECMAScript

  • ECMAScript es un lenguaje de programación estandarizado por ECMA International (anteriormente Asociación Europea de Fabricantes de Computadoras). Este lenguaje se usa ampliamente en la World Wide Web. A menudo se le llama JavaScript o JScript, pero en realidad los dos últimos son implementaciones del lenguaje ECMAScript. y extensiones.

  • ECMAScript estipula la sintaxis de programación y el conocimiento básico de JS, y es un conjunto de estándares industriales de sintaxis JS al que se adhieren todos los fabricantes de navegadores.

• Modelo de objetos de documento DOM

  • Document Object Model (DOM) es una interfaz de programación estándar para procesar lenguajes de marcado extensibles recomendados por la organización W3C. Se pueden operar varios elementos de la página (tamaño, posición, color, etc.) a través de la interfaz proporcionada por el DOM.

• Modelo de objetos del navegador BOM

  • BOM (modelo de objetos del navegador, denominado BOM) se refiere al modelo de objetos del navegador, que proporciona una estructura de objetos que es independiente del contenido y puede interactuar con la ventana del navegador. BOM se puede utilizar para operar ventanas del navegador, como cuadros emergentes, controlar los saltos del navegador, obtener resolución, etc.

4 núcleo del navegador

• Motor de composición tipográfica (motor de renderizado)

  • Responsable de analizar y procesar el contenido de la página web obtenido (como HTML, CSS, etc.) y luego mostrarlo en la pantalla.
  • Comúnmente conocido como kernel, como el parpadeo del navegador Chrome y la versión anterior de webkit.

• motor javascript

  • Se utiliza para analizar el lenguaje JavaScript e implementar efectos interactivos en páginas web mediante la ejecución de código.
  • Por ejemplo, V8 del navegador Chrome.

El navegador en sí no ejecuta código JS, sino que ejecuta código JS a través del motor JavaScript integrado (intérprete).

Cuando el motor JS ejecuta el código, interpreta cada código fuente línea por línea (convertido a lenguaje de máquina) y luego lo ejecuta por la computadora. Por lo tanto, el lenguaje JavaScript se clasifica como un lenguaje de scripting y será interpretado y ejecutado línea por línea.

5 El primer programa JavaScript

<script>
    alert('第一个 JavaScript 程序');
</script>

Reglas de sintaxis de JavaScript:

• JavaScript distingue estrictamente entre mayúsculas y minúsculas, así que asegúrese de prestar atención a la exactitud de las mayúsculas al escribir código.
• El código JavaScript es insensible a espacios, nuevas líneas y sangrías. Una declaración se puede escribir en varias líneas.
• Si una declaración termina y la siguiente se escribe en una nueva línea, se puede omitir el siguiente punto y coma.
• En HTML recomendamos usar comillas dobles, en JS recomendamos usar comillas simples

6 métodos de introducción de JavaScript

6.1 Integrado

Incrustar consiste en utilizar <script>etiquetas para envolver el código JavaScript y escribirlo directamente en el archivo HTML.

<!-- 语法 -->
<script>
    JavaScript语句;
</script>

<script type="text/javascript">
     JavaScript语句;
</script>

• El atributo de tipo se utiliza para indicarle al navegador el tipo de script.
• El valor predeterminado de tipo es texto/javascript (HTML5) y el atributo de tipo se puede omitir.

6.2 Tipo de enlace externo

El enlace externo se refiere a guardar el código JavaScript en un archivo separado, generalmente usando "js" como extensión de archivo y luego usando el <script>atributo src de la etiqueta para introducirlo en el archivo.

<!-- 语法 -->
<script src="js/test.js"></script>

En comparación con los integrados, las ventajas del enlace externo:

• La incrustación da como resultado que el código HTML y JavaScript se mezcle sin modificaciones ni mantenimiento.
• La incrustación aumentará el tamaño del archivo HTML y afectará la velocidad de carga de la página web, mientras que los enlaces externos pueden utilizar el almacenamiento en caché del navegador para mejorar la velocidad.
• Los enlaces externos favorecen la implementación distribuida. Los archivos estáticos como js, ​​css e imágenes vinculadas en la página web se pueden implementar en el servidor CDN para aprovechar las ventajas de CDN para acelerar las descargas.

6.3 En línea

Inline utiliza código JavaScript como valores de atributos de etiquetas HTML.

<!-- 语法 -->
<a href="javascript:alert('Hello');">test</a>
<input type="button" onclick="alert('Hello');" value="test" />

• Actualmente, el desarrollo web aboga por la separación de estructura, estilo y comportamiento, es decir, separar los códigos de HTML, CSS y JavaScript para evitar escribirlos directamente en los atributos de las etiquetas HTML, lo que favorece más el mantenimiento. Por lo tanto, no se recomienda utilizar estilos en línea en el desarrollo real.

7 carga asincrónica de JavaScript

Cuando se introduce el código JavaScript, la descarga y representación de la página se pausarán y continuarán hasta que se complete la ejecución del script (enlace en línea o externo). Esto hará que aparezca una pantalla blanca en la página o que el estilo de la página que se abrirá estará desordenado.

solución:

• Para el código que no necesita ejecutarse con anticipación, colocar <script>la etiqueta en <body>la parte inferior de la etiqueta puede reducir el impacto en la descarga de toda la página.

• Hay dos nuevos atributos opcionales para la etiqueta disponibles en HTML5 <script>: async y diferir.

  <!-- 方式一：async 脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）-->
  <script src="http://js.test/file.js" async></script>
  <!-- 方式二：defer 当页面已完成加载后，才会执行脚本 -->
  <script src="http://js.test/file.js" defer></script>
  

8 declaraciones de salida de uso común

8.1 cuadro de alerta alerta()

alert(msg) aparecerá un cuadro emergente en la página, el contenido es msg.

<script>
    alert(msg);
</script>

8.2 salida de consola console.log()

console.log(msg) generará el mensaje de contenido en la consola de herramientas del desarrollador.

<script>
    console.log(msg);
</script>

8.3 salida de la página del documento document.write()

document.write(msg) generará el mensaje de contenido en la página web.

<script>
    document.write(msg);
</script>

9 comentarios de JavaScript

Los comentarios facilitan la legibilidad del código y el intérprete de JavaScript los ignora al analizar el programa.

9.1 Comentarios de una sola línea

Se utilizan comentarios de una sola línea “//”. Todo lo que comienza y termina con “//”la línea o etiqueta de JavaScript es un comentario.

<script>
  document.write('Hello, JavaScript'); // 输出一句话
</script>

9.2 Comentarios de varias líneas

Utilice comentarios de varias líneas “/* */”. Los comentarios de varias líneas “/*”comienzan y “*/”terminan con, y el contenido entre ellos son comentarios de varias líneas.

<script>
  /*
  alert('Hello, JavaScript');
  console.log('1234');
  */
</script>

• Los comentarios de una sola línea se pueden anidar dentro de comentarios de varias líneas.
• Los comentarios de varias líneas ya no se pueden anidar dentro de comentarios de varias líneas.

10 Datos y operaciones

10.1 Operaciones matemáticas

• JavaScript admite cuatro operaciones aritméticas: suma (+), resta (-), multiplicación (*) y división (/).
• Los paréntesis cambian la prioridad.

alert(220 + 230);             // 输出结果：450
alert(2 * 3 + 25 / 5 - 1);    // 输出结果：10
alert(2 * (3 + 25) / 5 - 1);  // 输出结果：10.2

10.2 Comparar tamaños

• El resultado de la comparación es verdadero o falso, que es un valor booleano que representa verdadero y falso.
• Si el resultado de la comparación es verdadero, significa que está establecido; si el resultado de la comparación es falso, significa que no está establecido.

alert(22 > 33);			// 输出结果：false
alert(22 < 33);			// 输出结果：true
alert(22 == 33);		// 输出结果：false
alert(22 == 22);		// 输出结果：true

10.3 Cadena

• Cuando necesite mostrar "Hola" en el cuadro de advertencia, para guardar los datos de "Hola" en el código, debe utilizar el tipo de datos de cadena.
• En JavaScript, los datos entre comillas simples o dobles son una cadena.

alert('Hello');		// 单引号字符串
alert("Hello"); 	// 双引号字符串

• Utilice el operador "==" para comparar dos cadenas y ver si son iguales.

alert('22' == '22');	// 输出结果：true
alert('22' == '33');	// 输出结果：false

Concatenar cadenas y números

• Siempre que uno de los operandos del operador "+" sea una cadena, significa concatenación de cadenas.
• Cuando los operandos del operador "+" son todos números, significa suma.
• No se realizan operaciones con los datos de la cadena.

alert('220' + '230');		            // 输出结果：220230
alert('220 + 230 = ' + 220 + 230);	    // 输出结果：220 + 230 = 220230
alert('220 + 230 = ' + (220 + 230));	// 输出结果：220 + 230 = 450

10.4 Declaraciones de comparación

La declaración if...else se utiliza para ejecutar diferentes códigos según los resultados de la comparación.

if (22 > 33) {
    
    
  alert(true);	// 判断成立时执行此语句
} else {
    
    
  alert(false);	// 判断不成立时执行此语句
}

10.5 Variables

Cuando es necesario utilizar un dato varias veces, se pueden utilizar variables para guardar los datos.

Concepto: las variables son contenedores para almacenar datos y cada variable tiene un nombre único.

Definición: Defina utilizando la palabra clave var.

var num1 = 22;	
var num2 = 33;	
alert(num1 + num2);
alert(num1 - num2);

var temp = num1;
num1 = num2;
num2 = temp;
alert('num1 = ' + num1);
alert('num2 = ' + num2);

10.6 Funciones

La cantidad de código aumenta, lo que lo hace difícil de mantener, poco claro y difícil de leer. Por lo tanto, el código debe modularizarse y componerse para poder mantenerse mejor.

• Algunos módulos funcionales de uso común a menudo se escriben como funciones y las tareas se completan llamando a funciones. alerta() es una función.
• Una vez ejecutada la función, puede devolver un valor que represente el resultado de la ejecución.
• La función admite pasar uno o más parámetros, y varios parámetros se pueden separar mediante comas.
• Además de llamar directamente a las funciones integradas de JavaScript, los usuarios también pueden definir sus propias funciones para encapsular el código.

var name = prompt('请输入你的名字：','匿名');

// 定义函数
function sum(a, b) {
    
    
    var c = a + b; 
    return c;
}
// 调用函数，输出结果：33
alert(sum(11, 22));
// 调用函数，输出结果：55
alert(sum(22, 33));

10.7 Objetos

• Escribir un programa es como jugar un juego: dividir objetos en el programa es como dividir personajes en el juego.
• Los miembros de un objeto se componen de propiedades y métodos, al igual que un personaje tiene roles y habilidades básicas.
• Los atributos son variables que se pueden usar para guardar información básica sobre un personaje, como ataque, defensa, poder mágico, resistencia mágica, etc.
• Los métodos son algunas funciones, que son las habilidades del personaje.
• Cuando operamos un personaje, entendemos la información básica al observar los atributos del personaje y jugamos a través de las habilidades del personaje.

objeto de ventana

• El objeto de ventana es el punto de acceso principal para la interacción entre JavaScript y el navegador.
• Proporciona algunas interfaces para que los scripts JavaScript controlen el navegador.
• Abra cuadros de advertencia, cuadros de entrada o cambie el contenido de los documentos de la página web y otros efectos.

window.console;
window.document;
window.alert('test');
window.prompt('test');
window.console.log('test');
window.document.write('test');	

objeto del documento

El objeto de documento es una de las propiedades del objeto de ventana y se utiliza principalmente para interactuar con documentos web.

<div id="test">Hello</div>
<script>
    var test = document.getElementById('test');
    alert(test.innerHTML);
</script>

Objeto de cadena

• Las cadenas definidas directamente en el código se pueden utilizar como objetos.
• Los objetos de cadena se utilizan para procesar cadenas.

var str = 'apple';		     // 定义一个字符串
alert(str.length);		     // 获取字符串长度，输出结果：5
alert(str.toUpperCase());	 // 获取转换大写后的结果，输出结果：APPLE
alert('aa'.toUpperCase());	 // 直接调用字符串的成员方法，输出结果：AA

objeto personalizado

Además de utilizar directamente los objetos integrados en JavaScript, los usuarios también pueden crear ellos mismos un objeto personalizado.

// 创建对象
var stu = {
    
    };          // 创建一个名称为stu的空对象
// 添加属性
stu.name = '小明';      // 为stu对象添加name属性
stu.gender = '男';      // 为stu对象添加gender属性
stu.age = 18;		   // 为stu对象添加age属性
// 访问属性
alert(stu.name);       // 访问stu对象的name属性，输出结果：小明
// 添加方法
stu.introduce = function () {
    
    
  return '我叫' + this.name + '，今年' + this.age + '岁。';
};
// 调用方法
alert(stu.introduce());	// 输出结果：我叫小明，今年18岁。

10.8 Eventos

Los eventos son comportamientos interactivos que pueden ser detectados por JavaScript.

Desliza y haz clic en la página web, desplázate por la pantalla, escribe en el teclado, etc.

Cuando ocurre un evento, la programación JavaScript se puede utilizar para ejecutar algunos códigos específicos para lograr efectos interactivos en la página web.

<input id="btn" type="button" value="test">
<script>
    document.getElementById('btn').onclick = function() {
      
      
        alert(this.value);  // 获取按钮的value属性，输出结果：test
    };
</script>

11 tareas de práctica

• Compara dos números

  • Defina dos números A y B.
  • Utilice declaraciones condicionales if para determinar si la relación entre dos números es mayor, menor o igual a.
  • Genere los resultados de la comparación a través de la función consloe.log().

• Escriba un programa JavaScript que envíe información ingresada por el usuario a una página web.

• Calcula 1*2*3*4*……*100el producto de .

• Genere la fórmula 1+2+3+4+……+100 en la página y calcule el resultado.

• Ingrese la cantidad de dinero, haga clic en el botón y el resultado será cuántas piezas valen 100 yuanes, cuántas piezas valen 50 yuanes, cuántas piezas valen 20 yuanes, cuántas piezas valen 10 yuanes, cuántas piezas valen 5 yuanes Y cuántas piezas son 1 yuan.

• Cambiar el color de fondo de la página web

  • Escribir páginas web y proporcionar botones.
  • Agregue un evento de clic al botón.
  • Establezca el color de fondo de la página web de acuerdo con los diferentes parámetros pasados ​​por la función.

• Verificar la contraseña ingresada por el usuario

  • Obtenga la contraseña ingresada por el usuario a través del cuadro de entrada.
  • Determinar la contraseña ingresada por el usuario.
  • Si la entrada es correcta, aparecerá el mensaje "¡La contraseña se ingresó correctamente!"; de lo contrario, aparecerá el mensaje "¡La contraseña se ingresó incorrectamente!".

• Juego de calcular la edad

  • Ingrese su año de nacimiento en la ventana de entrada para obtener su edad