Javascript

JavaScript

2019/09/04 (增加連結)

2020/04/24 (增加連結)

基本概念

由HTML構成的網頁是靜態的，要讓網頁「動」起來，比較常用的方式就是使用JavaScript，JavaScript跟HTML不太一樣，基本上JavaScript是一種程式語言，JavaScript雖然有個Java，跟Java在概念及語法雖然有些相同但是大部分還是不一樣的。比如說，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

跟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

可以利用javaScript設定事件的回應動作(詳參: JavaScript Events & JavaScript HTML DOM Events & JavaScript HTML DOM EventListener)，如:onLoad、onClick、onChange。

<body onLoad="alert('test')">

</body>

完整的內容:

<!DOCTYPE html>
<html>
<head>
</head>
<body onLoad="alert('test')">

</body>
</html>

也可以寫成function: 

<!DOCTYPE html>
<html>
<head>
<script>
function popupMsg(msg) { //v1.0
  alert(msg);
}
</script>
</head>
<body onLoad="popupMsg('test')">

</body>
</html>

寫成function的好處是可以重複使用同一個function，如:

<!DOCTYPE html>
<html>
<head>
<script>
function popupMsg(msg) { //v1.0
  alert(msg);
}
</script>
</head>
<body onLoad="popupMsg('test')">

<img src="Chrysanthemum.jpg" width="1024" height="768" alt="" onClick="popupMsg('a photo')"/>
</body>
</html>

也可以將script與tag的部份分開。不過，這樣的寫法是可以避免處理HTML的人不小心動到onload或onclick的部份，不過，因為getElementById及getElementsByTagName都要寫在body，造成這樣的寫法是相對的複雜也不容易看懂。

<!DOCTYPE html>
<html>
<head>
<script>
function popupMsg(msg) { //v1.0
  alert(msg);
}
</script>


</head>
<body>

<img id ="demo" src="Chrysanthemum.jpg" width="1024" height="768" alt=""/>

<script>
document.getElementById("demo").onclick = function() {popupMsg('test')};
document.getElementsByTagName("body")[0].onload = function() {popupMsg('hi')};
</script>
</body>
</html>

參考資料