pink老师有点意思~

目标

能够说出什么是BOM
能够知道浏览器的顶级对象 window
能够写出页面加载时间以及注意事项
能够写出两种定时器函数并说出区别
能够说出 JS执行机制
能够使用 location 对象完成页面之间的跳转
能够知晓 navigator 对象涉及的属性
能够使用 history 提供的方法实现页面刷新

1. BOM 概述

1.1 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性，

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化是 W3C，BOM最初是Netscape 浏览器的标准的一部分

DOM	BOM
文档对象模型	浏览器对象模型
DOM 就是把（文档）当做一个（对象）来看待	把（浏览器）当做一个（对象）来看待
DOM 的顶级对象是 document	BOM 的顶级对象是 window
DOM主要学习的是操作页面元素	BOM 学习的是浏览器窗口交互的一些对象
DOM是 W3C 标准规范	BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

1.2 BOM的构成

BOM 比DOM 更大，它包含 DOM

widow 对象是浏览器的顶级对象，它具有双重角色

他是 JS 访问浏览器的窗口的一个接口
他是一个全局对象，定义在作用域中的变量，函数都会变成 window 对象的属性和方法。在调用的时候可以省略 window，前面学习的对话框都属于 window对象方法，如alert(), prompt() 等。

注意：window下的一个特殊属性 window.name

    <script>
        // window.document.querySelector()
        var num = 10;
        console.log(window.num);

        function fn() {
            console.log(11);

        }
        fn();
        window.fn();

        // alert(11);
        // window.alert(11);
        console.dir(window);

        console.log(window.name);
    </script>

2. window 对象的的常见事件

2.1 窗口（页面）加载事件（两种）

window.onload = function(){}

window.addEventListener(‘load’, function() {} )

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数

注意：

有了window.onload 就可以把 JS 代码写到页面的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

注意：

DOMContentLoaded 事件触发是，仅当DOM加载完成，不包括样式表，图片，flash等等。
ie9以上才支持
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded 事件比较合适

document.addEventListener(‘DOMContentLoaded’,function() {})

<body>
    <script>
        // 注意：传统的方式只能识别最后一个

        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert('22');
        // }

        // 这种方式可以识别很多个
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })

        window.addEventListener('load', function() {
            alert('22');
        })

        document.addEventListener('DOMContentLoaded', function() {
            alert('33');
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
            // DOMContentLoaded 是 DOM 加载完毕，不包含图片 flash css 等就可以执行 加载速度比 load 更快一点
        })
    </script>
    <button>点击</button>
</body>

2.2 调整窗口大小事件

window.onresize = function(){ }

window.addEventListener(“resize”, function(){ });

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

注意：

注意只要窗口发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);
                console.log('变化了');

                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div style="width: 100px; height: 100px; background-color: pink;"></div>
</body>

3. 定时器

3.1 两种定时器

window 对象给我们提供了2个非常好用的方法 - 定时器

3.1.1 setTimeout()

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

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
注意：

window 可以省略。
这个调用函数可以直接写函数，或者写 函数名, 或采取字符串 ‘函数名()’ 三种形式，第三种不推荐
延迟的毫秒数省略默认是0，如果写，必须是毫秒
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

<body>
    <script>
        // 1. setTimeout
        // 语法规范： window.setTimeout(调用函数，延迟时间)；
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认是0
        // 3. 这个时间调用可以直接写函数 还可以写函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器，我们经常给定时器加个标识符 （起个名字）

        setTimeout(function() { /* 1 */
            console.log('时间到了');
        }, 2000);


        function callback() {
            console.log('爆杂');
        }
        var time1 = setTimeout(callback, 3000); /* 2 */
        var time2 = setTimeout(callback, 5000); /* 2 */

        setTimeout('callback()', 3000); /* 3 */ /* 不提倡 */
    </script>
</body>

拓展1：

setTimeout() 这个调用函数我们也称为回调函数 callback
普通函数是按照代码顺序直接调用
而这个函数，需要等待时间，时间到了采取调用这个函数，因此称为回调函数
简单理解：回调，就是回头调用的意思，上一件事干完，再回头调用这个函数。
例 element.onclick = function(){ } 或者 element.addEventListener(“click”, fn);里面的函数也是回调函数

拓展2：

window.clearTimeout(timeoutID)

clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器。
注意：

window 可以省略
里面的参数就是定时器的标识符

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');

        var timer = setTimeout(function() { /* 1 */
            console.log('时间到了');
        }, 2000);

        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
</body>

3.1.2 setInterval()

setInterval(回调函数，[间隔的毫秒数])；

setInterval() 方法重复调用一个函数，每间隔这个时间，就用一次回调函数。

注意：

window 可以省略。
这个调用函数可以直接写函数，或者写 函数名, 或采取字符串 ‘函数名()’ 三种形式，第三种不推荐
延迟的毫秒数省略默认是0，如果写，必须是毫秒
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

<body>
    <button>点击停止定时器</button>
    <script>
        // 1. setInterval
        // 语法规范： window.setInterval(调用函数, 延迟时间);
        var btn = document.querySelector('button');

        var timer = setInterval(function() { /* 1 */
            console.log('时间到了');
        }, 1000);
        // 2. setTimeout 延迟时间到了，就去调用这个函数，只调用一次 就结束了这个定时器
        // 3. setInterval 每间隔这个延迟时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>
</body>

案例：倒计时https://blog.csdn.net/weixin_45773503/article/details/106205120
清除 setInterval 定时器

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 定义成全局变量   null是一个空对象  要赋值
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('hello');
            }, 1000)
        })
        stop.addEventListener('click', function() {
            clearInterval(timer)
        })
    </script>
</body>

2.1 发送短信案例https://blog.csdn.net/weixin_45773503/article/details/106210439

3.2 this指向问题

<body>
    <button>点击</button>
    <script>
        // 1. this 指向问题 一般情况下 this 的最终指向全局变量window（注意定时器里面的this指向window）
        console.log(this);
        window.fn();

        function fn() {
            console.log(this);
        }
        window.setTimeout(function() {
            console.log(this);
        }, 1000);

        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this);
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this 指向的是btn这个按钮
        // }

        btn.addEventListener('click', function() {
                console.log(this);
            })
            // 3. 构造函数中this指向构造函数的实例

        function Fun() {
            console.log(this); // this 指向的是Fun 实例对象
        }

        var fun = new Fun();
        console.log(fun);
    </script>
</body>

4 JS 执行队列问题

4.1 JS 是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript 是为了处理页面中用户的交互，以及操作 DOM 而诞生的。比如，我们对某个 DOM 元素进行添加和删除操作，不能同时进行，应该先进行添加，之后在删除
单线程就意味着，所有的任务都要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题就是：如果 JS 执行的事件过长，这样就会造成页面渲染的不连贯，导致页面加载阻塞的感觉

引出问题：

    <script>
        console.log(1);

        setTimeout(function() {
            console.log(3);
        }, 1000)

        console.log(2);
    </script>

4.2 同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出WEB Worker 标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步

同步：
前一个任务结束后再去执行后一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的，比如做饭的同步做法：先烧水煮饭，等水开了（10分钟后），再去切菜，炒菜

异步：
你在做一件事情的时候，因为这件事情会花费很长时间，在做这件事情的同事你还可以去处理其他的事情，比如做饭的异步做法：先烧水煮饭，同时切菜，炒菜

他们的本质区别：这条流水线上各个流程的执行顺序不同

4.3 JS执行机制

5. location 对象

1.什么是location对象

window对象给我们提供了一个 location 属性用于 获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location对象。

2. URL

3. location对象属性

重点记住：href 和 search

栗子1 点击跳转页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 1. 点击按钮跳转
        btn.addEventListener('click', function() {
            location.href = 'http://baidu.com'; // 点击按钮跳转
        })

        // 2. 实现5s后自动跳转
        fn();
        setInterval(fn, 1000)
        var timer = 5;

        function fn() {
            if (timer == 0) {
                clearInterval(fn)
                location.href = 'http://baidu.com'; // 点击按钮跳转
            } else {
                div.innerHTML = '您将在' + timer + '秒之后跳转';
                timer--;
            }

        }
    </script>
</body>

栗子2 实现不同页面之间的数据传递

第一个登陆页面，里面有提交表单，action 提交到 index.html页面
第二个页面可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数
在第二个页面中，需要把这个参数提取
第一步去掉？利用 substr
第二步利用=好分割键和值 split（‘=’）

第一个页面：

<body>
    <form action="index.html">
        用户名：<input type="text" name='uname'>
        <input type="submit" value="登录">
    </form>
</body>

第二个页面：

<body>
    <script>
        console.log(location.search); // uname = andy
        // 1. 先去掉 ？   substr('起始的位置',截取几个字符);  都是数字不是字符 第二个参数默认为到末尾
        var params = location.search.substr(1);
        console.log(params);

        // 2. 利用 = 把字符串分割为数组 split('=');
        var arr = params.split('=');
        // console.log(arr);
        document.write(arr[1] + '欢迎您！')
    </script>
</body>

4. location对象方法

location队形方法	返回值
location.assign()	跟 href 一样，可以跳转页面（也称为重定向页面）
location.replace	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者 f5 如果参数为 true 强制刷新 ctrl+f5

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史。可以后退
            // location.assign('http://www.baidu.com');

            // 不记录浏览历史，所以不能实现后退
            // location.replace('http://baidu.com');

            // 刷新
            location.reload(true);
        })
    </script>
</body>

6. navigator 对象

7. history 对象

1. 方法

2. 栗子：

index：

<body>
    <a href="list.html">点击我去往list页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            history.forward();
            //history.go(1);/* 向后一个页面 */
        })
    </script>
</body>

list：

<body>
    <a href="index.html">点击我去往首页</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            history.back();
            //history.go(-1);
        })
    </script>
</body>

BOM （作为学习笔记）

pink老师有点意思~

目标

1. BOM 概述

1.1 什么是BOM

1.2 BOM的构成

2. window 对象的的常见事件

2.1 窗口（页面）加载事件（两种）

2.2 调整窗口大小事件

3. 定时器

3.1 两种定时器

3.1.1 setTimeout()

3.1.2 setInterval()

3.2 this指向问题

4 JS 执行队列问题

4.1 JS 是单线程

4.2 同步和异步

4.3 JS执行机制

5. location 对象

1.什么是location对象

2. URL

3. location对象属性

栗子1 点击跳转页面

栗子2 实现不同页面之间的数据传递

4. location对象方法

6. navigator 对象

7. history 对象

1. 方法

2. 栗子：

記住用戶名（利用本地存儲）

js 加載事件

mouseenter 和 mouseover的區別

animation動畫封裝函數（js小案例）

swiper的監測是第幾頁的回調函數

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

BOM （作为学习笔记）

pink老师 有点意思~

目标

1. BOM 概述

1.1 什么是BOM

1.2 BOM的构成

2. window 对象的的常见事件

2.1 窗口（页面）加载事件（两种）

2.2 调整窗口大小事件

3. 定时器

3.1 两种定时器

3.1.1 setTimeout()

3.1.2 setInterval()

3.2 this指向问题

4 JS 执行队列问题

4.1 JS 是单线程

4.2 同步和异步

4.3 JS执行机制

5. location 对象

1.什么是location对象

2. URL

3. location对象属性

栗子1 点击跳转页面

栗子2 实现不同页面之间的数据传递

4. location对象方法

6. navigator 对象

7. history 对象

1. 方法

2. 栗子：

pink老师有点意思~