JavaScript学习手册十六：浏览器对象模型

你的名字 2023-01-16 06:56 208阅读 0赞

### 浏览器对象模型 ###

*  1.定时器
 *   *  任务描述
     *  相关知识
     *   *  (1)设置定时器
         *  （2）取消定时器
         *  代码文件
 *  2.循环定时器
 *   *  任务描述
     *  相关知识
     *   *  （1）定时
         *  （2）取消定时
         *  代码文件
 *  3.location对象
 *   *  任务描述
     *  相关知识
     *   *  （1）页面的跳转
         *  （2）location对象的其它属性
         *  代码文件
 *  4.对话框
 *   *  任务描述
     *  相关知识
     *   *  （1）警告框
         *  （2）确认框
         *  （3）输入框
         *  代码文件
 *  5.窗口
 *   *  任务描述
     *  相关知识
     *   *  （1）打开浏览器的窗口
         *  （2）关闭窗口
         *  代码文件

# 1.定时器 #

## 任务描述 ##

1.本关任务：**学习设置和取消定时器**。

2.具体要求如下：

*  第一步，设置执行一次的定时任务timerTask()，延迟为2000毫秒，任务的唯一标识赋值给变量timeId。

## 相关知识 ##

*  JavaScript中定时器的作用是`在指定的时间或者时间间隔之后执行函数，`可以用来对网页上的数据做实时的更新，比如网页上的北京时间的更新：  
    ![在这里插入图片描述][20210424205111803.png]  
    这个可以通过每隔一秒执行一次时间更新函数来实现。
 *  定时器的实现有两种方式，一个是`window.setTimeout()`函数，一个是`window.setInterval()`函数，本关讲解第一种。

### (1)设置定时器 ###

`window.setTimeout(a,b)`用来指定函数a在延迟b毫秒时间后执行，即在`window.setTimeout(a,b)`这句话开始执行的b毫秒之后，再执行a函数。

比如下面的例子中，我们点击页面上的文字，经过4秒的延迟后弹出警告框：

<body>
        <p onclick="al()">
            单击此处4秒后弹出警告框
        </p>
        <script>
        var id;
        function al() { 
            id = window.setTimeout(showAlert,4000);
        }
        function showAlert() { 
            window.alert("警告框");
        }
    </script>
    </body>

点击文字会触发函数`a1()`，在这个函数里面设置了一个定时任务`showAlert()`，定时的时间为4秒之后。即：点击文字4秒之后会执行`showAlert()`函数。

效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]  
【截图小能手，(●’◡’●)】

### （2）取消定时器 ###

*  上面代码里的变量id是用来唯一标识这个定时任务的，它的作用是，作为函数`window.clearTimeout(id)`的参数，而这个函数是用来在定时任务发生之前关闭定时任务，这好比，早晨我们在闹钟响之前关掉闹钟。

对上面的例子稍微改造，在定时任务开启之前，通过调用`window.clearTimeout(id)`关闭定时任务，代码如下：

<body>
        <p onclick="al()">
            单击此处4秒后弹出警告框
        </p>
        <p onclick="a2()">
            单击此处取消警告框的弹出
        </p>
        <script>
        var id;
        function al() { 
            id = window.setTimeout(showAlert,4000);
        }
        function showAlert() { 
            window.alert("警告框");
        }
        function a2() { 
            window.clearTimeout(id);
        }
    </script>
    </body>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
先点击上面一行文字，触发了函数a1()，预定了一个4秒之后执行的定时任务showAlert()。再点击下面一行文字，执行了函数a2()，取消了这个定时任务，这样在4秒之后不会弹出警告框，这是它和上面的例子的区别。

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p onclick="handleTimer()">set timer then undo</p>
        <script>
            var timeId;
            function timerTask() { 
                console.log("this is timer task");
            }
            function handleTimer() { 
    			//请在此处编写代码
    			/********** Begin **********/
                timeid = window.setTimeout(timerTask,2000);
                
                
    			/********** End **********/
            }
        </script>
    </body>
    </html>

# 2.循环定时器 #

## 任务描述 ##

1.本关任务：**取消指定的定时任务**。

2.具体要求如下，请按步骤操作：

*  取消定时任务timerTask1()，要求使用本关介绍的方法。

## 相关知识 ##

上一关讲的定时器只会执行一次，好比早上的闹钟只会响一次，这个在很多情况下显然是不可接受的。本关讲的就是一种循环定时器，它会在指定的时间间隔点上重复执行函数。

### （1）定时 ###

`setInterval(a,b)`：每隔b毫秒，执行一次a函数。

下面的例子，每隔一秒钟，更新一下网页上的时间：

<body>
        <p onclick="updateTime()">
            开始更新时间
        </p>
        <p id="timeContainer">
        </p>
        <script>
        var id;
        function updateTime() { 
            id = window.setInterval(showTime,1000);
        }
        function showTime(){         document.getElementById("timeContainer").innerText = new Date();
        }
    </script>
    </body>

点击“开始更新时间”，触发`updateTime()`函数，该函数开启一个循环定时任务`showTime()`，`showTime()`的作用是**更新网页上显示的时间。**

效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]

### （2）取消定时 ###

与上一关类似，`window.clearInterval(id)`也是停止定时任务，其中的id就是上面例子里面的变量id，这个是为了唯一标识某一个定时任务，防止错误的取消了别的定时任务。

修改一下上面的代码，增加停止时间更新的功能：

<body>
        <p onclick="updateTime()">
            开始更新时间
        </p>
        <p onclick="stopTime()">
            停止更新时间
        </p>
        <p id="timeContainer">
        </p>
        <script>
        var id;
        function updateTime() { 
            id = window.setInterval(showTime,1000);
        }
        function showTime() { 
            document.getElementById("timeContainer").innerText = new Date();
        }
        function stopTime() { 
            window.clearInterval(id);
        }
    </script>
    </body>

点击“停止更新时间”，触发`stopTime()`函数，在函数里面会取消定时任务`showTime()`。

其效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p onclick="task1()">this is task onea</p>
        <p onclick="task2()">this is task two</p>
        <p onclick="removeTask1()">try to remove task one</p>
        <script>
            var timeId1;
            var timeId2;
            function timerTask1() { 
                console.log("timerTask1!");
            }
            function timerTask2() { 
                console.log("timerTask2!");
            }
            function task1() { 
                timeId1 = window.setInterval(timerTask1,2000);
            }
            function task2() { 
                timeId2 = window.setInterval(timerTask2,1500);
            }
            function removeTask1() { 
    			//请在此处编写代码
    			/********** Begin **********/
                window.clearInterval(timeId1);
                
    			/********** End **********/
            }
        </script>
    </body>
    </html>

# 3.location对象 #

## 任务描述 ##

1.本关任务：**读取主机名以及实现页面跳转**。

2.具体要求如下：

*  第一步，获取location对象，赋值给变量loc；
 *  第二步，利用loc打印出当前页面地址的主机名；
 *  第三步，利用loc实现跳转到https://www.educoder.net/forums/categories/all?order=newest；
 *  字符串参数放在英文双引号内。

## 相关知识 ##

location对象就是`window.location`，记载了浏览器当前所在的窗口的URL（统一资源定位符）信息，它常常被用来实现网页的跳转。

### （1）页面的跳转 ###

location.href属性表示当前窗口所在页面的地址，比如，如果我们在本网站的首页（`https://www.educoder.net/`），打印window.location.href：

<body>
        <script>
            console.log(window.location.href);
        </script>
    </body>

打印出来的结果是：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]  
这个结果应当和浏览器地址栏上内容一样。

`window.location.href`还是可写的，如果把它设置为一个新的地址，当前窗口将立即打开这个新的地址，这是实现页面跳转的一种方式。比如下面的例子：

<body>
        <p onclick="toNew()">
            点我调到EduCoder首页
        </p>
        <script>
            function toNew() { 
                window.location.href = "https://www.educoder.net";
            }
        </script> 
    </body>

点击页面上的文字，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]

### （2）location对象的其它属性 ###

假设，当前浏览器地址栏的内容是：`https://www.educoder.net:8080/shixun.html?tab=1`。我们用一个表格看一下location对象的所有属性：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]  
以下用一个例子打印所有这些属性，假设我们在`https://www.educoder.net:8080/shixun.html?tab=1`这个页面：

<body onload="printInfo()">
        location attribute
        <script>
            function printInfo() { 
                var loc = window.location;
                console.log("host:"+loc.host);
                console.log("hostname:"+loc.hostname);
                console.log("pathname:"+loc.pathname);
                console.log("port:"+loc.port);
                console.log("protocal:"+loc.protocal);
                console.log("search:"+loc.search);
            }
        </script>
    </body>

载入页面后，打印结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p onclick="openNew()">Click me to new page!</p>
        <script>
            function openNew() { 
    		//请在此处编写代码
    		/********** Begin **********/
            
            var loc = window.location;
            console.log(loc.hostname);
            loc.href = "https://www.educoder.net/forums/categories/all?order=newest";
    		/********** End **********/
            }
        </script>
    </body>
    </html>

# 4.对话框 #

## 任务描述 ##

1.本关任务：**练习输入型对话框的使用**。

2.具体要求如下：

*  第一步：弹出一个输入型对话框（输入框），用户的输入结果赋值给变量result，输入框提示语为your name，输入框默认值为Xiao Ming；
 *  第二步：使用result判断用户的输入是否为null（不是字符串null，是表示空的null），如果是，在控制台打印name cannot be null；
 *  字符串类型的参数用""包含在内。

## 相关知识 ##

对话框就是在浏览器页面上再弹出一个小的窗口，用于和用户直接互动，window对象的`alert()`、`confirm()`和`prompt()`三个方法都是用来显示对话框的。

### （1）警告框 ###

`window.alert(msg)`弹出一个警告框，表示向用户发送一条通知。前面的相关知识已经多次讲过alert()的用法。

需要注意的是，`alert()`方法弹出警告框后，其后的代码会暂停执行，直到警告框被关闭，即：alert()方法是阻塞的。

下面的例子中，关闭警告框后，控制台才会打印信息：

<body>
        <p onclick="showAlert()">点我弹出警告框</p>
        <script>
            function showAlert() { 
                window.alert("先弹出一个警告框");
                console.log("然后才能在控制台打印信息");
            }
        </script>
    </body>

其效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]

### （2）确认框 ###

`window.confirm(msg)`弹出一个确认框，msg是需要用户确认的信息，用户在弹出的框里面选择确认或者取消后，会返回true或者false。

<body>
        <p onclick="showConfirm()">点我弹出确认框</p>
        <script>
        function showConfirm() { 
            var result = window.confirm("确定今天是周五？");
            console.log(result);
        }
        </script>
    </body>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]

### （3）输入框 ###

`window.prompt(a,b)`弹出一个输入框，供用户输入关键信息。其中a是输入框的提示语，b是输入框里面默认的内容。

如果用户不输入，直接点击确认，返回b。如果点击取消，返回null。

下面是一个例子：

<body>
        <p onclick="showPrompt()">点我弹出输入框</p>
        <script>
            function showPrompt() { 
                var result = window.prompt("请输入姓名：", "Jack");
                console.log(result);
            }
        </script>
    </body>

效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 10]  
如动态图所示，不输入点确定返回默认的内容；直接点取消返回null。【本是个动态图，我只是截图了~】

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p onclick="inputName()">Click to input name!</p>
        <script>
            function inputName() { 
                var result;
    			//请在此处编写代码
    			/********** Begin **********/
                var result = window.prompt("your name：", "Xiao Ming");
                if(result==null){ 
                    console.log("name cannot be null");
                }
                
    			/********** End **********/
            }
        </script>
    </body>
    </html>

# 5.窗口 #

## 任务描述 ##

1.本关任务：**练习窗口的操作**。

2.具体要求如下：

*  第一步，打开一个窗口，它的文档的地址是Demo.html，name属性是窗口名字window\_name，specs和replace不用设置。将打开的窗口赋值给变量myWindow；
 *  字符串参数放在英文双引号内。

## 相关知识 ##

浏览器的一个标签页叫做一个窗口，window对象可以操作浏览器窗口的打开与关闭。

### （1）打开浏览器的窗口 ###

`window.open(url,name,specs,replace)`用来打开一个浏览器的窗口，它有四个参数：

*  url表示窗口里面的文档的地址；
 *  name有两种情况。
 *  如果name里面是窗口的名字。浏览器会先判断这个窗口是否已经打开。已经打开则用新的url里面的文档替换这个窗口里面原来的文档，反映到浏览器上是不会有新的标签页打开，但是一个已存在的标签页会刷新。没有打开则打开一个新的窗口，并且载入url里面的文档。
 *  如果name是`_blank、_self`里面中的任何一个，它的含义如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 11]
 *  specs是用来控制新窗口的尺寸等特征，比如值为`width=200,height=100`时，表示新窗口宽度为200px，高度为100px。
 *  replace用来控制新的窗口在浏览器的浏览历史里面如何显示。为`true`表示装载到窗口的url替换掉浏览历史中的当前条目；为`false`表示装载到窗口的url创建一个新的条目。

下面的例子展示了这些参数的具体用法：

<body>
        <p onclick="openNewWindow()">name是一个窗口的名字，打开一个新的窗口，载入新的文档</p>
        <p onclick="openOldWindow()">name是一个窗口的名字，打开已存在的窗口，替换掉里面的文档</p>
        <p onclick="blankWindow()">name是一个target属性，值为_blank</p>
        <p onclick="selfWindow()">name是一个target属性，值为_self</p>
        <script>
            function openNewWindow() { 
                window.open("Demo1.html", "windowName");
            }
            function openOldWindow() { 
                window.open("Demo2.html", "windowName");
            }
            function blankWindow() { 
                window.open("Demo1.html", "_blank");
            }
            function selfWindow() { 
                window.open("Demo1.html", "_self");
            }
        </script>
    </body>

效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 12]  
如上所示，

*  第一种情况，name是一个窗口的名字，因为这个窗口还没有打开，所以会打开一个新的窗口，并载入url文档。
 *  第二种情况，name是一个窗口的名字，因为这个窗口已打开，所以新的文档会替换掉原来的文档。
 *  第三种情况，name值为\_blank，会直接打开一个新的窗口
 *  第四种情况，name值为\_self，会用url里面的文档替换掉当前窗口的文档，不会打开新的窗口。

### （2）关闭窗口 ###

上面的`window.open()`会有一个返回值`result`，`result.close()`用来关闭打开的窗口。比如下面的例子：

<body>
        <p onclick="openNewWindow()">打开新窗口</p>
        <p onclick="closeNewWindow()">关闭新窗口</p>
        <script>
            var w;
            function openNewWindow() { 
                w = window.open("Demo1.html", "windowName");
            }
            function closeNewWindow() { 
                w.close();
            }
        </script>
    </body>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 13]

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <p onclick="openNewWindow()">open new window</p>
        <script>
            var myWindow;
            function openNewWindow() { 
    		//请在此处编写代码
    		/********** Begin **********/
            var myWindow = window.open("Demo.html", "window_name");
            
            
    		/********** End **********/
            }
        </script>
    </body>
    </html>

> 【这周的练习又结束了呢？小白终于要做另一个平台的题了，累die~，明天还要补课，/(ㄒoㄒ)/，QAQ，这个世界上又多了个伤心人！】
> 
> > 句子君：
> 
> “自己”这个东西是看不见的，撞上一些别的什么，反弹回来，才会了解“自己”。所以跟很强的东西、可怕的东西、水准很高的东西相碰撞，然后才知道自己是什么，这才是自我。——山本耀司

[20210424205111803.png]: /images/20221022/e2aec34915974242bc1106f0260c5d55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/f8ee340fd2bc4712860c264e53c0ff7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/a7afec984f6a4c5bbc0536db88651762.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20221022/a9d173d9d35545d6bff94d210edd48f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20221022/97fc262dcedd4df38aa95623dcef3ab9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: /images/20221022/056f7e65ee0645d0b363bcbb2d3ce53c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]: /images/20221022/24635915bbe341528cdc223ba2797d67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]: /images/20221022/87bec085d54b4766b6510d695de56ddd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]: /images/20221022/0dec4a4e636f496399d9f47456209f07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]: /images/20221022/b706a3da85cd4c869481f1035dcc8928.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]: /images/20221022/b7c50ee6533a4fc0bd4d6a6ae5f9358c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 10]: /images/20221022/73ec8a27dfc844a594664fb442ee81de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 11]: /images/20221022/4992dccaeb484687ad27d1e335243c65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 12]: /images/20221022/a33ae191fd324287ab44db8f4fd4a2dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 13]: /images/20221022/0f0a1be3525a402b92f5ec525e1500ea.png