js收官

BOM（Brower Object Model）

BOM的核心

1. bom的核心是window，window对象是bom的顶层对象，就是玩转window的属性和方法。
2. window对象它具有双重特色，既是通过js访问浏览器窗口的一个接口，又是一个全局对象，它意味着网页中定义的任何对象、变量、和函数，都是window的属性。

BOM与DOM的关系

dom的标准化组织是w3c，但是bom比较尴尬，没有他的标准化组织。（兼容性不太好）

BOM的组成部分

window javascript 层级中顶层对象表示浏览器窗口
navigator 包含了客户端浏览器的信息
history 包含了浏览器访问过的url
location 包含了当前url的信息
Screen 包含了当前客户端显示屏的信息

js收官

浏览器的组成

1. 用户界面
2. 浏览器引擎
3. 渲染引擎
4. 网络
5. UI后端
6. js引擎
7. 数据存储
   在输出www.baidu.com的时候，要显示页面进行的步骤。
   1. url —>ip
   2. tcp的三次握手
   3. js html css img
   4. 由渲染引擎进行渲染的过程
   5. tcp的四次挥手

label标签

	<label for="demo">username:</label>
    <input type="text" id="demo">

分析：通过添加label中for的内容，从而与input标签中的id的值相对应，实现最终的效果是在点击label中的username的时候，input标签中也被选中。

特性与属性

简单来说，特性就是指dom对象与标签中的原有的有一一对应的关系；而属性使我们后天人为添加的，我们在操作dom对象进行修改的时候，并不会改变标签中属性的值，但是特性（本来就有的）是会生效的。

<!-- 特性与属性 -->
    <input id="demo" type="text" time="2020-09-24">
    <script>
        // console.log(document.compatMode);
        var oInput = document.getElementById('demo');

        oInput.type = 'password';
        oInput.time = '11111';
    </script>

分析：在进行操作特性type的时候，可以直接将其修改为password，但是，在操作属性的时候，我们的后面的赋值并不会对前面的time属性修改（保持原状）。

setAttribute和getAttribute

分析：setAttribute可以强行加入属性在行间样式中，但是直接获取是获取不到的，如果想要获取到我们自定义的属性，我们必须通过的方法是getAttribute。

		 var oInput = document.getElementById('demo');

        oInput.type = 'password';
        oInput.time = '11111';

        oInput.setAttribute('log','aaaaaaa');

结果

修改

图片的预加载和懒加载

预加载分析：图片的预加载是指在加载大图片的时候，我们希望在用户网速不太健康的时候，仍然不要出现慢慢展开大图的情况，而是在图片显示之前先把图片加载过来。

 // 图片的预加载
        var oImg = document.createElement('img');
        var oDiv = document.getElementById('demo');
        
        oImg.onload = function(){
            oDiv.appendChild(oImg);
        }
        
        oImg.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600941521388&di=709504aa3a69eaa0334d10a84132ddb5&imgtype=0&src=http%3A%2F%2Fi2.article.fd.zol-img.com.cn%2Ft_s640x2000%2Fg5%2FM00%2F0F%2F07%2FChMkJlihHUGILuQpAAPytxrSiTcAAZ6TQJS-hQAA_LP148.jpg";

懒加载分析：基本思想：按需加载，在实际应用的场景中往往是懒加载配合预加载来实现图片的展示。
第一步是监控滑轮的滚动事件，来查看当前的div是否在可视区的显示来显示oDiv.offsetTop <= window.pageYOffset + window.innerHeight第二步是采取预加载，最后一步是将正式的图片添加到页面之中。

通过Math.random获取一个区间范围内的随机数

   function getRandom(min,max){
            return min + Math.random()*(max-min);
        }
        getRandom(10,20);

生成一个在min到max之间的随机数：首先应该明确的是我们使用Math.random()获取的是在[0,1)之间的一个随机数，当乘上最大值和最小值之间的差值之后，再加上最小值，我们就可以获取一个在min到max之间的随机数，这个可以看做是一个固定的功能函数，在以后需要的时候直接调用，传入最大值和最小值的实际参数。