簡介
Js 1995年被創造用於寫網頁、隔年被改良為 scripting language
ECMA-262 規範了JS的語法規則
ES6是整個規範最大的改動 ，例如加入OOP的概念
本質上很"安全”(不會碰記憶體等核心)
同時JS能與HTML、CSS整合、相對簡單，並且被大多數瀏覽器支持
JS遵從ECMAScript標準
JS 是直譯、動態(runtime才檢查)、弱型別(隱轉)語言
-
Note:Scripting language是為了縮短傳統的「編寫、編譯、連結、執行」（edit-compile-link-run）過程而建立的
參考: https://zh.wikipedia.org/wiki/%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80 -
Note: browser通常都內建JS的虛擬引擎
如: chorme是V8 Firefox是SpiderMonkey -
Note: 引擎大概的工作是 解析script > 編譯成機器碼 > 執行機器碼
在browser中JS
與使用者、伺服端互動溝通
比如:
- 改動HTML tag、CSS style
- 回應使用者 如:滑鼠點擊
- 要求伺服端下載資料
- 取得、設定 cookie，依使用者決定呈現的data
- local (client) storage
同時JS也必須因為安全考量限制其功能
比如:
- 不得操作OS等核心
- 除非使用者同意，不得使用硬體設備
- Same origin policy (同源政策) 限制不同web間正常來說要獨立 (資安保護)
- 只能從一個server接收資料 (否則須權限)
基礎語法
1.Console,a keyword,refer to a object
keyword:能被程式辨認且有特殊意義的字
object:資料與行為的集合
*console.log 不會顯示給user
*alert() 、comfirm(…)、prompt()則會跳出視窗顯示訊息
console.log(5); 印出5 ;做斷句
console.log(‘this is a book’); 印出string
2.註解方式:just like C++
(//、/…/)
3.Data Type:
primitive data
- 數字 (include 整數、小數、Infinity、NaN)
- 字串(‘’ or “”)
- 布林值
- NULL : null，代表無值
- undefined :類似null
- Symbol (variable)
complex data - object (data & action)
*Note: Data type convertion
由於JS是動態弱型語言，有很多隱轉，比如
字串串接 (A+B = AB)
數學加法 (“6”/“3” =2)
….
*如果數字轉型失敗會出現NaN
4.基本運算元 與其他語言差不多，有加減乘除，取餘數
5.字串串接: ‘A’ + ‘B’= ‘AB’
6.性質:
所有data都是data type的實例(instance)，因此都擁有Data type的property
例如所有字串都有length的性質
‘hello’.length 就是5
7.method:
類似性質，data type可使用的函式
console.log()的log()就是如此
8.內建object
善用此網站查詢所要涵式
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
比如使用Math物件中的random()
應用:隨機取0-50
注意: 使用方式
coding skill in JS
(1)建議加 ;
(2)最好採用先主code 後 help function 的方式 (讓人不一定需要讀function code)
(3)好的funciton、variable 名字可以代替註解
(4)善用continue、return 避免過多層的nest
(5)comment只用在重要解法、high level view 、function 用法
B.JS變數:
(a)概述 (程式語言的複習)
變數是儲存資料於記憶體中
變數三操作:創造、儲值、取值
變數=/=數值 :變數只是代表一個值 (box and things)
變數優點:易讀、少錯
(b)Create variables:
recall:JS 是直譯、動態(runtime才檢查)、弱型別(隱轉)語言
var、let、const來創造變數
1.var例子:(ES6以前的版本)
//變數採 camel casing 命名法(thisIsAnApple)
2.let 例子:
用法跟var一樣
- 注意:若只宣告變數而不初始化，JS會視為undefine型態
3.const例子: 同C++中的常數，不可以改值，初始化未賦值視為錯誤!
(c)變數運算
1.和C++類似有+=.. ++…等等操作
2.變數也能字串串接
3.字串插值(重要)
template literals: 用``(反斜線刮住的字串)
可以使用${變數}來代值 (類似於bash 或 python的.format)
eg:
優點:易讀
4. typeof variable :回傳variable 型態
eg:
let my = 65
typeof my //retrun number
C.條件判斷
(a)跟C++類似 (if-else if -else)
(b)比較運算子
- note: 字串採用字典比較
- note: null、undefined(NaN)在大小於比較一定會return false，故應特例處理
(c)邏輯運算子
(d)資料型態真假值
以下恆假
除此之外都為真
*補充:優雅程式寫法: (類似於bash)
D.函式
函式本質是一段可重複利用的程式碼
(a)宣告
-
注意function 關鍵字
-
如沒有return值，會return undefine
-
Hoisting (提升) JS可以允許先使用再定義函式!
使用上幾乎與C++概念相同，唯一需要注意的是在JS，function也可以作為參數
(b) anonymous function 與 arrow function
本質上是一種語法糖，可以簡化寫法
anonymous funciton
以上例子中可以看到兩個無名的funciton被作為函式傳入
並且分別代表no()與yes()
arrow function
甚至function關鍵字也可以省略
E Scope:
基本同C++
global:不在任何一個block內，整個檔案都能使用此區域的變數
block:在某一對 {} 中，裡面宣告的變數只有此block能使用，使用未宣告的變數會有ReferenceError (而非undefine!)
Scope pollution:過多變數在全域，可能會引發未定義行為(unexpected behavior)
- Scope規則的好處:安全、易讀、好維護、省記憶體
F.array & loop:
array
(a).Create
array可以用
let myArray=[‘string’,100,true]去創造，同時因為JS是weak type，array可存任意物件! 當然array也可以存在array中 (just like python)
-
note: 可想像array就是一堆變數
-
note: array名代表整個array!(不是位址)
(b).access element
myarray[n],第n+1個element (從0開始) -
note: 字串一樣可以用此方式取字元
-
note: 取用超出arrray bound 是 undefine，而不是error
當然也能update元素 -
注意:用const宣告的array還是能修改array element，但不行重新assign該array eg:
const myArray=[1,2,3]
myArray[0]=2 //OK
myArray=2 //invalid!
(但是myArray是用let就沒問題，記住JS是weak type)
(c)array 操作
length 可以看有多少元素 (remember ‘string’.length)
*小技巧: A[A.length-1] 就能取到最後一個元素
push() 可以在array最後面放入元素
pop()可以取出最後面的元素 (刪除兼回傳)
更多可參考
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
比如:
shift() 刪除第一個元素
unshift() 在array前面放入元素
slice() 類似於python的[:]，可以取段落出來
Loop
(a)for 與C++同 提醒可以使用 \for(let i=0;i<\myArray.length;i++) 去traversal所有元素in myArray (b)while 與C++ 同，也有do…while
G.High Order function & iterator
由於較為繁瑣，請參考原筆記
點此
H.Object (JSON 相關)
Object會收集相關Data與function，就像字典一樣，也因為其方便與可讀性，成為一種廣泛使用的交換資料格式
(a)建立javascript object
let variable =｛｝
object是用key-value pair的形式製造
- 注意，key一定是字串，但JS允許omit(省略) 引號‘ ‘
- 注意，鍵值中間是用 : 隔開(同python 字典)
- 注意，分隔是使用逗號，而且結束不用加分號
- 注意，鍵就像變數名，而值一樣可以是任意型態(even 陣列、函式)
(b)取用
(c)修改object property
類似於python
可以用obj[key] = value進行修改
*注意:如果property原本不存在object中，則會創造新的property
*注意:可以使用delete 去刪除property
例如 delete spaceship.color;
其他進階主題也可以參考原筆記
點此