keypress

在 JavaScript 中，可透過 EventListener 對鍵盤進行監測，以下為常用(分大小寫)
key : 按鍵名稱(Enter、9、O、o)
keyCode : 表示實際上在鍵盤中存在的數字
characterCode : 表示ASCII character的數字
witch : 哪個被按了 (keyCode)

document.addEventListener('keypress', function(e) {
    console.log(e);
    if(e.keyCode === 13 || e.which === 13){
        console.log('Enter is press');
    }
}
// ouptpu : KeyboardEvent (object)
// output : Enter is press 

// while press K
key : "K"
keyCode : 75
charCode: 75
which: 75

// while press k
key: "k"
keyCode : 107
charCode: 107
which: 107

而最新關於DOM Events的規範則是統一用"key"這個屬性去取代which, keyCode, charCode, 但是在實際寫code時, 還是要注意目前瀏覽器是否開始支援key再使用。

Retrun values as an object

// original
var UIController = (function() {
    
    return {
        getInput: function() {
            var type = document.querySelector('add__tyoe').value; // inc or exp
            var description = document.querySelector('add__description').value;
            var value = document.querySelector('add__value').value;
        }
    }
    
})()

// return as object
var UIController = (function() {
    
    return {
        getInput: function() {
            return {
                type: document.querySelector('add__tyoe').value, // inc or exp
                description: document.querySelector('add__description').value,
                value: document.querySelector('add__value').value
            }
        }
    }
    
})()

模組、簡潔化 controller -> init function

controller 本身為 IIFEs 會直接被呼叫
將程式碼模組化，並透過 return -> public
在於 Global 中呼叫 init()

// GLOBAL APP CONTROLLER
var controller = (function(testCtrl, UICtrl){
    
    var setUpEventListeners = function() {
        // set up code here
    };
        
    var ctrlAddItem = function() {
       // code here
    };
    
    return {
        // return to be public
        init: function() {
            console.log('Application has started');
            setUpEventListeners();
        }
    }
    
})(budgetController, UIController)

// call the init func
controller.init();

結束了前 10 小時的課程，接下來會是一連串的實作，文章就先當成實作筆記吧~
會記錄一些在實作中使用到的作法、概念。

課程 : https://www.udemy.com/course/the-complete-javascript-course/
來源 :
keyCode : https://lucrelin.blogspot.com/2016/11/javascriptwhichkeycodecharcode.html