任务12.8 浏览器对象模型BOM

网页设计项目教程（HTML5+CSS3+JavaScript）模块12使用JavaScript脚本语言实现网页任务12.8浏览器对象模型BOM学习目标认识BOM的构成，掌握window、location、history对象及定时器的使用知识目标理解BOM的作用；掌握window对象的常用方法；掌握location对象的常用属性与方法；掌握history对象的前进后退方法。能力目标会使用三种系统对话框；会用setTimeout与setInterval定时执行代码；会用location实现页面跳转与刷新；会用history实现前进与后退。素养目标培养与浏览器交互的开发思维；关注定时器的资源占用；提升页面动态功能的综合开发能力。任务描述通过BOM提供的对象访问浏览器功能，实现JavaScript与浏览器的"对话"BOM（BrowserObjectModel），即浏览器对象模型，由一组包含了多个属性和方法的对象组成，用于访问浏览器的各种功能，如浏览器窗口、浏览历史、文档地址等。通过BOM，JavaScript可与浏览器进行对话。BOM的核心是window对象，此外还包括location、history等与窗口相关的子对象。本任务目标：掌握window对象的常用方法与三种系统对话框，会用定时器定时执行代码，会用location实现页面跳转与刷新，会用history实现前进与后退，并完成动态时钟页面。12.8.1window对象window对象是浏览器的核心对象，表示浏览器中打开的窗口在JavaScript中，window对象是全局对象，所有在全局作用域中声明的变量、函数都会成为window对象的属性和方法。varname="张三";functiongreet(){console.log("你好");}

console.log();//张三window.greet();//你好访问时可省略window.调用window.alert()可直接简写为alert()，访问window的其他属性和方法同理，无需通过window.xxx的形式。alert()prompt()setTimeout()提示：全局变量name、全局函数greet声明后，就自动挂载到了window对象下，成为它的属性和方法。window对象的常用方法（表12-13·上）系统对话框与定时器相关方法——本任务的重点内容方法描述alert()显示带有一段消息和一个确认按钮的警告框confirm()显示带有一段消息以及确认按钮和取消按钮的对话框prompt()显示可提示用户输入的对话框setTimeout()在指定的毫秒数后调用函数或计算表达式setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式clearTimeout()取消由setTimeout()方法设置的timeoutclearInterval()取消由setInterval()方法设置的timeout其中alert()、confirm()、prompt()用于打开系统对话框；setTimeout()、setInterval()及对应的clear方法用于定时执行代码，下面分别详细介绍。window对象的常用方法（表12-13·下）窗口控制相关方法：打开、关闭、移动、调整大小与滚动方法描述open()打开一个新的浏览器窗口或查找一个已命名的窗口close()关闭浏览器窗口focus()把键盘焦点给予一个窗口print()打印当前窗口的内容moveTo()把窗口的左上角移动到一个指定的坐标moveBy()可相对窗口的当前坐标把它移动指定的像素resizeTo()把窗口的大小调整到指定的宽度和高度resizeBy()按照指定的像素调整窗口的大小scrollTo()把内容滚动到指定的坐标scrollBy()按照指定的像素值来滚动内容提示：带To的方法以绝对值为准，带By的方法在当前状态基础上相对调整。12.8.1系统对话框调用alert()、confirm()、prompt()可打开系统对话框向用户显示消息系统对话框的外观由浏览器决定，无法通过CSS进行调整。alert()警告框接收一个参数，表示显示的文本。弹出带有"确定"按钮的消息框，消息内容由接收到的参数决定。此页面显示我是alert警告框！确定confirm()确认框接收一个参数，表示显示的文本。弹出带有"确定"和"取消"按钮的消息框，返回布尔值：确定true，取消false。此页面显示我是confirm确认框！确定取消prompt()提示框接收两个参数：显示的文本和输入框中的默认文本。返回输入框中的值，取消则返回空值。此页面显示我是prompt提示框！张三确定取消案例演示：系统对话框（demo36）调用alert()、confirm()、prompt()方法，运行效果如图12-50、12-51、12-52所示<buttonid="alertBtn">调用alert()</button><buttonid="confirmBtn">调用confirm()</button><buttonid="promptBtn">调用prompt()</button><scripttype="text/javascript">document.getElementById("alertBtn").onclick=function(){alert("我是alert警告框！");}document.getElementById("confirmBtn").onclick=function(){constisSure=confirm("我是confirm确认框！确定要删除吗？");if(isSure){console.log("用户确定要删除这条数据了。");}else{console.log("用户不打算删除这条数据了。");}}document.getElementById("promptBtn").onclick=function(){constvalue=prompt("我是prompt提示框！请输入你的姓名","张三");if(value){console.log("你好！"+value);}}</script>此页面显示我是alert警告框！确定图12-50alert警告框此页面显示确定要删除这条数据吗？确定取消图12-51confirm确认框此页面显示请输入你的姓名张三确定取消图12-52prompt提示框单击"确定"，confirm()返回true，可在代码中据此判断用户的选择；单击"取消"则返回false；prompt()取消时返回空值。12.8.1定时器：setTimeout()根据指定的毫秒数，在到达时间后调用某个函数或者执行一段代码语法：vartimerId=setTimeout(func|code,delay);第一个参数为要执行的函数或代码，第二个参数为毫秒数；返回定时器编号，可供clearTimeout()取消。创建demo37.html，10秒钟后弹出警告框：

document.getElementById("addClock").onclick=function(){setTimeout(function(){alert("您好，十秒钟的思考时间到了，"+"请说出您的答案。")},10*1000)}运行效果（图12-53）此页面显示十秒钟的思考时间到了，请说出您的答案。确定10*1000表示10000毫秒，即10秒后弹出警告框；delay的单位是毫秒，不要误写成秒。注意：setTimeout()只执行一次；若要反复执行，需使用setInterval()，或在函数内再次调用setTimeout()。12.8.1定时器：setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式语法：vartimerId=setInterval(func|code,delay);参数含义与setTimeout()相同，但该方法会不停地调用函数，直到窗口被关闭，或调用clearInterval()取消。创建demo38.html，实现每隔一秒的计数：

varcount=0;//计数的数字vartimerId=null;//存储定时器的编号functionexecCount(){count++;document.getElementById("count").innerHTML=count;}startBtn.onclick=function(){if(timerId){return;}//已有定时器则不再创建timerId=setInterval(execCount,1000);}endBtn.onclick=function(){if(!timerId){return;}//无定时器则无需清除clearInterval(timerId);//清除定时器timerId=null;//重置timerIdcount=0;//重置count}运行效果（图12-54）file:///demo38.html开始最新一轮计数停止计数当前计数为：5点击"开始"后计数数字每隔1秒递增；点击"停止计数"后数字不再变化。12.8.2location对象保存了当前窗口所加载文档的信息，并提供了一些导航功能location.href完整URL结构https://:8080/course/list?id=1#topprotocol协议host主机名+port端口pathname路径search查询hash锚点属性描述（表12-14location对象的常用属性）hash设置或返回从"#"开始的URLhost设置或返回URL的主机名和端口hostname设置或返回URL的主机名href设置或返回完整的URLpathname设置或返回URL路径名port设置或返回一个URL服务器使用的端口号protocol设置或返回一个URL协议search设置或返回一个URL的查询部分location对象的常用方法与案例演示（demo39）location对象提供载入新文档、重新载入、替换当前文档三种导航方法方法描述（表12-15）assign()载入一个新的文档reload()重新载入当前文档replace()用新的文档替换当前文档replace()与assign()的区别：replace()替换当前文档后不保留历史记录，用户不能通过"后退"按钮返回原页面；assign()载入新文档后仍可后退。<buttonid="goBtn">跳转至百度页面</button><buttonid="reloadBtn">刷新页面</button><scripttype="text/javascript">document.getElementById("goBtn").onclick=function(){location.replace("");}document.getElementById("reloadBtn").onclick=function(){location.reload();}</script>运行效果点击"跳转至百度页面"按钮，从当前页面跳转到百度页面；点击"刷新页面"按钮，页面重新加载。12.8.3history对象保存了用户在当前浏览器窗口中访问的历史记录出于安全考虑，开发者无法获取用户浏览过的URL。history对象提供了一些方法，可方便用户实现前进和后退，从而访问前一个页面或者后一个页面。back()后退一页加载历史列表中的前一个URL，即后退一页，类似浏览器的"后退"按钮。forward()前进一页加载历史列表中的下一个URL，即前进一页，类似浏览器的"前进"按钮。go(n)跳转n页接收一个参数：参数为负数表示向后跳转（后退），参数为正数表示向前跳转（前进），如go(-2)后退两页。提示：history的前进后退需要配合用户的访问历史使用，若当前页是本次会话的第一个页面，则无法后退。案例演示：history对象（demo40）调用history的back()、forward()、go()方法实现前进与后退<buttonid="backBtn">后退一页</button><buttonid="forwardBtn">前进一页</button><buttonid="goBackBtn">后退两页</button><scripttype="text/javascript">document.getElementById("backBtn").onclick=function(){history.back();}document.getElementById("forwardBtn").onclick=function(){history.forward();}document.getElementById("goBackBtn").onclick=function(){history.go(-2);}</script>页面效果file:///demo40.html后退一页前进一页后退两页在浏览器中运行该文档，点击页面中的按钮后，跳转的实际效果由用户的访问历史决定。方法对比：back()等价于go(-1)，forward()等价于go(1)；go(0)表示刷新当前页面。任务实施创建一个网页，显示当前日期和时间，并且每秒更新一次（图12-55）<div>当前时间：<spanid="clock"></span></div><scripttype="text/javascript">//获取当前日期时间并格式化functionshowTime(){vard=newDate();vars=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.