学习使用JavaScript.ppt

主讲教师：张福萍 html head titlejs7.htm/title /head body form input type=button value=提示信息 onClick = alert(这是一个单击鼠标事件的例子！); /form /body /html （2）程序说明 在onClick等号后，可以使用JavaScript中内部的函数, 也可以使用自己编写的函数作为事件处理程序，还可以直接 使用JavaScript的代码等。 在上面例5_6中，我们已经调用过自定义的函数。 a href=# onClick= nonce_Time() 当前时间!/a 表示事件的属性名最好使用统一的代码风格，如on使用小写， 而事件名Click的第一个字母大写。 重点提示 注意规范事件属性名的写法。 （3）网页效果预览 图5-13 读取系统当前时间 ② onChange改变事件 　　当利用text或textarea元素输入字符值改变时引发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。 例： form input type=text name=Test value=Test onChange=check(this.test) /form ③ 选中事件onSelect 　　当Text或Textarea对象中的文字被选中后，引发该事件。 ④ 获得焦点事件onFocus 　　当用户单击Text或textarea以及select对象时，产生该事件。 此时该对象会被选中。 ⑤ 失去焦点onBlur 　　当text对象或textarea对象以及select对象不再拥有焦点、而 退到后台时，引发该文件，它与onFocas事件是一个对应的关系。 ⑥ 载入文件onLoad 　　当文档载入时，引发该事件。onLoad一个作用就是在首次载入 一个文档时检测cookie的值，并用一个变量为其赋值，使它可 以被源代码使用。 ⑦ 卸载文件onUnload 　　当Web页面退出时引发onUnload事件，并可更新Cookie的状态。 重点提示 JavaScript中还引入了很多其它事件。如： onMouseOver、onSubmit、onDblClick、onDragDrop、onKeyDown、 onKeyPress、onKeyUp、onMouseDown、onMouseMove、onMouseOut、 onMouseUp、onMove、onResize。详见JavaScript使用手册。 为了帮助大家理解事件驱动的概念，我们编写一个自动装入和 自动卸载的例子，当载入HTML文档时，调用loadform()函数，当退 出该文档，进入另一个HTML文档时，调用unloadform()函数。 通过下面的实例，我们学习编写自动装入和自动卸载的脚本。 例 5-8: 编写一个自动装入和自动卸载的脚本 操 作：按下列步骤进行 （1）将下列源代码保存为网页文件js8.htm 并运行 html head titlejs8.htm/title script Language=JavaScript !-- //定义一个函数，当载入HTML文档时调用它 （续） function loadform() alert(欢迎访问我们的网页,这是一个自动装载例子!); } //定义一个函数，当退出HTML文档时调用它 function unloadform() { alert(谢谢光临再见,这是一个自动卸载例子!); } -- /Script /head body onLoad=loadform() onUnload=unloadform() a href=新浪首页/a /body /html 操作技巧 装载onLoad和 卸载onUnload 事件分别由两 个自定义的函 数去处理。 （2）程序说明 本例中，在网页头部，JavaScript自定义了两个函数。在网页主体部分，body标识中，调用函数，定义了装载和卸载事onLoad=loadform() onUnload=unloadform()。 （3）网页浏览效果 在浏览器中打开此网页时，调用载入函数loadform() 图5-14 调用载入函数loadform() 点击新浪首页，退出此网页时，调用卸载函数loadform() 图5-15 调用卸载函数loadform() 基于对象的JavaScript语言 5.2.6 基于对象的JavaScript语言 　　JavaScript语言是基于对象的（Object-Based），而不是面向 对象的（object-oriented）