程式基礎 —— Javascript


Posted by Lindsay0214 on 2021-07-20

什麼是 Javascript

Javascript 是一個應用於網頁前端的程式語言。

如何執行 Javascript

  1. 在瀏覽器上開啟 devtool 跑
  2. node.js —— 讓 Javascript 可以跑在瀏覽器以外的環境上(一個 Javascript 的執行環境)

環境建置

直接去官網下載即可。

萬年傳統 —— Hello World

// index.js
console.log("Hello World!")
  1. 在瀏覽器上執行,Devtool 就會印出 Hello World!
  2. 在 terminal 上執行,則輸入指令node index.js,就會印出 Hello World!

變數 Variable

基本運算

  • 加減乘除 +− * /
  • 取餘數 %

基本邏輯運算

  • or || → 第一個是 true 就回傳遞第一個值,是 false 就回傳第二個值
    • true || true → true
    • true || false → true
    • 3 || 10 → 3
    • false || 10 → 10
    • 0 || 10 → 10(把 0 視為 false)
  • and && (一個 & 有別的含義,不要搞混囉~)
    • true && true → true
    • true && false → false
    • 3 && 10 → 10
    • 10 && 3→ 3
    • false && 3 → false
  • not !
    • !true → false
    • !false → true

簡單複習二進位

二進位:由 0 與 1 組成

0100 ( 2^00 + 2^10 + 2^21 + 2^30 ) = 2^2 = 4

1000 = 2^3 = 8

二進位就是把東西往左移後都乘以 2

所以往右移就會變除以 2

位移運算

左移 <<

  • 2 << 1 → 4 ( 2 往左移一位 → 4 )
  • 10 << 1 → 20
  • 10 << 3 → 80

右移 >>

  • 1024 >> 1 → 512 ( 1024 往右移一位 → 512 )
  • 9 >> 1 → 4

位元運算

位元運算

  • 10 & 15 → 10
  • 10 | 15 → 15

xor ^

  • 2^4 → 6
  • 10^15 → 5

邏輯運算

  • 10 && 15 → 15
  • 10 || 15 → 10

變數宣告

  • var / let / const
  • 不能取名為數字、保留字,語意化命名
  • var box = 123 把 123 的值放在 box 容器裡
    • var box, console.log(box) → undefined 宣告了,但沒賦值
    • console.log(box) → not defined 連宣告都沒宣告
  • = / == / ===
    • = 賦值
    • == 判斷值是否相等
    • === 判斷值跟型態是否相等

變數型態

透過 typeof 查詢型態

  • string
  • number
  • boolean
  • object
  • undefined ( ≠ null )
  • function

陣列 Array

index,陣列第一個數字從 0 開始

let class = ['A', 'B', 'C']
class.push('D')
console.log('result', class)
ABCD
class.length = 4
let igPosts = ['URL1', 'URL2', 'URL3'] -> 就變貼文串ㄌ

物件 Object

ket = { value }

const card = {
    name: 'Lindsay;s card',
    job: 'student'
    age: 22
    }
card.name = 'Lindsay;s card'

(延伸閱讀:從博物館寄物櫃理解變數儲存模型

注意事項

  • 字串拼接:不同型態間變數相加,像是字串與數字相加
  • 浮點數誤差:有些小數電腦不會儲存的非常精準,所以計算可能會出現預期外的答案
  • 建議都使用 === debug 時比較容易

判斷式

  • if
var score = 60 
if(score >= 60 && score <= 70){
    console.log('剛好及格')
}
  • if... else...
var score = 60
if(score >= 60){
    console.log('pass')
} else {
    console.log('fail')
}
  • if ... else if...
var age = 10
if(age >= 65){
    console.log('老人')
} else if (age >= 20){
    console.log('年輕人')
} else {
    console.log('小孩')
}
  • switch case
switch(month){
    case 1:
        console.log('一月')
        break
    case 2:
        console.log('二月')
        break
    case 3:
        console.log('三月')
        break
    default:
        console.log('hey')
}
  • 三元運算子 Ternary
if (score >= 60){
    msg = 'pass'
} else {
    msg = 'fail'
}
->
var msg = score >= 60 ? 'pass' : 'fail'
score 是不是大於等於 60,是的話回傳 pass,不是的話回傳 fail

迴圈 loop

一直做一樣的事(執行同樣的程式碼),若沒有設定終止條件,就會變無窮迴圈。

迴圈的前世:label、goto ( Javascript 沒有 )

var i = 1
label:
console.log(i)
i++
if(i <= 100){
    goto label
}
console.log('i=', i)
  • do... while...
var i = 1
do{
    console.log(i)
    i++
} while(i <= 100)

console,log('i=', i)
  • while
var i = 1
while(i <= 100){
    console.log(i)
    i++
}
  • for

for ( 初始值; 終止條件; i 每一圈要做的事情 )

for (var i =1; i <= 5; i++){
    console.log(i)
}

函式 function

y= f(x),y 就是回傳值, f(x) 就是函數,x 就是丟進去的參數

return 後面回傳值不用換行,否則會 undefined

function generateArray(n){
    var result = []
    for(var i = 1; i<=n; i++){
    result.push(i)
    }
    return resule
}
console.log(generateArray(3))

不同函式宣告方式(重要)

function transform(arr, transformFunction){  // 接收 arr, transformFunction 兩個參數
    var result = []
    for(var i=0; i<arr.length; i++){
        result.push(transformFunction(arr[i]))
    }
    return result
}

console.log(
    transform([1, 2, 3], function(x){   // 匿名函式
    return x+4
    })
)

(延伸閱讀:深入探討 JavaScript 中的參數傳遞:call by value 還是 reference?

不可變 immutable

只有物件、陣列是可變的

return 意義

  • function 沒回傳 return 就會回傳預設 return undefined
  • 有東西需要它的回傳值就要寫 return
  • console.log() 印出 / return 回傳

內建函式

  1. 許多程式語言內會有內建的函式,都可以在 MDN 內查找,內建函式加快編寫程式速度,不過即使沒有也能自己實作。
  2. 注意每個內建函式回傳值的型態。

#程式導師計劃 MR05 #Lindsay's note #javascript







Related Posts

CSS保健室|用圖片來取代文字標題

CSS保健室|用圖片來取代文字標題

[Power BI] 讀書會 #2 Analysis Services 概念(1)

[Power BI] 讀書會 #2 Analysis Services 概念(1)

什麼是 CLI? Gulp-cli? Vue-cli?

什麼是 CLI? Gulp-cli? Vue-cli?


Comments