JAVASCRIPT 简介 计算机 编程语言.docx

《JAVASCRIPT 简介 计算机 编程语言.docx》由会员分享，可在线阅读，更多相关《JAVASCRIPT 简介 计算机 编程语言.docx（53页珍藏版）》请在课桌文档上搜索。

1、JavaScript简介IntroductiontoJavaScript1996byStefanKoch-AUrightsreserved.建议您将视窗放至最大，如此才能获得最好效果Inordertoenjoythisdocument,pleaseenlargethiswindowtothelargestone!版权声明：本原始文件作者为VoodoosHomeStefanKocho本文翻译已取得原作者同意，未经段喜亭允许，请勿以任何方式储存或复制。第一和二章请叁考钱炳全先生的译作。经段喜亭先生同意，GB版由HaVeS转载干线上学园。ThiSDaaeWithoUIIablesandDiCS第一章

2、:第二章:什麽是状态栏JaVaSCriDt?(StatUSbar)显示功纵JaVaSCriPtSCriPtS日期物件将SCriDtS乱数的产生(frames)的运用语法嵌入HTM1.开新视窗文件之中第一个函第六章：数第五章：输入型元同时载入两住阵列个框架(frames)日期功能(ArraVS)的设计利用链结开-最接修订日期如何清除视新视窗窗中之文件运算子(document)第四章:“前进键”(Forward)和“倒退状态栏键”(Back)的设计(StatUSbar)SetTinIeOUt第七章:函数设计一个跑马灯(SCroHer)输入表格(forms)的确认动作(form)的内容如何设定”内定

3、值” 玩玩JaVaSCriPt设计的游戏 JaVaSCriPt的演变 JaVa与JaVaSCriDC完全不同!1.1.11回主页-其它语言版本其它JS站台欢迎光临！您是第位参观者Original:StefanKoChE-mail:kochkarlsruhe.etsurf.de编译：段喜亭-段喜亭工作坊E-mail:duannleland.stanford.edu版权声明：本原始文件作者为VoodoosHome6StefanKoch0本文翻译已取得原作者同意，未经段喜亭允许，请勿以任何方式储存或复制。第一和二章请叁考钱炳全先生的译作。经段喜亭先生同意，GB版由HaVeS转载干线上学园。建议您将视

4、窗放至最大，如此才能获得最好效果Inordertoenjoythisdocument,pleaseenlargethiswindowtothelargestone!ThiSPaQeWllhIabIeS这是一份介绍JaVaSCnPt的教学文件。阅读此文件，您将可以轻松学习到如何将JavaScript的基本语法嵌入HTM1.文件之中。在本文件中，我列了一些相当容易理解的例子，希望能使您迅速进入JaVaSCriPt的世界。我将不定时在此文件中加入新的单元，因此建议您经常拜访本站，以获取最新资讯！ JaVaSCriPt简介一第一章:(钱炳全先生翻译)o什麽是JavaScript?o执行JaVaSCri

5、PtSCriDtSo将SCriPtS语法嵌入HTM1.文件之中o第一个函数o输入型元件o日期功能一最彳爰修订日期 JaVaSCnPt简介一第二章:(钱炳全先生翻译)o状态栏(StatUSbar)显示功能o日期物件o乱数的产生O开新视窗 JaVaSCnPt简介一第三章:o框架(frames)的运用 JaVaSCnPt简介一第四章:o状态栏(StatUSbar)oSetTimeoUt函数o设计一个跑马灯(SCrOIler) JaVaSCnPt简介一第五章:o阵歹IJ(ArraVS)的设计o如何清除视窗中之文件(document)o”前进键”(Forward)和“倒退键”(BaC退的设计 JaVaS

6、eriPt简介一第六章:O同时载入两个框架(frames)O利用链结开新视窗O运算子 JaVaSeriPt简介一第七章:o输入表格(forms)的确认动作o送出表格(form)的内容o如何设定”内定值” 玩玩JaVaSCriPt设计的游戏 JavaScript的演变 JaVa和JaVaSeriPt完全不同!其它可获得原版英文文件的站台(Mirror-Sites): StefanKoCh位於德国的网页 StefanKoch位於Webconn的站台 澳洲-VinceMankelow 奥地利-FranzKnipp 义大利 瑞典-MikaelNicolaidis 纽西兰其它语言版本： 中文-trans

7、latedbyShii-TyngDuann段喜亭（交大） 中文-translatedbyBeen-ChianChien钱炳全（南开） 捷克-translatedbyPavelJANIKml. 德文-translatedbyVeikkoWuensche其它JavaScript资源: ManVIinkStoOtherJaVaSCriPtPageS ReadtheJaVaSCriPt-FAQ（FreQUentIyASkedQUeStionS） NetSCaPe-HOme DownloadNCtSCaPeNavigator2.0JavaScript新书介绍： DannyGoodmarYsJaVaSCr

8、iptHandbook GordonMCCe）mbsTheJaVaSCriPtSourcebookOriginal:StefanKOChE-mail:kochkar!surf.de编译段喜亨.段喜亭工作坊E-mail:duannleland.stanford.eduJavaScript简介第1集1.2 JavaScript是什麽?JavaScript是一种新的描述语言，此一语言可以被箝入HTM1.的文件之中。透过JaVaSCriPt可以做到回应使用者的需求事件(如：form的输入)而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的

9、过程，而直接可以被客户端(client)的应用程式所处理。你也可以想像成有一个可执行程式在你的客端上执行一样！目前已有一些写好的程式在Internet上你可以连过去看看，以下有一些计算器的例子，在Nescape上。JavaScript和Java很类似，但到底并不一样!Java是一种比JavaScript更复杂许多的程式语言，而JavaScript则是相当容易了解的语言。JaVaSCriPt创作可以不那麽注重程式技巧，所以许多Java的特性在JavaScript中并不支如需相关的更多资讯，可以去读读NetSCaDe的有关NetSCaDeJaVaSCriDt之介绍。1.3 如何执行JaveScri

10、pt?JavaScript如何执行呢?Netscape2.0beta3版以上,就可以执行JavaScript的功能了，我们测试过至少beta3版以上可以，或许beta2版就已经有此功能了（猜的）。但目前为止，除了Netsspe外，似乎尚没有其他种类的WWW浏览器有此一功能。不过，资讯科技变化脚步是很快的，也许说着说着就有一大堆出来了。如果你没有NetscapeNavigator2.0的话，建议去取得该程式。目前最新版是Netscape2.01版!而Netscape3.0beta4版都出来了呢!范例1：以下我们就以一些例子来告诉你如何将JavaScript写在HTM1.文件中，并且体会一下新语言

11、的特性，我们从第一个例子开始：如何用JaVaSCriPt印出一串文字至HTM1.文件中：MyfirstJavaScript!ThisisanormalHTM1.document.document,write（这是以JavaScript印出的！）BackinHTM1.again.如果你使用的WWW浏览器是Netscape2.0beta3以上版本的话，那你就可以看到相关的结果，而如果你的浏览器并非是可以支援JavaScript的话，那看起来就会有一些怪怪的了，以上范例的结果如下：ThisisanormalHTM1.document.BackinHTM1.again.此一范例并没有太大的用处，它只是

12、要告诉你如何使用的标签，并如何将它置於HTM1.的文件之中而已，这个新的标签你可以特它放在文件中的任何地方。范例2：接下来下一个例子所要介绍的是有关函数(function)的使用。请放心，函数并非很难懂的东西，但它却相当有用。函数通常是在HTM1.文件中的部份被呼叫，而理所当然地，它最好事先被宣告并放在HTM1.文件中的部份。好让在部分中使用到函数时，它已确定被读取住来。另外,标签的有关描述语法剖份，你可以用注解的符号将它括起来，以免旧版或无法读取JaVaSCriPt的浏览器读到，而误会了意思！functionpushbutton()alert(嗨！你好”)；)如果你是使用Netscape2.

13、0beta3以上的浏览器，那以上JavaScript语法部份的结果如下，你可以试着按按钮看看有何结果产生！在范例2中，将会产生一个按钮，当你用滑鼠去按它的时候，应该会出现一个视窗上面有“嗨！你好”的字串，如何？不错吧！这个结果是如何产生的呢？首先，在head内的函数会被载入并存於记忆体中，接着一个新的form标签力必珈e=如。将产生一个接钮。然彳麦，你可以在彳爰面看到bca/M的指令，这就是告诉浏览器，当该按钮被按时，应会执行oCHck彳麦的函数pts7仇如a?。,而这个函数在刚刚程式被载入时就已安放在记忆体中了！请注意，在这个函数中我们用到了个新东西一a/e”的method,是JavaScr

14、ipt事先定义好的，它会以对话视窗产生内涵的讯息，并有一“确定“(C)K)的按钮。JaVaSCriPt定义了许多的method,你可以连至Netscape公司去获取较完整的讯息。我想这些method在不久的将来会有长长的一串可以够你学的，不过目前的method也已经可以做出相当多东西了！接着下个例子将告诉你如何由一个输入型表格中读入使用者的输入资料,事实上，这也是加入个函数就可以达成的。范例3：Pleaseenteryourname:现在你可以试试结果如何：请输入你的名字：在这个例子中又有新的东西了。首先，让我们注意一下，在语法中的注解部()此部分即我们之前所提到的它可以避免旧版本或是不支援J

15、avaScript的WWW浏览器因为不认识这些函数而产生错误。它的顺序应该为先，接着为注解的开头,最彳爰是/script另外要注意的一点是，语解尾那一行的开头双斜线V/,不可以省略，它代表了JavaScript的注解，若省略了的话，-之前的字会被误认为是JaVaSCriPt的指令。这个例子可以让使用者输入一段文字，然彳爰再输入完毕彳爰经由input标签中的onBlui事件函数侦知，於是呼叫Ge77d77eg兆个函数来加以取得输入字串，并将它显示在对话视窗上！函数Getame(this.value)中的this.valu是你在文字输入格式中所输入的值。范例4：这个范例更是帅了！我们在HTM1.文

16、件档完成了以彳爰，常会加上一行文件最彳爰修改的日期，现在你可不用担心每次都要去改或是忘了改了。你可以很简单的写一个如下的描述语法程式，就可以自动的为你每次产生最彳爰修改的日期了：ThisisasimpleHTM1.-page.1.astchanges:以上的document.IastModified叁数在Netscape2.0beta2版时是被写成documeut.lastmod市ed的，然而，之彳爰的版本就改为document.IastModified,所以注意一下；JavaScript本身是会区分大小写的，Iastmodified与IastModified在它看来是不同的结果。最彳身在这一

17、部分结束之前，要提醒你一点，像范例4,的用法并非每一机器都是一样的，例如：PC上跑得很正确的，在工作站上不一定会有相同结果，所以，或许你仍得测一测不同机器的结果才会有所定论。当然，这一切是因为JaVaSeriPt还正在发展的原因，最新的讯息还是得去拜访一下NetSCaPe公司才知道。也许你也不用奇怪，当你隔周再来访时，JaVaSCriPt可能又作7相当大的改变了呢！回主目录Original:StefanKOChE-mail:kochsurf.de编译：钱炳全E-mail:cbcit.tc.edu.twJavaScript简介第2集范例5：在这一部分首先要为你展示的JavaScript特性是将你

18、的滑鼠移到这个不同颜色的连结上面,此时看看浏览器下的状态列有何结果。然彳发这样的功能我们可与JaVaSCriPt的功能相结合。好，现在再将你的滑鼠移到本处不同颜色的连结上面，你应该会发现有一个视窗出现，是吧？！如何！怎麽做到的呢？以下就是这一个连结的作法：在这儿你只要在传统的标签中加入OnMouseOver的method,就可达成你要的效果了。这里的widow.status是用来让你可以在WWW浏览器的状态列上显示一些讯息用的。在语法中，你可以看到讯息部分是用括起来的部分，而非以”括起来，在讯息部分结束之彳麦，必须加上;returntrueo好了，利用以上的特性可以很简单的完成第二个连结的例子

19、！相当简单，以OnMouseOver的method然彳爰配合事件发生时去呼叫函数hello()就行了，不再多加解释了，作法如下：!-Hidingfunctionhello()alert(哈罗!);)1ink范例6：接下来我们要告诉你一个使用日期和时间的例子。在第一部分中，你已看过TIastModified的用法和作法。现在要告诉你的并非是印出网路上伺服器或文件修改日期，而是你个人客户端机器的日期和时间。以下就是执行结果：做法如下：!-Hidingtoday=newDate()document.Write(现在时间是：，today.getHours(),：，today.getMinutes()d

20、ocument,write(今天日期为：”，today.getMonth()+l,/，today.getDate(),zz,today.getYear();/endhidingcontents-在本例中，我们必需首先建立一个日期变数，这可以由today=newDate(床完成。如果没有特别指定时间与日期的话，浏览器将会采用本地客户端机器的时间,若将它放入变数today中。这儿要注意的是：我们并没有宣告today这个变数的型态，这和Java或其他的程式语言在用到变数之前必需先加以宣告的方式有相当大的不同。在完成Qa4的日期变数彳麦，我们等於建立了一个具有本地时间与日期的物件(ObjeCt)。接着

21、就可以使用get.的method以取得today这个物件的时间和日期。请注意getMoth这个method所取得的月份范围是由011,所以必须加1以代表真正的1月至12月。看完以上的例子彳友，想想你可以使你的文件变得有点智慧，例如：某个文件有时效限制的话，你可以利用我们在上一部份的范例4中所提到的功能和这一个范例中所学习到的功能，设计一个让你的文件在第10天以彳麦读到的话就会告诉读者：”喂！这篇已过时了！”的程式，试试看，并不难！除以上功能外，在建立日期物件时你也可以事先设定日期如下：docStarted=newDate(96,0,13)首先是年(西元)，接着是月(但记得减D,再接着是日。同样

22、的方法也可以加上时间的设定，如下：docStarted=newDate(96,0.13,10,50,0)前三个是日期的年、月、日，接着是时、分、秒。最彳爰，我们必须提醒你，JavaScript并没有实际的日期型态，但是它却能毫不费力地显示出日期和时间，原因是它是从1/1/19700:Oh开始以ms(milliseconds)来计算目前的时间的，这听起来似乎有些复杂，但你倒不用担心，它有标准的共用函数可以计算,你只要知道如何用就可以了！范例7：接下来我们要为你介绍一个可以产生乱数的函数，也是以JavaScript所写的。这个函数只是利用了一点小技巧而已，而这种技巧在大部分的编译器(compile

23、r)中，大都是如此(或类似)计算出乱数来的。我相信JavaScript最彳麦应也会以相似的方法来产生这样的method,如果它会提供这样功能的话。以下是此函数的结果：这是一个计算产生的乱数：以下是这个作法的写法：functionRandomNumber()today=newDate();num二Math,abs(Math,sin(today.getTime();returnnum;我们的做法是以上一个范例中的时间函数；它会出现一个很大的数，利用这个数再加以运算即可！例如：将它拿来做正弦函数(sin)的运算，得到的数再做绝对值的运算，结果可以得到一个介於0与1间的实数。因为时间的改变是ms为单位

24、，而且你绝不会获得相同的数字。不过这个做法并不适合拿来快速的连续产生一系列的乱数，但如果你是不定时，久久的用一次，那效果就不错了！范例8：JavaScript的一个重要特点是它可以制作视窗。你可以产生一个的视窗，并且在此视窗中载入HTM1.文件，完全以JaVaSCriPt来航游网际网路(Internet)o接下来的范例就是告诉你如何开启一个视窗并且写点东西进去，你可先试试按一下下边的按钮看看！原始程式如下：functionWinOpenOmsg=open(,zz,zzDisplayWinciowzz,zztoolbar=no,directories=no,menubar=noz/);msg.d

25、ocument.Write(哈罗！)；msg.CiOCUment.write(酷毙了！这是JavaScript所开的视窗！);这儿你又看到用按钮来启动函数。这次的函数制QOe藉着一个open的method来产生一个新的视窗“第一对双引号是用来描述欲载入至视中的文件UR1.位置。如果留者空白的话，那就会呈现一个空白视窗，并可透过JaVaSCriPt写入东西！下一对双引号内的内容是这个新开启视窗的名你可以喜欢给它任意一个名字，但不可加入空白，如用DiSPIayWindOW的话便会出现错误讯息，请注意。接下来的一连串双引号内所指定的是该视窗的相关性质(properties),这些蛮有趣的，你可以指定

26、要不要有工具棒(toolbar)、卷轴(SerOllbar),等等，例如：如果你写toolbar=yes,那就会在你所产生来的视窗中出现一排工具列。以下有许多你可以改变的视窗特性，请注意它们字中间不可以有空白：toolbarlocationdirectoriesstatusmenubarscrollbarsresizablecopyhistoryWidth=PZYeZSheight=pveZs以上的pixels部分，你可以填入点数的数值，这数值是告诉浏览器这个视窗的大小。在开启视窗，并且将它称为msg以彳象就可以开始写些东西到视窗中了。你可以写入一般正规的HTM1.语法文字。哇！这可不得了了，

27、也就是说，你可以利用先前使用者在form表格中输入给你的文章直接将它回应至浏览器上来了！这些功能在几个月前大概还只能用CGI才能达到喔现在你不用CGI也可以做了！回主目录希望你能对我们的介绍感到还算不错。由於JavaScript尚未完全发展完成，并且很可能会再继续地做一些更动，希望这儿的范例到时都还能执行，在JavaScript更多特性完成彳麦，我们也会继续地再为你介绍一些新的范例的！Original:StefanKoChE-mail:kochsurf.de编译：钱炳全E-mail:cbcit.tc.edu.twJavaScript简介第三章曾有许多网友问我有关JavaScript与框架(为求

28、方便，以下均用frame表示)合用的问题。事实上，若您同时想用frames和JavaScript的功能，首先您必需拥有NetscapeNavigator2.0(或以上)浏览器(至少目前是如此)。当然也有某些浏览器支援frames的功能-如QraCIe开发的Pc)WerBre)WSer,但此浏览器还只是Beta版，目前尚不支援JaVaSCript。首先,我稍微解释一下frames的功用。因为frames功能才开发不久、仍有许多HTM1.文件中未使用这项新功能。FrameS最主要功用是“分割”您的视窗,使每个“小视窗(frame)能显示不同的HTM1.文件(译按这有点类似电视的子母画面)。更妙的是

29、，不同frame之间可以互动(interact),也就是说不同frame之间可以交换讯息与资料(information)。例如:假设您开了两个frames,第一个frame可显示普通HTM1.文件，第二个frame可显示工具列(toolbar)。此工具列中可包含浏览您homepage所需的各种按钮。如此一来，即使第一个frame载入了另一个HTM1.文件，您仍可在第二个frame中看到工具列。现在我先将上述特性展示给您瞧瞧。请按一下下面的按钮，看一看frames的长相。(如果您是线上观看此文件，您可能需稍候一下才看得到结果，因为scripts必需由server中载入到您的机器)。以下是此fra

30、me的写法:Frames首先您必须告诉浏览器您要开几个frame?这是由这个标签(tag)来宣告。纪的这项叁数是告诉浏览器您想将视窗分割成几列?而co/s这项叁数是告诉浏览器您想将视窗分割成几行?您也可以用很多组的tags将视窗分割得更复杂。以下是NetSaCPe所提到的一个范例：FRAMESETCO1.S=50%,50%”上面这个例子产生了两行，而且第二行又分割成三列大小相等的空间。在第一个tag中的50%,50%两项叁数是用来表是frame的大小。您可以给每个frame一个“名字”(ame)oframe的名字在JavaScript语法中的地位非常重要。在本章的第一个范例中您已学到如何替fr

31、ame命名。接下来您可以用tag告诉浏览器您要载入哪一个HTM1.文件。我想您已了解frames的基本用法，接下来我们再看一个有趣的范例：上面的按钮将显示：按某个frame中的按钮彳爰，会在另一frame中写入文字。以下是此功能的原始码：在产生frames效果之前，您需先制作下列原始码(frames.html):FramesFRAMESETROWS=50%,50%”以下是framel.html的原始码:!Hidingfunctionhi()document,write(嗨!,z);functionyo()document.write(呦!z);functionbla()document,wri

32、te(啦啦啦);/-这是第一个frame!以下是frame2.htm!的原始码:这是第二个frame!哇!这些语法越来越长了!上述的语法是如何运作的呢?当使用者载入第一个档案(frames.html),将会产生两个frame,并且在第一个frame(命名为TrT)中载入framel.html,而在第二个frame(命名为行2)中载入frame2.html。到目前为止都只是普通的HTM1.语法。或许您已发现在framel.html中包含了JaVaSeriPt语法，但此JaVaSCriPt并没有马上被执行。难到这些函式(functions)是不必要的?亦或是我懒得删除这些不必要的函式?虽然我是懒散

33、惯的人，但这些函式确实是必须的。它们是被位於frame2.html中之JaVaSCriPt语法所呼叫而执行的。我在frame2.html中利用JavaScript语法制作了三个按钮，制作按钮来呼叫函式的方法我已在第一章提过，相信您对。nClick的用法已相当熟悉。但是paret.frl是干嘛用的？若您对物件观念已相当了解，相信它对您不是甚麽新鲜事。您可以看到frames.html同时呼叫framel.html与frame2.html两个档案,所以frames.html称为framel.html与frame2.html的Parent（请恕我直接用英文）。同理，这两个新的frame就称为frame

34、s.html的child-frameso您可将这种复杂的关系想像成阶层式架构（hierarchy）。以下我借助一个小图来厘清这种关系：frames,htmlparentfrl(framel.html)fr2(frame2.html)children当然您可依此类推，产生一些grandchildrenframes。（当然，这并不是正式的名称）：frames,htmlparentfrl(framel.html)fr2(frame2.html)chiIdrengrandchildren,gchildlgchild2若您想由frame2.html呼叫parent-frame中的任何函数，您只要将侬七九

35、放在您欲呼叫函数名称之前即可。同理，若由Parent-frame呼叫位於framel.html中的函数，您只需将frl放在被呼叫函数名称之前。为什麽用frl呢?原因是我们在frames.html中开了两个frame,而且将它们分别命名为以和fr2o所以我用frl代表第一个frame(framel.html)o接下来的步骤就相当容易了。当我们欲由frame2.html(命名为叼呼叫第一个frame中的函式时该怎麽做?由上面的“小图”您可以发现，framel.html和frame2.html之间并无直接关连(connection),因此您不可以“直接”由frame2.html呼叫位於framel.

36、html中的函式。您必须透过Parent-frame来呼叫它，所以正确指标(index)应为Parent.frl。例如若您想由frame2.html呼叫hi(),您必须写成Parent.frl.hi()。这也就是为什麽frame2.html中的OnCliCk要写成那种样子的原因了。对了!附带提一点小东西。您或许已发现本章中都用scriptIangUage=JavaScript”代替前两章用的scriptIangUag6二1.iVeSeript”。其实此二者间并没什麽差别。但起初JavaScript被植入NetSCaPe浏览器时，您只能用1.iVeSbiPt语法。(这是一种由NetSCaPe发展

37、的旧语法，和JaVaSCriPt极为类似)o我想既然我们讨论的是JavaScript函式,就应使用JavaScript语法。(这只是我的一己之见,在JavaScript-society中有许多关於1.iveScript的讨论，目前也是众说纷纭)在此我要花一点时间讨论一个很多人关心的问题。当您观赏一个拥有数个frame的网页时，若您想Iink至internet其它网页，这些frame并不会消失而且会带来视觉上的干扰。这些讨厌的frame应该如何消除呢？您只要在您的ahref.tag中加入TARGET=IOp”就可解决这个困扰。方法如下：ahref=goaway.htmlTARGET=_top如果

38、您不想观赏我的网页了a当然，您必须在您想要获得此效果的Iink中都加入TARGET=nJopno若想要整个网页中的Iink都有此效果，您可在此网页的head中力口入basetarget=_top”较方便。如此一来每个link被按下彳麦都可将frame消除。1.31.1且量-第一章-第二章-第四章-第五章-第六章-第七章1.3.1.2回主页-其它语言版本-其它JS站台原作最彳发更新:18.March961996byStefanKoch译作最彳灸更新:1996年5月16日1996由段喜亭翻译JavaScript简介第四章这章我将告诉您如何在状态列（StatUSbalj（也就是您浏览器最下方显示UR1.s的那一行）显示文字，并且将教您跑马灯（以下简称s