1、1,JavaScript对象,2,JavaScript的对象: Array,属性：length，它指明了数组的长度。 方法：join() 将数组值连接变为一个字符串；reverse()将数组值倒序；sort() 将对数组值进行排序; AAA=new Array(3); AAA0=“B“; AAA1=“A“; AAA2=“C“; document.write(AAA.length+“); document.write(AAA.join()+“); document.write(AAA.reverse().join()+“); document.write(AAA.sort().join()+“;
2、,3,JavaScript的对象:String,属性：length属性表明字符串长度。方法 字符串的转换；toUpperCase()将字符串所有字符转为大写；toLowerCase()将字符串所有字符转为小写；toString()将非字符串对象显示转化为字符串。,4,JavaScript的对象:String,属性：length属性表明字符串长度。方法 字符串的处理；substring()将括号中参数所指的字符串片段返回；charAt()返回括号中指定位置字符串的内容；split()根据指定的分隔符把一个字符串划分为一个 字符串数组。 如:newstring = astring.substrin
3、g(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时间)； .tolo
4、caleString()将日期时间值转换为的字符串(当地时间)。,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.availWidt
5、h屏幕可见宽度screen.colorDepth色深8 ，16，32位颜色,8,JavaScript事件模型,事件：用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如加载一张网页，点击一个超链等。 事件处理程序的引入（如何使一段JavaScript程序和事件的发生联系起来？）。“on事件名”是JavaScript规定的对应事件处理程序柄（event handler）的名字。例如onClick、onfocus、onSubmit等等。,9,JavaScript事件模型(续),第一种引入方式：事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现，而对应的属性
6、值是由网页编写者提供的JavaScript程序段（或事件处理函数名） ； 第二种引入方式：将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性（property） document.forms0.age.onchange=isNumber；,10,JavaScript事件模型(续),例：让事件处理程序作为“属性值”这里，事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标记的属性名的松散要求是一致的。 OnLoad在网页完全加载完后执行(即包括图像,applet等)； OnUnLoad在网页退出之前执行。,11,在浏览器中使用,12,1.代表浏览器器所打开的窗口。 2.通常代表目前
7、正在使用(focus)的窗口。 3.如果打开多个浏览器窗口时，可以利用别名(alias)来区别它们,如： ex. opener, parent, self, window, top,窗口对象(Window object),13,窗口对象,窗口对象是JavaScript对象的主要对象之一，而窗口对象中最常用的以下几种：,opener对象,self对象,parent对象,top对象,history历史对象,14,opener对象和self对象,opener对象可以用于确定open方法打开窗口的源窗口。self对象实际上代表的是窗口自身，是用于对窗口对象自身的一些属性进行控制。下面看一个opener
8、和self对象的使用示例，下例将用一个父窗口打开一个子窗口，然后在子窗口中设置两个链接，用以改变父窗口的背景色。将主窗口的代码保存为main.html，而将子窗口的代码保存为sub.html。主窗口main.htmlqueryWin=open(sub.html,height=100 width=150),在主窗口用open方法打开文件sub.html作为子窗口，其中高度为100，宽度用默认值,15,子窗口sub.html function passToOpener(color)opener.document.bgColor=color;self.close(); 请选择你喜欢的颜色?蓝色 红色
9、 ,改变父窗口的颜色,关闭子窗口,调用改变父窗口颜色的函数,16,parent对象,parent对象仅仅是对子窗口有意义，也就是说，窗口不是顶层窗口。parent的属性请大家参考框架的框架集窗口，这一点我们以后还会讲到，一个框架集内的子窗口可以使用parent.frameName来查访它的兄弟窗口，比如：一个框架集中的第四个窗口有一个属性name=“homeFrame”，那么它的兄弟窗口可以通过使用parent.homeFrame或者parent.frames3去访问它。,17,top对象,top对象是顶层窗口的同义词，可以通过使用top.close()将顶层窗口关闭，可以通过使用top.le
10、ngth来得到顶层窗口中含有的框架个数。,18,窗口对象使用语法,window.特性 window.方法(参数群) self.特性 /self代表目前window或frame名称 self.方法(参数群) top.特性 /top代表最顶层的窗口 top.方法(参数群) parent.特性 /parent代表目前框架的父框架 parent.方法(参数群) 窗口名称.特性 窗口名称.方法(参数) 特性 方法(参数),19,closed -说明窗口是否已经关闭 defaultStatus -浏览器底部预设的状态列讯息 length -窗口重的框架个数 Frame -窗口中的frame frames
11、-窗口中的frame数组 name -窗口的名称 opener -打开该窗口的窗口名称 status -浏览器底部自行设定的状态信 document -窗口中的document对象 history -窗口history对象 location -窗口对象的对象中的location对象,窗口对象的属性,20,alert() -显示警告讯息 confirm() -显示确认讯息 prompt() -显示提示讯息 focus() -成为焦点 blur() -移开焦点(成为背景处理) open() -打开新浏览窗口 close() -开关已打开的浏览窗口 eval() -执行引数运算式计算,窗口对象的方法
12、,21,resizeBy(x, y) -将窗口尺寸向X轴及Y轴调整 moveBy(x, y) -将窗口向X轴及Y轴移动 scroll(x,y) -卷动至指定的座標 print() -列印指定之窗口內容 setTimeout() -设定一定时程序(计时器) clearTimeout() -撤销一定时程序(计时器) toString() -传回字串表示值 valueOf() 传回数值表示值,窗口对象的方法,22, function grow()window.resizeBy( 50, 50) function shrink()window.resizeBy( -50, -50) 将窗口放大与缩小
13、,范例 自动放大窗口,23,打开新窗口对象的语法,窗口对象名称 = Window. open (URL , 新窗口名称 , 窗口的规格 ),窗口对象名称：用以使用窗口对象的特性与方法。ex.窗口对象名称.close窗口名称：用以识別该窗口。ex.,24,窗口对象范例 - 打开与开关窗口,25, function grow()window.resizeBy( 0, 150) function shrink()window.resizeBy( 0, -150) 广告页 here ,窗口对象范例- 动态调整广告页大小,26,使用 Timer 的语法,1.Timer又称为计时器或延迟器，常用来指定于特
14、定时间后执行某程式。 2.时间单位为毫秒(千分之一秒)ex. 3000 milliseconds = 3 seconds,window.setTimeout(“欲执行的程序或函数”, 设定的时间),27,使用 Timer 的语法(二),如果利用循环将计时器设计成重复执行，欲终止计时器执行，请使用此一格式。因为要终止计时器的执行，必须指定欲终止的计时器名称。,计时器对象名称 =window.setTimeout(“欲执行的代码或函数”, 设定的时间),28,终止循环內 Timer 的语法,终止计时器的执行，必须指定欲终止的计时器名称。,window.clearTimeout(计时器对象名称),2
15、9, function timer() setTimeout(“alert(3秒到了!)“,3000) ,窗口对象范例 - timer(1),30, var counter=0 setTimeout(“ upDate() “,3000) /三秒钟后呼叫upDate() function upDate() counter +status = “第“ + counter + “次载入“timer1 = setTimeout(“upDate()“,3000) ,窗口对象范例 - timer(2),31,历史对象(history object),history对象是用来存储客戶端访问过的URL资料。
16、这些历史记录是以串列(list)的方式存储。 各大浏览器均提供检视history工具ex. IE - 检视/移至NC - 前往(go),32,历史对象的使用语法如下。 history.特性 history.方法(参数群) length -history对象中URL个数back() -载入历史对象中上一个URL forward() -载入历史对象中下一个URL go() -载入指定的URL,历史对象的使用语法,33,窗口对象范例 - history,34,location位置对象,location位置对象：用来代表特定窗口的URL信息。 URL的格式：protocol/host:port/pat
17、h#hash?search URL的种类主要有：http、file、ftp、mailto、news,location位置对象的属性说明,35,location位置对象的方法,比如，要实现当按下一个按钮后前往网易网站，那么使用下面的代码,36, with (document) write(“重新载入此页“)write(“前往SeedNet方法一“)write(“前往SeedNet方法二“.link(http:/.tw)write(“前往SeedNet方法三“) 前往SeedNet方法四 ,窗口对象范例 - location(1),37,前往SeedNet方法五前往SeedNet方法六前往Seed
18、Net方法七 ,窗口对象范例 - location(2),38,框架对象,框架对象：是在同一屏幕上显示多个互不干涉的可滚动框架的窗口。frames属性：是由源文件中含有Frameset的Frame标签创建的子框架的对象构成的数组。可以通过框架数组来查询窗口中的子框架，如果一个窗口含有三个名字分别为fr1、fr2和fr3的子框架，那么可以用下面的方法查询它们：parent.frames“fr1“parent.frames“fr2“parent.frames“fr3“或者用：parent.frames0parent.frames1parent.frames2length属性：可以使用窗口的leng
19、th属性来查询框架中的子框架的数量。,39,Document 对象,40,1.代表目前的文件信息。 2.直接对应至HTML的Body标签。,文档对象(Document object),41,document.特性 document.方法(参数群) bgColor -相当于 HTML 的 BGCOLOR alinkColor -相当于 HTML 的 ALINK linkColor -相当于 HTML 的 LINK vlinkColor -相当于 HTML 的 VLINK fgColor -相当于 HTML 的 TEXT title -相当于 HTML 的 lastModified -最近更新日期
20、 URL -文件的 URL,文档对象的使用语法,42,Document Anchor Applet AreaImage FormLink,文档对象的对象阶层图,43,document.write(“本页最后更新日期： “)document.write(document.lastModified),文档对象范例 最近更新时间,44,Form 对象,45,1.用于定义表单，提供使用者输入资料。 2.包含许多控制类型。 3.直接对应至HTML的表单元件。,表单对象(Form object),46,Form Button Checkbox FileUploadHidden PasswordRadioR
21、esetSelectSubmitTextTextarea,表单对象的对象阶层图,47,表单名称.特性 表单名称.方法(参数群) forms索引值.特性 forms索引值.方法(参数群),表单对象的使用语法,48,action -ACTION属性设定值 elements -以陣列代表表单內所有元件 encoding -使用POST传送时之编码方式 length -表单內元件个数 method -指定传送方式 (POST/GET) target -将执行结果于特定窗口內执行,表单对象的特性,49,表单对象可使用的方法如下。 reset() -模拟按下 reset 按钮的动作 submit() -模
22、拟按下 submit 按钮的动作 toString() -传回字串表示值,表单对象的方法,50,显示一个可供输入的域。可使用的事件处理程序：onBlur, onChange, onFocusonKeyDown, onKeyUponMouseDown, onMouseUp,本文对象(Text object),51,type = text /类型为本文name = tel /Text名称value = 03-4257387 /初始值size = 20 /Text大小title = 提示值 /提示值AccessKey = L /快捷键值maxlength = 10 /可输入资料长度readonly
23、/指定成为只读属性,本文对象相关参数,52,文本对象的对象特性,defaultValue - 该元件预设值 type - 该元件类型 name - 该元件识別名称 value - 该元件目前输入值,53,1. 显示一个可供选择(单选)的按钮。 2. ON 表示确认OFF 表示不确认。可使用的事件处理程序：onBlur, onClick, onFocusonKeyDown, onKeyUponMouseDown, onMouseUp,单选按钮对象(Radio object),54,type = radio /类型为圆钮name = sex /名称为sexvalue = boy /传送值为boyc
24、hecked /设定为预设选项,单选按钮对象相关参数,Input type=radio name=sex value=boy checked,55, 性別： 男生 女生function SEX()if (document.form1.elements0.checked) sex=“男生“else sex=“女生“alert(性別是：+sex) ,表单对象范例 - radio,56,1. 显示一个可供选择的复选框。 2. ON 表示确认OFF 表示不确认。可使用的事件处理程序：onBlur, onClick, onFocusonKeyDown, onKeyUponMouseDown, onMou
25、seUp,复选对象(Checkbox object),57,type = checkbox /类型为确认方块name = hobby /名称value = music /传送值checked /设定为预设选项,复选按钮对象相关参数,Input type=checked name=hobby value=music,58,1.显示一个可供输入密码的输入框。 2.利用 * 隐藏所输入的资料。可使用的事件处理程序：onBlur, onChange, onFocusonKeyDown, onKeyUponMouseDown, onMouseUp,密码对象(password object),59,typ
26、e = password /类型为密码name = password /名称value = 1234 /初始值size = 20 /大小maxlength = 10 /可输入资料长度,密码对象相关参数,Input type=password name=pw,60, 输入密码： 重新输入：function checkPw() if (document.form1.pw1.value != document.form1.pw2.value)alert (“兩組密码不符，请重新输入“) else alert (“OK!“) ,表单对象范例 - password(1),61,密码对象的对象特性,def
27、aultValue - 该元件预设值 type - 该元件类型 name - 该元件识別名称 value - 该元件目前输入值,62, function checkPwLgh(index,str) if (str.length != 9)alert(你只输入+str.length+位数n请输入9位数密码)document.form1.elementsindex.value = document.form1.elementsindex.focus() function checkRetype() if (document.form1.pw.value != document.form1.rety
28、pePw.value)alert (“兩組密码不符，请重新输入“)document.form1.retypePw.value = document.form1.retypePw.focus() else alert (“密码检查作業完成!“),表单对象范例 - password(2),63,输入密码：重新输入：,表单对象范例 - password(2),64,提供一个隐藏域，用以储存特殊资料值，以供运算或参考。,隐藏对象(hidden object),65,type = hidden /类型为隐藏name = dummy /对象名称value = 1234 /元件初始值,隐藏对象相关参数,In
29、put type=hidden name=dummy value=1234,66,提供一組选单，供使用者选择。可使用的事件处理程序：onBlur, onChange, onFocusonClick, onDblClick,选择对象(select object),67,name = week /名称size = 3 /下拉框大小multiple /设定为可多选option /定义选择的內容selected /预选项目value /定义传送值,选择对象相关参数,68,Sunday Monday Tuesday Wednesday Thursday Friday Saturday,表单对象范例 -
30、select(1),69,选择对象的对象特性,type - 该元件类型 name - 该元件识別名称 value - 该元件目前输入值 selectedIndex - 选项的索引值 length - 选项个数 options - 选项数组,70, url = new Array(2) url0 = “http:/.tw“ url1 = “http:/“function jumpPage(form) i = form.menu.selectedIndex;if (i0) window.location.href = urli-1 -选择ISP-SeednetHinet ,表单对象范例 - sel
31、ect(2),71, function createOptions()var option = new Option(document.form1.select1.value)document.form1.select2.options2 = option 可选择项目 - 香蕉 芭樂 蘋果 梨子下页续 ,表单对象范例 动态选单,72,接上页“ onClick=createOptions()选择项目 -,表单对象范例 动态选单,73,提供一个按钮，供触发事件之用。可使用的事件处理程序：onBlur, onClick, onFocus,按钮对象(button object),74,type = b
32、utton /类型为按钮name = button1 /按钮名称value = 请按我 /按钮面显示值 title = 送至服务器 /提示值tabindex = 0 /定位顺序disabled /使失效,按钮对象相关属性,75,按钮对象的对象特性,type - 该元件类型 name - 该元件识別名称 value - 该按钮面显示值 disabled - 该元件生效否,76, 动态设定按钮的显示字樣： 请输入：,表单对象范例 - button,77,表单对象范例 - button,78,用以将表格內资料送至服务器之用。可使用的事件处理程序：onBlur, onClick, onFocus另外可
33、在Form标签內搭配使用onSubmit,提交对象(submit object),79,type = submit /类型为呈送钮name = submit1 /按钮名称value = 提交 /提交钮表面显示值,提交对象相关参数,Input type=submit name=submit1 value=送出,80,提交对象的对象特性,type - 该元件类型 Name - 该元件识別名称 value - 该按钮面显示值,81, function isReady() if (document.form1.text1.value.length = 9)return true elsealert(“
34、请输入9位数密码“);return false ,表单对象范例 - submit,82, function isReady(form) if (form.text1.value.length = 9)return true elsealert(“请输入9位数密码“)form.text1.focus() /将焦点移回 text return false ,表单对象范例 - submit,83,用以将表格內资料还原为预设值，即重新输入之意。可使用的事件处理程序：onBlur, onClick, onFocus另外可在Form标签內搭配使用onReset,重置对象(reset object),84,
35、type = reset /类型为重置钮name = reset1 /按钮名称value = 重新输入 /重置钮表面显示值,重置对象相关参数,Input type=reset name=reset1 value=重新输入,85,重置对象的对象特性,type - 该元件类型 name - 该元件识別名称 value - 该按钮面显示值,86,表单对象范例 - reset,87,提供一个多列的本文域。可使用的事件处理程序：onBlur, onChange, onFocus,本文区域对象(textarea object),88,name = textarea1 /按钮名称rows = 8 /列数co
36、ls = 30 /行数(字元数) readonly /定义为只读属性,本文区域对象相关参数,Input type=reset name=reset1 value=重新输入,89,本文区域对象的对象特性,type - 该元件类型 name - 该元件识別名称 value - 本文区域的內容 defaultValue - 本文区域的预设內容,90, 意见留言版,表单对象范例 - textarea,91,提供一个本文域与文件浏览按钮。可使用的事件处理程序：onBlur, onChange, onFocus,文件对象(file/fileUpload object),92,type = file /型态为档案对象name = file1 /对象名称,档案对象相关参数,Input type=file name=file1,93,档案对象的对象特性,type - 该元件类型 name - 该元件识別名称 value - 该元件內容值,94,表单对象范例 - file,
