JS se ejecuta en el navegador, por ejemplo, hay un módulo especial en Chrome, que es el motor JS, que es equivalente a la JVM y puede interpretar y ejecutar código js.

La composición de JS:

DOM API es la API proporcionada por el navegador para que js opere la página.

La API BOM es una API proporcionada por el navegador para que js opere la ventana del navegador.

Hola Mundo

Incrustar en html mediante etiquetas de script, tres métodos de introducción:

1. js internos

2. js externos

Escríbalo como un archivo .js separado y deje que se importe html.

3. js en línea

La alerta puede abrir una ventana para que el usuario pueda ver el resultado del programa, pero el funcionamiento de la ventana emergente no es muy bueno.

Algunos cuadros de diálogo, una vez que aparecen, impedirán que el usuario opere otras partes de la interfaz y se denominan cuadros de diálogo modales.

console .log puede imprimir el registro en la consola

console.log en js es similar a println en java y también es un método de depuración muy útil

variables de javascript

nombre de la variable var = valor inicial

No es necesario escribir un tipo para definir una variable en js. No escribir un tipo no significa que no exista.

Más bien, el tipo de variable está determinado por el valor de la operación de inicialización.

La palabra clave utilizada para definir variables en js también se puede escribir como let

Escritura dinámica de JavaScript

El tipo de una variable puede cambiar mientras se ejecuta el programa , esta característica se llama características dinámicas.

Si el tipo de una variable no puede cambiar mientras se ejecuta el programa, se denomina tipo estático.

La mayor ventaja de la escritura dinámica es que el código es muy flexible.

Por ejemplo, si escribes una función para calcular la suma de dos números, si usas Java, es posible que tengas que escribir dos enteros para sumar, dos dobles para sumar, dos largos para sumar... etc.

En un lenguaje escrito dinámicamente, solo necesita escribir una función

Las desventajas de la escritura dinámica también son obvias: no se sabe qué tipo es actualmente una variable, qué tipo de valores almacena y qué métodos y propiedades proporciona.

Varios tipos integrados en JavaScript:

En otros idiomas, si se accede a algo que no está definido , se informará directamente un error.

Sin embargo, JS no informará un error, sino que devolverá directamente un valor indefinido.

conversión de tipo implícita

En este código, se activa la conversión de tipo implícita

En JS, al comparar/operar con diferentes tipos, intentará convertirlos al mismo tipo tanto como sea posible.

Otro ejemplo:

El resultado final también es cierto.

Los lenguajes como Java que no admiten la conversión de tipos implícita se denominan lenguajes "fuertemente tipados".

Los lenguajes como JS que pueden admitir la conversión de tipos implícitos se denominan lenguajes de "tipo débil".

En JavaScript, se introduce un ===

Al comparar usando ===, no se realiza ninguna conversión de tipo implícita

matriz de JavaScript

Ambas son formas de crear matrices en JS.

Pero generalmente se usa el segundo.

En JS, los tipos de elementos de las matrices no necesitan ser uniformes y pueden ser de cualquier tipo. ! !

Esto no sólo es cierto para JS, sino también para los lenguajes escritos dinámicamente.

¿Cómo operar con elementos de matriz?

Trabajar con subíndices de matriz

La matriz de JS no es solo una matriz en el sentido tradicional (solo puede recuperar elementos presionando el subíndice), sino algo con la naturaleza de "pares clave-valor".

Es mejor entenderlo como un híbrido de Map + matriz. En este momento, la matriz también puede organizar datos de acuerdo con el par clave-valor del Mapa.

En versiones posteriores de JS, se introduce un mapa especial para representar pares clave-valor.

Recorrido de matriz:

1. Usar para bucle

2. Usar para cada uno

3. El segundo tipo de para cada uno.

Agregar elementos a una matriz (inserción de cola)

Solo usa el método push

Eliminar elementos de una matriz:

Utilice el método de empalme

Función JavaScript

Reglas de sintaxis de funciones:

No es necesario escribir el tipo entre paréntesis (cualquier tipo está bien, siempre y cuando la variable que pase pueda funcionar normalmente dentro de la función)

Cuando sumamos indefinido y 10, el resultado será NaN.

El nombre completo es Not a Number, que significa: no es un número.

Sin embargo, nuestro código no informará un error. Este resultado no cumple con las expectativas del usuario, pero no informará un error.

Si el número de parámetros reales es menor que el número de parámetros formales, el valor de los parámetros extra formales no está definido.

Si hay demasiados parámetros formales, los parámetros extra formales serán inútiles.

En resumen, cuando el número de parámetros formales y los parámetros reales no coinciden, no se informará ningún error y solo se ejecutará tanto como sea posible.

Cada función personalizará una variable de argumentos, que es una matriz y contiene todos los parámetros reales.

Usando argumentos, podemos sumar cualquier cantidad de números.

Para lenguajes escritos dinámicamente como JS, no hay necesidad de sintaxis como "sobrecarga"

Expresión de función:

Primero defina una función anónima sin nombre y luego asigne la función anónima a una variable agregada.

El tipo de variable agregada se llama tipo de función.

Se pueden llamar variables de tipo función.

En JS, puedes asignar una función a una variable en el mismo sentido que una variable normal, y también puedes usar la función como parámetro de otra función, o usar la función como valor de retorno de otra función (esto no se puede hacer en Java)

Esta característica se llama: las funciones son "ciudadanos de primera clase" en JS

Alcance de las variables en JavaScript

Cuando desea acceder a una variable en el código, ¿dónde encuentra la variable?

JS primero buscará el alcance actual. Si no se encuentra actualmente, lo buscará en el alcance superior, hasta el alcance global. Si aún no lo encuentra, informará un error/undefinido.

Esta configuración de sintaxis es similar a la captura de variables en Java.

objeto

JS no es un lenguaje de programación orientado a objetos, pero existe el concepto de objetos.

Esto significa que la configuración de objetos en JS es muy diferente a la de JAVA.

No hay encapsulación, herencia, polimorfismo o incluso clases en js

Los objetos js tienen propiedades y métodos (los métodos son esencialmente propiedades, porque las funciones son ciudadanos de primera clase en js)

Aquí se forma el objeto js.

También podemos crear objetos usando Object.

Los atributos y métodos que hay en el objeto js no se acuerdan de antemano y se pueden agregar en cualquier momento.

DOMINGO

DOM: modelo de objetos de documento, cada etiqueta en html se puede asignar a un objeto correspondiente en js

Todo lo que se muestra en la etiqueta se puede percibir a través del objeto js.

El objeto js modifica los atributos correspondientes, lo que puede afectar la visualización de etiquetas.

A través de dom, el código js se puede utilizar para operar elementos de la página.

Hay muchas API para DOM, aquí solo presentamos algunas API de uso común.

Seleccionar elementos de página

querySelector (selector CSS)

El documento es un objeto global en el navegador. Cualquier página tendrá un objeto de documento.

Todas las API DOM se expanden a través de objetos de documento.

Si hay varios cuadros, el valor predeterminado es el primero.

Si desea seleccionarlos todos, existe otro método: querySelectorAll() (devuelve una matriz)

evento

Los eventos son respuestas a las operaciones del usuario.

Para poder interactuar con el usuario, necesita saber qué ha hecho el usuario. Algunas acciones que realice generarán algunos eventos en el navegador.

El código necesita reaccionar a los eventos.

Tres elementos del evento:

1. Fuente del evento: qué elemento generó el evento

2. Tipo de evento: hacer clic, hacer doble clic, mover, presionar

3. Controlador de eventos: después de que ocurre el evento, qué código se debe ejecutar (todos los códigos que se ejecutarán están configurados de antemano)

En la página de inicio, también hay diferentes métodos de manejo de eventos, todos configurados desde el principio.

La forma más sencilla: utilice directamente el método on XXX en el elemento para vincular un controlador de eventos

Fuente del evento: .box Tipo de evento: onlick Controlador de eventos: alerta

Obtener/modificar el contenido del elemento

Primero obtenga el elemento y use el atributo internalHTML para obtener el contenido del elemento.

La modificación de esta propiedad afectará la visualización de la interfaz.

Obtener/modificar atributos de elementos

Los atributos de la etiqueta html también se asignarán al objeto js.

Obtener/modificar atributos de elementos de formulario

Los elementos del formulario (entrada, área de texto, selección...) tienen algunos atributos especiales que las etiquetas normales no tienen.

value obtiene el valor completado por el usuario en el elemento

Introduzca un número en la entrada y cada vez que se haga clic en el botón, se mostrará el número +1.

El atributo de valor es una cadena. Solo +1 lo convertirá en una cadena. Necesitamos usar parseInt para convertir la cadena en un número entero.

Obtener/modificar atributos de estilo

1. Modificar directamente el estilo del contenido.

(Modificar el valor del atributo de estilo)

Crea un div que ampliará la fuente cada vez que hagas clic en él.

Los nombres de los atributos en estilo son los mismos que en CSS, excepto que el nombre del lomo se reemplaza por mayúsculas y minúsculas.

2. Modifique el nombre de la clase CSS aplicada al elemento.

Cambiar al modo nocturno

Agregar nuevo elemento

1. Crea un elemento

2. Pon este elemento en el dom.

Utilice el método createElement para crear elementos.

Eliminar elemento

parentElem.removeChild

Ejemplo de código:

1. Adivina el número en la versión web

1. Genera un número aleatorio entre 1 y 100.

2. Permita que el usuario ingrese un número

3. Dar indicaciones basadas en la relación de tamaño de la entrada numérica.

Utilice Math.random para generar un número aleatorio entre [0,1)

Establezca el número aleatorio en N, según este *100, en este momento el rango de N es [0,100)

Y use parseInt para eliminar la parte decimal y finalmente obtenga un número entero entre [0,100)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字</title>
</head>
<body>
    <div>请输入要猜的数字</div>
    <input type="text">
    <button>提交</button>
    <!-- 使用这个 div 来显示结果 -->
    <div class="result">

    </div>
    <script>
        //1、先生成一个随机的整数
        let toGuess = parseInt(Math.random() * 100) + 1;
        console.log(toGuess);
        //2、进行猜数字操作
        let button = document.querySelector('button');
        let input = document.querySelector('input');
        let resultDiv = document.querySelector('.result');
        button.onclick = function(){
            //取出输入框里的数字
            if(input.value == ''){
                //用户什么都没有输入
                return;
            }
            let inputNum = parseInt(input.value);
            //4、比较大小关系
            if(inputNum < toGuess){
                //低了
                resultDiv.innerHTML = '低了'
            }else if(inputNum > toGuess){
                //高了
                resultDiv.innerHTML = '高了'
            }else{
                //猜对了
                resultDiv.innerHTML = '猜对了'
            }
        }

    </script>
</body>
</html>

programa de muro de confesiones

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        /*  * 是通配符选择器，是选中也米娜所有元素 */
        *{
            /* 消除浏览器的默认样式 */
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .container{
            width:600px;
            margin:20px auto;
        }

        h1{
            text-align: center;
        }
        p{
            text-align: center;
            color:#666;
            margin: 20px;
        }
        .row{
            /* 开启弹性布局 */
            display:flex;
            height:40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }
        .row span{
            width:100px;
        }
        .row input{
            height:30px;
            width:200px;
        }
        .row button{
            width: 300px;
            height:30px;
            color:white;
            background-color: orange;
            border: none;
            border-radius: 5px;
        }
        /* 点击的时候有反馈 */
        .row button:active{
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交，会将信息显示到表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>

        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>

        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>
    </div>

    <script>
        // 实现提交操作
        //点击提交，就能够把用户输入的内容提交到页面上显示
        //在点击的时候，获取到三个输入框的文本内容
        //创建一个新的 div .row ,把文本内容构造到这个 div 中
        let containerDiv  = document.querySelector('.container');
        let inputs = document.querySelector('input');
        let button = document.querySelector('button');
        button.onlick = function(){
            //1、获取到三个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == '' || to == '' || msg == ''){
                return;
            }

            //构造新的 div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
            containerDiv.appendChild(rowDiv);
            //清空之前的输入框内容
            for(let input of inputs){
                input.value = '';
            }
        }
    </script>
</body>
</html>

JavaScript (Notas)