Java web 第三章、客户端编程.ppt

第三章 客户端编程 本节课的内容： 什么是脚本语言 JavaScript概述 JavaScript嵌套HTML的方式 JavaScript基本语法 事件触发和处理 对象的基础知识 JavaScript的对象模型 window 对象 document 对象 form 对象 基本概念 JavaScript是基于对象的语言。而基于对象的基本特征，就是采用事件驱动(event-driven)。 通常鼠标或热键的动作我们称之为事件， 由鼠标或热键引发的一连串程序的动作，称之为事件驱动。 对事件进行处理的程序或函数，我们称之为事件处理程序 事件处理程序 在JavaScript中对象事件的处理通常由函数担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。 事件驱动 单击事件 onclick 改变事件 onchange 选中事件 onselect 获得焦点事件onfocus 失去焦点 onblur 载入文件 onload 卸载文件 onunload 鼠标左键按下 onmousedown 鼠标左键抬起 onmouseup 获取鼠标 onmouseover 失去鼠标 onmouseout 事件是为动作响应时出现的通知。此通知的处理代码称为事件处理程序。 在javascript中可以为指定对象的各种事件设置相对应的事件处理程序。 如: 按钮的onClick,onLoad,onunload,onMouseOver,onMouseOut 下拉框的onChange, onClick 设置事件的方法，在指定对象的代码中加入类似属性 ….. onclick=“func1()” …./ 创建用户界面 例3-5 htmlhead title事件触发和事件处理/title script language=JavaScript var Images=new Array( ); Images[0]=dot1.jpg; Images[1]=check.gif; function changeImg(ImgIndex) { document.imgs.src=Images[ImgIndex]; } /script /head body center a href=learn.html onMouseOver=changeImg(1); return true onMouseOut=changeImg(0); return true img src=dot1.jpg name=imgs border=0 width=30 height=30 font size=5软件设计/font /a /center /body /html 6 对象的基础知识 对象的基本结构 引用对象的途径 引用javascript内部对象 由浏览器环境提供 创建新对象 在JavaScript中提供了几个用于操作对象的语句和关键字及运算符。 this关键字 this是对当前的引用，在JavaScript由于对象的引用是多层次，多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，为此JavaScript提供了一个用于将对象指定当前对象的语句this。 New 运算符 创建对象使用的格式： var objectname=new Object(参数) var birthday=new Date(); var array1=new Array(5); 对象属性的引用可由下列三种方式之一实现： 使用点运算符 通过对象的下标实现引用 通过字符串的形式实现 例程 P32 通过对象下标实现饮用 ： P32 通过字符串的形式实现 ：P32 6.2 常用对象的属性和方法 JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要自己用脚本编写程序来实现这些功能。这正是基于对象编程的真正目的。 在JavaScript提供了string（字符串）、math（数值计算）和date（日期）三种对象和其它一些相关的方法 常用内部对象 串对象 该对象只有一个属性，即length。string对象的方法共有１９个，主要用于有关字符串在Web页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换。 例程 P33、34 算术函数的Math对象 Math中提供了６个属性，它们是数学中经常用到的常数Ｅ、以１０为底的自然对数ＬＮ１０、以２为底的自然对数LN2、3.14159的PI、1/2的平方根SQRT1_2,2的平方根为SQRT2。 主要方法有： abs()、sin(),cos()、asin(), acos(