Embedded Files
JavaScript
JavaScript
2019/09/04 (增加連結)
2020/04/24 (增加連結)
2024/09/08 (新增內嵌)
基本概念
基本概念
由HTML構成的網頁是靜態的，要讓網頁「動」起來，比較常用的方式就是使用JavaScript，JavaScript跟HTML不太一樣，基本上JavaScript是一種程式語言，有判斷式、有迴圈等語法。JavaScript雖然有個Java，跟Java在概念及語法雖然有些相同但是大部分還是不一樣的。比如說，Java一定要有類別，而JavaScript卻不需要。Java是Strongly typed，但是，JavaScript卻是Weakly(loosely) typed，簡單的說，在JavaScript中，變數的資料型態是可以改變的，但是，在Java中，變數的資料型態是不可以改變的。
基本語法
基本語法
變數定義等語法，請詳參Javascript語法整理。以下介紹javascript在html中常用的基本語法。
CSS的內容是夾在<style></style>中，JavaScript則是夾在<script></script>中。javascript可以動態改變HTML的內容，以下的javascript，是將id為demo的HTML設定為"Hello World!"
document.getElementById("demo").innerHTML = "Hello World!";
完整的HTML:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
External Script
External Script
跟CSS一樣，JavaScript可以寫在單獨的js檔案裡，讓多個html網頁可以共用同樣的JavaScript。例如，我們將JavaScript儲存在my.js的話，可以用下面的方法引用。
<!DOCTYPE html>
<html>
<body>
<script src="my.js"></script>
</body>
</html>
my.js的內容:
document.getElementById("demo").innerHTML = "Hello World!";
Event
Event
可以利用javaScript設定事件的回應動作(詳參: JavaScript Events & JavaScript HTML DOM Events & JavaScript HTML DOM EventListener)，如:onLoad、onClick、onChange。注意，為了避免瀏覽器混淆，onload裡的字串使用單引號，而不是雙引號。
<body onload="document.getElementById('demo').innerHTML = 'Hello World!'">
</body>
完整的內容:
<!DOCTYPE html>
<html>
<body onload="document.getElementById('demo').innerHTML = 'Hello World!'">
<div id="demo"></div>
</body>
</html>
也可以寫成function:
<!DOCTYPE html>
<html>
<head>
<script>
function show() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
</head>
<body onload="show()">
<div id="demo"></div>
</body>
</html>
寫成function的好處是可以重複使用同一個function，如:
<!DOCTYPE html>
<html>
<head>
<script>
function showMsg(msg) {
document.getElementById("demo").innerHTML = msg;
}
</script>
</head>
<body onload="showMsg('Hello')">
<div id="demo"></div>
<button onclick="showMsg('World')">Click Me</button>
</body>
</html>
也可以將script與tag的部份分開。
這樣的寫法是可以避免處理HTML的人不小心動到onload或onclick的部份，但也會造成這樣的寫法是相對的複雜也不容易看懂。
注意，由於javascript內容使用到頁面上的物件，要把script放到最後，否則無法取得頁面的內容。
<!DOCTYPE html>
<html>
<head>
<script>
function showMsg(msg) {
document.getElementById("demo").innerHTML = msg;
}
</script>
</head>
<body onload="showMsg('Hello')">
<div id="demo"></div>
<button id="my_button">Click Me</button>
<script>
document.getElementById("my_button").onclick = function() {showMsg('World')}
</script>
</body>
</html>
參考資料
參考資料
ES5 & ES6
Selecting elements
Single element
Multiple elements
Going up the DOM tree
Adding elements
Moving elements
Replacing elements
Removing elements
Create an element from raw HTML
Inspecting the DOM
Report abuse