Html5 JumpStart學習筆記4：JavaScript Core Capabilities

Module Agenda

OverviewVariablesFunctionsFunction scopeArraysObjects

1. Overview(1)History

1995: started in the browser (Brendan Eich | Netscape)
1997: formalized by ECMAScript
2009: moved to the backend (node.js)
2012: moved to the client (Windows 8)

(2)Language Characteristics

prototype(原型；標準)-based
dynamic and weakly-typed
first-class functions
C-like syntax

2. Variables

types(string,number,boolean,array,object,null,undefined)
declarations

3. Functions(1)callable behaviors(2)implemented as objects(3)hoisting(提升；升高)

app.onready = function(e){    log(f1());//right    log(f2());//wrong    function f1(){        }    var f2 = function(){    };}

(4)arguments

app.onready = function(e){    log(f1("one",2,0.78,{},[]));    function f1(){        debugger;    }}function justDo(){...}function getSomething(){... return something;}function doWithArg(arg){    //use arg}function doWithArgs(arg1,arg2){    //use arg1 or arg2}

(5)Methods

var ops = {    add:function addNumbers(n1,n2){        return n1 + n2;    }};var x = ops.add(3,5);//x == 8var y = ops.addNumbers(3,5);//not valid

4. Function scope(範圍)(1)defining what is accessible in code and where(2)encapsulation(封裝；封裝)

//Demo1:Scope    var x = 2000;    function someFunc(){        var y = 12;        return y;    }    var z = x + y;         //invalid use of y    var z = x + someFunc();//z == 2012    //Demo2:Functions in Functions    function outerFunction(n){        function innerFunction(){            return n*n;        }        return innerFunction();    }    var x = outerFunction(4);//x == 16    //innerFunction cannot be called directly

(3)Immediate Functions

(function(){...}());
or
(function(){...})();

      大體的意思是這樣的：“()”將方法括起來，表示立即執行。上面第一種寫法是先調用函數，然後立即執行；第二種寫法是先執行，然後調用。效果是一樣的，都會執行函數，並返回函數的傳回值。

//Module Pattern    var mod = (function(){       var m = 2000,c = 0,d = 10,y = 2;        return {            getHiddenYear: function(){                return m + c + d + y;            }        }    }());    var x = mod.getHiddenYear(); // x == 2012(function(){        function add(n1,n2){            return n1 + n2;        }        function calc(n1,n2,processForCalc){            return processForCalc(n1,n2);        }        function executeMath(){            setOutput(calc(4,4,add));    })();

      上面第一個例子，因為函數立即執行後返回了getHiddenYear方法，並把這個返回結果賦給了mod，所以mod對象就有了getHiddenYear()方法。

5. Arraysimple declaration/instantiation(執行個體化)array fucntions: push, pop, concat, map, filter, some, every, forEach, reduce, sort, splice, slice, join, reverse

app.onready = function(e){       var fruit = ["apple", "orange", "banana", "strawberry", "cherry"];       var vegetables = ["carrot", "broccoli", "cauliflovd"];     fruit.push("pear");       fruit.pop();//pop pear(the last pushed)       fruit = fruit.concat(vegetables);//合并多個數組        fruit = fruit.slice(0,1);//截取數組（0起始（含），1結束（不含））        fruit.splice(1,2,"melon","grape");//splice(拼接)，1起始，2長度，"melon"和"grape"是替換的元素，返回被替換掉的元素            fruit = fruit.map(function(i){return i.toUpperCase()});     fruit = fruit.filter(function(i){return i[0] === "a";});//按條件式篩選數組            log(fruit.every(function(i){return i[0] === "a";}));//如果每一個元素的首字母都是"a"，則返回true       log(fruit.some(function(i){return i[0] === "a"}));//如果有至少一個元素的首字母是"a"，則返回true       fruit.forEach(function(i){       });       log(fruit.sort());//sort按字母順序排列     }

6. Object

//聲明方式一   var dog = {};   dog.breed = "German Shepherd";   dog.bark = function(){log("woof");};   //聲明方式二   var dog = {       breed:"German Shepherd",       bark:function(){log("woof");}   };