第十一章窗口对象目标•理解事件、对象模型、窗口对象的概念。•掌握事件、对象模型、窗口对象的应用。概述、专业术语•JavaScript基于对象的编程机制:事件、对象模型的概念•JavaScript中窗口对象的方法和应用•术语词汇表•定义在此章节中使用的术语JavaScript的事件•事件的概念–JavaScript程序是典型的事件驱动。–事件是用户所做的,或系统自动生成的动作。通过创建响应这种动作的处理程序,使程序更具交互性。JavaScript的事件•JavaScript常见事件事件名触发条件onClick在元素上单击鼠标时onChange当表单元素(如文本框)内容发生变化时onFocus当某个元素得到焦点onBlur当某个元素失去焦点onMouseOver当鼠标悬停在元素上时onMouseOut当鼠标离开某个元素时onMouseDown当用户按下鼠标键时onMouseUp当用户释放鼠标键时onLoad当页面、图像加载完毕时onSubmit当用户提交表单(通常为按下“提交”按钮)时onResize当(用户或程序)调整窗口或框架大小时文档对象模型DOM•InternetExplorer浏览器对象模型表示浏览器的窗口,可用于检索窗口状态、显示Document对象和访问窗口中发生的事件等表示浏览器窗口中的HTML文档,用于检索文档的信息,检查和修改HTML元素和文档中的文本,处理事件包含当前有关的URL信息,它提供了一种重新加载窗口的URL方法提供客户最近访问的URL列表文档对象模型DOM•通用标准文档层次结构窗口对象的方法•Window对象所提供的方法主要有open(“URL”,“窗口名称”,“窗口特征”)close()窗口对象的方法•窗口的特征参数参数名说明width控制窗口的宽度height控制窗口的高度scrollbars控制是否显示滚动条toolbar控制是否显示工具栏,yes为显示,no为不显示。menubar控制是否显示菜单栏location控制是否显示地址栏,yes为显示,no为不显示。directories控制是否显示更新信息按钮,yes为显示,no为不显示。status控制是否显示状态栏,yes为显示,no为不显示。resizable控制是否固定窗口大小,yes为允许,no为不允许。窗口对象的应用•打开一个新窗口htmlheadtitle打开新窗口/title/headbodyonload=c()scriptlanguage=javascriptfunctionc(){window.open(page/01.htm,,width=300,height=300);}/script/body/html窗口对象的应用•打开窗口的动态变化htmlheadtitle窗口内容的变化/title/headbodyscriptlanguage=javascriptthe_w1=window.open(page/01.htm,,width=300,height=300,scrollbars);setTimeout(the_w1.location.href='page/02.htm',3000);/script/body/html窗口对象的应用•窗口内边框的设置bodyscriptlanguage=JavaScriptif(document.all){with(window.document.body.style){borderWidth=10;borderStyle=solid;borderColor=red;}}/scriptfontsize=6文字内容/fontimgsrc=page/0001.jpgheight=300/body窗口对象的应用•关闭窗口……forminputtype=buttonvalue=关闭onclick=window.close()/form……窗口对象的应用•窗口焦点的控制headscriptlanguage=javascriptfunctionwopen(){window.open(page/05.htm,window,width=300,height=300,scrollbars);}/script/headbodyonblur=setTimeout('window.focus()',10000)onload=wopen()/body窗口对象的应用•输入、输出对话框的使用prompt(“输入对话框的提示信息”)alert(“输出对话框的文本内容”)总结•事件是用户或者系统产生的动作,现在程序多数都是事件驱动的。•窗口对象主要有open、close这2个方法。更多信息•列出可扩展内容。。。•列出参考资源(附件、书籍、文章、网址等)。•请求学员反馈、回答问题。•作业问题讲解。。。作业与预习•作业。。。•预习。。。•回顾安排。。。•实验安排。。。