# 透過網頁操作來玩 JavaScript

## 開始上課前：
### 準備
建立 codepen 帳號
[https://codepen.io/](https://codepen.io/)

## 印出程式碼的方式

console.log("1")
console.log("2")
console.log("3")

alert("Yo")
alert("Hey hey")

## 變數

### 1-1練習

var a = 5
var b = a
var c = a + b

alert(c) 

### 1-2練習

var fish = "鮭魚"
var rice = "壽司"
var sushi = fish + rice

console.log(sushi)

### 1-3練習

var pet = "兔子"
pet = "狗"
pet = "貓"

alert(pet)

練習網址: https://reurl.cc/6yY8WM

## 迴圈

### 2-1 練習

for(let a = 0; a < 10; a = a + 1){
  console.log('「我要 All pass！」')
}

### 2-2 練習

for(let a = 1; a < 11; a = a + 1) { 
  console.log(a) 
}

練習網址: https://reurl.cc/6yY8WM

## 條件判斷

### 3-1 實作一個剪刀石頭布

成品
https://codepen.io/lumir1031/full/zYNMmmE

實作網址
https://codepen.io/lumir1031/pen/poEENXd

解答：

var 玩家 = prompt("請輸入剪刀、石頭、布?");
var 電腦 = Math.floor(Math.random()*3)+1 // 會隨機抽取 1 ~ 3 的數字

// 先幫電腦定義好 1 ~ 3 誰是剪刀石頭布
if (電腦 == 1) {
  電腦 = '布'
}
else if (電腦 == 2) {
  電腦 = '剪刀'
}
else {
  電腦 = '石頭'
} 

// 開始猜拳，先把玩家出拳的情況準備好
if (玩家 == 電腦) {
  alert('平手！')
}
else if (玩家 == '剪刀') {
  alert('你出的是剪刀')
} 
else if (玩家 == '石頭') {
  alert('你出的是石頭')
} 
else if (玩家 == '布') {
 alert('你出的是布')
} 
else {
  alert('輸入格式有誤><')
}

// 開始猜拳，加上電腦的出拳狀況
if (玩家 == 電腦) {
  alert('平手！')
}
else if (玩家 == '剪刀') {
  if (電腦 == '石頭') {
    alert('你輸了！')
  }else {
    alert('哇太棒了吧！贏了')
  }
} 
else if (玩家 == '石頭') {
  if (電腦 == '布') {
    alert('你輸了！')
  }else {
    alert('哇太棒了吧！贏了')
  } 
} 
else if (玩家 == '布') {
  if (電腦 == '剪刀') {
    alert('你輸了！')
  }else {
    alert('哇太棒了吧！贏了')
  } 
} 
else {
  alert('輸入格式有誤><')
}

## 函式 function

function hello() {
  console.log("你好")
}

hello() 

function saySomething(word) {
  console.log(word)
}

saySomething('pui pui') 

### 4-1 練習

function count(number) {
  console.log(number * 10)
}

練習網址: https://reurl.cc/6yY8WM

## querySelector

### 5-1 練習

練習網址：https://codepen.io/lumir1031/pen/rNjwGmK

document.querySelector('.is-block').style.background = 'red' // 選取 class
document.querySelector('#is-unique').style.color = 'white' // 選取 id
document.querySelector('p').style.color = 'blue' // 選取 tag

## addEventListener 監聽事件
### 6-1  練習
練習網址：https://codepen.io/lumir1031/pen/rNjwGmK

document.querySelector('button').addEventListener('click', function(){
  alert('我一被按下去就會叫')
})

### 6-2  練習
練習網址：https://codepen.io/lumir1031/pen/yLJwrjz

document.querySelector('input').addEventListener('keyup', function(){
  console.log(document.querySelector('input').value)
})

## 專案實作

打開專案連結： https://reurl.cc/ZQo2NW

### 步驟一，先找到完成的觸發點

document.querySelector('.start').addEventListener('click', ...觸發事件);

### 步驟二，建立觸發事件

document.querySelector('.start').addEventListener('click', calculation);

function calculation() {
  alert("點到我了")
}

### 步驟三，抓到 DOM 元素，並且以 `value` 方法取得輸入欄位的值

document.querySelector('.start').addEventListener('click', calculation);

function calculation() {
  let h = document.querySelector('#height').value;
  let w = document.querySelector('#weight').value;
  let age = document.querySelector('#age').value;
  let gender = document.querySelector('input[name="gender"]:checked').value;
  
}

### 步驟四，計算 BMR

document.querySelector('.start').addEventListener('click', calculation);

function calculation() {
  let h = document.querySelector('#height').value;
  let w = document.querySelector('#weight').value;
  let age = document.querySelector('#age').value;
  let gender = document.querySelector('input[name="gender"]:checked').value;
  
  let bmr;
  if (gender === 'male') {
    bmr = (10 * w + 6.25 * h - 5 * age + 5).toFixed(2);
  }
  else if (gender === 'female') {
    bmr = (10 * w + 6.25 * h - 5 * age - 161).toFixed(2);
  }
  else {
    alert("輸入錯誤");
  }
}

### 步驟五，將結果呈現在畫面上

document.querySelector('.start').addEventListener('click', calculation);

function calculation() {
  let h = document.querySelector('#height').value;
  let w = document.querySelector('#weight').value;
  let age = document.querySelector('#age').value;
  let gender = document.querySelector('input[name="gender"]:checked').value;
  
  let bmr;
  if (gender === 'male') {
    bmr = (10 * w + 6.25 * h - 5 * age + 5).toFixed(2);
  }
  else if (gender === 'female') {
    bmr = (10 * w + 6.25 * h - 5 * age - 161).toFixed(2);
  }
  else {
    alert("輸入錯誤");
  }
  
  document.querySelector('.bmrAnswer').innerHTML = bmr;
  let answer = document.querySelector('.answerWrap')
  answer.style.display = "block";
}

### 步驟六，判斷數值是否為負值

document.querySelector('.start').addEventListener('click', calculation);

function calculation() {
  let h = document.querySelector('#height').value;
  let w = document.querySelector('#weight').value;
  let age = document.querySelector('#age').value;
  let gender = document.querySelector('input[name="gender"]:checked').value;
  
  let bmr;
  if (gender === 'male') {
    bmr = (10 * w + 6.25 * h - 5 * age + 5).toFixed(2);
  }
  else if (gender === 'female') {
    bmr = (10 * w + 6.25 * h - 5 * age - 161).toFixed(2);
  }
  else {
    alert("輸入錯誤");
  }
  
  if (bmr > 0) {
    document.querySelector('.bmrAnswer').innerHTML = bmr;
    let answer = document.querySelector('.answerWrap')
    answer.style.display = "block";
  }
  else {
    alert('輸入錯誤')
  }
}

### 步驟七，重置計算機，找到重新計算的 DOM 元素

document.querySelector('.reset').addEventListener('click', ...觸發事件);

### 步驟八，建立重置所有表單數值的函式

document.querySelector('.reset').addEventListener('click', deleteData);

function deleteData(){
  let h = document.querySelector('#height').value = '';
  let w = document.querySelector('#weight').value = '';
  let age = document.querySelector('#age').value = '';
  let gender = document.querySelector('input[name="gender"]').checked = false;
}

完成！