<font color="#8A2BE2">[Udemy JS Jonas]</font> Ch2 基礎JS part1
===
# Ch1

## 大綱
:::success

共20 section 60hr
| | | |
| -------- | -------- | -------- |
| |  |
:::

| 課號 | 課程內容 | 照片示意 |學習內容|
| - | - | - |-|
|01| | ||
|02|基礎JS|||
|03|基礎JS|||
|05|開發環境|||
|07|DOM|||
|08|JS是怎麼形成的||callback函示|
|09|ES6||map desrcutruee string clousre|
|10|函示||map desrcutruee string clousre|
|11|開發環境||array numbers date timer|
|12|開發環境||array numbers date timer|
|13|進階DOM||自組網站(照片滑塊)|
|14|OOP JS|||
|15|地圖專案||規劃項目|
|16|非同步JS||AJAX|
|17|現代JS應用||NPM、Babel、Parcel、ES6|
|18|Fork 專案||NPM、Babel、Parcel、ES6|
|19|最後專案||Netlify、Git|

# Ch2基礎JS Part1

## 8. Brief JS

### JS應用 前、後、App、桌面應用程式
:::success

| | | |
| -------- | -------- | -------- |
| Ionic| 是基於HTML5、CSS、JavaScript的Web Mobile App開發框架 |
|
| Electron| 是一個將 JavaScript、HTML與SS等網頁技術轉換為桌面應用程式的框架，轉換後可於 Mac、Windows 以及 Linux 上運行，像是 VSCode、Slack 電腦版等等都是用它寫的 | 
|
:::

### 關於ES5...與後面的發展

ES = ECMAScript


## 9. Linking a JS檔案
### 寫在VS code上

<script>
    let js = 'amazing';
    if (js === 'amazing') alert('JavaScript is FUN!');
  </script>


### HTML JS分離
HTML body 插入 script 連結 JS檔案


### 單元練習 國家/哪一州/人口


## 12. Data Type
### JS的值

每個JS值可區分為兩種
『物件』
『原始型別(Numbe、String、Boolean、Undefined、Null、Symbol、BigInt)』

:::danger
let x = 3

value 有 type
3 有type (不是 x 有 type)
:::

:::info

null的 type 竟然是 object !!

這是JS的bug
:::

### 單元練習


## 13. let, const, var

let x=5
x=6

const y=5
y=6         //會報錯，因為const是不可變的變量

const y     //會報錯，因為const需要初始值

var job = 'programeer'
job = 'teacher'    //是可以的，在ch7會說明差異


//let是block scope區塊作用域
//var是function scope函式作用域

## 14. Basic Operator

//用逗點 分別印出很多值
const dog = 3
const cat = 2
console.log(dog, cat) //3,2

//次方**寫法
const money = 2
money ** 3 = 8 //2^3


//先加減再比較
const age = 30
console.log(age-2023 > age-2022) //先執行左右兩邊 age-2023 與 age-2022 再進行比較

## 15. Operator Precedence 運算符號優先級別

//assigment 賦值運算子是右到左

let x,y  //x y目前都是undefined

x = y = 25 - 10 - 5 

//實際運作是 程式碼先檢視這行看到
//『賦值運算子(右到左)優先權低』『減法運算子(左到右)優先權高』
//先執行減法再執行等於

## 16. 程式挑戰1

let marksWeight = 78  
let marksHeight = 1.69
let marksBMI1 = (marksWeight) / (marksHeight ** 2)
let johnWeight = 92 
let johnHeight = 1.95
let johnBMI1 = (johnWeight) / (johnHeight **2)
const markHigherBMI1 = marksBMI1>johnBMI1
console.log(marksBMI1, johnBMI1, markHigherBMI1) 


marksWeight = 95    //Data2
marksHeight = 1.88  //Data2
let marksBMI2 = (marksWeight) / (marksHeight ** 2)
johnWeight = 85   //Data2
johnHeight = 1.76 //Data2
let johnBMI2 = (johnWeight) / (johnHeight **2)
const markHigherBMI2 = marksBMI2>johnBMI2
console.log(johnBMI2, marksBMI2, markHigherBMI2)

連結：https://replit.com/@bobyin22/coding-challenge-1#index.js

## 17. Strings and Template Literals

### ES6 template literal
template literal模板文字

//古早用法
console.log('String with\n\
multiple\n\
lines\n\ ')


//ES6 template literal模板文字用法
console.log(`String with 
multiple 
lines
`)

//ES6 template literal 加上{JS算數} 模板文字用法
const job = 'teacher'
const yearSalary = 50000*12
console.log(`I am a ${job}, I earn ${yearSalary} a year`)

## 18. Taking Decisions: if / else Statements


只有if沒有else也是合法的

const age = 19
const isOldEnough = age >= 18 //這是會是 true 

//因為isOldEnough是true，所以會執行
if(isOldEnough) {
    console.log('小明夠老了，可以開車 🤣 ')
}

## 19. 程式挑戰2

let marksWeight = 78  
let marksHeight = 1.69
let marksBMI1 = (marksWeight) / (marksHeight ** 2)
let johnWeight = 92 
let johnHeight = 1.95
let johnBMI1 = (johnWeight) / (johnHeight **2)
const markHigherBMI1 = marksBMI1>johnBMI1
console.log(marksBMI1, johnBMI1, markHigherBMI1) 
if(marksBMI1>johnBMI1){
  console.log(`Mark's BMI ${marksBMI1} is higher than John's ${johnBMI1}!`)
}else{
  console.log(`John's BMI ${johnBMI1} is higher than Mark's ${marksBMI1}!`)
}



marksWeight = 95    //Data2
marksHeight = 1.88  //Data2
let marksBMI2 = (marksWeight) / (marksHeight ** 2)
johnWeight = 85   //Data2
johnHeight = 1.76 //Data2
let johnBMI2 = (johnWeight) / (johnHeight **2)
const markHigherBMI2 = marksBMI2>johnBMI2
console.log(johnBMI2, marksBMI2, markHigherBMI2)
if(marksBMI2>johnBMI2){
  console.log(`Mark's BMI ${markHigherBMI2} is higher than John's ${johnBMI2}!`)
}else{
  console.log(`John's BMI ${johnBMI2} is higher than Mark's ${markHigherBMI2}!`)
}

## 20. Type Conversion(類型轉換) and Coercion(類型強制)
### String to Number

NaN = not a number = 無效的數字(不是 不是數字 字面上的意思)

//Type Conversion(類型轉換)
const inputYear = '1991'
console.log(Number(inputYear), inputYear) //1991 "1991"

console.log('Bob')  
console.log(typeof NaN) //number
console.log()

//Type Coercion(類型強制)
//##########關於+ 
//範例1
console.log('I am ' + 23 + ' years old') //I am 23 years old

//範例1
let n = '1' + 1    //'11'
n = n -1 
console.log(n)     //10

//範例3
console.log(2+3+4+'5') //95

//##########關於-
console.log('23' - '10' -3) //10      
//步驟1    '23' - '10' =13  
//步驟2     13 - 3 =10 

//##########關於*  關於/
console.log('23' / '2') //11.5
console.log('23' * '2') //46

//綜合應用
2+3+4+'5' //"95"

'10'-'4'-'3'-'2'+'5' //"15"


### 單元練習

//題目1
'9'-'5' //4 (typeof Number)

//題目2
'19'-'13'+'17' //'617' (typeof String)
//'19'-'13'=6
//6 + '17' = '617'

//題目3
'19'-'13'+17 //23 (typeof Number)
//'19'-'13'=6
//6+17=23

//題目4
/*
這題被刪除了，因為字串比大小是用Unicode去比
'123' < 57 //false
*/

//題目5
5+6+'4'+9-4-2 //1143
//5+6=11
//11+'4'='114'
//'114'+9 = '1149'
//'1149'-4 = 1145
//'1145'-2 = 1143

## 21.Truthy and Falsy Values
### Boolean
布林值的5個falsy value (0, '', undefined, null, NaN)，其他都是true

//範例1
console.log(Boolean(0)) //false
console.log(Boolean(undefined)) //false
console.log(Boolean('Bob')) //true
console.log(Boolean({})) //true
console.log(Boolean('')) //false

//範例2
const money = 0 //因為0是false 印出else的東西
if(money) {
    console.log("Don't spend it all")
} else{
    console.log('You should get a job!') //印出這個
}

//範例3
let height //因為目前尚未賦值，所以height是undefined，undefined在布林值來說是false
if(height) {
    console.log('YAY! Height is defined')
} else {
    console.log('Height is UNDEFINED') //印出這個
}


 
補充：但是 money = 0是有可能的，所以之後的if statment 會用 === == 來寫，會更合適

## 22.Equality Operators: == vs. ===

嚴格模式
const age = 18
if(age === 18) console.log('你成年了 :) (strict)')//符合，會印
if(age == 18) console.log('你成年了 :) (loose)') //符合，會印

鬆散模式
const age = '18'
if(age === 18) console.log('你成年了 :) (strict)')
if(age == 18) console.log('你成年了 :) (loose)') //符合，會印

舉例
const favorite = prompt('請輸入你想要的數字')


const favorite = prompt('請輸入你想要的數字') //輸入'10'
console.log(favorite) //'10'
console.log(typeof favorite) //字串

if(favorite === 23){
    console.log('輸入到23了')
} else if(favorite === 19){
    console.log('輸入到19了')
} else if(favorite === 9){
    console.log('輸入到9了')
} else {
    console.log('以上都沒有符合')//符合，印出這行
}

if (favorite !== 23) console.log('都不符合23呀') //符合，印出這行

### 單元練習

嚴格模式，輸入是字串，即使輸入'1' '2' '0'都不符合，會跳到else
const numNeighbors = prompt('How many neighbor countries does your country have?')

但是加上Number改變型態，就可以了
const numNeighbors = Number(prompt('How many neighbor countries does your country have?'))
console.log(typeof numNeighbors)

if (numNeighbors === 1) {
  console.log('Only 1 border!')
} else if (numNeighbors === 2) {
  console.log('2 border!')
} else if (numNeighbors === 0) {
  console.log('0 border!')
} else {
  console.log('Your input is not in my expectation!')
}

## 23. Boolean Logic (AND/OR/NOT)
NOT(!)運算子比 AND OR都還有效率

## 24. Logical Operators

const driveLicense = true
const seeClear = true

console.log(driveLicense && seeClear)         //true
console.log(driveLicense || seeClear)         //true
console.log(!driveLicense)                    //false

const tire = false
console.log(driveLicense && seeClear && tire) //false
//思考步驟1  &&由右到左
//思考步驟2  seeClear && tire 就是true && false 出來是 false
//思考步驟3  driveLicense && false 出來是false

if (driveLicense && seeClear && !tire) {
    console.log('可以開車')                     //符合，會印出
} else{
    console.log('不行，建議不要讓這個人開車')
}

:::danger
下圖：&&由右到左
步驟1 true | | false 是true
步驟2 true | | true 是true
:::


### 單元練習

let country = 'Taiwan'
let language = 'Chinese'
let population = 23000000

const isSpeakingEnglish = false
const isPopulationLess50Million = true

if ((language === 'English') && (population < 50000000)) {
  console.log(`My country ${country} meet Sarah's living expectation")
} else {
  console.log(`My country ${country} not suitable for Sarah`)
}


## 25. Coding 挑戰 #3
題目

第一題

//2對比三次，平均最高的贏家獲得獎盃
const dolphinesAverageScroe = (96 + 108 + 89)/3 //97...
const koalasAverageScore = (88 + 91 + 110)/3  //96...


if(dolphinesAverageScroe > koalasAverageScore) {
  console.log("dolphines win")
} else if(dolphinesAverageScroe < koalasAverageScore) {
  console.log("koalas win")
} else if(dolphinesAverageScroe === koalasAverageScore) {
    console.log("平手")
}

第二題

思考錯誤，以為是比單一分數100以上去做總和比較
const dolphinesScore = [97, 112, 101]
sum1 = 0
for(let i=0; i<dolphinesScore.length ; i++) {
  if(dolphinesScore[i]>=100) {
    sum1 += dolphinesScore[i]
  }
}
const avgDolphines = sum1 /3
console.log('avgDolphines', avgDolphines)

const koalasScore = [109, 95, 123]
sum2 = 0
for(let i=0; i<koalasScore.length ; i++) {
  if(koalasScore[i]>=100) {
    sum2 += koalasScore[i]
  }
}
const avgKoalas = sum2 /3
console.log('avgKoalas', avgKoalas)

if(avgDolphines > avgKoalas){
  console.log('avgDolphines win')
} else {
  console.log('avgKoalas win')
}

修正
const dolphinesAverageScroe = (97 + 112 + 101)/3 //97...
const koalasAverageScore = (109 + 95 + 123)/3  //96...


if(dolphinesAverageScroe > koalasAverageScore && dolphinesAverageScroe >= 100) {
  console.log("dolphines win")
} else if(dolphinesAverageScroe < koalasAverageScore && koalasAverageScore >= 100) {
  console.log("koalas win")
} else if(dolphinesAverageScroe === koalasAverageScore  && dolphinesAverageScroe >=100 ) {
    console.log("平手")
} else {
    console.log("沒人贏")
}

第三題

const q3dolphinesScore = [97, 112, 101]
let count1 = 0
let total1 = 0
for(let i=0; i<q3dolphinesScore.length ;i++) {
  if(q3dolphinesScore[i]>=100) count1+=1
  total1 += q3dolphinesScore[i]
}
console.log(count1)
console.log(total1)

const q3koalasScore = [109, 95, 110]
let count2 = 0
let total2 = 0
for(let i=0; i<q3koalasScore.length ;i++) {
  if(q3koalasScore[i]>=100) count2+=1
  total2 += q3koalasScore[i]
}
console.log(count2)
console.log(total2)

if(total1===total2 && count1===count2) {
  console.log('平局')
} else {
  console.log('沒有人贏得獎盃')
}

## 26. The Switch Statement

const day = 'monday'

switch (day) {
    case 'monday':
        console.log('規劃這週的工作') //符合，會印
        console.log('週一有開發會議') //符合，會印

    case 'tuesday':
        console.log('週二要準備影片') //符合，會印(因為週一沒有寫break)
        break;
    case 'wednesday':
    case 'thursday':
        console.log('週四準備範例')
        break;
    case 'friday':
        console.log('週五錄影片')
        break;
    case 'saturday':
    case 'sunday':
        console.log('休假休息')
        break;
    default:
        console.log('以上皆不符合')
}

const day = 'monday'

if(day === 'monday') {
    console.log('規劃這週的工作')
    console.log('週一有開發會議')
} else if(day === 'tuesday') {
    console.log('週二要準備影片')
} else if(day === 'wednesday' || day === 'thursday') {
  console.log('週四準備範例')
} else if (day === 'friday') {
    console.log('週五錄影片')
} else if (day === 'saturday' || day === 'sunday') {
    console.log('休假休息')
} else {
    console.log('以上皆不符合')
}

### 單元練習

//##### The Switch Statement
switch (language) {
  case 'chinese':
  case 'mandarin':
    console.log('母語使用者數量最多！')
    break;
  case 'spanish':
    console.log('母語使用者數量排名第二')
    break;
  case 'english':
    console.log('第三名')
    break;
  case 'hindi':
    console.log('第四名')
    break;
  case 'arabic':
    console.log('第五大使用語言')
    break;
  default:
    console.log('也是一種很棒的語言:D')
}

## 27. Statement And Expression

### Statement
Statement 比較像是程式執行的動作

if(23>10) { //並沒有產生值
    const str = '23 is biggger'; //大部分用;結尾都是Statement，就像是一個句子
}

### Expression
Expression 比較像是值

3+4
1991

true && false && !false

//模板文字 ${放入Expression} 
const name = Jack
console.log(`I am ${name}`)

## 28. The Conditional (Ternary) Operator 三元運算子

:::danger
三元運算子是expression，所以可以寫在文字模板(template literal ${} )

然而三元運算子並不是為了取代if else的，當程式碼多的時候if else作用就會很好用
:::

三元運算子基本操作
const age = 15
age >= 18 ? console.log('我喜歡喝紅酒🍷'): //if  
console.log('我喜歡喝水💧')            //else 符合，會印出


const age = 23
age >= 18 ? console.log('我喜歡喝紅酒🍷'): //if  符合，會印出
console.log('我喜歡喝水💧')            //else 

三元運算子比較常見的寫法
const age = 15
const hobby = age >=18 ? '喝紅酒🍷' : '喝水💧';
console.log(hobby) //會印出 else陳述句 喝水💧

原本if else寫法 
const age = 15
if(age>=18){
    const hobby = '喝紅酒🍷'
} else {
    const hobby = '喝水💧'
}
console.log(hobby)

超級重要，三元運算子是expression，所以可以寫在文字模板(template literal ${} )

console.log(`我喜歡喝 ${age >=18 ? '喝紅酒🍷' : '喝水💧'}`)

### 單元練習

const population = 23000000

const word = population >= 33000000 ? "Taiwan's population is above average" : "Taiwan's population is below average";

console.log(word) //會印出else陳述句 Taiwan's population is below average

## 29. 程式挑戰 #4

//消費50~300 小費15%
//消費其他 小費20%

const data = 275

const tips = (data >= 50) && (data <= 300) ? data*0.15 : data*0.2

console.log(`The bill was ${data}, the tip was ${tips}, and the total value ${data+tips}`)  

## 30. JavaScript Releases: ES5, ES6+ and ESNext

| ES5 1 | ES6 | modern JS |
| -------- | -------- | -------- |
| var | const/let | |
||function constrction||
||ES6 class||

###### tags: `[Udemy JS Jonas]`