let a = 10;
if(a === 10){
console.log("Hello mate")
}
function calculateAgeStatus(age){
console.log(`You are in ${age} right?`)
}
calculateAgeStatus(16)
執行 app.js
用 console.log 輸出變量
資料型別 string, number, boolean
算術運算符 ++, *, / 等等
賦值運算符 =, +=, *=, /= 等等
定義變量 let, const, var
條件語句 if, else
比較語句 ==, ===, <= 等等
函數 function add(a,b){ return a + b }
如果 JavaScript 放在 HTML 中呢？
快速測試
我們有一個 HTML 文件作為快速小測驗，我們該如何知道使用者輸入了正確的答案？
使用 HTML ?
糟糕了，HTML 只用於定義元素。
使用 CSS ?
不行。CSS 只用於樣式。
使用 Javascript ?
對，但為什麼？
我們需要在 HTML 中使用 JavaScript
JavaScript 是 HTML 中的大腦，它幫助執行所有計算/邏輯渲染工作。
例如：是否有東西被點擊？計算使用者輸入的總和。
在 HTML 中加入 script
在 HTML 中，我們可以添加 <script> 標籤來使用 JavaScript。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1> Yo all </h1>
<script> <!-- Add me for using script -->
console.log("Hello all")
</script>
</body>
</html>
<script>
let a = 100;
let b = 23;
let c = a + b;
console.log(c); // where is it logged to?
</script>
// getElementBy
const msgBox = document.getElementById('msg'); // Is a id
const yoloBox = document.getElementsByClassName("yolo"); // Is a array
// querySelector
const msgBoxQu = document.querySelector('#msg'); // Is a id
const yoloBoxQu = document.querySelector(".yolo"); // Not a array
// 因為 msg 是一個 id，所以我們需要加上 #
// 因為 yolo 是一個 class，所以我們需要加上 .
這些方法可以幫助我們取得相關的元素。
將互動加入到框框裡
一般來說，我們可以在 DOM 元素中加入事件：
const msgBox = document.getElementById('msg');
// When the msgBox box clicked, a message box will be pop up
msgBox.addEventListener("click", function() {
alert("Hello mate")
});
index.html with const
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="msg">Hello mate</h3>
<script>
const msgBox = document.getElementById('msg');
// When the msgBox box clicked, a message box will be pop up
msgBox.addEventListener("click", function() {
alert("Hello mate")
});
</script>
</body>
</html>
index.html with document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="msg">Hello mate</h3>
<script>
// When the msgBox box clicked, a message box will be pop up
document.getElementById('msg').addEventListener("click", function() {
alert("Hello mate")
});
</script>
</body>
</html>
