JavaScript教程及实例讲解

1、JavaScript教程及实例讲解JavaScript教程及实例讲解.JS简介及特点JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准

2、的HTML语言中实现的。JavaScript具有很多优点：1.简单性:-JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。2.动态性:-JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某

3、种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。3.跨平台性:-JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。4.节省CGI的交互时间:-随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个

4、进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。 .JS与Java的区别JavaScript语言和Java语言是相关的，但它们之间的联系并不像想象中的那样紧密。二者的区别体现在：首先，它们是两个公司开发的不

5、同的两个产品，Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。其次，JavaScript是基于对象的，而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

6、第三，两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。第四，两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。第五，代码格式不一样。Java是一种与HTML

7、无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。第六，嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaScript使用 . 来标识，而Java使用 . 来标识。第七，静态绑定和动态绑定。Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查，如不经编译则就无法实现对象引用的检查。

8、.JS的运行环境在目前流行的浏览器中，Netscape公司的Navigator 2.0以上版本的浏览器具都有处理JavaScript源代码的能力。JavaScript在其中实现了它的1.0版本，并在后来的Navigator 3.0实现了它的1.1版本，在现在推出的Navigator 4.0（Communicator）中,JavaScript在其中实现了它的1.2版本。微软公司从它的Internet Explorer 3.0版开始支持JavaScript。Microsoft把自己实现的JavaScript规范叫做JScript。这个规范与Netscape Navigator浏览器中的JavaSc

9、ript规范在基本功能上和语法上是一致的，但是在个别的对象实现方面还有一定的差别，这里特别需要予以注意。.JS的数据类型和变量JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。String 字符串类型:字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）如：“The cow jumped over the moon.” 数值数据类型：JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写

10、均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。 Boolean 类型：可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。 Undefined 数据类型：一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。 Null 数据类型：null 值就是没有任何值，什么也不表示。 object类型：除了上面提到的各种常用类型外，对象也是JavaScript中的重要组成部分，这部分将在后面章节详细介绍。 在 JavaScript 中变量用来存放脚本中的值，这样在需要用这个值的地方就可以用变量来代表，一个变量可以是一个

11、数字，文本或其它一些东西。JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如：var men = true; / men 中存储的值为 Boolean 类型。 变量命名:JavaScript 是一种区分大小写的语言，因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。另外，变量名称的长度是任意的，但必须遵循以下规则：.第一个字符必须是一个字母（大小写均可）、或一个下划线(_)或一个美元符 ($)。.后续的字符可以是字母、

12、数字、下划线或美元符。.变量名称不能是保留字。 .JS的语句及语法JavaScript所提供的语句分为以下几大类：1.变量声明，赋值语句：var。语法如下： var 变量名称 =初始值例：var computer = 32 /定义computer是一个变量，且有初值为32。2.函数定义语句：function，return。语法如下： function 函数名称 （函数所带的参数） 函数执行部分 return 表达式 /return语句指明将返回的值。 例：function square ( x ) return x*x 3.条件和分支语句：if.else，switch。if.else语句完成了

13、程序流程块中分支功能：如果其中的条件成立，则程序执行紧接着条件的语句或语句块；否则程序执行else中的语句或语句块。 语法如下： if (条件) 执行语句1 else 执行语句2 例：if (result = true) response = “你答对了！” else response = “你错了！” 分支语句switch可以根据一个变量的不同取值采取不同的处理方法。 语法如下： switch (expression) case label1: 语句串1； case label2: 语句串2； case label3: 语句串3； . default: 语句串3； 如果表达式取的值同程序中提

14、供的任何一条语句都不匹配，将执行default中的语句。 4. 循环语句：for， for.in，while,break,continue。for语句的语法如下： for (初始化部分；条件部分；更新部分) 执行部分. 只要循环的条件成立，循环体就被反复的执行。for.in语句与for语句有一点不同，它循环的范围是一个对象所有的属性或是一个数组的所有元素。for.in语句的语法如下： for (变量 in 对象或数组) 语句. while语句所控制的循环不断的测试条件，如果条件始终成立，则一直循环，直到条件不再成立。语法如下： while (条件) 执行语句. break语句结束当前的各种循环

15、，并执行循环的下一条语句。continue语句结束当前的循环，并马上开始下一个循环。5.对象操作语句：with，this，new。with语句的语法如下：with (对象名称) 执行语句 作用是这样的：如果你想使用某个对象的许多属性或方法时，只要在with语句的（）中写出这个对象的名称，然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。 ew语句是一种对象构造器，可以用new语句来定义一个新对象。语法是这样的：新对象名称 new 真正的对象名 譬如说，我们可以这样定义一个新的日期对象： var curr new Date()，然后，变量curr就具有了Date对象的属性。 this

16、运算符总是指向当前的对象。 6.注释语句：/，/*.*/。 /这是单行注释 /*这可以多行注释. */ .JS的对象及其属性和方法在JavaScript中是基于对象的编程，而不是完全的面向对象的编程。那麽什麽是对象呢？如果你学过一些VB的编程，对这个名词一定不会陌生。通俗的说，对象是变量的集合体，对象提供对于数据的一致的组织手段，描述了一类事物的共同属性。 在JavaScript中，可以使用以下几种对象：.由浏览器根据web页面的内容自动提供的对象。.JavaScript的内置对象，如Date,Math等。.服务器上的固有对象。.用户自定义的对象。 JavaScript中的对象是由属性和方法两

17、个基本的元素的构成的。对象的属性是指对象的背景色，长度，名称等。对象的方法是指对属性所进行的操作，就是一个对象自己所属的函数，如对对象取整，使对象获得焦点，使对象获得个随机数等等一系列操作。举个例子来说，将汽车看成是一个对象，汽车的颜色，大小，品牌等叫做属性，而发动，刹车，拐弯等就叫做方法。 可以采用这样的方法来访问对象的属性：对象名称.属性名称，例：mycomputer.year=1996，mycomputer.owner = “me”。可以采用这样的方法，将对象的方法同函数联系起来：对象.方法名字=函数名字或对象.属性.方法名，例：this.display=display，document

18、.writeln（“this is method”）。 多看或多写一些程序，就会理解对象的方法和属性的含义了！各个对象的各种属性和方法，可点击参考！ .JS的事件处理事件是浏览器响应用户交互操作的一种机制，JavaScript的事件处理机制可以改变浏览器响应用户操作的方式，这样就开发出具有交互性，并易于使用的网页。浏览器为了响应某个事件而进行的处理过程，叫做事件处理。 事件定义了用户与页面交互时产生的各种操作，例如单击超级连接或按钮时，就产生一个单击（click）操作事件。浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。 事件不仅可以在

19、用户交互过程中产生，而且浏览器自己的一些动作也可以产生事件，例：当载入一个页面时，就会发生load事件，卸载一个页面时，就会发生unload事件等。归纳起来，必需使用的事件有三大类：1.引起页面之间跳转的事件，主要是超连接事件。 2.事件浏览器自己引起的事件。3.事件在表单内部同界面对象的交互。 各种JavaScript的事件可点这里参考。.实例讲解1. 日期星期的显示源代码如下：(这段程序放在与之间)!-todayDate = new Date();date = todayDate.getDate();month= todayDate.getMonth() +1;year= todayDat

20、e.getYear();document.write(今天是)document.write()if(navigator.appName = Netscape)document.write(1900+year);document.write(年);document.write(month);document.write(月);document.write(date);document.write(日);document.write()if(navigator.appVersion.indexOf(MSIE) != -1)document.write(year);document.write(年)

21、;document.write(month);document.write(月);document.write(date);document.write(日);document.write()if (todayDate.getDay() = 5) document.write(星期五)if (todayDate.getDay() = 6) document.write(星期六)if (todayDate.getDay() = 0) document.write(星期日)if (todayDate.getDay() = 1) document.write(星期一)if (todayDate.ge

22、tDay() = 2) document.write(星期二)if (todayDate.getDay() = 3) document.write(星期三)if (todayDate.getDay() = 4) document.write(星期四)/-源程序讲解：todayDate = new Date();当定义一个新的对象时，通常使用“new”操作符。在这里，就是创建了日期对象。date = todayDate.getDate();getDate()是Date对象的一种方法，其功能是获得当前的日期。month= todayDate.getMonth() + 1 ; getMonth()是

23、Date对象的一种方法，其功能是获得当前的日期，由于月份是从0开始的，所以这里要“+1”。year= todayDate.getYear()getYear()是Date对象的一种方法，其功能是获得当前的年份。document.write(今天是) document.write()输出“今天是”if(navigator.appName = Netscape) document.write(1900+year); document.write(年); document.write(month); document.write(月); document.write(date); document.w

24、rite(日);document.write( ) 如果浏览器是Netscape，输出今天是“year”+“年”+“month”+“月”+“date”+“日”，其中年要加1900。if(navigator.appVersion.indexOf(MSIE) != -1) document.write(year); document.write(年); document.write(month); document.write(月); document.write(date); document.write(日);document.write( ) 如果浏览器是IE，直接输出今天是“year”+“

25、年”+“month”+“月”+“date”+“日”。document.write() ；在“日期”与“星期”之间输入一个空格。if (todayDate.getDay() = 5) document.write(星期五)；if (todayDate.getDay() = 6) document.write(星期六)；if (todayDate.getDay() = 0) document.write(星期日)；if (todayDate.getDay() = 1) document.write(星期一)；if (todayDate.getDay() = 2) document.write(星期

26、二)；if (todayDate.getDay() = 3) document.write(星期三)；if (todayDate.getDay() = 4) document.write(星期四)getDay()是Date对象的一种方法，其功能是获得当前是星期几。document.write输出今天是“星期几”。2. 分时问候源代码如下：(这段程序放在与之间)!-var mess1=;document.write()day = new Date( )hr = day.getHours( )if ( hr = 0 ) & (hr = 4 ) & (hr = 7 ) & (hr = 12) & (

27、hr = 13) & (hr = 17) & (hr = 18) & (hr = 19) & (hr = 23)mess1=一天过的可真快！今天过的好吗？document.write(mess1)document.write()/-源程序讲解：var mess1=;定义一个新变量。document.write( )设置格式，可以是字体，颜色等。day = new Date( ) 设置Date的一个新对象。hr = day.getHours( )把当前的“小时”的值赋给hr.if ( hr = 0 ) & (hr = 4 ) & (hr = 7 ) & (hr = 12) & (hr = 13)

28、 & (hr = 17) & (hr = 18) & (hr = 19) & (hr = 23)mess1=一天过的可真快！今天过的好吗？同上。document.write(mess1)输出mess1的值。document.write( )字体设置结束。3. 停留时间显示2源代码如下：(这段程序放在与之间) 您在本站停留了 var second=0;var minute=0;var hour=0;idt=window.setTimeout(interval();,1000);function interval()second+;if(second=60)second=0;minute+=1;i

29、f(minute=60)minute=0;hour+=1;document.forms.input.value=hour+时+minute+分+second+秒;idt=window.setTimeout(interval();,1000); 源程序讲解：var second=0;var minute=0;var hour=0;定义三个变量。idt=window.setTimeout(interval();,1000); 先初始化变量，这句话不可少。function interval() second+; if(second=60)second=0;minute+=1; if(minute=6

30、0)minute=0;hour+=1;定义一个函数。功能是形成一个计时系统。document.forms.input.value = hour+时+minute+分+second+秒; 输出时间。idt=window.setTimeout(interval();,1000);每1秒，调用一次interval()函数，就是一秒走一次。4. 动态数字时钟1源代码如下：(建议使用1024*768的分辨率)(这段程序放在与之间)12) noon=PM hours=hours-12 if (hours=0) hours=12 if (minutes=9) minutes=0+minutes if (se

31、conds=9) seconds=0+seconds/change font size here to your desiremyclock=+hours+:+minutes+: +seconds+ +noon+if (document.layers)document.layers.position.document.write(myclock)document.layers.position.document.close()else if (document.all)position.innerHTML=myclocksetTimeout(Time(),1000) /- 源程序讲解：func

32、tion Time() 定义一个函数。 if (!document.layers&!document.all)return由于IE与Netscape对JavaScript的解释不同，造成浏览的效果不同，所以要分别写代码。这句话判断一下用户所使用的浏览器，如果两者都不是，就返回。var timer=new Date()定义一个新的变量，名字为timer,为一个新的Date的对象。var hours=Timer.getHours() var minutes=Timer.getMinutes()var seconds=Timer.getSeconds() 分别定义3个变量，获得当前“小时”，“分钟”

33、，“秒”的值。var noon=AM if (hours12) noon=PM hours=hours-12 if (hours=0) hours=12定义一个名为“noon”的变量，当“小时”数大于12时，其值为PM,同时所得值减12;当“小时”数小于12时，其值为AM。if (minutes=9)minutes=0+minutesif (seconds=9) seconds=0+seconds 如果“分钟”数或“秒”数小于9,则在前面加一个“0”。myclock=+hours+:+minutes+: +seconds+ +noon+ 用一个新变量把“小时，分，秒”结合起来。if (docu

34、ment.layers) document.layers.position.document.write(myclock)document.layers.position.document.close() 如果浏览器是Netscape，就输出myclock,同时用于IE的代码就停止执行。else if (document.all) position.innerHTML=myclock 否则，浏览器是IE，就输出myclock。setTimeout(Time(),1000)每1000毫秒，调用一次Time函数,即一秒动一次。onload=Time()页面装载时，调用Time()函数。5. 离开时

35、显示停留时间1源代码如下：(这段程序放在与之间)(这段程序放在正文中)onUnload=stay()源程序讲解：pageOpen = new Date();定义一个新的日期对象，纪录开始浏览页面时间。function stay() 定义一个函数。pageClose = new Date(); 定义一个新的日期对象，纪录结束浏览页面时间。minutes = (pageClose.getMinutes() - pageOpen.getMinutes();“分钟”变量等于结束时间的分钟数减去开始时间的分钟数。seconds = (pageClose.getSeconds() - pageOpen.g

36、etSeconds(); “秒数”变量等于结束时间的秒数数减去开始时间的秒数数。time = (seconds + (minutes * 60);时间变量等于“秒数”变量加上“分钟”变量乘以60，即变为以秒纪录。time = (time + 秒钟); alert(您在这儿停留了 + time + .欢迎下次再来!);alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示（）中的字符串 ，告诉在此页面停留的时间。onUnload=stay()页面卸载的时候，调用stay()函数。6. 带开关的时钟源代码如下：(这段程序放在与之间)var enabled=0; f

37、unction TOfunc() TO = window.setTimeout( TOfunc(), 1000); var today = new Date(); document.clock.disp.value = today.toLocaleString(); 关 开 源程序讲解：var enabled=0;定义一个变量,并赋初值。function TOfunc() TO = window.setTimeout( TOfunc(), 1000);定义一个函数，变量TO的值为一秒，调用一次TOfunc()函数。var today = new Date();定义today 为Date对象的一

38、个实例。document.clock.disp.value = today.toLocaleString(); 在文本框中输出当前系统的时间。 插入一个文本框。开 插入一个单选按钮。如果选“开”的时候，就调用TOfunc()函数。关 插入一个单选按钮。如果选“关”的时候，就取消调用TOfunc()函数。7. 数 字 时 钟2源代码如下：(这段程序放在与之间) !-var dnc1=new Image(); c1.src=img/c1.gifc2=new Image(); c2.src=img/c2.gifc3=new Image(); c3.src=img/c3.gifc4=new Image

39、(); c4.src=img/c4.gifc5=new Image(); c5.src=img/c5.gifc6=new Image(); c6.src=img/c6.gifc7=new Image(); c7.src=img/c7.gifc8=new Image(); c8.src=img/c8.gifc9=new Image(); c9.src=img/c9.gifc0=new Image(); c0.src=img/c0.gifcb=new Image(); cb.src=img/cb.gifcam=new Image(); cam.src=img/cam.gifcpm=new Imag

40、e(); cpm.src=img/cpm.giffunction extract(h,m,s,type)if (!document.images)returnif (h=9)document.images.a.src=cb.srcdocument.images.b.src=eval(c+h+.src)else document.images.a.src=eval(c+Math.floor(h/10)+.src)document.images.b.src=eval(c+(h%10)+.src)if (m=9)document.images.d.src=c0.srcdocument.images.e.src=eval(c+m+.src)