制作网页特效提供表单前端验证窗口动态操作提高系统工作效率 (COOKIES) 4. JavaScript 的使用 (1) 在 HTML 标记中直接写入 JavaScript 代码例如 : <HTML> <BODY> <P onmouseover="alert(' 欢迎您学习 JavaScript!'

Size: px

Start display at page:

Download "制作网页特效提供表单前端验证窗口动态操作提高系统工作效率 (COOKIES) 4. JavaScript 的使用 (1) 在 HTML 标记中直接写入 JavaScript 代码例如 : <HTML> <BODY> <P onmouseover="alert(' 欢迎您学习 JavaScript!'"

结顾
7 years ago
Views:

1 第二章 JavaScript 一教学目标 1. 掌握 JavaScript 的概念主要平台及其主要功能 2. 掌握 JavaScrip 的编辑基础, 数据类型变量常量运算符等的概念及其编写规则 3. 掌握常见的事件驱动事件二教学重点与难点重点 :JavaScript 的概念特点主要平台内置对象难点 : 事件驱动事件浏览器常用对象三教学方法和手段采用多媒体课堂教学方法, 理论教学与专题练习相结合四教学内容 1. JavaScript 的概念 JavaScript 是由网景公司开发的一种跨平台, 面向对象 (object-oriented) 的网页脚本语言 (Web Script Language), 是目前流行的网页特效设计语言 JavaScript 代码可直接嵌入 HTML 文件中, 随网页一起传送到客户端浏览器, 然后通过浏览器来解释执行 JavaScript 是由网景公司开发的一种跨平台, 纯面向对象 (object-oriented) 式的网页式脚本语言 (Web Script Language) JavaScript 代码可直接嵌入 HTML 文件中, 随网页一起传送到客户端浏览器, 然后通过浏览器的解释器来解释执行 2. JavaScript 的特点脚本编写语言基于对象的语言简单性安全性动态性跨平台 3. JavaScript 的功能

2 制作网页特效提供表单前端验证窗口动态操作提高系统工作效率 (COOKIES) 4. JavaScript 的使用 (1) 在 HTML 标记中直接写入 JavaScript 代码例如 : <HTML> <BODY> <P onmouseover="alert(' 欢迎您学习 JavaScript!')"> 鼠标移过来 </P> </BODY> </HTML> (2) 将 JavaScript 代码放入 <Script> </Script> 标记符中例如 : <script> document.write( 欢迎您学习 JavaScript!"); </script> (3) 将代码独立存储为以.js 为扩展名的文件, 利用 SRC 属性将该文件调入例如 : <script src="welcome.js"> </script> welcome.js 文件内容如下 : document.write(" 欢迎您学习 JavaScript!"); 5. JavaScript 的编程基础数据类型数据类型转换变量常量

3 运算符程序控制函数 5.1. 数据类型数值 (Number): 包含整数或浮点数逻辑值 (Logical): 取值为 true 或 false 字符串 (String): 用单引号或双引号括起来的零个或多个单一的字符所组成空值 (null): 表示没有值, 取唯一值 null, 大小写敏感未定义值 (undefined): 表示尚未定义值 5.2. 数据类型转换 (1) 自动数据类型转换如果表达式中用 (+) 运算符, 且其中一个操作数为字符串, 另一个操作数为数值时,JavaScript 自动将数值转成字符串例如 :var x= 我今年 +20; 结果 :x= 我今年 20 如果表达式中用了其它运算符,JavaScript 自动将字符串转成数值例如 :var x= 30 /5; 结果 :x=6 (2) 数据类型转换函数 eval( 字符串 ): 将传入的字符串参数内容, 转换成相应的数值, 例如 : y=eval( 15 )+8; 结果 :y=23 parseint( 字符串,[ 底数 ]): 将传入的字符串, 转换成指定底数的数值 parsefloat( 字符串 ): 将传入的字符串, 转换成浮点数值 5.3. 变量 (1) 变量命名以字母或下划线开头 ( 不能以数字开头 ), 后面接数字或其它字母变量名区分大小写 (2) 变量的声明变量声明时, 不必定义类型, 所有类型均由小写的 var 声明 (3) 变量的作用域 : 全局变量 (Global variable) 和局部变量 (Local

4 variable) <Script> document.title = " 变量的作用域实例 "; var gv = "JavaScript gv"; //gv 是全局变量 document.write("test 函数的输出 :<br>"); test(); function test() { var lv = JavaScript lv"; //lv 是局部变量 document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"+ "<br>"); } document.write("document 的输出 :<br>"); document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"); 5.4. 常量 (1) 字符串常量 (String Literals) 一般字符串常量特殊字符的字符串常量 (2) 布尔常量 (Boolean Literals): true 或 false (3) 整数常量 (Integers Literals) (4) 浮点常量 (Floating-Point Literals) (5) 数组常量 (Array Literals) 5.5. 运算符双目运算符 : +( 加 ) -( 减 ) *( 乘 ) /( 除 ) %( 取模 ) ( 按位或 ) &( 按位与 ) <<( 左移 ) >>( 右移 ) >>>( 右移, 零填充 ) 单目运算符 : -( 取反 ) ~( 取补 ) ++( 递加 1) --( 递减 1) 比较运算符 :

5 <( 小于 ) >( 大于 ) <=( 小于等于 ) >=( 大于等于 ) ==( 等于 )!=( 不等于 ) 布尔逻辑运算符 :!( 取反 ) &=( 与之后赋值 ) &( 逻辑与 ) =( 或之后赋值 ) ( 逻辑或 ) ^=( 异或之后赋值 ) ^( 逻辑异或 )?:( 三目操作符 ) ( 或 ) ==( 等于 ) =( 不等于 ) 逻辑或是 0 0=0,0 1=1,1 0=1,1 1=1 逻辑异或 ^ 是 0^0=0,0^1=1,1^0=1,1^1=0 三目操作符主要格式如下 : 操作数? 结果 1: 结果 2 若操作数的结果为真, 则表述式的结果为结果 1, 否则为结果程序控制流程选择结构 if < 逻辑表达式 > else 语句语句 if < 逻辑表达式 > { 语句组 } else if < 逻辑表达 if < 逻辑表达式 > 式 > { 语句组 } else { 语句组 } else { 语句组 } { 语句组 } Switch 结构 : switch ( < 变量 > ) { case < 特定数值 1>:< 语句或语句组 >; case < 特定数值 2>:< 语句或语句组 >; default:< 语句或语句组 >; }

6 循环结构 (1)while (< 逻辑表达式 >) { 语句组 } (2)do { 语句或语句组 }while (< 逻辑表达式 >) (3)for ( [ 初始值 ];[ 条件 ];[ 增量 ] ) { < 语句或语句组 >} (4)for ( 变量 in 对象 ) { < 语句或语句组 > } (5)with ( < 对象 > ) { < 语句或语句组 > } <Script> with (document) { write (" 限时抢购物品 :"); write ("<Li>ViewSonic 19\" 显示器 "); write ("<Li>EPSON 打印机 "); } </Script> 5.7.JavaScript 函数编码函数功能 : 将字符串中非文字数字字符 ( 如 &,%,#,^, 空格符 ) 转成相对应的 ASCII 值语法 :escape( 字符串 ) 译码函数功能 : 与 escape() 相反, 将 ASCII 字符转回一般数字语法 :unescape( 字符串 ) 求值函数

7 功能 : 通常有两个用途, 一个用作字符串的运算, 另一个用来指出操作对象语法 :eval ( 表达式 ) 数值判断函数功能 : 判断变量的值是否为数值, NaN 代表 Not a Number, 若返回值为 true, 则表示自变量不是数值语法 :isnan( 测试值 ) 举例 : <Script> var x = 15, y = " 地理学院 "; document.write("<li>x 不是数值吗?",isNaN(x)); document.write("<li>y 不是数值吗?",isNaN(y)); </Script> 执行结果 : x 不是数值吗?false y 不是数值吗?true 转成整数函数功能 : 将各种进制的数值转成十进制整数值格式 :parseint( 字符串 [, 底数 ]) 下标 <sub> 举例 : <Script> // 二进位转成十进位 document.write("1101<sub>2</sub> = ",parseint("1101", 2),"<sub>10</sub><br>"); // 十六进位转成十进位 document.write("bfff<sub>16</sub> = ",parseint("bfff", 16),"<sub>10</sub><br>"); </Script> 转成浮点函数功能 : 将字符串转成浮点数值

8 格式 : parsefloat( 字符串 ) 举例 : <Script> document.write(parseint(" "), "<br>"); document.write(parsefloat(" "), "<br>"); </Script> 用户自定义函数 function 函数名 ([ 参数 1, 参数 2, ]) { < 函数内容 > [return < 返回值 >] } 定义函数的注意事项 : 易于识别功能模块化放置在程序开始部分 6. JavaScript 的事件处理事件 (Event): 鼠标或键盘的动作称为事件事件驱动 (Event Driver): 由事件引发的一连串程序的动作, 称为事件驱动事件处理程序 (Event Handler): 对事件进行处理的程序或函数事件处理程序语法 6.1.JavaScript 常见事件

6.2 事件处理程序语法将事件处理程序直接嵌入 HTML 标记符中 <BODY onload = alert( 这是事件处理程序 ) > 例如 : <Body onload="alert(' 您好! 欢迎您学习 JavaScript')"> </Body> 直接写在对象后面 <Script> document.onload = alert(' 这是事件处理程序 '); </Script> 6.

9 6.2 事件处理程序语法将事件处理程序直接嵌入 HTML 标记符中 <BODY onload = alert( 这是事件处理程序 ) > 例如 : <Body onload="alert(' 您好! 欢迎您学习 JavaScript')"> </Body> 直接写在对象后面 <Script> document.onload = alert(' 这是事件处理程序 '); </Script> 6.3 事件应用举例例 1: <Body> <FONT STYLE="cursor:hand" onclick="location=' onmouseover="status=' 点击我, 链接至江西师范大学网址 '; this.color='red';return true" onmouseout="status=''; this.color='blue'">

10 例 2: <Body> <FORM name=fff> 请输入基本资料 :<BR> 姓名 :<INPUT TYPE="text" NAME="usr" SIZE="8"> <INPUT TYPE="button" VALUE=" 请单击 " onclick="alert(fff.usr.value+' : 谢谢你!')"> </Body> 7. JavaScript 内置对象 JavaScript 提供了一些非常有用的常用内部对象和方法用户不需要用脚本来实现这些功能这正是基于对象编程的真正目的本节主要介绍 JavaScript 提供四种内置对象 :Array( 数组 ) string( 字符串 ) math( 数值计算 ) 和 Date ( 日期 ) 内置对象 7.1 数组 (Array) 对象格式 : 对象名 = new Array([ 元素个数 ]) 或对象名 = new Array([ 值 1[, 值 2, ]]) 例如 :fruit=new Array(2) 声明了有 2 个元素的数组 fruit=new Array( 苹果, 橘子 ) 声明了有 2 个数组元素的数组, 并赋值属性 :index: 数组元素的索引值 length: 数组长度 ( 数组元素个数 ) 方法 :join(): 将数组内的所有值组合成一个字符串, 并用特定符号分开 tostring(): 以字符串来表示数组和数组值 reverse(): 将数组内元素的索引次序翻转过来 7.2 字符串 (String) 对象格式 : 字符串变量名 = 字符串常数例如 :var str1= JavaScript // 定义字符串变量属性 : length: 字符串长度方法 : 包括字符串显示和运算两类方法

11 7.3 数学 (Math) 对象常用属性 : E: 欧拉常量, 自然对数的底 ( 约等于 2.718) LN2:2 的自然对数 ( 约等于 0.693) LN10 :10 的自然对数 ( 约等于 2.302) LOG2E : 以 2 为底的 e 的对数 ( 约等于 1.442) LOG10E: 以 10 为底的 e 的对数 ( 约等于 o.434) PI: 的值 ( 约等于 ) SQRT1_2:0.5 的平方根 ( 约等于 o.707) SQRT2:2 的平方根 ( 约等于 1.414) 方法 : abs() 返回某数的绝对值 acos() 返回某数的反余弦值 ( 以弧度为单位 ) asin() 返回某数的反正弦值 ( 以弧度为单位 ) atan() 返回某数的反正切值 ( 以弧度为单位 ) ceil() 返回大于或等于指定数的最小整数 floor() 与 ceil 相反 max() 返回两数间的较大值 min() 返回两数问的较小值 pow() 返回 m 的 n 次方 ( 其中,m 为底,n 为指数 ) random() 返回 0 和 1 之间的一个伪随机数 round() 返回某数四舍五入之后的整数 7.4. 日期时间 (Date) 对象格式 : 对象名 = new Date ( [ 日期参数 ] ) 举例 : today = new Date () // 以当日时间为对象初值 today = new Date ( October 1, :00:00 ) // 以英文表示月份, 其余以数值表示, 即月日, 年时 : 分 : 秒

12 today = new Date ( 2002,08,07,0,0,0) 一律以数字表示, 即年, 月, 日, 时, 分, 秒方法 : getyear() 返回年份值 getmonth() 返回月份值 getdate() 并返回日期 getday() 返回星期几 gethours() 返回小时数 getminutes() 返回分钟数 getseconds() 返回秒数 gettime() 返回完整的时间 setdate() 改变 Date 对象的日期 sethours() 改变小时数 setminutes() 改变分钟数 setmonth() 改变月份 setseconds() 改变秒数 settime() 改变完整的时间 setyear() 改变年份 7.5. 用户自定义对象在实际应用中,JavaScript 提供的内置对象往往不能满足用户的需求, 因此, 常常需要建立用户自定义对象对象 (Object) 是一组经过组织的数据, 在 JavaScript 中的每一个对象都有两个相关的成员, 即属性 (Property) 和方法 (Method) 建立自定义对象就是为对象定义属性和方法, 其步骤是 : 1) 写一个构造函数来定义对象类为对象类定义属性为对象类定义方法先将方法的名称放到对象的构造函数中写一个函数来描述该对象方法的内容 2) 利用 new 创建对象实例 (Object Instance)

13 8. 窗口对象 8.1. 功能 : 顶层对象, 用来表示浏览器所打开的窗口 8.2. 格式指定窗口 : 窗口名. 属性窗口名. 方法 ( 参数群 ) 打开当前窗口的窗口 :opener. 属性 opener. 方法 ( 参数群 ) 框架中的顶级窗口 :top. 属性 top. 方法 ( 参数群 ) 当前活动窗口 :self. 属性 self. 方法 ( 参数群 ) 8.3 属性 Name 窗口的名字 closed 判断窗口是否已经被关闭, 返回布尔值 document 包含当前文档的信息,( 该属性本身也是一个对象 ) frames 窗口的框架对象数组, 以数组索引值表示,( 该属性本身也是一个对象 ) history 当前窗口最近浏览过的网页 ( 该属性本身也是一个对象 ) location 窗口所显示文档的完整 URL( 该属性本身也是一个对象 ) length 窗口内的框架个数 opener 代表使用 open 打开当前窗口的脚本所在的窗口 self 代表当前窗口 top 代表当前框架的最顶层窗口 defaultstatus 缺省的状态栏信息 status 状态栏中的信息 scrollbars 浏览器的滚动条 ( 包括水平和垂直滚动条 ) toolbar menubar 浏览器的工具栏浏览器的菜单栏 locationbar 浏览器的地址栏

14 innerheight 窗口内容区的高度 ( 以像素表示 ) innerwidth 窗口内容区的宽度 ( 以像素表示 ) outerheight 窗口边界的高度 ( 以像素表示 ) outerwidth 窗口边界的宽度 ( 以像素表示 ) pagexoffset 网页 x-position 的位置 ( 以像素表示 ) pageyoffset 网页 y-position 的位置 ( 以像素表示 ) 8.4 方法 open(url, 窗口名称,[, 窗口规格 ]) 打开一个新窗口 close() 关闭窗口 MoveBy( 水平点数, 垂直点数 ) MoveTo(x,y) 将窗口移动至 (x,y) 坐标处, 参数取绝对值 ResizeBy( 水平点数, 垂直点数 ) 调整窗口大小 ( 往右 / 往下 ), 参数取相对值 ResizeTo( 宽度, 高度 ) settimeout( 表达式, 毫秒数 ) 等待一段指定的毫秒数时间, 然后运行指令 cleartimeout( 定时器对象 ) 清除 settimeout 定义的计时程序 setinterval( 表达式, 毫秒数 ) 设置一个定时程序 clearinterval( 定时器对象 ) 清除 setinterval 定义的计时器 focus() 将焦点移到此窗口 blur() 把焦点从指定窗口移开 home() 进入客户端在浏览器上设置的主页 stop() 停止加载网页内容 back() 返回历史记录的上一个网页 forward() 加载历史记录的下一个网页 alert( 字符串 ) 传送警告信息 confirm( 字符串 ) 打开一个 Confirm 消息框, 用户可以选择 OK 或 Cancel, 如果用户单击 OK, 该方法返回 true, 单击 Cancel 返回 false prompt( 提示字符串, 默认值 ) 打开一个 Prompt 对话框, 用户可向该框

15 键入文本, 并把键入的文本返回到脚本 9. 框架对象 (FRAME) 每一个框架对象相当于窗口 (WINDOW) 对象, 因此框架对象可以使用窗口对象的所有属性和方法 9.1. 框架组的结构 9.2. 框架组的层次 9.3 框架的引用 top.leftframe top. upframe top. downframe 或 top.frames[0] top.frames[1] 10. 文档对象 (DOCUMENT) 文件对象 (Document) 代表当前的 HTML 对象, 是由 <BODY> 标记组构成的, JavaScript 自动为每一个 HTML 文件建立一个 document 对象, 用来显示 HTML 文件语法

16 document. 属性 document. 方法属性 link 文档中的一个 <A HREF=> 标记 ( 该属性本身也是一个对象 ) links 文件中的所有链接, 以数组索引值表示 linkcolor 文档的链接的颜色, 即 <BODY> 标记中的 LINK 属性 alinkcolor 活动链接的颜色 (ALINK) vlinkcolor 指向已点击过的超链接文本颜色, 即 <BODY> 标记的 VLINK 特性 forms 文件中的所有表单, 以数组索引值表示 images 文档中所有 image, 以数组索引值表示 anchors 文档中所有锚点, 以数组索引值表示 bgcolor 文档的背景颜色 (BGCOLOR) fgcolor 文档中文本颜色 (<BODY> 中的 TEXT 特性 ) cookie 存储于 cookie.txt 文件内的一段信息, 它是该文档对象的一个属性 URL 表示该文件的网址 title 文档的标题 ((TITLE>) lastmodified 文档最后的修改日期方法 write( 字符串 ) 将字符串或数值写到文件中 getselection() 取得当前选取的字符串事件 onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup 11. 表单对象 (FORM) 表单对象 (Form) 提供一个让客户端输入文字或进行选择的功能, 例如 : 单选按钮复选框选择列表等由 <FORM> 标记组构成,JavaScript 自动建立一个表单对象, 并将用户端的信息送至服务器进行处理表单对象是文件对象的子对象, 同时, 它也包含许多子对象表单对象的使用格式 document.forms[ 索引值 ]. 属性 document.forms[ 索引值 ]. 方法

17 ( 参数群 ) 或 document. 表单名称. 属性 document. 表单名称. 方法 ( 参数群 ) 常用属性 Name: 表单名, 相当于 <FORM> 标记的 name 属性 Action: 相当于 <FORM> 标记的 ACTION 属性 Method: 输入窗体的数据传送到服务器上的方式, 即 (FORM) 标记中的 METHOD 属性 Elements: 表单中的所有控件, 以数组索引值表示 Length: 表单中的控件的个数常用属性 Checkbox: 复选框,( 该属性本身也是一个对象 ) Hidden:<INPUT TYPE= HIDDEN > 隐藏对象 Button:<INPUT TYPE= BUTTON > 按钮,( 该属性本身也是一个对象 ) Radio: 单选按钮,( 该属性本身也是一个对象 ) Reset: 复位按钮,( 该属性自身也是一个对象 ) Submit: 提交按钮,( 该属性本身也是一个对象 ) Text: 单行文本,( 该属性本身也是一个对象 ) Textarea: 多行文本,( 该属性本身也是一个对象 ) Select:<SELECT> 选择框,( 该属性本身也是一个对象 ) 常用方法 Submit() 提交表单 ( 与 Submit 按钮的作用相同 ) reset() 重写表单 ( 与使用 reset 按钮的作用相同 ) 四专题练习 1 利用日期对象, 对不同的进站时间, 显示不同的提示信息比如, 上午六点到下午六点, 显示将有限的时间用在作最有意义的事 ; 其他时间显示现在是休息时间

18 2 检测用户输入的邮件格式是否正确 3 用户进入时, 显示欢迎您进入本网站! ; 离开时, 显示谢谢您, 欢迎下次再来!

PowerPoint 演示文稿

PowerPoint 演示文稿按钮对象 (button) 当 JavaScript 读到标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值