網頁設計知識 - 網頁程式相關
JavaScript 語法介紹
JavaScript 是一種用於創建動態網頁的腳本語言，能夠讓網頁與使用者互動。它與 HTML 和 CSS 相結合，讓開發者能夠設計更具互動性和功能性的網站。JavaScript 可以用來控制頁面上的元素、處理表單、進行數據驗證以及與伺服器進行通信。
JavaScript 基本語法
以下是 JavaScript 的一些基本語法範例，展示其如何與 HTML 一起使用。
1. Hello, World! 範例
最簡單的 JavaScript 程式會將 "Hello, World!" 顯示在瀏覽器中：
<html>
<body>
<script>
document.write("Hello, World!");
</script>
</body>
</html>
這段程式碼會將 "Hello, World!" 直接輸出到頁面中。
2. 變數與數據類型
JavaScript 支援多種資料類型，包括字串、數字、布林值等。變數可以使用 var、let 或 const 來宣告：
<html>
<body>
<script>
let name = "John";
let age = 25;
let isAdult = true;
document.write("姓名: " + name + "<br>");
document.write("年齡: " + age + "<br>");
document.write("成年: " + isAdult + "<br>");
</script>
</body>
</html>
這段程式會將變數 name、age 和 isAdult 的值顯示在頁面上。
3. 條件語句
JavaScript 使用 if...else 語句來進行條件判斷：
<html>
<body>
<script>
let age = 18;
if (age >= 18) {
document.write("你已成年");
} else {
document.write("你還未成年");
}
</script>
</body>
</html>
這段程式根據年齡輸出 "你已成年" 或 "你還未成年"。
4. 迴圈
JavaScript 支持多種迴圈結構，如 for 迴圈：
<html>
<body>
<script>
for (let i = 1; i <= 5; i++) {
document.write("這是第 " + i + " 次迴圈<br>");
}
</script>
</body>
</html>
這段程式會輸出 1 到 5 的數字。
5. 函數
JavaScript 使用 function 關鍵字來定義函數：
<html>
<body>
<script>
function greet(name) {
return "Hello, " + name;
}
document.write(greet("Alice"));
</script>
</body>
</html>
這段程式會輸出 "Hello, Alice"。
6. DOM 操作
JavaScript 可用來操作 DOM（Document Object Model），例如更改 HTML 元素的內容：
<html>
<body>
<p id="demo">這是一段文字。</p>
<script>
document.getElementById("demo").innerHTML = "這段文字已被 JavaScript 更改。";
</script>
</body>
</html>
這段程式會將頁面中的段落內容更改為 "這段文字已被 JavaScript 更改"。
7. 表單驗證
JavaScript 可用來進行表單驗證：
<html>
<body>
<form name="myForm">
姓名: <input type="text" name="name"><br>
<input type="button" value="提交" onclick="validateForm()">
</form>
<script>
function validateForm() {
let x = document.forms["myForm"]["name"].value;
if (x == "") {
alert("姓名不能為空");
return false;
} else {
alert("表單提交成功");
}
}
</script>
</body>
</html>
這段程式會檢查姓名欄位是否為空，若為空則顯示錯誤提示。
8. 事件處理
JavaScript 可以處理使用者的互動，如按鈕點擊：
<html>
<body>
<button onclick="displayMessage()">點擊我</button>
<script>
function displayMessage() {
alert("你點擊了按鈕！");
}
</script>
</body>
</html>
這段程式會在使用者點擊按鈕時彈出提示訊息。
結論
JavaScript 是一種功能強大的腳本語言，用於創建動態和互動式的網頁。它可以操作 DOM 元素、進行表單驗證、處理事件等，是現代 Web 開發中不可或缺的技術之一。JavaScript 能夠與 HTML 和 CSS 結合，創建豐富的用戶體驗。
歡迎推廣本文，請務必連結(LINK)本文出處：新視野網頁設計公司
