程式基本架構

JavaScript 的最基本程式結構。

我的第一個 JavaScript 程式

JavaScript 程式碼是 HTML 網頁的一部分，把程式寫在 SCRIPT 標籤裡面，然後用網頁瀏覽器開啟即可。

程式基本架構

<script> 　程式碼 </script>

來個實例，請用純文字編輯器輸入如下程式，然後存為 html 副檔名的文件：

再用瀏覽器開啟即可顯示程式運算出來的結果：

更完整的程式基本架構

上一節的程式基本架構過於精簡，只適用於試演程式，通常建議使用更完整的程式基本架構，將 JavaScript 定義在完整的 HTML5 格式裡面。

符合 HTML5 規範的 JavaScript 程式基本架構

<!DOCTYPE html> <html> <head> <script> 程式碼 </script> </head> <body> 操作介面 </body> </html>

如此可以提供更多、更明確的資訊給網頁平台，例如文件編碼格式使用 UTF-8 時，如果作業系統的文字編碼格式預設為 ANSI，中文顯示出來會變成亂碼，這時需要在 HTML5 網頁裡面明確指定字元編碼：

<meta charset='utf-8'>
此外像是使用 TITLE 標籤顯示視窗標題列的名稱、指定網頁的圖示、載入 CSS 樣式，都是相當常用到的基本工作，所以更完整的基本程式架構應該是這樣：

<!DOCTYPE html> <html lang='zh-TW'> <head> <meta charset='utf-8'> <title>視窗標題列名稱</title> <link href='圖示檔' rel='icon'> <link href='階層樣式表' rel='stylesheet'> <script> 程式碼 </script> </head> <body> 操作介面 </body> </html>

將程式碼寫在外部檔案

程式碼過於龐大的話，通常為了方便管理，會將不同應用性質的程式碼分開儲存在不同檔案裡面，然後再從外部載入即可：

載入外部程式檔案

<script src='程式檔'></script>

如果沒有特殊需求，建議使用 *.js 做為副檔名。

來個範例，首先將 JavaScript 程式獨立寫在 library.js 檔案裡面：

function hello() { document.write('Hello, HTML5!'); }
然後在 HTML5 網頁裡面載入 library.js 並使用裡面的程式：

<!DOCTYPE html> <html lang='zh-TW'> <head> <meta charset='utf-8'> <script src='library.js'></script> <script> hello(); </script> </head> </html>
執行結果如下，跟最前面的範例是一樣的：