《移动应用设计与开发-前端开发》课件-6 BOM对象

JavaScript脚本语言--BOM对象目录6.1window对象6.3navigate和screen对象6.4案例-倒计时6.2

location和history对象JavaScript脚本语言--

6.1window对象BOM是什么？有什么作用？BOM对象导入讲解演练总结实践BOM对象BOM：Browser

Object

Model，浏览器对象模型。是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。导入讲解演练总结实践通过使用BOM，可移动窗口，更改状态栏文本，执行其他不予页面内容发生直接联系的操作。BOM对象BOM是一个分层结构，BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。导入讲解演练总结实践window对象是根对象，其他对象都是window对象的成员属性。BOM对象导入讲解演练总结实践document（文档对象）：也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。navigator（浏览器对象）：用于获取浏览器的相关数据，例如浏览器的名称、版本等。screen（屏幕对象）：可获取与屏幕相关的数据，例如屏幕的分辨率等。window对象：是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。window对象导入讲解演练总结实践window对象导入讲解演练总结实践window对象导入讲解演练总结实践window对象：窗口控制window对象导入讲解演练总结实践window对象方法：常用的有alert()，open(）,close()，prompt()，设置定时器等。window对象导入讲解演练总结实践window对象导入讲解演练总结实践window对象：窗口控制浏览器对象模型。BOM对象可视区大小、窗口状态的设置等。window对象属性窗口的打开和关闭，定时执行、延时执行以及各种对话框。window对象方法window对象导入讲解演练总结实践对策一window对象

导入讲解演练总结实践课后练习练习window对象属性和方法的使用。JavaScript脚本语言--6.2location和history对象location对象的作用？history对象的作用？location和history对象导入讲解演练总结实践location对象导入讲解演练总结实践URL：UniformResourceLocator，统一资源定位符。用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为URL。URL:80/web/index.html?a=3&b=4#res传输数据所使用的协议由于80是Web服务器的默认端口号，因此可以省略URL中的“:80”。服务器主机名端口号要请求的资源用户传递的参数页面内部的锚点location对象：url地址，提供了与当前窗口中加载的文档有关的信息。嵌入式行内式location对象导入讲解演练总结实践属性与方法意义href整个url字串protocolurl中从开始至冒号(包括冒号)表示通信协议的字串hostnameurl中服务器名、域名子域名或IP地址porturl中端口名hosturl中hostname和port部分pathnameurl中的文件名或路径名hashurl中由#开始的锚点名称searchurl中从问号开始至结束的表示变量的字串reload([是否从服务器端刷新])刷新当前网页，其中“是否从服务器端刷新”的值是true或falsereplace(url)用url网址刷新当前的网页location对象导入讲解演练总结实践Web开发中，经常通过URL地址传递的参数执行指定的操作，如商品的搜索，排序等。此时，可以利用location对象提供的search属性返回URL地址中的参数。获取URL参数①用户访问该URL地址。②获取带有?的请求参数。获取URL的指定部分：location.属性名。设置URL的指定部分：location.属性名=值。location对象导入讲解演练总结实践代码实现思路：①编写定时跳转的HTML页面。②获取指定的秒数，并减1写入页面。③当秒数大于0时，利用setTimeout()循环倒计时。④当秒数小于等于0时，利用location.href跳转到指定的URL地址中。location对象应用：定时跳转history对象导入讲解演练总结实践history对象可对用户在浏览器中访问过的URL历史记录进行操作。history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。历史记录跳转分类名称说明属性length返回历史列表中的网址数方法back()加载history列表中的前一个URLforward()加载history列表中的下一个URLgo()加载history列表中的某个具体页面go()方法可根据参数的不同设置，完成历史记录的任意跳转。当参数值是一个负整数时，表示“后退”指定的页数；当参数值是一个正整数时，表示“前进”指定的页数。当go()方法的参数为1或-1时，与forward()和back()方法的作用相同。对策一导入讲解演练总结实践history对象history对象应用：页面跳转地址对象，提供关于当前打开窗口或者特定框架的url信息。location对象历史清单对象，负责保存窗口或框架在某个时间段内的URL。history对象导入讲解演练总结实践location和history对象对策一导入讲解演练总结实践课后练习练习location和history对象的使用。location和history对象JavaScript脚本语言--6.3navigate和screen对象navigate对象的作用？screen对象的作用？navigate和screen对象导入讲解演练总结实践嵌入式行内式navigate对象navigate对象提供了有关浏览器的信息，主流浏览器中存在的属性和方法如下。导入讲解演练总结实践分类名称说明属性appCodeName返回浏览器的内部名称appName返回浏览器的名称appVersion返回浏览器的平台和版本信息cookieEnabled返回指明浏览器中是否启用cookie的布尔值platform返回运行浏览器的操作系统平台userAgent返回由客户端发送服务器的User-Agent头部的值方法javaEnabled()指定是否在浏览器中启用Javanavigate对象导入讲解演练总结实践navigate对象应用：获取客户端浏览器信息screen对象导入讲解演练总结实践screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。名称说明height返回整个屏幕的高width返回整个屏幕的宽availHeight返回浏览器窗口在屏幕上可占用的垂直空间availWidth返回浏览器窗口在屏幕上可占用的水平空间colorDepth返回屏幕的颜色深度pixelDepth返回屏幕的位深度/色彩深度对策一导入讲解演练总结实践screen对象screen对象应用：获取用户屏幕信息浏览器信息。navigate对象当前渲染窗口中与屏幕相关的属性信息。screen对象导入讲解演练总结实践navigate和screen对象对策一导入讲解演练总结实践课后练习练习navigate和screen对象的使用。navigate和screen对象JavaScript脚本语言--6.4案例倒计时

BOM中的对象，学会使用了吗？案例导入讲解演练总结实践window对象，location对象，history对象，navigate对象，screen对象属性和方法的使用。案例导入讲解演练总结实践任务需求：倒计时

红灯倒计时30秒，效果如下所示。案例导入讲解演练总结实践任务分析：（1）界面设计（2）页面布局结构-HTML（3）样式定义-CSS（4）动态效果-JS对策一案例导入讲解演练总结实践任务完成：（2）页面布局结构-HTML

根据界面设计，使用HTML标签搭建页面结构布局。对策一案例导入讲解演练总结实践任务完成：（3）样式定义-CSS

根据界面设计效果，使用CSS定义页面中各元素的CSS样式。对策一案例导入讲解演练总结实践任务完成：（4）动态效果-JS

根据需求，使用JS定义函数，完成动态效果。提出任务-红灯倒计时30秒。任务需求分析任务，所需知识点，确定完成的步骤