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

浏览器对象模型

  • 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中定时器的作用是在指定的时间或者时间间隔之后执行函数,可以用来对网页上的数据做实时的更新,比如网页上的北京时间的更新:
    JavaScript学习手册十六:浏览器对象模型_第1张图片
    这个可以通过每隔一秒执行一次时间更新函数来实现。

  • 定时器的实现有两种方式,一个是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()函数。

效果如下所示:
JavaScript学习手册十六:浏览器对象模型_第2张图片
【截图小能手,(●’◡’●)】

(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>

效果如下:
JavaScript学习手册十六:浏览器对象模型_第3张图片
先点击上面一行文字,触发了函数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()的作用是更新网页上显示的时间。

效果如下所示:
JavaScript学习手册十六:浏览器对象模型_第4张图片

(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()

其效果如下:
JavaScript学习手册十六:浏览器对象模型_第5张图片

代码文件

<!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>

打印出来的结果是:
JavaScript学习手册十六:浏览器对象模型_第6张图片
这个结果应当和浏览器地址栏上内容一样。

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

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

点击页面上的文字,效果如下:
JavaScript学习手册十六:浏览器对象模型_第7张图片

(2)location对象的其它属性

假设,当前浏览器地址栏的内容是:https://www.educoder.net:8080/shixun.html?tab=1。我们用一个表格看一下location对象的所有属性:
JavaScript学习手册十六:浏览器对象模型_第8张图片
以下用一个例子打印所有这些属性,假设我们在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>

载入页面后,打印结果如下:
JavaScript学习手册十六:浏览器对象模型_第9张图片

代码文件

<!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>

其效果如下:
JavaScript学习手册十六:浏览器对象模型_第10张图片

(2)确认框

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

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

效果如下:
JavaScript学习手册十六:浏览器对象模型_第11张图片

(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>

效果如下所示:
JavaScript学习手册十六:浏览器对象模型_第12张图片
如动态图所示,不输入点确定返回默认的内容;直接点取消返回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里面中的任何一个,它的含义如下:
    JavaScript学习手册十六:浏览器对象模型_第13张图片
  • 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>

效果如下所示:
JavaScript学习手册十六:浏览器对象模型_第14张图片
如上所示,

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

(2)关闭窗口

上面的window.open()会有一个返回值resultresult.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>

效果如下:
JavaScript学习手册十六:浏览器对象模型_第15张图片

代码文件

<!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,这个世界上又多了个伤心人!】

句子君:

“自己”这个东西是看不见的,撞上一些别的什么,反弹回来,才会了解“自己”。所以跟很强的东西、可怕的东西、水准很高的东西相碰撞,然后才知道自己是什么,这才是自我。——山本耀司

你可能感兴趣的:(#,javascript,js)