JavaScript 对象.ppt

1 JavaScript对象 2 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 3 JavaScript的对象 String 属性 length属性表明字符串长度 方法字符串的转换 toUpperCase 将字符串所有字符转为大写 toLowerCase 将字符串所有字符转为小写 toString 将非字符串对象显示转化为字符串 4 JavaScript的对象 String 属性 length属性表明字符串长度 方法字符串的处理 substring 将括号中参数所指的字符串片段返回 charAt 返回括号中指定位置字符串的内容 split 根据指定的分隔符把一个字符串划分为一个字符串数组 如 newstring astring substring index1 index2 5 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 将日期时间值转换为的字符串 当地时间 6 JavaScript的对象 Math 属性 E 为自然对数的底 约为2 718 PI 为圆周率 约为3 14159 方法 abs 绝对值计算 pow 数的幂 sqrt 计算平方根 cos sin tan acos asin atan 7 JavaScript的屏幕对象 显示器 screen 各种相关特征涵义参数举例说明screen height屏幕高度screen width屏幕宽度screen availHeight屏幕可见高度screen availWidth屏幕可见宽度screen colorDepth色深8 16 32位颜色 8 JavaScript事件模型 事件 用户对网页的一些特定 操作 这些操作通常直接对应鼠标的动作 和系统行为 例如加载一张网页 点击一个超链等 事件处理程序的引入 如何使一段JavaScript程序和事件的发生联系起来 on事件名 是JavaScript规定的对应事件处理程序柄 eventhandler 的名字 例如onClick onfocus onSubmit等等 9 JavaScript事件模型 续 第一种引入方式 事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现 而对应的属性值是由网页编写者提供的JavaScript程序段 或事件处理函数名 第二种引入方式 将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性 property document forms 0 age onchange isNumber 10 JavaScript事件模型 续 例 让事件处理程序作为 属性值 这里 事件处理程序柄的名字是大小写不敏感的 这与HTML文本中对标记的属性名的松散要求是一致的 OnLoad在网页完全加载完后执行 即包括图像 applet等 OnUnLoad在网页退出之前执行 11 在浏览器中使用 12 1 代表浏览器器所打开的窗口 2 通常代表目前正在使用 focus 的窗口 3 如果打开多个浏览器窗口时 可以利用别名 alias 来区别它们 如 ex opener parent self window top 窗口对象 Windowobject 13 窗口对象 窗口对象是JavaScript对象的主要对象之一 而窗口对象中最常用的以下几种 opener对象 self对象 parent对象 top对象 history历史对象 14 opener对象和self对象 opener对象可以用于确定open方法打开窗口的源窗口 self对象实际上代表的是窗口自身 是用于对窗口对象自身的一些属性进行控制 下面看一个opener和self对象的使用示例 下例将用一个父窗口打开一个子窗口 然后在子窗口中设置两个链接 用以改变父窗口的背景色 将主窗口的代码保存为main html 而将子窗口的代码保存为sub html 主窗口main htmlqueryWin open sub html height 100width 150 在主窗口用open方法打开文件sub html作为子窗口 其中高度为100 宽度用默认值 15 子窗口sub htmlfunctionpassToOpener color opener document bgColor color self close 请选择你喜欢的颜色 蓝色红色 改变父窗口的颜色 关闭子窗口 调用改变父窗口颜色的函数 16 parent对象 parent对象仅仅是对子窗口有意义 也就是说 窗口不是顶层窗口 parent的属性请大家参考框架的框架集窗口 这一点我们以后还会讲到 一个框架集内的子窗口可以使用parent frameName来查访它的兄弟窗口 比如 一个框架集中的第四个窗口有一个属性name homeFrame 那么它的兄弟窗口可以通过使用parent homeFrame或者parent frames 3 去访问它 17 top对象 top对象是顶层窗口的同义词 可以通过使用top close 将顶层窗口关闭 可以通过使用top length来得到顶层窗口中含有的框架个数 18 窗口对象使用语法 window 特性window 方法 参数群 self 特性 self代表目前window或frame名称self 方法 参数群 top 特性 top代表最顶层的窗口top 方法 参数群 parent 特性 parent代表目前框架的父框架parent 方法 参数群 窗口名称 特性窗口名称 方法 参数 特性方法 参数 19 closed 说明窗口是否已经关闭defaultStatus 浏览器底部预设的状态列讯息length 窗口重的框架个数Frame 窗口中的frameframes 窗口中的frame数组name 窗口的名称opener 打开该窗口的窗口名称status 浏览器底部自行设定的状态信document 窗口中的document对象history 窗口history对象location 窗口对象的对象中的location对象 窗口对象的属性 20 alert 显示警告讯息confirm 显示确认讯息prompt 显示提示讯息focus 成为焦点blur 移开焦点 成为背景处理 open 打开新浏览窗口close 开关已打开的浏览窗口eval 执行引数运算式计算 窗口对象的方法 21 resizeBy x y 将窗口尺寸向X轴及Y轴调整moveBy x y 将窗口向X轴及Y轴移动scroll x y 卷动至指定的座標print 列印指定之窗口內容setTimeout 设定一定时程序 计时器 clearTimeout 撤销一定时程序 计时器 toString 传回字串表示值valueOf 传回数值表示值 窗口对象的方法 22 functiongrow window resizeBy 50 50 functionshrink window resizeBy 50 50 将窗口放大与缩小 范例 自动放大窗口 23 打开新窗口对象的语法 窗口对象名称 Window open URL 新窗口名称 窗口的规格 窗口对象名称 用以使用窗口对象的特性与方法 ex 窗口对象名称 close窗口名称 用以识別该窗口 ex 24 窗口对象范例 打开与开关窗口 25 functiongrow window resizeBy 0 150 functionshrink window resizeBy 0 150 广告页here 窗口对象范例 动态调整广告页大小 26 使用Timer的语法 1 Timer又称为计时器或延迟器 常用来指定于特定时间后执行某程式 2 时间单位为毫秒 千分之一秒 ex 3000milliseconds 3seconds window setTimeout 欲执行的程序或函数 设定的时间 27 使用Timer的语法 二 如果利用循环将计时器设计成重复执行 欲终止计时器执行 请使用此一格式 因为要终止计时器的执行 必须指定欲终止的计时器名称 计时器对象名称 window setTimeout 欲执行的代码或函数 设定的时间 28 终止循环內Timer的语法 终止计时器的执行 必须指定欲终止的计时器名称 window clearTimeout 计时器对象名称 29 functiontimer setTimeout alert 3秒到了 3000 窗口对象范例 timer 1 30 varcounter 0setTimeout upDate 3000 三秒钟后呼叫upDate functionupDate counter status 第 counter 次载入 timer1 setTimeout upDate 3000 窗口对象范例 timer 2 31 历史对象 historyobject history对象是用来存储客戶端访问过的URL资料 这些历史记录是以串列 list 的方式存储 各大浏览器均提供检视history工具ex IE 检视 移至NC 前往 go 32 历史对象的使用语法如下 history 特性history 方法 参数群 length history对象中URL个数back 载入历史对象中上一个URLforward 载入历史对象中下一个URLgo 载入指定的URL 历史对象的使用语法 33 窗口对象范例 history 34 location位置对象 location位置对象 用来代表特定窗口的URL信息 URL的格式 protocol host port path hash searchURL的种类主要有 http file ftp mailto news location位置对象的属性说明 35 location位置对象的方法 比如 要实现当按下一个按钮后前往网易网站 那么使用下面的代码 36 with document write 重新载入此页 write 前往SeedNet方法一 write 前往SeedNet方法二 link tw write 前往SeedNet方法三 前往SeedNet方法四 窗口对象范例 location 1 37 前往SeedNet方法五前往SeedNet方法六前往SeedNet方法七 窗口对象范例 location 2 38 框架对象 框架对象 是在同一屏幕上显示多个互不干涉的可滚动框架的窗口 frames属性 是由源文件中含有Frameset的Frame标签创建的子框架的对象构成的数组 可以通过框架数组来查询窗口中的子框架 如果一个窗口含有三个名字分别为fr1 fr2和fr3的子框架 那么可以用下面的方法查询它们 parent frames fr1 parent frames fr2 parent frames fr3 或者用 parent frames 0 parent frames 1 parent frames 2 length属性 可以使用窗口的length属性来查询框架中的子框架的数量 39 Document对象 40 1 代表目前的文件信息 2 直接对应至HTML的Body标签 文档对象 Documentobject 41 document 特性document 方法 参数群 bgColor 相当于HTML的BGCOLORalinkColor 相当于HTML的ALINKlinkColor 相当于HTML的LINKvlinkColor 相当于HTML的VLINKfgColor 相当于HTML的TEXTtitle 相当于HTML的lastModified 最近更新日期URL 文件的URL 文档对象的使用语法 42 DocumentAnchorAppletAreaImageFormLink 文档对象的对象阶层图 43 document write 本页最后更新日期 document write document lastModified 文档对象范例 最近更新时间 44 Form对象 45 1 用于定义表单 提供使用者输入资料 2 包含许多控制类型 3 直接对应至HTML的表单元件 表单对象 Formobject 46 FormButtonCheckboxFileUploadHiddenPasswordRadioResetSelectSubmitTextTextarea 表单对象的对象阶层图 47 表单名称 特性表单名称 方法 参数群 forms 索引值 特性forms 索引值 方法 参数群 表单对象的使用语法 48 action ACTION属性设定值elements 以陣列代表表单內所有元件encoding 使用POST传送时之编码方式length 表单內元件个数method 指定传送方式 POST GET target 将执行结果于特定窗口內执行 表单对象的特性 49 表单对象可使用的方法如下 reset 模拟按下reset按钮的动作submit 模拟按下submit按钮的动作toString 传回字串表示值 表单对象的方法 50 显示一个可供输入的域 可使用的事件处理程序 onBlur onChange onFocusonKeyDown onKeyUponMouseDown onMouseUp 本文对象 Textobject 51 type text 类型为本文name tel Text名称value 03 4257387 初始值size 20 Text大小title 提示值 提示值AccessKey L 快捷键值maxlength 10 可输入资料长度readonly 指定成为只读属性 本文对象相关参数 52 文本对象的对象特性 defaultValue 该元件预设值type 该元件类型name 该元件识別名称value 该元件目前输入值 53 1 显示一个可供选择 单选 的按钮 2 ON表示确认 OFF表示不确认 可使用的事件处理程序 onBlur onClick onFocusonKeyDown onKeyUponMouseDown onMouseUp 单选按钮对象 Radioobject 54 type radio 类型为圆钮name sex 名称为sexvalue boy 传送值为boychecked 设定为预设选项 单选按钮对象相关参数 Inputtype radioname sexvalue boychecked 55 性別 男生女生functionSEX if document form1 elements 0 checked sex 男生 elsesex 女生 alert 性別是 sex 表单对象范例 radio 56 1 显示一个可供选择的复选框 2 ON表示确认 OFF表示不确认 可使用的事件处理程序 onBlur onClick onFocusonKeyDown onKeyUponMouseDown onMouseUp 复选对象 Checkboxobject 57 type checkbox 类型为确认方块name hobby 名称value music 传送值checked 设定为预设选项 复选按钮对象相关参数 Inputtype checkedname hobbyvalue music 58 1 显示一个可供输入密码的输入框 2 利用 隐藏所输入的资料 可使用的事件处理程序 onBlur onChange onFocusonKeyDown onKeyUponMouseDown onMouseUp 密码对象 passwordobject 59 type password 类型为密码name password 名称value 1234 初始值size 20 大小maxlength 10 可输入资料长度 密码对象相关参数 Inputtype passwordname pw 60 输入密码 重新输入 functioncheckPw if document form1 pw1 value document form1 pw2 value alert 兩組密码不符 请重新输入 elsealert OK 表单对象范例 password 1 61 密码对象的对象特性 defaultValue 该元件预设值type 该元件类型name 该元件识別名称value 该元件目前输入值 62 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 63 输入密码 重新输入 表单对象范例 password 2 64 提供一个隐藏域 用以储存特殊资料值 以供运算或参考 隐藏对象 hiddenobject 65 type hidden 类型为隐藏name dummy 对象名称value 1234 元件初始值 隐藏对象相关参数 Inputtype hiddenname dummyvalue 1234 66 提供一組选单 供使用者选择 可使用的事件处理程序 onBlur onChange onFocusonClick onDblClick 选择对象 selectobject 67 name week 名称size 3 下拉框大小multiple 设定为可多选option 定义选择的內容selected 预选项目value 定义传送值 选择对象相关参数 68 SundayMondayTuesdayWednesdayThursdayFridaySaturday 表单对象范例 select 1 69 选择对象的对象特性 type 该元件类型name 该元件识別名称value 该元件目前输入值selectedIndex 选项的索引值length 选项个数options 选项数组 70 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 71 functioncreateOptions varoption newOption document form1 select1 value document form1 select2 options 2 option 可选择项目 香蕉芭樂蘋果梨子 下页续 表单对象范例 动态选单 72 接上页 onClick createOptions 选择项目 表单对象范例 动态选单 73 提供一个按钮 供触发事件之用 可使用的事件处理程序 onBlur onClick onFocus 按钮对象 buttonobject 74 type button 类型为按钮name button1 按钮名称value 请按我 按钮面显示值title 送至服务器 提示值tabindex 0 定位顺序disabled 使失效 按钮对象相关属性 75 按钮对象的对象特性 type 该元件类型name 该元件识別名称value 该按钮面显示值disabled 该元件生效否 76 动态设定按钮的显示字樣 请输入 表单对象范例 button 77 表单对象范例 button 78 用以将表格內资料送至服务器之用 可使用的事件处理程序 onBlur onClick onFocus另外可在Form标签內搭配使用onSubmit 提交对象 submitobject 79 type submit 类型为呈送钮name submit1 按钮名称value 提交 提交钮表面显示值 提交对象相关参数 Inputtype submitname submit1value 送出 80 提交对象的对象特性 type 该元件类型Name 该元件识別名称value 该按钮面显示值 81 functionis