JS3

BOM技术

BOM概述：

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

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。BOM缺乏标准JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分


BOM 比 DOM 更大。它包含 DOM。

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

它是 JS 访问浏览器窗口的一个接口

它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt()等。

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

window对象的常见事件

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

window.onload = function(){


};

// 或者

window.addEventListener("load",function(){});

注意：

有了window.onload就可以把JS代码写到页面元素的上方

因为onload是等页面内容全部加载完毕，再去执行处理函数

window.onload 传统注册事件方式，只能写一次

如果有多个，会以最后一个window.onload为准

如果使用addEventListener 则没有限制

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

接收两个参数：

DOMCountentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间

交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded事件比较合适。

区别：

load等页面内容全部加载完毕，包括页面dom元素，图片，flash，css等

DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行，加载速度比load更快一些

<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 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

</script>

调整窗口大小事件

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

注意：只要窗口大小发生像素变化，就会触发这个事件

window.onresize = function() {}

// 或者

window.addEventListener('resize',function(){});

我们经常利用这个事件完成响应式布局。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></div>

</body>

定时器

window 对象给我们提供了两个定时器

setTimeout()

setInterval()

setTimeout()

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

注意：

window可以省略

这个调用函数

可以直接写函数

或者写函数名

或者采取字符串 ‘函数名()’ （不推荐）

延迟的毫秒数省略默认是0，如果写，必须是毫秒

因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

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

普通函数是按照代码顺序直接调用，而这个函数，需要等待事件，事件到了才会去调用这个函数，因此称为回调函数。

<body>

    <script>

        // 1. setTimeout

        // 语法规范：  window.setTimeout(调用函数, 延时时间);

        // 1. 这个window在调用的时候可以省略

        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0

        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'

        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)

        // setTimeout(function() {

        //    console.log('时间到了');

        // }, 2000);

        function callback() {

            console.log('爆炸了');

        }

        var timer1 = setTimeout(callback, 3000);

        var timer2 = setTimeout(callback, 5000);

        // setTimeout('callback()', 3000); // 我们不提倡这个写法

    </script>

</body>

5s后自动关闭的广告

<body>

<img src="imags/ad.jpg" alt="" class="ad">

<script>

var ad=document.querySelsctor('.ad');

setTimeout(function(){

ad.style.display='none'

},2000);

</script>

</body>

停止setTimeuot定时器

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

window.clearTimeout(timeoutID)

注意：

window可以省略

里面的参数就是定时器的标识符

<body>

    <button>点击停止定时器</button>

    <script>

        var btn = document.querySelector('button');

        var timer = setTimeout(function() {

            console.log('爆炸了');

        }, 5000);

        btn.addEventListener('click', function() {

            clearTimeout(timer);

        })

    </script>

</body>

setinterval()定时器

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

window.setInterval(回调函数,[间隔的毫秒数]);

window可以省略

这个回调函数:

可以直接写函数

或者写函数名

或者采取字符 ‘函数名()’

第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

<body>

    <script>

        // 1. setInterval

        // 语法规范：  window.setInterval(调用函数, 延时时间);

        setInterval(function() {

            console.log('继续输出');

        }, 1000);

        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器

        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

    </script>

</body>

案例分析（淘宝倒计时效果 ）

这个倒计时时不断变化的，因此许哟定时器来自动变化（setInterval)

三个黑盒子里面分别存放时分秒 

三个盒子利用innerHTML放入计算的小时分钟秒数

第一次执行也是间隔毫秒数，因此刚刷新页面会有空白

最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面会有空白问题

clearInterval()停止定时器

clearInterval ( ) 方法取消了先前通过调用 setInterval() 建立的定时器

注意：

window可以省略

里面的参数就是定时器的标识符

<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('ni hao ma');

            }, 1000);

        })

        stop.addEventListener('click', function() {

            clearInterval(timer);

        })

    </script>

</body>

实例：短信发送验证码会禁用

//点击按钮后，会禁用disadled为true

//同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改

//里面秒数是有变化的，因此需要用到定时器

//定义一个变量，再定时器里面不断递减

//如果变量为0则说明到了时间，我们需要停止定时器，并且复原按钮到初始状态

<body>

手机号码：<input type="number"><button>发送</button>;

<script>

var btn=document.querySelector('button');\

var time=10;

btn.addEventListener('click',function(){

btn.disabled=true;

//btn.innerHTML='还剩下10秒';//button比较特殊，是用HTML修改的

var timer=setInterval(function(){

if(time==0){

clearInterval(timer);

btn.disabled=false;

btn.innerHTML='发送';

time=10;//这个10 需要重新开始发送

}else{

btn.innerHTML='还剩下'+time+'秒';

time--;

}

},1000)

})

</script>

</body>

this指向

this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，现阶段，我们先了解几个this指向

全局作用域或则普通函数中this指向全局对象window(注意定时器里面的this指向window)

方法调用中谁调用this指向谁

构造函数中this指向构造函数实例

<body>

    <button>点击</button>

    <script>

        // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

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

        console.log(this);

        function fn() {

            console.log(this);

        }

        window.fn();

        window.setTimeout(function() {

            console.log(this);

        }, 1000);

        // 2. 方法调用中谁调用this指向谁

        var o = {

            sayHi: function() {

                console.log(this); // this指向的是 o 这个对象

            }

        }

        o.sayHi();

        var btn = document.querySelector('button');

        // btn.onclick = function() {

        //    console.log(this); // this指向的是btn这个按钮对象

        // }

        btn.addEventListener('click', function() {

                console.log(this); // this指向的是btn这个按钮对象

            })

            // 3. 构造函数中this指向构造函数的实例

        function Fun() {

            console.log(this); // this 指向的是fun 实例对象

        }

        var fun = new Fun();

    </script>

</body>

JS执行机制 

单线程

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

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

同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程

于是，JS 中出现了同步和异步。

同步:

前一个任务结束后再执行后一个任务

异步：

在做这件事的同时，你还可以去处理其他事情

同步任务

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

异步任务

JS中的异步是通过回调函数实现的

异步任务有以下三种类型

普通事件，如click,resize等

资源加载，如load,error等

定时器，包括setInterval,setTimeout等

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

先执行执行栈中的同步任务

异步任务(回调函数)放入任务队列中

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

同步任务放在执行栈中执行，异步任务由异步进程处理放到任务队列中，执行栈中的任务执行完毕会去任务队列中查看是否有异步任务执行，由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）

location对象

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

url:

==统一资源定位符（uniform resouce locator）==是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

url 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

location对象属性

重点记住： href和search

实例：5s后自动跳转页面

    <script>

        //1.获取元素   

        var hour = document.querySelector('.hour'); //小时的黑色盒子

        var minute = document.querySelector('.minute'); //分钟的黑色盒子

        var second = document.querySelector('.second'); //秒数的黑色盒子

        var inputTime = +new Date('2022-6-8 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 % 24); //分

            m = m < 10 ? '0' + m : m;

            minute.innerHTML = m;

            var s = parseInt(times % 24); //秒

            s = s < 10 ? '0' + s : s;

            second.innerHTML = s;

        }

    </script>

</body>

案例分析 两个页面之间的交互

location对象的方法

<body>

    <button>点击</button>

    <script>

        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {

            // 记录浏览历史，所以可以实现后退功能

            // location.assign('http://www.itcast.cn');

            // 不记录浏览历史，所以不可以实现后退功能

            // location.replace('http://www.itcast.cn');

            location.reload(true);

        })

    </script>

</body>

获取url参数

navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性

我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

下面前端代码可以判断用户是用哪个终端打开页面的，如果是用 PC 打开的，我们就跳转到 PC 端的页面，如果是用手机打开的，就跳转到手机端页面

history对象

navigator 对象包含有关浏览器的信息，它有很多属性

我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

下面前端代码可以判断用户是用哪个终端打开页面的，如果是用 PC 打开的，我们就跳转到 PC 端的页面，如果是用手机打开的，就跳转到手机端页面

<body>

    <a href="list.html">点击我去往列表页</a>

    <button>前进</button>

    <script>

        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {

            // history.forward();

            history.go(1);

        })

    </script>

</body>

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343

推荐阅读更多精彩内容

  • js总结（！！！）
    简述JavaScript起源起源于美国的Netscape公司，原名为LiveScript，后改为JavaScrip...
    3ab670b99521阅读 2,985评论 0赞 0
  • JS基础
    1. 注释 2. 规定 3. 字面量 4. 变量 5. 标识符 6. 数据类型 前5个是基本数据类型，Object...
    cxq要努力阅读 314评论 0赞 0
  • js3
    相等运算符 相等运算符用来比较两个值是否相等， 如果相等会返回true，否则返回false 使用 == 来做相等运...
    星河入怀fd阅读 170评论 0赞 0
  • JS（下）
    十二、JavaScript的DOM特效 在web浏览器上，window对象是一个全局对象，代表web浏览器中一个打...
    刘远舟阅读 365评论 0赞 1
  • JavaScript中Dom0713
    JavaScript中Dom 1.基本概念 1.1 什么是window? window：是一个全局对象, 代表浏览...
    煤球快到碗里来阅读 244评论 0赞 0