WebAPI之BOM操作和JS执行机制

WebAPI之BOM操作和JS执行机制

  • WebAPI之BOM操作和JS执行机制
    • 1. BOM
      • 1.1 BOM介绍
      • 1.2 BOM的构成
        • 1.2.1 顶级对象window
        • 1.2.2 location对象
          • 1. url介绍:
          • 2. location的对象属性值:
        • 1.2.3 navigator对象
        • 1.2.4 history对象
      • 1.3 顶级对象window
        • 1.3.1 页面(窗口)加载事件(2种)
        • 1.3.2 调整窗口大小事件
        • 1.3.3 定时器(两种)
          • 1. setTimeout()
          • 2. setInterval() 闹钟定时器
          • 3. 清除定时器
      • 1.4 this指向问题
    • 2. JS执行机制
      • 2.1 JS 是单线程
      • 2.2 同步任务和异步任务
      • 2.3 JS执行机制(事件循环)

WebAPI之BOM操作和JS执行机制

1. BOM

BOM与DOM的区别:
WebAPI之BOM操作和JS执行机制_第1张图片

1.1 BOM介绍

BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。

1.2 BOM的构成

BOM 比 DOM 更大,它包含 DOM。
WebAPI之BOM操作和JS执行机制_第2张图片

1.2.1 顶级对象window
<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;
        console.log(window.name);
    script>
1.2.2 location对象

Location 对象是浏览器当前显示的文档的 URL(或位置)。但是 Location 对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。

1. url介绍:

WebAPI之BOM操作和JS执行机制_第3张图片
案例:获取URL参数

    <div></div>
	<script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉?  substr('起始的位置',截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
2. location的对象属性值:

WebAPI之BOM操作和JS执行机制_第4张图片
location对象的常见方法:

    <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>
1.2.3 navigator对象

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

当移动端和pc端设备查看网页时,显示不同规格的页面:

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 = "";     //电脑
 }
1.2.4 history对象

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

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

1.3 顶级对象window

1.3.1 页面(窗口)加载事件(2种)

第1种:
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
第2种:
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
注意:
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适。

代码如下:

<script>
        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);
        })
    script>
1.3.2 调整窗口大小事件

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

注意:

  1. 只要窗口大小发生像素变化,就会触发这个事件。

  2. 我们经常利用这个事件完成响应式布局window.innerWidth 当前屏幕的宽度

    <script>
        // 注册页面加载事件
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
        	// 注册调整窗口大小事件
            window.addEventListener('resize', function() {
                // window.innerWidth 获取窗口大小
                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div></div>
1.3.3 定时器(两种)

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

  • setTimeout()

  • setInterval()

普通函数是按照代码顺序直接调用。
回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。例如:定时器中的调用函数,事件处理函数,也是回调函数。
以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。

1. setTimeout()
    <script>
        // 回调函数是一个匿名函数
         setTimeout(function() {
             console.log('时间到了');

         }, 2000);
        function callback() {
            console.log('爆炸了');
        }
		// 回调函数是一个有名函数
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
    </script>
2. setInterval() 闹钟定时器
<script>
        // 1. setInterval 
        // 语法规范:  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');

        }, 1000);
        // 2. setTimeout  延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
    script>
3. 清除定时器
1.清除setTimeout()定时器
<button>点击停止定时器button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');

        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    script>
2.清除setInterval()定时器
	<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>

1.4 this指向问题

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

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

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

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

    <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.addEventListener('click', function() {
                console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象
            })
        // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象
        }
        var fun = new Fun();
    </script>

2. JS执行机制

2.1 JS 是单线程

WebAPI之BOM操作和JS执行机制_第5张图片

2.2 同步任务和异步任务

WebAPI之BOM操作和JS执行机制_第6张图片

2.3 JS执行机制(事件循环)

1.回调函数:
WebAPI之BOM操作和JS执行机制_第7张图片
2.异步执行:
WebAPI之BOM操作和JS执行机制_第8张图片
3.事件循环机制:
WebAPI之BOM操作和JS执行机制_第9张图片


<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>Documenttitle>
head>

<body>
    <script>
        // 第一个问题
        // console.log(1);
        // setTimeout(function() {
        //     console.log(3);
        // }, 1000);
        // console.log(2);
        // 2. 第二个问题
        // console.log(1);
        // setTimeout(function() {
        //     console.log(3);
        // }, 0);
        // console.log(2);
        // 3. 第三个问题
        console.log(1);
        document.onclick = function() {
            console.log('click');
        }
        console.log(2);
        setTimeout(function() {
            console.log(3)
        }, 3000)
    script>
body>

html>

你可能感兴趣的:(WebAPI,前端,javascript)