目錄表

國立屏東大學 資訊工程學系 動態網頁設計(JavaScript)

1. Hello JavaScript!


JavaScript是內嵌在HTML檔案中的Client-Side程式,不同於Server-Side的程式(例如php),其程式碼是在瀏覽器端執行的。我們先以一個簡單的例子,示範如何在網頁中包含JavaScript程式碼。請參考下面的例子及其執行結果

<html>
<head>   </head>
<body>
JavaScript是內嵌在網頁(html檔案)中的程式碼<br>
在水平分隔線下方的部份,就是JavaScript的執行結果。
<hr>

<script language="JavaScript">
document.write("Hello, JavaScript!");
</script>

<noscript>
抱歉,您的瀏覽器並不支援JavaScript!
</noscript>

<hr>  
這就是我們的第一個範例!
</body>
</html>

請先自行在電腦上編輯上述程式,並使用瀏覽器加以執行。

1.1 JavaScript程式碼要寫在何處?

做為一個Client-Side的網頁技術,JavaScript的程式碼必須內嵌在HTML的網頁中,隨著使用者的要求由Web Server將HTML檔案傳送到Client-Side的瀏覽器上,再由瀏覽器加以執行。所以JavaScript的程式碼是寫在HTML檔案中,以<script>標記加以包裹,例如:

<html>
...
<script>
請將JavaScript程式碼置於此處
</script>
...
</html>

一般而言,瀏覽器大多都能支援JavaScript的執行,如果遇到不能執行的瀏覽器,則可以使用<noscript>標記向使用者說明無法執行JavaScript,例如:

<html>
...
<script>
請將JavaScript程式碼置於此處
</script>
<noscript>
很抱歉!您的瀏覽器並不支援JavaScript!
</noscript>
...
</html>

由於目前除了JavaScript外,還有其它的Client-Side的技術,因此HTML的<script>標記也有一個language的屬性,可以註明所使用的語言:

<script language="JavaScript">

language還有其它可能的值,包含JavaScript1.1、JavaScript1.2、JavaScript1.3、VBscript等。注意:當沒有註明language屬性時,瀏覽器預設會以JavaScript執行。

<script>還有另一個名為src的屬性,可以讓我們將JavaScript的程式碼放到另外的檔案中,例如:

<script language="JavaScript" src="http://www.somewhere.on.the.earch/path/filename.js">
</script>

1.2 如何完成簡單的輸出

在hello.html中的JavaScript是以「document.write(“Hello JavaScript!”);」來完成字串的輸出,其中「document」是一個物件,「write」則是它的一個method。「document」是一個常用的物件,代表著目前視窗或頁框(frame)所顯示的內容;「write」則是輸出並成為其內容的一部份的method。要注意的是JavaScript仍然需要以「;」來註明敘述的結束(如同Java/C/C++等)。由於它所輸出的內容,將會成為網頁內容的一部份,因此你必須要注意視情況結合HTML語法完成所需的輸出結果。請參考以下兩個例子,看看它們有何差異?

...
<script>
document.write("<H1>Hello JavaScript!</H1>");
</script>
...

...
<H1>
<script>
document.write("Hello JavaScript!");
</script>
</H1>
...