Javascript in HTML
JavaScript in HTML
2019/10/27 (增加連結)
基本概念
由HTML構成的網頁是靜態的，要讓網頁「動」起來，比較常用的方式就是使用JavaScript，JavaScript跟HTML不太一樣，基本上JavaScript是一種程式語言，JavaScript雖然有個Java，跟Java在概念及語法雖然有些相同但是大部分還是不一樣的。比如說，Java是Strongly typed，但是，JavaScript卻是Weakly(loosely) typed，簡單的說，在JavaScript中，變數的資料型態是可以改變的，但是，在Java中，變數的資料型態是不可以改變的。
基本語法
CSS的內容是夾在<style></style>中，JavaScript則是夾在<script></script>中
<!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設定事件的回應動作(詳參: https://www.w3schools.com/js/js_events.asp)，如: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的部份，不過，因為getByElementById及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>
以下範例(bookList.html)是利用onchange，select選項被改變時，就呼叫這個form的submit (等於是按鈕按了"Submit")。利用onclick，在按鈕被按下時，去啟動特定的uri (如:bookRetrieveAll或bookCreate)或者進行確認的動作。要注意的是，利用javascript進行確認，可能會因為瀏覽器的設定而失效。Form的部份請詳參Form。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>List ALl Books</title>
</head>
<body>
<form action="bookRetrieveByCategory" method ="post">
類別:<select name = "bookCategory" th:field="${bookCategory.id}" onchange="this.form.submit()">
<option th:each="bookCategory : ${allBookCategories}"
th:value="${bookCategory.id}"
th:text="${bookCategory.name}">商業</option>
</select>
<input type="submit" value="Submit"/>
<input type="button" onclick="location.href='bookRetrieveAll'" value="Show All Books"/>
</form>
<input type="button" onclick="location.href='bookCreate'" value="新增書籍"/>
<table>
<tr>
<th>編號</th>
<th>類別</th>
<th>名稱</th>
<th>價格</th>
<th></th>
</tr>
<tr th:each="book : ${allBooks} " th:object="${book}">
<td th:text="*{id}">1</td>
<td th:text="*{bookCategory.name}">business</td>
<td th:text="*{name}">Ben</td>
<td th:text="*{price}">300</td>
<td><a th:href="@{bookUpdate(id=*{id})}">修改</a> <a th:href="@{bookDelete(id=*{id})}" onclick="return confirm('確定要刪除嗎?');">刪除</a></td>
</tr>
</table>
</body>
</html>