HTML5 jumpstart study NOTE 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 (prototype; Standard)-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 (increase; increase)

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 (range) (1) defining what is accessible in code and where (2) Encapsulation (encapsulation; packaging)

//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 (){...})();

The general meaning is as follows: "()" enclose the method, indicating immediate execution. The first method is to call the function and then execute it immediately. The second method is to execute the function first and then call it. If the results are the same, the function will be executed and the return value of the function will be returned.

//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));    })();

In the first example above, because the function returns the gethiddenyear method immediately after execution and assigns the returned result to mod, the MOD object has the gethiddenyear () method.

5. arraysimple Declaration/instantiation (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); // Merge multiple arrays fruit = fruit. slice (); // truncate the Array (0 starting (inclusive), 1 ending (excluded) fruit. splice (, "Melon", "grape"); // splice (splicing), 1 starting point, 2 length, "Melon" and "grape" are replaced elements, returns the replaced element fruit = fruit. map (function (I) {return I. touppercase ()}); fruit = fruit. filter (function (I) {return I [0] = "A" ;}); // filter the array log (fruit. every (function (I) {return I [0] = "A" ;})); // if the first letter of each element is "", returns true log (fruit. some (function (I) {return I [0] = "A"}); // if there is at least one element whose first letter is "", returns true fruit. foreach (function (I) {}); log (fruit. sort (); // sort Sort Alphabetically}

6. Object

// Declaration method 1 var dog ={}; dog. breed = "German shepherd"; dog. bark = function () {log ("woof") ;}; // declaration method 2 var dog = {breed: "German shepherd", bark: function () {log ("woof ");}};