高層次定義
JavaScript 是一種腳本或程式設計語言，可讓你實作網頁的複雜功能——每當網頁不只是靜靜地顯示靜態訊息供你觀看，而是顯示即時的內容更新、互動式地圖、動畫 2D/3D 圖形、滾動的影片點唱機等時——你幾乎可以肯定 JavaScript 參與其中。它是標準 Web 技術三層蛋糕中的第三層，其中兩層（HTML 和 CSS）我們已在學習區的其他部分更詳細地介紹過。
HTML 是我們用來結構化和賦予 Web 內容意義的標記語言，例如定義段落、標題和資料表，或在頁面中嵌入圖片和影片。
CSS 是一種樣式規則語言，我們用它來為 HTML 內容套用樣式，例如設定背景顏色和字體，以及將內容排版成多欄。
JavaScript 是一種腳本語言，可讓你建立動態更新的內容、控制多媒體、製作圖像動畫，以及幾乎所有其他事情。（好吧，不是所有事情，但用幾行 JavaScript 程式碼就能達成的效果令人驚嘆。）
這三層完美地相輔相成。讓我們以一個按鈕為例。我們可以用 HTML 來標記它，賦予其結構和目的：
html
然後我們可以加入一些 CSS 來讓它看起來更美觀：
cssbutton {
font-family: "helvetica neue", helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid rgb(200 200 0 / 60%);
background-color: rgb(0 217 217 / 60%);
color: rgb(100 0 0 / 100%);
box-shadow: 1px 1px 2px rgb(0 0 200 / 40%);
border-radius: 10px;
padding: 3px 10px;
cursor: pointer;
}
最後，我們可以加入一些 JavaScript 來實作動態行為：
jsfunction updateName() {
const name = prompt("請輸入新名稱");
button.textContent = `玩家 1：${name}`;
}
const button = document.querySelector("button");
button.addEventListener("click", updateName);
你可以點擊「Play」在 MDN Playground 中查看和編輯範例。試著點擊文字標籤看看會發生什麼事。
JavaScript 能做的遠不止於此——讓我們更詳細地探討一下。
備註：在繼續之前，何不在這個早期階段就透過 Scrimba 的挑戰來親自動手試試看呢？請查看 Render a welcome message MDN 學習夥伴。如果你不知道如何撰寫這段程式碼，完全不用擔心；你可以試著在網路上搜尋答案，或在 scrim 的最後查看解答。
所以它到底能做什麼？
核心的用戶端 JavaScript 語言包含一些常見的程式設計功能，可讓你做以下事情：
將有用的值儲存在變數中。例如，在上面的範例中，我們要求輸入一個新名稱，然後將該名稱儲存在名為 name 的變數中。
對文字片段（在程式設計中稱為「字串」）進行操作。在上面的範例中，我們將字串「玩家 1：」與 name 變數連接起來，以建立完整的文字標籤，例如「玩家 1：Chris」。
回應網頁上發生的特定事件來執行程式碼。我們在上面的範例中使用了 click 事件來偵測標籤何時被點擊，然後執行更新文字標籤的程式碼。
還有更多！
然而，更令人興奮的是建立在用戶端 JavaScript 語言之上的功能。所謂的應用程式介面（API）為你的 JavaScript 程式碼提供了額外的超能力。
API 是現成的程式碼建構區塊集合，讓開發者能夠實作原本很難或不可能實作的程式。它們對程式設計的作用，就像現成的家具套件對居家建築的作用一樣——拿現成的裁切好的板子用螺絲組裝成書架，遠比自己設計、尋找合適的木材、將所有板子裁切成正確的尺寸和形狀、找到合適尺寸的螺絲，然後再把它們組裝成書架要容易得多。
它們通常分為兩類。
瀏覽器 API 內建於你的 Web 瀏覽器中，能夠揭露周圍電腦環境的資料，或執行有用的複雜操作。例如：
DOM（文件物件模型）API 允許你操作 HTML 和 CSS，建立、移除和變更 HTML，動態地為你的頁面套用新樣式等。每當你在頁面上看到彈出視窗，或顯示一些新內容（如我們在上面的簡單示範中所見），那就是 DOM 在作用。
地理位置 API 可擷取地理訊息。這就是 Google 地圖 如何能夠找到你的位置並在地圖上標示出來的方式。
Canvas 和 WebGL API 允許你建立動畫 2D 和 3D 圖形。人們正在使用這些 Web 技術做一些令人驚嘆的事情——請參見 Chrome Experiments 和 webglsamples。
音訊和影片 API 如 HTMLMediaElement 和 WebRTC 允許你對多媒體做一些非常有趣的事情，例如直接在網頁中播放音訊和影片，或從你的網路攝影機擷取影片並顯示在別人的電腦上（試試我們簡單的 Snapshot 示範 來了解一下）。
第三方 API 預設並未內建於瀏覽器中，你通常需要從網路上的某處取得它們的程式碼和訊息。例如：
Bluesky API 允許你做一些事情，例如在你的網站上顯示你最新的貼文。
Google Maps API 和 OpenStreetMap API 允許你在你的網站中嵌入自訂地圖，以及其他類似的功能。
備註：這些 API 比較進階，我們不會在本模組中涵蓋任何這些內容。你可以在我們的用戶端 Web API 模組中找到更多相關資訊。
還有更多可用的 API！不過，先別太興奮。學習 JavaScript 24 小時後，你還無法建立下一個 Facebook、Google 地圖或 Instagram——還有很多基礎知識需要先學習。這就是你來這裡的原因——讓我們繼續吧！
JavaScript 在你的頁面上做什麼？
在這裡，我們將實際開始看一些程式碼，並在過程中探討當你在頁面中執行一些 JavaScript 時，實際上發生了什麼。
讓我們簡要回顧一下在瀏覽器中載入網頁時會發生什麼（這在我們的什麼是 CSS？文章中首次討論）。當你在瀏覽器中載入網頁時，你正在一個執行環境（瀏覽器分頁）中執行你的程式碼（HTML、CSS 和 JavaScript）。這就像一個工廠，接收原料（程式碼）並產出產品（網頁）。
JavaScript 一個非常常見的用途是透過文件物件模型 API（如上所述）動態修改 HTML 和 CSS 來更新使用者介面。
瀏覽器安全性
每個瀏覽器分頁都有自己獨立的程式碼執行空間（在技術術語中稱為「執行環境」）——這意味著在大多數情況下，每個分頁中的程式碼是完全分開執行的，一個分頁中的程式碼不能直接影響另一個分頁中的程式碼——或另一個網站上的程式碼。這是一個很好的安全措施——如果不是這樣，那麼駭客就可以開始撰寫程式碼來竊取其他網站的訊息，以及其他諸如此類的壞事。
備註：有一些方法可以安全地在不同網站／分頁之間傳送程式碼和資料，但這些是進階技術，我們不會在本課程中涵蓋。
JavaScript 執行順序
當瀏覽器遇到一個 JavaScript 區塊時，它通常會按順序從上到下執行。這意味著你需要注意放置事物的順序。例如，讓我們回到我們在第一個範例中看到的 JavaScript 區塊：
jsfunction updateName() {
const name = prompt("請輸入新名稱");
button.textContent = `玩家 1：${name}`;
}
const button = document.querySelector("button");
button.addEventListener("click", updateName);
在這裡，我們首先定義一個名為 updateName() 的程式碼區塊（這類可重複使用的程式碼區塊稱為函式），它會詢問使用者一個新名稱，並將該名稱插入按鈕的文字中。然後我們使用 document.querySelector 儲存一個按鈕的參考，並使用 addEventListener 為其附加一個事件監聽器，這樣當按鈕被點擊時，就會執行 updateName() 函式。
如果你交換 const button = ... 和 button.addEventListener(...) 這兩行的順序，程式碼將無法運作——相反地，你會在瀏覽器開發者主控台中得到一個錯誤——Uncaught ReferenceError: Cannot access 'button' before initialization。這意味著 button 物件尚未初始化，所以我們無法為它新增事件監聽器。
備註：由於像提升（hoisting）這樣的行為，JavaScript 並不總是完全從上到下依序執行，但目前請記住，通常項目需要先被定義才能使用。這是一個常見的錯誤來源。
直譯式與編譯式程式碼
在程式設計的語境中，你可能會聽到直譯和編譯這兩個術語。在直譯語言中，程式碼從上到下執行，執行的結果會立即回傳。在瀏覽器執行程式碼之前，你不需要將程式碼轉換成另一種形式。程式碼以其對程式設計師友善的文字形式被接收，並直接從該形式進行處理。
另一方面，編譯語言在被電腦執行之前會被轉換（編譯）成另一種形式。例如，C/C++ 被編譯成機器碼，然後由電腦執行。程式是從一個二進位格式執行的，該格式是從原始程式碼產生的。
JavaScript 是一種輕量級的直譯式程式設計語言。Web 瀏覽器以其原始文字形式接收 JavaScript 程式碼，並從該形式執行腳本。從技術角度來看，大多數現代 JavaScript 直譯器實際上使用一種稱為即時編譯（just-in-time compiling）的技術來提高效能；JavaScript 原始碼在使用腳本時會被編譯成更快的二進位格式，以便能盡快執行。然而，JavaScript 仍被視為一種直譯語言，因為編譯是在執行時處理，而不是提前處理。
兩種語言都有其優點，但我們現在不討論它們。
伺服器端與用戶端程式碼
在 Web 開發的語境中，你可能也會聽到伺服器端和用戶端程式碼這兩個術語。用戶端程式碼是在使用者電腦上執行的程式碼——當瀏覽網頁時，頁面的用戶端程式碼會被下載，然後由瀏覽器執行並顯示。在本模組中，我們明確地討論用戶端 JavaScript。
另一方面，伺服器端程式碼在伺服器上執行，然後其結果被下載並顯示在瀏覽器中。流行的伺服器端 Web 語言範例包括 PHP、Python、Ruby、C#，甚至還有 JavaScript！JavaScript 也可以作為伺服器端語言使用，例如在流行的 Node.js 環境中——你可以在我們的動態網站——伺服器端程式設計主題中了解更多關於伺服器端 JavaScript 的資訊。
動態與靜態程式碼
動態這個詞用來描述用戶端 JavaScript 和伺服器端語言——它指的是在不同情況下更新網頁／應用程式顯示內容的能力，根據需要產生新內容。伺服器端程式碼在伺服器上動態產生新內容，例如從資料庫中提取資料；而用戶端 JavaScript 則在用戶端的瀏覽器內部動態產生新內容，例如建立一個新的 HTML 表格，用從伺服器請求的資料填充它，然後在顯示給使用者的網頁中顯示該表格。這兩個語境中的含義略有不同，但相關，且兩種方法（伺服器端和用戶端）通常會協同工作。
沒有動態更新內容的網頁被稱為靜態——它總是顯示相同的內容。
如何將 JavaScript 加入你的頁面？
JavaScript 套用到你的 HTML 頁面的方式與 CSS 類似。CSS 使用 元素來套用外部樣式表，並使用