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