JS
楓資 廖姸惁
目錄
條件
- 判斷事情是否成立
- 根據結果做不同事
條件
let score = 70;
if (score >= 60) {
console.log("及格");
}
else {
console.log("不及格");
}let score = 85;
if (score >= 90) {
console.log("A");
}
else if (score >= 80) {
console.log("B");
}
else {
console.log("C");
}條件
let iceCream = "chocolate";
if (iceCream === "chocolate") {
alert("對啊我很喜歡巧克力");
}
else {
alert("沒有我不喜歡😭");
}console.log跟alert的差別
| 功能 | console.log() | alert() |
|---|---|---|
| 顯示位置 | 開發者工具 | 畫面跳出視窗 |
| 使用者會看到嗎 | 不會 | 會 |
| 用途 | 檢查變數、測試 | 會跳出視窗提醒使用者 |
函式
- 一段「可以重複使用」的程式
- 像工具一樣，用到再叫出來
函式
function 函式名稱(參數1, 參數2, ...) {
//函式主體（要執行的程式碼）
return 回傳值; //可以有也可以沒有
}
函式名稱(); // 呼叫函式定義 ≠ 執行
要「呼叫」才會跑
函式
function greet(name) {
console.log("你好 " + name);
}
greet("小明");1.你好 小明
2.你好，小明
3.你好小明
4."你好"+"小明"
函式
function add(a, b) {
return a + b;
}
let result = add(3, 5); //輸出8條件+函式的應用
function checkScore(score) {
if (score >= 60) {
return "及格";
}
else {
return "不及格";
}
}
console.log(checkScore(75));此程式碼會輸出什麼?
事件
- 使用者操作觸發程式
- 點擊、鍵盤、滑鼠
事件
<button onclick="sayHi()">點我</button>function sayHi() {
alert("你好！");
}html
js
事件
let btn = document.getElementById("btn");
btn.addEventListener("click", function() {
alert("被點擊了！");
});事件
<input id="score" placeholder="輸入分數">
<button id="btn">送出</button>html
js
function checkScore(score) {
if (score >= 60) {
return "及格";
} else {
return "不及格";
}
}
let btn = document.getElementById("btn");
btn.addEventListener("click", function() {
let score = document.getElementById("score").value;
alert(checkScore(score));
});事件
<button id="btn">點我</button>let btn = document.getElementById("btn");
btn.addEventListener("click", function() {
document.body.style.backgroundColor = "lightblue";
});