第13章JavaScript对象编程编程技术.ppt

JavaScript JavaScript 对象编程对象编程0101Window Window 窗口对象窗口对象0303JavaScriptJavaScript与表单操作与表单操作0202Document Document 文档对象文档对象0404DOM DOM 对象对象 Window Window 窗口对象窗口对象WindowWindow对象对象顶层Window对象是所有其他子对象的父对象，它出现在每一个页面上，并且可以在单个JavaScript应用程序中被多次使用。属性描述document对话框中显示的当前文档frames表示当前对话框中所有frame对象的集合location指定当前文档的URLname对话框的名字status状态栏中的当前信息defaultstatus状态栏中的当前信息top表示最顶层的浏览器对话框parent表示包含当前对话框的父对话框opener表示打开当前对话框的父对话框closed表示当前对话框是否关闭的逻辑值self表示当前对话框screen表示用户屏幕，提供屏幕尺寸、颜色深度等信息navigator表示浏览器对象，用于获得与浏览器相关的信息WindowWindow对象的方法对象的方法方法描述alert()弹出一个警告对话框confirm()在确认对话框中显示指定的字符串prompt()弹出一个提示对话框open()打开新浏览器对话框并且显示由URL或名字引用的文档，并设置创建对话框的属性close()关闭被引用的对话框focus()将被引用的对话框放在所有打开对话框的前面blur()将被引用的对话框放在所有打开对话框的后面scrollTo(x,y)把对话框滚动到指定的坐标scrollBy(offsetx,offsety)按照指定的位移量滚动对话框setTimeout(timer)在指定的毫秒数过后，对传递的表达式求值setInterval(interval)指定周期性执行代码 对话框对话框警告（警告（alertalert）利用Window对象的alert()方法可以弹出一个警告框，并且在警告框内可以显示提示字符串文本。语法：window.alert(str);参数str表示要在警告对话框中显示的提示字符串。询问对话框询问对话框（confirmconfirm）语法：window.confirm(question)window：Window对象。question：要在对话框中显示的纯文本。通常，应该表达程序想要让用户回答的问题。返回值：如果用户单击了“确定”按钮，返回值为true；如果用户单击了“取消”按钮，返回值为false。询问对话框询问对话框（promptsprompts）语法：window.prompt(str1，str2)str1：为可选项。表示字符串(String)，指定在对话框内要被显示的信息。如果忽略此参数，将不显示任何信息。str2：为可选项。表示字符串(String)，指定对话框内输入框（input）的值（value）。如果忽略此参数，将被设置为undefined。案例案例 窗口对象常用操作窗口对象常用操作window.scrollTo(0,1000)1 1window.print();2 2窗口对象常用操作窗口对象常用操作window.history.back();3 3 文档对象概述文档对象概述DOM DOM 模型模型DOM是JavaScript操作网页的接口，全称为“文档对象模型”（DocumentObjectModel）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言。Document Document 对象对象文档对象（document）代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此window对象中的方法和子对象不需要使用document来引用。通过document对象可以访问HTML文档中包含的任何HTML标记并可以动态的改变HTML标记中的内容。例如表单、图像、表格和超链接等。文档对象的属性和方法文档对象的属性和方法document.domain1 1document.location2 2documentdocument属性属性document.lastModified3 3document.open()document.close()1 1document.write()2 2documentdocument方法方法 文档对象的应用文档对象的应用案例案例关键代码关键代码/设置文档颜色functionsetColor()document.body.style.backgroundColor=red;/设置文字大小functionsetFontSize()document.body.style.fontSize=20px;/设置背景图片functionsetImage()document.body.style.backgroundImage=url(img/5.jpg);JavaScriptJavaScript与表单操作与表单操作使用使用JavaScriptJavaScript访问表单访问表单input、textarea、password、select等标签标签都可以通过value属性取到它们的值。select1 1checkbox2 2radio3 3使用使用JavaScriptJavaScript访问表单域访问表单域使用使用JavaScriptJavaScript操作表单操作表单select1 1checkbox2 2radio3 3表单的验证表单的验证案例案例关键代码关键代码functionmr_verify()/获取表单对象varemail=document.getElementById(email);varpassword=document.getElementById(password);varpasswordRepeat=document.getElementById(passwordRepeat);vartel=document.getElementById(tel);/验证项目是否为空if(email.value=|email.value=null)alert(邮箱不能为空！);return;if(password.value=|password.value=null)alert(密码不能为空！);return;if(passwordRepeat.value=|passwordRepeat.value=null)alert(确认密码不能为空！);return;DOMDOM概述概述DOM DOM 分层分层标题内容三号标题加粗内容 DOMDOM对象节点属性对象节点属性DOMDOM对象节点属性对象节点属性属性说明nodeName节点的名称nodeValue节点的值，通常只应用于文本节点nodeType节点的类型。parentNode返回当前节点的父节点。childNodes子节点列表firstChild返回当前节点的第一个子节点lastChild返回当前节点的最后一个子节点previousSibling返回当前节点的前一个兄弟节点nextSibling返回当前节点的后一个兄弟节点attributes元素的属性列表 节点的几种操作节点的几种操作节点的几种操作节点的几种操作节点的创建1 1节点的追加2 2节点的复制3 3节点的删除4 4 获取文档中的指定元素获取文档中的指定元素获取文档中的指定元素获取文档中的指定元素1.通过元素的通过元素的ID属性获取元素属性获取元素document.getElementById();2.通过元素的通过元素的name属性获取元素属性获取元素document.getElementsByName()案例案例关键代码关键代码/复制收货地址functioncopyAddress()varaddress=document.getElementById(address);/获得收货地址对象varaddressCopy=address.cloneNode(true);/完全复制对象varaddressContainer=document.getElementById(addressContainer);addressContainer.appendChild(addressCopy);/父容器添加复制对象/删除收货地址functiondelClick(obj)varaddressContainer=document.getElementById(addressContainer);vardelObj=obj.parentNode.parentNode;/获取父容器节点if(delObj.previousElementSibling=null)/判断根节点alert(无法删除！至少保留一个默认地址！);return;addressContainer.removeChild(delObj);/删除节点对象与与DHTMLDHTML相对应的相对应的DOMDOMDHTMLDHTML相对应的相对应的DOMDOM1.innerHTML和和innerText属性属性2.outerHTML和和outerText属性属性小结小结本章主要讲解了Windows窗口对象、JavaScript中的表单操作以及DOM对象。1.Windows对象代表打开的浏览器窗口，需要读者们熟记几种常用的Windows对象的方法；2.Document文档对象则代表浏览器窗口中的文档，需要读者们掌握如何动态获取和改变HTML中的内容；3.DOM对象中，需要读者们掌握DOM节点的相关操作；表单操作经常用于注册登录等信息的验证。上机指导上机指导上机指导上机指导关键代码关键代码functionprice()varp1=0;varp2=0;for(vari=0;imSpan.length;i+)if(mSpani.className=on)p1=i?6088:5288;break;for(vari=0;irSpan.length;i+)if(rSpani.className=on)switch(i)case0:p2=0;break;case1:p2=800;break;case2:p2=1600;break;oPrice.innerHTML=p1+p2;