动 态 网 页 脚 本 语 言 JavaScript 主 要 内 容 一. 概 述 二. 编 程 基 础 三. 面 向 对 象 的 基 本 概 念 四. 内 置 对 象 五. 浏 览 器 窗 口 对 象 1
JavaScript 概 述 JavaScript 是 由 Netscape 公 司 开 发 的 一 种 跨 平 台, 面 向 对 象 (object-oriented) 的 网 页 脚 本 语 言 (Web Script Language), 是 目 前 流 行 的 网 页 特 效 设 计 语 言 JavaScript 代 码 可 直 接 嵌 入 HTML 文 件 中, 随 网 页 一 起 传 送 到 客 户 端 浏 览 器, 然 后 通 过 浏 览 器 来 解 释 执 行 2
JavaScript 概 述 1. 什 么 是 JavaScript 脚 本 语 言? (1) 脚 本 语 言 (Scripting Language)? 由 ASCII 码 构 成, 可 直 接 用 任 何 的 文 本 编 辑 器 开 发 完 成 是 一 种 不 必 事 先 编 译, 只 要 利 用 适 当 的 解 释 器 (Interpreter) 就 可 以 执 行 的 简 单 的 解 释 式 程 序 (2) JavaScript? JavaScript 是 由 Netscape 公 司 开 发 的 一 种 跨 平 台, 纯 面 向 对 象 (object-oriented) 式 的 网 页 式 脚 本 语 言 (Web Script Language) JavaScript 代 码 可 直 接 嵌 入 HTML 文 件 中, 随 网 页 一 起 传 送 到 客 户 端 浏 览 器, 然 后 通 过 浏 览 器 的 解 释 器 来 解 释 执 行 3
JavaScript 概 述 2. JavaScript 的 特 点 脚 本 编 写 语 言 基 于 对 象 的 语 言 简 单 性 动 态 性 跨 平 台 4
JavaScript 概 述 3. JavaScript 的 功 能 制 作 网 页 特 效 提 供 表 单 前 端 验 证 窗 口 动 态 操 作 提 高 系 统 工 作 效 率 5
JavaScript 概 述 4. 在 HTML 文 档 中 嵌 入 JavaScript 代 码 在 HTML 标 记 中 直 接 写 入 JavaScript 代 码 例 : <HTML> <BODY> <P onmouseover= alert( 欢 迎 您 学 习 JavaScript!')"> 鼠 标 移 过 来 </P> </BODY> </HTML> 运 行 6
JavaScript 概 述 4. 在 HTML 文 档 中 嵌 入 JavaScript 代 码 将 JavaScript 代 码 放 入 <SCRIPT> </SCRIPT> 标 记 符 中 例 如 : <SCRIPT language="javascript" > document.write(" 欢 迎 您 学 习 JavaScript!"); </SCRIPT> 运 行 <STYLE> </STYLE> 7
将 代 码 独 立 存 储 为 以.js 为 扩 展 名 的 文 件, 利 用 SRC 属 性 将 该 文 件 调 入 例 如 : <script language="javascript src="welcome.js"> </script> JavaScript 概 述 4. 在 HTML 文 档 中 嵌 入 JavaScript 代 码 welcome.js 文 件 内 容 如 下 : document.write(" 欢 迎 您 学 习 JavaScript!"); 举 例 8
document.write( ); var A="Uppercase A"; document.write(a); document.write( "Uppercase A" ); document.write("<br>"); document.write("gv=" + A + "<BR>"); 9
为 避 免 某 些 浏 览 器 不 完 全 支 持 JavaScript, 而 造 成 错 误, 可 将 JavaScript 代 码 用 注 释 语 句 括 起 来 例 如 : <Script > <!-- --> </Script> JavaScript 概 述 4. 在 HTML 文 档 中 嵌 入 JavaScript 代 码 10
JavaScript 编 程 基 础 1. 数 据 类 型 数 值 型 (Number): 包 含 整 数 或 浮 点 数 布 尔 型 (Logical): 取 值 为 true 或 false 1,0 字 符 型 (String): 用 单 引 号 或 双 引 号 括 起 来 的 零 个 或 多 个 的 字 符 或 数 字 所 组 成 空 类 型 (null): 表 示 没 有 值, 取 唯 一 值 null, 大 小 写 敏 感 注 :null 不 能 写 成 Null 或 NULL null 既 不 等 于 0, 也 不 等 于 空 字 符 串 因 为 0 是 数 值, 空 字 符 串 是 字 符 串 11
2. 数 据 类 型 转 换 JavaScript 编 程 基 础 a) 自 动 数 据 类 型 转 换 如 果 表 达 式 中 用 (+) 运 算 符, 且 其 中 一 个 操 作 数 为 字 符 串, 另 一 个 操 作 数 为 数 值 时,JavaScript 自 动 将 数 值 转 成 字 符 串 例 如 :var x= 我 今 年 +18; 结 果 :x= 我 今 年 18 var x= 15 +8 结 果 :x=158 var y=15+8; 结 果 :y=23 如 果 表 达 式 中 用 了 其 它 运 算 符,JavaScript 自 动 将 字 符 串 转 成 数 值 例 如 :var x= 30 /5; 结 果 :x=6 var y= 15-8 ; 结 果 :y=7 举 例 12
2. 数 据 类 型 转 换 b) 数 据 类 型 转 换 函 数 JavaScript 编 程 基 础 eval( 字 符 串 ): 将 字 符 串 参 数 转 换 成 相 应 的 数 值, 例 如 : y=eval( 15 )+8; 结 果 :y=23 parseint( 字 符 串,[ 底 数 ]): 将 字 符 串 转 换 成 指 定 底 数 的 数 值 parsefloat( 字 符 串 ): 将 字 符 串 转 换 成 浮 点 数 值 举 例 13
JavaScript 编 程 基 础 3. 变 量 a) 变 量 命 名 以 字 母 或 下 划 线 开 头 ( 不 能 以 数 字 开 头 ), 后 面 接 数 字 字 母 或 下 划 线 变 量 名 区 分 大 小 写 不 能 用 系 统 保 留 字 和 特 殊 符 号 作 为 变 量 例 :<script> var A="Uppercase A"; var a="lowercase a"; document.write(a); document.write("<br>"); document.write(a); </script> 14
3. 变 量 JavaScript 编 程 基 础 b) 变 量 的 声 明 变 量 声 明 时, 不 必 定 义 类 型, 所 有 类 型 均 由 小 写 的 var 声 明 例 如 : var name; (JavaScript 自 动 给 出 一 个 未 定 义 值 ) var name, sex; (JavaScript 自 动 给 出 一 个 未 定 义 值 ) var name= 张 永,sex= 女 生 ; ( 二 变 量 均 为 字 符 串 ) 15
3. 变 量 JavaScript 编 程 基 础 c) 变 量 的 作 用 域 : 全 局 变 量 (Global variable) 局 部 变 量 (Local variable) <Script> var gv = "JavaScript"; // gv 是 全 局 变 量 function test() { var lv = "VBScript"; // lv 是 局 部 变 量 document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"+ "<br>"); } test(); document.write("document 的 输 出 :<br>"); document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"); </Script> 举 例 16
4. 常 量 JavaScript 编 程 基 础 a. 字 符 串 常 量 :(String Literals) 一 般 字 符 串 常 量 :, 特 殊 字 符 的 字 符 串 常 量 字 符 意 义 字 符 意 义 \b 后 退 一 格 (Backspace) \t 制 表 (Tab) \f 换 页 (Form feed) \ 单 引 号 \n 换 行 (New line) \ 双 引 号 \r 返 回 (Carriage return) \\ 反 斜 线 (Backslash) b. 布 尔 常 量 :(Boolean Literals):true 或 false 1,0 c. 数 值 型 : 整 数 常 量 (Integers Literals) 浮 点 常 量 (Floating-Point Literals) 17
5. 运 算 符 与 表 达 式 a) 赋 值 运 算 符 JavaScript 编 程 基 础 运 算 符 意 义 运 算 符 意 义 = x=5 /= x=x/y += x=x+y %= 求 余 赋 值 -= x=x-y *= x=x*y x+=y 等 价 于 x=x+y x%=y 等 价 于 x=x%y 18
5. 运 算 符 与 表 达 式 b) 比 较 运 算 符 JavaScript 编 程 基 础 操 作 符 描 述 举 例 A==B 如 果 两 个 操 作 数 相 等, 返 回 true Psw==password A!=B 如 果 两 个 操 作 数 不 等, 返 回 true mobile.length!=11 A>=B 如 果 A 大 于 或 者 等 于 B, 返 回 true tries>=2 A>B 如 果 A 大 于 B, 返 回 true mflag>20 A<=b 如 果 A 小 于 或 等 于 B, 返 回 true i<=0 A<B 如 果 A 小 于 或 等 于 B, 返 回 true tries<10 举 例 19
5. 运 算 符 与 表 达 式 c) 算 术 运 算 符 JavaScript 编 程 基 础 运 算 符 意 义 运 算 符 意 义 运 算 符 意 义 + 加 (Addition) / 除 (Division) -- 递 减 (Decrement) - 减 (Subtraction) * 乘 (Multiplicati on) % 求 余 (Modulus) ++ 递 增 (Increment) - 取 负 值 (Unary Negation) 举 例 20
5. 运 算 符 与 表 达 式 d) 逻 辑 运 算 符 JavaScript 编 程 基 础 a&&b : 逻 辑 与 (AND), 若 a,b 都 是 ture, 则 结 果 为 ture a b : 逻 辑 或 (OR), 若 a,b 任 一 是 ture, 则 结 果 为 ture!a : 逻 辑 非 (NOT), 若 a 是 ture, 则 结 果 为 false 21
5. 运 算 符 与 表 达 式 JavaScript 编 程 基 础 e) 字 符 串 运 算 符 (String operators) f) 条 件 运 算 符 (?) 格 式 : 条 件 表 达 式? 值 1 : 值 2 如 果 条 件 表 达 式 的 结 果 是 ture, 返 回 值 1, 否 则 返 回 值 2 var a, b; max = a>b? a : b 举 例 22
5. 运 算 符 与 表 达 式 JavaScript 编 程 基 础 g) typeof: 用 来 判 断 操 作 数 的 类 型 格 式 :typeof 操 作 数 或 typeof( 操 作 数 ) 举 例 23
对 象 类 型 : 对 象 实 例 属 性 方 法 对 象 实 例 名. 属 性 对 象 实 例 名. 方 法 如 : 窗 口 p102 JavaScript 编 程 基 础 24
5. 运 算 符 与 表 达 式 JavaScript 编 程 基 础 h) new: 定 义 对 象 实 例 语 法 : 对 象 实 例 名 = new 对 象 类 型 ( 参 数 ) 例 如 :myarray=new Array(3) i) this: 代 表 当 前 对 象, 因 此 用 在 不 同 的 地 方, 就 有 不 同 的 结 果 this. 属 性 this. 方 法 举 例 25
6. 程 序 控 制 流 程 a) 选 择 结 构 JavaScript 编 程 基 础 if < 逻 辑 表 达 式 > 语 句 else 语 句 if < 逻 辑 表 达 式 > { 语 句 组 } else { 语 句 组 } if < 逻 辑 表 达 式 > { 语 句 组 } else if < 逻 辑 表 达 式 > { 语 句 组 } else { 语 句 组 } 举 例 26
6. 程 序 控 制 流 程 b) Switch 结 构 JavaScript 编 程 基 础 switch ( < 变 量 > ) { case < 特 定 数 值 1>:< 语 句 或 语 句 组 1>; break; case < 特 定 数 值 2>:< 语 句 或 语 句 组 2>; break; default:< 语 句 或 语 句 组 >; } 27
6. 程 序 控 制 流 程 b) 循 环 结 构 JavaScript 编 程 基 础 while (< 逻 辑 表 达 式 >) { 语 句 组 } <Script> var i = 5; while ( i > 0 ) { document.write("i = " +i+"<br>"); i--; } </Script> 例 28
6. 程 序 控 制 流 程 b) 循 环 结 构 JavaScript 编 程 基 础 do { 语 句 或 语 句 组 } while (< 逻 辑 表 达 式 >) <Script> var i = 5; do { document.write("i = ",i,"<br>"); i--; } while ( i > 0 ) </Script> 例 29
6. 程 序 控 制 流 程 b) 循 环 结 构 JavaScript 编 程 基 础 for ( [ 初 始 值 ];[ 条 件 ];[ 增 量 ] ) { < 语 句 或 语 句 组 >} <Script> for ( var i = 5; i > 0; i-- ) { document.write("i = ",i,"<br>"); } </Script> 30
6. 程 序 控 制 流 程 b) 循 环 结 构 JavaScript 编 程 基 础 for ( 变 量 in 对 象 ) { < 语 句 或 语 句 组 > } for ( i in ar ) { document.write("<font size=4>", ar[i], "</FONT><BR>"); } 例 1 31
6. 程 序 控 制 流 程 C) With 语 句 JavaScript 编 程 基 础 with ( < 对 象 > ) { < 语 句 或 语 句 组 > } <Script> <Script> with (document) { document.write (" 限 时 抢 购 物 品 :"); document.write (" 限 时 抢 购 ("<Li>ViewSonic 物 品 :"); 17\" 显 示 器 "); document.write ("<Li>ViewSonic ("<Li>EPSON 17\" 显 打 示 印 器 机 "); "); </Script> write ("<Li>EPSON 打 印 机 "); } </Script> 例 1 32
6. 程 序 控 制 流 程 c) 注 释 语 句 JavaScript 编 程 基 础 // < 单 行 注 释 语 句 > /* < 多 行 注 释 语 句 > */ <!-- --> 33
7. JavaScript 函 数 JavaScript 编 程 基 础 JavaScript 包 含 两 类 函 数 : 系 统 函 数 用 户 自 定 义 函 数 34
JavaScript 编 程 基 础 1) 编 码 函 数 功 能 : 将 字 符 串 中 非 文 字 数 字 字 符 ( 如 &,%,#,^, 空 格 符 ) 转 成 相 对 应 的 ASCII 值 语 法 :escape( 字 符 串 ) 2) 译 码 函 数 功 能 : 与 escape() 相 反, 将 ASCII 值 转 回 ASCII 字 符. 语 法 :unescape(ascii 值 ) 3) 求 值 函 数 功 能 : 通 常 有 两 个 用 途, 一 个 用 作 字 符 串 的 运 算, 另 一 个 用 来 指 出 操 作 对 象 语 法 :eval( 字 符 串 表 达 式 ) 35
JavaScript 编 程 基 础 4) 数 值 判 断 函 数 功 能 : 判 断 变 量 的 值 是 否 为 数 值, 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 举 例 36
JavaScript 编 程 基 础 5) 转 成 整 数 函 数 功 能 : 将 字 符 串 转 换 成 指 定 底 数 的 数 值 格 式 :parseint( 字 符 串 [, 底 数 ]) 举 例 : x=parseint( 27,8) 37
JavaScript 编 程 基 础 6) 转 成 浮 点 函 数 功 能 : 将 字 符 串 转 成 浮 点 数 值 格 式 : parsefloat( 字 符 串 ) 举 例 : <Script> document.write(parsefloat("3.123456"), "<br>"); </Script> 举 例 38
7) 用 户 自 定 义 函 数 JavaScript 编 程 基 础 function 函 数 名 ( [ 参 数 1, 参 数 2, ] ) { < 函 数 内 容 > [return < 返 回 值 >] } 定 义 函 数 的 注 意 事 项 : 易 于 识 别 功 能 模 块 化 放 置 在 程 序 开 始 部 分 例 1 例 2 39
函 数 定 义 的 一 般 形 式 定 义 无 参 函 数 的 一 般 形 式 为 : 类 型 标 识 符 函 数 名 ( ) { 声 明 部 分 语 句 部 分 } 函 数 名 ( ); 40
定 义 有 参 函 数 的 一 般 形 式 为 : 类 型 标 识 符 函 数 名 ( 形 式 参 数 表 列 ) { 声 明 部 分 语 句 部 分 } 函 数 名 ( 实 际 参 数 表 列 ); 41
形 式 参 数 和 实 际 参 数 函 数 参 数 和 函 数 的 值 形 式 参 数 : 函 数 名 后 面 括 号 中 的 变 量 名 称 为 形 式 参 数 ( 简 称 形 参 ) 实 际 参 数 : 主 调 函 数 中 调 用 一 个 函 数 时, 函 数 名 后 面 括 号 中 的 参 数 ( 可 以 是 一 个 表 达 式 ) 称 为 实 际 参 数 ( 简 称 实 参 ) 函 数 返 回 值 :return 后 面 的 括 号 中 的 值 作 为 函 数 带 回 的 值 ( 称 函 数 返 回 值 ) 42
主 调 函 数 和 被 调 用 函 数 之 间 有 数 据 传 递 的 关 系 在 不 同 的 函 数 之 间 传 递 数 据, 可 以 使 用 的 方 法 有 : 参 数 : 通 过 形 式 参 数 和 实 际 参 数 返 回 值 : 用 return 语 句 返 回 计 算 结 果 全 局 变 量 : 外 部 变 量 43
面 向 对 象 的 基 本 概 念 对 象. 属 性 对 象. 方 法 new: 定 义 对 象 实 例 语 法 : 对 象 实 例 名 称 = new 对 象 类 型 ( 参 数 ) this: 代 表 当 前 对 象, 用 在 不 同 的 地 方, 有 不 同 的 结 果 this. 属 性 this. 方 法 44
JavaScript 的 事 件 处 理 主 要 内 容 1 事 件 (Event): 是 指 用 户 在 某 对 象 上 所 作 的 动 作 2 事 件 驱 动 (Event Driver): 由 事 件 引 发 的 一 连 串 程 序 的 动 作, 称 为 事 件 驱 动 3 事 件 处 理 程 序 (Event Handler): 对 事 件 进 行 处 理 的 程 序 或 函 数 4 事 件 处 理 程 序 语 法 : 如 :onclick 45
1 常 见 事 件 JavaScript 的 事 件 处 理 事 件 动 作 事 件 动 作 Abort 中 止 正 在 加 载 的 对 象 Load 浏 览 器 读 入 文 件 时 Blur 失 去 焦 点 Unload 关 闭 当 前 网 页 Focus 获 取 焦 点 MouseDown 按 下 鼠 标 左 键 Change 改 变 对 象 的 值 MouseMove 移 动 鼠 标 指 针 Click 在 对 象 上 单 击 鼠 标 MouseOut 鼠 标 指 针 离 开 某 对 象 DblClick 在 对 象 上 双 击 鼠 标 MouseOver 鼠 标 指 针 悬 停 于 某 对 象 之 上 DrogDrop 拖 拽 对 象 MouseUp 放 开 鼠 标 左 键 Error 加 载 文 件 或 图 形 时 发 生 错 误 Move 窗 口 被 移 动 时 KeyDown 按 下 键 盘 上 的 任 意 键 的 瞬 间 Resize 窗 口 大 小 被 改 变 KeyPress 按 下 键 盘 上 的 任 意 键 时 Select 选 择 某 对 象 KeyUp 某 键 被 按 下 后 弹 起 来 的 瞬 间 Submit 单 击 表 单 上 的 Submit 按 钮 Reset 单 击 表 单 上 的 Reset 按 钮 46
2 事 件 处 理 程 序 语 法 JavaScript 的 事 件 处 理 1) 直 接 嵌 入 HTML 标 记 符 中 < 标 记 符 事 件 = 事 件 处 理 程 序 [ 事 件 = 事 件 处 理 程 序 ]> <BODY onload= alert(' 事 件 处 理 程 序 ')"> </BODY> 浏 览 2) 直 接 写 在 对 象 后 面 < 对 象 >.< 事 件 >=< 事 件 处 理 程 序 > <Script> document.onload=alert(' 这 是 事 件 处 理 程 序 '); </Script> *** 浏 览 47
JavaScript 的 事 件 处 理 3 应 用 举 例 例 1: <BODY> <FONT STYLE="cursor:hand" onclick="location='http://www.hubert.idv.tw/'" onmouseover="status=' 最 棒 的 在 线 学 习 网 站 '; this.color='red';" onmouseout="status=''; this.color='blue'"> 网 络 技 术 学 习 网 </FONT> </BODY> 浏 览 48
JavaScript 的 事 件 处 理 3 应 用 举 例 例 2 <BODY> <FORM name=fff> 请 输 入 基 本 资 料 :<BR> 姓 名 :<INPUT type="text" name="usr" size="8"> <INPUT type= button value= 确 认 " onclick="alert(fff.usr.value+' : 谢 谢 你!')"> </BODY> 浏 览 p58 **** 例 1 例 2 49
JavaScript 提 供 了 一 些 非 常 有 用 的 常 用 内 部 对 象 和 方 法 用 户 不 需 要 用 脚 本 来 实 现 这 些 功 能 这 正 是 基 于 对 象 编 程 的 真 正 目 的 本 节 主 要 介 绍 JavaScript 提 供 的 内 置 对 象 : Array(): 数 组 String(): 字 符 串 Math(): 数 值 计 算 Date(): 日 期 JavaScript 内 置 对 象 50
JavaScript 内 置 对 象 1. 数 组 (Array) 对 象 格 式 : 对 象 名 = new Array([ 元 素 个 数 ]) 对 象 名 = new Array([ 值 1[, 值 2, ]]) 例 如 : fruit=new Array( ) fruit=new Array(2) // 声 明 了 有 2 个 元 素 的 数 组 fruit=new Array( 苹 果, 橘 子 ) // 声 明 了 有 //2 个 数 组 元 素 的 数 组, 并 赋 值 属 性 :index: 数 组 元 素 的 索 引 值 *** length: 数 组 长 度 ( 数 组 元 素 个 数 ) 方 法 :join(): 将 数 组 内 的 所 有 值 组 合 成 一 个 字 符 串 并 用 特 定 符 号 分 开 reverse(): 将 数 组 内 元 素 的 索 引 次 序 翻 转 过 来 51
1. 数 组 (Array) 对 象 举 例 : 例 1: 一 维 数 组 应 用 例 2: 二 维 数 组 应 用 JavaScript 内 置 对 象 52
JavaScript 内 置 对 象 2. 字 符 串 (String) 对 象 格 式 : 字 符 串 变 量 名 = new String( 字 符 串 常 数 ) 例 如 :var str1= new String( JavaScript ) 属 性 : length: 字 符 串 长 度 *** 举 例 : 例 1: 属 性 length 测 试 53
JavaScript 内 置 对 象 方 法 : 1) indexof( 子 字 符 串 ). *** 0 2) replace( 字 符 串 a, 字 符 串 b ) 3) substr( 索 引 值 i [, 长 度 值 ]) 4) substring( 索 引 值 i, 索 引 值 j) i, j-1 5) tolowercase() 6) touppercase() indexof() 函 数 应 用 注 意 : 大 小 写! 大 小 写 转 换 substring() 54
JavaScript 内 置 对 象 3. 数 学 (Math) 对 象 属 性 : E: 欧 拉 常 量, 自 然 对 数 的 底 ( 约 等 于 2.718) LN2: 2 的 自 然 对 数 ( 约 等 于 0.693) LN10 : 10 的 自 然 对 数 ( 约 等 于 2.302) LOG2E: 以 2 为 底 的 e 的 对 数 ( 约 等 于 1.442) LOG10E: 以 10 为 底 的 e 的 对 数 ( 约 等 于 0.434) PI: π 的 值 ( 约 等 于 3.14159) SQRT1_2:0.5 的 平 方 根 ( 约 等 于 0.707) SQRT2: 2 的 平 方 根 ( 约 等 于 1.414) 55
JavaScript 内 置 对 象 3. 数 学 (Math) 对 象 方 法 : abs(x) 返 回 x 的 绝 对 值 acos(x) 返 回 x 的 反 余 弦 值 ( 以 弧 度 为 单 位 ) asin(x) 返 回 x 的 反 正 弦 值 ( 以 弧 度 为 单 位 ) atan(x) 返 回 x 的 反 正 切 值 ( 以 弧 度 为 单 位 ) ceil(x) 返 回 大 于 或 等 于 x 的 最 小 整 数 floor(x) 与 ceil 相 反 max(a,b) 返 回 两 数 间 的 较 大 值 min(a,b) 返 回 两 数 问 的 较 小 值 pow(m,n) 返 回 m 的 n 次 方 ( 其 中 m 为 底, n 为 指 数 ) random( ) 返 回 0 和 1 之 间 的 一 个 伪 随 机 数 round(x) 返 回 X 四 舍 五 入 之 后 的 整 数 56
Math.PI Math.max(a,b) Math.round(x) Math.randow() var m= new Math(); m.max(a,b); 举 例 57
JavaScript 内 置 对 象 4. 日 期 时 间 (Date) 对 象 格 式 : 对 象 实 例 名 = new Date ( [ 日 期 参 数 ] ) 举 例 : today = new Date () // 当 日 时 间 为 对 象 初 值 today = new Date ( October 1,2002 12:00:00 ) // 英 文 表 示 月 份, 其 余 以 数 值 表 示 : 即 月 日, 年 时 : 分 : 秒 today = new Date (2002, 08, 07, 0, 0, 0) // 一 律 以 数 字 表 示 : 即 年, 月, 日, 时, 分, 秒 58
JavaScript 内 置 对 象 4. 日 期 时 间 (Date) 对 象 方 法 : getyear() 返 回 年 份 值 getmonth() 返 回 月 份 值 getdate() 并 返 回 日 期 gethours() 返 回 小 时 数 getminutes() 返 回 分 钟 数 getseconds() 返 回 秒 数 getday() 返 回 星 期 几 gettime() 返 回 完 整 的 时 间 59
JavaScript 内 置 对 象 4. 日 期 时 间 (Date) 对 象 方 法 : setyear() 设 置 年 份 setmonth() 设 置 月 份 setdate() 设 置 日 期 sethours() 设 置 小 时 数 setminutes() 设 置 分 钟 数 setseconds() 设 置 秒 数 setday() 设 置 返 回 星 期 几 settime() 设 置 完 整 的 时 间 注 意 : setday() 60
JavaScript 内 置 对 象 4. 日 期 时 间 (Date) 对 象 提 示 : 月 份 数 为 (0---11) 日 期 数 为 (1---31) 星 期 数 为 (0----6) 小 时 数 为 (0---23) 分 钟 数 为 (0---59) 秒 数 为 (0---59) 毫 秒 数 为 (0---999) 61
JavaScript 内 置 对 象 5. 举 例 例 1:Date 对 象 常 用 方 法 测 试 例 2: 显 示 当 天 的 时 间 例 3: 显 示 用 户 的 进 站 时 间 例 4: 时 间 设 置 例 5: 倒 计 时 62
对 象 实 例 名 称. 属 性 对 象 实 例 名 称. 方 法 面 向 对 象 的 基 本 概 念 new: 定 义 对 象 实 例 语 法 : 对 象 实 例 名 称 = new 对 象 类 型 ( 参 数 ) 引 用 : 对 象 实 例 名 称. 属 性 对 象 实 例 名 称. 方 法 this: 代 表 当 前 对 象, 用 在 不 同 的 地 方, 有 不 同 的 结 果 this. 属 性 this. 方 法 63
JavaScript 内 置 对 象 Math. * 可 以 直 接 使 用 不 需 要 先 定 义 String( 字 符 串 ) Array( 数 组 ) * 必 须 先 定 义 new 后 引 用 Date( 日 期 ) 举 例 64
JavaScript 内 置 对 象 5. 用 户 自 定 义 对 象 在 实 际 应 用 应 用 中,JavaScript 提 供 的 内 置 对 象 往 往 不 能 满 足 用 户 的 需 求, 因 此, 常 常 需 要 建 立 用 户 自 定 义 对 象 对 象 (Object) 是 一 组 经 过 组 织 的 数 据, 在 JavaScript 中 的 每 一 个 对 象 都 有 两 个 相 关 的 成 员 : 属 性 (Property) 和 方 法 (Method) 建 立 自 定 义 对 象 就 是 为 对 象 定 义 : 属 性 和 方 法 65
5. 用 户 自 定 义 对 象 其 步 骤 是 : JavaScript 内 置 对 象 1) 写 一 个 构 造 函 数 来 定 义 : 对 象 类 a) 为 对 象 类 定 义 属 性 b) 为 对 象 类 定 义 方 法 先 将 方 法 的 名 称 放 到 对 象 的 构 造 函 数 中 写 一 个 函 数 来 描 述 该 对 象 方 法 的 内 容 2) 利 用 new 创 建 : 对 象 实 例 66
对 象 类 型 :member 属 性 : name sex 方 法 : display() 67
1) 定 义 对 象 类 型 function member(name, sex) { this.name = name; this.sex = sex; this.display = display; } 2) 描 述 对 象 的 方 法 function display() { var str = this.name + " 是 " + this.sex; document.write("<li>" + str); } 68
3) 创 建 对 象 实 例 var papa = new member(" 杨 宏 文 ", " 男 生 "); var mama = new member(" 黄 雅 玲 ", " 女 生 "); papa.display(); mama.display(); 举 例 69
JavaScript 内 置 对 象 作 业 题 1 利 用 日 期 对 象, 对 不 同 的 进 站 时 间, 显 示 不 同 的 提 示 信 息 比 如, 上 午 六 点 到 下 午 六 点, 显 示 将 有 限 的 时 间 用 在 作 最 有 意 义 的 事 ; 其 他 时 间 显 示 现 在 是 休 息 时 间 ( 答 案 ) 2 检 测 用 户 输 入 的 邮 件 格 式 是 否 正 确 ( 答 案 ) 3 用 户 进 入 时, 显 示 欢 迎 您 进 入 本 网 站! ; 离 开 时, 显 示 谢 谢 您, 欢 迎 下 次 再 来! 答 案 : <Body onload="alert(' 欢 迎 您 进 入 本 网 站!')" onunload="alert(' 谢 谢 您, 欢 迎 下 次 再 来!')"> </Body> 70
JavaScript 对 象 及 其 层 次 关 系 Window Frame Document Location History Layer Link Image Form Area Applet Anchor Plugin FileUpload Hidden Text Passward Button Submit Reset Radio CheckBox Textarea Select Option 71
窗 口 对 象 (WINDOW) 1. 功 能 : 顶 层 对 象, 用 来 表 示 浏 览 器 所 打 开 的 窗 口 2. 格 式 指 定 窗 口 : 窗 口 名. 属 性 窗 口 名. 方 法 ( 参 数 群 ) 打 开 当 前 窗 口 的 窗 口 :opener. 属 性 opener. 方 法 ( 参 数 群 ) 框 架 中 的 顶 级 窗 口 :top. 属 性 top. 方 法 ( 参 数 群 ) 当 前 活 动 窗 口 :self. 属 性 self. 方 法 ( 参 数 群 ) 例 如 :win1.document.title= 广 告 窗 口 self.close() opener.document.forms[0].user.value= 张 永 72
窗 口 对 象 (WINDOW) 3. 属 性 name 窗 口 的 名 字 closed 判 断 窗 口 是 否 已 经 被 关 闭, 返 回 布 尔 值 document 包 含 当 前 文 档 的 信 息,( 该 属 性 本 身 是 对 象 ) history 当 前 窗 口 最 近 浏 览 过 的 网 页 ( 该 属 性 本 身 是 对 象 ) location 窗 口 所 显 示 文 档 的 完 整 URL( 该 属 性 本 身 是 对 象 ) frames 窗 口 的 框 架 对 象 数 组, 以 数 组 索 引 值 表 示, ( 该 属 性 本 身 也 是 一 个 对 象 ) length 窗 口 内 的 框 架 个 数 opener 代 表 使 用 open 打 开 当 前 窗 口 的 脚 本 所 在 的 窗 口 self 代 表 当 前 窗 口 top 代 表 当 前 框 架 的 最 顶 层 窗 口 73
4. 方 法 open( URL, 窗 口 名 称, [, 窗 口 规 格 ] ) 打 开 一 个 新 窗 口 URL:1,2,3 窗 口 名 称 : name _top / _blank 窗 口 规 格 : ***P112 表 4-4 例 : NewWin=open( '', '_blank', 'height=100,width=300'); 注 意 : 引 用 时 不 需 声 称 new 74
窗 口 对 象 (WINDOW) 3. 属 性 ( 规 格 参 数 ) defaultstatus 缺 省 的 状 态 栏 信 息 status 状 态 栏 中 的 信 息 scrollbars 浏 览 器 的 滚 动 条 ( 包 括 水 平 和 垂 直 滚 动 条 ) toolbar 浏 览 器 的 工 具 栏 menubar 浏 览 器 的 菜 单 栏 locationbar 浏 览 器 的 地 址 栏 innerheight 窗 口 内 容 区 的 高 度 ( 以 像 素 表 示 ) innerwidth 窗 口 内 容 区 的 宽 度 ( 以 像 素 表 示 ) outerheight 窗 口 边 界 的 高 度 ( 以 像 素 表 示 ) outerwidth 窗 口 边 界 的 宽 度 ( 以 像 素 表 示 ) pagexoffset 网 页 x-position 的 位 置 ( 以 像 素 表 示 ) pageyoffset 网 页 y-position 的 位 置 ( 以 像 素 表 示 ) p112 75
open(url, 窗 口 名 称, [, 窗 口 规 格 ]) window document.write(" 网 络 技 术 学 习 网 "); window.document.write(" 网 络 技 术 学 习 网 "); var NewWin=open('WINDOW21.htm','MyWindow', 'height=100,width=300'); var NewWin=window.open('WINDOW21.htm','MyWindow', 'height=100,width=300'); NewWin.document.write("Open Window Name is: " + NewWin.name + "<BR>"); 举 例 76
窗 口 对 象 (WINDOW) 4. 方 法 open(url, 窗 口 名 称, [, 窗 口 规 格 ]) 打 开 一 个 新 窗 口 close() 关 闭 窗 口 MoveBy( 水 平 点 数, 垂 直 点 数 ) MoveTo(x,y) 将 窗 口 移 动 至 (x,y) 坐 标 处, 参 数 取 绝 对 值 ResizeBy( 水 平 点 数, 垂 直 点 数 ) 调 整 窗 口 大 小, 参 数 取 相 对 值 负 值 为 减 小 ResizeTo( 宽 度, 高 度 ) settimeout(< 表 达 式 或 函 数 >, 毫 秒 数 ) 等 待 一 段 指 定 的 毫 秒 数 时 间, 然 后 运 行 指 令 cleartimeout( 定 时 器 对 象 ) 清 除 settimeout 定 义 的 计 时 程 序 77
窗 口 对 象 (WINDOW) 4. 方 法 setinterval(< 表 达 式 或 函 数 >, 毫 秒 数 ) 设 置 一 个 定 时 程 序 clearinterval( 定 时 器 对 象 ) 清 除 setinterval 定 义 的 计 时 器 focus() 将 焦 点 移 到 此 窗 口 blur() 把 焦 点 从 指 定 窗 口 移 开 home() 进 入 客 户 端 在 浏 览 器 上 设 置 的 主 页 stop() 停 止 加 载 网 页 内 容 back() 返 回 历 史 记 录 的 上 一 个 网 页 forward() 加 载 历 史 记 录 的 下 一 个 网 页 78
窗 口 对 象 (WINDOW) 4. 方 法 alert( 字 符 串 ) 传 送 警 告 信 息 对 话 框 confirm( 字 符 串 ) 打 开 一 个 Confirm 对 话 框, 用 户 可 以 选 择 OK 或 Cancel, 如 果 用 户 单 击 OK, 该 方 法 返 回 true, 单 击 Cancel 返 回 false prompt( 字 符 串, 默 认 值 ) 打 开 一 个 Prompt 对 话 框, 用 户 可 向 该 框 键 入 文 本, 并 把 键 入 的 文 本 返 回 到 脚 本 79
5. 事 件 onfocus onblur onerror onload onunload 窗 口 对 象 (WINDOW) ondragdrop onmove onresize 80
窗 口 对 象 (WINDOW) 6. 举 例 例 1: 改 变 窗 口 的 大 小 实 例 例 2: 打 开 窗 口 例 3: 页 面 下 落 效 果 例 4:Prompt 方 法 实 例 例 5:setInterval 实 例 例 6:setTimeout 实 例 例 7:WINDOW 对 象 综 合 实 例 81
1. 单 击 来 者 何 人, 打 开 一 200*100 的 窗 口 2. 打 开 网 页 时, 自 动 打 开 一 300*100 的 窗 口 82
历 史 对 象 (HISTORY) 1. 功 能 它 为 window 对 象 的 一 个 属 性, 用 来 存 储 客 户 端 最 近 访 问 过 的 网 页 清 单 2. 格 式 history. 属 性 history. 方 法 ( 参 数 ) 3. 属 性 length 存 储 在 记 录 清 单 中 的 网 页 数 目 current 当 前 的 网 页 地 址 next 下 一 个 历 史 记 录 的 网 页 地 址 previous 上 一 个 历 史 记 录 的 网 页 地 址 83
4. 方 法 Back() 回 到 客 户 端 查 看 过 的 上 一 页 Forward() 回 到 客 户 端 查 看 过 的 下 一 页 Go( 整 数 或 URL 字 符 串 ) 前 往 历 史 记 录 中 的 某 个 网 页 5. 举 例 例 :history 对 象 实 例 历 史 对 象 (HISTORY) 继 续 84
历 史 对 象 (HISTORY) WIN1 WIN2 WIN3 WIN4 WIN5 WIN6 history.back() history.forward() history.go() 85
1. 功 能 代 表 特 定 窗 口 的 URL 信 息 一 个 完 整 的 URL 格 式 如 下 : protocol // host:port / path # hash? search protocol: 通 信 协 议 host: 主 机 名 称 port: 通 信 端 口 path: 文 件 路 径 hash: 定 位 锚 点 search: 查 询 信 息 位 置 对 象 (LOCATION) http 86
位 置 对 象 (LOCATION) 2. 语 法 location. 属 性 location. 方 法 ( 参 数 ) 3. 属 性 hash URL 中 定 位 锚 点 名 称 host URL 中 主 机 名 部 分 hostname URL 中 host:port 部 分 href 完 整 的 URL 字 符 串 pathname URL 中 path 部 分 port URL 的 端 口 port 部 分 protocol URL 的 通 信 协 议 search 以 问 号 (?) 开 始 的 URL 中 的 一 部 分, 用 于 指 定 搜 索 信 息 87
位 置 对 象 (LOCATION) 4. 方 法 reload() 重 新 加 载 ( 刷 新 ) 当 前 的 网 页 replace( 网 址 ) 用 特 定 的 网 页 取 代 当 前 的 网 页 5. 举 例 <FONT color="red" onclick= location.href= http://www.sohu.com/ >( 用 普 通 文 字 实 现 超 链 接 )</FONT> <P>< style={cursor:hand} > <A href="http://www.sohu.com/">( 用 A 标 记 字 实 现 超 链 接 )</A> 例 1: 用 普 通 文 字 实 现 超 链 接 的 范 例 88
<Script> document.title = " 自 动 打 开 网 页 范 例 "; var sec = 5; function countdown() {if (sec > 0) num.innerhtml = sec--; else location.href = http://www.sysu.edu.cn ; } </Script> 例 2: 自 动 打 开 网 页 范 例 89
例 2: 自 动 打 开 网 页 范 例 <BODY onload="setinterval('countdown()',1000)"> <CENTER> 五 秒 钟 后 自 动 带 你 前 往 <BR> 中 山 大 学 网 页 <H2>http://www.sysu.edu.cn</H2> <FONT SIZE="7" FACE="impact" ID= "num" > 5 </FONT> </CENTER> </BODY> 90
框 架 对 象 (FRAME) 每 一 个 框 架 对 象 相 当 于 窗 口 (WINDOW) 对 象, 因 此 框 架 对 象 可 以 使 用 窗 口 对 象 的 所 有 属 性 和 方 法 1. 框 架 组 的 结 构 top upframe leftframe downframe 2. 框 架 组 的 层 次 top leftframe upframe downframe 91
3. 框 架 的 引 用 top.leftframe top.upframe top.downframe 或 top.frames[0] top.frames[1] top.frames[2] 4. 举 例 框 架 对 象 (FRAME) 92
文 档 对 象 (DOCUMENT) 文 件 对 象 (Document) 代 表 当 前 的 HTML 对 象, 是 由 <BODY> 标 记 组 构 成 的,JavaScript 自 动 为 每 一 个 HTML 文 件 建 立 一 个 document 对 象, 用 来 显 示 HTML 文 件 93
文 档 对 象 (DOCUMENT) 1. 语 法 document. 属 性 document. 方 法 2. 属 性 title 文 档 的 标 题 (<TITLE>) links 文 件 中 的 所 有 链 接, 以 数 组 索 引 值 表 示 linkcolor 文 档 的 链 接 的 颜 色, 即 <BODY> 标 记 中 的 LINK 属 性 alinkcolor 活 动 链 接 的 颜 色 (ALINK) vlinkcolor 指 向 已 点 击 过 的 超 链 接 文 本 颜 色, 即 <BODY> 标 记 的 VLINK 特 性 bgcolor 文 档 的 背 景 颜 色 (BGCOLOR) fgcolor 文 档 中 文 本 颜 色 (<BODY> 中 的 TEXT 特 性 ) 94
文 档 对 象 (DOCUMENT) 2. 属 性 forms 文 件 中 的 所 有 表 单, 以 数 组 索 引 值 表 示 images 文 档 中 所 有 image, 以 数 组 索 引 值 表 示 lastmodified 文 档 最 后 的 修 改 日 期 anchors 文 档 中 所 有 锚 点, 以 数 组 索 引 值 表 示 cookie 存 储 于 cookie.txt 文 件 内 的 一 段 信 息, 它 是 该 文 档 对 象 的 一 个 属 性 URL 表 示 该 文 件 的 网 址 95
文 档 对 象 (DOCUMENT) 3. 方 法 write( 字 符 串 ) 将 字 符 串 或 数 值 写 到 文 件 中 4. 事 件 onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup 5. 举 例 例 1: 测 试 文 件 对 象 的 颜 色 属 性 例 2: 网 页 修 改 日 期 时 间 96
当 文 档 中 包 含 <A> 标 记 时,JavaScript 自 动 建 立 相 对 应 的 锚 点 对 象 这 些 对 象 可 以 用 document 的 anchors 属 性, 搭 配 数 组 的 索 引 方 式 来 进 行 访 问 控 制 例 如 : 第 一 个 锚 点 对 象 : document. anchors [0] 第 二 个 锚 点 对 象 : document. anchors [1] 锚 点 对 象 (ANCHORS) 97
锚 点 对 象 (ANCHORS) 1. 语 法 document. 锚 点 名. 属 性 document. 锚 点 名. 方 法 或 document.anchors[]. 属 性 document.anchors[]. 方 法 2. 属 性 name 表 示 锚 点 的 名 称 98
链 接 对 象 (LINKS) 无 论 是 文 字 图 形 或 图 像 映 射, 只 要 是 用 来 作 为 超 级 链 接 用 的 对 象,JavaScript 自 动 建 立 相 对 应 的 链 接 对 象 这 些 对 象 可 以 用 document 的 links 属 性, 搭 配 数 组 的 索 引 方 式 来 进 行 访 问 控 制 例 如 : 第 一 个 链 接 对 象 : document.links[0] 第 二 个 链 接 对 象 : document.links[1] 99
链 接 对 象 (LINKS) 1. 语 法 document. 链 接 名. 属 性 document. 链 接 名. 方 法 或 document.links[]. 属 性 document.links[]. 方 法 2. 属 性 hash 表 示 URL 字 符 串 中 锚 点 的 名 称 host 表 示 主 机 域 名 或 IP 地 址 hostname 表 示 URL 当 中 的 host 与 port 的 部 分 href 完 整 的 URL 字 符 串 pathname 表 示 URL 当 中 的 目 录 路 径 (path) 部 分 100
链 接 对 象 (LINKS) 2. 属 性 port 表 示 URL 当 中 的 通 信 端 口 (port) 部 分 protocol 表 示 URL 当 中 的 通 信 协 议 部 分 search 表 示 URL 当 中 的 查 询 字 符 串 部 分 target 代 表 目 标 的 窗 口, 即 HTML 中 的 TARGET 属 性 text 表 示 A 标 记 中 的 文 字 Length 其 返 回 值 为 当 前 文 档 中 超 级 链 接 的 数 目 3. 事 件 onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown 4. 举 例 101
图 像 对 象 (IMAGES) 当 文 件 中 包 含 <IMG> 标 记 时,JavaScript 自 动 建 立 相 对 应 的 图 像 对 象 这 些 对 象 可 以 用 document 的 images 属 性, 搭 配 数 组 的 索 引 方 式 来 进 行 访 问 控 制 例 如 : 第 一 个 图 像 对 象 : document. images [0] 第 二 个 图 像 对 象 : document. images [1] 102
图 像 对 象 (IMAGES) 2. 属 性 src 图 像 的 URL,SRC 属 性 border 图 像 的 边 框,<IMG> 标 记 的 BORDER 属 性 width 图 像 的 宽 度,WIDTH 属 性 height 图 像 的 高 度,HEIGHT 属 性 hspace 图 像 水 平 空 白,HSPACE 属 性 vspace 图 像 垂 直 空 白,VSPACE 属 性 lowsrc 图 像 的 第 分 辨 率 版 本,LOWSRC 属 性 complete 表 示 浏 览 器 是 否 完 成 了 图 像 的 加 载, 一 个 布 尔 值 3. 事 件 : onabort onerror onload onkeydown onkeypress onkeyup 103
表 单 对 象 (FORM) 表 单 对 象 (Form) 提 供 一 个 让 客 户 端 输 入 文 字 或 进 行 选 择 的 功 能, 例 如 : 单 选 按 钮 复 选 框 选 择 列 表 等 由 <FORM> 标 记 组 构 成,JavaScript 自 动 建 立 一 个 表 单 对 象, 并 将 用 户 端 的 信 息 送 至 服 务 器 进 行 处 理 表 单 对 象 是 文 件 对 象 (document) 的 子 对 象, 同 时, 它 也 包 含 许 多 子 对 象 104
表 单 对 象 (FORM) 1. 表 单 对 象 的 使 用 格 式 document.forms[ 索 引 值 ]. 属 性 document.forms[ 索 引 值 ]. 方 法 ( 参 数 群 ) 或 document. 表 单 名 称. 属 性 document. 表 单 名 称. 方 法 ( 参 数 群 ) 2. 常 用 属 性 name: 表 单 名, 相 当 于 <FORM> 标 记 的 name 属 性 action: 相 当 于 <FORM> 标 记 的 ACTION 属 性 method: 输 入 窗 体 的 数 据 传 送 到 服 务 器 上 的 方 式, 即 (FORM) 标 记 中 的 METHOD 属 性 105
表 单 对 象 (FORM) 2. 常 用 属 性 elements: 表 单 中 的 所 有 控 件, 以 数 组 索 引 值 表 示 length: 表 单 中 的 控 件 的 个 数 例 : document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 属 性 3. 常 用 方 法 submit() 提 交 表 单 ( 与 submit 按 钮 的 作 用 相 同 ) reset() 重 写 表 单 ( 与 使 用 reset 按 钮 的 作 用 相 同 ) 106
表 单 域 对 象 (FORM) 2. 常 用 属 性 Text: 单 行 文 本 Password: 密 码 对 象 Checkbox: 复 选 框 Radio: 单 选 按 钮 Submit: 提 交 按 钮 Reset: 复 位 按 钮 Button:<INPUT TYPE= BUTTON > 按 钮 Textarea: 多 行 文 本 Select: <SELECT> 选 择 框 Option: 选 项 对 象 注 意 : 表 单 域 属 性 同 时 也 是 对 象 107
单 行 文 本 对 象 (text) 当 JavaScript 读 到 <INPUT> 标 记 中 的 type 属 性 值 为 text 时, 自 动 建 立 一 个 文 本 按 钮 对 象, 并 将 该 对 象 放 到 表 单 对 象 的 elements 数 组 当 中, 让 程 序 员 可 以 通 过 一 定 的 方 法 来 控 制 这 一 对 象 1. 使 用 文 本 对 象 的 格 式 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 属 性 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 方 法 ( 参 数 群 ) 或 document. 表 单 名 称. 文 本 对 象 名 称. 属 性 document. 表 单 名 称. 文 本 对 象 名 称. 方 法 ( 参 数 群 ) 108
单 行 文 本 对 象 (text) 2. 常 用 属 性 name: text 对 象 的 名 字 defaultvalue: text 对 象 的 缺 省 值 type: text 对 象 的 类 型 (NAME 属 性 ) value: text 的 当 前 值 (VALUE 属 性 值 ) 3. 常 用 方 法 Blur() 把 焦 点 从 文 本 框 移 开 Focus() 把 焦 点 移 到 文 本 框 Select() 将 该 对 象 设 置 成 选 取 状 态 109
4. 事 件 onblur onfocus onchange onselect onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 5. 举 例 <TITLE> 单 行 文 本 范 例 </TITLE> <FORM name=form1> 姓 名 :<INPUT TYPE="text" NAME="name1"> <INPUT TYPE="button" VALUE=" 请 单 击 " onclick=alert(document.form1.name1.value, ", 谢 谢 你!") > </FORM> 单 行 文 本 对 象 (text) 运 行 110
密 码 对 象 (password) 当 JavaScript 读 到 <INPUT> 标 记 中 的 type 属 性 值 为 password 时, 自 动 建 立 一 个 密 码 对 象, 并 将 该 对 象 放 到 表 单 对 象 的 elements 数 组 当 中, 让 程 序 员 可 以 通 过 一 定 的 方 法 来 控 制 这 一 对 象 注 : 其 引 用 方 法 与 单 行 文 本 相 同 111
2. 常 用 属 性 name: password 对 象 的 名 字 defaultvalue: text 对 象 的 缺 省 值 type: password 对 象 的 类 型 (NAME 属 性 ) value: password 的 当 前 值 (VALUE 属 性 值 ) 3. 常 用 方 法 Blur() 把 焦 点 从 文 本 框 移 开 Focus() 把 焦 点 移 到 文 本 框 Select() 将 该 对 象 设 置 成 选 取 状 态 112
按 钮 对 象 (button) 当 JavaScript 读 到 <INPUT> 标 记 中 的 type 属 性 值 为 button 时, 自 动 建 立 一 个 按 钮 对 象, 并 将 该 对 象 放 到 表 单 对 象 的 elements 数 组 当 中 按 钮 对 象 包 括 : 普 通 按 钮 (button) 提 交 按 钮 (submit) 重 置 按 钮 (reset) 1. 使 用 按 钮 对 象 的 格 式 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 属 性 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 方 法 ( 参 数 群 ) 或 document. 表 单 名 称. 按 钮 对 象 名 称. 属 性 document. 表 单 名 称. 按 钮 对 象 名 称. 方 法 ( 参 数 群 ) 113
按 钮 对 象 (buttom) 2. 常 用 属 性 name: 按 钮 对 象 的 名 字 value: 按 钮 上 显 示 的 值 type: 按 钮 类 型 (button submit reset) 3. 常 用 方 法 blur() 把 焦 点 从 该 对 象 上 移 开 focus() 把 焦 点 移 到 该 对 象 上 click() 再 该 对 象 上 单 击 鼠 标 左 键 4. 事 件 onblur onfocus onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 114
举 例 1: 用 户 登 录 界 面 例 2: 输 入 信 用 卡 号 例 3: 输 入 四 位 密 码 例 115
多 行 文 本 对 象 (TEXTAREA) 当 JavaScript 读 到 <TEXTAREA> 标 记 时, 自 动 建 立 一 个 文 本 区 域 对 象, 并 将 该 对 象 放 到 表 单 对 象 的 elements 数 组 当 中 1. 使 用 文 本 对 象 的 格 式 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 属 性 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 方 法 ( 参 数 群 ) 或 document. 表 单 名 称. 文 本 区 域 对 象 名 称. 属 性 document. 表 单 名 称. 文 本 区 域 对 象 名 称. 方 法 ( 参 数 群 ) 116
多 行 文 本 对 象 (TEXTAREA) 2. 属 性 name: 该 对 象 的 名 字 (NAME 属 性 ) defaultvalue: 该 对 象 的 缺 省 值 (VALUE 属 性 初 值 ) value: 该 对 象 的 当 前 值 (VALUE 属 性 值 ) rows: 设 置 文 本 域 对 象 的 最 大 可 视 行 数 cols: 设 置 文 本 域 对 象 的 最 大 可 视 列 数 3. 方 法 blur() 把 焦 点 从 文 本 框 移 开 focus() 把 焦 点 移 到 文 本 框 select() 将 该 对 象 设 置 成 选 取 状 态 4. 事 件 onblur onchange onfocus onselect onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 117
多 行 文 本 对 象 <Script> document.title = " 多 行 文 本 对 象 示 例 "; function istoolong(elm) { if (elm.length > 50) { alert(" 留 言 内 容 太 长, 请 修 改 后 再 发 送..."); return false; } else { meswin=open("","","width=200,height=100"); meswin.document.write(elm); } } </script> <FORM onsubmit="return istoolong(this.msg.value)"> <TEXTAREA name="msg" cols="30" rows="5" onfocus="this.value=''"> 欢 迎 留 言, 不 过 请 长 话 短 说...</TEXTAREA ><BR> <INPUT TYPE="submit" VALUE=" 留 言 完 毕 "> </FORM> 举 例 118
单 选 按 钮 对 象 (radio) 当 JavaScript 读 到 <INPUT> 标 记 中 的 type 属 性 值 为 radio 时, 自 动 建 立 一 个 单 选 按 钮 对 象, 并 将 该 对 象 放 到 表 单 对 象 的 elements 数 组 当 中 1. 使 用 按 钮 对 象 的 格 式 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 属 性 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 方 法 ( 参 数 群 ) 或 document. 表 单 名 称. 单 选 按 钮 对 象 名 称. 属 性 document. 表 单 名 称. 单 选 按 钮 对 象 名 称. 方 法 ( 参 数 群 ) 119
单 选 按 钮 对 象 (radio) 2. 属 性 name: 单 选 按 钮 对 象 的 名 字 (NAME 属 性 ) checked: 设 置 单 选 按 钮 是 否 被 选 中 length: 返 回 单 选 按 钮 的 个 数 type: 设 置 单 选 按 钮 的 类 型 (radio) value: 返 回 单 选 按 钮 的 值 3. 方 法 blur() 把 焦 点 从 该 对 象 上 移 开 focus() 把 焦 点 移 到 该 对 象 上 click() 在 该 对 象 上 单 击 鼠 标 左 键 120
单 选 按 钮 对 象 4. 事 件 onblur onfocus onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 121
单 选 按 钮 对 象 (radio) 5. 举 例 例 1: 判 断 用 户 身 份 例 2: 在 线 考 试 122
复 选 框 对 象 (checkbox) 当 JavaScript 读 到 <INPUT> 标 记 中 的 type 属 性 值 为 checkbox 时, 自 动 建 立 一 个 复 选 框 对 象, 并 将 该 对 象 放 到 表 单 对 象 的 elements 数 组 当 中 1. 使 用 复 选 框 对 象 的 格 式 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 属 性 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 方 法 ( 参 数 群 ) 或 document. 表 单 名 称. 复 选 框 对 象 名 称. 属 性 document. 表 单 名 称. 复 选 框 对 象 名 称. 方 法 ( 参 数 群 ) 123
复 选 框 对 象 (checkbox) 2. 属 性 name: 复 选 按 钮 对 象 的 名 字 (NAME 属 性 ) checked: 设 置 复 选 按 钮 是 否 被 选 中 length: 返 回 复 选 按 钮 的 个 数 type: 设 置 复 选 按 钮 的 类 型 (checkbox) value: 返 回 复 选 按 钮 的 值 3. 方 法 blur() 把 焦 点 从 该 对 象 上 移 开 focus() 把 焦 点 移 到 该 对 象 上 click() 在 该 对 象 上 单 击 鼠 标 左 键 124
复 选 框 对 象 (checkbox) 4. 事 件 onblur onfocus onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 125
复 选 框 对 象 (checkbox) 5. 举 例 : 选 择 颜 色 <Script> function count() { var checkcount=0; var num = document.form1.elements.length; *** for (var i=0; i<num; i++) {if (document.form1.elements[i].checked) checkcount++; } alert (" 你 喜 欢 "+ checkcount + " 种 颜 色 ") } </Script> <FORM NAME=form1> 请 选 择 你 喜 欢 的 颜 色 :<BR> <INPUT TYPE="checkbox" NAME="red"> 红 色 <INPUT TYPE="checkbox" NAME="green"> 绿 色 <INPUT TYPE="checkbox" NAME="blue"> 蓝 色 <BR> <INPUT TYPE="button" VALUE=" 请 单 击 " onclick=count()> </FORM> 运 行 结 果 126
下 拉 列 表 对 象 (select) 当 JavaScript 读 到 <SELECT> 标 记 时, 自 动 建 立 一 个 选 择 对 象, 并 将 该 对 象 放 到 表 单 对 象 的 elements 数 组 当 中 1. 使 用 选 择 对 象 的 格 式 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 属 性 document.forms[ 索 引 值 ].elements[ 索 引 值 ]. 方 法 ( 参 数 群 ) 或 document. 表 单 名 称. 选 择 对 象 名 称. 属 性 document. 表 单 名 称. 选 择 对 象 名 称. 方 法 ( 参 数 群 ) 127
下 拉 列 表 对 象 (select) 2. 属 性 name: 该 对 象 的 名 字 (NAME 属 性 ) options: 数 组 属 性, 表 示 下 拉 列 表 中 的 选 项 length: 返 回 下 拉 列 表 中 选 项 (Option) 的 数 目 selectedindex: 返 回 下 拉 列 表 所 选 择 项 对 应 目 的 索 引 ( 选 到 第 一 项, 返 回 0) 3. 方 法 blur() 把 焦 点 从 该 对 象 上 移 开 focus() 把 焦 点 移 到 该 对 象 上 128
选 择 对 象 4. 事 件 onblur onfocus onclick ondblclick onkeydown onkeypress onkeyup onmouseover onmouseup onmouseout onmousedown onmousemove 129
1. 建 立 选 项 对 象 的 格 式 选 项 对 象 (option) var 选 择 对 象 名 = new Option( ) 130
2. 属 性 name: 该 对 象 的 名 字 (NAME 属 性 ) defaultselected: 指 定 该 选 项 为 默 认 选 择 状 态 index: 返 回 所 选 项 的 索 引 值 text: 设 置 或 返 回 某 选 项 所 显 示 的 提 示 字 符 串 3. 方 法 blur() 把 焦 点 从 该 对 象 上 移 开 focus() 把 焦 点 移 到 该 对 象 上 4. 举 例 选 项 对 象 (option) 131
作 业 题 1. 逐 行 检 查 是 否 填 正 确 如 数 据, 如 未 填 写, 应 提 示 用 户 填 写, 如 下 图 所 示 132
作 业 题 2. 如 果 输 入 的 密 码 不 是 4 位 数 字, 请 提 示 用 户, 如 下 图 所 示 133