JavaScript动态网页设计 课件 5-2使用Windows对象和document对象_第1页
JavaScript动态网页设计 课件 5-2使用Windows对象和document对象_第2页
JavaScript动态网页设计 课件 5-2使用Windows对象和document对象_第3页
JavaScript动态网页设计 课件 5-2使用Windows对象和document对象_第4页
JavaScript动态网页设计 课件 5-2使用Windows对象和document对象_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目5.2使用Windows对象和document对象主讲：***2024年1月2日JavaScript动态网页设计1子项目项目5BOM对象和事件表单常用元素2024年1月2日JavaScript动态网页设计2学习任务

任务1使用Windows对象

任务2使用document对象

任务6

History对象

任务3使用Location对象任务4使用navigator对象任务5使用screen对象项目5BOM对象和事件项目5BOM对象和事件任务1认识window对象window对象是浏览器窗口对文档提供一个显示的容器，通过window对象可以控制窗口的大小和位置、由窗口弹出的对话框、打开窗口与关闭窗口，还可以控制窗口上是否显示地址栏、工具栏、状态栏等栏目。对于窗口中的内容，window对象可以控制是否重载网页、返回上一个文档或前进到下一个文档，甚至于还可以停止加载文档。所有浏览器都支持

window

对象。它表示浏览器窗口。项目5BOM对象和事件属性说明document对话框中显示的当前文档location指定当前文档的URLname对话框的名字status状态栏中的当前信息top表示最顶层的浏览器对话框parent表示包含当前对话框的父对话框opener表示打开当前对话框的父对话框self表示当前对话框screen表示用户屏幕，提供屏幕尺寸、颜色深度等信息navigator表示浏览器对象，用于获得与浏览器相关的信息1、Window对象的属性项目5BOM对象和事件所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。甚至HTMLDOM的document也是window对象的属性之一：

window.document.getElementById("header");与此相同：document.getElementById("header");项目5BOM对象和事件有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。对于InternetExplorer、Chrome、Firefox、Opera以及Safari：

window.innerHeight-浏览器窗口的内部高度window.innerWidth-浏览器窗口的内部宽度对于InternetExplorer8、7、6、5：document.documentElement.clientHeightdocument.documentElement.clientWidth或者document.body.clientHeightdocument.body.clientWidth项目5BOM对象和事件实用的JavaScript方案（涵盖所有浏览器）：范例5-1显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）：<html><head><title>下拉框</title><scriptlanguage="javascript">Varw=window.innerWidth//document.documentElement.clientWidth//document.body.clientWidth;varh=window.innerHeight//document.documentElement.clientHeight//document.body.clientHeight;alert(w+""+h);</script></head><body></body></html>项目5BOM对象和事件2、Window对象的方法alert(“m提示信息")显示包含消息的对话框。confirm（“提示信息”）显示一个确认对话框，包含一个确定取消按钮Prompt（”提示信息“）弹出提示信息框open("url","name")打开具有指定名称的新窗口，并加载给定URL所指定的文档；如果没有提供URL，则打开一个空白文档close()关闭当前窗口setTimeout（”函数”,毫秒数）设置定时器：经过指定毫秒值后执行某个函数clearTimeout(定时器对象)项目5BOM对象和事件2.1对话框的类型Windows对象提供了3种对话框，包括警告对话框、询问对话框和输入对话框。练习5-2使用Windows对象alert()、confirm()、prompt()实现淘宝网一口价拍卖效果

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><scripttype="text/javascript">functionjingpai(price){if(price<10000){document.write("拍卖价格"+price+"<br/>"+"价格太低，竞拍不成功");}else{ document.write("拍卖价格"+price+"<br/>"+"竞拍成功");}}</script>项目5BOM对象和事件</head><body><p>苹果手机8plus</p><p><inputname="jingpai"type="button"value="开始竞拍"onclick="jingpai(prompt('竞拍，请出一口价',1000))"/></p></body></html>项目5BOM对象和事件2.1范例5-2使用Open方法和close是指通过js脚本控制打开和关闭一个新的窗口：

<html><head><scripttype="text/javascript">functionopenwindow(){window.open("http://www.baidu.htm");}functionclosewindow(){window.close();}</script>项目5BOM对象和事件</head><body><from><inputtype=buttonvalue="打开窗口"onClick="openwindow()"><inputtype=buttonvalue="关闭窗口"onClick="closewindow()"></from><body>项目5BOM对象和事件任务2使用document对象通过HTMLDOM，可访问JavaScriptHTML文档的所有元素。HTMLDOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。HTMLDOM模型被构造为对象的树。项目5BOM对象和事件HTMLDOM树项目5BOM对象和事件1、document的属性名称说明alinkColor设置或检索文档中所有活动链接的颜色bgColor设置或检索Document对象的背景色body指定文档正文的开始和结束linkColor设置或检索文档链接的颜色location包含关于当前URL的信息title包含文档的标题url设置或检索当前文档的URLvlinkColor设置或检索用户访问过的链接的颜色使用document属性设置body背景颜色的方法document.body.style.backgroundColor=red;项目5BOM对象和事件2、document的方法名称说明clear()清除当前文档close()关闭输出流并强制显示发送的数据write("text")将文本写入文档项目5BOM对象和事件范例5-4使用Windows对象document对象write()方法输出长方形的面积和周长：

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><scripttype="text/javascript">varwidth=100;varheight=20;varmianji=width*height;varzhouchang=2*(width+height)document.write("长方形的面积为"+mianji+"<br\>");document.write("长方形的周长为"+zhouchang);</script></head><body></body></html>运行结果如下所示：项目5BOM对象和事件通过后面DOM章节的学习，可了解document对象是可编程的对象模型，JavaScript获得了足够的能

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论