前言

在java世界裡遊覽一番後，實際專案中，因進度緊張，需要支撐同事做一段時間的前端開發，所用JavaScript框架為Vue.js。說實話，在做Java後臺開發過程中，發現還有很多地方需要用到javascript的。比如android中的cordova和web服務端的nods.js等。作為1個10年+面向物件程式設計經驗的老程式猿，決心花點精力研究下js技術，做一名更加稱職的全棧攻城獅。

準備

可謂工欲善其事必先利其器。鑑於本人只斷斷續續寫過一點js，對html/css和js基礎和框架並不是十分熟悉。所以決定從頭系統學習下js基礎，然後再做個小需求練手。

javascript基礎知識惡補措施：

1、選本經典的JavaScript書籍精讀；

2、使用Chrome開發者模式對書中知識點做下驗證；

3、在本部落格中記錄學習心得

先在網上看了一些經驗人士的建議，大部分推薦的書籍為《JavaScript高階程式設計》、《JavaScript權威指南》。而本人在2014年就買過一本《JavaScript權威指南》（第6版）（有點汗顏T_T）。再次看了下序言和目錄，確定其基礎語法與JavaScript核心DOM相關內容均包含其中，於是輕鬆選定權威指南作為學習書籍。

基礎語法

1、JavaScript是一門弱型別、應用相當廣泛的程式語言（非常適合面向物件和函式式的程式設計風格）；

2、JavaScript非常方便除錯，基本上使用瀏覽器的開發者工具就可以完成調測；

3、函式定義和使用非常簡潔。比如定義兩個點的集合物件為points：

var points = [{x:1,y:1},{x:3,y:3}];

其中，points物件表示一個數組，其中有2個元素，且第1、2個元素也為物件，分別擁有x,y 2個屬性，代表x和y座標。可以再為points物件新增一個公共函式，用於計算2個點之間的距離：

points.dist=function(){
    var p1 = this[0];
    var p2 = this[1];
    var a = p2.x-p1.x; 
    var b = p2.y-p1.y;
    return Math.sqrt(a*a+b*b);
};
 

其中，this表示points物件本身，因為points物件本身是個陣列，所以this[0]表示為自身的第1個元素。

在Chrome瀏覽器開發者模式工具欄中輸入points.dist()後，會顯示結果為：2.8284271247461903。除錯非常方便快捷。

作為函式程式設計的延伸，想出寫個f(n) 的JavaScript函式，要求如下：

1）輸入：fnsum(n)

2）輸出：1*2*3...n = xxxxx.

思路：寫3個函式，第1個函式用於拆解f(n)的表示式；第2個函式用於遞迴計算其f(n)的值；第3個函式彙總第1第2個函式的結果。

var fnprint = function(n){
    var temp = 1;
    var t="";
    while(temp<=n){
        t=t+temp+"*";
        temp++;
    };
    if(t.lastIndexOf('*')===t.length-1){
        t=t.substring(0,t.length-1);
    }
    return t;
}

var fnsum=function(n){
    if(n>1){
        return n*fn(n-1);
    }else if(n==1){
        return 1;
    }else{
        return 0;
    }
}

var fn=function(n){
    return fnprint(n)+"="+fnsum(n);
}

定義好上述3個方法後，執行fn(10)效果如下：（限於時間，目前沒有對上述方法做嚴格的邊界校驗）

1*2*3*4*5*6*7*8*9*10=3628800