JX-基于Java技术的Web应用开发JavaScript脚本语言-6-wangcpI.ppt

Web应用开发(四) -JavaScript脚本语言  主要内容 JavaScript概述 基本语法 常用内部对象 对象层次与事件处理 浏览器内部对象 综合实例 小结 JavaScript概述(1) JavaScript概述(2) JavaScript概述(3) JavaScript概述(4) 主要内容 JavaScript概述 基本语法 常用内部对象 对象层次与事件处理 浏览器内部对象 综合实例 小结 基本语法(1) 基本语法(2) 基本语法(3) 基本语法(4) 基本语法(5) 基本语法(6) 基本语法(7) 基本语法(8) 基本语法(9) 基本语法(10) 基本语法(11) 基本语法(12) 基本语法(13) 基本语法(14) 基本语法(15) 基本语法(16) 基本语法(17) 基本语法(18) 基本语法(19) 主要内容 JavaScript概述 基本语法 常用内部对象 对象层次与事件处理 浏览器内部对象 综合实例 小结 常用内部对象(1) 常用内部对象(2) 常用内部对象(3) 主要内容 JavaScript概述 基本语法 常用内部对象 对象层次与事件处理 浏览器内部对象 综合实例 小结 对象层次与事件处理 对象层次与事件处理 对象层次与事件处理 JavaScript的对象层次 JavaScript中的对象并不都是独立存在的，而是有着层次结构。对象可以依照层次来进行调用。 事件驱动与事件处理 当HTML文档或文档中的元素发生了某些动作时，浏览器就会产生一个事件（Event）。例如浏览加载文档完毕是load事件、单击一个按钮是click事件、双击鼠标是dblclick事件、在键盘上按下一个键是keypress事件、将鼠标从一个对象上滑过是mouseover事件。 程序员可以事先定义好一个事件的处理程序，一旦浏览器中产生了某个事件，浏览器会就自动调用这个处理程序。这种通过事件来调用程序的方式称为事件驱动。 浏览器常用事件列表 1. 鼠标移动事件：鼠标移动(mousemove)、鼠标离开对象（mouseout）、鼠标移到对象上（mouseover）三种。 2. 鼠标点击事件：单击事件（click）、双击事件（dblclick）、鼠标键按下（mousedown）和鼠标键释放（mouseup）四种。 3. 加载与卸载事件，分别为load与unload。其中load事件是在加载网页完毕时产生的事件，加载网页指浏览器打开网页；unload事件是卸载网页时产生的事件，卸载网页是指关闭浏览器窗口或者从当前页面跳转到其他页面，即当前网页从浏览器窗口中卸载。 4. 文本框事件：得到焦点（focus）通常是指选中了文本框，并且可以在文本框中输入文字。失去焦点(blur)与得到焦点相反，是指将焦点从文本框中移出去。 5. 键盘事件：通常是指在文本框中输入文字时发生的事件，与鼠标事件相似，键盘事件也分为按下键盘键事件（keydown）、释放键盘键事件（keyup）和按下并释放键盘事件（keypress）三种。 6. 表单事件：提交事件（submit）与重置事件（reset）都是在Form元素中所产生的事件。提交事件是在提交表单时激发的事件，重置事件是在重置表单内容时激发的事件。这两个事件都能通过接收返回的false来取消提交表单或取消重置表单。 7. 选择事件（select）和改变事件（change） ：选择事件指文本框中的文字被选择时产生的事件。改变事件则通常在文本框或下拉列表框中激发。 简单示例 谢谢大家！ * 教学课件 JavaScript最早是由NetScape公司开发出来的一种跨平台的、基于对象的脚本语言，目前为大多数浏览器所支持。 JavaScript的优点： 简单性 动态性 基于对象的语言 安全性 跨平台性 减少服务器开销(节省CGI的交互时间) 实例 html head title欢迎来到JavaScript世界！/title script type=text/javascript function mouseOver() { //访问文档对象(即WEB页面包含的元素) document.b1.src =mouse_on.jpg; } function mouseOut() { //访问文档对象(即WEB页面包含的元素) document.b1.src =mouse_off.jpg; } //向document文档输出内容，即向WEB页面输出内容。 document.write(欢迎来到JavaScript世界!br); /script /head body a href=# img border