动态网页脚本语言JavaScript完整ppt课件

1 动态网页脚本语言JavaScript 主要内容概述编程基础面向对象的基本概念内置对象浏览器窗口对象 2 JavaScript是由Netscape公司开发的一种跨平台 面向对象 object oriented 的网页脚本语言 WebScriptLanguage 是目前流行的网页特效设计语言 JavaScript代码可直接嵌入HTML文件中 随网页一起传送到客户端浏览器 然后通过浏览器来解释执行 JavaScript概述 3 什么是JavaScript脚本语言 1 脚本语言 ScriptingLanguage 由ASCII码构成 可直接用任何的文本编辑器开发完成 是一种不必事先编译 只要利用适当的解释器 Interpreter 就可以执行的简单的解释式程序 2 JavaScript JavaScript是由Netscape公司开发的一种跨平台 纯面向对象 object oriented 式的网页式脚本语言 WebScriptLanguage JavaScript代码可直接嵌入HTML文件中 随网页一起传送到客户端浏览器 然后通过浏览器的解释器来解释执行 JavaScript概述 4 脚本编写语言基于对象的语言简单性动态性跨平台 2 JavaScript的特点 JavaScript概述 5 制作网页特效提供表单前端验证窗口动态操作提高系统工作效率 3 JavaScript的功能 JavaScript概述 6 在HTML标记中直接写入JavaScript代码例 鼠标移过来运行 4 在HTML文档中嵌入JavaScript代码 JavaScript概述 7 将JavaScript代码放入 标记符中例如 document write 欢迎您学习JavaScript 运行 4 在HTML文档中嵌入JavaScript代码 JavaScript概述 8 将代码独立存储为以 js为扩展名的文件 利用SRC属性将该文件调入例如 welcome js文件内容如下 document write 欢迎您学习JavaScript 4 在HTML文档中嵌入JavaScript代码 JavaScript概述 举例 9 document write varA UppercaseA document write A document write UppercaseA document write document write gv A 10 为避免某些浏览器不完全支持JavaScript 而造成错误 可将JavaScript代码用注释语句括起来例如 4 在HTML文档中嵌入JavaScript代码 JavaScript概述 11 数值型 Number 包含整数或浮点数 布尔型 Logical 取值为true或false 1 0字符型 String 用单引号或双引号括起来的零个或多个的字符或数字所组成 空类型 null 表示没有值 取唯一值 null 大小写敏感 注 null不能写成Null或NULL null既不等于 0 也不等于 空字符串 因为 0 是数值 空字符串 是字符串 1 数据类型 JavaScript编程基础 12 自动数据类型转换如果表达式中用 运算符 且其中一个操作数为字符串 另一个操作数为数值时 JavaScript自动将数值转成字符串 例如 varx 我今年 18 结果 x 我今年18 varx 15 8结果 x 158vary 15 8 结果 y 23如果表达式中用了其它运算符 JavaScript自动将字符串转成数值 例如 varx 30 5 结果 x 6vary 15 8 结果 y 7举例 2 数据类型转换 JavaScript编程基础 13 数据类型转换函数eval 字符串 将字符串参数转换成相应的数值 例如 y eval 15 8 结果 y 23parseInt 字符串 底数 将字符串转换成指定底数的数值 parseFloat 字符串 将字符串转换成浮点数值 举例 2 数据类型转换 JavaScript编程基础 14 3 变量 JavaScript编程基础 变量命名以字母或下划线开头 不能以数字开头 后面接数字 字母或下划线 变量名区分大小写 不能用系统保留字和特殊符号作为变量例 varA UppercaseA vara Lowercasea document write A document write document write a 15 3 变量 JavaScript编程基础 变量的声明变量声明时 不必定义类型 所有类型均由小写的var声明 例如 varname JavaScript自动给出一个未定义值 varname sex JavaScript自动给出一个未定义值 varname 张永 sex 女生 二变量均为字符串 16 3 变量 JavaScript编程基础 变量的作用域 全局变量 Globalvariable 局部变量 Localvariable vargv JavaScript gv是全局变量functiontest varlv VBScript lv是局部变量document write gv gv document write lv lv test document write document的输出 document write gv gv document write lv lv 举例 17 4 常量 JavaScript编程基础 字符串常量 StringLiterals 一般字符串常量 特殊字符的字符串常量布尔常量 BooleanLiterals true或false1 0数值型 整数常量 IntegersLiterals 浮点常量 Floating PointLiterals 18 5 运算符与表达式 JavaScript编程基础 赋值运算符 x y等价于x x yx y等价于x x y 19 5 运算符与表达式 JavaScript编程基础 比较运算符举例 20 5 运算符与表达式 JavaScript编程基础 算术运算符举例 21 5 运算符与表达式 JavaScript编程基础 逻辑运算符a b 逻辑与 AND 若a b都是ture 则结果为ture a b 逻辑或 OR 若a b任一是ture 则结果为ture a 逻辑非 NOT 若a是ture 则结果为false 22 5 运算符与表达式 JavaScript编程基础 字符串运算符 Stringoperators f 条件运算符 格式 条件表达式 值1 值2如果条件表达式的结果是ture 返回值1 否则返回值2 vara b max a b a b 举例 23 5 运算符与表达式 JavaScript编程基础 g typeof 用来判断操作数的类型格式 typeof操作数或typeof 操作数 举例 24 属性对象类型 方法对象实例对象实例名 属性对象实例名 方法如 窗口p102 JavaScript编程基础 25 5 运算符与表达式 JavaScript编程基础 h new 定义对象实例 语法 对象实例名 new对象类型 参数 例如 myArray newArray 3 this 代表当前对象 因此用在不同的地方 就有不同的结果 this 属性this 方法举例 26 6 程序控制流程 JavaScript编程基础 选择结构 if语句else语句 if 语句组 else 语句组 if 语句组 elseif 语句组 else 语句组 举例 27 6 程序控制流程 JavaScript编程基础 b Switch结构 switch case break case break default 28 6 程序控制流程 JavaScript编程基础 循环结构 while 语句组 vari 5 while i 0 document write i i i 例 29 6 程序控制流程 JavaScript编程基础 循环结构 vari 5 do document write i i i while i 0 例 do 语句或语句组 while 30 6 程序控制流程 JavaScript编程基础 循环结构 for 初始值 条件 增量 for vari 5 i 0 i document write i i 31 6 程序控制流程 JavaScript编程基础 循环结构 for iinar document write ar i 例1 for 变量in对象 32 6 程序控制流程 JavaScript编程基础 C With语句 with document write 限时抢购物品 document write ViewSonic17 显示器 document write EPSON打印机 with document write 限时抢购物品 write ViewSonic17 显示器 write EPSON打印机 例1 33 6 程序控制流程 JavaScript编程基础 注释语句 34 JavaScript包含两类函数 系统函数用户自定义函数 7 JavaScript函数 JavaScript编程基础 35 1 编码函数功能 将字符串中非文字 数字字符 如 空格符 转成相对应的ASCII值 语法 escape 字符串 2 译码函数功能 与escape 相反 将ASCII值转回ASCII字符 语法 unescape ASCII值 3 求值函数功能 通常有两个用途 一个用作字符串的运算 另一个用来指出操作对象 语法 eval 字符串表达式 JavaScript编程基础 36 4 数值判断函数功能 判断变量的值是否为数值 NaN 代表 NotaNumber 若返回值为true 则表示自变量不是数值 语法 isNaN 测试值 举例 varx 15 y 黄雅玲 document write x不是数值吗 isNaN x document write y不是数值吗 isNaN y 执行结果 x不是数值吗 falsey不是数值吗 True JavaScript编程基础 举例 37 5 转成整数函数功能 将字符串转换成指定底数的数值 格式 parseInt 字符串 底数 举例 x parseInt 27 8 JavaScript编程基础 38 6 转成浮点函数功能 将字符串转成浮点数值 格式 parseFloat 字符串 举例 document write parseFloat 3 123456 JavaScript编程基础 举例 39 7 用户自定义函数 function函数名 参数1 参数2 return 定义函数的注意事项 易于识别功能模块化放置在程序开始部分例1例2 JavaScript编程基础 40 函数定义的一般形式 定义无参函数的一般形式为 类型标识符函数名 声明部分语句部分 函数名 41 定义有参函数的一般形式为 类型标识符函数名 形式参数表列 声明部分语句部分 函数名 实际参数表列 42 函数参数和函数的值 形式参数和实际参数 形式参数 函数名后面括号中的变量名称为 形式参数 简称 形参 实际参数 主调函数中调用一个函数时 函数名后面括号中的参数 可以是一个表达式 称为 实际参数 简称 实参 函数返回值 return后面的括号中的值作为函数带回的值 称函数返回值 43 主调函数和被调用函数之间有数据传递的关系 在不同的函数之间传递数据 可以使用的方法有 参数 通过形式参数和实际参数返回值 用return语句返回计算结果全局变量 外部变量 44 对象 属性对象 方法new 定义对象实例 语法 对象实例名称 new对象类型 参数 this 代表当前对象 用在不同的地方 有不同的结果 this 属性this 方法 面向对象的基本概念 45 JavaScript的事件处理 主要内容1 事件 Event 是指用户在某对象上所作的动作 2 事件驱动 EventDriver 由事件引发的一连串程序的动作 称为事件驱动 3 事件处理程序 EventHandler 对事件进行处理的程序或函数 4 事件处理程序语法 如 onClick 46 JavaScript的事件处理 1 常见事件 47 JavaScript的事件处理 2 事件处理程序语法1 直接嵌入HTML标记符中浏览直接写在对象后面 document onLoad alert 这是事件处理程序 浏览 48 JavaScript的事件处理 3 应用举例例1 网络技术学习网浏览 49 JavaScript的事件处理 3 应用举例例2请输入基本资料 姓名 浏览p58 例1例2 50 JavaScript提供了一些非常有用的常用内部对象和方法 用户不需要用脚本来实现这些功能 这正是基于对象编程的真正目的 本节主要介绍JavaScript提供的内置对象 Array 数组String 字符串Math 数值计算Date 日期 JavaScript内置对象 51 JavaScript内置对象 1 数组 Array 对象格式 对象名 newArray 元素个数 对象名 newArray 值1 值2 例如 fruit newArray fruit newArray 2 声明了有2个元素的数组fruit newArray 苹果 橘子 声明了有 2个数组元素的数组 并赋值属性 index 数组元素的索引值 length 数组长度 数组元素个数 方法 join 将数组内的所有值组合成一个字符串并用特定符号分开 reverse 将数组内元素的索引次序翻转过来 52 JavaScript内置对象 1 数组 Array 对象举例 例1 一维数组应用例2 二维数组应用 53 JavaScript内置对象 2 字符串 String 对象格式 字符串变量名 newString 字符串常数 例如 varstr1 newString JavaScript 属性 length 字符串长度 举例 例1 属性length测试 54 JavaScript内置对象 方法 1 indexOf 子字符串 02 replace 字符串a 字符串b 3 substr 索引值i 长度值 4 substring 索引值i 索引值j i j 15 toLowerCase 6 toUpperCase 注意 大小写 indexOf 函数应用大 小写转换substring 55 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 56 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四舍五入之后的整数 57 Math PIMath max a b Math round x Math randow 举例 varm newMath m max a b 58 JavaScript内置对象 4 日期时间 Date 对象格式 对象实例名 newDate 日期参数 举例 today newDate 当日时间为对象初值 today newDate October1 200212 00 00 英文表示月份 其余以数值表示 即 月日 年时 分 秒 today newDate 2002 08 07 0 0 0 一律以数字表示 即 年 月 日 时 分 秒 59 JavaScript内置对象 4 日期时间 Date 对象方法 getYear 返回年份值getMonth 返回月份值getDate 并返回日期getHours 返回小时数getMinutes 返回分钟数getSeconds 返回秒数getDay 返回星期几getTime 返回完整的时间 60 JavaScript内置对象 4 日期时间 Date 对象方法 setYear 设置年份setMonth 设置月份setDate 设置日期setHours 设置小时数setMinutes 设置分钟数setSeconds 设置秒数setDay 设置返回星期几setTime 设置完整的时间注意 setDay 61 JavaScript内置对象 4 日期时间 Date 对象提示 月份数为 0 11 日期数为 1 31 星期数为 0 6 小时数为 0 23 分钟数为 0 59 秒数为 0 59 毫秒数为 0 999 62 JavaScript内置对象 5 举例例1 Date对象常用方法测试例2 显示当天的时间例3 显示用户的进站时间例4 时间设置例5 倒计时 63 对象实例名称 属性对象实例名称 方法new 定义对象实例语法 对象实例名称 new对象类型 参数 引用 对象实例名称 属性对象实例名称 方法this 代表当前对象 用在不同的地方 有不同的结果 this 属性this 方法 面向对象的基本概念 64 Math 可以直接使用不需要先定义String 字符串 Array 数组 必须先定义new后引用Date 日期 JavaScript内置对象 举例 65 JavaScript内置对象 5 用户自定义对象在实际应用应用中 JavaScript提供的内置对象往往不能满足用户的需求 因此 常常需要建立用户自定义对象 对象 Object 是一组经过组织的数据 在JavaScript中的每一个对象都有两个相关的成员 属性 Property 和方法 Method 建立自定义对象就是为对象定义 属性和方法 66 JavaScript内置对象 5 用户自定义对象其步骤是 1 写一个构造函数来定义 对象类a 为对象类定义属性b 为对象类定义方法先将方法的名称放到对象的构造函数中写一个函数来描述该对象方法的内容2 利用new创建 对象实例 67 对象类型 member属性 namesex方法 display 68 1 定义对象类型functionmember name sex this name name this sex sex this display display 2 描述对象的方法functiondisplay varstr this name 是 this sex document write str 69 3 创建对象实例varpapa newmember 杨宏文 男生 varmama newmember 黄雅玲 女生 papa display mama display 举例 70 JavaScript内置对象 作业题1 利用日期对象 对不同的进站时间 显示不同的提示信息 比如 上午六点到下午六点 显示 将有限的时间用在作最有意义的事 其他时间显示 现在是休息时间 答案 2 检测用户输入的邮件格式是否正确 答案 3 用户进入时 显示 欢迎您进入本网站 离开时 显示 谢谢您 欢迎下次再来 答案 71 JavaScript对象及其层次关系 Window Frame Document Location History Plugin Anchor Applet Area Form Image Link Layer CheckBox Radio Submit Hidden Passward FileUpload Text Textarea Select Reset Button Option 72 1 功能 顶层对象 用来表示浏览器所打开的窗口 2 格式指定窗口 窗口名 属性窗口名 方法 参数群 打开当前窗口的窗口 opener 属性opener 方法 参数群 框架中的顶级窗口 top 属性top 方法 参数群 当前活动窗口 self 属性self 方法 参数群 例如 win1 document title 广告窗口 self close opener document forms 0 user value 张永 窗口对象 WINDOW 73 3 属性name窗口的名字 closed判断窗口是否已经被关闭 返回布尔值 document包含当前文档的信息 该属性本身是对象 history当前窗口最近浏览过的网页 该属性本身是对象 location窗口所显示文档的完整URL 该属性本身是对象 frames窗口的框架对象数组 以数组索引值表示 该属性本身也是一个对象 length窗口内的框架个数 opener代表使用open打开当前窗口的脚本所在的窗口 self代表当前窗口 top代表当前框架的最顶层窗口 窗口对象 WINDOW 74 4 方法open URL 窗口名称 窗口规格 打开一个新窗口URL 1 2 3窗口名称 name top blank窗口规格 P112表4 4例 NewWin open blank height 100 width 300 注意 引用时不需声称new 75 3 属性 规格参数 defaultStatus缺省的状态栏信息 status状态栏中的信息 scrollbars浏览器的滚动条 包括水平和垂直滚动条 toolbar浏览器的工具栏 menubar浏览器的菜单栏 locationbar浏览器的地址栏 innerHeight窗口内容区的高度 以像素表示 innerWidth窗口内容区的宽度 以像素表示 outerHeight窗口边界的高度 以像素表示 outerWidth窗口边界的宽度 以像素表示 pageXOffset网页x position的位置 以像素表示 pageYOffset网页y position的位置 以像素表示 窗口对象 WINDOW p112 76 windowdocument write 网络技术学习网 window document write 网络技术学习网 varNewWin open WINDOW21 htm MyWindow height 100 width 300 varNewWin window open WINDOW21 htm MyWindow height 100 width 300 NewWin document write OpenWindowNameis NewWin name open URL 窗口名称 窗口规格 举例 77 4 方法open URL 窗口名称 窗口规格 打开一个新窗口 close 关闭窗口 MoveBy 水平点数 垂直点数 MoveTo x y 将窗口移动至 x y 坐标处 参数取绝对值 ResizeBy 水平点数 垂直点数 调整窗口大小 参数取相对值 负值为减小 ResizeTo 宽度 高度 setTimeout 毫秒数 等待一段指定的毫秒数时间 然后运行指令 clearTimeout 定时器对象 清除setTimeout定义的计时程序 窗口对象 WINDOW 78 4 方法setInterval 毫秒数 设置一个定时程序 clearInterval 定时器对象 清除setInterval定义的计时器focus 将焦点移到此窗口 blur 把焦点从指定窗口移开 home 进入客户端在浏览器上设置的主页 stop 停止加载网页内容 back 返回历史记录的上一个网页 forward 加载历史记录的下一个网页 窗口对象 WINDOW 79 4 方法alert 字符串 传送警告信息对话框 confirm 字符串 打开一个Confirm对话框 用户可以选择OK或Cancel 如果用户单击OK 该方法返回true 单击Cancel返回false prompt 字符串 默认值 打开一个Prompt对话框 用户可向该框键入文本 并把键入的文本返回到脚本 窗口对象 WINDOW 80 5 事件onFocusonBluronErroronLoadonUnloadonDragDroponMoveonResize 窗口对象 WINDOW 81 6 举例例1 改变窗口的大小实例例2 打开窗口例3 页面下落效果例4 Prompt方法实例例5 setInterval实例例6 setTimeout实例例7 WINDOW对象综合实例 窗口对象 WINDOW 82 单击 来者何人 打开一200 100的窗口 打开网页时 自动打开一300 100的窗口 83 1 功能它为window对象的一个属性 用来存储客户端最近访问过的网页清单 2 格式history 属性history 方法 参数 3 属性length存储在记录清单中的网页数目 current当前的网页地址 next下一个历史记录的网页地址 previous上一个历史记录的网页地址 历史对象 HISTORY 84 4 方法Back 回到客户端查看过的上一页 Forward 回到客户端查看过的下一页 Go 整数或URL字符串 前往历史记录中的某个网页5 举例例 history对象实例 历史对象 HISTORY 继续 85 历史对象 HISTORY history back history forward history go 86 1 功能代表特定窗口的URL信息 一个完整的URL格式如下 protocol host port path hash searchprotocol 通信协议httphost 主机名称port 通信端口path 文件路径hash 定位锚点search 查询信息 位置对象 LOCATION 87 2 语法location 属性location 方法 参数 3 属性hashURL中定位锚点名称 hostURL中主机名部分 hostnameURL中host port部分 href完整的URL字符串 pathnameURL中path部分 portURL的端口port部分 protocolURL的通信协议 search以问号 开始的URL中的一部分 用于指定搜索信息 位置对象 LOCATION 88 4 方法reload 重新加载 刷新 当前的网页 replace 网址 用特定的网页取代当前的网页 5 举例 用普通文字实现超链接 用A标记字实现超链接 位置对象 LOCATION 例1 用普通文字实现超链接的范例 89 document title 自动打开网页范例 varsec 5 functioncountDown if sec 0 num innerHTML sec elselocation href 例2 自动打开网页范例 90 五秒钟后自动带你前往中山大学网页5 例2 自动打开网页范例 91 每一个框架对象相当于窗口 WINDOW 对象 因此框架对象可以使用窗口对象的所有属性和方法 框架对象 FRAME 1 框架组的结构 2 框架组的层次 92 3 框架的引用top leftFrametop upFrametop downFrame或top frames 0 top frames 1 top frames 2 4 举例 框架对象 FRAME 93 文件对象 Document 代表当前的HTML对象 是由标记组构成的 JavaScript自动为每一个HTML文件建立一个document对象 用来显示HTML文件 文档对象 DOCUMENT 94 1 语法document 属性document 方法2 属性title文档的标题 links文件中的所有链接 以数组索引值表示 linkColor文档的链接的颜色 即标记中的LINK属性 alinkColor活动链接的颜色 ALINK vlinkColor指向已点击过的超链接文本颜色 即标记的VLINK特性bgColor文档的背景颜色 BGCOLOR fgColor文档中文本颜色 中的TEXT特性 文档对象 DOCUMENT 95 2 属性forms文件中的所有表单 以数组索引值表示 images文档中所有image 以数组索引值表示 lastModified文档最后的修改日期 anchors文档中所有锚点 以数组索引值表示 cookie存储于cookie txt文件内的一段信息 它是该文档对象的一个属性URL表示该文件的网址 文档对象 DOCUMENT 96 3 方法write 字符串 将字符串或数值写到文件中 4 事件onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseOver onMouseUp5 举例例1 测试文件对象的颜色属性例2 网页修改日期时间 文档对象 DOCUMENT 97 当文档中包含标记时 JavaScript自动建立相对应的锚点对象 这些对象可以用document的anchors属性 搭配数组的索引方式来进行访问控制 例如 第一个锚点对象 document anchors 0 第二个锚点对象 document anchors 1 锚点对象 ANCHORS 98 1 语法document 锚点名 属性document 锚点名 方法或document anchors 属性document anchors 方法2 属性name表示锚点的名称 锚点对象 ANCHORS 99 无论是文字 图形或图像映射 只要是用来作为超级链接用的对象 JavaScript自动建立相对应的链接对象 这些对象可以用document的links属性 搭配数组的索引方式来进行访问控制 例如 第一个链接对象 document links 0 第二个链接对象 document links 1 链接对象 LINKS 100 1 语法document 链接名 属性document 链接名 方法或document links 属性document links 方法2 属性hash表示URL字符串中锚点的名称 host表示主机域名或IP地址 hostname表示URL当中的host与port的部分 href完整的URL字符串 pathname表示URL当中的目录路径 path 部分 链接对象 LINKS 101 2 属性port表示URL当中的通信端口 port 部分 protocol表示URL当中的通信协议部分search表示URL当中的查询字符串部分 target代表目标的窗口 即HTML中的TARGET属性text表示A标记中的文字 Length其返回值为当前文档中超级链接的数目3 事件onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseOver onMouseUp onMouseOut onMouseDown4 举例 链接对象 LINKS 102 当文件中包含标记时 JavaScript自动建立相对应的图像对象 这些对象可以用document的images属性 搭配数组的索引方式来进行访问控制 例如 第一个图像对象 document images 0 第二个图像对象 document images 1 图像对象 IMAGES 103 2 属性src图像的URL SRC属性 border图像的边框 标记的BORDER属性 width图像的宽度 WIDTH属性 height图像的高度 HEIGHT属性 hspace图像水平空白 HSPACE属性 vspace图像垂直空白 VSPACE属性 lowsrc图像的第分辨率版本 LOWSRC属性 complete表示浏览器是否完成了图像的加载 一个布尔值 3 事件 onAbort onError onLoad onKeyDown onKeyPress onKeyUp 图像对象 IMAGES 104 表单对象 Form 提供一个让客户端输入文字或进行选择的功能 例如 单选按钮 复选框 选择列表等 由标记组构成 JavaScript自动建立一个表单对象 并将用户端的信息送至服务器进行处理 表单对象是文件对象 document 的子对象 同时 它也包含许多子对象 表单对象 FORM 105 1 表单对象的使用格式document forms 索引值 属性document forms 索引值 方法 参数群 或document 表单名称 属性document 表单名称 方法 参数群 2 常用属性name 表单名 相当于标记的name属性action 相当于标记的ACTION属性 method 输入窗体的数据传送到服务器上的方式 即 FORM 标记中的METHOD属性 表单对象 FORM 106 2 常用属性elements 表单中的所有控件 以数组索引值表示 length 表单中的控件的个数 例 document forms 索引值 elements 索引值 属性3 常用方法submit 提交表单 与submit按钮的作用相同 reset 重写表单 与使用reset按钮的作用相同 表单对象 FORM 107 2 常用属性Text 单行文本 Password 密码对象 Checkbox 复选框 Radio 单选按钮 Submit 提交按钮 Reset 复位按钮 Button 按钮 Textarea 多行文本 Select 选择框 Option 选项对象 注意 表单域属性同时也是对象 表单域对象 FORM 108 当JavaScript读到标记中的type属性值为text时 自动建立一个文本按钮对象 并将该对象放到表单对象的elements数组当中 让程序员可以通过一定的方法来控制这一对象 1 使用文本对象的格式document forms 索引值 elements 索引值 属性document forms 索引值 elements 索引值 方法 参数群 或document 表单名称 文本对象名称 属性document 表单名称 文本对象名称 方法 参数群 单行文本对象 text 109 2 常用属性name text对象的名字defaultValue text对象的缺省值type text对象的类型 NAME属性 value text的当前值 VALUE属性值 3 常用方法Blur 把焦点从文本框移开 Focus 把焦点移到文本框 Select 将该对象设置成选取状态 单行文本对象 text 110 4 事件onBlur onFocus onChange onSelect onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseOver onMouseUp onMouseOut onMouseDown onMouseMove5 举例单行文本范例姓名 运行 单行文本对象 text 111 当JavaScript读到标记中的type属性值为password时 自动建立一个密码对象 并将该对象放到表单对象的elements数组当中 让程序员可以通过一定的方法来控制这一对象 注 其引用方法与单行文本相同 密码对象 password 112 2 常用属性name password对象的名字defaultValue text对象的缺省值type password对象的类型 NAME属性 value password的当前值 VALUE属性值 3 常用方法Blur 把焦点从文本框移开 Focus 把焦点移到文本框 Select 将该对象设置成选取状态 113 当JavaScript读到标记中的type属性值为button时 自动建立一个按钮对象 并将该对象放到表单对象的elements数组当中 按钮对象包括 普通按钮 button 提交按钮 submit 重置按钮 reset 1 使用按钮对象的格式document forms 索引值 elements 索引值 属性document forms 索引值 elements 索引值 方法 参数群 或document 表单名称 按钮对象名称 属性document 表单名称 按钮对象名称 方法 参数群 按钮对象 button 114 2 常用属性name 按钮对象的名字 value 按钮上显示的值 type 按钮类型 button submit reset 3 常用方法blur 把焦点从该对象上移开 focus 把焦点移到该对象上 click 再该对象上单击鼠标左键 4 事件onBlur onFocus onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseOver onMouseUp onMouseOut onMouseDown onMouseMove 按钮对象 buttom 115 例1 用户登录界面例2 输入信用卡号例3 输入四位密码 举例 116 当JavaScript读到标记时 自动建立一个文本区域对象 并将该对象放到表单对象的elements数组当中 1 使用文本对象的格式document forms 索引值 elements 索引值 属性document forms 索引值 elements 索引值 方法 参数群 或document 表单名称 文本区域对象名称 属性document 表单名称 文本区域对象名称 方法 参数群 多行文本对象 TEXTAREA 117 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 多行文本对象 TEXTAREA 118 document title 多行文本对象示例 functionisTooLong elm if elm length 50 alert 留言内容太长 请修改后再发送 returnfalse else meswin open width 200 height 100 meswin document write elm 欢迎留言 不过请长话短说 举例 多行文本对象 119 当JavaScript读到标记中的type属性值为radio时 自动建立一个单选按钮对象 并将该对象放到表单对象的elements数组当中 1 使用按钮对象的格式document forms 索引值 elements 索引值 属性document forms 索引值 elements 索引值 方法 参数群 或document 表单名称 单选按钮对象名称 属性document 表单名称 单选按钮对象名称 方法 参数群 单选按钮对象 radio 120 2 属性name 单选按钮对象的名字