國立屏東大學 資訊工程學系 動態網頁設計(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> ...