JavaScript

   


基本結構 (Structure)


第一個例子: Hello, World

讓我們一同看看以下的 Hello, World 例子, 了解 JavaScript 的基本結構:

<html>
<head>
<title> The First Example: Hello, World </title>
</head>
<body>
<h2> This line is HTML </h2>

<script language="JavaScript">

<!--
document.write("Hello, World.This sentence is written using JavaScript.");
// Text on the right of 2 slashes is comment
/* This is comment
that occur more than 1 line
*/
//-->
</script>
<noscript>
Sorry, but your browser doesn't run JavaScript.
</noscript>

<h2> This line is HTML </h2>
</body>
</html>

例子說明:

  • 因為 JavaScript 是寫在 HTML 檔的, 所以 Netscape 定義了一個 <script> 標記 。
    瀏覽器會將 <script></script> 中間的東西視作要執行的 JavaScript, 而不是HTML 。
  • 通常適合撰寫 JavaScript 的位置有三個:

第一, 寫在 <head> 範圍, 好處是可以保證在載入 <body> 內容之前已經完全載入 <head> 的 JavaScript, 另一個好處是當你用某些 WYSIWYG 的網頁編輯器修改 <body> 內容時不會影響到寫在 <head> 的 JavaScript。

第二, 寫在 <body> 範圍, 當你要用 JavaScript 寫東西到 <body> 時就會用到。

第三, 寫在 </html>之後, 好處是不會影響 <html> 範圍的內容, 適合一般免費網頁供應商在網頁加入廣告窗 (pop-up window) 。

  • <script> 有兩個屬性 (Attribute):
    1. 第一個屬性: language

      以上的 Hello, World 例子中用了 language="JavaScript",其實 language 屬性可以有以下的值:

      language 的值 解釋 不支援的瀏覽器
      JavaScript 是用 JavaScript 寫的 不支援 JavaScript 的瀏覽器
      JavaScript1.1 JavaScript 版本 1.1 NN 3 之前 , IE 4 之前  (如 NN 2, IE 3)
      JavaScript1.2 JavaScript 版本 1.2 NN 4 之前 , IE 4 之前  (如 NN 3, IE 3)
      JavaScript1.3 JavaScript 版本 1.3
      專為 NN 4.5 而設
      NN 4.5 之前
      LiveScript LiveScript 是 JavaScript 的舊名,
      將來不知會否被支援
       
      VBscript 是用 Visual Basic Script 寫的,
      只有 Internet Explorer 支援
      所有版本的 Netscape Navigator

      註: NN = Netscape Navigator . IE = Internet Explorer

      不支援的瀏覽器會忽略該版本的 JavaScript,如果不註明該 JavaScript 是哪一個版本, 而當瀏覽器讀到它不支援的 JavaScript 時,便會產生錯誤。 有時為了方便, 你也可以不寫 language 屬性, 瀏覽器也會當它是 JavaScript 。

    2. 第二個屬性:src

      你可以將 JavaScript 放在另一個檔案,然後將 src 設定為該檔的 URL。例如:

      <script language="JavaScript"
      src="http://www.somehost.com/directory/library.js">
      </script>

      好處:第一,所有 HTML 檔只須加入這一句就可以享用 library.js 內的 JavaScript ,第二,當瀏覽器關閉或不支援 JavaScript 功能時,瀏覽器就不用下載 JavaScript 的檔案,節省下載時間, 第三就是方便在某一頁寫入資料。

  • <!-- 和 //-->

    <!-- 和 --> 其實是 HTML 的註解標記 (comment tag), 而  // 則是 JavaScript 的註解標記, 為什麼要在 JavaScript 的範圍內寫 HTML 的註解標記呢? 因為有些很舊的瀏覽器在未有 JavaScript 時出產, 這些瀏覽器當然不知道有 JavaScript 這東西, 它們會誤以為寫在 HTML 檔內 JavaScript 是 HTML 碼, 所以我們會好像 以上例子中加入 HTML 的註解標記, 令那些舊的瀏覽器忽略 JavaScript。 同理, 那個  // 是用來令 JavaScript 編譯器忽略 --> 標記的。

    JavaScript 的註解標記有兩款:第一是 // ,第二是 /*   */。 第一款用來表示在 // 右邊的東西都是註解; 而第二款是用來表示所有在 /* */ 範圍內的東西都是註解, 如果你想打很多行註解,用這款比較方便。

  • document.write("Hello, World");

    這一句用到 第二篇: 物件的方法與屬性 中所教的東西, 不過現在簡略說明一下, 讓大家有個初步的概念。

    句中的 document (頁/文件) 是指當時瀏覽器視窗或窗柜顯示的一頁內容,但未必是一個實在的檔案內容, 因為該頁的全部內容可能是用 JavaScript 動態地寫出來的, 所以說 document 是顯示的內容, 而非檔案內容。

    document 是一個物件write document 物件的一個方法, 它們中間有一點 (.), 是用來連貫它們的。

    "Hello, World" write 的參數 (Argument / Parameter), Hello, World 字串被雙引號括著, 即是說 Hello, World 是一個字串。句尾的分號 (;) 是用來表示該行的結尾。

    總括來說, 這一行的作用就是叫瀏覽器在顯示中的一頁 (document) 寫 (write) 一句 Hello, World 的字串。 當然你也可以用 document.write 寫 HTML 標記, 這就可以動態地造出 HTML 網頁了。 以下句子會寫出斜體的字串 Hello 字串:

    document.write("<i>Hello</i>")
  • <noscript>  和  </noscript>

    在某些情況下瀏覽器不能夠執行 JavaScript , 原因主要有兩個: 第一是舊的瀏覽器不知道有 JavaScript , 第二就是使用者關閉了 JavaScript 功能。 這時瀏覽器就會顯 <noscript> 範圍的內容, 讓網頁管理員通知瀏覽者該網頁有些內容不能如常運作。 你可以嘗試關閉 JavaScript 功能, 然後開啟 Hello, World 例子, 就會見到一句 Sorry, but your browser doesn't run JavaScript.

    這兩個標記一定要寫在  <body>  範圍。







[到頁頂] [首頁] [速查表]