在過去的19天裡，我們專注於使用HTML搭建網頁的骨架，並透過CSS操縱視覺上的幾何佈局與響應式彈性，到目前為止，我們的網頁看起來非常漂亮，但它就像是一尊「精美的雕像」：無論你怎麼點擊它，或是對它做什麼，它都沒有任何動態反應。

如果我們希望網頁學會「思考」，能夠在點擊按鈕時彈出視窗、在輸入密碼時即時檢查強度、或者向伺服器索取最新資料，我們就需要引入前端開發最重要的技術：JavaScript（簡稱 JS）。

今天，我們正式跨越網頁外觀篇，進入 JavaScript。

核心概念

在寫下第一行JS程式碼之前，我們先來了解並釐清HTML、CSS與JavaScript之間的職責分工：

• HTML（骨架與器官）：定義網頁有什麼東西，例如這裡有一個按鈕、那裡有一段文字。
• CSS（皮膚與衣著）：定義網頁的東西長什麼樣子，負責色彩、排版、字體與幾何空間定位。
• JavaScript（大腦與神經）：賦予網頁行為與生命，它負責監聽動作、處理數據邏輯，並對使用者的操作做出即時的智慧反應。

JavaScript和Java有關係嗎？

這是一般初學者最常誤解的經典問題：「JavaScript是不是Java的一種？」

其實他們完全沒有關係 ，它們的關係就像是「張小明」與「張小花」，或是「熱狗（Hotdog）」與「狗（Dog）」一樣，單純只是名字相似而已。

1995年，Netscape（網景）公司的工程師Brendan Eich只花了短短10天就設計出了這門語言的雛形，最開始取名為LiveScript，當時為了蹭上那時候正如日中天的Java語言的熱度，行銷團隊決定將其改名為 JavaScript，到現在，它已經演變成全球最受歡迎、市佔率最高的程式語言，並且由ECMAScript（簡稱ES）標準來規範其語法演進。

在網頁中引入第一行JavaScript

就像CSS可以透過<style>標籤寫在HTML裡一樣，JavaScript也可以透過 <script> 標籤直接嵌入HTML中。

現在，我們不看複雜的網頁畫面，而是要打開工程師的「秘密基地」：瀏覽器的 開發者工具（Console 控制台）。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day20 初探 JavaScript</title>
</head>
<body>

    <h1 style="text-align: center;">打開你的瀏覽器控制台 (Console) 看看吧！</h1>

    <!-- 引入JavaScript -->
    <script>
        // 在網頁上彈出一個警告視窗
        alert("恭喜你！正式啟動 JavaScript 大腦！");

        // 在開發者工具的Console中印出工程師的專屬問候語
        console.log("Hello World!");

        // 做一個簡單的數學運算，並把結果印出來
        console.log(100 + 200);
    </script>
</body>
</html>

怎麼看結果？

1. 把這段程式碼存成一個.html並在瀏覽器（像Chrome）打開。
2. 網頁一載入，瀏覽器畫面上會立刻彈出一個alert警告框，點擊確認。
3. 在網頁任意地方按滑鼠右鍵，選擇 「檢查」（Inspect），或者直接按下快捷鍵（Windows: F12 / Mac: Cmd + Option + I）。
4. 在彈出的視窗上方標籤中，切換到 「Console（控制台）」。
5. 你會神奇地看到控制台裡整齊地印出了：
   • `Hello World!
   • 300
     (Live reload enabled.沒有是正常的，那個是我用VS Code的延伸模組Live Server會跳出來的東西，不用在意)

總結

今天我們成功了解了網頁的智慧大腦：JavaScript，並且透過console.log()與 alert()，成功建立了程式與我們之間的溝通橋樑，但是，為了讓我不用分好幾段程式碼傳，我後面依然跟介紹css時一樣，直接在html裡面用script建立一個.js，正常來說這些都要分開給一個頁面，然後在html寫<script src="(你自己給的名子).js"></script>，這樣才是正確寫法，但因為我基本上只是簡單介紹每個功能在做什麼，所以直接寫在html比較方便一點。

控制台（Console）是未來我們在寫JS時最重要的除錯（Debug）伙伴，請務必詳細認識他。

明天（Day 21），我們將正式深入JavaScript的語法心臟，從最基礎的**資料型態（Data Types）如數字、字串開始談起，並學習如何用運算子（Operators）**讓程式幫我們處理加減乘除與邏輯比較，明天見。