《JavaScriptII》由会员分享，可在线阅读，更多相关《JavaScriptII（42页珍藏版）》请在金锄头文库上搜索。
1、JavaScript II 1回顾内容回顾内容JavaScript概述JavaScript语法基础2主要内容1.内置对象内置对象2.事件驱动及事件处理事件驱动及事件处理3.浏览器对象（一）浏览器对象（一）31.1 对象对象Javascript对象指的是这样一类特殊对象指的是这样一类特殊的数据类型，它不仅可以保存一组不的数据类型，它不仅可以保存一组不同类型的数据（属性），而且还可以同类型的数据（属性），而且还可以包含有关处理这些数据的函数（方法）包含有关处理这些数据的函数（方法）Javascript对象类型：对象类型：内置对象内置对象Javascript内置对象内置对象基于基于DOM的对象的对象
2、 自定义对象自定义对象4常用内置对象常用内置对象Array对象对象String对象对象Math对象对象Date对象对象51.2 Array对象对象Array对象：是一连串相同或不同类对象：是一连串相同或不同类型的数据群组型的数据群组.6建立数组对象：建立数组对象：先声明后赋值：先声明后赋值：var 数组对象名称数组对象名称 = new Array(数组元素个数数组元素个数) 或或var 数组对象名称数组对象名称 = new Array( )例如：例如：var fruit=new Array(3)fruit0=“apple”;fruit1=“pear”;fruit2=“orange”;声明的同时
3、赋值：声明的同时赋值：var 数组对象名称数组对象名称 = new Array(元素一，元素二，元素一，元素二，)例如：例如：var fruit=new Array(apple,pear,orange);建立一个动建立一个动态数组态数组7数组元素的引用：数组元素的引用：使用数组名可以获取整个数组的值使用数组名可以获取整个数组的值若要取数组元素的值，则需要使用数组若要取数组元素的值，则需要使用数组名，同时借助下标。数组下标从名，同时借助下标。数组下标从0开始，开始，到数组到数组长度长度-1结束，即第一个元素的下结束，即第一个元素的下标为标为0，最后一个元素的下标为数组长度，最后一个元素的下标为数
4、组长度-1 例如：例如： fruit=new Array(3)的元素分别为：的元素分别为：fruit0、fruit1、fruit28Array对象的常用属性：对象的常用属性：length：获取数组长度（数组元素个数）：获取数组长度（数组元素个数）Array对象的常用方法：对象的常用方法：reverse()：倒序数组对象；：倒序数组对象； sort()：按字典顺序对数组元素重新排序：按字典顺序对数组元素重新排序 join(分隔字符分隔字符)：将数组内各个元素以分隔符：将数组内各个元素以分隔符连接成一个字符串连接成一个字符串push()：在数组尾部往数组中添加数组元素：在数组尾部往数组中添加数组元
5、素splice(m,n)：删除在：删除在m位置的位置的n个元素个元素数组对象属性和方法的使用：数组对象属性和方法的使用： 数组对象数组对象.属性属性 数组对象数组对象.方法（参数方法（参数1，参数，参数2，）9Array对象示例对象示例var fruit=new Array(var fruit=new Array(苹果苹果苹果苹果,梨子梨子梨子梨子,橙子橙子橙子橙子););var fruit1=new Array(pear1,apple,orange);var fruit1=new Array(pear1,apple,orange);with(document)with(document) w
6、rite(); write(); write(,fruit); write(,fruit); write(,fruit.join(); write(,fruit.join(); write(, fruit.join( write(, fruit.join(、);); write(, fruit.reverse(); write(, fruit.reverse(); write(,fruit.concat(fruit1);/ write(,fruit.concat(fruit1);/concatconcat() () 方法用于连接两个或多方法用于连接两个或多方法用于连接两个或多方法用于连接两个或
7、多个数组。个数组。个数组。个数组。 write(,fruit1.sort(); write(,fruit1.sort(); write(); write(); 101.3String 对象对象String 对象是包装对象，用来保存字对象是包装对象，用来保存字符串常数符串常数建立字符串对象语法：建立字符串对象语法： var var 字符串对象名称字符串对象名称=new String(=new String(字符串字符串常数）常数） 11String对象常用属性：对象常用属性：length：用于判断字符串的字符长度：用于判断字符串的字符长度String对象常用方法：对象常用方法：有关处理字符串内容
8、的方法有关处理字符串内容的方法有关处理字符串显示的方法有关处理字符串显示的方法 12有关处理字符串内容的常用方法方方 法法意意 义义charAt(位置）位置）获取获取String对象在指定位置处的字符对象在指定位置处的字符indexOf(要查找的字符串）要查找的字符串）获取查找的字符串在获取查找的字符串在String对象中首次出现的位置对象中首次出现的位置lastIndexOf(要查找的字符要查找的字符串）串）获取要查找的字串在获取要查找的字串在String对象中的对象中的最后一次出现的最后一次出现的位置位置substr(索引值索引值I，长度，长度）从从String对象的索引值处开始截取对象的
9、索引值处开始截取String对象的所有对象的所有字串或截取指定长度的字串字串或截取指定长度的字串substring(索引值索引值I,索引值索引值j ）截取由索引值截取由索引值i到索引值到索引值j-1之间的字符串之间的字符串split(分隔符分隔符)把把 String对象中的字符串按分隔符拆分成字符串数组对象中的字符串按分隔符拆分成字符串数组replace(需替代的字串，新需替代的字串，新字串字串)用新字串替换需替代的字串用新字串替换需替代的字串toLowerCase()把把 String对象中的字串转换成小写字母对象中的字串转换成小写字母toUpperCase()把把 String对象中的字串
10、转换成大写字母对象中的字串转换成大写字母toString()获取获取String对象的字符串值对象的字符串值valueOf()获取获取String对象的原始值对象的原始值concat(字串字串1，字串，字串2，）将参数中的各字符串与将参数中的各字符串与String对象中的字符串结合成对象中的字符串结合成一个字符串一个字符串13有关处理字符串显示的常用方法方方 法法意意 义义bold()使使String对象中字串的字体加粗显示对象中字串的字体加粗显示fontcolor(颜色）颜色）设置设置String对象中字串的字体颜色对象中字串的字体颜色fontsize(大小）大小）设置设置String对象中
11、字串的字体大小对象中字串的字体大小italics(）设置设置String对象中字串的字体格式为斜体对象中字串的字体格式为斜体big(）设置设置String对象中字串的字体为大字体对象中字串的字体为大字体small()设置设置String对象中字串的字体为小字体对象中字串的字体为小字体strike()设置设置String对象中的字串显示删除线对象中的字串显示删除线sub()设置设置String对象中的字串以下标显示对象中的字串以下标显示sup()设置设置String对象中的字串以上标显示对象中的字串以上标显示14String对象属性和方法的使用：对象属性和方法的使用： String对象对象.属性
12、属性 String对象对象.方法（参数方法（参数1，参数，参数2，）15字符串对象的比较与字符串变量的比较字符串对象的比较与字符串变量的比较字符串变量的比较：直接将两个字符串变量进行字符串变量的比较：直接将两个字符串变量进行比较比较字符串对象的比较：必须先使用字符串对象的比较：必须先使用toString()或或valueOf()方法获取字符串对象的值，然后用值进行比较方法获取字符串对象的值，然后用值进行比较例如：例如： var str1=JavaScript; var str2=JavaScript; var strObj1=new String(str1); var strObj2=new
13、String(str2); if(str1=str2) if(strObj1.valueOf()=strObj2.valueOf()16String 对象示例对象示例var str = new String(This is a test String);var firstIndex= str.indexOf(s); var lastIndex= str.lastIndexOf(s); var arr=new Array();arr= str.split( );len = str.length; result = 第一个第一个s的位置是的位置是: + firstIndex+ + 最后一个最后一个
14、 s 的位置是的位置是 :+lastIndex+字符串对象的长度是字符串对象的长度是:+len+数组数组arr中的各个元素为中的各个元素为:+arr0+arr1+arr2+arr3+arr4;document.write(result);document.write(字符串对象的字符颜色显示为字符串对象的字符颜色显示为红色红色:+str.fontcolor(red);17String 对象示例对象示例运行结果运行结果181.4 Math 对象对象Math对象包含用来进行数学计算对象包含用来进行数学计算的属性和方法，其属性也就是标准的属性和方法，其属性也就是标准的数学常量，其方法则构成了数学的数
15、学常量，其方法则构成了数学函数库函数库 19Math 对象的常用方法方方 法法意意 义义abs(num)返回返回num的绝对值的绝对值ceil(num)返回大于等于返回大于等于num的最小整数的最小整数floor(num)返回小于等于返回小于等于num的最大整数的最大整数max(n1,n2)返回返回n1、n2中的最大值中的最大值min(n1,n2)返回返回n1、n2中的最小值中的最小值pow(n1,n2)返回返回n1的的n2次方次方sqrt(n)返回返回n的平方根的平方根random()产生产生0-1之间的随机数之间的随机数round(num)返回返回num四舍五入后的整数四舍五入后的整数ex
16、p(num) 和和log(num)返回以返回以e 为底为底的的指数和自然对数值指数和自然对数值sin(radianVal)、cos(radianVal) 和和tan(radianVal)分别是返回一个角的正弦、余弦分别是返回一个角的正弦、余弦和和正切值正切值的三角函数的三角函数，方法输入参数以弧度表示方法输入参数以弧度表示asin(num)、acos(num) 和和atan(num)分别反正弦、反分别反正弦、反余弦余弦和和正切正切三角函数，三角函数，这这些函数的返回值以弧度表示些函数的返回值以弧度表示20Math对象属性和方法的使用：对象属性和方法的使用： Math.属性属性 Math.方法（
17、参数方法（参数1，参数，参数2，）21Math 对象示例对象示例221.5 Date 对象对象Date 对象可用来获取日期和时间对象可用来获取日期和时间创建创建Date对象的方法：对象的方法： var dt=new Date(日期参数日期参数) 23日期参数说明：日期参数说明：省略不写：用于获取系统当前日期和时间：省略不写：用于获取系统当前日期和时间： today=new Date()日期字符串，格式为：日期字符串，格式为：月月 日，公元年日，公元年 时时:分分:秒秒或简写成或简写成月月 日，公元年日，公元年today=new Date(October 1,2010 12:06:36 ) to
18、day=new Date(October 1,2010)一律以数值表示，格式为：一律以数值表示，格式为：公元年，月，日，时，公元年，月，日，时，分，秒分，秒或简写成或简写成公元年，月，日公元年，月，日 today=new Date(2001,10,10,0,0,0) today=new Date(2001,10,10) 24Date对象属性和方法的使用：对象属性和方法的使用： Date对象对象.属性属性 Date对象对象.方法（参数方法（参数1，参数，参数2，）25Date 对象的常用方法（1）方方 法法意意 义义getDate()根据本地时间返回根据本地时间返回Date对象的日期对象的日期1
19、31getDay()根据本地时间返回根据本地时间返回Date对象的星期数对象的星期数06getMonth()根据本地时间返回根据本地时间返回Date对象的月份数对象的月份数011 getYear()根据本地时间，返回根据本地时间，返回Date对象的年份数对象的年份数(在在2000年以前返回年份数后两位，年以前返回年份数后两位，2000年以年以后返回后返回4位位)getFullYear()根据本地时间，返回以根据本地时间，返回以4位整数表示的位整数表示的Date对象年份数对象年份数getHours()根据当地时间返回根据当地时间返回Date对象的小时数对象的小时数getMinutes()根据当地
20、时间返回根据当地时间返回Date对象的分钟数对象的分钟数getSeconds()根据当地时间返回根据当地时间返回Date对象的秒数对象的秒数getTime()根据当地时间返回自根据当地时间返回自1970年年1月月1日日00：00：00以来的毫秒数以来的毫秒数26Date 对象的常用方法（2）方方 法法意意 义义setYear(年份数）年份数）根据本地时间设置根据本地时间设置Date对象的年份数对象的年份数setFullYear(年份数年份数，月，月份，日期数份，日期数)根据本地时间设置根据本地时间设置Date对象的年份数对象的年份数setDate(日期数日期数)根据本地时间设置根据本地时间设置
21、Date对象的当月号数对象的当月号数setMonth(月月，日，日)根据本地时间设置根据本地时间设置Date对象的月份数对象的月份数setHours(小时小时，分，秒，分，秒，毫秒毫秒) 根据本地时间设置根据本地时间设置Date对象的小时数对象的小时数setMinutes(分分，秒，毫秒，秒，毫秒)根据本地时间设置根据本地时间设置Date对象的分钟数对象的分钟数setSeconds(秒秒，毫秒，毫秒)根据本地时间设置根据本地时间设置Date对象的秒数对象的秒数setMilliSeconds(毫秒毫秒)根据本地时间设置根据本地时间设置Date对象的毫秒数对象的毫秒数setTime (总毫秒数总毫
22、秒数)根据本地时间设置根据本地时间设置Date对象自对象自1970年年1月月1日日00：00：00以来的毫秒数以来的毫秒数toLocaleString()以本地时区格式显示，并以字符串表示以本地时区格式显示，并以字符串表示27Date 对象示例对象示例282.1 事件及事件驱动事件及事件驱动基于对象的基本特征，就是采用事件基于对象的基本特征，就是采用事件驱动驱动(event-driven)(event-driven)所谓事件，所谓事件，就是用户与就是用户与Web页面交互页面交互时产生的时产生的操作操作，称为事件，称为事件(Event)。比。比如按下鼠标、移动窗口、选择菜单等如按下鼠标、移动窗口
23、、选择菜单等事件驱动就是当事件发生后，会由此事件驱动就是当事件发生后，会由此而引发而引发一连串程序的执行一连串程序的执行(即事件响应即事件响应)292.2 常用事件 事件事件 事件关联的对象事件关联的对象 含含义义说说 明明MouseDownMouseDowndocument,linkdocument,link及所有表及所有表单子组件单子组件单击鼠标单击鼠标用户单击鼠标用户单击鼠标MouseMove MouseMove document,linkdocument,link及所有表及所有表单子组件单子组件移动鼠标移动鼠标用户移动鼠标用户移动鼠标MouseOutMouseOutdocument,l
24、inkdocument,link及所有表及所有表单子组件单子组件移开鼠标移开鼠标用户将鼠标移开对象用户将鼠标移开对象MouseOver MouseOver document,linkdocument,link及所有表及所有表单子组件单子组件鼠标进入鼠标进入用户将鼠标移动到对象上用户将鼠标移动到对象上MouseUpMouseUpdocument,linkdocument,link及所有表及所有表单子组件单子组件放开鼠标左键放开鼠标左键用户将鼠标左键放开时用户将鼠标左键放开时Click Click linklink及所有表单子组件及所有表单子组件单击鼠标单击鼠标用户在对象上单击一下鼠标左键用户在对
25、象上单击一下鼠标左键DblClick DblClick linklink及所有表单子组件及所有表单子组件双击鼠标双击鼠标用户在对象上双击鼠标左键用户在对象上双击鼠标左键KeyDownKeyDownImage,linkImage,link及所有表单子组及所有表单子组件件按下键盘上任意按下键盘上任意键键用户按下键盘上某个键的一刹那用户按下键盘上某个键的一刹那KeyUpKeyUpImage,linkImage,link及所有表单子组及所有表单子组件件键盘上任意键弹键盘上任意键弹起来起来用户按下键盘上某个键后用户按下键盘上某个键后,按键弹按键弹起来的一刹那起来的一刹那KeyPressKeyPressI
26、mage,linkImage,link及所有表单子组及所有表单子组件件按下键盘上任意按下键盘上任意键键用户按下键盘上某个键时用户按下键盘上某个键时30接上表 事件事件 事件关联的对象事件关联的对象 含含义义说说 明明Abort Abort image image中止中止当图形尚未完全加载前当图形尚未完全加载前,用户就单用户就单击了一个超链接击了一个超链接,或单击停止按钮或单击停止按钮Blur Blur WindowWindow及所有表单子组件及所有表单子组件失去焦点失去焦点用户将他的输入焦点从窗口或表用户将他的输入焦点从窗口或表单移开单移开ChangeChangeText,password,T
27、ext,password,textarea,selecttextarea,select改变改变用户改变组件的值用户改变组件的值SelectSelectText,password,textareaText,password,textarea选择选择用户选择对象用户选择对象SubmitSubmitformform提交提交用户单击表单中的用户单击表单中的Sumbit按按钮钮ErrorErrorImage,windowImage,window错误错误加载文件或图形时发生错误加载文件或图形时发生错误LoadLoaddocumentdocument加载加载浏览器读入该文件时浏览器读入该文件时UnloadU
28、nloaddocumentdocument退出退出(卸载卸载)用户关闭或退出目前网页用户关闭或退出目前网页FocusFocusWindow,Window,所有表单子组件所有表单子组件取得焦点取得焦点用户将输入焦点放进对象中用户将输入焦点放进对象中ErrorErrorImage,windowImage,window错误错误加载文件或图形时发生错误加载文件或图形时发生错误312.3 事件处理程序事件处理程序事件处理程序就是：当某个事件事件处理程序就是：当某个事件发生后，处理事件的程序或函数发生后，处理事件的程序或函数（Event HandlerEvent Handler）事件处理过程定义方式：在每
29、一事件处理过程定义方式：在每一种事件名称前面加上种事件名称前面加上onon即可，如即可，如onLoadonLoad，onClickonClick32事件处理程序使用语法事件处理程序使用语法常见的是将事件处理程序视为一种属性，常见的是将事件处理程序视为一种属性，直接嵌入到直接嵌入到HTML的标记内，如：的标记内，如： 另一种语法是视为对象属性，直接接在另一种语法是视为对象属性，直接接在对象后面，如：对象后面，如： document.onLoad= =“alert(请使用请使用 800*600*256浏览浏览）”； 332.4 事件处理示例（一）事件处理示例（一）事件处理事件处理请输入姓名请输入姓
30、名:342.4 事件处理示例（二）事件处理示例（二）事件处理事件处理事件处理事件处理font style=cursor:hand onClick=location= onMouseout=status=;this.color=blue华软网站华软网站华软网站华软网站353.1 JavaScript 浏览器对象结构浏览器对象结构图图注意注意: :不同的浏览器，具有不不同的浏览器，具有不同的文档对象模型的属性同的文档对象模型的属性和方法和方法. .常用常用document.alldocument.all来判断浏览来判断浏览器类型器类型, ,取值取值truetrue时为时为IE;IE;否否则为则为N
31、etscapeNetscapeHTML DOM 对象JavaScript对象363.2 window 对象对象window 对象表示一个浏览器窗口或一个对象表示一个浏览器窗口或一个框架，是除框架，是除navigator 以外任何对象的顶以外任何对象的顶层对象层对象Window 对象会在对象会在 或或 每次出现时被自动创建每次出现时被自动创建 window 对象是对象是全局对象全局对象，在，在同一个窗口同一个窗口中访问其他对象时，可以省略中访问其他对象时，可以省略“window”字样，但如果要跨窗口访问，则必须写上字样，但如果要跨窗口访问，则必须写上相应窗口的名称（或别名）相应窗口的名称（或别名
32、）37window对象的常用属性属属 性性说说 明明defaultStatus设置状态栏的默认信息设置状态栏的默认信息status设置状态栏的临时信息设置状态栏的临时信息document包含当前文件的信息，也用以显示包含当前文件的信息，也用以显示HTML文件，此属性的值文件，此属性的值是是document对象对象history包含该窗口最近查阅过的网页包含该窗口最近查阅过的网页URLlocation包含当前包含当前URL的信息的信息locationbar表示浏览器的地址栏表示浏览器的地址栏menubar表示浏览器的菜单栏表示浏览器的菜单栏scrollbar表示浏览器的滚动条表示浏览器的滚动条s
33、tatusbar表示浏览器的状态栏表示浏览器的状态栏toolbar表示浏览器的工具栏表示浏览器的工具栏self表示当前窗口表示当前窗口top表示最上方的窗口表示最上方的窗口parent包含当前窗口的上一级窗口包含当前窗口的上一级窗口38window对象的常用方法（一）方方 法法说说 明明alert(警告信息字符串警告信息字符串)警告对话框，警告对话框，用以提示用户注意某些事项用以提示用户注意某些事项comfirm(确认信息字符串确认信息字符串)确认对话框，有确认对话框，有确认确认和和取消取消两个按两个按钮，单击确认返回钮，单击确认返回true，单击取消，返，单击取消，返回回falsepromp
34、t(提示字符串提示字符串,默认值默认值）消息框，提示输入信息对话框，返回用消息框，提示输入信息对话框，返回用户输入信息户输入信息open(URL,窗口名称窗口名称,窗口规格窗口规格）打开新窗口打开新窗口setTimeout(执行程序，毫秒）执行程序，毫秒）设置一个定时程序设置一个定时程序setInterval (执行程序，毫秒）执行程序，毫秒）设置一个定时程序设置一个定时程序clearTimeout(定时器对象）定时器对象）清除以清除以setTimeout定义的定时程序定义的定时程序clearInterval(定时器对象）定时器对象）清除以清除以setInterval定义的定时程序定义的定时程
35、序close()关闭窗口关闭窗口39window对象的常用方法（二）方方 法法说说 明明back()回到历史记录中的上一网页，相当于回到历史记录中的上一网页，相当于IE浏览浏览器的工具栏上单击器的工具栏上单击“后退后退”按钮按钮forward()加载历史清单中的下一个网址，相当于加载历史清单中的下一个网址，相当于IE浏浏览器工具栏上单击览器工具栏上单击“前进前进“按钮按钮home()进入客户端在浏览器上设置的主页进入客户端在浏览器上设置的主页print()打印网页内容，相当于在打印网页内容，相当于在IE浏览器中选择浏览器中选择【文件文件】 【打印打印】 或按下或按下【Ctrl+P】键键blur
36、()将窗口失去焦点将窗口失去焦点focus()使窗口获得焦点使窗口获得焦点40window 对象的使用对象的使用格式格式window（或窗口名称或别名）（或窗口名称或别名）.属性属性 window（或窗口名称或别名）（或窗口名称或别名）.方法（参数列方法（参数列表）表） 例如：例如：window.open(index.htm) adwin.document.title=“广告广告“ 说明：在实际使用中，说明：在实际使用中，“window”也经常使用别名也经常使用别名代替。常用的别名有：代替。常用的别名有：opener：表示打开当前窗口的窗口：表示打开当前窗口的窗口parent：表示当前窗口的上一级窗口：表示当前窗口的上一级窗口top：表示最上方的窗口：表示最上方的窗口self：表示当前活动窗口：表示当前活动窗口例如：例如：self.close(); 41就到这吧就到这吧下课啦下课啦42
