# javascript先修課
---
## Javascript 是什麼？
JavaScript 是一種腳本語言，它使你能夠動態的更新內容、控制多媒體、動畫……幾乎所有事。
* 具有一級函數 (First-class functions) 的輕量級、[直譯式](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%E7%9B%B4%E8%AD%AF%E5%BC%8F%E8%88%87%E7%B7%A8%E8%AD%AF%E5%BC%8F%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80)或即時編譯（JIT-compiled）的程式語言
* 用作網頁的腳本語言而大為知名，但也用於許多[非瀏覽器的環境](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%E4%BC%BA%E6%9C%8D%E5%99%A8%E7%AB%AF%E8%88%87%E7%94%A8%E6%88%B6%E7%AB%AF%E7%A8%8B%E5%BC%8F)，像是 node.js
* 基於原型的 (Prototype-based)、[動態語言](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%E5%8B%95%E6%85%8B%E8%88%87%E9%9D%9C%E6%85%8B%E7%A8%8B%E5%BC%8F)
* 支援物件導向、指令式以及宣告式 (如函數式程式設計) 風格
MDN: [JavaScript 是什麼?](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
---
## 先介紹兩個常見的JS運行環境
---
### HOL: 1. HelloWorld in Browser
打開瀏覽器主控台
### HOL: 2. HelloWorld in node.js
安裝[node.js](https://nodejs.org/zh-tw/download/)
---
## 好用的JS擴充套件
點我安裝 [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
---
## 基礎語法
### 變數宣告
```javascript=
var foo = 'Foo'
let bar = 'Bar'
const PI = 3.14
```
* var 的作用域在函示內 - 函示作用域(function level scope)
* let / const 的作用域在區塊內 - 區塊作用域(block level scope)
* var 還有 提升, 暫時性死區及可重複宣告的特型
* const 和 let 的差別在於 let 允許多次賦值，const 只能一次
---
### 型別
JS 的 primitive 和 object 型別
```javascript
// primitive 實值
let myNumber = 213
let myString = 'build school'
let myBoolean = false
let myNull = null
let myUndefined = undefined
// object 參考
let myArr = ['build', 'school']
let myObject = {
name: 'calvin',
age: 24
}
console.log(typeof myString)
```
<!--
```javascript=
let myNumber = 13
let myString = '這是字串'
let myBoolean = true
let myUndefine = undefined;
let myNull = null;
let myArray = ['apple', 'banana']
let myObject = { name: 'calvin', age: 24 }
// console.log(typeof myNumber)
```
-->
---
### ojbect & array 操作
```javascript=
const person = {
name: 'calvin',
age: 24
}
// TODO
const arr = ['build', 'school']
// TODO:
```
```javascript=
let myObject = {
name: 'calvin',
age: 24
}
// myObject.name 取到 name 屬性的 value
// myObject['name'] 取到 name 屬性的 value
console.log(
myObject['name']
)
// 對 myObject 新增 hight 屬性 value 為 174
myObject.height = 174
// 對 myObject 新增 weight 屬性 value 為 60
myObject['weight'] = 60
console.log(
myObject
)
```
---
### 基礎運算
<!-- 字串 + 數字 -->
```javascript=
let x = 2
let y = 1
console.log(x + y)
console.log(x - y)
console.log(x * y)
console.log(x / y)
console.log(x % y)
```
---
### 條件
```javascript=
// TODO:
// 當condition 為 true, 印出 'condition is true'
// 當condition 為 false, 印出 'condition is false'
let condition = true
if (condition == true) {
console.log(`condition is ${condition}`)
} else {
// console.log(`condition is ${condition}`)
console.log('condition is ' + condition)
}
```
<!--
```javascript=
let condition = true
if (condition == true) {
console.log('condition is true')
} else {
console.log('condition is false')
}
```
-->
---
### 迴圈
```javascript=
let arr = ['build', 'school']
// TODO:
// 用 for loop 依序印出 'build', 'school'
// 用 while loop 依序印出 'build', 'school'
// 用 arr.forEach() 依序印出 'build', 'school'
```
```javascript=
let arr = ['build', 'school']
for(let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
let index = 0
while(index < arr.length) {
console.log(arr[index])
index++
}
// arr.forEach((el, idx, tmpArr) => {
arr.forEach((el) => {
console.log(el)
// console.log(idx)
// console.log(tmpArr)
})
```
<!--
```javascript=
let arr = ['build', 'school']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
while(...) {
// ...
}
```
-->
---
### 方法
```javascript=
function logHelloWorld() {
console.log('hello world')
}
logHelloWorld()
```
```javascript=
function logHelloWorld (str, foo) {
console.log(str)
console.log(foo)
}
logHelloWorld('hello buildschool', 123)
function add(x, y) {
return x + y
}
let tmp = add(1, 2)
console.log(tmp)
```
---
## DOM 教學
---
### DOM 是什麼？
[文件物件模型(Document Object Model)](https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction) 是HTML的程式介面，將 HTML 文件以樹狀的結構來表示的模型。
```htmlembedded
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<ul>
<li>麵包</li>
<li>蛋糕</li>
</ul>
</body>
</html>
```
---
---
### 選取器
```javascript=
document.querySelector('#myInput')
document.querySelector('.my-button')
```
---
### DOM 物件
```javascript=
const inputDom = document.querySelector('#myInput')
// 印出DOM物件的所有屬性
console.dir(inputDom)
// 修改 input DOM物件的value屬性
inputDom.value = '123'
```
---
### 監聽器
```javascript=
// 對 btn DOM物件 新增事件監聽, 監聽 click(點擊事件),
// 當事件被觸發時, 執行 addEventListener 的第2個參數的回呼函式
btn.addEventListener('click', () => {
// 將 input 的 value 指派給 val
const val = input.value
// 使用瀏覽器的彈窗
alert(val)
})
```
```javascript=
<!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>
<!-- 123 -->
<input type="text" id="num-input">
<!-- click -->
<button class="btn">點我</button>
<span></span>
<!-- <span>123</span> -->
<!-- <button class="btn">點我2</button> -->
<script>
// 去 html 抓到 input id=num-input
let myInput = document.querySelector('#num-input')
// 選到第一個符合 選擇器條件的 html tag
let myBtn = document.querySelector('.btn')
let mySpan = document.querySelector('span')
// let myBtns = document.querySelectorAll('.btn')
// myInput 的 value 印出來
console.log(
myInput.value
)
// 對 myInput 新增 輸入(input) 的 事件監聽
// myInput.addEventListener('input', function () {
// console.log(myInput.value)
// })
// 對 myBtn 新增 點擊事件 監聽
myBtn.addEventListener('click', function() {
// TODO: 把 input 的 value 印出來
// console.log(myInput.value)
// TODO: 1. 抓到 input value
let tmp = myInput.value
// TODO: 2. 把 tmp 的值 塞進去 span
mySpan.innerText = tmp
})
</script>
</body>
</html>
```
---
## HW
### 終極密碼
```javascript=
// TODO:
// 區間介於 0 ~ 100 ， 隨機產生
// 輸入數字不再目前區間的話要跳提示
// 輸入不為數字的時候 要提示
// 答對跳提示
// NOTE:
// random
// parseInt
```
起始
超出區間
非數字
沒猜中 修改區間
猜中
Sign in with Wallet
Connect another wallet