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 就可以直接執行囉!