javascript技术详解.ppt

1、目录,JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象,2,主题内容,JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象,3,JavaScript概述,JavaScript是一种网页编程技术，大部分使用者将它用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法 JavaScript是一种使用简单，功能强大的编程语言,4,JavaScript概述特点,简单易用 简洁易用，与Ja

2、va有类似的语法 可以使用任何文本编辑工具编写 只需要浏览器就可以执行程序 解释执行 事先不编译 逐行执行 无需进行严格的变量声明 基于对象 内置大量现成对象，编写少量程序可以完成目标,5,JavaScript概述使用范围,适合做哪些事情 客户端数据计算 客户端表单合法性验证 浏览器对象的调用 浏览器事件的触发 网页特殊显示效果制作 不适合做哪些事情 大型应用程序 图像、多媒体处理 网络实时通讯应用,6,JavaScript与Java的区别,JavaScript与Java运行方式不一样 JavaScript是解释执行 Java是编译执行 JavaScript不是Java的简化版本 逻辑运算符、

3、语句结构类似 变量申明、对象调用等不同 JavaScript和Java功能实现不一样 JavaScript通过浏览器实现程序功能 Java通过Java虚拟机实现程序功能,7,主题内容,JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象,8,JavaScript基础语法大小写敏感性,在HTML中大小写是不敏感的，但是在JavaScript程序中大小写是敏感的 HTML都是大小写不敏感的 标准的JavaScript语法定义中是区分大小写, function myclick() HelloBtn.value=pause;

4、,大小写须一致,9,JavaScript基础语法常量与标识符,常量 直接在程序中出现的数据值 标识符 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成 常用于表示函数、变量等的名称 例如：_abc,$abc,abc,abc123是标识符，而1abc不是 JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符,10,JavaScript基础语法常量与标识符,ECMA v3标准保留的JavaScript的关键字,11,数据类型分类,JavaScript数据类型,组合类型,Number：数字 String：字符串 Boolean：布尔,Null：空 Undefin

5、ed：未定义,Array：数组 Object：对象,基本类型,特殊类型,12,String数据类型,简介 是由Unicode字符、数字、标点符号组成的序列 字符串常量首尾由单引号或双引号括起 JavaScript中没有字符类型 常用特殊字符在字符串中的表达 字符串中部分特殊字符必须加上右划线 常用的转义字符,13,String数据类型,String数据类型的使用 特殊字符的使用方法和效果 Unicode的插入方法,/测试特殊字符的书写 var aa=u4f60u597dn欢迎来到JavaScript世界 ; alert(aa);,你,好,换行,14,Boolean数据类型,简介 Boolean

6、类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0 布尔值也可以看作on/off、yes/no、1/0对应true/false Boolean值主要用于JavaScript的控制语句，例如：,if (x=1) y=y+1; else y=y-1; ,15,Null、Undefined,简介 Null在程序中代表变量没有值或者不是一个对象 Undefined代表变量的值尚未指定或者对象属性根本不存在,16,数据类型转换,JavaScript属于松散类型的程序语言 变量在声明的时候并不需要指定数据类型 变量只有在赋值的时候才会确定数据类型 表达式中包含不同类

7、型数据则在计算过程中会强制进行类别转换,数字 + 字符串：数字转换为字符串 数字 + 布尔值：true转换为1，false转换为0 字符串 + 布尔值：布尔值转换为字符串true或false,17,数据类型转换,强制类型转换函数 函数parseInt：强制转换成整数 例如parseInt(6.12)=6 函数parseFloat： 强制转换成浮点数 例如parseFloat(6.12)=6.12 函数eval：将字符串强制转换为表达式并返回结果 例如eval(1+1)=2,eval(12)=true,18,数据类型转换,类型查询函数 函数typeof ：查询数值当前类型 (string / n

8、umber / boolean / object ) 例如typeof(test+3)=string,typeof(null)=object,19,算术运算符,加()、 减()、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样 例如：9/2=4.5，4*5=20，9%2=1 -除了可以表示减号还可以表示负号 例如：x=-y +除了可以表示加法运算还可以用于字符串的连接 例如：abc+def=abcdef,20,算术运算符,递增() 、递减() 假如x=2，那么x+表达式执行后的值为3，x-表达式执行后的值为1 i+相当于i=i+1，i-相当于i=i-1 递增和

9、递减可以放在变量前也可以放在变量后,21,逻辑运算符,等于 ( = ) 、不等于( != ) 、 大于( ) 、 小于( =) 、小于等于(=) 与 ( . else 语句; . 功能说明 如果表达式的值为true则执行语句1，否则执行语句2,表达式,语句1,true,false,语句2,27,if选择控制语句,if语句嵌套格式 if (表达式1) 语句1; else if (表达式2) 语句2; else if (表达式3) 语句3; else 语句4; 功能说明 执行顺序参见右图,表达式1,表达式2,表达式3,语句1,语句2,语句3,语句4,true,true,true,false,fal

10、se,false,28,switch选择控制语句,switch基本格式 switch (表达式) case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4; 功能说明 详细的计算过程参考右图,case 值1,case 值2,语句1,语句2,true,true,false,表达式,case 值2,语句3,true,false,语句4,false,29,switch选择控制语句,程序范例 对变量x的值进行判断，采用switch转换成相应的星期名称,switch(x) case 1:y=星期一;break; case 2

11、:y=星期二;break; case 3:y=星期三;break; case 4:y=星期四;break; case 5:y=星期五;break; case 6:y=星期六;break; case 7:y=星期日;break; default: y=未定义; ,swith比else if结构更加简洁清晰,30,for循环控制语句,for循环基本格式 for (初始化;条件;增量) 语句1; . 功能说明 实现条件循环，当条件成立时，执行语句1，否则跳出循环体,条件,语句1,false,true,初始化,增量,31,for循环控制语句,程序范例,for (var i=1;ihello ); do

12、cument.write(); /循环输出H1到H7的字体大小,32,while循环控制语句,while循环基本格式 while (条件) 语句1； . 功能说明 运行功能和for类似，当条件成立循环执行语句花括号内的语句，否则跳出循环,条件,语句1,false,true,初始化,33,while循环控制语句,程序范例,var i=1; while (ihello ); document.write(); i+; /循环输出H1到H7的字体大小,采用while和for的输出效果一样,34,变量的声明与使用,变量申明语句 var a; var x,y; 变量赋值语句 a=1; x=hello,h

13、ow are you!; y=x; 变量的调用 alert(a); document.write(Tom,+x); ,允许一次定义多个变量,不需要指定变量类型,赋值为数值,赋值为字符串,赋值为另一个变量,35,函数的声明与使用,函数的定义 function 函数名 (参数)函数体; return 返回值; 功能说明 可以使用变量、常量或表达式作为函数调用的参数 函数由关键字function定义 函数名的定义规则与标识符一致，大小写是敏感的 返回值必须使用return,36,函数的声明与使用,使用范例, /* Sayhello是定义的函数名，前面必须加上function和空格*/ functio

14、n SayHello() var hellostr; var myname=prompt(请问您贵姓？,陈); hellostr=您好，+myname+先生，欢迎进入探索之旅！; alert(hellostr); document.write(hellostr); /这里是对前面定义的函数进行调用 SayHello(); ,在调用函数的时候要注意函数的大小写，如果写成sayhello或sayHello都会出错,37,对象,对象的概念与分类： 对象由属性和方法封装而成 JavaScript是一种基于对象语言，对象是JavaScript中最重要的元素 JavaScript包含四种对象 内置对象 自

15、定义对象 浏览器对象 ActiveX对象,38,对象,11种内置对象 包括 Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object 简介 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象 也可以用创建对象的方法定义变量 String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,39,主题内容,JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScrip

16、t常用DHTML对象,40,内置对象的分类.,11种内置对象 包括 Array, Boolean, Date, Math, Number , String Error, Function, Global , Object, RegExp 简介 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象 可以用创建对象的方法定义变量 String、Math、Array、Date是JavaScript中常用的对象,41,.内置对象的分类,42,创建String对象,自动创建字符串对象 手工创建字符串对象,var str1=hello world; alert(str

17、1.length); alert(str1.substr(1,5);,var str1= new String(hello word); alert(str1.length); alert(str1.substr(1,3);,调用字符串的对象属性或方法时自动创建对象，用完就丢弃,采用new创建字符串对象str1，全局有效,43,String对象的属性,获取字符串长度 length,44,String对象的方法,String对象的方法分类,String对象方法,格式编排方法,大小写转换,获取指定字符,查询字符串,子字符串处理,截取,替换,分割,连接,45,String对象的方法(2) ,46,S

18、tring对象的方法(2) - 大小写转换.,书写格式 x.toLowerCase() x.toUpperCase() 使用注解 x代表字符串对象 返回转换后的字符串,var str1=AbcdEfgh; var str2=str1.toLowerCase(); var str3=str1.toUpperCase(); alert(str2); /结果为abcdefgh alert(str3); /结果为ABCDEFGH,47,String对象的方法(2) - 获取指定字符.,书写格式 x.charAt(index) x.charCodeAt(index) 使用注解 x代表字符串对象 inde

19、x代表字符位置 index从0开始编号 charAt返回index位置的字符 charCodeAt返回index位置的Unicode编码,var str1=JavaScript网页教程; var str2=str1.charAt(12); var str3=str1.charCodeAt(12); alert(str2); /结果为教 alert(str3); /结果为25945,48,. String对象的方法(2) - 查询字符串.,书写格式 x.match(regexp) x.search(regexp) 使用注解 x代表字符串对象 regexp代表正则表达式或字符串 match返回匹配

20、字符串的数组，如果没有匹配则返回null search返回匹配字符串的首字符位置索引,var str1=JavaScript网页教程; var str2=str1.match(Script); var str3=str1.search(Script); alert(str20); /结果为Script alert(str3); /结果为4,49,String对象的方法(3),50,String对象的方法(3) - 获取子字符串.,书写格式 x.substr(start, length) x.substring(start, end) 使用注解 x代表字符串对象 start表示开始位置 leng

21、th表示截取长度 end是结束位置加1 第一个字符位置为0,var str1=abcdefgh; var str2=str1.substr(2,4); var str3=str1.substring(2,4); alert(str2); /结果为cdefg alert(str3); /结果为cd,51,String对象的方法(3) - 替换子字符串.,书写格式 x.replace(findstr,tostr) 使用注解 x代表字符串对象 findstr要找的子字符串 tostr替换为的字符串 返回替换后的字符串,var str1=abcdefgh; var str2=str1.replace(

22、cd,aaa); alert(str2); /结果为abaaaefgh,52,String对象的方法(3) - 分割字符串.,书写格式 x.split(bystr) 使用注解 x代表字符串对象 bystr作为分割字符串 返回分割后的字符串数组,var str1=一,二,三,四,五,六,日; var strArray=str1.split(,); alert(strArray1); /结果为二,53,String对象的方法(3) - 连接字符串.,书写格式 y=x.concat(addstr) 使用注解 x代表字符串对象 addstr为添加字符串 返回x+addstr字符串,var str1=a

23、bcd; var str2=str1.concat(efgh); alert(str2); /结果为abcdefgh,54,创建Array对象.,创建数组对象 初始化数组对象,var cnweek=new Array(7); var books=new Array();,创建数组时允许指定元素个数也可以不指定元素个数,也可以直接在建立对象时初始化数组元素，元素类型允许不同,var cnweek=new Array(7); cnweek0=星期日; cnweek1=星期一; . cnweek6=星期六;,var test=new Array(100,a,true);,55,Array对象的属性,

24、获取数组元素的个数 length,56,获取数组元素的个数,书写格式 x.length 使用注解 x代表数组对象 length必须小写 中间用点操作符调用 返回大于或等于0整数,var cnweek=new Array(7); cnweek0=星期日; cnweek1=星期一; cnweek2=星期二; cnweek3=星期三; cnweek4=星期四; cnweek5=星期五; cnweek6=星期六; for (var i=0;icnweek.length;i+) document.write(cnweeki+ | ); ,57,Array对象的方法,58,连接数组.,书写格式 x.joi

25、n(bystr) x.toString() 使用注解 x代表数组对象 bystr作为连接数组中元素的字符串 返回连接后的字符串 与字符串的split功能刚好相反,var arr1=1, 2, 3,4,5,6,7; var str1=arr1.join(-); alert(str1); /结果为1-2-3-4-5-6-7,59,.连接数组.,书写格式 x.concat(value,.) 使用注解 x代表数组对象 value作为数组元素连接到数组的末尾 返回连接后的数组 concat方法并不改变x自身的值,var a = 1,2,3; var b=a.concat(4, 5) ; alert(a.

26、toString(); /返回结果为1,2,3 alert(b.toString(); /返回结果为1,2,3,4,5,60,数组排序.,书写格式 x.reverse() x.sort() 使用注解 x代表数组对象 返回排序后的数组 排序后x会发生改变,var arr1=32, 12, 111, 444; arr1.reverse(); /颠倒数组元素 alert(arr1.toString(); /结果为444,111,12,32 arr1.sort();/排序数组元素 alert(arr1.toString(); /结果为111,12,32,444,61,Array对象的方法,62,获取子

27、数组.,书写格式 x.slice(start, end) 使用注解 x代表数组对象 start表示开始位置索引 end是结束位置下一数组元素索引编号 第一个数组元素索引为0 start、end可为负数，-1代表最后一个数组元素 end省略则相当于从start位置截取以后所有数组元素,63,var arr1=a,b,c,d,e,f,g,h; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString(); /结果为c,d alert(arr3.toString()

28、; /结果为e,f,g,h alert(arr4.toString(); /结果为c,d,e,f,g,.获取子数组.,程序图解,slice(2,4),slice(4),slice(2,-1),64,.获取子数组.,书写格式 x. splice(start, deleteCount, value, .) 使用注解 x代表数组对象 splice的主要用途是对数组指定位置进行删除和插入 start表示开始位置索引 deleteCount删除数组元素的个数 value表示在删除位置插入的数组元素 value参数可以省略,65,进出栈操作.,书写格式 x.push(value, .) x.pop() 使

29、用注解 x代表数组对象 value可以为字符串、数字、数组等任何值 push是将value值添加到数组x的结尾 pop是将数组x的最后一个元素删除,66,var arr1=1,2,3; arr1.push(4,5); alert(arr1); /结果为1,2,3,4,5 arr1.push(6,7); alert(arr1) /结果为1,2,3,4,5,6,7 arr1.pop(); alert(arr1); /结果为1,2,3,4,5,.进出栈操作.,程序图解,push(4,5),push(6,7),pop(),67,Math对象的属性.,Math对象的属性都是数学常数 Math.E （自然

30、数） Math.LN2 （ln2） Math.LN10 （ln10） Math.LOG2E （log 2e） Math.LOG10E （log e） Math.PI （圆周率） Math.SQRT1_2 （根号1/2） Math.SQRT2 （根号2）,68,Math对象的方法.,69,.Math对象的方法.,70,. Math对象的方法.,程序示范,function writeln(mystr) document.write(mystr+); var x=0.5; var y=0.8; writeln(sin(+x+)=+Math.sin(x); writeln(cos(+x+)=+ Mat

31、h.cos(x); writeln(tan(+x+)=+ Math.tan(x); writeln(asin(+x+)=+ Math.asin(x); writeln(acos(+x+)=+ Math.acos(x); writeln(atan(+x+)=+ Math.atan(x); writeln(atan2(+y+,+x+)=+ Math.atan2(y,x);,71,.Math对象的方法.,72,.Math对象的方法.,73,. Math对象的方法,程序示范,function writeln(mystr) document.write(mystr+); var x=-1.1; var

32、y=2.6; writeln(abs(+x+)=+Math.abs(x); writeln(max(+x+,+y+)=+ Math.max(x,y); writeln(min(+x+,+y+)=+ Math.min(x,y); writeln(random()=+ Math.random(); writeln(round(+x+)=+ Math.round(x); writeln(floor(+x+)=+ Math.floor(x); writeln(ceil(+x+)=+ Math.ceil(x);,74,创建Date对象.,创建日期对象,/方法1：不指定参数 var nowd1=new D

33、ate(); alert(nowd1.toLocaleString( ); /方法2：参数为日期字符串 var nowd2=new Date(2004/3/20 11:12); alert(nowd2.toLocaleString( ); var nowd3=new Date(04/03/20 11:12); alert(nowd3.toLocaleString( );,75,Date对象的方法.,获取日期和时间 getDate() 获取日 getDay () 获取星期 getMonth () 获取月 getFullYear () 获取完整年份 getYear () 获取年 getHours

34、() 获取小时 getMinutes () 获取分钟 getSeconds () 获取秒 getMilliseconds () 获取毫秒 getTime () 返回累计毫秒数(从1970/1/1午夜),76,.Date对象的方法.,程序示范,function writeln(mystr) document.write(mystr+); var x=new Date(1997,7,1,12,23,54,230) /1997年8月1日12点23分54秒230毫秒 writeln(x.getFullYear ();/返回年1997 writeln(x.getYear();/返回年97 writeln

35、(x.getMonth();/返回月7 writeln(x.getDate();/返回日1 writeln(x.getDay();/返回星期5 writeln(x.getHours();/返回小时12 writeln(x.getMinutes();/返回分钟23 writeln(x.getSeconds();/返回秒54 writeln(x. getMilliseconds();/返回毫秒230 writeln(x.getTime(); /返回累计870409434230,77,.Date对象的方法.,设置日期和时间 setDate(day_of_month)设置日 setMonth (mon

36、th)设置月 setFullYear (year)设置年 setHours (hour)设置小时 setMinutes (minute)设置分钟 setSeconds (second)设置秒 setMillliseconds (ms)设置毫秒(0-999) setTime (allms)设置累计毫秒(从1970/1/1午夜),78,.Date对象的方法.,程序示范,var x=new Date(); x.setFullYear (1997);/设置年1997 x.setMonth(7);/设置月7 x.setDate(1);/设置日1 x.setHours(5);/设置小时5 x.setMin

37、utes(12);/设置分钟12 x.setSeconds(54);/设置秒54 x.setMilliseconds(230);/设置毫秒230 document.write(x.toLocaleString( )+); /返回1997年8月1日5点12分54秒 x.setTime(870409430000); /设置累计毫秒数 document.write(x.toLocaleString( )+); /返回1997年8月1日12点23分50秒,79,.Date对象的方法.,日期和时间的转换 getTimezoneOffset() 返回本地时间与GMT的时间差，以分钟为单位 toUTCStr

38、ing() 返回国际标准时间字符串 toLocalString() 返回本地格式时间字符串 Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间) Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间),80,.Date对象的方法,程序示范,function writeln(mystr) document.write(mystr+); var x=new Date(); writeln(x.getTimezonOffset()=); writeln(x. getTimezoneOffset();/时间差 writeln(x. toUTCString(

39、)=); writeln(x. toUTCString();/国际时间 writeln(x.toLocaleString()=); writeln(x.toLocaleString();/本地时间 writeln(Date.parse(x)=); writeln(Date.parse(x);/本地时间毫秒数 writeln(Date.UTC(x)=); writeln(Date.UTC(x);/UTC毫秒数,81,主题内容,JavaScript概述 JavaScript基础语法 JavaScript常用内置对象 JavaScript常用DHTML对象,82,DHTML介绍.,DHTML的定义

40、使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTML DHTML是一种浏览器端的动态网页技术,83,. DHTML介绍,DHTML的功能 动态改变字体大小和字体颜色 动态设定文档元素的位置、内容，甚至隐藏和显示元素 可以通过事件响应机制制作动态折叠的树形结构和菜单 可以通过定时器制作时钟、日历 可以弹出对话框与用户进行交互 可以通过表单提交用户填写的信息 通过动态样式表可以设定更多的显示效果 .,84,DHTML对象模型.,DHTML对象模型 将HTML标记、属性和CSS样式都对象化 可以动态存取HTML文档中的所有元素 可以使用属性name或id来存取

41、或标记对象 改变元素内容或样式后浏览器中显示效果即时更新 DHTML对象模型包括浏览器对象模型和Document对象模型,85,.DHTML对象模型.,Window,Frames,History,Navigator,Document,Location,Event,Form,Table,Anchor,Image,Iframe,.,86,Window对象.,常用属性,87,.Window对象.,常用属性,88,.Window对象.,常用方法,89,.Window对象,主要功能 窗口的打开和关闭 对话框 状态栏 定时器 内容滚动 调整窗口大小和位置 Screen对象 History对象 Naviga

42、tor对象 Location对象,90,窗口的打开和关闭.,91,.窗口的打开和关闭.,config 参数具体元素 menubar 菜单条 toolbar 工具条 location 地址栏 directories 链接 status 状态栏 scrollbars 滚动条 resizeable 可调整大小 width 窗口宽，以像素为单位 height 窗口高，以像素为单位,参数值为yes或no,参数值为数字 值,92,. 窗口的打开和关闭,程序示范：打开google搜索窗口,var config= menubar=yes,toolbar=no,location=no, ; config +=

43、directories=no,status=yes, ; config += scrollbars=yes,resizable=yes,; config += width=500,height=300; var openurl= ; window.open(openurl,popwin,config); /仅仅打开窗口,var mywin=window.open(openurl,popwin,config); mywin.close(); /关闭打开的窗口,93,对话框,分类,对话框,简单对话框,窗口对话框,alert提示框,confirm确认框,prompt输入框,showModalDialog(IE4.0),showModelessDialog(IE5.0),94,简单对话框.,95,.简单对话框.,显示效果比较：,alert(您好！); confirm(您好吗？); prompt(您贵姓？,陈);,96,.简单对话框,返回值比较：,var firstname=prompt(您贵姓？,陈); if (confirm(您确定？)=true) alert(firstname+先生，您好！); ,不返回值,97,窗口对话框.,参数说明 url 打开链接 arguments 传入参数