# JavaScript學習筆記
## 一、基本概念
1. java 需要編譯器，翻成電腦可以直譯的語言，再用直譯器跑；而==javaScript 是直譯式語言==，++直接寫完直接用直譯器跑++，所以比較容易爆炸，有爆炸時再去了解錯誤會比較快，初期不要太相信console，因為有可能印出來是已經被改變後的結果。
2. 是弱型別語言，變數的型態會一直變來變去：變數宣告後，可以任意變更成任何基本、參考資料型態、甚至是function。
3. 不是物件導向的語言，因此沒有所謂的類別概念，但仍有參考資料型態。
4. 程式執行的順序一樣是由左是右，可以不用寫分號，並且因為沒有字元所以雙引號跟單引號都可以，非常大量的使用callBackFunction。
6. 基本資料型態只有三種：
* String(java: char、String)
* number (java: byte、short、int、long、float、double)
* boolean
7. 參考資料型態，主要兩種：
1. 物件(Object)：可以後補資料、無限巢狀(物件內+物件，json格式就是用類似javaScript的Object格式在寫的，如果沒要用keyPair就用array。
++宣告方式++：大括號，裡面一定是類似HashMap，都是key,value 鍵值對 ex: {"key1":value1}。
++拿取方式++：object.keyName 即可 ex:`let a = {apple:123}` -> a.apple = 123。
2. 陣列(Array)：不用doubleArray，陣列裡面可以隨意放資料型態，也可以跳過順序，如果有跳過會預留空間。
++宣告方式++：直接中括號即可，不用new，ex:[]
++拿取方式++：a[index]即可。
3. 陣列內也可以放物件，物件內也可以放陣列
4. 記憶體觀念跟java一樣，參考資料型態，存的是記憶體位置，要特別注意。

    //陣列
    let a =[]
    a[0] = 2
    a[2] = "test"
    console.log(a)
    ->[2, <1 empty item>, "test"]
    
    //物件
    var a = {
    	"key1" : 1,
    	"Key2": true,
    	"key3":{
    		"key3-1":2
    	},
    	"Key4": [1, 2, 3, 4, 5]
    }  
    a.key2 = "str"  //後面增加值
    console.log(a)
    ->{key1:1,key2:"str",key3:{"key3-1":2},
    key4:[1,2,3,4,5]}"
    
    a={"key1":1}
    a.key2 = 5  //後面增加值
    console.log(a)
    ->{key1:1,key2:5}
    

7. String沒有字串池，且在兩個資料型態不同時可以互相比較：
* 兩個 == :無視型態比較 ex: `let a = "5" let b = 5 console.log(a == b) -> true`。
* 三個 === 是會抓取型態的比較 ex:`let a = "5" let b = 5 console.log(a == b) -> false`。
* 參考資料型態也是可以無視型態比較，只是就會是false，但不會報錯。
8. console.log(a + b + c) 裡面就算是基本或參考資料型態，都可以串起來印出 ex: `let a = "5" let b = 5 let c = [1,2,3] console.log(a + " " + b + " " + c) -> 5 1,2,3 5`。
9. 如果資料還沒被寫出來可以讓你的資料是undefined，因此如果null代表的是有這筆資料就是null並非未定義。
10. 因為是直譯式語言，所以function，還沒呼叫就會先跑一次，要特別注意。
11. func、object、arr 是同級的，所以直接變數存取即可，小括號內放要帶入的參數，但可以宣告參數但不傳，參數會按照順序給值。
* 宣告方式：var 變數名稱 = (參數) => {func內容 }
* object的value，可以放function，呼叫時就object.funcName()，ex: `b.func()`
* 參數也可以放function進去。
12. function範例：

        //(function ex6寫法) 
        var a = () => {
            console.log("Test")
            //console.log("Test") = System.out.prinlnt("Test")。
        }
        console.log(a) -> [Function: a] //直接印func也不會報錯

        //小括號內放要帶入的參數，但可以宣告參數但不傳，參數會按照順序給值。
        var a = (q, w, e) => {
            console.log(q)
            console.log(w)
            console.log(e)
        }
        a() -> undefined,undefined,undefined
        a(1) -> 1,undefined,undefined
        a(1, 2) -> 1,2,undefined
        a(1, 2, 3) -> 1,2,3

        //呼叫object內的function
        var b = {
            func: a,
            key: "1"
        }
        b.func()
        console.log(b)

        {func: [Function: a],key:'1'}

        //(ex5寫法)
        var a(){
            console.log("Test")
        }

        //CallBackFunction
        let test (func) =>{
            func()
        }
        test() => {
            console.log("Hello world!")
        }

13. 變數宣告方法，var、let、const：
* let是這個生命週期(大括號內)，99% 使用let。
* var是生命週期更長，會超過function。
* const是final的意思，生命週期最長。
沒有static可用。
14. 可以導入強型別的語言的資料，但是到了javaScript後會變成沒有型別在處理。
15. 寫完要按存檔，重開程式，因為不是編譯器（terminal不用重開，可是要用ctrl + c 把程式關掉重開 npm run start，才會更新）。
16. 遊覽器預設只有get的方法，所以不能用別的方式傳資料 ex: post 。
`router.get('/' , function(req, res, next){
res.render('index', { title: 'Express' });
}`
17. post 大部分都是用postman來測試。

### app.js文件名詞解釋
1. require = import的意思(ex5是import,ex6是require)，裡面放的是路徑(String)，導入時就會自己跑一遍。
./ 是當前路徑的資料夾在往內找：當前資料夾同層
../ 代表的是上一層：前一層資料夾同層
../../ 代表的是上上一層：前兩層資料夾同層
2. export = 將程式碼導出，只是把程式碼傳出去，Express 只是個名稱，不是類別。
3. app = 整個WEB API服務的核心（也就是express)，功能z分兩類如下：
1. use (middleware 中介層)：當有人呼叫api時使用（跑資料），然後從上而下跑一次所有的use。
ex:

            app.use(logger('dev')) ->印出get...
            app.use('/',indexRouter) ->如果是當前網址，就跑indexRouter，也就是呼叫index.js。
            app.use('/users',userRouter) ->如果是當前管理者網址，就跑userRouter，也就是呼叫user.js

2. get.post.put.delete：API使用
4. 因為app.use 跑到indexRouter -> index.js裡的`router.get('/',function(req,res,next){res.render('index',{title:'Express'})}`，
render : 渲染 - 印出這段文字在網頁上。
5. '/' 代表的是路徑後沒有其他資料，也就是說網址如果後面都沒加，會跑到index，如果是'/test'，網址後面加上/test就會叫到這個方法。
6. 簡單來說，因為會先跑app.use，所以會先讀看網頁到index 或 user的routes ，然後再看各自的檔案中有沒有撰寫/後對應的path，有符合的資料就做對應的事情，因為每個路徑其實就像是keyPair一樣，path正確，做相對應的function。

補充資料：[javaScript學習資源-w3school](https://www.w3schools.com/js/js_intro.asp)、[javaScript學習資源-it鐵人賽](https://ithelp.ithome.com.tw/users/20065504/ironman/1259?page=1)、[CallBackFunction](https://ithelp.ithome.com.tw/articles/10192739)、[Express 中介軟體](https://medium.com/pierceshih/%E7%AD%86%E8%A8%98-%E4%BD%95%E8%AC%82-middleware-%E5%A6%82%E4%BD%95%E5%B9%AB%E5%8A%A9%E6%88%91%E5%80%91%E5%BB%BA%E7%AB%8B-express-%E7%9A%84%E6%87%89%E7%94%A8%E7%A8%8B%E5%BC%8F-19082b1d8e06)

###### tags: `CMoney7th-戰鬥營學習筆記`