JavaScript(二).ppt

《JavaScript(二).ppt》由会员分享，可在线阅读，更多相关《JavaScript(二).ppt（94页珍藏版）》请在三一办公上搜索。

1、JavaScript（二）,杨 涛,浏览器对象简介,浏览器对象的分层结构,Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 window.alert().除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法

2、。Window 对象的 window 属性和 self属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及 frame 数组都引用了与当前 Window 对象相关的其他 Window 对象。,window 对象简介,Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。,window 对象集合frames,frames,window 对象常用属性,Wi

3、ndow 对象常用方法,open（”打开窗口的url”，”窗口名”，”窗口特征”）窗口的特征如下，可以任意组合：height：窗口高度；width：窗口宽度；top：窗口距离屏幕上方的象素值；left：窗口距离屏幕左侧的象素值；toolbar：是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。resizable：是否允许改变窗口大小，yes或1为允许 location：是否显示地址栏，yes或1为允许 status：是否显示状态栏内的信息，yes或1为允许；,Window 对象open方法,我们需要预先制作好广告页面，假设为adv.htm，打开广告窗口的语

4、句如下：open(“adv.htm”,“”,“toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150”);,Window 对象open方法,function openwindow()open(adv.htm,toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=650,height=150);看看和我一起打开的广告窗口,使用 Open 方法打开广告新窗口,添加页面加载事

5、件,Window 对象open方法,示例,open,Document 对象,集合,document集合,Document 对象,属性,document属性,Document 对象,方法,document方法,Document 对象,无标题文档function change(color)document.bgColor=color;移过来我变色给你看看！变红色|变蓝色|变黄色,利用document对象的bgColor属性改变背景色,添加鼠标悬停事件,document对象,History对象属性,alert(history.length);,返回结果为数字：类似1等,History对象方法,Bac

6、k()方法相当于后退按钮forward()方法相当于前进按钮go(1)代表前进1页，等价于forward()方法；go(-1)代表后退1页，等价于back()方法；,Location对象,属性,方法,Location对象,History 对象和Location 对象,history和location对象,History 和Location 对象,function jump()location.href=document.myform.menu1.value;.-请选择季节景色-春天美景 夏天一色,根据用户的选择，修改跳转的网址,添加选项改变事件,Navigator 对象,Navigator对象

7、描述：Navigator 对象包含有关浏览器的信息。Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。,Navigator 对象,集合,Navigator 对象包含有关浏览器的信息。Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。虽然这个对象的名称显而易见的是 N

8、etscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。,Navigator 对象,属性,Navigator 对象,属性,Navigator 对象,方法,Screen 对象,Screen 对象描述每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择

9、使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。,Screen 对象,事件句柄、事件、事件函数,事件句柄:事件句柄（又称事件处理函数），是指事件发生时要进行的操作。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄 1.被当作标签的属性 如:2.可以看作给

10、这个标签加上一个监听器3.事件句柄以on开头，后面单词首字母大写,事件1.好比j2se的事件2.一个事件句柄对应一个事件 如:onClickclick当一个事件源发出一个click事件的时候，onClick这个事件句柄就会作出相应的响应事件全都小写,事件句柄、事件、事件函数,事件函数指事件响应方法,事件句柄、事件、事件函数,Event 对象,Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！,JavaScript 事件（Event事件句柄）一,JavaScript 事件（Event事件句柄）

11、二,function myfun1()if(document.myform.card.value=请注意格式：10 xxxxxx)document.myform.card.value=;function myfun2()var a=document.myform.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document.myform.card.focus();,onFocus和onBlur 事件-1,文本框获得鼠标焦点时（onFocus）调用的函数：清空卡号文本框,文本框失去鼠标焦点时（onBlur）调用的函数：判断格

12、式是否正确,focus()方法再次获得焦点，即鼠标光标回到卡号文本框,卡号：密码：,onFocus和onBlur 事件-2,表单元素样式,添加事件处理,onMouseOver和onMouseDown事件,图片切换 低价转让哈士奇弟弟 移过来看看俺啊,添加事件处理：切换图片,onMouseOver=src=dog2.jpg 表示本图片的图片名称替换为dog2.jpg。请注意：由于外面两端已有双引号，为区别起见，dog2.jpg改用为单引号括起来。,MouseOver和MouseDown事件,Event属性（鼠标/键盘属性）,标准Event属性,标准Event方法,Event常用属性和方法.htm

13、l,为一个事件注册监听函数的方法,传统的方法(只能注册一个监听函数)：object.onclick=function();下面两种方法能注册多个监听函数IE中的方法：object.attachEvent(“nameOfEvent”,fnHandler);注意：nameOfEvent事件需加on 如：onclick DOM中的方法（火孤）：object.addEventListener(“nameOfEvent”,fnHandler,bCapture);注意：nameOfEvent事件不需加on 如：click,事件对象的获取,IE中，事件对象是window对象的属性event，事件处理函数可以

14、按如下方式访问事件对象：text3.onclick=function()var oevent=window.event;DOM标准中，event对象是作为唯一的参数传递给事件处理函数；text3.onclick=function()var oevent=arguments0;text3.onclick=function(oevent)alert(oevent);,事件对象的属性和方法,问题：ie和DOM标准不太一样！两者相似的地方：1、获取事件的类型var sType=oEvent.type;2、在键盘事件发射时，获取按键代码(keydown/keyup事件)IE:var iKeyCode=o

15、Event.keyCode;DOM:Var iCharCode=oEvent.charCode;3、获取事件源 IE：var oTarget=oEvent.srcElement;DOM:var oTarget=oEvent.target;,事件对象的属性和方法,4、获取客户端坐标在鼠标相关的事件中，可以用clientX和clientY属性获取鼠标指针在客户端的位置Var iClientX=oEvent.clientX;Var iClientY=oEvent.clientY;,Anchor对象,Anchor 对象表示 HTML 超链接。在 HTML 文档中 标签每出现一次，就会创建 Anchor

16、 对象。锚可用于创建指向另一个文档的链接（通过 href 属性），或者创建文档内的书签（通过 name 属性）。您可以通过搜索 Document 对象中的 anchors 数组来访问锚，或者使用 document.getElementById()。,Anchor对象方法,Anchor对象方法,事件处理程序和表单元素简介,当事件发生时，将执行与之相关的 JavaScript 代码,当发生特定事件时，事件处理程序指定要执行哪些 JavaScript 代码,事件处理程序和表单元素简介 2-2,当用户单击“注册”按钮时，将弹出一条消息。,function button_click()alert(“请向

17、本网站注册);,Form 对象,Form 对象代表一个 HTML 表单。在 HTML 文档中 每出现一次，Form 对象就会被创建。每个form对象内部都含有elements 集合,集合,Form 对象标准属性,Form 对象方法,命令按钮对象,命令按钮对象是网页中最常用的元素之一,“按钮-事件处理程序,onSubmit事件处理代码：如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。,提交表单,在form中的onsubmit事件经常被用来在提交数据之前进行检查，如果return fasle则不提交数据给服务器了。如果是在button中使用onclick=“thi

18、s.form.submit()”则提交数据，但是不会出发onsubmit事件,文本框对象 事件处理程序,文本框对象,card,price,number,tot,myform,文本框对象-onChange 事件处理程序,function clearText()if(document.myform.card.value=输入您的会员帐号)document.myform.card.value=;function check()var a=document.myform.card.value;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);document

19、.myform.card.focus();document.myform.card.select();function compute()var price=document.myform.price.value;var number=document.myform.number.value;document.myform.tot.value=price*number;,onFocus事件调用的函数clearText（）清空帐号文本框中的内容,onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字,onChange事件调用的函数compute()用来计算总价,下拉

20、列表框,-请选择开户帐号的城市-北京市 上海市 重庆市 天津市 四川省 山东省 湖北省,下拉列表框-事件和属性,options0,options1,selectedIndex属性：表示被选中的索引号：3,value属性：被选中选项的值,复选框对象,当用户需要在选项列表中选择多项时，可以使用复选框对象要创建复选框对象，请使用 标签,请选择您的爱好 电影 电影,复选框-事件处理程序,复选框-事件处理程序,checkbox1,checkbox2,checkbox3,设置复选框的值,checkbox4,myform,复选框-事件处理程序,function buy()var s=;if(document

21、.myform.checkbox1.checked=true)/如果被选中 s=s+document.myform.checkbox1.value+“n”;/累计选中的商品 if(document.myform.checkbox2.checked=true)s=s+document.myform.checkbox2.value+n;if(document.myform.checkbox3.checked=true)s=s+document.myform.checkbox3.value+n;if(document.myform.checkbox4.checked=true)s=s+documen

22、t.myform.checkbox4.value+n;/if(confirm(您定购了以下物品，确定吗？：n+s)=true)document.write(您定购了以下物品:+s+);,单击”成交“按钮调用的函数：检查每个复选框的选中情况，累计用户选中的商品,是为了原样显示字符串中的换行”n”格式,onClick=buy()“,复选框-事件处理程序,function buy()var s=;for(var i=0;i+s+);/其他代码略/其他代码略,2.使用数组和for循环大大简化代码,1.修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox,单选按钮对象,当用户只需要从

23、选项列表中选择一个选项时，可以使用单选按钮对象要创建单选按钮对象，请使用 标签,男女,单选按钮-事件和属性,单选按钮-事件处理程序,为了保证单选，两个单选按钮的名称都为myradio，组成了myradio数组,单选按钮事件处理程序,function buy()var s=;for(var i=0;i+s+);else if(confirm(您准备卖出下物品，确定吗？：n+s)=true)document.write(您卖出了以下物品:+s+);,根据用户是买家还是卖家，弹出不同的确认信息框,判断是否选中第一个单选按钮(买家),表单验证 2-1,JavaScript 最常见的用法之一就是验证表单

24、对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法,表单验证 2-2,function validate()var f=document.reg_form;if(f.uname.value=)alert(请输入姓名);f.uname.focus();return false;if(f.gender0.checked=false,检查姓名,检查性别,检查密码,表单验证 2-2,q=f.email.value.indexOf();if(q=-1)alert(请输入有效的电子邮件地址);f.email.focus();return false;if(f.age

25、.value 99|isNaN(f.age.value)alert(请输入有效的年龄！);f.age.focus();return false;,检查邮件地址,检查年龄,HTML DOM对象,JavaScript使用两种对象模型：BOM和DOM；BOM(Browser Object Model,浏览器对象模型)；BOM模型通常通过Window对象去访问，也许该模型被称为窗口对象模型更合适HTML DOM(Document Object Model,文档对象模型)是W3C的一个标准HTML DOM为HTML定义了一系列标准的对象,以及访问和操作HTML文档的标准方法所有的HTML元素以及它们的文

26、本和属性都可以通过DOM访问.元素的内容可以被修改或删除,新的元素可以被创建.HTML DOM是平台和语言无关的,因此它可以被任何的程序设计语言使用,如:Java,JavaScript,和 VBScript.,HTML文档,实例的家谱树,DOM中的document,Javascript中大部分的DOM处理过程都是从document开始。,DOM Example,节点,每个独立的元素、容器或文本块被称为一个节点。当一个容器包含另一个容器时，对应的节点之间有父子关系；DOM中定义了6中节点，所有支持W3C DOM的浏览器都实现了前三种节点。,重要的方法,getElementById（）getEle

27、mentsByTagName（）getAttribute()setAttribute(),最重要的几个方法,文档对象的属性,DOM示例1.html,Document.all,HTML文档在载入时每个元素都被标注成一个节点，并被分配了一个编号，可以使用document.all数组进行访问；非标准的DOM方法，ie中支持,DOM示例2.html,DOM中的节点处理方法,DOM示例4.html,DOM示例5.html,Table 对象,Table 对象代表一个 HTML 表格。在 HTML 文档中 标签每出现一次，一个 Table 对象就会被创建。,集合,Table 对象属性,Table 对象方法,

28、操纵CSS的属性,DOM/StyleExample.htm,DOM操纵CSS的属性,getPropertyValue(propertyName)：返回CSS特性propertyName的字符串Item(index)：返回在给定索引index处的CSS的特性的名称。removeProperty(propertyName)：从CSS中删除propertyName的定义setProperty(propertyName,value,priority)：设置CSS特性,DOM/StyleExample2.htm,DOM/TooltipExample.htm,可折叠区域,要点：Css的display默认为

29、block，但把它设置为none，则元素从页面流中移除。,CollapsibleSectionExample.htm,java,php,java,php,ruby,页舌练习,innerText和innerHTML,使用DOM在中插入文本，变成new text for divoDiv.appendChild(document.createTextNode(“new text for div”);使用innerText，则：oDiv.innerText=“new text for div”;问题?使用DOM在中插入html代码，变成Helloworld,InnerTextExample.htm,V

30、ar oString=document.createElement(“strong”);oString.appendChild(document.createTextNode(“Hello”);Var oEm=document.createElement(“em”);oEm.appendChild(document.createTextNode(“World”);oDiv.appendChild(oString);oDiv.appendChild(oEm);,oDiv.innerHTML=“Helloworld”;,innerText和innerHtml并非DOM标准的一部分，但是大部分的浏览

31、器都支持，Mozilla只支持innerHtml,InnerHTMLExample.htm,当我们在网上冲浪时，总会看到带有 runtime 错误的 Javascript 警告框，同时会询问我们“是否进行 debug？”。像这样的错误信息或许对开发人员有用，对用户则未必。当错误发生时，他们往往会选择离开这个站点。有两种在网页中捕获错误的方法：使用 try.catch 语句。(在 IE5+、Mozilla 1.0、和 Netscape 6 中可用)使用 onerror 事件。这是用于捕获错误的老式方法。(Netscape 3 以后的版本可用)注意：chrome、opera 和 safari 浏览

32、器不支持 onerror 事件。,JavaScript中的错误捕获,trycatch(err),trycatch(err),try.catch 语句.html,Throw 声明,Throw 声明throw 声明的作用是创建 exception（异常）。你可以把这个声明与 try.catch 声明配合使用，以达到控制程序流并产生精确错误消息的目的。,throw声明.html,onerror 事件,onerror 事件我们刚讲过如何使用 try.catch 声明来捕获网页中的错误。现在，我们继续讲解如何使用 onerror 事件来达到相同的目的。只要页面中出现脚本错误，就会产生 onerror 事件。如果需要利用 onerror 事件，就必须创建一个处理错误的函数。你可以把这个函数叫作 onerror 事件处理器(onerror event handler)。这个事件处理器使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。,onerror 事件.html,HTML、CSS、JavaScript总结,熟悉HTML语言的机制和运用常用的标签。基本CSS的使用要熟练。扩展自己的开发视野（Dreamweaver）。务必掌握JavaScript中对象（js内置对象、浏览器对象、文档对象）。,