DHTML5-客户端JavaScript.ppt

Client-side JavaScript,内容回顾,简述Java、JavaScript、Jscript、js之间的区别与联系？ 简述脚本语言与编程语言的区别？ 简述编译型语言与解释型语言的区别？ 简述js中的基本数据类型？ 简述js中的引用数据类型？ 简述js中实现面向对象的方式？ 简述js中的常用全局函数？ 简述js中的正则表达式语法？,本章目标,Web浏览器中的JavaScript 脚本化窗口 脚本化CSS 事件与事件处理 表单处理,Web浏览器环境,Web浏览器主要任务是在一个窗口中显示HTML文档，在客户端JavaScript中，表示HTML文档的是document对象，表示该文档所在的窗体的是Window对象。 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对象代表浏览器窗口 是全局对象，其属性和方法的调用可以省略window名，这一点与C#当中的this类似。 其在继承了核心JavaScript的所有全局属性和方法的基础上，还定义了诸多的属性和方法： 常用属性： document、location、history、navigator、screen、self 常用方法： 对话框、打开/关闭窗口、计时器、获得焦点,document对象,document代表HTML或XML文档对象 常用属性： forms /文档中的表单对象数组 images /文档中的图像对象数组 links /文档中的连接对象数组 anchors /文档中的锚对象数组 常用方法： getElementById() /根据指定id属性返回一个节点 getElementsByName() /根据指定name属性返回一个节点数组 write() / writeln() /将HTML文本添加到打开的文档 getElementsByTagName(),location对象,Location对象用于存储当前显示文档的web地址，常用属性： href /返回当前字符串形式的URL host /返回主机IP和端口号 hostname /返回主机名 port /返回端口号 search /返回询问 常用方法： reload() /重新装载文档,history对象,history对象代表浏览器URL的历史 常用属性： length /浏览器URL历史列表的长度 常用方法： forward() /浏览器前进 back() /浏览器后退 go() /转移到指定的索引的列表位置 示例： history.go(1) 等效于 forward(); history.go(-1) 等效于 back();,navigator对象,navigator对象代表正在使用的浏览器的信息 常用属性： appCodeName /浏览器的代码名，mozilla appName /浏览器的名称 appVersion /浏览器的版本 mimeTypes /浏览器支持的mime类型数组 platform /浏览器运行的OS userAgent /客户端用户代理头的值,FF示例,对于Firefox3.5，其可能如下所示： appCodeName: Mozilla appName: Netscape appVersion: 5.0 (Windows; zh-CN) platform: Win32 userAgent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:) Gecko/20090824 Firefox/3.5.5,IE示例,对于IE 8，其可能如下所示： appCodeName: Mozilla appName: Microsoft Internet Explorer appVersion: 4.0 (compatible; MSIE 8.0; .) platform: Win32 userAgent: Mozilla/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常用方法之对话框,window对象提供了三种对话框： alert() /消息对话框 confirm() /确认对话框，返回一个布尔值 prompt() /输入对话框，返回一个字符串值 示例： alert(早上好); if(confirm(确认退出？) /执行退出代码 var str = prompt(请输入用户名); document.write(str);,窗口操作,使用open()来创建并打开新window对象 打开一个名字为google的普通窗口： open(, google); 打开一个定制的窗口： open(b.html,null, height=200, width=400, status=yes, toolbar=no, 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属性有以下命名规范： 如果一个CSS属性有连字符-，那么在JavaScript当中，则先删除连字符，并将紧挨着连字符后面的字符改为大写，比如： background-color 在js中变成了 backgroundColor font-family 在js中变成了 fontFamily 当CSS属性与js关键字重名时有特例： class 在js中变成了 className float 在js中变成了styleFloat,CSS,JavaScript中使用CSS属性需要注意： 只能将字符串类型的赋给JavaScript的元素 所有的定位属性都要求有单位，比如px 返回的是字符串而非数字，比如下面代码不能满足要求： var total = e.style.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.onclick=fun;,JavaScript处理事件,将事件句柄表示为JavaScript属性的好处有： 减少了HTML与JavaScript代码的混合，增强了代码的模块性 使事件处理函数进行动态处理 比如，我们可以在JavaScript中这样提交表单： document.forms0.submit(); 事件句柄可以通过其返回值说明事件的处理方式，为false的返回值可以阻止触发事件： 如果validate方法返回false，则不提交表单,HTML中嵌入脚本,把客户端JavaScript代码嵌入HTML文档有以下四种方法： 放置在标记对和中 /Your javascript code goes here 一个脚本可以放在或中，按照规范，中应当定义函数和变量，中一般放置有document.write()方法的代码块,方法2,放置在标记的src属性指定的外部文件，通常外部文件的扩展名为.js，其只包含纯粹的JavaScript代码，没有任何标签。用法如下： 推荐使用这种写法，因为其实现了内容与行为的分离，从而简化了HTML文件。 这样可以将JavaScript缓存到浏览器中，提高访问速度。,方法3,放置在事件句柄中，事件句柄由onclick或onmousemove这样的HTML属性值指定: 常用事件： onclick 鼠标点击时触发 onmousedown, onmouseup 鼠标按下和松开时触发 onmouseover, onmouseout 移到和离开元素时触发 onchange 用户改变元素显示的值时触发 onload 出现在body标记上，在内容完全载入时候触发,方法4,在URL之中，这个URL使用特殊的javascript:协议，比如： A 有时希望使用URL执行JavaScript代码而不改变当前显示的文档，可以在URL的结尾加上语句void 0; 比较下面两种写法的异同： A B,脚本化表单,表单和表单元素都有name属性，它有两个作用 服务器端程序以此属性获得表单项的值； 在JavaScript中使用它不会受到文档重排的影响。 比如对如下表单： 以前可以写成 document.forms0.elements0 现在可以写成 document.form1.uname,表单对象,表单对象的属性 accept action method elements 表单对象的方法 submit,表单对象示例,表单对象示例,表单元素事件,文本域事件 命令按钮事件 复选框事件 单选按钮事件 组合框和列表框事件,文本域事件,事件 onFocus onBlur onChange 用法,文本域事件示例,文本域事件示例,命令按钮事件,事件 onClick 用法,命令按钮事件示例,命令按钮事件示例,HTML 按钮对象的事件图10.3a：示例3的输出结果 function writeIt(value) myfm.second_text.value=value; ,复选框事件,事件 onClick 用法,复选框事件示例,单选按钮事件,事件 onClick 用法,单选按钮事件示例,组合框与列表框事件,事件 onFocus onBlur onChange 用法, 值1 值2 值3 ,组合框与列表框事件示例,组合框对象的事件 function show(txt) alert(“选中的是“+ txt); 狗 鱼 鸟 ,组合列表框事件示例,表单有效性验证,什么是表单有效性验证 在用户在表单中输入的内容提交到服务器之前，在客户端利用表单元素产生的事件，运用脚本(JavaScript)，校验用户输入的数据的有效性 表单有效性验证的优点 在客户端验证，速度快 减轻服务器端压力 应用举例,表单验证应用实例, 表单对象的事件 function validatefirstname() function validatelastname() function validateemail() function processform() 处理表单事件 名字： 姓氏： email： 附注： 请输入附注 ,表单验证应用示例,总结（一）,事件是网页上发生的操作。 每个事件都有与之相关的Event对象。 事件有一个生命周期，始于触发事件的操作或条件，终于事件处理程序的最终响应。 用户可以指定在生成事件时要执行的，响应该事件的JavaScript代码。这段代码称为事件处理程序。 浏览器是用于显示HTML文档内容