第六章客户端脚本语言2技巧.pptVIP

网页设计与制作;第六章 客户端脚本语言6.3 对象化编程;一、什么是对象;6.3.1 对象的基本知识;对象由属性和方法两种元素组成。;内置对象 指JS中包括的基本数据类型相关的对象[String/Number/Boolean/Array/Object/Math/Date/RegExp]等对象。;文本对象 即document对象是DOM的一个部分。JS利用文本对象生成结构化的HTML和XML文档，并控制级联样式表实现动态的HTML。 流览器对象 即browser。主要包括window和navigator对象。 自定义对象;3、对象操作语句;3、对象操作语句;html body p点击下面的按钮，循环遍历对象 person 的属性。/p button onclick=myFunction()点击这里/button p id=demo/p script function myFunction() { var x; var txt=; var person={fname:Bill,lname:Gates,age:56}; for (x in person) { txt=txt + person[x]; } document.getElementById(demo).innerHTML=txt; } /script /body /html;3、对象操作语句;3、对象操作语句;3、对象操作语句;3、对象操作语句;事件处理器是与特定的文本和特定的事件相联系的 JavaScript脚本代码，当该文本发生改变或者事件 被触发时，浏览器执行该代码并进行相应的处理操 作，而响应某个事件而进行的处理过程称为事件处 理。; HTML文档事件;事件捆绑;浏览器事件;HTML元素事件;1.指定事件处理程序;在本例中，当用户在 h1 元素上点击时，会改变其内 容： html body h1 onclick=this.innerHTML=谢谢!请点击该文本/h1 /body /html;本例从事件处理器调用一个函数： html head script function changetext(id) { id.innerHTML=谢谢!; } /script /head body h1 onclick=changetext(this)请点击该文本/h1 /body /html;向 button 元素分配 onclick 事件： html body p点击按钮就可以执行 emdisplayDate()/em 函数。/p button onclick=displayDate()点击这里/button script function displayDate() { document.getElementById(demo).innerHTML=Date(); } /script p id=demo/p /body /html;使用 HTML DOM 来分配事件： html head /head body p点击按钮就可以执行 emdisplayDate()/em 函数。/p button id=myBtn点击这里/button script document.getElementById(myBtn).onclick=function(){displayDate()}; function displayDate() { document.getElementById(demo).innerHTML=Date(); } /script p id=demo/p /body /html ;onload 和 onunload 事件会在用户进入或离开页面时被触发。 onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。 onload 和 onunload 事件可用于处理 cookie。;html body onload=checkCookies() script function checkCookies() { if (navigator.cookieEnabled==true) { alert(已启用 cookie) } else { alert(未启用 cookie) } } /script p提示框会告诉你，浏览器是否已启用 cookie。/p /body /html;onchange 事件 onchange 事件常结合对输入字段的验证来使用。 html head script function myFunction() { var x=document.getElementById(fname); x.value=x.value.toUpperCase(); } /script /head body 请