爱问 爱问共享资料 爱问分类
首页 > > > JavaScript教程及实例讲解.pdf

JavaScript教程及实例讲解.pdf

JavaScript教程及实例讲解.pdf

上传者: yaoyao
640次下载 0人收藏 暂无简介 简介 2011-04-29 举报

简介:JavaScript实例讲解

JavaScript教程及实例讲解.JAVASCRIPT简介及特点JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后,Netscape公司引进了Sun公司有关Java的程序概念,将自己原有的Livescript重新进行设计,并改名为JavaScript。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。JavaScript具有很多优点:1.简单性:-JavaScript是一种脚本编写语言,它采用小程序段的方式实现编程,像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。2.动态性:-JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。3.跨平台性:-JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可以正确执行。4.节省CGI的交互时间:-随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流,确浏览的身份、需服务的内等等,这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然,通过网络与用户的交互过程一方面增大了网络的通信量,另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时,需要一个进程为它服务,它要占用服务器的资源(如CPU服务、内存耗费等),如果用户填表出现错误,交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多,服务器的性能影响就越大。JavaScript是一种基于客户端浏览器的语言,用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的,即使是必须调用CGI的部分,浏览器只将用户输入验证后的信息提交给远程的服务器,大大减少了服务器的开销。.JAVASCRIPT与Java的区别JavaScript语言和Java语言是相关的,但它们之间的联系并不像想象中的那样紧密。二者的区别体现在:1/95hp打字机hp打字机首先,它们是两个公司开发的不同的两个产品,Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展NetscapeNavigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。其次,JavaScript是基于对象的,而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。第三,两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户,由浏览器解释执行。第四,两种语言所采取的变量是不一样的。Java采用强类型变量检查,即所有变量在编译之前必须作声明。JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。第五,代码格式不一样。Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编辑文本文件一样方便。第六,嵌入方式不一样。在HTML文档中,两种编程语言的标识不同,JavaScript使用<script>...</script>来标识,而Java使用<applet>...</applet>来标识。第七,静态绑定和动态绑定。Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查,如不经编译则就无法实现对象引用的检查。.JAVASCRIPT的运行环境在目前流行的浏览器中,Netscape公司的Navigator2.0以上版本的浏览器具都有处理JavaScript源代码的能力。JavaScript在其中实现了它的1.0版本,并在后来的Navigator3.0实现了它的1.1版本,在现在推出的Navigator4.0(Communicator)中,JavaScript在其中实现了它的1.2版本。微软公司从它的InternetExplorer3.0版开始支持JavaScript。Microsoft把自己实现的JavaScript规范叫做JAVASCRIPTcript。这个规范与NetscapeNavigator浏览器中的JavaScript规范在基本功能上和语法上是一致的,但是在个别的对象实现方面还有一定的差别,这里特别需要予以注意。.JAVASCRIPT的数据类型和变量JavaScript有六种数据类型。主要的类型有number、string、object以及Boolean类型,其他两种类型为null和undefined。2/95String字符串类型:字符串是用单引号或双引号来说明的。(使用单引号来输入包含引号的字符串。)如:“Thecowjumpedoverthemoon.”数值数据类型:JavaScript支持整数和浮点数。整数可以为正数、0或者负数;浮点数可以包含小数点、也可以包含一个“e”(大小写均可,在科学记数法中表示“10的幂”)、或者同时包含这两项。Boolean类型:可能的Boolean值有true和false。这是两个特殊值,不能用作1和0。Undefined数据类型:一个为undefined的值就是指在变量被创建后,但未给该变量赋值以前所具有的值。Null数据类型:null值就是没有任何值,什么也不表示。object类型:除了上面提到的各种常用类型外,对象也是JavaScript中的重要组成部分,这部分将在后面章节详细介绍。在JavaScript中变量用来存放脚本中的值,这样在需要用这个值的地方就可以用变量来代表,一个变量可以是一个数字,文本或其它一些东西。JavaScript是一种对数据类型变量要求不太严格的语言,所以不必声明每一个变量的类型,变量声明尽管不是必须的,但在使用变量之前先进行声明是一种好的习惯。可以使用var语句来进行变量声明。如:varmen=true;//men中存储的值为Boolean类型。变量命名:JavaScript是一种区分大小写的语言,因此将一个变量命名为computer和将其命名为Computer是不一样的。另外,变量名称的长度是任意的,但必须遵循以下规则:.第一个字符必须是一个字母(大小写均可)、或一个下划线(_)或一个美元符($)。.后续的字符可以是字母、数字、下划线或美元符。.变量名称不能是保留字。.JAVASCRIPT的语句及语法JavaScript所提供的语句分为以下几大类:1.变量声明,赋值语句:var。语法如下:var变量名称[=初始值]例:varcomputer=32//定义computer是一个变量,且有初值为32。2.函数定义语句:function,return。语法如下:function函数名称(函数所带的参数){函数执行部分}return表达式//return语句指明将返回的值。例:functionsquare(x){3/95returnx*x}3.条件和分支语句:if...else,switch。if...else语句完成了程序流程块中分支功能:如果其中的条件成立,则程序执行紧接着条件的语句或语句块;否则程序执行else中的语句或语句块。语法如下:if(条件){执行语句1}else{执行语句2}例:if(result==true){response=“你答对了!”}else{response=“你错了!”}分支语句switch可以根据一个变量的不同取值采取不同的处理方法。语法如下:switch(expression){caselabel1:语句串1;caselabel2:语句串2;caselabel3:语句串3;...default:语句串3;}如果表达式取的值同程序中提供的任何一条语句都不匹配,将执行default中的语句。4.循环语句:for,for...in,while,break,continue。for语句的语法如下:for(初始化部分;条件部分;更新部分){执行部分...}只要循环的条件成立,循环体就被反复的执行。for...in语句与for语句有一点不同,它循环的范围是一个对象所有的属性或是一个数组的所有元素。for...in语句的语法如下:for(变量in对象或数组)4/95{语句...}while语句所控制的循环不断的测试条件,如果条件始终成立,则一直循环,直到条件不再成立。语法如下:while(条件){执行语句...}break语句结束当前的各种循环,并执行循环的下一条语句。continue语句结束当前的循环,并马上开始下一个循环。5.对象操作语句:with,this,new。with语句的语法如下:with(对象名称){执行语句}作用是这样的:如果你想使用某个对象的许多属性或方法时,只要在with语句的()中写出这个对象的名称,然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。ew语句是一种对象构造器,可以用new语句来定义一个新对象。语法是这样的:新对象名称=new真正的对象名譬如说,我们可以这样定义一个新的日期对象:varcurr=newDate(),然后,变量curr就具有了Date对象的属性。this运算符总是指向当前的对象。6.注释语句://,/*...*/。//这是单行注释/*这可以多行注释....*/.JAVASCRIPT的对象及其属性和方法在JavaScript中是基于对象的编程,而不是完全的面向对象的编程。那麽什麽是对象呢?如果你学过一些VB的编程,对这个名词一定不会陌生。通俗的说,对象是变量的集合体,对象提供对于数据的一致的组织手段,描述了一类事物的共同属性。在JavaScript中,可以使用以下几种对象:.由浏览器根据web页面的内容自动提供的对象。.JavaScript的内置对象,如Date,Math等。.服务器上的固有对象。.用户自定义的对象。5/95JavaScript中的对象是由属性和方法两个基本的元素的构成的。对象的属性是指对象的背景色,长度,名称等。对象的方法是指对属性所进行的操作,就是一个对象自己所属的函数,如对对象取整,使对象获得焦点,使对象获得个随机数等等一系列操作。举个例子来说,将汽车看成是一个对象,汽车的颜色,大小,品牌等叫做属性,而发动,刹车,拐弯等就叫做方法。可以采用这样的方法来访问对象的属性:对象名称.属性名称,例:mycomputer.year=1996,mycomputer.owner=“me”。可以采用这样的方法,将对象的方法同函数联系起来:对象.方法名字=函数名字或对象.属性.方法名,例:this.display=display,document.writeln(“thisismethod”)。多看或多写一些程序,就会理解对象的方法和属性的含义了!各个对象的各种属性和方法,可点击参考!.JAVASCRIPT的事件处理事件是浏览器响应用户交互操作的一种机制,JavaScript的事件处理机制可以改变浏览器响应用户操作的方式,这样就开发出具有交互性,并易于使用的网页。浏览器为了响应某个事件而进行的处理过程,叫做事件处理。事件定义了用户与页面交互时产生的各种操作,例如单击超级连接或按钮时,就产生一个单击(click)操作事件。浏览器在程序运行的大部分时间都等待交互事件的发生,并在事件发生时,自动调用事件处理函数,完成事件处理过程。事件不仅可以在用户交互过程中产生,而且浏览器自己的一些动作也可以产生事件,例:当载入一个页面时,就会发生load事件,卸载一个页面时,就会发生unload事件等。归纳起来,必需使用的事件有三大类:1.引起页面之间跳转的事件,主要是超连接事件。2.事件浏览器自己引起的事件。3.事件在表单内部同界面对象的交互。各种JavaScript的事件可点这里参考。.实例讲解1.日期星期的显示源代码如下:(这段程序放在<body>与</body>之间)<!--todayDate=newDate();date=todayDate.getDate();month=todayDate.getMonth()+1;6/95year=todayDate.getYear();document.write("今天是")document.write("<br>")if(navigator.appName=="Netscape"){document.write(1900+year);document.write("年");document.write(month);document.write("月");document.write(date);document.write("日");document.write("<br>")}if(navigator.appVersion.indexOf("MSIE")!=-1){document.write(year);document.write("年");document.write(month);document.write("月");document.write(date);document.write("日");document.write("<br>")}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("星期二")if(todayDate.getDay()==3)document.write("星期三")if(todayDate.getDay()==4)document.write("星期四")//-->源程序讲解:todayDate=newDate();当定义一个新的对象时,通常使用7/95“new”操作符。在这里,就是创建了日期对象。date=todayDate.getDate();getDate()是Date对象的一种方法,其功能是获得当前的日期。month=todayDate.getMonth()+1;;getMonth()是Date对象的一种方法,其功能是获得当前的日期,由于月份是从0开始的,所以这里要“+1”。year=todayDate.getYear()getYear()是Date对象的一种方法,其功能是获得当前的年份。document.write("今天是")document.write("<br>")输出“今天是”if(navigator.appName=="Netscape"){document.write(1900+year);document.write("年");document.write(month);document.write("月");document.write(date);document.write("日");document.write("<br>")}如果浏览器是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("<br>")}如果浏览器是IE,直接输出今天是“year”+“年”+“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("星期二");if(todayDate.getDay()==3)document.write("星期三");if(todayDate.getDay()==4)document.write("星期四")getDay()是Date对象的一种方法,其功能是获得当前是星期几。document.write输出今天是“星期几”。2.分时问候源代码如下:(这段程序放在<body>与</body>之间)<scriptlanguage="JavaScript"><!--varmess1="";document.write("<center><fontcolor='#0000FF'size=4><b>")8/95day=newDate()hr=day.getHours()if((hr>=0)&&(hr<=4))mess1="深夜了,注意身体,该休息了!"if((hr>=4)&&(hr<7))mess1="清晨好,这麽早就上网呀?!"if((hr>=7)&&(hr<12))mess1="早上好,一天之际在于晨,又是美好的一天!"if((hr>=12)&&(hr<=13))mess1="该吃午饭啦!有什麽好吃的?"if((hr>=13)&&(hr<=17))mess1="外面的天气很热吧?!心静自然凉!"if((hr>=17)&&(hr<=18))mess1="太阳落山了!快看看夕阳吧!"if((hr>=18)&&(hr<=19))mess1="吃过晚饭了吗?"if((hr>=19)&&(hr<=23))mess1="一天过的可真快!今天过的好吗?"document.write(mess1)document.write("</b></font></center>")//---></script>源程序讲解:varmess1="";定义一个新变量。document.write("<center><b>")设置格式,可以是字体,颜色等。day=newDate()设置Date的一个新对象。hr=day.getHours()把当前的“小时”的值赋给hr.if((hr>=0)&&(hr<=4))mess1="深夜了,注意身体,该休息了!"在0--4点间,出现“清晨好,这麽早就上网呀?!”字样。以下,类推。if((hr>=4)&&(hr<7))mess1="清晨好,这麽早就上网呀?!"if((hr>=7)&&(hr<12))mess1="早上好,一天之际在于晨,又是美好的一天!"9/95if((hr>=12)&&(hr<=13))mess1="该吃午饭啦!有什麽好吃的?"if((hr>=13)&&(hr<=17))mess1="外面的天气很热吧?!心静自然凉!"if((hr>=17)&&(hr<=18))mess1="太阳落山了!快看看夕阳吧!"if((hr>=18)&&(hr<=19))mess1="吃过晚饭了吗?"if((hr>=19)&&(hr<=23))mess1="一天过的可真快!今天过的好吗?"同上。document.write(mess1)输出mess1的值。document.write("</b>")字体设置结束。3.停留时间显示2源代码如下:(这段程序放在<body>与</body>之间)<formname=forms><p><fontclass=p2color=red>您在本站停留了