Web前端开发——交互式设计（JavaScript+jQuery） 课件 单元6 BOM编程.pptx

Web前端开发—交互式设计

（JavaScript+jQuery）主编：孙佳帝孙文江编委：白哲佳张卓2023年电子工业出版社

CONTENTS目录JavaScript概述01JavaScript语言基础02JavaScript函数 03面向对象编程 04JavaScript内置对象05BOM编程06DOM编程07DOM事件08利用JQuery编程09设计个性化网站10Web前端开发—交互式设计

06单元6BOM编程Web前端开发—交互式设计

6.1认识BOM

1.什么是BOM？BOM被称为浏览器对象模型，它的主要功能是操作HTML内容之外的一些信息，为了实现JavaScript与浏览器之间的“对话”，比如新建窗口、Cookie设置、浏览器版本信息的显示、浏览器窗口宽高的显示等。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。BOM一直没有被标准化，不过各主流浏览器均支持BOM，都遵守最基本的规则和用法，W3C也将BOM主要内容纳入了HTML5规范之中。

2.BOM的层次结构

6.2window对象

1.window对象常用属性属性描述closed返回窗口是否已被关闭defaultStatus设置或返回窗口状态栏中的默认文本document对document对象的只读引用history对history对象的只读引用innerHeight返回窗口文档显示区的高度innerWidth返回窗口文档显示区的宽度innerWidth返回窗口文档显示区的宽度localStorage在浏览器中存储键/值对。没有过期时间length设置或返回窗口中的框架数量location返回一个包含有关文档当前位置信息的location对象name设置或返回窗口的名称navigator对navigator对象的只读引用opener返回对创建此窗口的窗口的引用outerHeight返回窗口的外部高度，包含工具条与滚动条outerWidth返回窗口的外部宽度，包含工具条与滚动条pageXOffset设置或返回当前页面相对于窗口显示区左上角的x坐标pageYOffset设置或返回当前页面相对于窗口显示区左上角的y坐标parent返回父窗口screen对screen对象的只读引用screenLeft返回浏览器左边框到屏幕左边缘的距离screenTop返回浏览器上边框到屏幕顶端边缘的距离self返回对当前窗口的引用status设置窗口状态栏中的文本top返回顶层的父窗口

2.window对象常用方法（1）对话框操作警告对话框，语法格式：alert(文本);询问回答对话框，语法格式：window.confirm(question);提示对话框，语法格式：mpt(str1,str2);（2）窗口控制窗口位置：moveTo()和moveBy()窗口大小：resizeTo()和resizeBy()滚动条的偏移位置：scrollTo()和scrollBy()

2.window对象常用方法（3）定时器按照指定的周期（以毫秒计）来调用函数或计算表达式：setInterval()在指定的毫秒数后调用函数或计算表达式：setTimeout()取消由setInterval()方法设置的定时器：clearInterval()取消由setTimeout()方法设置的定时器：clearTimeout()

【案例6-1】制作弹出对话框特效

【案例分析】用户应在注册后才能访问购物网站，若用户没有注册则应单击登录页面中的“用户注册”按钮，在弹出的注册页面中进行注册。若用户在登录页面中单击“退出”按钮，则弹出询问回答对话框。该对话框显示一行信息“您确定要退出系统吗？，以及“确定”按钮和“取消”按钮。若单击“确定”按钮，则关闭登录页面；若单击“取消”按钮，则关闭询问回答对话框。本案例首先制作一个包含“用户注册”按钮和“退出”按钮的页面，再制作一个用于显示信息的注册页面。通过编写JavaScript脚本，实现当单击“用户注册”按钮时，打开注册页面，当单击“退出”按钮时，关闭注册页面。

【解决方案】1.编写HTML结构。代码清单为open.html、register.html。（1）编写登录页面。代码清单为open.html。（2）编写注册页面。代码清单为register.html。2.编写JavaScript脚本。代码清单为open.js。functionopenwi