东软内部培训教程JavaS.ppt

BeyondTechnology JavaScript Ver1 0 演讲人 丁海波 目的与目标 能够熟练的使用JavaScript语言对页面中的元素进行动态操作 对Form中的控件可以进行合法性 有效性校验等等 课程概述 本课程主要是介绍JavaScript语言的语法 如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入 可选择的控件进行校验等 第一章 JavaScript简介第二章 JavaScript基本语法第三掌JavaScript对象第四章在浏览器中使用 第一章 JavaScript简介 JavaScript历史 JavaScript是由Netscape公司开发的一种脚本语言 结构简单 使用方便 对用户自身知识水平的要求并不高 易学易懂 Netscape将这种脚本语言命名为LiveScript 它的整个语法以Java为基础 但比Java要简单 同时 由于它是一种脚本语言 所以无需编译 可由浏览器直接解释运行 而不象Java那样需要经过编译 Netscape见LiveScript大有发展前途 而SUN也觉得可以利用Livescript为Java的普及做铺垫 于是两家签订协议 将LiveScript改为JavaScript 造就了这个强力的WEB页开发工具 JavaScript的特点 1 JavaScript是一种脚本语言语法和规则没有可编译的编程语言那样严格和复杂 主要用于格式化文本和使用以编程语言编写的已编译好的组件 2 JavaScript是基于对象的语言面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分 即对象 的组合体 基于对象的语言本身已具有创建完成的对象 例如 日期 对象 3 JavaScript是事件驱动的语言当你在Web主页中进行某种操作时 就产生了一个 事件 事件几乎可以是任何事情 敲击一个按钮 拖动鼠标等均可视为事件 JavaScript是事件驱动的 当事件发生时 它可对之作出响应 具体如何响应某个事件取决于你的事件响应处理程序 JavaScript的特点 4 JavaScript是安全的语言JavaScript被设计为通过浏览器来处理并显示信息 但它不能修改其它文件中的内容 也就是说 它不能将数据存储在Web服务器或用户的计算机上 更不能对用户文件进行修改或删除操作 5 JavaScript是平台无关的语言对于一般的计算机程序 它们的运行与平台有关 例如 除非你使用一个仿真器来模拟Windows环境 否则不可能在Macintosh上运行一个Windows应用程序 JavaScript则并不依赖于具体的计算机平台 虽然有一些限制 它只与解释它的浏览器有关 不论你使用Macintosh还是Windows 或是UNIX版本的NetscapeNavigator JavaScript都可正常运行 JavaScript的功能 JavaScript的功能总体可以归结为两类 1 交互性使用JavaScript可以大大加强WEB页的交互性 如轻松的在你的WEB页中加入按钮 显示带有控制的文本 建立交互式表格等 2 动态性JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画 从而使你的WEB页看上去活泼诱人 JavaScript与Java语言的比较 JavaScript不是JavaJava是由Sun公司开发 与平台无关的 面向对象的程序设计语言 它与JavaScript基于对象的结构相反 Java可以用来设计独立的应用程序 也可以用来创建一种称为Applets的小应用程序 经过编译后 Applets成为一种平台无关的字节代码 这种Applets可以运行在任何平台上 只要该平台具备能够操作Applets的Java虚拟机即可 JavaScript与Java语言的比较 JavaScript与Java之间其它的一些主要区别 Java程序被编译成为字节代码文件 JavaScript则是将字符正文传递给客户方并由客户方解释执行 JavaScript是基于对象的 它自身具有已创建完毕的对象 而Java则是面向对象的 对象必须从类中创建 JavaScript的代码以字符的形式嵌入在HTML文档中 Javaapplets则是由文档引用 其代码以字节代码的形式保存在另一个独立的文件中 JavaScript与Java语言的比较 JavaScript与Java之间其它的一些主要区别 在HTML文档中 用标识标明JavaScript脚本 而Javaapplets则用标识来标明 JavaScript采用弱类型 而Java则采用强类型 JavaScript采用动态联编 而Java 则采用静态联编 JavaScript的局限性 JavaScript为Web内容设计人员提供了极大的灵活性和控制手段 它是一种优秀的 粘合剂 能够将一个Web节点中的不同组成部分捆绑在一起 成为一个紧密结合的信息源 然而 像任何事物一样 JavaScript也有它的局限性 浏览器相关的局限性 IE Nectscape平台相关的局限性 Windows Unix JavaScript的局限性 安全性有关的局限性JavaScript的设计目标在于 Web安全性 它比以前任何一种方法都更能保证Web的安全 例如 perl和CGI 这自然是牺牲JavaScript的一些功能换来的 1 JavaScript不能打开 读 写 保存用户计算机上的文件 它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息 2 JavaScript不能打开 读 写 保存Web服务器上的文件 尽管你可以使用它来提交HTML命令 但HTML命令也不能打开那些文件 JavaScript与HTML 在HTML文档里面 标签对内包容了和标签对 标签对内包容了标签对 标签对内的文字串是显示窗口的标题 标签对内包容了显示页面的内容 JavaScript的基本成分 变量 函数和事件处理方法 和HTML代码编织在一起 变量和函数被包容在新标签对内 而标签对则一般放在标签对内 事件处理方法可以被包容在任何中的标签对内 用于响应某事件 激发某JavaScrip函数 JavaScript与HTML jsexampledocument write helloworld 可以包含事件响应代码等 JavaScript包含文件 你可以将JavaScript文件在HTML文件外面存放 把你的零碎们放到一起 起个名字 再给它个js的文件尾 非常重要 js文件里不能有或其它注释 例如 把pku js文件链接到HTML文件中的句型如下 第二章 JavaScript基本语法 JavaScript的语法结构 JavaScript的语言结构既宽松又简单 JavaScript的基本概念 语句 一条由计算机完成的 帮助你达到某种目的的指令 JavaScript中的每一行都可认为是一条语句 变量 一个代表某个值的名字就是变量 表达式 A 1 B 就是表达式 函数 具有一定功能的程序段 1 parseInt可以将字符串转化为整型数 2 paseFloat将字符串转化为附点数 JavaScript的数据类型 JavaScript支持的数据类型共有四种1 数值型 其中包括整型数和浮点型数 2 布尔型 即逻辑值 true或flase 3 字符串型 由单个或多个文本字符组成 4 空值 由关键字null代表 JavaScript的命名规则1 变量名中可以包含数字0 9 大写或小写的拉丁字母和下划线 2 变量名的首字符必须为字母或下划线 3 变量名对字母的大小写敏感 4 变量名的长度必须在一行内 5 变量名中不能有空格与其它标点符号 变量与表达式 创建变量varanumber 137 变量的值是一个数varanumber1 2 varastring 1 变量的值也可以是一个字符串varastring1 hello 表达式xx astring1 astring 结果是x hello1 xx anumber anumber1 结果是xx 139xx anumber astring 结果是xx 1371 表达式与操作符 赋值操作符 x y为 HelloWorld 其他操作符in typeofinstanceof等 JavaScript流程控制语句 if和else if condition else for和while for 初始化表达式 条件 增值表达式 执行语句 while 条件 条件为真执行 break可以用在for或while循环中 使循环中断 跳到for或while循环结束的位置 continue用在for或while循环可以跳过循环体中剩余的语句 直接进行循环的下一次迭代 第三章JavaScript对象 JavaScript对象模型 JavaScript被称为是 基于对象的 而不是面向对象的 有对象的概念 数据和操作的封装 但没有继承的概念 从定义的角度看 JavaScript程序中有两种对象 JavaScript提供的内置对象 built inobject 和程序中定义的对象 一个对象是一个由变量 其他对象或方法组成的一个集合 在一个对象中包含的其他对象和变量被称为特性 property 在一个对象内的函数 function 称为这个对象的方法 method 在一个特定的对象中的一些特性的序列称为数组 例如document对象中的image 多维数组是由含有数组特性的对象数组构造的 当一个文档加载到浏览器后 它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存 要有一种方法让Script指出它要的是哪一个对象 这就是对象引用 JavaScript用严格的层次结构引导Script至文档的任何区域 对每个对象的引用必须包括从顶部到对象的所有层次 直至对象名 路径中各个相连的对象之间用句点分开 变量可以写成下面的形式 父对象 特性1 索引1 特性2 最后特性 索引N 对象的方法 method 可以如此引用 对象 方法 参数组 一个含有典型特性和方法的对象的例子 document是对应一个 html文档的对象 浏览器读进文档后生成 document writeln hello 是这个对象的一个方法 输出带换行的字符串 document location是该对象的一个特性 含有它的URL 用户对象的定义 JavaScript定义 类 函数 的语法是一样的 而且这样的函数就成了该类的构造函数 用户用函数定义来定义类 然后用new语句创建该类的一个实例 以下是 类 的例子 实际效果 functionadd this result this left this right functionMyClass n this left n this right 6 this result 0 this sum add x newMyClass 4 x sum document write x result prototype属性返回对象类型原型的引用 引用方式 objectName prototypeobjectName参数是对象的名称 JavaScript的对象 Array 属性 length 它指明了数组的长度 方法 join 将数组值连接变为一个字符串 reverse 将数组值倒序 sort 将对数组值进行排序 AAA newArray 3 AAA 0 B AAA 1 A AAA 2 C document write AAA length document write AAA join document write AAA reverse join document write AAA sort join JavaScript的对象 String 属性 length属性表明字符串长度 方法字符串的转换 toUpperCase 将字符串所有字符转为大写 toLowerCase 将字符串所有字符转为小写 toString 将非字符串对象显示转化为字符串 字符串的处理 substring 将括号中参数所指的字符串片段返回 charAt 返回括号中指定位置字符串的内容 split 根据指定的分隔符把一个字符串划分为一个字符串数组 如 newstring astring substring index1 index2 返回一个位置在index1和index2 1之间的字符串 特别是如果index2 index1 子串返回index2和index1 1之间的部分 JavaScript的对象 Date 属性 无方法 a 设定日期setDate setMonth setYear setTime 设定时间1970 1 1开始用毫秒数来计时 b 日期格式转换 Date UTC 返回一个通用时间 距1970年1月1日午夜的毫秒 c 获取日期 Date getDate Date getMonth Date getYear Date parse Date getDay d 处理时区 toGMTString 将日期时间值转换为的字符串 GMT时间 tolocaleString 将日期时间值转换为的字符串 当地时间 JavaScript的对象 Math 属性 E 为自然对数的底 约为2 718 PI 为圆周率 约为3 14159 方法 abs 绝对值计算 pow 数的幂 sqrt 计算平方根 cos sin tan acos asin atan JavaScript的屏幕对象 显示器 screen 各种相关特征涵义参数举例说明screen height屏幕高度screen width屏幕宽度screen availHeight屏幕可见高度screen availWidth屏幕可见宽度screen colorDepth色深8 16 32位颜色 JavaScript事件模型 事件 用户对网页的一些特定 操作 这些操作通常直接对应鼠标的动作 和系统行为 例如加载一张网页 点击一个超链等 事件处理程序的引入 如何使一段JavaScript程序和事件的发生联系起来 on事件名 是JavaScript规定的对应事件处理程序柄 eventhandler 的名字 例如onClick onfocus onSubmit等等 JavaScript事件模型 续 第一种引入方式 事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现 而对应的属性值是由网页编写者提供的JavaScript程序段 或事件处理函数名 第二种引入方式 将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性 property document forms 0 age onchange isNumber 例 让事件处理程序作为 属性值 这里 事件处理程序柄的名字是大小写不敏感的 这与HTML文本中对标记的属性名的松散要求是一致的 OnLoad在网页完全加载完后执行 即包括图像 applet等 OnUnLoad在网页退出之前执行 JavaScript程序的注意事项 最好把源码写进HTML文件头里 及之间是合适的地方 JavaScript程序要用 language这个限定参数也是必要的 再用把程序关闭 提示开始标记来关闭提示 对所编程序加必要的注释 单行或多行注释加在 号中间来标示 单行注释则加在 号后面 第四章在浏览器中使用 1 代表浏览器器所打开的窗口 2 通常代表目前正在使用 focus 的窗口 3 如果打开多个浏览器窗口时 可以利用别名 alias 来区别它们 如 ex opener parent self window top 窗口对象 Windowobject 窗口对象使用语法 window 特性window 方法 参数群 self 特性 self代表目前window或frame名称self 方法 参数群 top 特性 top代表最顶层的窗口top 方法 参数群 parent 特性 parent代表目前框架的父框架parent 方法 参数群 窗口名称 特性窗口名称 方法 参数 特性方法 参数 closed 说明窗口是否已经关闭defaultStatus 浏览器底部预设的状态列讯息length 窗口重的框架个数Frame 窗口中的frameframes 窗口中的frame数组name 窗口的名称opener 打开该窗口的窗口名称status 浏览器底部自行设定的状态信document 窗口中的document对象history 窗口history对象location 窗口对象的对象中的location对象 窗口对象的属性 alert 显示警告讯息confirm 显示确认讯息prompt 显示提示讯息focus 成为焦点blur 移开焦点 成为背景处理 open 打开新浏览窗口close 开关已打开的浏览窗口eval 执行引数运算式计算 窗口对象的方法 resizeBy x y 将窗口尺寸向X轴及Y轴调整moveBy x y 将窗口向X轴及Y轴移动scroll x y 卷动至指定的座標print 列印指定之窗口內容setTimeout 设定一定时程序 计时器 clearTimeout 撤销一定时程序 计时器 toString 传回字串表示值valueOf 传回数值表示值 窗口对象的方法 functiongrow window resizeBy 50 50 functionshrink window resizeBy 50 50 将窗口放大与缩小 范例 自动放大窗口 functionscrollIt for y 1 y按鼠标左键兩下 画面自动卷动 TheEnd 范例一 自动卷动窗口 打开新窗口对象的语法 窗口对象名称 Window open URL 新窗口名称 窗口的规格 窗口对象名称 用以使用窗口对象的特性与方法 ex 窗口对象名称 close窗口名称 用以识別该窗口 ex 窗口对象范例 打开与开关窗口 functiongrow window resizeBy 0 150 functionshrink window resizeBy 0 150 广告页here 窗口对象范例 动态调整广告页大小 使用Timer的语法 1 Timer又称为计时器或延迟器 常用来指定于特定时间后执行某程式 2 时间单位为毫秒 千分之一秒 ex 3000milliseconds 3seconds window setTimeout 欲执行的程式码或函数 设定的时间 使用Timer的语法 二 如果利用循环将计时器设计成重复执行 欲终止计时器执行 请使用此一格式 因为要终止计时器的执行 必须指定欲终止的计时器名称 计时器对象名称 window setTimeout 欲执行的代码或函数 设定的时间 终止循环內Timer的语法 终止计时器的执行 必须指定欲终止的计时器名称 window clearTimeout 计时器对象名称 functiontimer setTimeout alert 3秒到了 3000 窗口对象范例 timer 1 varcounter 0setTimeout upDate 3000 三秒钟后呼叫upDate functionupDate counter status 第 counter 次载入 timer1 setTimeout upDate 3000 窗口对象范例 timer 2 历史对象 historyobject history对象是用来存储客戶端访问过的URL资料 这些历史记录是以串列 list 的方式存储 各大浏览器均提供检视history工具ex IE 检视 移至NC 前往 go 历史对象的使用语法如下 history 特性history 方法 参数群 length history对象中URL个数back 载入历史对象中上一个URLforward 载入历史对象中下一个URLgo 载入指定的URL 历史对象的使用语法 窗口对象范例 history with document write 重新载入此页 write 前往SeedNet方法一 write 前往SeedNet方法二 link tw write 前往SeedNet方法三 前往SeedNet方法四 窗口对象范例 location 1 前往SeedNet方法五前往SeedNet方法六前往SeedNet方法七 窗口对象范例 location 2 Document对象 1 代表目前的文件信息 2 直接对应至HTML的Body标签 文档对象 Documentobject document 特性document 方法 参数群 bgColor 相当于HTML的BGCOLORalinkColor 相当于HTML的ALINKlinkColor 相当于HTML的LINKvlinkColor 相当于HTML的VLINKfgColor 相当于HTML的TEXTtitle 相当于HTML的lastModified 最近更新日期URL 文件的URL 文档对象的使用语法 DocumentAnchorAppletAreaImageFormLink 文档对象的对象阶层图 document write 本页最后更新日期 document write document lastModified 文档对象范例 最近更新时间 Form对象 1 用于定义表单 提供使用者输入资料 2 包含许多控制类型 3 直接对应至HTML的表单元件 表单对象 Formobject FormButtonCheckboxFileUploadHiddenPasswordRadioResetSelectSubmitTextTextarea 表单对象的对象阶层图 表单名称 特性表单名称 方法 参数群 forms 索引值 特性forms 索引值 方法 参数群 表单对象的使用语法 action ACTION属性设定值elements 以陣列代表表单內所有元件encoding 使用POST传送时之编码方式length 表单內元件个数method 指定传送方式 POST GET target 将执行结果于特定窗口內执行 表单对象的特性 表单对象可使用的方法如下 reset 模拟按下reset按钮的动作submit 模拟按下submit按钮的动作toString 传回字串表示值 表单对象的方法 显示一个可供输入的域 可使用的事件处理程序 onBlur onChange onFocusonKeyDown onKeyUponMouseDown onMouseUp 本文对象 Textobject type text 类型为本文name tel Text名称value 03 4257387 初始值size 20 Text大小title 提示值 提示值AccessKey L 快捷键值maxlength 10 可输入资料长度readonly 指定成为只读属性 本文对象相关参数 文本对象的对象特性 defaultValue 该元件预设值type 该元件类型name 该元件识別名称value 该元件目前输入值 1 显示一个可供选择 单选 的按钮 2 ON表示确认 OFF表示不确认 可使用的事件处理程序 onBlur onClick onFocusonKeyDown onKeyUponMouseDown onMouseUp 圆钮对象 Radioobject type radio 类型为圆钮name sex 名称为sexvalue boy 传送值为boychecked 设定为预设选项 圆钮对象相关参数 Inputtype radioname sexvalue boychecked 圆钮对象的对象特性 checked 判断是否已經核取defaultChecked 该元件预设为核取与否type 该元件类型name 该元件识別名称value 该元件目前输入值 性別 男生女生functionSEX if document form1 elements 0 checked sex 男生 elsesex 女生 alert 性別是 sex 表单对象范例 radio 1 显示一个可供选择的复选框 2 ON表示确认 OFF表示不确认 可使用的事件处理程序 onBlur onClick onFocusonKeyDown onKeyUponMouseDown onMouseUp 确认方块对象 Checkboxobject type checkbox 类型为确认方块name hobby 名称value music 传送值checked 设定为预设选项 确认方块对象相关参数 Inputtype checkedname hobbyvalue music 1 显示一个可供输入密码的输入框 2 利用 隐藏所输入的资料 可使用的事件处理程序 onBlur onChange onFocusonKeyDown onKeyUponMouseDown onMouseUp 密码对象 passwordobject type password 类型为密码name password 名称value 1234 初始值size 20 大小maxlength 10 可输入资料长度 密码对象相关参数 Inputtype passwordname pw 输入密码 重新输入 functioncheckPw if document form1 pw1 value document form1 pw2 value alert 兩組密码不符 请重新输入 elsealert OK 表单对象范例 password 1 密码对象的对象特性 defaultValue 该元件预设值type 该元件类型name 该元件识別名称value 该元件目前输入值 functioncheckPwLgh index str if str length 9 alert 你只输入 str length 位数 n请输入9位数密码 document form1 elements index value document form1 elements index focus functioncheckRetype if document form1 pw value document form1 retypePw value alert 兩組密码不符 请重新输入 document form1 retypePw value document form1 retypePw focus elsealert 密码检查作業完成 表单对象范例 password 2 输入密码 重新输入 表单对象范例 password 2 提供一个隐藏域 用以储存特殊资料值 以供运算或参考 隐藏对象 hiddenobject type hidden 类型为隐藏name dummy 对象名称value 1234 元件初始值 隐藏对象相关参数 Inputtype hiddenname dummyvalue 1234 提供一組选单 供使用者选择 可使用的事件处理程序 onBlur onChange onFocusonClick onDblClick 选择对象 selectobject name week 名称size 3 下拉框大小multiple 设定为可多选option 定义选择的內容selected 预选项目value 定义传送值 选择对象相关参数 SundayMondayTuesdayWednesdayThursdayFridaySaturday 表单对象范例 select 1 选择对象的对象特性 type 该元件类型name 该元件识別名称value 该元件目前输入值selectedIndex 选项的索引值length 选项个数options 选项数组 url newArray 2 url 0 tw url 1 functionjumpPage form i form menu selectedIndex if i 0 window location href url i 1 选择ISP SeednetHinet 表单对象范例 select 2 functioncreateOptions varoption newOption document form1 select1 value document form1 select2 options 2 option 可选择项目 香蕉芭樂蘋果梨子 下页续 表单对象范例 动态选单 接上页 onClick createOptions 选择项目 表单对象范例 动态选单 练习 设计一交换式选单 所选取的项目应可列在右方 按按钮或鼠标点清单项目两下 加入右方选单后将左方选项清除 设计一个刪除钮可将选项刪除 提供一个按钮 供触发事件之用 可使用的事件处理程序 onBlur onClick onFocus 按钮对象 buttonobject type button 类型为按钮name button1 按钮名称value 请按我 按钮面显示值title 送至服务器 提示值tabindex 0 定位顺序disabled 使失效 按钮对象相关属性 按钮对象的对象特性 type 该元件类型name 该元件识別名称value 该按钮面显示值disabled 该元件生效否 动态设定按钮的显示字樣 请输入 表单对象范例 button 表单对象范例 button 用以将表格內资料送至服务器之用 可使用的事件处理程序 onBlur onClick onFocus另外可在Form标签內搭配使用onSubmit 提交对象 submitobject type submit 类型为呈送钮name submit1 按钮名称value 提交 提交钮表面显示值 提交对象相关参数 Inputtype submitname submit1value 送出 提交对象的对象特性 type 该元件类型Name 该元件识別名称value 该按钮面显示值 functionisReady if document form1 text1 value length 9 returntrueelsealert 请输入9位数密码 returnfalse 表单对象范例 submit functionisReady form if form text1 value length 9 returntrueelsealert 请输入9位数密码 form text1 focus 将焦点移回textreturnfalse 表单对象范例 submit 用以将表格內资料还原为预设值 即重新输入之意 可使用的事件处理程序 onBlur onClick onFocus另外可在Form标签內搭配使用onReset 重置对象 resetobject type reset 类型为重置钮name reset1 按钮名称value 重新输入 重置钮表面显示值 重置对象相关参数 Inputtype resetname reset1value 重新输入 重置对象的对象特性 type 该元件类型name 该元件识別名称value 该按钮面显示值 表单对象范例 reset 提供一个多列的本文域 可使用的事件处理程序 onBlur onChange onFocus 本文区域对象 textareaobject name textarea1 按钮名称rows 8 列数cols 30 行数 字元数 readonly 定义为只读属性 本文区域对象相关参数 Inputtype resetname reset1value 重新输入 本文区域对象的对象特性 type 该元件类型name 该元件识別名称value 本文区域的內容defaultValue 本文区域的预设內容 意见留言版 表单对象范例 textarea 提供一个本文域与档案浏览按钮 可使用的事件处理程序 onBlur onChange onFocus 档案对象 file fileUploadobject type file 型态为档案对象name file1 对象名称 档案对象相关参数 Inputtype filename file1 档案对象的对象特性 type 该元件类型name 该元件识別名称value 该元件內容值 表单对象范例 file