网站前端语言,优化教育培训,公众号开发板如何绑定视频号,ps个人网站首页怎么制作1 什么是 BOM 对象
BOM#xff1a;Brower Object Model#xff0c;指的是浏览器对象模型。
BOM 用来操作浏览器窗口及窗口上的控件#xff0c;实现用户和页面的动态交互。
浏览器对象#xff1a;浏览器提供的一系列内置对象的统称。
BOM 浏览器对象模型#xff1a;各内…1 什么是 BOM 对象
BOMBrower Object Model指的是浏览器对象模型。
BOM 用来操作浏览器窗口及窗口上的控件实现用户和页面的动态交互。
浏览器对象浏览器提供的一系列内置对象的统称。
BOM 浏览器对象模型各内置对象之间按照某种层次组织起来的模型的统称。
window 对象是 BOM 的顶层核心对象。其他的对象都是以属性的方式添加到 window 对象下也可称为 window 的子对象。
document文档对象history历史对象主要用于记录浏览器的访问历史记录也就是浏览网页的前进与后退功能。location地址栏对象用于获取当前浏览器中URL地址栏内的相关数据。navigator浏览器对象用于获取浏览器的相关数据例如浏览器的名称、版本等也称为浏览器的嗅探器。screen屏幕对象可获取与屏幕相关的数据例如屏幕的分辨率等。
BOM 没有一个明确的规范所以浏览器提供商会按照各自的想法随意去扩展 BOM。而各浏览器间共有的对象就成为了事实上的标准。不过在利用 BOM 实现具体功能时要根据实际的开发情况考虑浏览器之间的兼容问题否则会出现不可预料的情况。
2 window 对象
2.1 全局作用域
window 对象是BOM中所有对象的核心同时也是BOM中所有对象的父对象。
定义在全局作用域中的变量、函数以及 JavaScript 中的内置函数都可以被 window 对象调用。
var area Beijing;
function getArea(){return this.area;
}
console.log(area);
console.log(window.area);
console.log(getArea());
console.log(window.getArea());
console.log(window.Number(area));定义在全局作用域中的 getArea() 函数函数体内的 this 关键字指向 window 对象。对于 window对象的属性和方法在调用时可以省略 window直接访问其属性和方法即可。
在 JavaScript 中直接使用一个未声明的变量会报语法错误但是使用“window.变量名”的方式则不会报错而是获得一个 undefined 结果。
除此之外delete 关键字仅能删除 window 对象自身的属性对于定义在全局作用域下的变量不起作用。
2.2 弹出对话框和窗口
window 对象中除了前面提过的 alert() 和 prompt() 方法外还提供了很多弹出对话框和窗口的方法以及相关的操作属性。
分类名称说明属性closed返回一个布尔值该值声明了窗口是否已经关闭属性name设置或返回存放窗口名称的一个字符串属性opener返回对创建该窗口的window对象的引用属性parent返回当前窗口的父窗口属性self对当前窗口的引用等价于window属性属性top返回最顶层的父窗口方法alert()显示带有一段消息和一个确认按钮的警告框方法confirm()显示带有一段消息以及确认按钮和取消按钮的对话框方法prompt()显示可提示用户输入的对话框方法open()打开一个新的浏览器窗口或查找一个已命名的窗口方法close()关闭浏览器窗口方法focus()把键盘焦点给予一个窗口方法print()打印当前窗口的内容方法scrollBy()按照指定的像素值来滚动内容方法scrollTo()把内容滚动到指定的坐标
所有的属性和方法在常见的浏览器如IE、Chrome等中全部支持。
prompt() 方法
作用用于生成用户输入的对话框。
第1个参数用于设置用户输入的提示信息。
第2个参数用于设置输入框中的默认信息。
prompt(请输入测试的选项);
prompt(请输入测试的选项, 用户名和密码);confirm() 方法
作用弹出一个确认对话框该对话框中包含提示消息以及确认和取消按钮。
参数用于设置确认的提示信息。
返回值点击“确定”按钮返回true。点击“取消”按钮返回false。
confirm(确定要删除吗)open() 方法
作用用于打开一个新的浏览器窗口或查找一个已命名的窗口。
语法open(URL, name, specs, replace)。
第1个参数打开指定页面的URL地址若没有指定则打开一个新的空白窗口。第2个参数指定target属性或窗口的名称第3个参数用于设置浏览器窗口的特征如大小、位置、滚动条等多个特征之间使用逗号分隔。第4个参数设置为true表示替换浏览历史中的当前条目设置false默认值表示在浏览历史中创建新的条目。
name可选值含义_blankURL加载到一个新的窗口也是默认值_parentURL加载到父框架_selfURL替换当前页面_topURL替换任何可加载的框架集name窗口名称
specs可选参数值说明heightNumber窗口的高度最小值为100leftNumber该窗口的左侧位置locationyes|no|1|0是否显示地址字段默认值是yesmenubaryes|no|1|0是否显示菜单栏默认值是yesresizableyes|no|1|0是否可调整窗口大小默认值是yesscrollbarsyes|no|1|0是否显示滚动条默认值是yesstatusyes|no|1|0是否要添加一个状态栏默认值是yestitlebaryes|no|1|0是否显示标题栏.被忽略除非调用HTML应用程序或一个值得信赖的对话框默认值是yestoolbaryes|no|1|0是否显示浏览器工具栏默认值是yeswidthNumber窗口的宽度最小值为100
与 open() 方法功能相反的是 close() 方法用于关闭浏览器窗口调用该方法的对象就是需要关闭的窗口对象。
2.3 窗口位置和大小
BOM 中用来获取或更改 window 窗口位置窗口高度与宽度文档区域高度与宽度的相关属性和方法有很多。
分类名称说明属性screenLeft返回相对于屏幕窗口的x坐标Firefox不支持属性screenTop返回相对于屏幕窗口的y坐标Firefox不支持属性screenX返回相对于屏幕窗口的x坐标IE8不支持属性screenY返回相对于屏幕窗口的y坐标IE8不支持属性innerHeight返回窗口的文档显示区的高度IE8不支持属性innerWidth返回窗口的文档显示区的宽度IE8不支持属性outerHeight返回窗口的外部高度包含工具条与滚动条IE8不支持属性outerWidth返回窗口的外部宽度包含工具条与滚动条IE8不支持方法moveBy()将窗口移动到相对的位置方法moveTo()将窗口移动到指定的位置方法resizeBy()将窗口大小调整到相对的宽度和高度方法resizeTo()将窗口大小调整到指定的宽度和高度
目前只有 window.open() 方法打开的的窗口和选项卡TabFireFox和Chrome浏览器才支持口位置和大小的调整。
2.4 框架操作
window 对象提供的 frames 属性可通过集合的方式获取 HTML 页面中所有的框架length 属性就可以获取当前窗口中 frames 的数量。
body!-- 设置框架 --iframe nameframe01/iframeiframe nameframe02/iframeiframe nameframe03/iframe
/body
script// 获取窗口对应给定对象的内容// 方式1window.frames[frame01].document.write(frame01 text.);// 方式2window.frames.frame02.document.write(frame02 text.);// 方式3window.frames[2].document.write(frame03 text.);
/script除此之外还可以利用 parent 获取当前 window 对象所在的父窗口。
window.parent; // 如果在框架中获取父级窗口否则返回自身引用
window.parent.frames; // 获取同级别的框架2.5 定时器
JavaScript 中可通过 window 对象提供的方法实现在指定时间后执行特定操作也可以让程序代码每隔一段时间执行一次实现间歇操作。
方法说明setTimeout()在指定的毫秒数后调用函数或执行一段代码setInterval()按照指定的周期以毫秒计来调用函数或执行一段代码clearTimeout()取消由setTimeout()方法设置的定时器clearInterval()取消由setInterval()设置的定时器
setTimeout() 和 setInterval() 方法区别
相同点都可以在一个固定时间段内执行 JavaScript 程序代码。不同点setTimeout() 只执行一次代码setInterval() 会在指定的时间后自动重复执行代码。
// 只执行一次代码
setTimeout(echoStr, 3000);
function echoStr() {console.log(JavaScript);
}
// 重复执行代码
setInterval(echoStr, 3000);
function echoStr() {console.log(JavaScript);
}setTimeout() 方法在执行一次后即停止了操作setInterval() 方法一旦开始执行在不加干涉的情况下间歇调用将会一直执行到页面关闭为止。若要在定时器启动后取消该操作可以将 setTimeout() 的返回值定时器ID传递给 clearTimeout() 方法或将 setInterval() 的返回值传递给 clearInterval() 方法。
2.6 练习作业
限时秒杀 指定限时秒杀的结束时间及其对应的毫秒数。获取当前时间的毫秒数。计算当前与秒杀结束的时间差大于0计算剩余的天时分秒否则结束秒杀。利用定时器完成秒杀的倒计时功能。利用两位数字显示秒杀的时间。
3 location 对象
3.1 更改 URL
URLUniform Resource Locator统一资源定位符。
在 Internet 上访问的每一个网页文件都有一个访问标记符用于唯一标识它的访问位置以便浏览器可以访问到这个访问标记符称为URL。
// http://www.example.com:80/web/index.html?a3b4#res
// http 传输数据所使用的协议
// www.example.com 服务器主机名
// 80 端口号
// /web/index.html 要请求的资源
// a3b4 用户传递的参数
// #res 页面内部的锚点// 由于80是Web服务器的默认端口号因此可以省略URL中的“:80”
// 即http://www.example.com/web/index.html?a3b4#reslocation 对象提供的用于改变 URL 地址的方法所有主流的浏览器都支持。
名称说明assign()载入一个新的文档reload()重新载入当前文档replace()用新的文档替换当前文档
reload() 方法的唯一参数是一个布尔类型值将其设置为 true 时它会绕过缓存从服务器上重新下载该文档类似于浏览器中的刷新页面按钮。
3.2 获取 URL 参数
Web开发中经常通过URL地址传递的参数执行指定的操作如商品的搜索排序等。此时可以利用location对象提供的search属性返回URL地址中的参数。
用户访问该URL地址。获取带有?的请求参数。
获取URL的指定部分location.属性名。
设置URL的指定部分location.属性名 值。
属性说明hash返回一个URL的锚部分host返回一个URL的主机名和端口hostname返回URL的主机名href返回完整的URLpathname返回URL的路径名port返回一个URL服务器使用的端口号protocol返回一个URL协议
3.3 练习作业
定时跳转 编写定时跳转的HTML页面。获取指定的秒数并减1写入页面。当秒数大于0时利用 setTimeout() 循环倒计时。当秒数小于等于0时利用 location.href 跳转到指定的URL地址中。
4 history 对象
4.1 历史记录跳转
history对象可对用户在浏览器中访问过的URL历史记录进行操作。
出于安全方面的考虑history对象不能直接获取用户浏览过的URL但可以控制浏览器实现“后退”和“前进”的功能。
分类名称说明属性length返回历史列表中的网址数方法back()加载history列表中的前一个URL方法forward()加载history列表中的下一个URL方法go()加载history列表中的某个具体页面
go()方法可根据参数的不同设置完成历史记录的任意跳转。当参数值是一个负整数时表示“后退”指定的页数当参数值是一个正整数时表示“前进”指定的页数。当go()方法的参数为1或-1时与forward()和back()方法的作用相同。
4.2 无刷新更改 URL 地址
HTML5为history对象引入了history.pushState()和history.replaceState()方法用来在浏览历史中添加和修改记录实现无刷新更改URL地址。
pushState(state, title, [url]) // 添加历史记录
replaceState(state, title, [url]) // 修改历史记录参数state表示一个与指定网址相关的状态对象此处可以填null或空字符串。参数title表示新页面的标题可以填null或空字符串。参数url表示新的网址并且必须与当前页面处在同一个域中。
history.pushState(null, null, ?acheck);
history.pushState(null, null, ?alogin);
history.replaceState(null, null, ?p1);pushState()方法会改变浏览器的历史列表中记录的数量。replaceState()方法仅用于修改历史记录历史记录列表的数量不变与location.replace()方法的功能类似。
5 navigator 对象
navigator对象提供了有关浏览器的信息主流浏览器中存在的属性和方法如下。
分类名称说明属性appCodeName返回浏览器的内部名称属性appName返回浏览器的名称属性appVersion返回浏览器的平台和版本信息属性cookieEnabled返回指明浏览器中是否启用cookie的布尔值属性platform返回运行浏览器的操作系统平台属性userAgent返回由客户端发送服务器的User-Agent头部的值方法javaEnabled()指定是否在浏览器中启用Java
6 screen 对象
screen对象用于返回当前渲染窗口中与屏幕相关的属性信息如屏幕的宽度和高度等。以下展示主流浏览器中支持的screen属性。
名称说明height返回整个屏幕的高width返回整个屏幕的宽availHeight返回浏览器窗口在屏幕上可占用的垂直空间availWidth返回浏览器窗口在屏幕上可占用的水平空间colorDepth返回屏幕的颜色深度pixelDepth返回屏幕的位深度/色彩深度
7 练习作业
红绿灯倒计时 横向三色交通信号灯的亮灯的顺序一般为“绿-黄-红-绿”依次循环。亮灯时长需根据路口的实际情况等因素来考虑设置如红灯亮设置为30秒绿灯亮设置为35秒黄灯亮设置为5秒。编写HTML设置红黄绿灯及倒计时的显示页面。创建红、黄、绿灯对象lamp保存相关的数据。创建倒计时的元素对象count实现倒计时的时间设置。根据lamp和count对象获取并设置绿灯亮时页面初始化效果。利用setInterval()函数完成信号灯倒计时的动态改变效果。 水平空间 | | colorDepth | 返回屏幕的颜色深度 | | pixelDepth | 返回屏幕的位深度/色彩深度 |
7 练习作业
红绿灯倒计时 横向三色交通信号灯的亮灯的顺序一般为“绿-黄-红-绿”依次循环。亮灯时长需根据路口的实际情况等因素来考虑设置如红灯亮设置为30秒绿灯亮设置为35秒黄灯亮设置为5秒。编写HTML设置红黄绿灯及倒计时的显示页面。创建红、黄、绿灯对象lamp保存相关的数据。创建倒计时的元素对象count实现倒计时的时间设置。根据lamp和count对象获取并设置绿灯亮时页面初始化效果。利用setInterval()函数完成信号灯倒计时的动态改变效果。
