我們接續前兩天的話題
如果說 HTML 是網頁的建築，CSS 是裝潢，那麼 JavaScript (簡稱 JS) 就是網頁的「水電」。它是一種功能強大的程式語言，負責為網頁添加互動性、動態功能與複雜的邏輯。
沒有 JavaScript 的網頁是靜態的，就像你家沒有電燈跟水龍頭；有了 JavaScript，網頁就變成了可以與使用者互動、回應使用者操作的應用程式。
JavaScript 的核心作用是什麼？
JavaScript 是一種高階、直譯式 (interpreted) 的程式語言，它最主要被應用在網頁瀏覽器中，用來實現以下功能：
操作網頁內容 (DOM Manipulation):
JS 可以動態地新增、刪除、修改 HTML 頁面上的任何元素與內容。這意味著你不需要重新載入整個頁面，就能更新部分的內容。
範例: 當你在購物網站上把商品加入購物車時，購物車圖示上方的數字會自動更新，這就是 JS 在背後修改了該元素的內容。
回應使用者事件 (Event Handling):
JS 可以監聽並回應使用者的各種操作，例如：
click (點擊按鈕)
submit (提交表單)
mouseover (滑鼠移入)
keydown (按下鍵盤)
範例: 點擊一個按鈕後，彈出一個視窗或顯示/隱藏某些內容。
與伺服器進行非同步通訊 (Asynchronous Communication):
透過一種稱為 AJAX (Asynchronous JavaScript and XML) 或更現代的 Fetch API 技術，JS 可以在不刷新整個頁面的情況下，於背景與伺服器交換資料。
範例: 當你在社群媒體上向下滑動時，新的貼文會自動載入並顯示出來，這就是 JS 在背景向伺服器請求新資料並將其插入到頁面中。Google 地圖的拖曳、縮放也是如此。
建立複雜的動態效果與動畫:
控制 CSS 樣式，實現複雜的視覺動畫、過場效果和互動式介面。
資料驗證:
在使用者提交表單前，先在瀏覽器端檢查資料格式是否正確（例如，Email 格式是否正確、密碼是否符合強度要求），可以立即給予使用者回饋，並減輕伺服器的負擔 (不過其實這個是有辦法繞過的，所以會需要更安全的做法)
接下來我們來看一下實際的程式碼範例
這個是index.html
你們可以看到程式碼裡面有一個script.js的javascript檔案
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<title>JavaScript 範例</title>
</head>
<body>
<h1 id="main-title">你好！</h1>
<button id="change-btn">點我改變文字</button>
<script src="script.js"></script>
</body>
</html>
接下來我們就看一下script.js的內容
// 1. 選取 HTML 元素
// 使用 document.getElementById 來選取 id 為 "main-title" 的 h1 元素
const titleElement = document.getElementById('main-title');
// 選取 id 為 "change-btn" 的 button 元素
const changeButton = document.getElementById('change-btn');
// 2. 定義一個函式 (function)，這個函式會在被呼叫時執行
function changeText() {
// 改變 h1 元素的文字內容
titleElement.textContent = '你好，JavaScript！';
// 改變 h1 元素的文字顏色
titleElement.style.color = 'blue';
}
// 3. 監聽事件
// 當按鈕被點擊 (click) 時，執行 changeText 這個函式
changeButton.addEventListener('click', changeText);
這三者是現代網頁開發的最基礎要素，缺一不可。JavaScript 讓網頁看起來不會這麼死板，將其從靜態的文件轉變為功能豐富、互動性強的應用程式。但是也是因為javascript讓網頁變成了攻擊者的攻擊方式(xss,csrf)
iThome鐵人賽
看影片追技術
看更多