基于Java技术的Web应用开发

1、基于基于Java技术的技术的Web应用开应用开 发发 基于基于Java技术的技术的Web应用开发应用开发 2 主要内容 n基本语法基本语法 n常用内部对象常用内部对象 n对象层次与事件处理对象层次与事件处理 n浏览器内部对象浏览器内部对象 n综合实例综合实例 n小结小结 基于基于Java技术的技术的Web应用开发应用开发 3 JavaScript概述(1) nJavaScript最早是由NetScape公司开发出来的一种 跨平台的、基于对象的脚本语言，目前为大多数 浏览器所支持。 nJavaScript的优点： u简单性 u动态性 u基于对象的语言 u安全性 u跨平台性 u减少服务器开销(节省

2、CGI的交互时间) 基于基于Java技术的技术的Web应用开发应用开发 4 JavaScript概述(2) n实例 欢迎来到JavaScript世界！ function mouseOver() /访问文档对象(即WEB页面包含的元素) document.b1.src =mouse_on.jpg; function mouseOut() /访问文档对象(即WEB页面包含的元素) document.b1.src =mouse_off.jpg; /向document文档输出内容，即向WEB页面输出内容。 document.write(欢迎来到JavaScript世界!); 基于基于Java技术的技术

3、的Web应用开发应用开发 5 JavaScript概述(3) n如何使用JavaScript脚本？ 使用标记，标记，有3种方法：嵌入HTML文件 行内，嵌入HTML文件内，链接js文件。 u1) 嵌入HTML代码行内 源代码示例 基于基于Java技术的技术的Web应用开发应用开发 6 JavaScript概述(4) u2) 嵌入文件 u3) 链接文件 /javascript脚本 W3C组织不赞成组织不赞成 W3C组织推组织推荐荐 源代码示例 基于基于Java技术的技术的Web应用开发应用开发 7 主要内容 nJavaScript概述概述 n常用内部对象常用内部对象 n对象层次与事件处理对象层次

4、与事件处理 n浏览器内部对象浏览器内部对象 n综合实例综合实例 n小结小结 基于基于Java技术的技术的Web应用开发应用开发 8 基本语法(1) n基本语法 u对象与数组 u表达式与运算符 u语句 u函数 基于基于Java技术的技术的Web应用开发应用开发 9 基本语法(2) n数据类型 数据类型数据类型名称名称说明说明举例举例 number数值类型不区分整型和浮点型123,0239(十进制十进制), 071,0 x1F string字符串以对象对待，有自己的属性和方法。 Hello，”Hello” boolean布尔型true, false, 1, 0 object对象类型Date, wi

5、ndow, document, Function null空类型“null值”或“未定义对象”，不代 表是0或空字符串。 只有一个值：null； if( null )判断为判断为false undefined未定义类型当处于如下情形时，JavaScript会返 回undefined值：1)定义了一个变量 但没有为该变量赋值；2)使用了一 个对象不存的属性时；3)函数没有 明确参数值时。 if( undefined ) 判断为判断为false 除以上类型外，JavaScript也可以定义数组类型。 基于基于Java技术的技术的Web应用开发应用开发 10 基本语法(3) n常量与变量 u 常量主

6、要有：布尔常量、整型常量、浮点型常量、字符 串常量。字符串常量使用单引号()或双引号(”)进行包含。 注：字符串常量必须写在一行中，如果要换行，必须使 用符号“”续行；而其他代码则不存在续行这个问题。 u 变量定义：变量名以字母、下划线(“_”)、美元符(“$”)开 头的字母、数字、下划线(“_”)和美元符(“$”)的组合。 注： 1）JavaScript区分大小写。 2）JavaScript中的变量在定义时不指定数据类型，而是 以关键字var代替( var指varible )。 变量定义示例：var str; /JavaScript语句以 ; 结尾。 说明：注说明：注释方法与释方法与C+,

7、Java相同相同 字符串续行示例代码不续行示例 基于基于Java技术的技术的Web应用开发应用开发 11 基本语法(4) nnull和undefined示例 document.write(document.getElementById(PKU)的结果为：“ +document.getElementById(PKU); /getElementById方法通过id来访问页面元素 /- document.write(document.MIT的结果为：+document.MIT); /- var PKU; /定义一个变量 document.write(PKU的值为：+PKU); /- 基于基于Java

8、技术的技术的Web应用开发应用开发 12 基本语法(5) n数据类型转换 数据类型转换方式有两种：隐式转换和显式转换。 u隐式转换隐式转换： Javascript是一种泛类型语言。泛类型指不必显式定义变量的 数据类型。在定义一个变量时，不需要指定变量的数据类型(而是 使用var )，使得JavaScript可以很方便灵活地进行隐式转换。 u显式转换指强制类型转换显式转换指强制类型转换。 强制类型转换对象有：Number，String，Boolean，Object等。 强制转换源代码示例 u数据类型判断运算符：数据类型判断运算符：typeof( 表达式)。 基于基于Java技术的技术的Web应用

9、开发应用开发 13 基本语法(6) n数值类型判断：NaN与isNaN函数 NaN 原义为：“Not a Number”。当运算无法返回正确的数值时 ，就会返回“NaN”值。NaN 值比较特殊，因为它“不是数字”，所 以任何数跟它都不相等，包括与其本身相比。 isNaN( ) 是一个JavaScript内部函数，判断对象是否为NaN。常用 于判断将字符串转换成数值类型时，例如判断用户输入的是否全为数 字。 基于基于Java技术的技术的Web应用开发应用开发 14 基本语法(7) nNaN和isNaN源代码示例 var shuzi=100; /定义一个变量 document.write(shuz

10、i is not a number? +isNaN(shuzi); var str=“100”; /定义一个变量 document.write(str is not a number? +isNaN(str); var str1=“test100”; /定义一个变量 document.write(str1 is not a number? +isNaN(str1); /字符串转数值失败,isNaN返回true 基于基于Java技术的技术的Web应用开发应用开发 15 基本语法(8) n基本语法 u数据类型、常量与变量 u表达式与运算符 u语句 u函数 基于基于Java技术的技术的Web应用开发

11、应用开发 16 基本语法(9) n对象与数组 JavaScript语言是基于对象的(Object-Based)的脚本语言，它没有提供 抽象、继承、重载等有关面向对象语言的许多功能。 对象定义方式对象定义方式： var 对象名对象名 = 属性名属性名1:属性值属性值1,属性名属性名2:属性值属性值2, 也也可使用new运算符生成一个对象实例： 例如var car= new Object( ); 接着使用赋值就给对象增加一个属性使用赋值就给对象增加一个属性，例如car.price=100; 数组也是对象，定义格式如下：数组也是对象，定义格式如下： 1) var arr1=new Array( );

12、/或或var arr1 = ; 2) var arr2=new Array(数组大小数组大小); 3) var arr3=new Array(元素元素1,元素元素2,); 访问数组元素：arr1 0 ;/数组下标从0开始 基于基于Java技术的技术的Web应用开发应用开发 17 基本语法(10) n基本语法 u数据类型、常量与变量 u对象与数组 u语句 u函数 基于基于Java技术的技术的Web应用开发应用开发 18 基本语法(11) n表达式与运算符 JavaScript中的表达式与运算符表达式与运算符和C+, Java中的表达式与运算 符十分相似。 表达式其实就是JavaScript中的一

13、个语句。 JavaScript的运算符如下： 类型类型说明说明 算术运算符+, -, *, /, %, +, - 逻辑运算符 ; ) for(对象属性名对象属性名 in 已知对象名已知对象名) 枚举数组元素示例 枚举对象属性示例 for in 语句多用于表单元素的枚举和判断。 基于基于Java技术的技术的Web应用开发应用开发 23 基本语法(16) n语句主要有：选择语句和循环语句。 u循环语句：while语句和for语句。 循环控制语句 ：break语句和continue语句 基于基于Java技术的技术的Web应用开发应用开发 24 基本语法(17) n特殊语句：with语句。 在with

14、语句体内，任何对变量的引用被认为是 这个对象的属性，以节省一些代码。 with( object ) with源代码示例 基于基于Java技术的技术的Web应用开发应用开发 25 基本语法(18) n基本语法 u数据类型、常量与变量 u对象与数组 u表达式与运算符 u语句 基于基于Java技术的技术的Web应用开发应用开发 26 基本语法(19) n函数： 函数定义语法格式如下： / 定义函数 function 函数名(参数1,参数2) return 返回值; / 函数调用 函数名(参数1,参数2) /注意：函数定义不能嵌套。注意：函数定义不能嵌套。 函数综合示例 基于基于Java技术的技术的W

15、eb应用开发应用开发 27 主要内容 nJavaScript概述概述 n基本语法基本语法 n对象层次与事件处理对象层次与事件处理 n浏览器内部对象浏览器内部对象 n综合实例综合实例 n小结小结 基于基于Java技术的技术的Web应用开发应用开发 28 常用内部对象(1) n常用内部对象主要有：String，Math和Date对象。 uString对象，其属性和方法如下： length字符串长度 big()用大号字体显示字符串。 bold()使用粗体显示字符串。 charAt()返回在指定位置的字符。 concat()连接字符串。 fontcolor()使用指定的颜色来显示字符串。 indexO

16、f()检索字符串。 italics()使用斜体显示字符串。 match()找到一个或多个正在表达式的匹配。 replace()替换与正则表达式匹配的子串。 search()检索与正则表达式相匹配的值。 sub()把字符串显示为下标。 substr()从起始索引号提取字符串中指定数目的字符。 substring()提取字符串中两个指定的索引号之间的字符。 sup()把字符串显示为上标。 toLowerCase()把字符串转换为小写。 toUpperCase()把字符串转换为大写。 简单示例 基于基于Java技术的技术的Web应用开发应用开发 29 常用内部对象(2) n常用内部对象主要有：Str

17、ing，Math和Date对象。 uDate对象，其属性和方法如下： 属性或方法描述 Date()返回当日的日期和时间 getDate()从 Date 对象返回一个月中的某一天 (1 31) getDay()从 Date 对象返回一周中的某一天 (0 6) getMonth()从 Date 对象返回月份 (0 11) getFullYear()从 Date 对象以四位数字返回年份 getYear()从 Date 对象以两位或四位数字返回年份。 getHours()返回 Date 对象的小时 (0 23) getMinutes()返回 Date 对象的分钟 (0 59) getSeconds()

18、返回 Date 对象的秒数 (0 59) getMilliseconds()返回 Date 对象的毫秒(0 999) getTime()返回 1970 年 1 月 1 日至今的毫秒数 parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数 基于基于Java技术的技术的Web应用开发应用开发 30 常用内部对象(3) n常用内部对象主要有：String，Math和Date对象。 uDate对象，其属性和方法如下(续)： setDate()设置 Date 对象中月的某一天 (1 31) setMonth()设置 Date 对象中月份 (0 11) setFullYear()设置 Da

19、te 对象中的年份（四位数字） setYear()设置 Date 对象中的年份（两位或四位数字）。 setHours()设置 Date 对象中的小时 (0 23) setMinutes()设置 Date 对象中的分钟 (0 59) setSeconds()设置 Date 对象中的秒钟 (0 59) setMilliseconds()设置 Date 对象中的毫秒 (0 999) setTime()通过向或从1970年1月1日午夜添加或减去指定数目的毫秒来计算日期和时间 简单示例 基于基于Java技术的技术的Web应用开发应用开发 31 主要内容 nJavaScript概述概述 n基本语法基本语法

20、 n常用内部对象常用内部对象 n浏览器内部对象浏览器内部对象 n综合实例综合实例 n小结小结 基于基于Java技术的技术的Web应用开发应用开发 32 对象层次与事件处理 nJavaScript的对象层次 JavaScript中的对象并不都是独立存在的，而是有着层次结构。对 象可以依照层次来进行调用。 基于基于Java技术的技术的Web应用开发应用开发 33 对象层次与事件处理 n事件驱动与事件处理 当HTML文档或文档中的元素发生了某些动作时，浏 览器就会产生一个事件（事件（Event）。例如浏览加载文档完毕 是load事件、单击一个按钮是click事件、双击鼠标是 dblclick事件、在键盘上按下一个键是keypress事件、将鼠 标从一个对象上滑过是mouseover事件。 程序员可以事先定义好一个事件的处理程序，一旦浏 览器中产生了某个事件，浏览器会就自动调用这个处理程 序。这种通过事件来调用程序的方式称为事件驱动事件驱动。 基于基于Java技术的技术的Web应用开发应用开发 34 对象层次与事件处理 n浏览器常用事件列表 u1. 鼠标移动事件：鼠标移动事件：鼠标移