JavaScript是什么?
JavaScript是一種新的描述語言,此一語言可以被箝入HTML的文件之中透過JavaSc- ript可以做到回應使用者的需求事件(如form的輸入)而不用任何的網路來回傳輸資料所以當一位使用者輸入一項資料時,它不用經過傳給伺服端server)處理,
再傳回來的過程,而直接可以被客戶端(client)的應用程式所處理,你也可以想像成有一個可執行程式在你的客端上執行一樣。目前已有一些寫好的程式在 Internet,上你可以連過去看看,以下有一些計算器的例子。
JavaScript是Netscape的超級武器
在JavaScript是上,JavaScript和Java 很
類似,但到底并不一樣。Java是一種比JavaS-
cript更復雜許多的程式語言。而JavaScript則
是相當容易了解的語言,JavaScript創作者可
以不那麼注重程式技巧。所以許多Java的特性
在JavaScript中并不支援,如需相關的更多資
訊,可以去讀讀 Netscape 的有關 Netscape
JavaScript 之介紹。
如何執行 JaveScript?
JavaScript如何執行呢?Netscape 2.0 beta 3版以上,就可以執行JavaScript的
功能了。我們測試過,至少beta 3版以上可以?;蛟Sbeta 2版就已經有此功能了)
范例 1
以下我們就以一些例子來告訴你如何將JavaScript寫在HTML文件中,并且體會一下新
語言的特性,我們從第一個例子開始,如何用JavaScript印出一串文字至HTML 文件中。
<html>
<head>
My first JavaScript!
</head>
<body>
This is a normal HTML document.
<script language="LiveScript">
document.write("這是以 JavaScript 印出的!")
</script>
Back in HTML again.
</body>
</html>
如果你使用的WWW瀏覽器是Netscape 2.0 beta 3以上版本的話,那你就可以看到相
關的結果,而如果你的瀏覽器并非是可以支援JavaScript的話,那看起來就會有一些怪怪
的了。以上范例的結果如下
This is a normal HTML document. 這是以 JavaScript 印出的! 這是以 JavaScript 印出的!Back in HTML
again.
此一范例并沒有太大的用處,它只是要告訴你如何使用<script>的標簽,并如何將它
置於HTML的文件之中而已,這個新的標簽你可以特它放在文件中的任何地方。
范例 2
接下來下一個例子所要介紹的是有關函數(function)的使用,請放心,函數并非很難
懂的東西,但它卻相當有用,函數通常是在HTML文件中<body>的部份被呼叫,而理所當然
地,它最好事先被宣告并放在HTML文件中<body>的部份,好讓在 <body>部分中使用到函
數時,它已確定被讀取住來。另外<script>標簽的有關描述語法剖份,你可以用注解的符
號將它括起來,以免舊版或無法讀取JavaScript的瀏覽器讀到,而誤會了意思。
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("嗨! 你好");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="pushbutton()">
</form>
</body>
</html>
如果你是使用Netscape 2.0 beta 3以上的瀏覽器,那以上JavaScript語法部份的
結果如下,你可以試著按按鈕看看有何結果產生?!?br />
在范例2中,將會產生一個按鈕,當你用滑鼠去按它的時候,應該會出現一個視窗上
面有“嗨! 你好”的字串,如何?不錯吧。這個結果是如何產生的呢?首先,在 <head>
內的函數會被載入并存於記憶體中,接著一個新的<form>標簽 <input type ="butto-
n".....>將產生一個接鈕,然後,你可以在後面看到 'onClick' 的指令,這就是告訴瀏
覽器,當該按鈕被按時,應會執行onClick 後的函數 'pushbutton()' 而這個函數在剛剛
程式被載入時就已安放在記憶體中了,請注意,在這個函數中我們用到了個新東西─alert
的method。是JavaScript事先定義好的,它會以對話視窗產生內涵的訊息,并有一“確定
"(OK)的按鈕。
JavaScript定義了許多的method,你可以連至Netscape公司去獲取較完整的訊息。我想
這些method在不久的將來會有長長的一串可以夠你學的,不過目前的method也已經可以做
出相當多東西了。
接著下個例子將告訴你如何由一個輸入型表格中讀入使用者的輸入資料事實上,這也
是加入個函數就可以達成的:
范例 3
<html>
<head>
<script language="LiveScript">
<!-- hide script from old browsers
function getname(str) {
alert("哈羅! "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
現在你可以試試結果如何
請輸入你的名字
在這個例子中又有新的東西了,首先,讓我們注意一下,在語法中的注解部分
(<!- ... ->) 此部分,即我們之前所提到的,它可以避免舊版本或是不支援JavaScript
的WWW瀏覽器。因為不認識這些函數而產生錯誤,它的順序應該為<script>。先接著為注解
的開頭<!- 然後是內容 注解尾 ->,最後是</script>另外要注意的一點是:語解尾那
一行的開頭雙斜線 "http://" 不可以省略,它代表了JavaScript的注解,若省略了的話 ->之
前的字會被誤認為是JavaScript的指令
這個例子可以讓使用者輸入一段文字,然後再輸入完畢後經由<input>標簽中的"onB-
lur"事件函數偵知,於是呼叫Getname(Str)這個函數來加以取得輸入字串。并將它顯示在
對話視窗上,函數 Getname(this.value) 中的 "this.value" 是你在文字輸入格式中所輸
入的值。
范例 4
這個范例更是帥了,我們在 HTML 文件檔完成了以後,常會加上一行文件最後修改的
日期,現在你可不用擔心每次都要去改或是忘了改了。你可以很簡單的寫一個如下的描述
語法程式。就可以自動的為你每次產生最後修改的日期了?!?br />
<html>
<body>
This is a simple HTML- page.
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
以上的 document.lastModified 參數在 Netscape 2.0 beta 2 版時是被寫成
documeut-.lastmodified 的。然而,之後的版本就改為document.lastModified所以注
意一下,JavaScript本身是會區分大小寫的,lastmodified 與 lastModified在它看來是
不同的結果最後。在這一部分結束之前,要提醒你一點:像范例4的用法并非每一部機器
都是一樣的。例如:PC上跑得很正確的,在工作站上不一定會有相同的結果。所以,或許
你仍得測一測不同機器的結果才會有所定論。當然,這一切是因為 JavaScript 還正在發
展的原因,最新的訊息還是得去拜訪一下Netscape 公司才知道。也許你也不用奇怪,當你
隔周再來訪時JavaScript可能又作了相當大的改變了呢。
|返回|
第 1 集
--------------------------------------------------------------------------------
JavaScript 是什麼?
JavaScript 是一種新的描述語言,此一語言可以被箝入 HTML 的文件之中。
透過 JavaScript 可以做到回應使用者的需求事件 (如: form 的輸入) 而不用任何的網路
來回傳輸資料,所以當一位使用者輸入一項資料時,它不用經過傳給伺服端 (server)
處理,再傳回來的過程,而直接可以被客戶端 (client) 的應用程式所處理。你也可
以想像成有一個可執行程式在你的客端上執行一樣!目前已有一些寫好的程式在
Internet 上你可以連過去看看,以下有一些計算器的例子,在 Nescape 上。
JavaScript 和 Java 很類似,但到底并不一樣! Java 是一種比 JavaScript 更復雜
許多的程式語言,而 JavaScript 則是相當容易了解的語言。JavaScript 創作者
可以不那麼注重程式技巧,所以許多 Java 的特性在 Java Script 中并不支援。
如需相關的更多資訊,可以去讀讀 Netscape 的有關 Netscape JavaScript 之介紹。
--------------------------------------------------------------------------------
如何執行 JaveScript?
JavaScript 如何執行呢?
Netscape 2.0 beta 3 版以上,就可以執行 JavaScript 的功能了,我們測試過至少
beta 3 版以上可以,其他種類的 WWW 瀏覽器如:Internet Expore 3.0也有此一功能。
--------------------------------------------------------------------------------
范例 1:
以下我們就以一些例子來告訴你如何將 JavaScript 寫在 HTML 文件中,并且體會
一下新語言的特性,我們從第一個例子開始:如何用 JavaScript 印出一串文字至
HTML 文件中:
<html>
<head>
My first JavaScript!
</head>
<body>
This is a normal HTML document.
<script language="LiveScript">
document.write("這是以 JavaScript 印出的!")
</script>
Back in HTML again.
</body>
</html>
如果你使用的 WWW 瀏覽器是 Netscape 2.0 beta 3 以上版本的話,那你就可以
看到相關的結果,而如果你的瀏覽器并非是可以支援 JavaScript 的話,那看起
來就會有一些怪怪的了,以上范例的結果如下:
This is a normal HTML document.
這是以 JavaScript 印出的!
Back in HTML again.
此一范例并沒有太大的用處,它只是要告訴你如何使用<script>的標簽,并
如何將它置於 HTML 的文件之中而已,這個新的標簽你可以特它放在文件
中的任何地方。
--------------------------------------------------------------------------------
范例 2:
接下來下一個例子所要介紹的是有關函數 (function) 的使用。請放心,函數并
非很難懂的東西,但它卻相當有用。函數通常是在 HTML 文件中 <body >的
部份被呼叫,而理所當然地,它最好事先被宣告并放在 HTML 文件中 <body>
的部份。好讓在 <body> 部分中使用到函數時,它已確定被讀取住來。另外,
<script> 標簽的有關描述語法剖份,你可以用注解的符號將它括起來,以免舊
版或無法讀取 JavaScript 的瀏覽器讀到,而誤會了意思!
<html>
<head>
<script language="LiveScript">
function pushbutton() {
alert("嗨! 你好");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="pushbutton()">
</form>
</body>
</html>
如果你是使用 Netscape 2.0 beta 3 以上的瀏覽器,那以上 JavaScript 語法部份
的結果如下,你可以試著按按鈕看看有何結果產生!
在范例 2 中,將會產生一個按鈕,當你用滑鼠去按它的時候,應該會出現
一個視窗上面有“嗨! 你好”的字串,如何?不錯吧!這個結果是如何產生
的呢?首先,在 <head>內的函數會被載入并存於內存中,接著一個新
的 <form>標簽 <input type ="button".....>將產生一個接鈕。然後,你可以
在後面看到 'onClick' 的指令,這就是告訴瀏覽器,當該按鈕被按時,應會執行
onClick 後的函數 'pushbutton()',而這個函數在剛剛程式被載入時就已安放在
記憶體中了!請注意,在這個函數中我們用到了個新東西- alert 的 method,
是 JavaScript 事先定義好的,它會以對話視窗產生內涵的訊息,并有一"確定"
(OK)的按鈕。 JavaScript 定義了許多的 method,你可以連至 Netscape 公司去
獲取較完整的訊息。我想這些 method 在不久的將來會有長長的一串可以夠你
學的,不過目前的 method 也已經可以做出相當多東西了!
接著下個例子將告訴你如何由一個輸入型表格中讀入使用者的輸入資料,
事實上,這也是加入個函數就可以達成的。
--------------------------------------------------------------------------------
范例 3:
<html>
<head>
<script language="LiveScript">
<!-- hide script from old browsers
function getname(str) {
alert("哈羅! "+ str+"!");
}
// end hiding contents -->
</script>
</head>
<body>
Please enter your name:
<form>
<input type="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>
This is a simple HTML- page.
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
以上的 document.lastModified 叁數在 Netscape 2.0 beta 2 版時是被寫成
documeut.lastmodified 的,然而,之後的版本就改為 document.lastModified,
所以注意一下 ;JavaScript 本身是會區分大小寫的, lastmodified 與 lastModified
在它看來是不同的結果。
最後,在這一部分結束之前,要提醒你一點,像范例 4 ,的用法并非每一部
機器都是一樣的,例如:PC 上跑得很正確的,在工作站上不一定會有相同的
結果,所以,或許你仍得測一測不同機器的結果才會有所定論。當然,這一切
是因為 JavaScript 還正在發展的原因,最新的訊息還是得去拜訪一下Netscape
公司才知道。也許你也不用奇怪,當你隔周再來訪時,JavaScript 可能又作了
相當大的改變了呢!