一、只有 HTML 和 CSS 還不夠嗎？

前幾天，我們已經建立基本的 HTML 頁面，也使用 CSS 調整了網頁的顏色、字體與版面。

不過，目前的網頁大多只能顯示固定內容。如果希望使用者點擊按鈕後出現提示、切換畫面，或即時檢查輸入的資料，就需要 JavaScript 的協助。

JavaScript 是一種常用於網頁互動的程式語言，可以讓原本靜態的頁面產生動態效果。

今天，我們就從最簡單的互動開始，為醫療資訊小系統加入第一段 JavaScript。

二、建立第一個 JavaScript 程式

在 HTML 中，可以使用 script 標籤撰寫 JavaScript。

執行網頁後，點擊按鈕，就會出現提示視窗。

這段程式主要包含三個部分：

• function：用來定義函式。
• showMessage()：函式名稱，負責執行指定的工作。
• alert()：顯示簡單的提示視窗。

當使用者點擊按鈕時，就會呼叫 showMessage()，接著顯示訊息。

三、使用 JavaScript 修改網頁內容

除了顯示提示視窗，我們也可以直接修改 HTML 元素的內容。

這裡使用了 document.getElementById()，透過 HTML 元素的 id 找到指定內容，再利用 textContent 修改文字。

因此，當使用者點擊按鈕時，畫面上的文字就會改變，不需要重新載入整個網頁。

四、把 JavaScript 獨立成檔案

當程式越寫越多時，將 HTML 與 JavaScript 分開，會更方便維護。

例如，可以建立以下檔案結構：

src/main/webapp/
├── index.html
└── js/
└── main.js

在 index.html 中加入：

接著，在 js/main.js 中撰寫：

function updateStatus() {
const status = document.getElementById("status");
if (status) {
status.textContent = "系統已準備就緒！";
}
}

這裡使用 defer，讓瀏覽器在解析 HTML 後再執行外部 JavaScript，降低程式執行時找不到 HTML 元素的問題。

五、JavaScript 在醫療資訊系統中的用途

在未來的系統中，JavaScript 可以協助完成許多互動功能，例如：

• 使用者填寫資料時，顯示即時提示。
• 點擊按鈕後展開或收合詳細資訊。
• 檢查必填欄位是否已經填寫。
• 顯示搜尋結果或操作成功的訊息。

不過，前端 JavaScript 只能改善操作體驗，不能取代後端驗證，也不能單獨負責保護病患資料。

六、今日小結

今天，我們第一次在醫療資訊網頁中加入 JavaScript，學會定義函式、顯示提示視窗，以及修改 HTML 元素的內容。

從今天開始，網頁不再只是靜態的畫面，而是能夠回應使用者操作的介面。

下一篇，我們將進一步認識 DOM 與事件，讓系統可以偵測使用者的點擊、輸入等行為。