前言

JavaScript 是賦予網頁生命的語言。本文系統整理 JS 與 HTML 結合的 5 大核心場景：輸出內容、事件回應、DOM 內容操作、樣式操作、表單驗證，並說明腳本位置最佳實踐與外部檔案載入方式。

1. 寫入 HTML 輸出 — document.write

document.write('
This is a heading
');
document.write('
This is a paragraph
');

⚠️ 警告： 僅能在文檔解析階段使用。頁面載入後呼叫會**清空整個文檔**並重寫。現代開發**極少使用**，改用 DOM API。

2. 事件回應 — 內聯事件處理器

點擊這裡

• onclick、onchange、onsubmit、onload 等
• 缺點： 結構與行為耦合、難以維護、CSP 策略可能阻擋
• 現代做法： addEventListener 分離綁定

3. 改變 HTML 內容 — DOM 核心操作

const el = document.getElementById('demo'); // 查找元素
el.innerHTML = 'Hello JavaScript';           // 修改內容（支援 HTML 標籤）

關鍵 API：

4. 改變 HTML 樣式 — style 屬性操作

const el = document.getElementById('demo');
el.style.color = '#ff0000';           // 單一屬性
el.style.cssText = 'color:red;font-weight:bold;'; // 批量設定
el.classList.add('highlight');        // 推薦：操作 CSS 類別

最佳實踐： CSS 寫在樣式表，JS 只切換 classList，實現關注點分離。

5. 驗證用戶輸入 — 表單前端驗證

function validate() {
    const input = document.getElementById('age').value;
    if (isNaN(input)) {
        alert('請輸入數字');
        return false; // 阻止表單提交
    }
    return true;
}

    
    送出

HTML5 內建驗證（無需 JS）：

腳本嵌入位置與載入時機

外部 JavaScript 檔案

規則： 外部檔案**不得包含** <script> 標籤，純 JS 代碼即可。

完整範本：現代最佳實踐

    
    
    
    
    
    


    
頁面標題
    

        
初始內容
        點擊測試
    
    
    
    
    
    
    
    
    

總結

• ✅ 用 document.getElementById / querySelector 取得元素
• ✅ 用 textContent 設定文字、classList 切換樣式
• ✅ 用 addEventListener 綁定事件（非內聯）
• ✅ 腳本放在 </body> 前並加 defer
• ✅ 善用 HTML5 內建驗證減少 JS 代碼
• ✅ 外部檔案純 JS、模組用 type="module"

遵循上述原則，你的 JavaScript 代碼將具備**可維護性、安全性、效能**三大優勢。

1. 上一篇文章： PHP 實作無限分類樹：引用賦值（&）單次遍歷構建巢狀結構，代碼極簡效能極致
2. 下一篇文章： Apache 整合 PHP 完整圖文教程：httpd.conf 配置、php.ini 調優、擴展載入與驗證步驟

PHP 綜合知識

Facebook HipHop 解密：PHP 轉 C++ 如何實現 50% CPU 降本

前言：全球最大 PHP 應用的性能突圍 2010 年，Fac

Yii2 實戰：遞迴構建無限層級分類樹結構，告別 N+1 查詢效能陷阱

無限層級分類是電商、CMS、知識庫等系統的核心需求。本文以

Laravel 建構子自動依賴注入原理：反射機制與容器解析深度解析

現象展示 Laravel 控制器建構子無需手動實例化依賴，直

PHP GD 繪圖實戰：動態生成雪花飛舞效果圖片

GD 庫繪圖基礎 PHP GD 擴展提供強大的圖形處理能力，