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

Web应用开发 四 JavaScript脚本语言 教学课件 2 主要内容 JavaScript概述基本语法常用内部对象对象层次与事件处理浏览器内部对象综合实例小结 3 JavaScript概述 1 JavaScript最早是由NetScape公司开发出来的一种跨平台的 基于对象的脚本语言 目前为大多数浏览器所支持 JavaScript的优点 简单性动态性基于对象的语言安全性跨平台性减少服务器开销 节省CGI的交互时间 4 JavaScript概述 2 实例 欢迎来到JavaScript世界 functionmouseOver 访问文档对象 即WEB页面包含的元素 document b1 src mouse on jpg functionmouseOut 访问文档对象 即WEB页面包含的元素 document b1 src mouse off jpg 向document文档输出内容 即向WEB页面输出内容 document write 欢迎来到JavaScript世界 5 JavaScript概述 3 如何使用JavaScript脚本 使用标记 有3种方法 嵌入HTML文件行内 嵌入HTML文件内 链接js文件 1 嵌入HTML代码行内 源代码示例 6 JavaScript概述 4 2 嵌入文件3 链接文件 javascript脚本 W3C组织不赞成 W3C组织推荐 源代码示例 7 主要内容 JavaScript概述基本语法常用内部对象对象层次与事件处理浏览器内部对象综合实例小结 8 基本语法 1 基本语法数据类型 常量与变量对象与数组表达式与运算符语句函数 9 基本语法 2 数据类型 除以上类型外 JavaScript也可以定义数组类型 10 基本语法 3 常量与变量 常量主要有 布尔常量 整型常量 浮点型常量 字符串常量 字符串常量使用单引号 或双引号 进行包含 注 字符串常量必须写在一行中 如果要换行 必须使用符号 续行 而其他代码则不存在续行这个问题 变量定义 变量名以字母 下划线 美元符 开头的字母 数字 下划线 和美元符 的组合 注 1 JavaScript区分大小写 2 JavaScript中的变量在定义时不指定数据类型 而是以关键字var代替 var指varible 变量定义示例 varstr JavaScript语句以 结尾 说明 注释方法与C Java相同 字符串续行示例 代码不续行示例 11 基本语法 4 null和undefined示例 document write document getElementById PKU 的结果为 document getElementById PKU getElementById方法通过id来访问页面元素 document write document MIT的结果为 document MIT varPKU 定义一个变量document write PKU的值为 PKU 12 基本语法 5 数据类型转换数据类型转换方式有两种 隐式转换和显式转换 隐式转换 Javascript是一种泛类型语言 泛类型指不必显式定义变量的数据类型 在定义一个变量时 不需要指定变量的数据类型 而是使用var 使得JavaScript可以很方便灵活地进行隐式转换 显式转换指强制类型转换 强制类型转换对象有 Number String Boolean Object等 强制转换源代码示例 数据类型判断运算符 typeof 表达式 13 基本语法 6 数值类型判断 NaN与isNaN函数 NaN原义为 NotaNumber 当运算无法返回正确的数值时 就会返回 NaN 值 NaN值比较特殊 因为它 不是数字 所以任何数跟它都不相等 包括与其本身相比 isNaN 是一个JavaScript内部函数 判断对象是否为NaN 常用于判断将字符串转换成数值类型时 例如判断用户输入的是否全为数字 14 基本语法 7 NaN和isNaN源代码示例 varshuzi 100 定义一个变量document write shuziisnotanumber isNaN shuzi varstr 100 定义一个变量document write strisnotanumber isNaN str varstr1 test100 定义一个变量document write str1isnotanumber isNaN str1 字符串转数值失败 isNaN返回true 15 基本语法 8 基本语法数据类型 常量与变量对象与数组表达式与运算符语句函数 16 基本语法 9 对象与数组 JavaScript语言是基于对象的 Object Based 的脚本语言 它没有提供抽象 继承 重载等有关面向对象语言的许多功能 对象定义方式 var对象名 属性名1 属性值1 属性名2 属性值2 也可使用new运算符生成一个对象实例 例如varcar newObject 接着使用赋值就给对象增加一个属性 例如car price 100 数组也是对象 定义格式如下 1 vararr1 newArray 或vararr1 2 vararr2 newArray 数组大小 3 vararr3 newArray 元素1 元素2 访问数组元素 arr1 0 数组下标从0开始 17 基本语法 10 基本语法数据类型 常量与变量对象与数组表达式与运算符语句函数 18 基本语法 11 表达式与运算符 JavaScript中的表达式与运算符和C Java中的表达式与运算符十分相似 表达式其实就是JavaScript中的一个语句 JavaScript的运算符如下 19 基本语法 12 特殊运算符 in new delete和void运算符 in运算符 测试对象中是否存在该下标索引或是否存在相应属性 new运算符 用于定义一个新的内置对象实例 delete运算符 用于删除一个对象实例 void运算符 void运算符计算一个表达式但是不返回值 主要用于避免表达式返回值 in运算符示例 void运算符示例 20 基本语法 13 基本语法数据类型 常量与变量对象与数组表达式与运算符语句函数 21 基本语法 14 语句主要有 选择语句和循环语句 选择语句 if语句和switch语句 if 表达式 if 表达式 else if 表达式 elseif 表达式 else switch 条件表达式 case常量1 case常量2 default 22 基本语法 15 语句主要有 选择语句和循环语句 循环语句 while语句和for语句 while do while for for 对象属性名in已知对象名 枚举数组元素示例 枚举对象属性示例 forin语句多用于表单元素的枚举和判断 23 基本语法 16 语句主要有 选择语句和循环语句 循环语句 while语句和for语句 循环控制语句 break语句和continue语句 24 基本语法 17 特殊语句 with语句 在with语句体内 任何对变量的引用被认为是这个对象的属性 以节省一些代码 with object with源代码示例 25 基本语法 18 基本语法数据类型 常量与变量对象与数组表达式与运算符语句函数 26 基本语法 19 函数 函数定义语法格式如下 定义函数function函数名 参数1 参数2 return返回值 函数调用函数名 参数1 参数2 注意 函数定义不能嵌套 函数综合示例 27 主要内容 JavaScript概述基本语法常用内部对象对象层次与事件处理浏览器内部对象综合实例小结 28 常用内部对象 1 常用内部对象主要有 String Math和Date对象 String对象 其属性和方法如下 简单示例 29 常用内部对象 2 常用内部对象主要有 String Math和Date对象 Date对象 其属性和方法如下 30 常用内部对象 3 常用内部对象主要有 String Math和Date对象 Date对象 其属性和方法如下 续 简单示例 31 主要内容 JavaScript概述基本语法常用内部对象对象层次与事件处理浏览器内部对象综合实例小结 32 对象层次与事件处理 JavaScript的对象层次 JavaScript中的对象并不都是独立存在的 而是有着层次结构 对象可以依照层次来进行调用 33 对象层次与事件处理 事件驱动与事件处理 当HTML文档或文档中的元素发生了某些动作时 浏览器就会产生一个事件 Event 例如浏览加载文档完毕是load事件 单击一个按钮是click事件 双击鼠标是dblclick事件 在键盘上按下一个键是keypress事件 将鼠标从一个对象上滑过是mouseover事件 程序员可以事先定义好一个事件的处理程序 一旦浏览器中产生了某个事件 浏览器会就自动调用这个处理程序 这种通过事件来调用程序的方式称为事件驱动 34 对象层次与事件处理 浏览器常用事件列表 1 鼠标移动事件 鼠标移动 mousemove 鼠标离开对象 mouseout 鼠标移到对象上 mouseover 三种 2 鼠标点击事件 单击事件 click 双击事件 dblclick 鼠标键按下 mousedown 和鼠标键释放 mouseup 四种 3 加载与卸载事件 分别为load与unload 其中load事件是在加载网页完毕时产生的事件 加载网页指浏览器打开网页 unload事件是卸载网页时产生的事件 卸载网页是指关闭浏览器窗口或者从当前页面跳转到其他页面 即当前网页从浏览器窗口中卸载 4 文本框事件 得到焦点 focus 通常是指选中了文本框 并且可以在文本框中输入文字 失去焦点 blur 与得到焦点相反 是指将焦点从文本框中移出去 5 键盘事件 通常是指在文本框中输入文字时发生的事件 与鼠标事件相似 键盘事件也分为按下键盘键事件 keydown 释放键盘键事件 keyup 和按下并释放