JavaScript 如何使用

怎麼讓瀏覽器執行 JavaScript 程式碼？JavaScript 程式碼可以寫在

<script>
...JavaScript 程式碼...
</script>

script 標籤 (HTML tag) 中被瀏覽器執行。而 <script> 標籤可以放在網頁 HTML 的任何地方，像是 <body> 或 <head> 中。

有些網路上的範例，會用 <script type="text/javascript" language="javascript">，但 type="text/javascript" 或 language="javascript" 都是多餘不需要的。

例如

<!doctype html>
<html>

<head>
<script>
    alert('Hello world!');
</script>
</head>

<body>
My first JS page!
</body>
</html>

你可以將上述範例貼到 JSFiddle 的 HTML 格子裡面，然後按 Run 試試看。

瀏覽器遇到 <script> 標籤時，會停止解析 HTML 文件，來先執行 <scipt> 裡面的 JS 程式碼，等到執行完程式碼，才會繼續解析接下來的 HTML 文件。

引用 JavaScript 檔案

語法：

<script src="JavaScript 檔案位址.js"></script>
JavaScript 檔案的副檔名，以 .js 結尾

例如，你寫一份 JS 程式碼，檔名取做 hello.js，內容例如像是:

alert('Hello world!');
注意，如果 JavaScript 程式碼是寫在獨立檔案裡面，就不用加上 <script> 標籤喔！

寫好之後，例如如果你儲存在網站的根目錄，你可以在網頁中這樣引用這份程式碼：

<script src="/hello.js"></script>

也可以引用外部的 JavaScript 檔案，例如引用 jQuery library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

將 JavaScript 程式碼集中寫在 .js 檔案中是好習慣也是最佳實踐 (best practice)，因為：

  1. 可以將 JS 程式碼和 HTML 分開，才不會雜在一起很難閱讀和查找。
  2. 不同邏輯的 JavaScript 程式碼，可以分開不同的檔案編寫和儲存，方便維護和管理。
  3. 瀏覽器在下載 JS 檔案後，會自動暫存 (cache) 一份在客戶端電腦中，之後就不需要再重複下載一次，加快之後的網頁載入速度。

線上練習寫 JavaScript

在剛開始學習 JavaScript 的時候，JSFiddle 是很方便的線上工具，讓你可以直接在線上編寫、執行和測試 JavaScript。使用方法很簡單，在頁面中 JAVASCRIPT 這個區塊可以寫任何的程式碼，然後按左上方的 Run 就可以直接執行囉！