《DHTML5-客户端JavaScript.ppt》由会员分享，可在线阅读，更多相关《DHTML5-客户端JavaScript.ppt（47页珍藏版）》请在三一办公上搜索。
1、Client-side JavaScript,内容回顾,简述Java、JavaScript、Jscript、js之间的区别与联系？简述脚本语言与编程语言的区别？简述编译型语言与解释型语言的区别？简述js中的基本数据类型？简述js中的引用数据类型？简述js中实现面向对象的方式？简述js中的常用全局函数？简述js中的正则表达式语法？,本章目标,Web浏览器中的JavaScript脚本化窗口脚本化CSS事件与事件处理表单处理,Web浏览器环境,Web浏览器主要任务是在一个窗口中显示HTML文档，在客户端JavaScript中，表示HTML文档的是document对象，表示该文档所在的窗体的是Wind
2、ow对象。Window对象是客户端编程中的全局对象，这意味着其属性和方法可以不加对象名直接调用每一个Window对象都包含一个document对象,Web Browser,Document对象,Window对象,window.document.forms0.elements0.options2.text,客户端的对象层次,Web浏览器环境,客户端的对象层次大型的客户端对象层次的子树叫做文档对象模型DOM(Document Object Model)，document对象有时又称为0级dom事件驱动的编程模型与Winform Event类似，原理上相同,脚本化window,window对象代表浏
3、览器窗口是全局对象，其属性和方法的调用可以省略window名，这一点与C#当中的this类似。其在继承了核心JavaScript的所有全局属性和方法的基础上，还定义了诸多的属性和方法：常用属性：document、location、history、navigator、screen、self常用方法：对话框、打开/关闭窗口、计时器、获得焦点,document对象,document代表HTML或XML文档对象常用属性：forms/文档中的表单对象数组images/文档中的图像对象数组links/文档中的连接对象数组anchors/文档中的锚对象数组常用方法：getElementById()/根据指定
4、id属性返回一个节点getElementsByName()/根据指定name属性返回一个节点数组write()/writeln()/将HTML文本添加到打开的文档getElementsByTagName(),location对象,Location对象用于存储当前显示文档的web地址，常用属性：href/返回当前字符串形式的URLhost/返回主机IP和端口号hostname/返回主机名port/返回端口号search/返回询问常用方法：reload()/重新装载文档,history对象,history对象代表浏览器URL的历史常用属性：length/浏览器URL历史列表的长度常用方法：forw
5、ard()/浏览器前进back()/浏览器后退go()/转移到指定的索引的列表位置示例：history.go(1)等效于 forward();history.go(-1)等效于 back();,navigator对象,navigator对象代表正在使用的浏览器的信息常用属性：appCodeName/浏览器的代码名，mozillaappName/浏览器的名称appVersion/浏览器的版本mimeTypes/浏览器支持的mime类型数组platform/浏览器运行的OSuserAgent/客户端用户代理头的值,FF示例,对于Firefox3.5，其可能如下所示：appCodeName:Mozi
6、llaappName:Netscape appVersion:5.0(Windows;zh-CN)platform:Win32 userAgent:Mozilla/5.0(Windows;U;Windows NT 5.2;zh-CN;rv:1.9.1.3)Gecko/20090824 Firefox/3.5.5,IE示例,对于IE 8，其可能如下所示：appCodeName:MozillaappName:Microsoft Internet ExplorerappVersion:4.0(compatible;MSIE 8.0;.)platform:Win32 userAgent:Mozilla
7、/4.0(compatible;MSIE 8.0;Windows NT 5.1;Trident/4.0;.NET CLR 2.0.50727;.NET CLR 3.0.04506.648;.NET CLR 3.5.21022;.NET CLR 3.0.4506.2152;.NET CLR 3.5.30729),其他属性,Screen对象负责提供显示器的信息。常用属性：height/像素值表示的显示器的高度width/像素值表示的显示器的宽度window对象还有ScreenX、ScreenY属性，分别代表浏览器左上角在显示器中的位置self属性，window对象自身的引用,window常用方法之
8、对话框,window对象提供了三种对话框：alert()/消息对话框confirm()/确认对话框，返回一个布尔值prompt()/输入对话框，返回一个字符串值示例：alert(早上好);if(confirm(确认退出？)/执行退出代码 var str=prompt(请输入用户名);document.write(str);,窗口操作,使用open()来创建并打开新window对象打开一个名字为google的普通窗口：open(http:/,google);打开一个定制的窗口：open(b.html,null,height=200,width=400,status=yes,toolbar=no,
9、menubar=no,location=no,true);使用close()方法来关闭当前window对象注意由于安全方面的原因，只能关闭使用Open方法打开的window对象,其他方法,计时器setTimeOut()/延迟指定时间后执行指定代码块setInterval()/周期性的执行指定的代码块示例：1秒后执行书写a到文档对象 setTimeout(document.write(a),1000)每一秒执行书写a到文档对象 setInterval(document.write(a),1000)窗口获得焦点focus(),脚本化CSS,JavaScript中的CSS属性有以下命名规范：如果一个
10、CSS属性有连字符-，那么在JavaScript当中，则先删除连字符，并将紧挨着连字符后面的字符改为大写，比如：background-color 在js中变成了 backgroundColorfont-family 在js中变成了 fontFamily当CSS属性与js关键字重名时有特例：class 在js中变成了 classNamefloat 在js中变成了styleFloat,CSS,JavaScript中使用CSS属性需要注意：只能将字符串类型的赋给JavaScript的元素所有的定位属性都要求有单位，比如px返回的是字符串而非数字，比如下面代码不能满足要求：var total=e.st
11、yle.marginLeft+e.style.marginRight;应该改为：var total=parseInt(e.style.marginLeft)+parseInt(e.style.marginRight);,事件和事件处理,事件,作为HTML中属性的事件由于HTML不区分大小写，属性推荐全部小写作为JavaScript属性的事件由于JavaScript区分大小写，属性必须全部小写对于表单：可以：document.f.b.onclick=function()alert(Thanks);也可以：function fun()alert(Thanks);document.f.b.oncli
12、ck=fun;,JavaScript处理事件,将事件句柄表示为JavaScript属性的好处有：减少了HTML与JavaScript代码的混合，增强了代码的模块性使事件处理函数进行动态处理比如，我们可以在JavaScript中这样提交表单：document.forms0.submit();事件句柄可以通过其返回值说明事件的处理方式，为false的返回值可以阻止触发事件：如果validate方法返回false，则不提交表单,HTML中嵌入脚本,把客户端JavaScript代码嵌入HTML文档有以下四种方法：放置在标记对和中/Your javascript code goes here 一个脚本可
13、以放在或中，按照规范，中应当定义函数和变量，中一般放置有document.write()方法的代码块,方法2,放置在标记的src属性指定的外部文件，通常外部文件的扩展名为.js，其只包含纯粹的JavaScript代码，没有任何标签。用法如下：推荐使用这种写法，因为其实现了内容与行为的分离，从而简化了HTML文件。这样可以将JavaScript缓存到浏览器中，提高访问速度。,方法3,放置在事件句柄中，事件句柄由onclick或onmousemove这样的HTML属性值指定:常用事件：onclick 鼠标点击时触发onmousedown,onmouseup 鼠标按下和松开时触发onmouseove
14、r,onmouseout 移到和离开元素时触发onchange 用户改变元素显示的值时触发 onload 出现在body标记上，在内容完全载入时候触发,方法4,在URL之中，这个URL使用特殊的javascript:协议，比如：A 有时希望使用URL执行JavaScript代码而不改变当前显示的文档，可以在URL的结尾加上语句void 0;比较下面两种写法的异同：A B,脚本化表单,表单和表单元素都有name属性，它有两个作用服务器端程序以此属性获得表单项的值；在JavaScript中使用它不会受到文档重排的影响。比如对如下表单：以前可以写成 document.forms0.elements0
15、,表单对象,表单对象的属性acceptactionmethodelements表单对象的方法submit,表单对象示例,表单对象示例,表单元素事件,文本域事件命令按钮事件复选框事件单选按钮事件组合框和列表框事件,文本域事件,事件onFocusonBluronChange用法,文本域事件示例,文本域事件示例,命令按钮事件,事件onClick用法,命令按钮事件示例,命令按钮事件示例,HTML按钮对象的事件图10.3a：示例3的输出结果 function writeIt(value)myfm.second_text.value=value;,复选框事件,事件onClick用法,复选框事件示例,单选按
16、钮事件,事件onClick用法,单选按钮事件示例,组合框与列表框事件,事件onFocusonBluronChange用法,值1 值2 值3,组合框与列表框事件示例,组合框对象的事件function show(txt)alert(选中的是+txt);狗 鱼 鸟,组合列表框事件示例,表单有效性验证,什么是表单有效性验证在用户在表单中输入的内容提交到服务器之前，在客户端利用表单元素产生的事件，运用脚本(JavaScript)，校验用户输入的数据的有效性表单有效性验证的优点在客户端验证，速度快减轻服务器端压力应用举例,表单验证应用实例,表单对象的事件 function validatefirstnam
17、e().function validatelastname().function validateemail().function processform().处理表单事件名字：姓氏：email：附注：请输入附注,表单验证应用示例,总结（一）,事件是网页上发生的操作。每个事件都有与之相关的Event对象。事件有一个生命周期，始于触发事件的操作或条件，终于事件处理程序的最终响应。用户可以指定在生成事件时要执行的，响应该事件的JavaScript代码。这段代码称为事件处理程序。浏览器是用于显示HTML文档内容的应用程序。浏览器还公开了一些可在脚本中访问和使用的对象。Window对象表示浏览器的窗口。模型中的所有其他对象都继承自Window对象，而且是通过Window对象访问的,总结（二）,表单用于与用户进行交互在表单中可以捕获表单元素事件文本域事件命令按钮事件复选框事件单选框事件组合/列表框事件利用表单元素事件进行用户输入有效性校验,作业,实现省市区三级联动,实现如右图所示的二级菜单,作业,结合第四次课作业util.js，遵循内容(HTML)、样式(CSS)、动作(JavaScript)严格分离的原则，实现对第三次课作业设计的注册表单的验证,
