第4课JavaScript

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,JavaScript,介绍,2013,年,9,月,主要内容,概述,编程基础,事件驱动,内置对象,浏览器常用对象,JavaScript,概述,JavaScript,是由网景公司开发的一种跨平台，面向对象,(object-oriented),的网页脚本语言,(Web Script Language),，是目前流行的网页特效设计语言。,JavaScript,代码可直接嵌入,HTML,文件中，随网页一起传送到客户端浏览器，然后通过浏览器来解释执行。,JavaScript,概述,2. JavaScript,的特点,脚本编写语言,解释性执行语言,基于对象的语言,简单性,安全性,动态性,跨平台,JavaScript,概述,3. JavaScript,的功能,制作网页特效,提供表单前端验证,窗口动态操作,提高浏览器交互性,使用,JavaScript,的,方式,JavaScript,可以出现在,HTML,的任意地方。使用标记，,可以在,HTML,文档的任意地方插入,JavaScript。,基本格式,使用,JavaScript,的,方式,在,HTML,文档中嵌入,JavaScript,代码,在,HTML,标记中直接写入,JavaScript,代码,例如：,鼠标移过来,function=check(),alert(f1.sid.value);,return true;,使用,JavaScript,的,方式,在,HTML,文档中嵌入,JavaScript,代码,将,JavaScript,代码放入,标记符中,例如：,document.write,(“,欢迎学习,JavaScript!);,使用,JavaScript,的,方式,在,HTML,文档中嵌入,JavaScript,代码,将代码独立存储为以,.,js,为扩展名的文件，利用,SRC,属性将该文件调入,例如，主文件是：,sub.js,文件内容如下：,document.write,(“,这里是在被调入文件中,!);,使用,JavaScript,的,方式,也可以用在连接中：,a,href,=,javascript,:.,在浏览器的“地址”栏中执行,JavaScript,语句，用这样的格式：,javascript,:,JavaScript,编程基础,JavaScript,编程基础,1.,数据类型,数值,(Number),：包含整数或浮点数。,逻辑值,(Logical),：取值为,true,或,false,。,字符串,(String),：用单引号或双引号括起来的零个或多个单一的字符所组成。,空值,(null),：表示没有值，取唯一值”,null”,，大小写敏感。,未定义值,(undefined),：表示尚未定义值。,JavaScript,编程基础,2.,数据类型转换,自动数据类型转换,如果表达式中用（,+,）运算符，且其中一个操作数为字符串，另一个操作数为数值时，,JavaScript,自动将数值转成字符串。,例如,：,var,x=”,我今年”,+18;,结果：,x=“,我今年,18”,如果表达式中用了其它运算符，,JavaScript,自动将字符串转成数值。,例如：,var,x=”30”/5;,结果：,x=6,JavaScript,编程基础,数据类型转换函数,eval,(,字符串,),：,将传入的字符串参数内容，转换成相应的数值，例如：,y=eval(“15”)+8;,结果：,y=23,parseInt,(,字符串，,底数,),：,将传入的字符串，转换成指定底数的数值。,parseFloat,(,字符串,),：,将传入的字符串，转换成浮点数值。,JavaScript,的变量,3.,变量,a,）,变量命名,以字母或下划线开头（不能以数字开头），后面接数字或其它字母。,变量名区分大小写。,b,）,变量的声明,变量声明格式：,var,变量名,;,var,变量名,=,数值,;,变量声明时，不必定义类型，所有类型均由小写的,var,声明。,JavaScript,编程基础,c,）变量的作用域：,全局变量,(Global variable),和局部变量,(Local variable),document.title,= ,变量的作用域实例,;,var,gv,= JavaScript; /,gv,是全局变量,document.write(test,函数的输出：,);,test();,function test() ,var,lv,= “JavaScript; /,lv,是局部变量,document.write(gv,= +,gv,+ );,document.write(lv,= +,lv,+ + );,document.write(document,的输出：,);,document.write(gv,= +,gv,+ );,document.write(lv,= +,lv,+ );,对变量的使用,通过,form,中控件和变量，在网页上传递和处理参数。,要求在,html,中的各个控件，使用,Name,属性做出标识。,JavaScript,编程基础,4.,常量,字符串常量（,String Literals,）,一般字符串常量,特殊字符的字符串常量,布尔常量（,Boolean Literals,）：,true,或,false,。,整数常量（,Integers Literals,）,浮点常量（,Floating-Point Literals,）,数组常量（,Array Literals,）,JavaScript,编程基础,5.,运算符,双目运算符：,+,（加） 、,-,（减）、 *（乘）、,/,（除）、,%,（取模） 、,|,（按位或）、,&(,按位与,),、,（右移）、,（右移，零填充）。,单目运算符：,-,（取反）、,（取补）、,+,（递加,1,）、,-,（递减,1,）。,JavaScript,编程基础,5.,运算符,比较运算符：,(,大于,),、,=(,大于等于,),、,=(,等于,),、,!=(,不等于,),。,布尔逻辑运算符：,!,（取反,),、,&=,（与之后赋值）、,&,（逻辑与）、,|=,（或之后赋值）、,|,（逻辑或）、,=,（异或之后赋值）、,（逻辑异或）、,?:,（三目操作符）、,|,（或）、,=(,等于,),、,|=(,不等于,),。,JavaScript,编程基础,5.,运算符,三目操作符主要格式如下：,操作数？结果：结果若操作数的结果为真，则表述式的结果为结果，否则为结果。,JavaScript,流程结构,6.,程序控制流程,a,）选择结构,if ,语句,else,语句,if ,语句组,else,语句组,if ,语句组,else if ,语句组,else,语句组,JavaScript,流程结构,a,）选择结构,Switch,结构：,switch ( ),case ,：,；,case ,：,；,default,：,；,JavaScript,流程结构,b,）循环结构,while (),语句组,do ,语句或语句组,while (),for ( ,初始值,；,条件,；,增量, ), ,JavaScript,流程结构,b,）循环结构,for (,变量,in,对象,), ,with ( ), ,with (document),write (,限时抢购物品：,);,write (,ViewSonic,19,显示器。,);,write (EPSON,打印机。,);,JavaScript,的,函数,7. JavaScript,函数,系统函数,用户自定义函数,JavaScript,的,函数,1),编码函数,功能：,将字符串中非文字、数字字符（如,&,%,#,空格符,）转成相对应的,ASCII,值。,语法：,escape(,字符串,),2),译码函数,功能：,与,escape(),相反，将,ASCII,字符转回一般数字。,语法：,unescape,(,字符串,),3),求值函数,功能：,通常有两个用途，一个用作字符串的运算，另一个用来指出操作对象。,语法：,eval,(,表达式,),JavaScript,的,函数,4),数值判断函数,功能：,判断变量的值是否为数值，“,NaN,”,代表“,Not a Number”,，若返回值为,true,，则表示自变量不是数值。,语法：,isNaN,(,测试值,),举例：,var,x = 15, y = “,变量示意,;,document.write,(x,不是数值吗？,isNaN(x,);,document.write,(y,不是数值吗？,isNaN(y,);,执行结果：,x,不是数值吗？,false,y,不是数值吗？,true,JavaScript,的,函数,5),转成整数函数,功能：,将各种进制的数值转成十进制整数值。,格式：,parseInt,(,字符串,，底数,),举例：,/,二进位转成十进位,document.write(11012 = ,parseInt(1101, 2),10);,/,十六进位转成十进位,document.write(BFFF,16 = ,parseInt(BFFF, 16),10);,JavaScript,的,函数,6),转成浮点函数,功能：,将字符串转成浮点数值。,格式：,parseFloat,(,字符串,),举例：,document.write(parseInt(3.123456), );,document.write(parseFloat(3.123456), );,JavaScript,的,函数,7),用户自定义函数,function,函数名（,参数,1,，参数,2,，,）,return ,定义函数的注意事项：,易于识别,功能模块化,放置在程序开始部分,JavaScript,的事件处理,主要内容,1,、事件,(,Event)：,鼠标或键盘的动作称为事件,。,2,、事件驱动,(,Event Driver)：,由事件引发的一连串程序的动作，称为事件驱动。,3、事件处理程序,(,Event Handler)：,对事件进行处理的程序或函数。,4,、事件处理程序语法,JavaScript,的事件处理,浏览器读入文件时,Load,单击表单上的,Reset,按钮,Reset,某键被按下后弹起来的瞬间,KeyUp,单击表单上的,Submit,按钮,Submit,按下键盘上的任意键时,KeyPress,选择某对象,Select,按下键盘上的任意键的瞬间,KeyDown,窗口大小被改变,Resize,加载文件或图形时发生错误,Error,窗口被移动时,Move,拖拽对象,DrogDrop,放开鼠标左键,MouseUp,在对象上双击鼠标,DblClick,鼠标指针悬停于某对象之上,MouseOver,在对象上单击鼠标,Click,鼠标指针离开某对象,MouseOut,改变对象的值,Change,移动鼠标指针,MouseMove,获取焦点,Focus,按下鼠标左键,MouseDown,失去焦点,Blur,关闭当前网页,Unload,中止正在加载的对象,Abort,动作,事件,动作,事件,1.,常见事件,JavaScript,的事件处理,2.,事件处理程序语法,将事件处理程序直接嵌入,HTML,标记符中,例如：,直接写在对象后面,document.onLoad,= alert(,这是事件处理程序,);,JavaScript,的事件处理,3,.,应用举例,例,1,：,事件示意,JavaScript,的事件处理,3,.,应用举例,例,2:,请输入基本资料：,姓名：,JavaScript,内置对象,JavaScript,提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。本节主要介绍,JavaScript,提供的,Array,（数组）、,string,（字符串）、,math,（数值计算）和,Date,（日期）内置对象。,JavaScript,内置对象,1.,数组,(Array),对象,格式：,对象名,= new Array(,元素个数,),或 对象名,= new Array(,值,1,值,2,),例如：,fruit=new Array(2),声明了有,2,个元素的数组,fruit=new Array(“,苹果”,”,橘子”,),声明了有,2,个 数组元素的数组，并赋值。,属性：,index,：数组元素的索引值。,length,：数组长度,(,数组元素个数,),。,方法：,join(),：将数组内的所有值组合成一个字符串，并用特定符号分开。,toString,(),：以字符串来表示数组和数组值。,reverse(),：将数组内元素的索引次序翻转过来,JavaScript,内置对象,2.,字符串,(String),对象,格式：,字符串变量名,= “,字符串常数”,例如：,var,str1=”JavaScript” /,定义字符串变量,属性：,length,：字符串长度,方法：,包括字符串显示和运算两类方法,JavaScript,内置对象,anchor,、,link,创建书签链接，相当于,， 格式为,String.anchor(),创建超链接，相当于,，,格式为,String.link(URL),big,、,small,、,italics,、,bold,、,blink,、,sup,、,sub,、,fontsize,、,fontcolor,创建字符显示格式，相当于,、,等,HTML,标记。,toLowerCase,、,toUpperCase,字符串大小写转换,indexOf,、,lastindexOf,返回指定子字符串在字符串中第一次出现的左、右索引位置,substring(start,end),返回从,start,开始到,end,的子字符（不包括,end,位置的字符）,charAt,返回某字符串中指定的子字符串,字符串,(String),对象的常用方法,字符串大小写转换 示例,JavaScript,内置对象,3.,数学,(Math),对象,常用属性：,E,：欧拉常量,自然对数的底,(,约等于,2.718),LN2,：,2,的自然对数,(,约等于,0.693),LN10,：,10,的自然对数,(,约等于,2.302),LOG2E,：以,2,为底的,e,的对数,(,约等于,1.442),LOG10E,：以,10,为底的,e,的对数,(,约等于,o.434),PI,：,的值,(,约等于,3.14159),SQRT1_2,：,0.5,的平方根,(,约等于,o.707),SQRT2,：,2,的平方根,(,约等于,1.414),JavaScript,内置对象,3.,数学,(Math),对象,方法：,abs(),返回某数的绝对值,acos,(),返回某数的反余弦值,(,以弧度为单位,),asin,(),返回某数的反正弦值,(,以弧度为单位,),atan,(),返回某数的反正切值,(,以弧度为单位,),ceil(),返回大于或等于指定数的最小整数,floor(),与,ceil,相反,max(),返回两数间的较大值,min(),返回两数问的较小值,pow,(),返回,m,的,n,次方,(,其中,m,为底,n,为指数,),random(),返回,0,和,1,之间的一个伪随机数,round(),返回某数四舍五入之后的整数,JavaScript,内置对象,4.,日期时间,(Date),对象,格式：,对象名,= new Date ( ,日期参数, ),举例：,today = new Date () /,以当日时间为对象初值。,today = new Date (“October 1,2002 12:00:00”) /,以英文表示月份，其余以数值表示，即,【,月日,年时,:,分,:,秒,】,。,today = new Date (“2002,，,08,，,07,，,0,，,0,，,0),一律以数字表示，即,【,年,月,日,时,分,秒,】,。,JavaScript,内置对象,4.,日期时间,(Date),对象,方法,:,getYear,(),返回年份值,getMonth,(),返回月份值,getDate,(),并返回日期,getDay,(),返回星期几,getHours,(),返回小时数,getMinutes,(),返回分钟数,getSeconds,(),返回秒数,getTime,(),返回完整的时间,显示当天时间 示例,JavaScript,内置对象,4.,日期时间,(Date),对象,方法,:,setDate,(),改变,Date,对象的日期,setHours,(),改变小时数,setMinutes,(),改变分钟数,setMonth,(),改变月份,setSeconds,(),改变秒数,setTime,(),改变完整的时间,setYear,(),改变年份,JavaScript,内置对象,5.,用户自定义对象,在实际应用应用中，,JavaScript,提供的内置对象往往不能满足用户的需求，因此，常常需要建立用户自定义对象。对象,(Object),是一组经过组织的数据，在,JavaScript,中的每一个对象都有两个相关的成员，即属性,(Property),和方法,(Method),。建立自定义对象就是为对象定义属性和方法，其步骤是：,1,）写一个构造函数来定义对象类,为对象类定义属性,为对象类定义方法,先将方法的名称放到对象的构造函数中,写一个函数来描述该对象方法的内容,2,）利用,new,创建对象实例（,Object Instance,）,JavaScript,对象及其层次关系,Window,Frame,Document,Location,History,Cookie,Anchor,Applet,Area,Form,Image,Link,Layer,CheckBox,Radio,Submit,Hidden,Passward,FileUpload,Text,Textarea,Select,Reset,Button,Option,1.,功能：,顶层对象,用来表示浏览器所打开的窗口。,2.,格式,指定窗口： 窗口名,.,属性,窗口名,.,方法（参数群）,打开当前窗口的窗口：,opener.,属性,opener.,方法（参数群）,框架中的顶级窗口：,top.,属性,top.,方法（参数群）,当前活动窗口：,self.,属性,self.,方法（参数群）,例如：,win1.document.title=“,广告窗口”,self.close() opener.document.forms0.user.value=“,张永”,窗口对象,(WINDOW),3.,属性,Name,窗口的名字。,closed,判断窗口是否已经被关闭，返回布尔值。,document,包含当前文档的信息，,(,该属性本身也是一个对象,),frames,窗口的框架对象数组,以数组索引值表示，,(,该属性本身也是一个对象,),。,history,当前窗口最近浏览过的网页,(,该属性本身也是一个对象,),。,location,窗口所显示文档的完整,URL(,该属性本身也是一个对象,),。,length,窗口内的框架个数。,opener,代表使用,open,打开当前窗口的脚本所在的窗口。,self,代表当前窗口。,top,代表当前框架的最顶层窗口。,窗口对象,(WINDOW),3.,属性,defaultStatus,缺省的状态栏信息。,status,状态栏中的信息。,scrollbars,浏览器的滚动条（包括水平和垂直滚动条）。,toolbar,浏览器的工具栏。,menubar,浏览器的菜单栏。,locationbar,浏览器的地址栏。,innerHeight,窗口内容区的高度（以像素表示）。,innerWidth,窗口内容区的宽度（以像素表示）。,outerHeight,窗口边界的高度（以像素表示）。,outerWidth,窗口边界的宽度（以像素表示）。,pageXOffset,网页,x-position,的位置（以像素表示）。,pageYOffset,网页,y-position,的位置（以像素表示）。,窗口对象,(WINDOW),4.,方法,open(URL,，窗口名称，,，窗口规格,),打开一个新窗口。,close(),关闭窗口。,MoveBy,(,水平点数，垂直点数,),MoveTo(x,，,y),将窗口移动至（,x,y,）坐标处，参数取绝对值。,ResizeBy,(,水平点数，垂直点数,),调整窗口大小（往右,/,往下），参数取相对值。,ResizeTo,(,宽度，高度,),setTimeout,(,表达式，毫秒数,),等待一段指定的毫秒数时间,然后运行指令。,clearTimeout,(,定时器对象,),清除,setTimeout,定义的计时程序。,窗口对象,(WINDOW),4.,方法,setInterval,(,表达式，毫秒数,),设置一个定时程序。,clearInterval,(,定时器对象,),清除,setInterval,定义的计时器,focus(),将焦点移到此窗口。,blur(),把焦点从指定窗口移开。,home(),进入客户端在浏览器上设置的主页。,stop(),停止加载网页内容。,back(),返回历史记录的上一个网页。,forward(),加载历史记录的下一个网页。,alert(,字符串,),传送警告信息。,confirm(,字符串,),打开一个,Confirm,消息框,用户可以选择,OK,或,Cancel,，如果用户单击,OK,该方法返回,true,，单击,Cancel,返回,false,。,prompt(“,提示字符串”，默认值,),打开一个,Prompt,对话框,用户可向该框键入文本,并把键入的文本返回到脚本。,窗口对象,(WINDOW),5.,事件,onBlur,onDragDrop,onError,onFocus,onLoad,onUnload,onMove,onResize,窗口对象,(WINDOW),单击“来者何人”，打开一200*100的窗口。,打开网页时，自动打开一300*100的窗口。,作 业,每一个框架对象相当于窗口,(WINDOW),对象，因此框架对象可以使用窗口对象的所有属性和方法。,框架对象,(FRAME),downFrame,upFrame,leftFrame,top,top,leftFrame,upFrame,downFrame,1.,框架组的结构,2.,框架组的层次,3.,框架的引用,top.leftFrame,top.,upFrame,top.,downFrame,或,top.frames0,top.frames1,框架对象,(FRAME),文件对象,(Document),代表当前的,HTML,对象，是由,标记组构成的，,JavaScript,自动为每一个,HTML,文件建立一个,document,对象，用来显示,HTML,文件。,文档对象,(DOCUMENT),1.,语法,document.,属性,document.,方法,2.,属性,link,文档中的一个,标记,(,该属性本身也是一个对象,),。,links,文件中的所有链接，以数组索引值表示。,linkColor,文档的链接的颜色,即,标记中的,LINK,属性。,alinkColor,活动链接的颜色,(ALINK),。,vlinkColor,指向已点击过的超链接文本颜色,即,标记的,VLINK,特性,forms,文件中的所有表单，以数组索引值表示。,文档对象,(DOCUMENT),2.,属性,images,文档中所有,image,，以数组索引值表示。,anchors,文档中所有锚点，以数组索引值表示。,bgColor,文档的背景颜色,(BGCOLOR),。,fgColor,文档中文本颜色,(,中的,TEXT,特性,),cookie,存储于,cookie.txt,文件内的一段信息,它是该文档对象的一个属性,URL,表示该文件的网址。,title,文档的标题,(TITLE),。,lastModified,文档最后的修改日期。,文档对象,(DOCUMENT),3.,方法,write,（字符串）,将字符串或数值写到文件中。,getSelection,(),取得当前选取的字符串。,4.,事件,onClick,、,onDblClick,、,onKeyDown,、,onKeyPress,、,onKeyUp,、,onMouseOver,、,onMouseUp,文档对象,(DOCUMENT),表单对象,(Form),提供一个让客户端输入文字或进行选择的功能，例如：单选按钮、复选框、选择列表等。由,标记组构成，,JavaScript,自动建立一个表单对象，并将用户端的信息送至服务器进行处理。表单对象是文件对象的子对象，同时，它也包含许多子对象。,表单对象,(FORM),1.,表单对象的使用格式,document.forms,索引值,.,属性,document.forms,索引值,.,方法（参数群）,或,document.,表单名称,.,属性,document.,表单名称,.,方法（参数群）,2.,常用属性,Name,：,表单名，相当于,标记的,name,属性,Action,：,相当于,标记的,ACTION,属性。,Method,：,输入窗体的数据传送到服务器上的方式,即,(FORM),标记中的,METHOD,属性。,Elements,：,表单中的所有控件，以数组索引值表示,Length,：,表单中的控件的个数。,表单对象,(FORM),2.,常用属性,Checkbox,：,复选框，,(,该属性本身也是一个对象,),。,Hidden,：,隐藏对象。,Button,：,按钮，,(,该属性本身也是一个对象,),。,Radio,：,单选按钮，,(,该属性本身也是一个对象,),。,Reset,：,复位按钮，,(,该属性自身也是一个对象,),。,Submit,：,提交按钮，,(,该属性本身也是一个对象,),。,Text,：,单行文本，,(,该属性本身也是一个对象,),。,Textarea,:,多行文本，,(,该属性本身也是一个对象,),。,Select:,选择框，,(,该属性本身也是一个对象,),。,表单对象,(FORM),3.,常用方法,Submit(),提交表单,(,与,Submit,按钮的作用相同,),。,reset(),重写表单,(,与使用,reset,按钮的作用相同,),。,表单对象,(FORM),