JavaScript实例讲解

JavaScript实例讲解注意：其作用是：对网页浏览者当前所触发的事件进行处理或对网页进行初始化工作。它是事先在网页中编写好代码(或叫做“脚本”)，然后此代码伴随HTML文件一起传送到客户端的浏览器上，由浏览器对这些代码进行解释执行，而其执行期间并不需要服务器帮忙，这样就减轻了服务器的负担。例1.如何在HTML文档中嵌入JavaScript：htmlheadtitle在Html文档中嵌入JavaScript/title/headbodybrpalign=center这是Html文档的内容。/pbrscriptlanguage=JavaScript!--document.write(center这是使用JavaScript输出的内容!/center);--/scriptbrpalign=center这是Html文档的内容。/p/body/html显示结果为：分析：•使用scriptlanguage=JavaScript和/script标签把JavaScript脚本语言的代码嵌入到Html文件之中的•可以把这两个标签放在Html文件中的任何地方，也就是说JavaScript脚本代码可以嵌入到Html文件的任何地方。•“!--”和“--”标签在Html语言中是用来注释的，在此处则是:若不认识JavaScript代码的浏览器，则所有在其中的标识均被忽略；若认识，则执行其结果。•在此例中使用了一个叫做document的对象，它指代的就是当前的Html文档，它的write方法是用来向文档中输送Html代码，此方法必须带一个字符串参数。•此例中把Html代码(即字符串)center这是使用JavaScript输出的内容!/center输送到了当前的Html文档中函数(function)的应用：JavaScript的函数，主要分为两大类：第一类是负责数学计算或字符串处理；第二类则是将处理过的程序内容显示在网页上。这两类函数相互结合，才能JavaScript发挥最大功效。第一个函数示例:htmlheadtitle第一个函数示例/titlescriptlanguage=Javascript!--functiontalk(){alert(嘿，你好！);}//endfunction--/script/headbodyformpinputtype=buttonname=B1value=请点击……onclick=talk()/p/form/body/html显示结果为：分析：•通过Html语句inputtype=button……产生一个按钮，当浏览者用鼠标去点击此按钮时将触发按钮的onclick事件•依据语句onclick=talk()Html文件将会调用函数talk()。•函数必须用function来标识，然后空一格，紧跟函数名，接着是()号•函数中可以有很多语句，这些语句必须用{号和}号括起来•函数talk()只有一条语句alert(“嘿，你好！);函数alert()是一个JavaScript自带的，它将弹出一个小的警告窗体，并带有文字嘿，你好！和一个确定(OK)的按钮。•//符号是JavaScript的注释符号，即紧跟在此符号后边的内容为注释部分•JavaScript是区分大小写的，所以函数名也必须区分大小写，函数talk()和Talk()、alert()和Alert()都是不同的函数简单函数调用：htmlheadtitle简单函数调用/titlescriptlanguage=JavaScript!--functioninfo(){alert(请使用IE4.0以上版本,800*600分辨率浏览此网页!);}//endfunctionhello(){if(T1.value==){alert(对不起，请输入您的姓名！);}else{document.write(您好，+T1.value+！);}//endif}//endfunction--/script/headbodyonload=info()p请输入您的姓名:brinputtype=textname=T1size=20inputtype=buttonvalue=问候……name=B1onclick=hello()/p/body/html显示结果为：分析：•info()函数是在Html文件被浏览器装载时被调用的，调用的语句是：onload=info()，onload事件能放在body标签中，并且当Html文件被浏览器装载时触发此事件。•hello()函数则是在名为B1的按钮被按下时触发的onclick事件调用•函数中有一个判断语句if……else……，该判断语句的语法结构如下：if(判断条件){语句1;语句2;……语句n;}else{语句1;语句2;……语句n;}判断条件中的判断符号可以是==(等于)、(小于)、(大于)、=(小于等于)、=(大于等于)或!=(不等于)。•特别要注意的是等于是==而不是=，不等于是!=而不是。•if……else……语句中,出现了T1.value，它指代的是Html文档中语句inputtype=textname=T1size=20创建的文本框T1，输入到此文本框的文本可以使用T1.value调出来。•加号+用于字符串的合并，例如变量str存放着字符串hello，则str+,theworld!可得到字符串hello,theworld!。history对象:用来存储客户机浏览器已访问过的网址（URL），这些信息存储在一个history列表中，通过对history对象的引用，可以让客户机浏览器返回到它曾经访问过的网页。其功能与浏览器（中文IE）工具栏上的“后退”和“前进”按钮相同，下面看一个例子：htmlheadtitlehistory对象示例1/title/headbodyullionclick=history.go(-2)后退两页/lilionclick=history.back()后退一页/lilionclick=history.forward()前进一页/lilionclick=history.go(2)前进两页/li/ul/body/html显示结果为：分析：•此例中直接将JavaScript代码加入到Html的标签里边，这是使用JavaScript比较简单的方法，但对于语句较多的代码则不适合使用此方法。•由Html代码ulli…………/li/ul列出了一个列表，当列表中的某一项被鼠标点击时将触发onclick事件，此事件执行JavaScript代码，调用history对象的go()、back()或forward()方法，这样就使浏览器重新定位了。•使用go()方法要加入参数，此参数必须为整数，如-3、-2、-1、0、1、2、3……，go(0)是将浏览器定位到当前的位置，等于是刷新了一下，负整数是后退到当前页以前的那些页面，其绝对值即是回退的页面数，如go(-2)回退到在当前页前边访问过的前两页，同理，正整数是前进到当前页前边的那些页面。•back()方法是用来使浏览的页面后退到当前页的前一页，相当于go(-1)，与之相反，forward()方法则是使浏览的页面前进到当前页的前一页，相当于go(1)•注意：back()和forward()方法是不用加参数的history对象示例2:htmlheadtitlehistory对象示例2/title/headbodyullionclick=history.go(-2)后退两页/lilionclick=history.go(-1)后退一页/lilionclick=history.go(1)前进一页/lilionclick=history.go(2)前进两页/li/ul/body/html补充：当VBScript用作HTML表单控件的事件处理时，要在窗体中提供内部代码以响应窗体中对象的事件。htmlheadtitle测试按钮事件/title/headbodyformname=forminputtype=buttonname=buttonvalue=clickscriptfor=buttonevent=onClicklanguage=VBScriptMsgBoxyouhaveclickedthisbutton!/script/form/body/html显示结果为：下面是将JavaScript脚本加入Web文档中的Test2.htmlHTMLHeadScriptLanguage=JavaScriptdocument.Write(“这是电脑报网络学校”);document.close();/Script/Head/HTML说明：•Document.write()是文档对象的输出函数，其功能是将括号中的字符或变量值输出到窗口；document.close()是将输出关闭。•可将Script.../Script标识放入Head../Head或Body.../Body之间。将JavaScript标识放置Head.../Head在头部之间，使之在主页和其余部分代码之前装载，从而可使代码的功能更强大；可以将JavaScript标识放置在Body.../Body主体之间以实现某些部分动态地创建文档。事件驱动JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：（１）单击事件onClick当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：button（按钮对象）·checkbox（复选框）或（检查列表框）·radio（单选钮）·resetbuttons（重置按钮）·submitbuttons（提交按钮）例：可通过下列按钮激活change()文件：FormInputtype=buttonValue=onClick=change()/Form在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例：Inputtype=“button”value=“”onclick=alert(“这是一个例子”）;（２）onChange改变事件当利用text或textarea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例：FormInputtype=textname=Testvalue=TestonCharge=check('this.test)/Form（3）载入文件onLoad当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。（4）卸载文件onUnload当Web页面退出时引发onUnload事件，并可更新Cookie的状态。