标签：定时器 console log 对象 JavaScript window location BOM

BOM

1 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

2 BOM的结构

在 BOM 中包含了 DOM，整个 BOM 结构如下：

3 window对象

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

1. 它是 JavaScript 访问浏览器窗口的一个接口对象。
2. 它是一个全局对象，所有定义在全局作用域的变量、函数都是它的属性或方法。

由于所有全局属性和方法都属于 window 对象，因此在调用时是可以省略 window 的。如调用 alert() 方法时，可以写成 window.alert()，但通常都会直接调用 alert() 方法即可。

    function myFunction1(){
        console.log('hello');
    }
    window.myFunction1();
    console.log(window)

4 常用的方法

4.1 alert()

用于在页面中弹出一个警告框，一般用于程序调试。

使用语法：

window.alert(提示信息);

示例：

alert('start')
window.alert('end')

4.2 confirm()

消息确认提示框，一般用于删除时进行确认，防止误删除。这个方法可以给定提示信息，执行后会返回一个布尔类型的值。

使用语法：

var 返回值 = confirm(提示信息);

示例：

var f = confirm('你确定要删除么？')
console.log(f);

if (confirm('你确定要删除么？删除后不能恢复！')) {
    console.log('已经成功删除！')
}

说明：confirm() 方法执行后，会返回一个布尔类型的值，根据这个值我们可以进行相应的操作。

5 常用的事件

5.1 页面加载

事件	说明
window.onload = function(){} window.addEventListener('load', function(){})	传统方式加载 监听事件方式加载
window.addEventListener('DOMContentLoaded', function(){})	监听事件方式加载

window.onload 是页面加载事件，当文档内容（包括图像、脚本文件、CSS 样式文件等）完全加载完成后会触发该事件——即调用处理函数。window.onload 是传统事件注册方式，只会调用一次，如果在页面中写了多个该事件，只会执行最后一个加载事件。

使用示例：

window.onload = function () {
    console.log('页面加载完成！')
};

5.2 调整窗口大小

当调整页面窗口大小时，会触发 onresize 事件，该事件语法如下。

window.onresize = function(){
    
}

注意：

1. 只要窗口大小发生像素变化时就会触发此事件。
2. 当使用这个事件来实现响应式布局时可以使用 window.innerWidth 属性获取当前屏幕宽度。

演示案例：

window.onresize = function () {
	console.log('当前窗口宽度为：' + window.innerWidth);
	console.log('当前窗口高度为：' + window.innerHeight);
};

6 定时器方法

window 对象中提供了两种定时器方法。

• setTimeout()
• setInterval()

6.1 setTimeout()

setTimeout() 定时器是延迟指定时间（毫秒数）就会执行回调函数。

语法如下：

window.setTimeout(回调函数, [延迟执行毫秒数])

使用此定时器需要注意如下事项：

1. window 对象可以省略
2. 回调函数可以直接写在定时器方法内也可以只写函数名
3. 延迟执行时间的单位是毫秒，默认为 0 表示立即执行回调函数
4. 一般会给定时器指定一个名称

使用示例：

<script>
    console.log('你好')
    setTimeout(function(){
        console.log('hello')
    }, 2000)
    console.log('大家上午好！')

    console.log('-----------');

    function fn(){
        console.log('回调函数的输出');
    }
    setTimeout(fn, 2000);
</script>

需求：希望点击按钮后，结束定时器的运行。

<script>
    // 点击按钮时结束定时器运行
    var timer = null; // 句柄对象，用于获取定时器对象
    function btnOnClick(){
        // 删除定时器对象
        clearTimeout(timer);
    }

    var index = 0;
    function fn() {
        console.log(index++);
        timer = setTimeout(fn, 2000);
    }
    timer = setTimeout(fn, 2000);
</script>

说明：我们可以在定义定时器对象时，给它指定一个引用名称，通过这个引用名称，我们就可以根据自己的业务逻辑来结束这个定时器的运行。

结束定时器的运行需要使用 window 对象中的 clearTimeout() 方法，这个方法的参数就是定时器的引用对象。

6.2 setInterval()

setTimeout() 是指定时间之后执行，如果想每隔多少时间就执行一次，就需要使用 setInterval() 定时器了。

语法如下：

window.setInterval(回调函数, [间隔执行时间毫秒数])

示例：

setInterval(function () {
    console.log('hello');
}, 2000);

使用此定时器需要注意如下事项：

1. window 对象可以省略
2. 回调函数可以直接写在定时器方法内也可以只写函数名
3. 间隔执行时间的单位是毫秒，默认为 0 表示立即执行回调函数
4. 一般会给定时器指定一个名称
5. 第一次执行也是延迟指定毫秒之后执行，之后是每隔指定毫秒数就执行一次

说明：上例中会每隔 2 秒就会执行输出一次 hello 字符串。

setTimeout 和 setInterval 的区别：

setTimeout 是延迟指定的毫秒数后执行一次，而 setInterval 是延迟指定的毫秒数后反复执行。

如果希望 setTimeout 实现 setInterval ，那么需要在 setTimeout 的回调函数中再次调用自己才可以。

可以给 setInterval 定义一个名称，同时可以利用这个名称来结束定时任务的执行。

<script>
    // 需求：当 index 的值达到 5 时，就结束。
    var timer = null;
    var index = 1;
    timer = setInterval(function () {
        if (index === 5) clearInterval(timer);
        console.log(index++);
    }, 1000);
</script>

7 location对象

7.1 什么是 location

window 对象中提供了 location 属性，该属性用于获取或设置浏览器地址栏中的 URL 值。这个获取或设置属性后会返回一个对象，所以将这个属性称为 location 对象。

URL（Uniform Resource Locator）叫统一资源定位符，是互联网上标准资源的地址。它由以下几部分组成。

组成	说明
protocol	协议，如：http、https、ftp等
host	主机（域名），如：www.baidu.com
port	端口号，如：80、8080、3306等
path	路径，由零个或多个'/'隔开的字符串，一般表示主机上一个目录或文件
query	参数，以键值对形式显现，多个使用 & 号连接
fragment	片段，以 # 号后面内容，常用于锚点

示例：

<form>
    <input type="text" name="account" placeholder="账号">
    <input type="password" name="pwd" placeholder="密码">
    <input type="submit" value="提交">
</form>
<script>
    console.log(location);
    console.log(location.protocol); // 协议
    console.log(location.host);
    console.log(location.hostname + ', '  + location.port);
    console.log(location.href);
    console.log(location.search);
</script>

7.2 location 属性

location 对象中提供了以下属性。

属性	返回值
href	获取或设置 URL
host	返回主机名
port	返回端口号
pathname	返回路径
search	返回参数
hash	返回片段

示例：把请求参数保存到对象中。如：把 user=xaoupeng&pwd=123456 保存到一个对象中。

<form>
    <input type="text" name="account" placeholder="账号" value="xaoupeng">
    <input type="password" name="pwd" placeholder="密码" value="123">
    <input type="text" name="code" placeholder="验证码" value="abc1">
    <input type="submit" value="提交">
</form>
<script>
    // 需求：把请求参数保存到对象中。如：把 user=xaoupeng&pwd=123 保存到一个对象中。
    function getSearchString() {
        // 1. 通过 location 的 search 属性来获取请求的参数列表
        // '?account=xaoupeng&pwd=123'
        var queryString = location.search;
        // 1.1 判断请求参数是否存在
        queryString = queryString.length > 0 ? queryString : '';
        // 2. 去掉字符串前的 ? 号
        // 'account=xaoupeng&pwd=123'
        queryString = queryString.substr(1);
        // console.log(queryString);

        // 3. 把多参数进行切割
        // ['account=xaoupeng', 'pwd=123']
        var obj = {};
        if (queryString.indexOf('&') !== -1) {
            var parameters = queryString.split('&')

            // 4. 遍历数组，然后再把参数名和参数值进行切分，并把它赋给对象。
            var items = null;
            for (var i = 0; i < parameters.length; i++) {
                //console.log(parameters[i]);
                items = parameters[i].split('=')
                //console.log(items);
                obj[items[0]] = items[1]
            }
        }
        //console.log(obj);
        return obj;
    }
    var result = getSearchString();
    console.log(result);
</script>

7.3 location 方法

除了上面的属性外，location 中还提供了如下方法。

方法	返回值
assign()	跟 href 一样可以跳转页面
replace()	替换当前页面，不记录历史无法进行后退
reload()	重新加载页面，相当于按 f5，如果参数为 true，相当于按 ctrl + f5

方法使用示例：

<script>
    // location.href = 'https://www.baidu.com/'

    location.assign('https://www.baidu.com')
    location.replace('a.html')

    location.reload();
</script>

8 navigator 对象

navigator 对象包含有关浏览器的信息。

查看 navigator 对象所有信息：

console.log(navigator)

下面以判断浏览器是否安装了某个插件为例，来说明其用法。

在 navigator 对象众多属性中，有一个属性叫 Plugins，里面存放的就是插件信息，可通过如下方式进行查看：

console.log(navigator.plugins);

下面通过封装一个方法，来判断是否安装了某个插件，如果安装则返回 true，否则返回 false。

<script>
    function hasPlugin(name) {
        name = name ? name.toLocaleLowerCase() : '';
        console.log('name = ' + name);
        var plugins = navigator.plugins;
        for (var i = 0; i < plugins.length; i++) {
            //console.log(typeof plugins[i]);
            console.log(plugins[i].name);
            return plugins[i].name.toLocaleLowerCase().indexOf(name) !== -1 ? true : false;
        }
    }
    var r = hasPlugin('pdf')
    console.log(r);
</script>

在 navigator 对象中还有一个叫 userAgent 属性比较常用。它一般用于获取浏览器的信息。

该属性可以返回由客户机发送服务器的 user-agent 头部的值。

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

 //console.log(navigator.userAgent)
    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 = "https://m.xxx.com";     //手机
    } else {
        //window.location.href = "https://www.xxx.com";     //电脑
    }

9 history 对象

window 对象还提供了一个 history 对象，它与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。方法如下表所示。

方法	作用
back()	后退
forward()	前进
go(参数)	前进和后退，参数为正整数表示前进，参数为负整数表后退

示例：

<a href="b.html">b.html</a>
<script>
    console.log('-----------')
    //history.forward();
    history.go(1)
</script>


<a href="a.html">a.html</a>
<script>
    //history.back();
    history.go(-1)
</script>

标签：定时器,console,log,对象,JavaScript,window,location,BOM
来源： https://www.cnblogs.com/tothk/p/15824921.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。