JS学习笔记（十）-BOM浏览器对象模型及个人小结//JavaScript基础阶段（完）

本文链接：https://blog.csdn.net/Ludwig1957/article/details/113005387

2021.1.21

学习笔记（十）

BOM浏览器对象模型

BOM 概述

什么是BOM

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

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

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

DOM:

文档对象模型
DOM 就是把「文档」当做一个「对象」来看待
DOM 的顶级对象是 document
DOM 主要学习的是操作页面元素
DOM 是 W3C 标准规范

BOM：

浏览器对象模型
把「浏览器」当做一个「对象」来看待
BOM 的顶级对象是 window
BOM 学习的是浏览器窗口交互的一些对象
BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM的构成

BOM比DOM更大，它包含DOM。
在这里插入图片描述

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

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

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

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

        alert(11);
        window.alert(11);

        console.dir(window);

        //var name = 10; 最好不要用name给变量命名，因为window下有个属性就叫name
        console.log(window.name);
    </script>
</body>

Note：name 是 window下的一个特殊属性 window.name

window 对象的常见事件

窗口加载事件

1.window.onload = function(){} 或者
window.addEventListener(“load”,function(){});
window.onload 是窗口(页面)加载事件,当文档内容完全加载完成(包括图像、脚本文件、CSS 文件等)会触发该事件, 就调用的处理函数。

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = 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 等就可以执行
        //因此，DOMContentLoaded加载速度比load更快一些
    </script>
</head>

<body>
    <button>点击</button>
</body>

</html>

Note:DOMContentLoaded加载速度比load更快一些

调整窗口大小事件

window.onresize = function(){} 或者
window.addEventListener(“resize”,function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<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></div>
</body>

</html>

Note：
1.只要窗口大小发生像素变化，就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。 window.innerWidth 可以得到当前屏幕的宽度

定时器

两种定时器

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

setTimeout()
setInterval()

1.setTimeout()定时器
语法规范：window.setTimeout(调用函数,[延迟的毫秒数]);

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

setTimeout()这个调用函数我们也称为回调函数callback。

普通函数是按照代码顺序直接调用。
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。

以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。

案例：五秒钟自动关闭广告
案例分析：

核心思路：5秒之后，就把这个广告隐藏起来//所有的关闭都不是消失而是看不见=>隐藏起来
用定时器setTimeout

<body>
    <img src="图片素材/ad.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000)
    </script>
</body>

停止setTimeout()定时器
语法规范：window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

<body>
    <button>点击停止计时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 3000)
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
</body>

Note：
1.window 可以省略。
2.里面的参数就是定时器的标识符。

2.setInterval()定时器
语法规范：window.setInterval(回调函数, [间隔的毫秒数]);
setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

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

Note：
1 window 可以省略。
2.这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
3.间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
5.第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

案例：倒计时
案例分析：

这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
三个黑色盒子里面分别存放时分秒
三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问
题

停止setInterval()定时器
语法规范：window.clearInterval(intervalID);
clearInterval()方法取消了先前通过调用 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('一秒又一秒');
            }, 1000)
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
</body>

Note：
1.window 可以省略。
2.里面的参数就是定时器的标识符。

案例：发送短信
点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。
案例分析：

按钮点击之后，会禁用。disabled 为true
同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML修改
里面秒数是有变化的，因此需要用到定时器
定义一个变量，在定时器里面，不断递减
如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

<body>
    手机号码：<input type="number"><button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var i = 10;
        btn.addEventListener('click', function() {
            btn.disabled = true;
            btn.innerHTML = '还剩' + i + '秒';
            var timer = setInterval(function() {
                if (i == 1) {
                    //清楚定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '再次发送';
                    i = 10; //这个定时需要重新开始。
                } else {
                    i--;
                    btn.innerHTML = '还剩' + i + '秒';
                }
            }, 1000)
        })
    </script>
</body>

this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。

现阶段，我们先了解一下几个this指向：

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

JS 执行机制

JS是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

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

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

异步–执行与任务排列不一致
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

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

同步任务：
同步任务都在主线程上执行，形成一个执行栈。

异步任务：
JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:

普通事件，如 click、resize 等
资源加载，如 load、error 等
定时器，包括 setInterval、setTimeout 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

JS执行机制

先执行执行栈中的同步任务。
异步任务（回调函数）放入任务队列中。
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

在这里插入图片描述

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环(event loop)。

location 对象

什么是location对象

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

URL

统一资源定位符(Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

在这里插入图片描述

location对象的属性

location.href //获取或者设置整个URL
location.host //返回主机(域名) www.itheima.com
location.port //返回端口号。如果未写，返回空字符串
location.pathname //返回路径
location.search //返回参数
location.hash //返回片段 #后面内容，常见于链接、锚点。

Note：
1.重点记住 href 和 search。
2.按F12，打开控制台可以直接输入查询。//打开jd时发现惊喜⭐️

案例：5秒钟之后自动跳转页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            //console.log(window.location.href); //window可省略直接location.href
            location.href = 'http://www.baidu.com';
        })
        var timer = 5;
        div.innerHTML = '您将在' + timer + '秒终之后跳转到首页';
        timer--;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.baidu.com';
            } else {
                div.innerHTML = '您将在' + timer + '秒终之后跳转到首页';
                timer--;
            }
        }, 1000)
    </script>
</body>

案例：获取URL参数数据
主要练习数据在不同页面中的传递。
案例分析：

第一个登录页面，里面有提交表单，action 提交到 index.html页面
第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
第二个页面之所以可以使用第一个页面的数据，是利用了URL 里面的 location.search参数
在第二个页面中，需要把这个参数提取
第一步去掉？利用 substr(‘起始的位置’,截取几个字符)
第二步利用=号分割键和值 split(’=’)
第一个数组就是键第二个数组就是值

<!-- login.html -->
<body>
    <form action="index.html">
        <!-- 所有的表单要放在表单域中才可以提交要用form  -->
        <!-- 提交到哪个地方？提交到另外一个页面所以action='index.html';  -->
        用户名：<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

<!-- index.html -->
<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        //1.先去掉？ 用substr('起始的位置',截取几个字符)//第二个参数省略就是默认截取到最后一个
        var parms = location.search.substr(1); //uname=andy
        //console.log(parms);
        //2.利用=把字符串分割为数组 split('=')
        var arr = parms.split('=');
        console.log(arr); //["uname", "andy"]
        var div = document.querySelector('div');
        //3.把数据写入div中
        div.innerHTML = '欢迎你，' + arr[1];
    </script>
</body>

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://www.baidu.com');
            //不加参数，是f5刷新，加参数true是ctrl+f5强制刷新(不用缓存直接服务器读取)
            location.reload(true);
        })
    </script>
</body>

navigator 对象

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转:

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 = ""; //电脑
}

history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。

back() // 可以后退功能
forward() // 前进功能
go(参数) // 前进后退功能，参数如果是1，前进一个页面；如果是-1，后退一个页面

<!-- index2.html -->
<body>
    <a href="list.html">点击我去往列表</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            history.forward();
        })
    </script>
</body>

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

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

JavaScript基础阶段小结

那么，基础阶段可能暂时告一段落。10天时间学习了JavaScript的基础语法，DOM还有BOM，我不知道算入门没有，前面还有很长的路要走。其实是有一点点后悔的，大学花了很多的时间所谓感受生活，人文主义精神，体验上流，读书，看电影，喝咖啡，品尝贵腐，闻香水，看画展，玩钢笔，骑行，旅游，看世界，谈恋爱，现在看来那些小资生活对自己多少有点不合时宜，才华撑不起梦想，更现在应该做的还是应该踏踏实实一点一点学习，学习新的技术，不断进步。今天走在路上，闪过这样的想法，如果你看到这段文字才刚刚大一或者大二，你可能不懂或是不明白这样的压力，这是我追悔莫及的两年时间，我做了这样一个换算，如果要想毕业的时候工资有一万块，请在这四年里敲十万行代码。你每敲的十行代码就将会是你工资里的一块钱，而且这是永久叠加。想起茨威格的话：“命中的所有馈赠，都在暗中标好了价格。”大三下大四上的半年，认真准备考研，英语、政治、数学都倾尽全力，结果还未知，但对自己满意，可是计算机专业课却只花了很少的时间。2020年12月27号考完研，休息了十多天的时间，但会感到不踏实，压力很大，就要开始准备毕业设计，开题报告和任务书都被驳回，觉得甚是惭愧，不知道要怎样做好。但还是决定，一步一步走好。今天就是1月22日了，考研已经过去快一个月的时间，学完了JS基础，也算是除了看电影读书之外做出一点东西。下个阶段可能去学习Vue或者是Canvas,也可能是Ajax。毕设的题目是基于canvas做一个图形渲染框架，都是未知，不知道可以做到哪一步，很彷徨，很怕失望。学习前端的路算是开始了，希望可以一直坚持下去，坚持下去，我希望相信，只要开始了，永远不晚，剩下的就是每天的坚持和汗水。