一幅长文细学JavaScript（四）——一幅长文系列

4 JavaScript BOM

4.1 BOM概述

浏览器对象模型

BOM也称为浏览器对象模型，它不存在官方标准。
现代浏览器几乎实现了JS交互相同的方法和属性，因此它经常作为BOM的方法和属性被提到。

4.2 Window对象

4.2.1 弹出框

弹出框类型

弹出框类型	说明	示例	返回值
警告框	用户需要单击确定来继续	window.alert(“sometext”)	void
确认框	用户需要单击确定或取消来继续执行	window.confirm(“sometext”)	true或false
提示框	用户需要单击确定或取消来继续执行	window.prompt(“sometext”,“defaultText”)	输入值或NULL

4.2.2 定时事件

定时器概念

说明：window对象运行以指定的时间间隔执行代码，这些时间间隔称为定时事件。

操作定时器

作用	示例	说明
开启定时器	setInterval(函数,间隔时间)	每隔一段时间调用函数，间隔时间为毫秒，一旦开启不会自动停止
清除定时器	clearInterval(定时器变量)	去除定时器
开启延时器	setTimeout(函数，间隔时间)	延迟一段时间后调用函数，间隔时间为毫秒，函数只执行一次

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
    <div id = "div1">测试内容1div>
    <button id = "btn1">测试按钮1——开始定时器button>
    <button id = "btn2">测试按钮2——结束定时器button>

    
    <div id = "div3">测试内容3div>
    <button id = "btn3">测试按钮3——开始延时器button>
    <script>
        /*-------------------测试定时器-------------------*/
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var div1 = document.getElementById('div1');
        
        var timer;//声明定时器对象
        var number = 0;//设置一个变量
        btn1.onclick = function(){
            timer = setInterval(function(){
                div1.innerText = number++;
            },1000)
        }

        btn2.onclick = function(){
            clearInterval(timer);
        }

        /*-------------------测试延时器-------------------*/
        var div3 = document.getElementById('div3');
        var btn3 = document.getElementById('btn3');
        btn3.onclick = function(){
            setTimeout(function()
            {div3.innerText = '测试内容3已经改变';
            },1000);
        }
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

4.2.3 同步与异步

单线程JS

JS的一大特点就是单线程，也就是同一个时间只能做一件事。比如我们对某个DOM元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除。

同步和异步

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

同步：前一个任务结束后再执行后一个任务，程序的执行顺序和任务的排列顺序一致。
异步：在做一件事时这件事会很费时，我们可以做这件事的同时去处理其他事。

开启多线程

开启多线程的方式是利用回调函数。

<script>
        console.log(1);

        setTimeout(function(){
            console.log(3);
        },3)

        console.log(2);
    </script>
1
2
3
4
5
6
7
8
9

一个问题

下面代码的输出结果仍然是1,2,3，这是为何？不是已经设置延时器的延时为0了吗。

<script>
        console.log(1);

        setTimeout(function(){
            console.log(3);
        },0)

        console.log(2);
    </script>
1
2
3
4
5
6
7
8
9

同步任务和异步任务

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

异步任务：JS的异步通过回调函数实现。异步任务相关的回调函数添加到任务队列（也叫消息队列）中。

JS执行机制

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

4.3 Location对象

4.3.1 基本概念

Location对象

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

URL

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

URL格式组成

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

组成	说明
protocol	通信协议，常用的http，ftp，maito等
host	主机（域名）
port	端口号，可选，省略时使用方案的默认端口
path	路径，一般用于表示主机上的一个目录或文件地址
query	参数，以键值对的形式通过&符号分隔开
fragment	片段，#后面内容常见于链接或锚点

4.3.2 常见属性

console.log(location);          //输出location对象
console.log(location.href);     //输出当前地址的全路径地址
console.log(location.origin);   //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host);     //输出当前地址的主机
console.log(location.port);     //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search);   //输出当前地址的?后边的参数部分
1
2
3
4
5
6
7
8
9

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        div{
            margin: 0 auto;
            background-color: pink;
            text-align: center;
            margin-top:40px;
            height: 100px;
            width: 300px;
        }
    style>
head>
<body>
    <div>暂时找不到页面，五秒钟之后跳转到百度首页div>
    <script>
        var div = document.querySelector('div');
        window.setTimeout(function(){
            location.href = "https://www.baidu.com/";
        },3000)
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色

7z

0星超过10%的资源 910KB

下载

4.3.3 常见方法

location对象方法	返回值
location.assign()	和href一样可以跳转页面，也称为重定向页面
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5，如果参数为true，则强制刷新，相当于ctrl+f5

DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        window.addEventListener("load",function(){
            var btn1 = document.querySelector('.btn1');
            var btn2 = document.querySelector('.btn2');
            var btn3 = document.querySelector('.btn3');

            btn1.onclick = function(){
                location.assign("https://www.baidu.com")
            }

            btn2.onclick = function(){
                location.replace("https://www.baidu.com")
            }

            btn3.onclick = function(){
                location.reload();
            }

        })
    script>

    <button class = "btn1">跳转页面button>
    <button class = "btn2">替换页面button>
    <button class = "btn3">刷新页面button>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

4.4 navigator对象

4.4.1 基本概念

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

4.4.2 判断终端

下面的代码可以判断用户使用哪个终端打开页面，并实现跳转。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowerNG|WebOS|Symbian|Windows Phone)/i))){
	window.location.href = "";//手机
}else{
	window.location.href = "";//电脑
}
1
2
3
4
5

4.5 history对象

4.5.1 基本概念

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

4.5.2 常见方法

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是1则前进一个页面，如果是-1则后退一个页面

相关阅读:
MinIO使用
航空航天巨头罗尔斯·罗伊斯采用“混合方法”研究量子计算
《大数据之路：阿里巴巴大数据实践》-第3篇数据管理篇 -第13章计算管理
5(6)-羧基四甲基罗丹明，CAS号：150347-56-1
【JavaWeb】之Tomcat介绍、安装与使用
C语言刷题（Day1）
Pytorch: Torchvision、torchaudio 和 torch的关系
使用canvas做了一个最简单的网页版画板，5分钟学会
C++中(封闭)类的定义及使用特性---知识要点篇1
大数据在电力行业的应用案例100讲（二十八）-电力营销系统规则配置的实现与应用

原文地址：https://blog.csdn.net/chengyuhaomei520/article/details/126359826