《javascript高級程序設計》讀書小延伸

 

這本書已經讀了幾章了，想着試試能不能作出點東西，就簡單的練了把手。以爲對於初學者，本身試着練練，效果還不錯的。

揮刀要從輕的開始，起初的緣由是和同事談起曾經的逝水年華（小時候乾的壞事）時提及了曾經的一篇課文，講的是一個小朋友如何巧妙地從1到100累加起來的，猛然間我以爲能夠用js算出來，說幹就幹。

function add(){  
    for(var i = 1; i <= 100; i ++){
          var sum = 0;
          sum += i;
    }
    alert(sum);
}
add();

滿心期待的點擊運行，正打算歡呼之時，看到結果的那一刻整我的都石化了。結果竟然是100，真是奇怪，仔細檢查了下代碼，發現犯了一個低級的錯誤，原來把sum聲明在循環內了，這就至關於每循環一次，sum都被從新賦值爲0，致使疊加變爲了 sum = 0 + i ，並非指望的那樣，馬虎。改吧，因而乎，把sum聲明到了循環體外面，再次運行帶到了想要的 5050 。

不過這並不能讓我有太多的成就感，咱們還能夠把它變得更加智能。好比我想從2累加到10，那應該怎麼辦？想了下，加個參數就行了。

function add(a,b){ 
    var sum = 0; 
    for(var i = a; i <= b; i ++){ 
          sum += i;
    }
    alert(sum);//54
}
add(2,10);

 在紙上算了算，確實正確。可是這樣我只能在代碼中進行修改，能不能把它放到界面上，我想讓它變得更加有活性，開始值和結束值要按照個人心情來，想讓它是多少就是多少，寫程序就是要這麼任性。

<input type = "text"  id = "sum">
<input type = "button" value = "疊加" id = "click">

簡單的作了一個文本框和一個點擊按鈕，指望在文本框中輸入不一樣的數字，而後點擊獲得累加的結果。

var sum = document.getElementById('sum');
var click = document.getElementById('click');
click.addEventListener('click',function add(){
    var number = sum.value.split(",");//將輸入的內容轉化爲數組(默認輸入的2個數字用「，」來隔開，好比輸入1，3)
    var c = 0;
    var a = number[0];
    var b = number[1];
    for(var i = parseInt(a); i <= parseInt(b); i ++){
         c +=i;
    }
    alert(c);
},false);

 再寫的時候第一想到的是獲取到文本框中的字符串，而後再將其轉換爲數組，經過數組拿到想要的值。若是是空格隔開2個數字的話，能夠在用「||」繼續添加條件，目前我只能作到特定符號隔開的狀況，對於隨意輸入尚未想到很好的解決辦法。對於得到文本框中的的數字，能夠在split()中使用正則匹配，好比仍是「，」隔開的，改成「/,/」，就能夠了。固然也能夠用正則進行匹配。

var sum = document.getElementById('sum');
var click = document.getElementById('click');
click.addEventListener('click',function add(){
        var pattern = /(\d+),(\d+)/g;
        var c = 0;
        if(pattern.test(sum.value)){
           var a = RegExp.$1;
           var b = RegExp.$2;
    }
        for(var i = parseInt(a); i <= parseInt(b); i ++){
              c +=i;
    }
    alert(c);
},false);

簡單的解釋下，\d是是匹配的時候查找數字，\d+是匹配至少包含一個數字的字符串，(\d+)是一個捕獲組，爲了方便進行捕獲和賦值。test()函數從字面意思也可看出他是爲了檢測是否匹配，返回值爲true和false，RegExp.$1是獲取第一個捕獲組，RegExp.$2獲取第二個捕獲組，這樣就很容易獲得「，」兩邊的數字了。

其實不管是用split()仍是使用正則，思路是同樣的，可能還有更簡單的方法，可是目前尚未想到。

這個也能夠再繼續往下去延伸，好比說我獲得這些值後，不去作累加，而是作一些判斷條件，就像登陸和註冊同樣。我以爲這樣在學習的過程當中能夠去聯想下各類場景，試着寫寫，不會的就去查，進展可能會快一些。