第一章
JavaScript 是什麼？
JavaScript 是一種新的描述語言，此一語言可以被箝入 HTML 的文件之中。透過 JavaScript 可以做到回應使用者的需求事件(如：form的輸入)而不用任何的網路來回傳輸資料，所以當一位使用者輸入一項資料時，它不用經過傳給伺服端(server)處理，再傳回來的過程，而直接可以被客戶端(client)的應用程式所處理。你也可以想像成有一個可執行程式在你的客端上執行一樣！目前已有一些寫好的程式在Internet上你可以連過去看看，以下有一些計算器的例子，在Nescape上。JavaScript和Java很類似，但到底并不一樣！Java是一種比JavaScript更復雜許多的程式語言，而JavaScript則是相當容易了解的語言。JavaScript創作者可以不那麼注重程式技巧，所以許多Java的特性在JavaScript中并不支援。如需相關的更多資訊，可以去讀讀Netscape的有關NetscapeJavaScript之介紹。
如何執行JaveScript？
JavaScript如何執行呢？
Netscape2.0beta3版以上，就可以執行JavaScript的功能了，我們測試過至少beta3版以上可以，其他種類的WWW瀏覽器如:InternetExpore3.0也有此一功能。
范例1：
以下我們就以一些例子來告訴你如何將JavaScript寫在HTML文件中，并且體會一下新語言的特性，我們從第一個例子開始：如何用JavaScript印出一串文字至HTML文件中：
<html>
<head>
MyfirstJavaScript!
</head>
<body>
<br>
ThisisanormalHTMLdocument.
<br>
<scriptlanguage="LiveScript">
document.write("這是以JavaScript印出的!")
</script>
<br>
BackinHTMLagain.
</body>
</html>
如果你使用的WWW瀏覽器是Netscape2.0beta3以上版本的話，那你就可以看到相關的結果，而如果你的瀏覽器并非是可以支援JavaScript的話，那看起來就會有一些怪怪的了，以上范例的結果如下：
ThisisanormalHTMLdocument.
這是以JavaScript印出的!
BackinHTMLagain.
此一范例并沒有太大的用處，它只是要告訴你如何使用<script>的標簽，并如何將它置於HTML的文件之中而已，這個新的標簽你可以特它放在文件中的任何地方。
范例2：
接下來下一個例子所要介紹的是有關函數(function)的使用。請放心，函數并非很難懂的東西，但它卻相當有用。函數通常是在HTML文件中<body＞的部份被呼叫，而理所當然地，它最好事先被宣告并放在HTML文件中<body＞的部份。好讓在<body＞部分中使用到函數時，它已確定被讀取住來。另外，<script＞標簽的有關描述語法剖份，你可以用注解的符號將它括起來，以免舊版或無法讀取JavaScript的瀏覽器讀到，而誤會了意思！
<html>
<head>
<scriptlanguage="LiveScript">
functionpushbutton(){
alert("嗨!你好");
}
</script>
</head>
<body>
<form>
<inputtype="button"name="Button1"value="Pushme"onclick="pushbutton()">
</form>
</body>
</html>
如果你是使用Netscape2.0beta3以上的瀏覽器，那以上JavaScript語法部份的結果如下，你可以試著按按鈕看看有何結果產生！在范例2中，將會產生一個按鈕，當你用滑鼠去按它的時候，應該會出現一個視窗上面有“嗨!你好”的字串，如何？不錯吧！這個結果是如何產生的呢？首先，在<head＞內的函數會被載入并存於內存中，接著一個新的<form＞標簽<inputtype="button".....＞將產生一個接鈕。然後，你可以在後面看到'onClick'的指令，這就是告訴瀏覽器，當該按鈕被按時，應會執行onClick後的函數'pushbutton()'，而這個函數在剛剛程式被載入時就已安放在記憶體中了！請注意，在這個函數中我們用到了個新東西－alert的method，是JavaScript事先定義好的，它會以對話視窗產生內涵的訊息，并有一"確定"(OK)的按鈕。JavaScript定義了許多的method，你可以連至Netscape公司去獲取較完整的訊息。我想這些method在不久的將來會有長長的一串可以夠你學的，不過目前的method也已經可以做出相當多東西了！接著下個例子將告訴你如何由一個輸入型表格中讀入使用者的輸入資料，事實上，這也是加入個函數就可以達成的。
范例3：
<html>
<head>
<scriptlanguage="LiveScript">
<!--hidescriptfromoldbrowsers
functiongetname(str){
alert("哈羅!"+str+"!");
}
//endhidingcontents-->
</script>
</head>
<body>
Pleaseenteryourname:
<form>
<inputtype="text"name="name"onBlur="getname(this.value)"value="">
</form>
</body>
</html>
現在你可以試試結果如何：
請輸入你的名字：
在這個例子中又有新的東西了。首先，讓我們注意一下，在語法中的注解部分(<!-...-＞)此部分即我們之前所提到的它可以避免舊版本或是不支援JavaScript的WWW瀏覽器因為不認識這些函數而產生錯誤。它的順序應該為<script＞先，接著為注解的開頭<!-，然後是內容，注解尾-＞，最後是</script＞。另外要注意的一點是，語解尾那一行的開頭雙斜線"http://"，不可以省略，它代表了JavaScript的注解，若省略了的話，-＞之前的字會被誤認為是JavaScript的指令。這個例子可以讓使用者輸入一段文字，然後再輸入完畢後經由<input＞標簽中的"onBlur"事件函數偵知，於是呼叫Getname(Str)這個函數來加以取得輸入字串，并將它顯示在對話視窗上！函數Getname(this.value)中的"this.value"是你在文字輸入格式中所輸入的值。
范例4：：
這個范例更是帥了！我們在HTML文件檔完成了以後，常會加上一行文件最後修改的日期，現在你可不用擔心每次都要去改或是忘了改了。你可以很簡單的寫一個如下的描述語法程式，就可以自動的為你每次產生最後修改的日期了：
<html>
<body>
ThisisasimpleHTML-page.
<br>
Lastchanges:
<scriptlanguage="LiveScript">
<!--hidescriptfromoldbrowsers
document.write(document.lastModified)
//endhidingcontents-->
</script>
</body>
</html>
以上的document.lastModified叁數在Netscape2.0beta2版時是被寫成documeut.lastmodified的，然而，之後的版本就改為document.lastModified，所以注意一下；JavaScript本身是會區分大小寫的，lastmodified與lastModified在它看來是不同的結果。最後，在這一部分結束之前，要提醒你一點，像范例4，的用法并非每一部機器都是一樣的，例如：PC上跑得很正確的，在工作站上不一定會有相同的結果，所以，或許你仍得測一測不同機器的結果才會有所定論。當然，這一切是因為JavaScript還正在發展的原因，最新的訊息還是得去拜訪一下Netscape公司才知道。也許你也不用奇怪，當你隔周再來訪時，JavaScript可能又作了相當大的改變了呢！
第二章
范例5：
在這一部分首先要為你展示的JavaScript特性是將你的滑鼠移到這個不同顏色的連結上面，此時看看瀏覽器下的狀態列有何結果。然後這樣的功能我們可以與JavaScript的功能相結合。好，現在再將你的滑鼠移到本處不同顏色的連結上面，你應該會發現有一個視窗出現，是吧？！如何！怎麼做到的呢？以下就是這一個連結的作法：<ahref="tpage.htm"onMouseOver="window.status='Justanotherstupidlink...';returntrue">在這兒你只要在傳統<a>的標簽中加入onMouseOver的method，就可達成你要的效果了。這里的window.status是用來讓你可以在WWW瀏覽器的狀態列上顯示一些訊息用的。在語法中，你可以看到訊息部分是用'括起來的部分，而非以"括起來，在訊息部分結束之後，必須加上;returntrue。好了，利用以上的特性可以很簡單的完成第二個連結的例子！相當簡單，以onMouseOver的method然後配合事件發生時去呼叫函數hello()就行了，不再多加解釋了，作法如下：
<html>
<head>
<scriptlanguage="LiveScript">
<!--Hiding
functionhello(){
alert("哈羅!");
}
</script>
</head>
<body>
<ahref=""onMouseOver="hello()">link</a>
</body>
</html>
范例6：
接下來我們要告訴你一個使用日期和時間的例子。在第一部分中，你已看過了lastModified的用法和作法。現在要告訴你的并非是印出網路上伺服器或文件修改日期，而是你個人客戶端機器的日期和時間。以下就是執行結果：
現在時間是：15:49
今天日期為：5/26/2005
做法如下：
<scriptlanguage="LiveScript">
<!--Hiding
today=newDate()
document.write("現在時間是：",today.getHours(),":",today.getMinutes())
document.write("<br>今天日期為：",today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
//endhidingcontents-->
</script>
在本例中，我們必需首先建立一個日期變數，這可以由today=newDate()來完成。如果沒有特別指定時間與日期的話，瀏覽器將會采用本地客戶端機器的時間，若將它放入變數today中。這兒要注意的是：我們并沒有宣告today這個變數的型態，這和Java或其他的程式語言在用到變數之前必需先加以宣告的方式有相當大的不同。在完成today的日期變數後，我們等於建立了一個具有本地時間與日期的物件(object)。接著就可以使用get...的method以取得today這個物件的時間和日期。請注意getMonth這個method所取得的月份范圍是由0~11，所以必須加1以代表真正的1月至12月。看完以上的例子後，想想你可以使你的文件變得有點智慧，例如：某個文件有時效限制的話，你可以利用我們在上一部份的范例4中所提到的功能和這一個范例中所學習到的功能，設計一個讓你的文件在第10天以後讀到的話就會告訴讀者："喂！這篇已過時了！"的程式，試試看，并不難！除以上功能外，在建立日期物件時你也可以事先設定日期如下：docStarted=newDate(96,0,13)首先是年（西元），接著是月（但記得減1），再接著是日。同樣的方法也可以加上時間的設定，如下：
docStarted=newDate(96,0,13,10,50,0)
前三個是日期的年、月、日，接著是時、分、秒。最後，我們必須提醒你，JavaScript并沒有實際的日期型態，但是它卻能毫不費力地顯示出日期和時間，原因是它是從1/1/19700：0h開始以ms(milliseconds)來計算目前的時間的，這聽起來似有些復雜，但你倒不用擔心，它有標準的共用函數可以計算，你只要知道如何用就可以了！
范例7：
接下來我們要為你介紹一個可以產生亂數的函數，也是以JavaScript所寫的。這個函數只是利用了一點小技巧而已，而這種技巧在大部分的編譯器(compiler)中，大都是如此（或類似）計算出亂數來的。我相信JavaScript最後應也會以相似的方法來產生這樣的method，如果它會提供這樣功能的話。以下是此函數的結果：這是一個計算產生的亂數：0.6840756821474804
以下是這個作法的寫法：
<html>
<head>
<scriptlanguage="LiveScript">
functionRandomNumber(){
today=newDate();
num=Math.abs(Math.sin(today.getTime()));
returnnum;
}
</script>
</head>
<body>
<scriptlanguage="LiveScript">
<!--
document.write("Thisisarandomnumber:",RandomNumber());
//-->
</script>
</body>
</html>
我們的做法是以上一個范例中的時間函數；它會出現一個很大的數，利用這個數再加以運算即可！例如：將它拿來做正弦函數（sin）的運算，得到的數再做絕對值的運算，結果可以得到一個介於0與1間的實數。因為時間的改變是ms為單位，而且你絕不會獲得相同的數字。不過這個做法并不適合拿來快速的連續產生一系列的亂數，但如果你是不定時，久久的用一次，那效果就不錯了！
范例8：
JavaScript的一個重要特點是它可以制作視窗。你可以產生一個的視窗，并且在此視窗中載入HTML文件，完全以JavaScript來航游網際網路（Internet）。接下來的范例就是告訴你如何開啟一個視窗并且寫點東西進去，你可先試試按一下范中之接鈕看看！
原始程式如下：
<html>
<head>
<scriptlanguage="LiveScript">
functionWinOpen(){
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>哈羅!</TITLE></HEAD>");
msg.document.write("<CENTER><H1>酷斃了!</H1><h2>這是<B>JavaScript</B>所開的視窗!</h2></CENTER>");
}
</script>
</head>
<body>
<form>
<inputtype="button"name="Button1"value="Pushme"onclick="WinOpen()">
</form>
</body>
</html>
這兒你又看到用按鈕來啟動函數。這次的函數WinOpen()是藉著一個open的method來產生一個新的視窗。第一對雙引號("")是用來描述欲載入至視窗中的文件URL位置。如果留者空白的話，那就會呈現一個空白視窗，并可以透過JavaScript寫入東西！下一對雙引號內的內容是這個新開啟視窗的名字，你可以喜歡給它任意一個名字，但不可加入空白，如用DisplayWindow的話便會出現錯誤訊息，請注意。接下來的一連串雙引號內所指定的是該視窗的相關性質(properties)，這些蠻有趣的，你可以指定要不要有工具棒(toolbar)、卷軸(scrollbar)，等等，例如：如果你寫toolbar=yes，那就會在你所產生出來的視窗中出現一排工具列。以下有許多你可以改變的視窗特性，請注意它們字中間不可以有空白：
toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels
以上的pixels部分，你可以填入點數的數值，這數值是告訴瀏覽器這個視窗的大小。在開啟視窗，并且將它稱為msg以後，就可以開始寫些東西到視窗中了。你可以寫入一般正規的HTML語法文字。哇！這可不得了了，也就是說，你可以利用先前使用者在form表格中輸入給你的文章直接將它回應至瀏覽器上來了！這些功能在幾個月前大概還只能用CGI才能達到喔！現在你不用CGI也可以做了！
第三章
曾有許多網友問我有關JavaScript與框架(為求方便，以下均用frame表示)合用的問題。事實上，若您同時想用frames和JavaScript的功能，首先您必需擁有NetscapeNavigator2.0(或以上)瀏覽器(至少目前是如此)。當然也有某些瀏覽器支援frames的功能--如:Oracle開發的PowerBrowser，但此瀏覽器還只是Beta版，目前尚不支援JavaScript。首先，我稍微解釋一下frames的功用。因為frames功能才開發不久，仍有許多HTML文件中未使用這項新功能。Frames最主要功用是"分割"您的視窗，使每個"小視窗"(frame)能顯示不同的HTML文件(譯按:這有點類似電視的子母畫面)。更妙的是，不同frame之間可以互動(interact)，也就是說不同frame之間可以交換訊息與資料(information)。例如:假設您開了兩個frames，第一個frame可顯示普通HTML文件，第二個frame可顯示工具列(toolbar)。此工具列中可包含瀏覽您homepage所需的各種按鈕。如此一來，即使第一個frame載入了另一個HTML文件，您仍可在第二個frame中看到工具列。現在我先將上述特性展示給您瞧瞧。請按一下下面的按鈕，看一看frames的長相。(如果您是線上觀看此文件，您可能需稍候一下才看得到結果，因為scripts必需由server中載入到您的機器)。
以下是此frame的寫法:
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESETROWS="50%,50%">
<FRAMESRC="frtest1.html"name="fr1">
<FRAMESRC="frtest2.html"name="fr2">
</FRAMESET>
</HTML>
首先您必須告訴瀏覽器您要開幾個frame?這是由<frameset...>這個標簽(tag)來宣告。rows這項叁數是告訴瀏覽器您想將視窗分割成幾列?而cols這項叁數是告訴瀏覽器您想將視窗分割成幾行?您也可以用很多組的<frameset...>tags將視窗分割得更復雜。以下是Netsacpe所提到的一個范例:
<FRAMESETCOLS="50%,50%">
<FRAMESETROWS="50%,50%">
<FRAMESRC="cell.html">
<FRAMESRC="cell.html">
</FRAMESET>
<FRAMESETROWS="33%,33%,33%">
<FRAMESRC="cell.html">
<FRAMESRC="cell.html">
<FRAMESRC="cell.html">
</FRAMESET>
</FRAMESET>
上面這個例子產生了兩行，而且第二行又分割成三列大小相等的空間。在第一個<frameset>tag中的50%，50%兩項叁數是用來表是frame的大小。您可以給每個frame一個"名字"(name)。frame的名字在JavaScript語法中的地位非常重要。在本章的第一個范例中您已學到如何替frame命名。接下來您可以用<frame>tag告訴瀏覽器您要載入哪一個HTML文件。
我想您已了解frames的基本用法，接下來我們再看一個有趣的范例:
上面的按鈕將顯示:按某個frame中的按鈕後，會在另一frame中寫入文字。以下是此功能的原始碼:在產生frames效果之前，您需先制作下列原始碼(frames.html):
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESETROWS="50%,50%">
<FRAMESRC="frame1.html"name="fr1"noresize>
<FRAMESRC="frame2.html"name="fr2">
</FRAMESET>
</HTML>
以下是frame1.html的原始碼:
<HTML>
<HEAD>
<scriptlanguage="JavaScript">
<!--Hiding
functionhi(){
document.write("嗨!<br>");
}
functionyo(){
document.write("!<br>");
}
functionbla(){
document.write("啦啦啦<br>");
}
//-->
</script>
</HEAD>
<BODY>
這是第一個frame!
</BODY>
</HTML>
以下是frame2.html的原始碼:
<HTML>
<body>
這是第二個frame!
<p>
<FORMNAME="buttonbar">
<INPUTTYPE="button"VALUE="嗨"onClick="parent.fr1.hi()">
<INPUTTYPE="button"VALUE=""onClick="parent.fr1.yo()">
<INPUTTYPE="button"VALUE="啦"onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
哇!這些語法越來越長了!上述的語法是如何運作的呢?當使用者載入第一個檔案(frames.html)後，將會產生兩個frame，并且在第一個frame(命名為'fr1')中載入frame1.html，而在第二個frame(命名為'fr2')中載入frame2.html。到目前為止都只是普通的HTML語法。或許您已發現在frame1.html中包含了JavaScript語法，但此JavaScript并沒有馬上被執行。難到這些函式(functions)是不必要的?亦或是我得刪除這些不必要的函式?雖然我是散慣的人，但這些函式確實是必須的。它們是被位於frame2.html中之JavaScript語法所呼叫而執行的。我在frame2.html中利用JavaScript語法制作了三個按鈕，制作按鈕來呼叫函式的方法我已在第一章提過，相信您對onClick的用法已相當熟悉。但是......parent.fr1是干嘛用的?若您對物件觀念已相當了解，相信它對您不是甚麼新鮮事。您可以看到frames.html同時呼叫frame1.html與frame2.html兩個檔案，所以frames.html稱為frame1.html與frame2.html的parent(請恕我直接用英文)。同理，這兩個新的frame就稱為frames.html的child-frames。您可將這種復雜的關系想像成階層式架構(hierarchy)。以下我借助一個小'圖'來厘清這種關系:
frames.htmlparent
/\
/\
/\
fr1(frame1.html)fr2(frame2.html)children
當然您可依此類推，產生一些'grandchildren'frames。(當然，這并不是正式的名稱):
frames.htmlparent
/\
/\
/\
fr1(frame1.html)fr2(frame2.html)children
/\
/\
/\
gchild1gchild2'grandchildren'
若您想由frame2.html呼叫parent-frame中的任何函數，您只要將parent放在您欲呼叫函數名稱之前即可。同理，若由parent-frame呼叫位於frame1.html中的函數，您只需將fr1放在被呼叫函數名稱之前。為什麼用fr1呢?原因是我們在frames.html中開了兩個frame，而且將它們分別命名為fr1和fr2。所以我用fr1代表第一個frame(frame1.html)。接下來的步驟就相當容易了。當我們欲由frame2.html(命名為fr2)呼叫第一個frame中的函式時該怎麼做?由上面的"小圖"您可以發現，frame1.html和frame2.html之間并無直接關連(connection)，因此您不可以"直接"由frame2.html呼叫位於frame1.html中的函式。您必須透過parent-frame來呼叫它，所以正確指標(index)應為parent.fr1。例如若您想由frame2.html呼叫hi()，您必須寫成parent.fr1.hi()。這也就是為什麼frame2.html中的onClick要寫成那種樣子的原因了。對了!附帶提一點小東西。您或許已發現本章中都用<scriptlanguage="JavaScript">代替前兩章用的<scriptlanguage="LiveScript">。其實此二者間并沒什麼差別。但起初JavaScript被植入Netscape瀏覽器時，您只能用LiveScript語法。(這是一種由Netscape發展的舊語法，和JavaScript極為類似)。我想既然我們討論的是JavaScript函式，就應使用JavaScript語法。(這只是我的一己之見，在'JavaScript-society'中有許多關於LiveScript的討論，目前也是眾說紛紜....)
在此我要花一點時間討論一個很多人關心的問題。當您觀賞一個擁有數個frame的網頁時，若您想link至internet其它網頁，這些frame并不會消失而且會帶來視覺上的干擾。這些討厭的frame應該如何消除呢?您只要在您的<ahref...>tag中加入TARGET="_top"就可解決這個困擾。方法如下:
<ahref="goaway.html"TARGET="_top">如果您不想觀賞我的網頁了</a>
當然，您必須在您想要獲得此效果的link中都加入TARGET="_top"。若想要整個網頁中的link都有此效果，您可在此網頁的head中加入<basetarget="_top">較方便。如此一來每個link被按下後都可將frame消除。
第四章
這章我將告訴您如何在狀態列(statusbar)(也就是您瀏覽器最下方顯示URLs的那一行)顯示文字，并且將教您'跑馬燈'(以下簡稱scroller)的工作原理。雖然以JavaScript完成的scroller目前仍有些問題(稍後會提到問題在哪兒?)，但我還是告訴您它是如何寫成的。首先，如何將文字填入statusbar呢?下述語法將告訴您如何做到這項功能:(按下按鈕後請注視statusbar的變化)很新奇吧!請看看原始碼:
<html>
<head>
<scriptlanguage="JavaScript">
<!--Hide
functionstatbar(txt){
window.status=txt;
}
//-->
</script>
</head>
<body>
<form>
<inputtype="button"name="look"value="寫入文字"onclick="statbar('嗨!這就是狀態
列(statusbar)!');">
<inputtype="button"name="erase"value="清除文字"onclick="statbar('');">
</form>
</body>
</html>
我制作了兩個都會呼叫statbar(txt)函式(function)的按鈕。當此函式被呼叫後，字串經由括弧中的變數txt傳給statbar(txt)。(不一定要用txt，用別的變數名也可以)。當電腦執行到<form>tag時，一旦按下按鈕就會呼叫statbar(txt)。但是電腦并沒有馬上將txt的內容寫在statusbar，只是將欲顯示的字串存入txt。換句話說，藉由呼叫函式，只是讓變數txt得到一個值。因此當您按下'寫入文字'這個按鈕後，會呼叫statbar(txt)而且'嗨!這就是狀態列(statusbar)!'這個字串會存入txt中。咻!講了這麼多只是想告訴您這種寫法可預留一些彈性。什麼彈性呢?就是您可重復使用txt這個變數。您看看第二個按鈕，它也是呼叫相同的函式。若您不利用一個變數來傳遞字串的話，就必須寫兩個不同的函式了。那麼statbar(txt)到底做了些什麼?其實沒什麼，只是將txt的內容寫入變數window.status中。這是由window.status=txt;做的。另外若想消除文字，只需送一個空字串('')給statusbar。請注意，因為在onClick中我們已經使用雙引號"，所以這里必須用單引號'。這是為了讓瀏覽器辨認哪兩個引號是一對的，因此您必需雙引號和單引號交替使用。由此份簡介文件第二章您已學過onMouseOver的特性了:
<ahref="tpage.html"onMouseOver="window.status='Justanotherstupidlink...';returntrue">
您可能會對一件事感到厭煩。那就是當mouse的指標已從link移開了，但是statusbar中的文字還留在那!沒關系，我教您一個解決的辦法。利用上面教您如何消除statusbar中文字的方法，我們來寫一個小函式。但是如何偵測出mouse的指標已從link移開并進而呼叫消除文字的函式呢?偵測mouse指標是否已從link移出的功能目前還無法達到，但可用"計時器"來暫時解決此問題。試試將mouse移到此link上看看statusbar的變化，但請不要按它。怎麼樣?很棒吧!看看下面的原始碼您就知到這東西很簡單。
<html>
<head>
<scriptlanguage="JavaScript">
<!--Hide
functionmoveover(txt){
window.status=txt;
setTimeout("erase()",1000);
}
functionerase(){
window.status="";
}
//-->
</script>
</head>
<body>
<ahref="dontclck.html"onMouseOver="moveover('瞬間即逝!');returntrue;">
link</a>
</body>
</html>
這script的許多部份相信您已了解。moveover(txt)其實和先前的statbar(txt)差不多。erase()也和先前所討論的相同。在HTML網頁中的<body>tag里我們加入一個具有onMouseOver功能之link。當mouse指標移至"link"上就會呼叫moveover(txt)，并且利用txt變數傳遞字串'瞬間即逝!'。接下來的步驟就和statbar(txt)一樣，window.status收到txt的值後將之顯示在statusbar上。而setTimeout(...)這項新函式是用來作為一個"定時器"。setTimeout(...)能作些什麼事呢?它的主要特性是當某段設定的時間"跑"完了之後，便執行某函式。在這個例子中，於1000毫秒後(也就是1秒後)就會執行erase()。換句話說，當1秒結束後moveover(txt)的功能就會因erase()的自動執行而停止。雖然規定時間"跑"完後定時器并不會重新啟動，但您可以在erase()中再用一次setTimeout(...)，使其循還不斷，看起來就像一個跑馬燈(scroller)。您已學到了setTimeout的功能和如何在statusbar中顯示文字，接下我將教您如何制作一個在statusbar顯示的"跑馬燈"(scroller)。請按下方的按鈕看看我做的scroller。由於script需由server載入到您的電腦中，因此這要花一點時間，請耐心等一下。
以下是原始碼:
<html>
<head>
<scriptlanguage="JavaScript">
<!--Hide
varscrtxt="怎麼樣!很酷吧!您也可以試試."+"Heregoesyourmessagethevisitors
toyourpagewill"+
"lookatforhoursinpurefascination...";
varlentxt=scrtxt.length;
varwidth=100;
varpos=1-width;
functionscroll(){
pos++;
varscroller="";
if(pos==lentxt){
pos=1-width;
}
if(pos<0){
for(vari=1;i<=Math.abs(pos);i++){
scroller=scroller+"";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else{
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status=scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<bodyonLoad="scroll();returntrue;">
這里可顯示您的網頁!
</body>
</html>
上面script用的語法相信大部份您已經懂了。setTimeout(...)"告訴"計時器當時間到了就呼叫scroll()。如此一來scroller便會向前移動一步。在script的開頭有許多計算式，那是用來決定文字開始顯示的位置，了不了解并不重要。一旦決定了文字的啟始位置，就必需加些空格(space)以使文字能顯示在正確位置。
在此章一開始我曾提到，此種scroller并不是很受歡迎。即使是，也不會持續很久。為什麼呢?下面我列出幾個主要原因:
當第一次看到scroller或許您會覺得很新奇，但久而久之便會覺得索然無味。當然，這是所有"酷玩意兒"(cooltrick)皆有的現象。其實這還不是主要原因，更嚴重的問題還在後頭呢!當您移動mouse時，您可以發現scroller的速度改變了(至少在我的機器上是如此)。尤其當您更改setTimeout的值為使scroller跑快一點時，這種情況更嚴重。不過這問題或許還有解決方法。更糟的是若讓scroller跑久一點，會出現Outofmemoryerror的問題!天呀!這是NetscapeNavigator2.0的一個"臭蟲"(bug)。我們期待新的版本能更正此bug(譯按:NetscapeNavigatorAtlasPreviewRelease已更正此bug)。在網路上有許多這方面的應用，您可以試著找找。我曾經看過有人將scroller放在Homepage中，這應該不會太難。(譯按:有興趣的人可叁考目錄中本人所制做的scroller)
第五章
陣列(arrays)的運用是程式設計中一項種要的技術。每一種程式語言均以某種特定方式來表示陣列。或許您已了解陣列在程式設計中的好處，但翻遍Netscape所提供的文件，并沒有提及如何使用陣列。這是因為JavaScript并不支援陣列。但是現在我將教您如何在JavaScript中使用陣列。首先，陣列是干用的?您可以把它看成一長串的變數(variables)。假設您現在需要宣告10個變數，您可以一個個將10個變數宣告為a,b,c...，但當您需要100個或更多的變數時，這種方法將會變得很麻煩。若您使用一個擁有10個元素(elements)的陣列(暫且命名為'MyArray')來表示這10個變數，則可以用MyArray[1]，MyArray[2]，MyArray[3]...分別代表第一,二,三....個變數(很多程式語言是從0開始當作第一個元素，但在JavaScript語法中是從1開始)。因此若您想將第一個元素(或稱變數)的值指定為17，您只要寫成MyArray[1]=17即可。由此可看出陣列的功用和一般變數是相同的。不光如此，若您想將所有元素的值均指定為17，您只要寫一個簡單的圈(loop)即可:
for(vari=1;i<11;i++)MyArray[i]=17
for-這個指令是告訴電腦其後的指令總共要執行幾次。for-圈是從1開使，也就是電腦會先執行MyArray[1]=17。然後i會增加1并接著執行MyArray[2]=17。i每次遞增1直到i=10為止。接下來教您如何做陣列的初始化(initialization)。這個問題曾在JavaScriptMailinglist中討論過。(如果您想訂閱mailinglist，您只要在e-mail中填入subscribejavascript-digest并寄到majordomo@obscure.org即可。接著您每天就會收到一到二個約20-30kB的大檔案，這些檔案包括所有來自JavaScript-list的信件)。
functioninitArray(){
this.length=initArray.arguments.length
for(vari=0;i<this.length;i++)
this[i+1]=initArray.arguments[i]
}
您不需要了解這個函式(function)的意義，您只要知道怎麼用就好。如果您要宣告一個擁有三個元素的陣列，且其值分別指定為17,18,19，您只要寫成:varMyArray=newinitArray(17,18,19)。您也可以用字串(strings)當作元素的值:varheyho=newinitArray("This","is","酷")。因此您不必管元素值的型式(type)，即使混著用也行:varMixedup=newinitArray(17,"yo",103)。下面我將對一個陣列'Mixedup'作初始化，并顯示陣列的內容:
ElementNo.1:17
ElementNo.2:yo
ElementNo.3:103
其原始碼如下:
<scriptlanguage="JavaScript">
<!--Hide
varMixedup=newinitArray(17,"yo",103);
document.write("ElementNo.1:"+Mixedup[1]+"<br>");
document.write("ElementNo.2:"+Mixedup[2]+"<br>");
document.write("ElementNo.3:"+Mixedup[3]+"<br>");
//-->
</script>
當我昨天寫一個小游戲時，我遇到一個您也可能會碰到的問題。當您想清除視窗或frame中的內容時，Netscape文件中提到了一個函式可用--'document.clear()'。但當您將此函式寫入網頁中，它并不會如預期的清除視窗或frame中的內容。而且document.clear()在各種平臺(platform)上似都無效。GordonMcComb告訴我一個清除視窗或frame中內容的好方法，您可以試試:
document.close();
document.open();
document.write("<P>");
您不一定要寫最後一行document.write("<P>");，只有當您想在視窗中寫入某些東西時才需要加入此行。上述方法對frame亦有效。
接下來我們談一個可以讓您在不同文件之間穿梭的語法--back()和forward()兩個函式。通常我們在網頁中加的back-link和Netscape-Navigator中的"Back鍵"功能上并不相同。Netscape-Navigator中的"Back鍵"是回到您historylist中的上一頁。您現在也可利用JavaScript做到相同的功能。只要按下此link，您可以再度回到此頁。JavaScript語法的原始碼如下:
<html>
<body>
<FORMNAME="buttonbar">
<INPUTTYPE="button"VALUE="Back"onClick="history.back()">
<INPUTTYPE="button"VALUE="JS-Home"onClick="location='script.html'">
<INPUTTYPE="button"VALUE="Next"onCLick="history.forward()">
</FORM>
</body>
</html>
您也可以用history.go(-1)和history.go(1)代替.
第六章
許多網友問我一個有趣的問題:如何用mouse按一下便可同時載入兩頁文件。基本上有三種方法可以達到這種功能。第一種方法是制作一個按鈕，讓使用者按下後去啟動一個能同時將兩份文件載入不同frames或新視窗的函式(function)。若您曾經看過此份簡介文件的其它章節的話，我相信您可以很輕易寫出這種語法:我們制作了三個frame，第一個frame中包含了一個按鈕。請注意，第一個HTML檔案只是用來打開frame和給予每個frame一個名字。若您還不清楚JavaScript和frame的關系，可以先閱讀第三章。不過在此還是照例讓您瞧瞧原始碼(不知您是否在很多電腦書籍中遇到一個相同的困擾，那就是作者常把一些自認很簡單的東西忽略不提，結果那些東西正是讀者搞不懂的地方!所以，若您對我提的東西已很了解，請發揮一下您的耐性:-)
frames2.html
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESETCOLS="295,*">
<FRAMESETROWS="100%,*">
<FRAMESRC="loadtwo.html"NAME="fr1">
</FRAMESET>
<FRAMESETROWS="75%,25%">
<FRAMESRC="cell.html"NAME="fr2">
<FRAMESRC="cell.html"NAME="fr3">
</FRAMESET>
</FRAMESET>
</HTML>
第一個frame會載入loadtwo.html并產生一個按鈕:
loadtwo.html
<HTML>
<HEAD>
<scriptlanguage="JavaScript">
<!--Hiding
functionloadtwo(page2,page3){
parent.fr2.location.href=page2;
parent.fr3.location.href=page3;
}
//-->
</script>
</HEAD>
<BODY>
<FORMNAME="buttons">
<INPUTTYPE="button"VALUE="同時載入兩份文件"onClick="loadtwo('frtest1.html',
'frtest2.html')">
</FORM>
</BODY>
</HTML>
按下按鈕後，電腦會傳遞兩個字串給loadtwo()并將之啟動。由loadtwo()中可以看出，第一個字串是用來定義第二個framefr2所載入文件的位址和檔案名。若您想定義另外的按鈕來載入不同的文件，您可以重復使用此函式。只要將文件的URLs(addresses)傳給loadtwo()即可。接下來談談用hyperlinks同時載入兩頁文件的第二種方法。在Internet上您可以發現許多網頁使用<ahref="yourlink.html"onCLick="yourfunction()">來達到上述提及的功能。但此語法并不能在所有平臺上均正常執行，因此最好不要用此語法。現在我告訴您另一種寫法:我們可改用下述JavaScript語法:
<ahref="javascript:myfunction()">MyLink</a>
此種方式非常簡單而且在所有瀏覽器中均能正常執行。您只要寫上javascript:并加上您想聯結的函式名即可。若此函式名稱設為'loadtwo()'，那您就可藉由按下此hyperlink來達到同時載入兩份文件的目的了。再接著談談用mouse按一下便可同時載入兩頁文件的第三種方法，此方法可以以hyperlinks或按鈕來執行。您可先在第二個frame中載入一個HTML文件:
<ahref="getfr2.html"target="fr2">請按這里!</a>
然後在此文件中(getfr2.html)加入onLoad這項指令，用來觸發第三個frame載入另一份文件。如此一來便可同時載入兩份文件。getfr2.html檔的原始碼如下:
<HTML>
<BODYonLoad="parent.fr3.location.href='getfr3.html';returntrue;">
文件內容.....。
</body>
</html>
當然，您必須在所有會被載入到第二個frame的文件中加入onLoad這項指令。另一個常遇見的問題是如何開一個新視窗并載入文件?我們想達到的效果是當使用者按一下mouse便會'彈'出一個新視窗。很簡單，只要在<ahref...>中利用target這項特性就可達到此效果。例如:
<ahref="goanywhere.html"target="ResourceWindow">Go!</a>
現在我將談談在JavaScript中幾種常用的運算子(operator)。運算子可以使您的JavaScript語法更精簡。假設您想測試變數x是否大於3且小於10，您可寫成:
if(x>3)
if(x<10)
doanything();
當滿足x>3且x<10時，就會執行doanything()。還有一種更精簡的寫法:
if(x>3&&x<10)doanything();
'&&'稱為AND-運算子。還有另一種被稱為OR-運算子的東東可讓您用來檢視是否變數x等於5或變數y等於17:
if(x==5||y==17)doanything();
當滿足x==3或y==17時，就會執行doanything()。當然，當兩者皆成立時也會執行doanything()。在JavaScript中是利用==來做比較的工作(其它尚有<，>，<=和>=)，這些都和C/C++的語法相同。另外單一'='是用來將數值存入變數用的。(在Pascal語法中將數值指定給變數是用:=，而做比較是用單一的'='，這和JavaScript語法有點不同)若您想利用'不等於'這項特性，您可以用!=。例如:x!=17.尚有許多可以精簡您的JavaScript語法的運算子，去翻翻Netscape的文件吧!
第七章
輸入表單(form)對某些Internet上的網頁而言是很重要的。通常form的輸入內容會被送回server中做處理。JavaScript具有確認輸入值的功能，可以事先確保這些值是屬於"合法的"，進而避免將錯誤的輸入值送回server。首先我將告訴您如何對form的輸入做確認的工作，再來我將會提到用JavaScript將資料送回server的可能性。咱們開始吧!我先寫一個簡單的語法。在下面我加了兩個text-元件(element)，請將您的大名寫入第一個空格，并將您的e-mailaddress寫入第二個空格。您可在這兩個空格中任意輸入并按下按鈕。您也可以不輸入任何東西就按下按鈕試試!
請輸入您的大名:
請輸入您的e-mailaddress:
對第一個空格而言，若您沒有鍵入任何東西，電腦便會出現一個錯誤訊息，并請您再輸入一次。當然，此空格會把任何輸入的字串都視為"合法的"輸入，它無法辨認出您輸入的名字是正確的或是胡的。即始您輸入的是數字，它也會把此數字當成您的大名。例如您輸入'17'，它將會顯示'嗨!17'。第二個空格就設計得稍微復雜一點了。您可試著輸入一個簡單的字串-例如您的大名，它將會顯示錯誤訊息，并請您再輸入一次(除非您輸入的字串含有@...)。這個空格的確認標準是檢視您輸入的字串中是否含有@。即使只輸入一個@，它也會被視為合法的輸入---雖然這也不是正確的e-mailaddress。所有Internet的e-mailaddress皆含有@，因此對e-mailaddress輸入值做此種確認工作是很適合的。接下來看看上述功能的原始碼吧:
<html>
<head>
<scriptlanguage="JavaScript">
<!--Hide
functiontest1(form){
if(form.text1.value=="")
alert("您沒寫上任何東西，請再輸入一次!")
else{
alert("嗨"+form.text1.value+"!您已輸入完成!");
}
}
functiontest2(form){
if(form.text2.value==""||
form.text2.value.indexOf('@',0)==-1)
alert("這不是正確的e-mailaddress!請再輸入一次!");
elsealert("您已輸入完成!");
}
//-->
</script>
</head>
<body>
<formname="first">
Enteryourname:<br>
<inputtype="text"name="text1">
<inputtype="button"name="button1"value="輸入測試"onClick="test1(this.form)">
<P>
Enteryoure-mailaddress:<br>
<inputtype="text"name="text2">
<inputtype="button"name="button2"value="輸入測試"onClick="test2(this.form)">
</body>
先看看body-之後的HTML語法。我們嵌入了兩個text元件和兩個按鈕。第一個按鈕呼叫test1(...)，第二個按鈕呼叫test2(...)。this.form這個變數會將此form的名字(在此例中就是first)傳給函式(function)，以便能正確將元件"定址"(address)。test1(form)的功用在於檢查您是否輸入字串(亦即檢查是否為"空字串")?此項工作是由if(form.text1.value=="")...所執行。'form'這個變數將會接收由'this.form'所傳來的值。但我們如何在test1(...)中抓取我們所輸入的字串呢?您可利用'value'這個變數再加上'form.text1'來抓所輸入的字串。然後將它和""比較，檢查是否為"空字串"。若是"空字串"則表示并無輸入任何東西，那麼Netscape將會出現警告并要求您再輸入一次。若test1(...)檢查結果并非"空字串"，則會出現"您已輸入完成!"的訊息。請注意，即使只輸入一個空白(space)，test1(...)也會將之視為合法輸入。當然，您也可以略施小技來排除上述可能性，我相信這很容易。現在請看test2(form)。在此函式中我們利用相同的方法來檢測輸入值是否為空字串，但是我在if-指令中加入了額外的檢測功能。||這個符號代表OR運算子(operator)，您可在第六章中學習它的用法。if-指令用來檢測第一與第二個比較式是否其中之一為"真"?若有其中之一為"真"，則整個if-指令即為"真"，如此便會執行其後的指令。換句話說，若您沒有輸入任何字串或您輸入的字串中沒有包含'@'，均會被視為"不合法"輸入。您知到有幾種方法可用來送出form的內容嗎?最簡單的方法就是利用e-mail來送出form的內容。我下面介紹的方法就是屬於這一種。若您不想利用e-mail來送出form的內容且想讓server能自動處理form的輸入值，此時此刻只有CGI能做得到。譬如您想做一個類似Yahoo可以讓使用者迅速得到結果的搜尋引擎(searchengine)，您就必須使用CGI。如此一來使用者才不需等待系統管理者處理form的輸入值，而可由server自動處理并迅速將處理結果報告給使用者。目前JavaScript無法達到此種功能。即使您想制做一個"訪客簽名簿"(guestbook)，也不可能利用JavaScript來叫server自動將資頁中。目前只有CGI能做到如此。但您可以制做一個利用e-mail傳送使用者資料的guestbook，只是您需以手動(manual)方式來處理使用者所傳來的資料。若您一天不是收到很多使用者送來的資料的話，這也未嘗不可。以下語法只使用到普通的HTML語法，并不需用到JavaScript!只有當您想在資料送出前做一些確認工作的話，才需用到JavaScript。雖然目前有些瀏覽器無法使用mailto-這項指令，我相信較新版的瀏覽器都會支援這個指令。
<FORMMETHOD=POSTACTION="mailto:your_email@goes.here">
<H3>您喜歡我的網頁嗎?</H3>
<INPUTNAME="choice"TYPE="RADIO"VALUE="1">一點也不喜歡。<BR>
<INPUTNAME="choice"TYPE="RADIO"VALUE="2"CHECKED>簡直浪費我的時間。<BR>
<INPUTNAME="choice"TYPE="RADIO"VALUE="3">這簡直是Net上最爛的站臺。<BR>
<INPUTNAME="submit"TYPE="SUBMIT"VALUE="Send">
</FORM>
上述語法可藉由e-mail收到使用者對您網頁的觀感。唯一的困擾是您可能會收到內容類似密語(cryptic)的mail。mail內容的空格(space)有時會以'+'代替，有時會以'%20'代替。看+起+來+就+像+這+樣。我相信網路上應有某種程式可將收到的mail轉換成"可讀"的語句。
另外有一種不錯的應用可使您的表單輸入更具"親和性"(user-friendly)。您可以指定一開始先"定焦"(focus)於哪個元件(element，簡單的說就是輸入項)。或是您可讓瀏覽器"定焦"於使用者輸入錯誤的表單。換句話說，瀏覽器將會把mouse的游標放在您"定焦"的元件上，如此一來使用者便不需在輸入字串之前按一下mouse。請看這項功能的原始碼:
functionsetfocus(){
document.first.text1.focus();
return;
}
這項語法是將"定焦"放在第一個text-元件上(以本章為例，就是在"請輸入您的大名"的空格中有游標在閃爍)。您必需在語法中指定您想"定焦"的表單名字(以本章為例，就是first)和元件的名字(以本章為例，就是text1)。若您在一開始載入網頁時就想"定焦"於某個元件上，只要在<body>-tag中利用onLoad-即可:
<bodyonLoad="setfocus()">