HTML - JavaScript：初學者指南

你好，有志於網頁開發的各位！我很興奮能成為你們在HTML和JavaScript世界的導遊。作為一個教學超過十年的編程老師，我可以向你們保證，你們將會有一個非常棒的體驗。讓我們一起潛入水中，共同揭開網頁開發的神秘面紗！

HTML - Javascript

JavaScript是什麼？

在我們深入細節之前，讓我們先了解一下JavaScript是什麼。JavaScript是一種強大的編程語言，它為網頁帶來了生命力。它就像是互聯網的魔杖，讓靜態的HTML頁面能夠跳動、互動，並對用戶的操作做出反應。

想像一下一個網站就像一個房子。HTML是結構——牆壁、屋頂和基礎。CSS是油漆和裝飾。那麼JavaScript呢？它就是電力、管道以及所有讓房子功能齊全並且互動的酷炫小玩意！

語法

JavaScript有一套自己的規則，就像任何語言一樣。讓我們來了解一下基礎：

變量

變量就像是可以存放信息的容器。這是怎樣聲明的：

let myName = "Alice";
const myAge = 25;
var myHobby = "coding";

在這個例子中：

let 用於可能會變化的變量。
const 用於不會變化的變量。
var 是一種較老的聲明變量的方式，但現在更推薦使用 let 和 const。

函數

函數是可重用的代碼塊。它們就像是你的程序的菜譜：

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Bob"); // 輸出：Hello, Bob!

這個函數接受一個 name 作為輸入並打印一個問候。這就像是一個友好的機器人，對你介紹的任何人說你好！

條件語句

這些語句幫助你的代碼做出決定：

let temperature = 22;

if (temperature > 30) {
console.log("外面很熱！");
} else if (temperature > 20) {
console.log("今天天氣真好！");
} else {
console.log("有點冷。");
}

這段代碼檢查溫度並根據溫度給出不同的信息。這就像教你的電腦成為一個天氣評論員！

在HTML中使用JavaScript的例子

現在，讓我們看看我們如何在HTML頁面中使用JavaScript。主要有三種方法：

1. 內聯JavaScript

這就像是在耳邊輕聲說一個快速指示：

<button onclick="alert('你好！')">點我</button>

當你點擊這個按鈕時，它會彈出一個說“你好！”的對話框。這很快速且簡單，但對於較大的腳本來說不是很好。

2. 內部JavaScript

這就像給你的HTML頁面一個自己的腦袋：

<!DOCTYPE html>
<html>
<head>
<title>我的頁面</title>
<script>
function changeColor() {
document.body.style.backgroundColor = "淺藍色";
}
</script>
</head>
<body>
<button onclick="changeColor()">改變顏色</button>
</body>
</html>

這段腳本會在你點擊按鈕時將頁面背景改為淺藍色。這就像給你的網頁一個變色龍的能力！

3. 外部JavaScript

這就像給你的網頁一個它可以參考的獨立腦袋：

<!DOCTYPE html>
<html>
<head>
<title>我的頁面</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="greet()">說你好</button>
</body>
</html>

而在 myscript.js 中：

function greet() {
alert("來自外部文件的你好！");
}

這樣可以讓你的HTML保持乾淨，JavaScript組織有序。這就像把你的工具放在工具箱裡而不是散落在房子周圍。

HTML `<noscript>` 元素

有時候，用戶的瀏覽器可能無法使用或不允許使用JavaScript。這時，《noscript>`元素就派上用場了：

<script>
document.write("你好，JavaScript正在工作！");
</script>
<noscript>
<p>哦不！你的瀏覽器不支持JavaScript，或者它被關閉了。</p>
</noscript>

這就像有一個備用計劃。如果JavaScript正常工作，用戶會看到第一個消息。如果不行，他們會看到第二個。總是做好準備總是好的！

JavaScript方法表

讓我們看一下一些你經常會用到的JavaScript方法：

方法	描述	示例
`alert()`	顯示一個彈出消息	`alert("你好，世界！");`
`console.log()`	在瀏覽器控制台打印	`console.log("這是一個日志");`
`document.getElementById()`	根據ID尋找HTML元素	`let elem = document.getElementById("myDiv");`
`addEventListener()`	為元素附加一個事件處理器	`button.addEventListener("click", function() { alert("點擊了！"); });`
`setTimeout()`	在延遲後執行一個函數	`setTimeout(function() { console.log("延遲消息"); }, 2000);`