为公司做网站要做什么准备,杭州蓝韵网络有限公司,渭南网站建设网站排名优化,安康网站开发公司1.5.2 BOM对象
接下来我们学习BOM对象#xff0c;BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能#xff0c;可以通过操作BOM对象的相关属性或者函数来完成。例如#xff1a…1.5.2 BOM对象
接下来我们学习BOM对象BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能可以通过操作BOM对象的相关属性或者函数来完成。例如我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成代码如下location.hrefhttp://www.baidu.com
BOM中提供了如下5个对象
对象名称描述Window浏览器窗口对象Navigator浏览器对象Screen屏幕对象History历史记录对象Locationd地址栏对象
上述5个对象与浏览器各组成对应的关系如下图所示 对于上述5个对象我们重点学习的是Window对象、Location对象这2个。 1.5.2.1 Window对象
window对象指的是浏览器窗口对象是JavaScript的全部对象所以对于window对象我们可以直接使用并且对于window对象的方法和属性我们可以省略window.例如我们之前学习的alert()函数其实是属于window对象的,其完整的代码如下
window.alert(hello);
其可以省略window. 所以可以简写成
alert(hello)
所以对于window对象的属性和方法我们都是采用简写的方式。window提供了很多属性和方法下表列出了常用属性和方法
window对象提供了获取其他BOM对象的属性
属性描述history用于获取history对象location用于获取location对象Navigator用于获取Navigator对象Screen用于获取Screen对象
也就是说我们要使用location对象只需要通过代码window.location或者简写location即可使用
window也提供了一些常用的函数如下表格所示
函数描述alert()显示带有一段消息和一个确认按钮的警告框。comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框。setInterval()按照指定的周期以毫秒计来调用函数或计算表达式。setTimeout()在指定的毫秒数后调用函数或计算表达式。
接下来我们通过VS Code中创建名为05. JS-对象-BOM.html文件来编写代码来演示上述函数 alert()函数弹出警告框函数的内容就是警告框的内容 script//window对象是全局对象window对象的属性和方法在调用时可以省略window.window.alert(Hello BOM);alert(Hello BOM Window);
/script 浏览器打开依次弹框此处只截图一张 confirm()函数弹出确认框并且提供用户2个按钮分别是确认和取消。 添加如下代码 confirm(您确认删除该记录吗?); 浏览器打开效果如图所示 但是我们怎么知道用户点击了确认还是取消呢所以这个函数有一个返回值当用户点击确认时返回true点击取消时返回false。我们根据返回值来决定是否执行后续操作。修改代码如下再次运行可以查看返回值true或者false var flag confirm(您确认删除该记录吗?);
alert(flag); setInterval(fn,毫秒值)定时器用于周期性的执行某个功能并且是循环执行。该函数需要传递2个参数 fn:函数需要周期性执行的功能代码 毫秒值间隔时间 注释掉之前的代码添加代码如下 //定时器 - setInterval -- 周期性的执行某一个函数
var i 0;
setInterval(function(){i;console.log(定时器执行了i次);
},2000); 刷新页面浏览器每个一段时间都会在控制台输出结果如下 setTimeout(fn,毫秒值) 定时器只会在一段时间后执行一次功能。参数和上述setInterval一致 注释掉之前的代码添加代码如下 //定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){alert(JS);
},3000); 浏览器打开3s后弹框关闭弹框发现再也不会弹框了。 1.5.2.2 Location对象
location是指代浏览器的地址栏对象对于这个对象我们常用的是href属性用于获取或者设置浏览器的地址信息添加如下代码
//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href https://www.itcast.cn;
浏览器效果如下首先弹框展示浏览器地址栏信息 然后点击确定后因为我们设置了地址栏信息所以浏览器跳转到传智首页 完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-BOM/title
/head
body/body
script//获取// window.alert(Hello BOM);// alert(Hello BOM Window);
//方法//confirm - 对话框 -- 确认: true , 取消: false// var flag confirm(您确认删除该记录吗?);// alert(flag);
//定时器 - setInterval -- 周期性的执行某一个函数// var i 0;// setInterval(function(){// i;// console.log(定时器执行了i次);// },2000);
//定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){// alert(JS);// },3000);//locationalert(location.href);
location.href https://www.itcast.cn;
/script
/html
