Web前端开发（HTML5+CSS3+JavaScript） 课件 第11章 BOM

Web前端基础技术CSSJSHTML第10章BOMContents目录BOM概述Window对象LocationNavigator|HistoryScreenEventWebStorageBOMBOM(BroswerObjectModel):主要控制浏览器的行为和特征window对象是BOM的顶层对象，代表浏览器窗口。11.1Window对象主要方法应用：在新窗口打开页面：window.open(URL,[,目标])示例：11.2Location对象注意：href属性可读可写。当为href赋值时，将重定向到目标页面。例如，下面的语句将重定向到index.html页面：location是window的子对象，该对象的属性保存了当前页面URL的详细信息。此外，location对象还提供了跳转到其他页面的方法和属性。假定有以下URL：:80/abc.html#shoe:80/abc.html?id=10&price=190那么，location对象的属性及其含义如下：

href：该属性表示当前页面完整的URL，如上面示例语句。

protocol：使用的协议，如：http和https。

hostname：服务器域名或IP地址，如：。

post：端口号，如:80。

pathname：服务器根目录下的文件名，如:abc.html。

hash：返回#后面的内容，如：shoe。

search：表示URL问号后面的查询字符串，如：?id=10&price=190。该属性使得我们可以重定向到目标页面时，传递一些简单的数据。location.href="index.html"该语句等价于：window.open("index.html","_self")。location对象主要方法包括：

reload（）：重新加载当前页面，相当于页面刷新。

repace（URL）：重定向到指定的页面，例如replace("index.html")。replace方法和href属性都可以实现页面的重定向。两者的区别在于，使用replace方法后，无法使用浏览器的回退按钮返回上一页，而使用href属性则可以。

assign（URL）：重定向到指定页面。使用该方法后，可以使用浏览器的回退按钮返回上一页，与使用href属性的作用相同。11.3Navigator对象（了解）navigator是window的子对象，我们可以通过访问其属性来获取与浏览器和操作系统相关的信息。

appCodeName：获取浏览器的内部代码名。

appName：获取浏览器的名称。

appVersion：获取浏览器的平台和版本信息。

language：获取当前浏览器的语言，例如:zh-CN。

cookieEnabled：浏览器中是否启用cookie，结果为true或false。

onLine：浏览器是否处于在线模式，结果为true或false。

platform：获取运行浏览器的操作系统平台。

userAgent：返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称。11.4history对象（了解）history是window的子对象，保存有用户在浏览器中访问过的历史记录数。

length：当前历史记录条数。

back()：返回到历史记录中的上一条记录，等同在浏览器中单击“上一页”按钮。

forward()：前往历史记录中的下一条记录，等同在浏览器中单击“下一页”按钮。

go(n)：打开指定的历史记录中指定位置的页面，n大于0，表示前进，n小于0表示回退。例如，在当前页面中，返回上一个页面。history.go(-1)//或history.back()11.5screen对象（了解）如果要获取用户屏幕的信息，可以通过访问screen对象的属性来实现。

width：浏览器窗口所在的屏幕的宽度，单位为像素。

availWidth：浏览器窗口可用的屏幕宽度，单位为像素。

height：浏览器窗口所在的屏幕的高度，单位为像。

availHeight：浏览器窗口可用的屏幕高度，不包含任务栏等不可用的高度。单位为像素。11.6浏览器事件对象Event在浏览器中触发事件时，浏览器将创建一个名为event事件对象，并将其作为隐式参数传递给事件处理函数。event对象代表事件的状态，例如触发事件的目标对象、键盘按键的状态以及鼠标按键和位置等。event对象两种常见的应用场景:事件冒泡和事件捕获。事件冒泡是指事件从触发事件的DOM元素开始，逐级向上传递给父元素和祖先元素，直到到达顶层的document元素。在这个传递过程中，任何DOM元素都可以捕获并响应同类型事件。这也是默认的事件传递方向。而事件捕获则刚好相反，它是从触发事件的DOM元素开始，向下逐级传递至位于事件触发区域内的子元素和孙子元素应用示例：观察事件传递顺序。<style>div{display:flex;justify-content:center;align-items:center;}#div1{width:200px;height:100px;border:2pxsolidblack;}#div2{width:100px;height:60px;border:2pxsolidblack;}</style><divid="div1"onclick="getID()"><divid="div2"onclick="getID()"><buttonid="bt"onclick="getID()">查看</button></div></div><script>functiongetID(){alert("事件源id："+event.target.id+",当前元素id：“ +event.currentTarget.id)}</script>HTMLCSS：说明：使用弹性布局使元素居中，便于观察。JavaScript内联方式的事件传递默认采用冒泡模式1.如果我们不希望事件逐级传递，那么，我么可以在事件处理函数中，使用event对象的stopPropagation方法来实现。其用法如下：event.stopPropagation()2.如果我们要改变事件传递方向，那么我们需要借助addEventListener方法来实现。其用法如下：元素.addEventListener(事件名,事件处理函数，true|false)说明：参数3默认为false，表示使用事件冒泡方式，而取值为true时表示使用事件捕获方式。注意，在绑定事件处理函数时，只有使用addEventListener方法，才能改变事件传递方向，而无法使用内联方式和属性方式来实现3.如果我们期望阻止这些元素的默认行为，可以对他们默认事件进行监听，并在其相应的事件处理函数中使用event.preventDefault方法来阻止。示例阻止链接的默认行为，使其仅执行我们自定义的操作，而不是跳转到目标页面。<ahref="index.html"onclick="goto()">单击试试</a>functiongoto(){event.preventDefault()alert("是否重定向到目标页面了？")}讨论：示例阻止表单提交<formonsubmit="check()"><input/><button>提交</button></form>functioncheck(){event.preventDefault()alert("模拟验证数据，该表单不会执行提交操作")}//如果需要在验证数据后提交表单，可以执行表单的submit方法

event.target.submit()11.7WebStorage实现本地数据存储,包含两个具体的实例：localStorage和sessionStorage。两者都实现了Storage接口的所有方法和属性，并作为window对象的属性存在。1.保存数据localStorage.setItem(key,value)localStorage.setItem("username","张三")varbook={id:1,bookName:"三国演义"，price:12.3}localStorage.setItem("book",JSON.stringify(book))JSON对象的有两个主要的方法：stringify和parse。stringify方法的功能是将javaScript对象或数组转换为字符串的形式，而parse方法的功能是字符串解析还原为JavaScript对象或数组。用法如下：JSON.stringify(对象或数组)JSON.parse(字符串)2.读取数据localStorage.getItem(key)localStorage.getItem("username")varbook=localStorage.getItem("book")book=JSON.parse(book)3.删除数据localStorage.removeItem(key)localStorage.removeItem("username")localStorage.removeItem("book")4.删除全部数据localStorage.clear()5.列举数据localStorage.length|localStorage.key|localStorage.getItem(key)在localStorage中，length属性表示当前数据项的数量，而其key方法则可以获取数据项中指定索引的关键字。for(vari=0;i<localStorage.length;i++){varkey=localStorage.key(i)varvalue=localStorage.getItem(key)console.log(key,"=",value)}应用实例：登录,记住账号和密码要求实现如下功能：（1）假定用户账号的用户名和密码都是123。（2）如果用户在登录界面输入了正确的账号，且勾选了“记住密码”复选框，那么在单击“登录”按钮后，将账号信息保存在本地，并跳转到index.html页面。如果用户从index.html页面返回或重启浏览器时，自动填写用户账号信息。如果用户在登录时没有勾选“记住密码”复选框，则在登录成功后，清除已经保存的账号信息，并跳转到index.html页面。（3）如果用户输入账号错误，则弹出信息对话框，提示用户重新输入。（4）在index.html中，显示当前登录用户的欢迎信息。如果用户未经验证直接打开该页面，则自动跳转到登录页面，强制要求用户进行登录操作。<inputid="user"placeholder="请输入用户名"/><br/><inputid="pwd"type="password"placeholder="请输入密码"/><br/><inputid="remember"type="checkbox"/>记住密码<br/><buttononclick="login()">登录</button><script>varuser=document.getElementById("user")varpwd=document.getElementById("pwd")varrem=document.getElementById("remember")functiongetAccount(){varu=localStorage.getItem("user")varp=localStorage.getItem("pwd")if(u&&p){user.value=upwd.value=prem.checked=true}}functionlogin(){sessionStorage.removeItem('flag')//初始化

if(user.value=='123'&&pwd.value=='123'){if(rem.checked){localStorage.setItem('user',user.value)localStorage.setItem('pwd',pwd.value)}else{localStorage.removeItem('user')