[Parte V | JS WebAPI] 5: 1W palabra explicación detallada del objeto Bom

Bom tiene un alcance mayor que Dom. Bom contiene Dom
Los estándares de Bom están formulados por diferentes fabricantes de navegadores y no existe un estándar unificado, por lo que la compatibilidad es algo incierta.

| La relación entre ventana, Bom y Dom

Bom es el modelo de objetos del navegador.
El objeto de más alto nivel de Bom es la ventana.
Otros objetos de Bom incluyen el historial de navegación de ubicación
De hecho, el documento también es un objeto de ventana, es decir, también es parte de Bom (modelo de objetos del navegador). Pero en Dom (Document Object Model) es el objeto de más alto nivel

Es decir: Bom contiene Dom
Todos los objetos de ventana se pueden llamar a través de [ventana.objeto] como ventana.documento, pero también se pueden omitir

window es el objeto antepasado de nivel superior del navegador. Es equivalente al hecho de que todo en Java proviene de Object
Hay un nombre de atributo especial debajo de la ventana, que está vacío de forma predeterminada. Se recomienda no utilizar el nombre al nombrar

alert() 等价于 window.alert()

| evento de carga de la ventana: escriba JS en la cabeza

Cómo escribir código JS en el encabezado (carga de evento de carga de página)

window.onload = function(){}
或者监听事件：
window.addEventListener("load",function(){});

window.onload es un evento de carga de ventana (página). Cuando el contenido del documento está completamente cargado, se activará el evento (incluidas imágenes, archivos de script, archivos CSS, etc.) y se llamará a la función de procesamiento.
Con window.onload, puede escribir el código JS sobre los elementos de la página, porque onload espera hasta que se cargue todo el contenido de la página y luego ejecuta la función de procesamiento.
window.onload El método de evento de registro tradicional solo se puede escribir una vez, si hay más de uno, prevalecerá el último window.onload. Sin límite si usa addEventListener

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load',function(){
            // 在这里面写上所有的JS代码
            // onload会在所有的dom对象加载完毕，才会执行。因此可以把JS写在最上面
            var btn = document.querySelector('button');
            btn.addEventListener('click',f);
            function f(){
                alert('Click')
            }
        })
    </script>
</head>
<body>
    <button>点我</button>
</body>
</html>

Evento de carga DOMContentLoaded más eficiente que onload

onload esperará hasta que se carguen todos los elementos de la página antes de ejecutar la función JS en onload
Cuando se activa el evento DOMContentLoaded, solo cuando se carga el DOM, excluyendo hojas de estilo, imágenes, flash, etc. (solo compatible con IE9+)
Si hay muchas imágenes en la página, pasará mucho tiempo desde que el usuario acceda al activador de carga, y el efecto interactivo no se realizará, lo que inevitablemente afectará la experiencia del usuario. En este momento, es más apropiado usar DOMContentLoaded evento

document.addEventListener('DOMContentLoaded',function(){})

| evento de cambio de tamaño de la ventana (activado cuando cambia el tamaño de la ventana)

window.onresize es un evento de carga de cambio de tamaño de ventana, una función de procesamiento que se llama cuando se activa
Este evento se activa cada vez que el tamaño de la ventana cambia en píxeles.
Antes de CSS3, a menudo usábamos este evento para completar el diseño receptivo. Obtenga el tamaño de pantalla actual con window.innerWidth

window.onresize = function(){}
或者监听事件：
window.addEventListener("resize",function(){});

| temporizador

1-1 setTimeout() temporizador

window.setTimeout(调用函数, [延迟的毫秒数]);

El método setTimeout() se usa para configurar un temporizador que ejecuta la función de llamada después de que expira el temporizador
la ventana se puede omitir
Se omite el número de milisegundos del retraso y el valor predeterminado es 0. Si se escribe, debe ser milisegundos
Debido a que puede haber muchos temporizadores, a menudo asignamos un identificador al temporizador.

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //以后都把JS写在预加载监听事件里
        window.addEventListener('load',function(){
            
            //写法一：window.定时器。 在里面写上函数体，定义1000ms延迟触发
            window.setTimeout(function(){
                alert(1);
            },1000);

            //写法二：window.定时器。 直接写函数名
            window.setTimeout(f,2000);

            //写法三：直接写定时器，调用
            setTimeout(f,3000);

            //为了区别不同的定时器，我们给不同的定时器起一个标识符（名字）
            var timeCommand = setTimeout(f,5000);
            
            
            function f(){
                alert('2');
            }


        })
    </script>
</head>
<body>
    
</body>
</html>

1-2 El concepto de función de devolución de llamada

1-3 Borrar el temporizador setTimeOut

Escenario de aplicación: en una telenovela, la heroína está atada con una bomba y luego el héroe detiene desesperadamente la bomba.
gramática

window.clearTimeout(定时器的名字变量)

2-1 temporizador setInterval()

¡setTimeout( ) solo se ejecutará una vez! (Pro-prueba, incluso si se coloca en el ciclo while, no se volverá a ejecutar cada vez que se repite)
El método de uso de setInterval y setInterval es exactamente el mismo, la diferencia es que el temporizador setInterval() se ejecutará repetidamente a intervalos de un cierto período de tiempo.

2-2 Borrar el temporizador setInterval

window.clearInterval(interval定时器的变量名);

Caso 2-2: Cuenta regresiva

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html

Caso 2-4: 60 segundos después de hacer clic en el botón "Enviar", no se puede volver a hacer clic

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>

</html>

| este

En el alcance global o en las funciones ordinarias, esto apunta a la ventana del objeto global (tenga en cuenta que esto en el temporizador apunta a la ventana)
En la llamada al método, quién llama a esto y señala a quién.
En el constructor esto apunta a la instancia del constructor.

Ejemplo propenso a errores:

Ejemplo de código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load',function(){

            // 1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
            console.log(this); //window

            function f(){
                console.log(this); 
            }
            f();//window



            // 2.方法调用中谁调用this指向谁
            var obj = {
                objf : function(){
                    console.log(this);
                }
            }
            obj.objf();//Object { objf: objf() }


            
            //  3.构造函数中this指向构造函数的实例
            function Person(name , age){
                this.name = name;
                this.age = age;
                console.log(this);
            }
            var person = new Person('Klee');//Object { name: "Klee", age: undefined }


        })
    </script>
</head>
<body>
    
</body>
</html>

| JS síncrono y asíncrono

JS ahora admite la ejecución asíncrona

El JS actual introduce las tecnologías y estándares relacionados con la "pila de ejecución, función de devolución de llamada", de modo que el código (función de devolución de llamada) que necesita esperar para la ejecución se puede agregar a la cola de tareas y se asignan eventos a aquellos códigos que no necesitan esperar. logrando así asíncrono

Incluyendo Ajax en el futuro, ¡es una función de devolución de llamada asíncrona!

ejemplo de código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load',function(){
            console.log(1);
            window.setTimeout(function(){
                console.log(2);
            },2000);
            console.log(3);

            //按照以前的JS，输出结果是 1 2 3
            //但是现在的JS支持异步，所以输出结果是 1 3 2
        })
    </script>
</head>
<body>
    
</body>
</html>

Tareas síncronas y tareas asíncronas en JS

Para lograr la asincronía, JS agrega conceptos como "pila de ejecución y función de devolución de llamada", que nos ayudan a poner aquellas tareas que necesitan esperar en la pila y ejecutarlas más tarde.
Necesitamos entender cuáles son tareas síncronas (ejecutadas en secuencia) y cuáles son tareas asíncronas (códigos que se colocan en la pila de ejecución y esperan devoluciones de llamada)

Tareas asíncronas comunes

Cambio de tamaño de clic de evento normal

error de carga de carga de recursos

temporizador setInterval setTimeOut

Mecanismo de ejecución de tareas síncronas JS y tareas asíncronas

Primero distinga entre tareas síncronas y tareas asíncronas.
Las tareas de sincronización se colocan primero en la pila de ejecución y todas las tareas de sincronización se ejecutan primero.
Una vez que se ejecutan todas las tareas sincrónicas, el sistema lee las tareas asincrónicas en la cola de tareas una por una, coloca las tareas asincrónicas en la pila de ejecución y comienza la ejecución.

El orden en que las tareas asíncronas de JS (funciones de devolución de llamada) se colocan en la cola de tareas

A veces, puede haber muchas tareas asincrónicas en el código. Por ejemplo, la tarea de [retrasar la ejecución de 2 s] puede definirse antes que la tarea de [retrasar la ejecución de 3 s]. El método de la cola de tareas] provocará la tarea de [retrasar la ejecución de 2 s]. ] en la cola de tareas para ser retrasado por la tarea de [retraso 3s] por un segundo (porque la tarea de [retraso 3s] entra primero, de acuerdo con el progreso hacia atrás de la pila Primero sale, luego la tarea [retraso 3s] aparecerá antes de que aparezca la tarea [delay 2s])
Observe que el resultado del siguiente código es [1 4 sleep 2s sleep 3s] Esto muestra que el orden de apilamiento de la cola de tareas asincrónicas no es una relación de orden simple

            console.log(1);
            window.setTimeout(function(){
                console.log('休眠2s');
            },2000);
            window.setTimeout(function(){
                console.log('休眠3s');
            },3000);
            console.log(4);

De hecho, el orden de apilamiento de las colas de tareas para tareas asincrónicas se gestiona mediante el procesamiento de tareas asincrónicas.

Para el temporizador: ¡Solo cuando finaliza el tiempo, el procesamiento de tareas asincrónicas colocará la tarea en la cola de tareas! Luego, después de ejecutar todas las tareas de sincronización, llame a la función desde la cola de tareas (esto también explica el fenómeno anterior)

Para clics: solo después de hacer clic, el procesamiento de tareas asincrónicas colocará la tarea en la cola de tareas.
De hecho, el sistema continuará circulando en las dos líneas de tareas de [ejecución de tareas sincrónicas → verificar si hay tareas en la cola de tareas → obtener y ejecutar tareas de la cola de tareas] [procesamiento de tareas asíncronas → agregar tareas asíncronas a la tarea queue] Llamó al bucle de eventos (bucle de eventos)

| objeto de ubicación

1-1 Resumen

ubicación es un objeto debajo de la ventana, y su estado es equivalente a documento
La diferencia es: el documento es Dom (modelo de objeto de documento); la ubicación es Bom (modelo de objeto de navegador).
la ubicación está relacionada con la url, el objeto Bom de la ubicación se usa para operar en las propiedades relacionadas de la url

Revisión de 1-2 URL

2-1 Propiedades relacionadas del objeto de ubicación

Tenga en cuenta que esto es un atributo! ¡No es una función! No hay necesidad de paréntesis

Cómo obtener el atributo de ubicación

window.location.属性名

Por supuesto, también puede omitir la ventana

location.属性名

2-2 location.href Obtener o modificar URL

var url = location.href;  //获取url
location.href = 'url';  //修改当前页面url

2-3 location.search obtener parámetros

location.search;  //获取的是一个从 ? 开头的字符串

Si hay chino, necesita transcodificar, use el siguiente código

var parameter = decodeURIComponent(window.location.search);

Ejemplo de código:

//登录页代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            width: 300px;
            height: 200px;
            border: 1px transparent;
            margin: 200px auto;
        }

        form .name {
            width: 200px;
            height: 20px;
            margin: 5px calc(50% - 100px);
        }

        form .sex {
            display: block;
            width: 200px;
            height: 20px;
            margin: 5px calc(50% - 70px);
        }

        form .submit {
            display: block;
            width: 100px;
            height: 40px;
            background-color: lightcyan;
            margin: 20px calc(50% - 50px);
            
        }

    </style>
</head>
<body>
    <form action="13-2 跳转页面.html">
        <input type="text" name="name" placeholder="输入" value="" class="name">
        <div class="sex">
            <input type="radio" name="sex" value="man">man
            <input type="radio" name="sex" value="woman">women
        </div>
        <input type="submit" value="登录" class="submit">
    </form>
</body>
</html>

//跳转页代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load',function(){
        

        //获取参数字符串
        var parameter = decodeURIComponent(window.location.search);//?name=SSS&sex=woman

        //去掉开头的?
        var parameter2 = parameter.substring(1,parameter.length);//name=SSS&sex=woman


        //根据 & 符号分割字符串
        var parameterArray = parameter2.split('&');//Array [ "name=SSS", "sex=woman" ]

        //遍历字符串，依次获取
        for(var i=0 ; i<parameterArray.length ; i++){
            var para = parameterArray[i];
            var name = para.split('=')[0];
            var value = para.split('=')[1];

            //展示参数值
            var newDiv = document.createElement('div');
            var box = document.querySelector('.box');
            box.appendChild(newDiv);
            newDiv.innerText = '参数名：' + name + '，参数值：' + value;
        }
           
        })
    </script>
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

3-1 Métodos relacionados con el objeto de ubicación

El método es agregar corchetes, prestar atención para distinguirlo del atributo

| objeto navegador: saltar páginas según diferentes dispositivos

El objeto navigator contiene información sobre el navegador y tiene muchos atributos, el más utilizado es userAgent, que devuelve el valor de la cabecera user-agent enviada por el cliente al servidor.

El siguiente código front-end puede determinar el terminal del usuario para abrir la página y realizar el salto

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) {
 window.location.href = ""; //手机
} else {
 window.location.href = ""; //电脑
}

| objeto de historial: implementar página anterior y página posterior en la página

Ejemplo de código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load',function(){
            var button1 = document.querySelector('body button:nth-of-type(1)');
            button1.addEventListener('click',function(){
                //通过back返回上级页面
                history.back();
            })
            
            var button2 = document.querySelector('body button:nth-of-type(2)');
            button2.addEventListener('click',function(){
                window.location.href = '14-3 跳转页面2.html';
            })
        })
    </script>
</head>
<body>
    <span>当前页面：2</span>
    <button>上一级</button>
    <button>下一级</button>
</body>
</html>