《javascript教程.ppt》由会员分享，可在线阅读，更多相关《javascript教程.ppt（135页珍藏版）》请在三一办公上搜索。
1、第三讲：JavaScript,Javascript的作用,实现网页的动态效果例如：下拉菜单、用户验证、滚动文字与图片，与php搭配可以实现一些高级的应用，比如去哪儿网的地名拼音查询到地名全名,Javascript与java,是两个公司开发的不同的产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发，服务器端语言，与数据库打交道；而JavaScript是Netscape公司的产品，javaScript是一种浏览器脚本语言，由客户端浏览器解析执行。,课程结构,JavaScript的基本语法运算符程序的流程控制函数对象JavaScript的内部对象专门
2、用于对象的语句数组,如何将javascript嵌入网页,方法一：嵌入html页面可以放在之间也可以放在内部尽管也可以放在之前或之后，但web标准并不提倡这样做IE与FF默认脚本语言就是javascript，所以type经常省略,第一个javascript程序,范例t1.html动态改变网页背景,如何将javascript嵌入网页,方法二：链接外部的js文件使用外部文件优点：1、最大限度的实现重用，方便维护；2、浏览器会缓存，如果文件大，节省下载时间。,如何将javascript嵌入网页,javascript,Javascript错误调试,错误调试：FF安装firebug插件；IE点击黄色小叹号
3、标；显然firebug能够更详细的阐述错误信息,JavaScript的基本语法,JavaScript中的标识符标识符是指JavaScript中定义的符号，例如，变量名，函数名，数组名等。标识符可以由任意顺序的大小写字母、数字、下划线（_）和美元符号（$）组成，但标识符不能以数字开头，不能是JavaScript中的保留关键字。合法的标识符举例：indentifler、username、user_name、_userName、$username非法的标识符举例：int、98.3、Hello World,JavaScript的基本语法,JavaScript严格区分大小写computer和Comput
4、er是两个完全不同的符号JavaScript程序代码的格式每条功能执行语句的最后必须用分号（;）结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。JavaScript程序的注释/*.*/中可以嵌套“/”注释，但不能嵌套“/*.*/”,JavaScript中保留的关键字,abstract,boolean,break,byte,case,catch,char,class,continue,default,if,for,float,finally,final,false,extends,else,double,do,implements,import,instance,int,
5、interface,long,native,new,null,backage,this,synchronized,switch,super,static,short,return,public,protected,private,throw,throws,transient,true,try,void,volatile,while,基本数据类型,1 数值数据（number）a)整数十六进制以0 x或0X开头，例如0 x8a。八进制必须以0开头，例如：0123。十进制的第一位不能是0（数字0除外），例如：123。整型数据范围：-253253，所以，一般不用考虑其范围问题b)小数12.32、192
6、.98、5E7、4e5等。,基本数据类型,2 文本数据（string）“this is JavaScript ppt”、abc、“a”、“”。字符串中的特殊字符，需要以反斜杠（）后跟一个普通字符来表示，例如：r（回车符）、n（换行符）t（制表符）、”、.单引号或双引号需要配对使用，另字符串包含单引号或双引号，需要转义,基本数据类型,布尔值（boolean）true和false.真与假强制数据类型转换：-字符串转换为数字：parseInt(12abc);转换结果为：12；,变量,定义一个变量，系统就会为之分配一块内存，程序可以用变量名来表示这块内存中的数据声明变量要使用var关键字例如：var
7、name=“abc”;声明变量的同时为其赋值例如：name=“zhangsan”;对已赋值的变量赋予一个其他类型的数据例如：name=1243;不事先声明变量而直接使用例如：x=1234;,变量类型,变量类型测试：使用typeof（）;undefined（变量申明却未赋值的数据类型）,运算符,算术运算符赋值运算符比较运算符 逻辑运算符 位运算符,算术运算符,+加法运算符或正值运算符，例如：x+5，6。“+”还能实现多个字符串的相加，也能将字符串与其它的数据类型连成一个新的字符串，条件是该表达式中至少有一个字符串，例如：“x”+123的结果是“x123”.（范例）-减法运算符或负值运算符，例如：
8、7 3,-8.*乘法运算符，例如：3*6./除法运算符，例如，9/4.%求模运算符（也就算术中的求余）5/2.,算术运算符,+将变量值加1后再将结果赋给这个变量。“”有两种用法：+x,x+.前者是变量在参与其它运算之前先将自己加1后再用新的值参与其它的运算，而后者是先用原值参与其它运算后，再将自己加1，例如：b=+a是a先自增，即a的值加1后，才赋值给b;而b=a+是先将a赋值给b后，a再自增。-将变量值减1后再将结果赋给这个变量，与+的用法一样。,赋值运算符,赋值运算符的作用是将一个值赋给一个变量，最常用的赋值运算符是“=”。还可以由“=”赋值运算符和其它一些运算符组合产生一些新的赋值运算符
9、，例如，“+=”,”*=”等。=将一个值或表达式的结果赋给变量例如：x=3;+=例如：x+=3 等价于x=x+3;-=例如：x-=3 等价于x=x 3;*=例如：x*=3 等价于x=x*3;/=例如：x/=3 等价于x=x/3;%=例如：x%=3 等价于x=x%3;,比较运算符,常见的比较运算符号：=!=注意：不要将比较运算符“”误写成“”。,逻辑运算符,&逻辑与，当左右两边操作数都为true时，返回true,否则返回false.|逻辑或，当左右两边操作数都为false时，返回false,否则返回true.!逻辑非，当操作数为true时返回false,否则返回true.,位运算符,任何信息在计
10、算机中都是以二进制的形式保存的，位运算用于对操作数中的每一个二进制位进行运算，包括位逻辑运算符和位移运算符。&两边操作数转换为二进制按位与；|两边操作数转换为二进制按位或；两边操作数转换为二进制按位异或；,程序的流程控制,顺序结构if条件选择语句switch选择语句while循环语句do while语句for循环语句break与continue语句,If条件选择语句,1、if(条件语句)执行语句;多加：if(x=null)或if(typeof(x)=“undefined”)可以简写成if(!x).2、if(条件语句）执行语句块1;else 执行语句2;（范例9：闰年）多加：变量 布尔表达式?语
11、句1：语句2;例如：y=x 0?x:-x;,If条件选择语句,3、if(条件语句1)执行语句1;else if(条件语句2)执行语句2;else if(条件语句n)执行语句n;else 执行语句n+1;（范例10：问好）,If语句的嵌套,if(x10)if(y=1)alert(“x 10,y=1”);else alert(“x 10,y!=1”);（范例11：退休）,Switch选择语句,switch(表达式)case 取值1：语句块1;break;case 取值2：语句块2;break;.case 取值n：语句块n;break;defaule：语句块n+1;break;（范例：星期几）,Va
12、r x=2;Switch(x)case1:alert(“monday”);break;case 2:alert(“Tuesday”);break;case 3:alert(“wendnesday”);break;default:alert(“sorry,I dont know”);,Case 1:Case 2:Case 3:Case 4:Case 5:alert(“working day”);break;Default:alert(“off day”);,While循环语句,while(条件表达式语句)执行语句块;（范例：表格）var x=1;while(x 3)/如果加上分号会怎样呢？ale
13、rt(“x=”+x);x+;,do while 语句,do 执行语句块;while(条件表达式语句）;注意：条件不满足时，do while至少执行一次,for循环语句,for(初始化表达式;循环条件表达式;循环后的操作表达式)执行语句块;var output=“”;for(var x=1;x（范例：for双变量、99乘法表）,break与continue语句,break语句：st:while(true)while(true)break st;,continue语句：var output=“”;for(var x=1;x10;x+)if(x%2=0)continue;output=output+
14、”x=”+x;alert(output);,函数,函数的作用与定义全局变量与局部变量参数个数可变的函数创建动态函数JavaScript中的系统函数,函数的作用,。函数1。函数2。函数1。,主程序,。函数3。,函数1,。,函数2,。,函数3,函数的定义与调用,定义一个函数的格式如下：function 函数名（参数列表）程序代码：return 表达式;对函数进行调用的同种方式：1.函数名（传递给函数的参数1,传递给函数的参数2,）2.变量 函数名（传递给函数的参数1,传递给函数的参数2,）3.对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：alert(“sum=”+square(2
15、,3);,var msg=“全局变量”;function square(x,y)var sum;sum=x*x+y*y;return sum;function show()var msg=“局部变量”;alert(msg);/var sum;alert(“sum”+sum);sum=square(2,3);alert(“sum=”+sum);show();,全局变量与局部变量的比较,var msg=“全局变量”;function show()/var msg;msg=“局部变量”;show();alert(msg);结果是什么？,参数个数可变的函数,function testparams()v
16、ar params=“”;for(var i=0;i在函数内部使用arguments对象来访问调用程序传递的所有参数,创建动态函数,创建动态函数的基本语法格式：var varName=new function(argument1,.,lastArgument);说明：所有的参数都必须是字符串型的，最后参数必须是这个动态函数的功能代码。例子：var square=new Function(“x”,“y”,“var sum;sum=x*x+y*y;return sum;”);alert(square(3,2);？多想一想：动态函数有什么用，在什么情况下用动态函数;,Javascript中的系统函数
17、,参照API,对象,对象与对象实例构造方法与this关键字的作用在函数中修改数值的问题,对象与对象实例,对象中所包含的变量就是对象的属性，对象中所包含的对属性进行操作的函数就是对象的方法，对象的属性和方法都叫对象的成员。对象是对某一类事物的描述，是抽象上的概念;而对象实例是一类事物中的具体个例。能够被用来创建对象实例的函数就叫对象的构造函数，只要定义了一个对象的构造函数就等于定义了一个对象，使用new关键字和对象的构造函数就可以创建对象实例，语法格式如下：var objInstance=new ObjName(传递给该对象的实际参数列表);,function Person()/构造函数var
18、person1=new Person();/对象实例person1.age=18;/属性person1.name=“zxx”;/可以为对象实例无限制的添加新成员/alert(person1.name+”+person1.age);function sayFunc()/用“对象实例名。成员名”的格式访问，/也可以使用（对象实例“成员变量名”）的格式。alert(person1.name+”+person1.age);person1.say=sayFunc;person1.say();,构造方法与this关键字,为一个对象实例新增加的属性和方法，不会增加到同一个对象所产生的其它对象实例上。所有的实
19、例对象在创建后都会自动调用构造函数，在构造函数中增加的属性和方法会被增加到每个对象实例上。对象实例是用new关键字创建的，在构造方法中不要有返回结果的return语句。调用对象的成员方法时，需要使用“对象实例。成员方法”的形式，很显然，用作成员方法的函数被调用时，一定伴随有某个对象实例。This关键字代表某个成员方法执行时，引用该方法的当前对象实例，所以，this关键字一般只在用作对象方法的函数中出现。,function Person(name,age)this.age=age;this.name=name;this.say=sayFunc;function sayFunc()alert(th
20、is.name+”:”+this.age);var person1=new Person(“张三”，18);person1.say();var person2=new Person(“李四”，20);person2.say();,在函数中修改参数值的问题,将基本数据类型的变量作为函数参数传递的情况：function changeValue(x)x=5;var x=3;changeValue(x);alert(x);此外的x值是多少？,在函数中修改参数值的问题,将对象类型变量作为函数参数传递的情况：Function Person(name,age)this.age=age;this.name=n
21、ame;this.say=sayFunc;Function sayFunc()alert(this.name+“:”+this.age);Function change(p1)p1.name=“李四”;Var person1=new Person(“张三”，18);Change(person1);Person1.say();,JavaScript的内部对象,动态对象使用“对象实例名.成员”的格式来访问其属性和方法静态对象直接使用“对象名.成员”的格式来访问其属性和方法。Object对象String对象Math对象Date对象toString方法,Object对象,Object对象提供了一种创建
22、自定义对象的简单方式，不需要程序员再定义构造函数。function getAttributeValue(attr)alert(personattr);var person=new Object();person.name=“zs”;person.age=18;getAttributeValue(“name”);getAttributeValue(“age”);,String对象,length属性anchor、big、bold、fontcolor、link等 方法charAt方法注意：一个字符串的第一个字符的索引 位置 为0，依次类推。charCodeAt方法注意：返回的结果是字符的unicod
23、e编码。indexOf方法lastIndexOf方法match、search方法replace、split方法toLowerCase、toUpperCase方法slice方法说明：str1.slice(0)和str1.slice(0,-1)都 是返回 整个字符串。substr、substring方法注意：substring方法返回的内容不包含结束 位置 的字符。,Math对象,Math对象是一个静态对象，不能使用new关键字创建对象实例，应直接使用“对象名。成员”的格式访问其属性或方法，例如：var num=Math.random();,Math对象的属性,E，代表数学常数e,约等于2.718
24、.LN10，代表10的自然对数，约等于2.302.LN2,代表2的自然对数，约等于0.693.PI，代表数学常数PI的值，等于3.14159.SQRT1-2,代表2的平方根分之一，约等于0.707SQRT2,代表2的平方根，约等于1.414.,Math对象的方法,abs方法，返回数字的绝对值。sin、cos方法，分别返回数字的正弦、余弦值。asin、acos方法，分别返回数字的反正弦、反余弦值。random方法，返回介于0和1之间的伪随机数。,Date对象,构造方法：Date()、Date(dateVal)、Date(year、month,date,hours,minutes,seconds,
25、ms)parse方法，分析一个表示日期时间的字符串，返回它所表示的时间值，该值以自1970年1月1日0点0分0秒算起的毫秒值表示。Parse方法属于一个静态方法。toGMTString方法，返回Date对象实例 所表示 的日期的字符串形式，该字符串使用 用格林尼治标准时间（GMT）格式，例如，“05 Jan 1996 00:00:00 GMT”getYear、getMonth、getDate、getDay方法getHours、getMinutes、getSeconds、getMilliseconds方法getTime方法，返回自1970的1月1日0点0分0秒算起，至Date对象实例代表的时间为
26、止的毫秒数。,var current_time=new Date();var strDate=current_time.getYear()+”年”;strDate+=current_time.getMonth()+”月”;strDate+=current_time.getDate()+“日”;strDate+=current_time.getHours()+“：“;strDate+=current_time.getMinutes()+“：”;strDate+=current_time.getSeconds();alert(strDate);,toString方法,Tostring方法是Java
27、Script中的所有内部对象的一个成员方法，它的主要作用就是将对象中的数据转换成某种格式的字符串来表示，具体的转换方式取决于对象的类型。举例：var x=328;alert(“hes=”+x.toString(16)+”bin=”+x.toString(2);,对象专用语句,1、with语句：with(对象名称)执行语句块2、forin语句：for(变量in对象)执行语句,With举例,var current_time=new Date();with(current_time)var strDate=getYear()+”年”;strDate+=getMonth()+”月”;strDate+=
28、getDate()+“日”;strDate+=getHours()+“：“;strDate+=getMinutes()+“：”;strDate+=getSeconds();alert(strDate);,forin举例,function Person()this.name=“sky”;this.age=19;this.height=172;var p1=new Person();var prop,str=“”;for(prop in p1)str+=prop+“”;alert(str);,数组,数组列表用对象的方式实现数组Array对象,数组列表,数组列表用于表示一组数据的集合，它由一对方括号
29、（）包围，列表中的每个无素用逗号分隔，数组元素可以是任类型的数据（包括其他数组）。例如：var arr=“sky”,123,li,3.5;对于每个数组变量，都有一个length属性，表示该数组中元素的个数。使用“数组变量名索引号”的格式来访问每个数组元素。数组列表中的第一个元素的索引号为0,最后那个元素的索引号为数组的length属性值-1.数组列表的每个元素既可以是有效的JavaScript表达式，也可以为空，空元素的值为undefined.例如：var arr=1,5;数组元素本身又是数组，就就叫数组的数组，例如：“names”,“beansproul”,“pumpkin”,“max”,“
30、ages”,6,5,4使用“数组变量名子数组索引号子数组中的元素索引号”的格式来访问数组的数组中的元素。,var arr=“names”,“beansproul”,“pumpkin”,“max”,“ages”,6,5,4for(var I=0;i,用对象的方式实现数组,function MyArray()this.length=arguments.length;for(var I=0;i,function MyArray(size)this.length=size;for(var j=0;j,Array对象,三种构造方法Array()Array(4)Array(3.4,“abc”,3),数组排
31、序例子,var arr=new Array();arr0=3.4;arr1=“abc”;arr2=3;arr.sort();var x,str=“”;for(x in arr)str+=x+”:”arrx+”n”;alert(str);,JavaScrip语法就到这里吧！,DOM 编程(二),DHTMLwindow对象document对象body对象form对象form表单字段元素对象,DHTML,1.JAVASCRIPT将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象来表示，这些对象及对象之间的层次关系称为DOM（Document Object Model,文档对象模
32、型）。2.css、脚本编程语言和DOM的结合使用，能够使HTML文档与用户具有交互性和动态变换性，这三种技术的单一称谓叫DHTML（Dynamic HTML,动态HTML）.,事件,事件：用户对浏览器所做的特定的动作（操作），是实现交互操作的一种机制。事件处理程序：浏览器响应某个事件，实现用户的交互操作而进行的处理（过程）。事件处理程序的调用：浏览器等待用户的交互操作，并在事件发生时，自动调用事件处理程序（函数），完成事件处理过程。Click/DblClick、KeyDown/KeyPress/KeyUp、Load/Unload、MouseDown/MouseUp/MouseOver/Mous
33、eOut/MouseMove,如何编写事件处理程序,一、在事件源对象所对应的HTML标签上增加一个要处理事件属性，让事件属性值等于处理事件的函数名或程序代码。格式：|”,例1：例2：function show()var str=建议浏览器的分辨率：800 x600;alert(str);,二、直接在JavaScript代码中，设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。格式：对象名.on事件=|例1：document.onload=alert(建议浏览器的分辨率：800 x600);var str=建议浏览器的分辨率：800 x600;document.onload=
34、alert(str);例2：function show()var str=建议浏览器的分辨率：800 x600;alert(str);document.onload=show;,三、在一个专门的标签对中编写某个元素对象的某种事件处理程序代码，并用for属性指定事件源和用event属性指定事件名，这种标签中的脚本程序只在指定事件源的指定事件发生时才被调用执行，这种方式常用于网页文档中的各种插件对象的事件处理程序：Window.event.returnValue=false;,window对象,window对象代表浏览器的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面，如改变状
35、态栏上的显示文字、弹出对话框、移动窗口的位置等。对window对象的属性和方法的引用，可以省略“window.”这个前缀，例如，window.alert(你好)可以直接写成alert(你好)。,window对象方法,alert方法confirm方法prompt方法navigate方法setInterval方法setTimeout方法clearInterval方法clearTimeout方法moveTo方法resizeTo方法open方法showModalDialog方法showModelessDialog方法,test.html网页文件：window.open(information.html
36、,_blank,top=0,left=0,width=200,height=200,toolbar=no);information.html网页文件：window.setTimeout(window.close(),5000);通知5秒钟以后，这个窗口会自动关闭！test.html网页文件：（全屏）window.open(information.html,_blank,top=0,left=0,toolbar=no，fullscreen=yes,titlebar=no);,nformation.html网页文件：(增大)window.setTimeout(window.close(),5000
37、);window.setInterval(grow(),100);function grow()window.resizeBy(5,5);通知5秒钟以后，这个窗口会自动关闭！,window对象属性,-closed属性-opener属性-defaultstatus属性-status属性-screenTop属性-screenLeft属性,window.html 关闭子窗口var child=window.open(information.html,_blank,top=0,left=0,toolbar=no，fullscreen=yes,titlebar=no);function closeChi
38、ld()if(!child.closed)child.close();,(关闭子窗口时)文本在状态栏上显示/setInterval(scroll(),100);var space_num=0;var dir=1;function scroll()var str_space=“;space_num=space_num+1*dir;if(space_num40|space_num,information.htmlwindow.setTimeout(window.close(),5000);window.setInterval(grow(),100);function grow()window.re
39、sizeBy(5,5);function closeit()window.close();opener.start();/or/window.setTimeout(window.closeit(),5000);/通知5秒钟以后，这个窗口会自动关闭！,window对象事件,专用事件：onload事件onunload事件onbeforeunload事件通用事件onclick事件onmousemove事件onmouseover事件onmouseout事件onmousedown事件onmouseup事件onkeydown事件onkeyup事件onkeypress事件,window_event.html
40、 2alert(ok2);1helloalert(ok3);alert(ok1);,window对象对象属性,location对象event对象frames数组对象screen对象clipboardDate对象history对象navigator对象document对象,window对象location对象window.location.href=http:/;等效于window.navigate(http:/2000);/setTimeout(window.location.replace(http:/cn);,2000);window.navigate(http:/);/orwindow.
41、location.href=http:/;,window对象event对象,altKey属性ctrlKey属性shiftKey属性clientX、clientY属性screenX、screenY属性offsetX、offsetY属性x,y属性returnValue属性cancelBubble属性srcElement属性keyCode属性button属性,eventobject.html 按下键盘事件function window_onkeypress()alert(window.event.keyCode);-按esc关闭窗口function window_onkeypress()/alert
42、(window.event.keyCode);if(window.event.keyCode=27)window.close();,其它属性function checkCancel()if(window.event.shiftKey)window.event.cancelBubble=true;function showSrc()if(window.event.srcElement.tagName.toLowerCase()=img)/IMG要大写 alert(window.event.srcElement.src);,Window对象frames数组对象（1),Window对象的frames
43、属性是一个数组，它与window对象的parent、top等对象属性，都是用于对HTML的帧标签(或)进行编程的javaScript对象。,framedomeo.html,Top.html,/item方法,Window对象frames数组对象（2）,Top.html:Bottom.html:Bottom_right.html:top.a.document.write();parent.parent,Top.htmlBottom_right.htmlTop.a.document.write(“”);/parent,Document对象 方法,Write方法writeln方法open方法close
44、方法clear方法getElementById方法getElementsByName()方法getElementsByTagName方法createElement方法createStyleSheet方法,这是最初的内容document.write(这是write方法动态写入的内容);function updatedoc()document.writeln(abc);document.writeln(def);document.close();var owin=window.open(,_blank);owin.document.writeln(xyz);owin.document.close(
45、);owin.document.write(abc);owin.document.write(def);owin.document.close();,这是最初的内容document.write(这是write方法动态写入的内容);function updatedoc()document.writeln(abc);document.writeln(def);document.writeln();document.writeln(function updatedoc();document.writeln();document.writeln(document.writeln(abc););docu
46、ment.writeln(document.writeln(def););document.writeln();document.writeln();document.writeln();/document.close();/*document.writeln(abc);document.writeln(def);document.close();var owin=window.open(,_blank);owin.document.writeln(xyz);owin.document.close();owin.document.write(abc);owin.document.write(d
47、ef);owin.document.close();*/,Document对象属性,与标签相关的属性alinkColor属性linkColor属性vlinkColor属性bgColor属性fgColor属性描述网页文档信息的属性charset属性defaultCharset属性cookie属性,fileCreatedDate属性fileModifiedDate属性fileSize属性lastmodified属性url属性URLUnencoded属性referrer属性a.Html b.html document.referer,function changeDoc()document.bgCo
48、lor=blue;document.fgColor=red;document.alinkColor=yellow;document.vlinkColor=0 x00ff00;document.linkColor=gray;这是普通的文本这是一个超链接,Document对象对象属性,Forms数组Anchors数组/name id jihe a links数组/href jihe aimages数组scripts数组applets数组all数组styleSheets数组Body对象Title对象,function checkall()var owin=window.open(,_blank);o
49、win.document.write(+all数组中一共有+document.all.length+个元素);for(var i=0;i+document.alli.tagName+);owin.document.writeln();owin.document.close();to p1to p2paragraph1paragraph2,function checkall()var owin=window.open(,_blank);owin.document.write(+all数组中一共有+document.all.length+个元素);for(var i=0;i+document.al
50、li.tagName+);owin.document.writeln();var objnames=links,forms,anchors,scripts,images;for(var j=0;j+);eval(owin.document.write(objnamesj+数组中一共有+document.+objnamesj+.length);owin.document.write(个元素);var len=0;eval(len=document.+objnamesj+.length);for(var i=0;i+document.+objnamesj+i.name+);owin.documen
