文章来源于网上收集和自己原创，若侵害到您的权利，请您及时联系并删除~~~

Introducción a JavaScript:
conceptos básicos como variables, constantes, tipos de datos, operadores, etc.
Puede realizar la conversión de tipos de datos y cómo programar combinando las cuatro operaciones aritméticas.

Comprender la relación entre las cosas del mundo real y las computadoras.
Entender qué son los datos y conocer su clasificación
Comprender el "contenedor" en el que las variables almacenan datos
Dominar el uso de operadores comunes y comprender las relaciones de precedencia.
Conozca las características de la conversión implícita de tipos de datos JavaScript.

1. Introducción

1.1 ¿Qué es JavaScript?

¿Qué es JavaScript?
Es un lenguaje de programación que se ejecuta en el cliente (navegador) para lograr la interacción persona-computadora. (P4)

Función (¿Qué hacer?)

Efectos especiales de la página web (monitorea algunos de los comportamientos del usuario para permitir que la página web brinde la retroalimentación correspondiente) MIUI 13 Inicio·Conectar todo
Verificación del formulario (juzgando la legalidad de los datos del formulario) Baidu, lo sabrás (baidu.com)
Interacción de datos (obtener datos de fondo y renderizarlos en el front-end) 1
Programación de servidor (node.js)

La composición de JavaScript

Insertar descripción de la imagen aquí

ECMAScript: estipula el conocimiento básico de la sintaxis básica de js. Por ejemplo: variables, declaraciones de rama, declaraciones de bucle, objetos, etc.
API web:

Manipulación de documentos DOM, como mover, cambiar el tamaño, agregar y eliminar elementos de página, etc.

BOM opera el navegador, como ventanas emergentes de páginas, detecta el ancho de la ventana, almacena datos en el navegador, etc.

Sitio web autorizado de JavaScript: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

resumen:

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se ejecuta en el cliente (navegador)
¿En qué consiste JavaScript?

ECMAScript (sintaxis básica), API web (DOM, BOM)

experiencia:
Caso de hacer clic en el botón Cambiar: experimente HTML + CSS + JS para lograr efectos interactivos
Insertar descripción de la imagen aquí

1.2 Método de introducción

Domine el método de introducción de JavaScript y comprenda inicialmente el papel de JavaScript.
Insertar descripción de la imagen aquí

Un programa JavaScript no puede ejecutarse de forma independiente; debe estar incrustado en HTML antes de que el navegador pueda ejecutar el código JavaScript. scriptHay tres formas de introducir código JavaScript en HTML mediante etiquetas:

1.2.1 Método interno (integrado)

Envuelva scriptel código JavaScript con etiquetas y
escríbalo directamente en el archivo html y envuélvalo con etiquetas de secuencia de comandos.
Especificación: las etiquetas de secuencia de comandos se escriben en la parte superior.
Extensión: alerta ('Hola, js'). Aparece un cuadro de diálogo de advertencia en la página.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来前端技术！')
  </script>
</body>
</html>

注意

La razón por la que lo colocamos <script>cerca del final del archivo HTML es que los navegadores cargan el HTML en el orden en que está el código en el archivo.
Si el JavaScript cargado primero espera modificar el HTML debajo de él, puede fallar porque el HTML aún no se ha cargado.
Por lo tanto, colocar el código JavaScript cerca de la parte inferior de una página HTML suele ser la mejor estrategia.

1.2.2 Formulario externo (tipo enlace externo)

Generalmente, el código JavaScript se escribe en un archivo separado que termina en .js y luego se introduce a través del atributo scriptde la etiqueta.src

// demo.js
document.write('嗨，欢迎来前端技术！')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

注意: Si la etiqueta script usa el atributo src para introducir un archivo .js, ¡el código de la etiqueta será ignorado! ! ! Como se muestra en el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

1.2.3 Estilo en línea

El código está escrito dentro de la etiqueta.
Nota: Esto es solo para comprensión, pero el marco vue usará este modo más adelante.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
   
  <button onclick="alret('逗你玩儿')"></button>
</body>
</html>

Resumen

¿Tres posiciones de escritura para JavaScript?

interno

externo

dentro de la linea
Precauciones:

Intente escribir hasta el final del documento </body>y al principio.

No escriba código en medio de etiquetas js externas, de lo contrario será ignorado

ejercicio 1

Requisito: utilice métodos de escritura JavaScript tanto externos como internos. Aparecerá la página:Trabaja duro
Tiempo: 5 minutos
外部：

Crear un nuevo archivo js false --> Crear un nuevo archivo my.js

alert('努力奋斗')

Referenciado en el archivo html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
	<script src="../js/my.js"></script> 
</body>
</html>

内部：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
     alert("努力，奋斗")
  </script>
</body>
</html>

1.3 Comentarios y terminadores

Puede bloquear la ejecución del código o agregar información de comentarios a través de comentarios. JavaScript admite dos formas de sintaxis de comentarios:

1.3.1 Comentarios de una sola línea

Úselo // para comentar una sola línea de código.

Función: // Se ignorará el código de la línea derecha

tecla de acceso rápido:ctrl + /

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨，欢迎学习前端技术！');
  </script>
</body>
</html>

1.3.2 Comentarios de varias líneas

Úselo /* */para comentar varias líneas de código.

Efecto: Todo lo que esté entre /* y */ será ignorado

tecla de acceso rápido:shift + alt + A

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('嗨，欢迎学习前端技术！')
  </script>
</body>
</html>

1.4 Terminador

En JavaScript, ;representa el final de un fragmento de código. En la mayoría de los casos, se puede omitir y ;reemplazar con un retorno de carro (enter).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 结束符</title>
</head>
<body>
  
  <script> 
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>
</html>

En el desarrollo real, muchas personas abogan por omitir el terminador al escribir código JavaScript.;

Acuerdo: para unificar el estilo, el símbolo final debe estar escrito en cada oración o no escrito en cada oración (según los requisitos del equipo).

resumen:

¿Cuáles son las dos formas de comentar en JavaScript?

Comentario de una sola línea //

Comentarios de varias líneas /* */
Notas sobre terminadores de JavaScript

El terminador es un punto y coma;

¿Se puede omitir el terminador? Sí

Pero en aras de un estilo unificado, el símbolo final debe escribirse en cada oración o no escribirse en cada oración.

1.5 Entrada y salida

La salida y la entrada también pueden entenderse como la interacción entre personas y computadoras. El usuario ingresa información a la computadora a través del teclado, mouse, etc., y la computadora procesa la información y luego muestra los resultados al usuario. Este es un proceso de entrada y salida.

Por ejemplo: si presiona las teclas de dirección en el teclado, las teclas arriba/abajo pueden desplazar la página. La acción de presionar las teclas arriba/abajo se llama entrada y el desplazamiento de la página se llama salida.

1.5.1 Salida

JavaScript puede recibir entradas del usuario y luego generar los resultados de la entrada:

alert()、document.wirte()、console.log()

Tome los números como ejemplo. Si ingresa cualquier número en alert()o , se mostrará (salida) al usuario en forma de una ventana emergente.document.write()

1.5.2 Entrada

Al ingresar cualquier contenido prompt(), aparecerá en el navegador como una ventana emergente, que generalmente solicita al usuario que ingrese algún contenido.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</html>

ejercicio 2

Tiempo: 5 minutos
Requisitos:

Aparece un cuadro de diálogo en el navegador: Hola JS~ alerta()
Imprimir salida en la página: Hola JS~ document.write()
Salida de la consola de la página: Hola JS~ console.log()

 document.write("你好，js")
 alert("你好,js")
 console.log("你好，js")

Secuencia de ejecución del código JavaScript:

Ejecute código JavaScript en orden del flujo de documentos HTML
alert()y prompt()omitirán la representación de la página y se ejecutarán primero (actualmente para su comprensión, el proceso de ejecución detallado se explicará más adelante)

1.6 literales

Objetivo: ser capaz de saber qué es un literal.
En informática, un literal describe algo en una computadora.
Por ejemplo:

Nuestro salario es: 1000. En este momento, 1000 es un literal numérico.
Literal de cadena 'Estudiante'
También hay [] literales de matriz {}, literales de objeto, etc. que aprenderemos a continuación.

Resumir:

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que puede lograr muchos efectos de interacción con páginas web.
¿Dónde escribir JavaScript?

JavaScript interno

JavaScript interno: escrito encima de la etiqueta

JavaScript externo, pero

2. Variables

Comprender que las variables son "contenedores" para el almacenamiento de datos en la computadora y dominar cómo declarar variables.

Insertar descripción de la imagen aquí

Las variables son "contenedores" utilizados en las computadoras para almacenar datos. Permiten que las computadoras tengan memoria. La comprensión popular de las variables es usar [un determinado símbolo] para representar [un valor específico] (datos).

Insertar descripción de la imagen aquí

Nota: Las variables no son los datos en sí, son solo contenedores para almacenar valores. Puede entenderse como cajas de cartón utilizadas para guardar cosas.

<script>
  // x 符号代表了 5 这个数值
  x = 5
  // y 符号代表了 6 这个数值
  y = 6
    
  //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！

  // 将用户输入的内容保存在 num 这个变量（容器）中
  num = prompt('请输入一数字!')

  // 通过 num 变量（容器）将用户输入的内容输出出来
  alert(num)
  document.write(num)
</script>

2.1 Declaración

Para utilizar variables, primero debe crear variables (también conocidas como variables declarantes o variables definitorias).
let 变量名

La declaración de una variable consta de dos partes: palabra clave de declaración y nombre de variable (identificación)

let es la palabra clave (let: permitir, permitir, dejar, querer), la llamada palabra clave es una palabra especialmente proporcionada por el sistema para declarar (definir) la variable

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>
</body>
</html>

Las palabras clave son algunas palabras en inglés (palabras o abreviaturas) integradas en JavaScript. Representan ciertos significados específicos. Por ejemplo, el letsignificado de es declarar variables. Después de ver, letpuedes pensar que esta línea de código significa declarar variables, comolet age;

lety varambas son palabras clave para declarar variables en JavaScript. ¡Se recomienda utilizarlas letpara declarar variables! ! !

2.2 Asignación

Declarar (definir) una variable equivale a crear un "contenedor" vacío y agregar datos a este contenedor mediante asignación.
Después de definir una variable, puede inicializarla (asignarle un valor). Siga el nombre de la variable con un "=" seguido del valor

Insertar descripción de la imagen aquí

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
</html>

resumen

¿Qué palabras clave se utilizan para declarar variables?let
¿Qué símbolos se utilizan para asignar valores a las variables? = 这个符号我们也称为赋值运算符
En desarrollo, ¿a menudo declaramos y asignamos valores directamente al mismo tiempo?let age = 18

Ejercicio 3

necesidad:

Declarar una variable para almacenar la cantidad de artículos comprados por el usuario (num), que es 20 piezas
Declare una variable para almacenar el nombre del usuario (uname) como 'Zhang San'
Imprima las dos variables en la consola en secuencia.

 let num = 18
 let uname = '张三'
 console.log(num,uname)

2.3 Actualizar variables

Insertar descripción de la imagen aquí

2.4 Declarar múltiples variables

Después de asignar un valor a una variable, también puede actualizarla simplemente dándole un valor diferente.

let age = 18,uname = 'zhangsan'

let age = 18
let uname = 'zhangsan'

//为了更好的可读性，请一行只声明一个变量。

Caso 1
Requisitos: Aparece un cuadro de diálogo en el navegador: Por favor ingrese su nombre. Salida en la página: El nombre que acaba de ingresar.
Análisis:

①: Entrada: cuadro de entrada del usuario: mensaje ()
②: Procesamiento interno: guardar datos
③: Salida: Impresión de página, document.write()

  let a = "zhangsan"
  document.write("你输入的姓名为：",a)

Caso 2
Requisito:
hay 2 variables: num1 contiene 10 y num2 contiene 20

Finalmente, se pone 20 en num1 y 10 en num2.

Objetivo:

Practica el uso de variables
Prepárese para clasificar burbujas más tarde

Insertar descripción de la imagen aquí

  let num =20,num3=21
  let num2 = 21
  let temp 
  temp = num1
  num1 = num2
  num2 = temp
  console.log(num1,num2)

2.5 La naturaleza de las variables

Memoria: El lugar donde se almacenan los datos en la computadora, equivalente a un espacio
La esencia de las variables: Es un pequeño espacio que aplica el programa en la memoria para almacenar datos.

Insertar descripción de la imagen aquí

2.6 Palabras clave

JavaScript usa palabras clave especiales letpara vardeclarar (definir) variables, y debes prestar atención a algunos detalles al usarlas:

Las siguientes son letcosas a tener en cuenta al usar:

Permitir que la declaración y la asignación se realicen simultáneamente
No se permiten declaraciones duplicadas
Permite declarar y asignar valores a múltiples variables al mismo tiempo
Algunas palabras clave integradas en JavaScript no se pueden utilizar como nombres de variables

Las siguientes son varcosas a tener en cuenta al usar:

Permitir que la declaración y la asignación se realicen simultáneamente
Se permiten declaraciones duplicadas
Permite declarar y asignar valores a múltiples variables al mismo tiempo

En la mayoría de los casos , no hay mucha diferencia entre usar lety var, pero letes varmás riguroso que usar, por lo que se recomienda usar let. La diferencia entre los dos se explicará más adelante.

2.7 Reglas de nomenclatura de nombres de variables

Hay una serie de reglas que se deben seguir con respecto a los nombres de variables (identificadores):

Solo pueden ser letras, números, guiones bajos, $ y no pueden comenzar con un número.
Las letras distinguen entre mayúsculas y minúsculas, como Edad y edad son variables diferentes
No se permiten palabras ocupadas internamente en JavaScript (palabras clave o palabras reservadas)
Intente asegurarse de que las variables tengan cierta semántica y podrá conocer el significado mirando las palabras.

especificación:

el nombre debe ser significativo
Obedecer camelCase

La primera letra de la primera palabra está en minúscula y la primera letra de cada palabra posterior está en mayúscula. Ejemplo: nombre de usuario

Nota: Las llamadas palabras clave se refieren a palabras utilizadas internamente en JavaScript, como lety var, y las palabras reservadas se refieren a palabras que no se utilizan actualmente en JavaScript, pero que pueden usarse en el futuro.

Insertar descripción de la imagen aquí

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body>
  
  <script> 
    let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确

    // let 1age = 18; // 错误，不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确，它与小写的 age 是不同的变量
    // let let = 18; // 错误，let 是关键字
    let int = 123 // 不推荐，int 是保留字
  </script>
</body>
</html>

ejercicio 4

Requisito: Permitir que los usuarios ingresen su nombre, edad y sexo, y luego enviarlos a la página web.Análisis
:

①: Cuadro de entrada emergente (mensaje): ingrese su nombre (uname): guárdelo con una variable.
②: Cuadro de entrada emergente (mensaje): ingrese su edad (edad): guárdelo con una variable.
③: Cuadro de entrada emergente (mensaje): Ingrese su género: Guárdelo con una variable.
④: La página genera (document.write) las tres variables en este momento

  let uname = prompt("请输入姓名")
  let age = prompt("请输入你的年龄")
  let gender = prompt("请输入你性别")
  document.write(uname,age,gender)

3. Constantes

Concepto: las variables declaradas mediante const se denominan "constantes".

Escenario de uso: cuando una variable nunca cambiará, puede usar const para declararla en lugar de let.

Convención de nomenclatura: coherente con las variables

const PI = 3.14

Nota: No se permite reasignar constantes y deben asignarse (inicializarse) cuando se declaran.

Insertar descripción de la imagen aquí

let: ahora desarrolla declaraciones de variables.

var: la forma anterior de declarar variables tenía muchos problemas.

const: similar a let, pero el valor de la variable no se puede modificar.

4. tipo de datos

Todo en el mundo de la informática son datos.

Dime ¿cuáles son los tipos de datos básicos en JS?

Tipos de datos básicos
Tipo de datos de referencia

Insertar descripción de la imagen aquí

Los programas informáticos pueden procesar grandes cantidades de datos, para facilitar la gestión de los datos, los datos se dividen en diferentes tipos:

4.1 Tipo numérico (Número)

Es decir, los números que aprendemos en matemáticas pueden ser enteros, decimales, números positivos o números negativos.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数

    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number
  </script>
</body>
</html>

Los tipos numéricos en JavaScript son los mismos que los números en matemáticas, divididos en números positivos, números negativos, decimales, etc.

注意事项

JS es un tipo de datos débil y el tipo al que pertenece una variable solo se puede confirmar después de asignar un valor.
Java tiene tipos de datos fuertes, por ejemplo, int a = 3 debe ser un número entero.

Los números pueden tener muchas operaciones, como multiplicación *, división /, suma +, resta -, etc., por lo que se suelen utilizar junto con operadores aritméticos.

Los operadores matemáticos también se denominan operadores aritméticos, que incluyen principalmente suma, resta, multiplicación, división y resto (módulo).

+: Suma
-: Diferencia
*: Producto
/: Cociente
%: Módulo (resto): se utiliza a menudo en desarrollo para determinar si un número es divisible

Objetivo: poder determinar el orden de prioridad de ejecución de los operadores aritméticos de JavaScript

Cuando un programa se escribe utilizando varios operadores al mismo tiempo, se ejecutarán en un orden determinado, lo que se denomina prioridad.

En JavaScript, cuanto mayor sea la prioridad, primero se ejecutará. Cuando las prioridades son iguales, se ejecutan de izquierda a derecha.

La multiplicación, la división y el resto tienen la misma prioridad.
La suma y la resta tienen la misma prioridad.
La multiplicación, la división y el resto tienen mayor prioridad que la suma y la resta.
Utilice () para aumentar la prioridad
Resumen: Primero multiplica y divide, luego suma y resta. Si hay paréntesis, calcula primero ~~~

Ejercicio 5

Requisito: ingrese el radio del círculo en el cuadro de diálogo, calcule el área del círculo y muéstrelo en la página
Análisis:

①: Fórmula matemática del área: π*r²
②: Convertir a escritura JavaScript: variable * r * r

const PI = 3.14
let r = +prompt('请输入半径：')
let s = PI * r * r
document.write("圆的面积是",s)
console.log(PI)

NaN representa un error de cálculo. Es el resultado de una operación matemática incorrecta o indefinida.

NaN es pegajoso. Cualquier operación en NaN devolverá NaN

console.log('老师' - 2) // NaN
console.log(NaN + 2) // NaN

4.2 Tipo de cadena (cadena)

Los datos entre comillas simples ( ''), comillas dobles ( "") o comillas invertidas se denominan cadenas. No existe una diferencia esencial entre comillas simples y comillas dobles. Se recomienda utilizar comillas simples.

Precauciones:

Si se deben utilizar comillas simples o dobles en pares
Las comillas simples/dobles se pueden anidar unas dentro de otras, pero no entre sí.
Puede utilizar caracteres de escape si es necesario \para generar comillas simples o dobles.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let user_name = '小明' // 使用单引号
    let gender = "男" // 使用双引号
    let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
    let str1 = '' // 这种情况叫空字符串
		
    documeent.write(typeof user_name) // 结果为 string
    documeent.write(typeof gender) // 结果为 string
    documeent.write(typeof str) // 结果为 string
  </script>
</body>
</html>

Concatenación de cadenas:

Escenario: el operador + puede concatenar cadenas.

Fórmula:数字相加，字符相连

let uanme = '薛之谦'
let song = '认真的雪'
documeent.write(uname + song)  // 薛之谦认真的雪

4.3 Cadenas de plantilla

Concatenar cadenas y variables

Antes de que estuviera disponible, era problemático unir variables.

documeent.write('大家好，我叫'+ uname + '练习' + age + '年')

gramática

`` (comilla invertida)
En el modo de entrada en inglés, presione la tecla encima de la tecla de tabulación en el teclado (la tecla a la izquierda de 1)
Al unir contenido en variables, use ${ } para envolver las variables

documeent.write(`大家好，我叫${
      
      uname}练习${
      
      age}年`)

Ejercicio 6

Requisitos: aparece un cuadro de diálogo en la página, ingrese su nombre y edad, y la página muestra: Hola a todos, mi nombre es xxx y tengo xx años este año.

let name = prompt('请输入您的名字')
let age =  prompt('请输入您的年龄')
documeent.write(`大家好，我叫${
      
      name}，今年${
      
      age}岁了`)

4.4 Tipo booleano (booleano)

Al expresar afirmación o negación, la computadora corresponde a datos de tipo booleano, que tiene dos valores fijos truey false, que se utiliza para representar datos positivos truey para representar datos negativos false.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink老师帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>

4.5 Tipo indefinido (indefinido)

Undefinido es un tipo especial. Tiene solo un valor indefinido y solo declara la variable. Si no se asigna ningún valor, el valor predeterminado de la variable es indefinido. Generalmente, es raro asignar [directamente] indefinido a una variable.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

Nota: El valor de una variable en JavaScript determina el tipo de datos de la variable.

Escenarios de uso laboral:

En nuestro desarrollo, a menudo declaramos una variable y esperamos a que se transmitan los datos.
Si no sabemos si se han pasado datos, podemos determinar si el usuario ha pasado datos comprobando si la variable no está definida.

4.6 Tipo vacío (nulo)

Nulo en JavaScript es solo un valor especial que representa "ninguno", "vacío" o "valor desconocido".

let obj = null
console.log(obj) // null

La diferencia entre nulo e indefinido:

indefinido significa que no hay asignación
nulo significa que se asigna un valor, pero el contenido está vacío

null Escenarios de uso en desarrollo:

Explicación oficial: trate nulo como un objeto que aún no se ha creado
Vernáculo: en el futuro, habrá una variable que almacene un objeto, pero el objeto aún no se ha creado, puedes darle un

5. Conversión de tipo

Comprender las características de los lenguajes de tipo débil y dominar el método de conversión de tipos explícitos.

En JavaScript, los datos se dividen en diferentes tipos, como valores numéricos, cadenas, valores booleanos e indefinidos. En el proceso de programación real, existe una relación de conversión entre diferentes tipos de datos.

¿Por qué es necesaria la conversión de tipos?
JavaScript es un tipo de datos débil: JavaScript no sabe a qué tipo de datos pertenece la variable. Sólo sabe cuándo se le asigna un valor.

Errores: los datos obtenidos mediante formularios y solicitudes son de tipo cadena de forma predeterminada. En este momento, las operaciones de suma simples no se pueden realizar directamente.

注: Detecta el tipo de datos mediante la palabra clave typeof

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1)
  </script>
</body>
</html>

5.1 Conversiones implícitas

Cuando se ejecutan ciertos operadores, el sistema convierte automáticamente el tipo de datos internamente, esta conversión se denomina conversión implícita.
regla:

+Mientras uno de los dos lados del número sea una cadena, el otro se convertirá en una cadena.
Los operadores aritméticos distintos de +, como - * /, etc., convertirán los datos en tipos numéricos.

defecto:

El tipo de conversión no está claro y solo se puede resumir según la experiencia.

Consejos:

El signo + se puede convertir en un tipo numérico cuando se analiza como un signo positivo.
El resultado de agregar cualquier dato a una cadena es una cadena.

Insertar descripción de la imagen aquí

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);
  </script>
</body>
</html>

注: La conversión implícita de tipos de datos es una característica de JavaScript y se encontrará en estudios posteriores. Por ahora, es necesario comprender qué es la conversión implícita.

5.2 Conversiones explícitas

No está estrictamente prohibido confiar demasiado en las conversiones implícitas dentro del sistema al escribir programas, porque las reglas de las conversiones implícitas no son claras y se basan principalmente en la experiencia. Para evitar problemas causados por la conversión implícita, la lógica raíz generalmente requiere una conversión explícita de los datos.

5.2.1 Número

Al Numberconvertir explícitamente a un tipo numérico, cuando la conversión falla, el resultado es NaN(Not a Number), es decir, no es un número.

Convertir a tipo numérico
Si no hay un número en el contenido de la cadena, el resultado será NaN (No es un número) cuando falla la conversión, lo que significa que no es un número.
NaN también son datos de tipo numérico, que representan datos no numéricos.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))
  </script>
</body>
</html>

5.2.2 parseInt(datos)

Mantener solo números enteros

5.2.3 parseFloat(datos)

Se pueden conservar los decimales.

5.2.4 Convertir a tipo de carácter

Variable de cadena (base de datos)
.toString (base)

Ejercicio 7

Ingrese 2 números, calcule la suma de los dos e imprímalo en la página

Insertar descripción de la imagen aquí

  let num1 = +prompt('请输入第一个数')
  let num2 =  +prompt('请输入第二个数')
  // num1 = Number(num1)
  // num2 = Number(num2)
  let sum = num1 + num2
  console.log(sum)

Resumir

El concepto de conversión de tipos es
convertir un tipo de datos en otro tipo. JavaScript es un tipo de datos débil. En muchos casos, los tipos de datos deben convertirse durante los cálculos.
Conversión implícita:
el sistema realiza la conversión automáticamente.
Conversión explícita:
escriba su propio código para indicarle al sistema a qué tipo convertir. Number
Si no hay dígitos en el contenido de la cadena, obtendrá NaN.String

6. Caso práctico: caso de información del pedido del usuario

Requisito: el usuario ingresa el precio del producto, la cantidad del producto y la dirección de entrega, y la información del pedido se puede imprimir automáticamente.Análisis
:

①: Se deben ingresar 3 datos, por lo que se necesitan 3 variables para almacenar el número de precio y la dirección
②: Necesidad de calcular el precio total
③: Imprima la página para generar un formulario y rellénelo con datos.
④: Recuerde usar cadenas de plantilla

Insertar descripción de la imagen aquí

JavaScript-[Semana 1]

1. Introducción

1.1 ¿Qué es JavaScript?

1.2 Método de introducción

1.2.1 Método interno (integrado)

1.2.2 Formulario externo (tipo enlace externo)

1.2.3 Estilo en línea

ejercicio 1

1.3 Comentarios y terminadores

1.3.1 Comentarios de una sola línea

1.3.2 Comentarios de varias líneas

1.4 Terminador

1.5 Entrada y salida

1.5.1 Salida

1.5.2 Entrada

ejercicio 2

1.6 literales

2. Variables

2.1 Declaración

2.2 Asignación

Ejercicio 3

2.3 Actualizar variables

2.4 Declarar múltiples variables

2.5 La naturaleza de las variables

2.6 Palabras clave

2.7 Reglas de nomenclatura de nombres de variables

ejercicio 4

3. Constantes

4. tipo de datos

4.1 Tipo numérico (Número)

Ejercicio 5

4.2 Tipo de cadena (cadena)

4.3 Cadenas de plantilla

Ejercicio 6

4.4 Tipo booleano (booleano)

4.5 Tipo indefinido (indefinido)

4.6 Tipo vacío (nulo)

5. Conversión de tipo

5.1 Conversiones implícitas

5.2 Conversiones explícitas

5.2.1 Número

5.2.2 parseInt(datos)

5.2.3 parseFloat(datos)

5.2.4 Convertir a tipo de carácter

Ejercicio 7

6. Caso práctico: caso de información del pedido del usuario

Supongo que te gusta