Javascript應用：試著用JavaSript做出計算幾（二）-第十三天

第 12 屆 iThome 鐵人賽

DAY 13

自我挑戰組

Html/Css3/Javascript從0開始自學系列第 13 篇

12th鐵人賽

sss86925

2020-09-13 22:22:35

1620 瀏覽

分享至

這次主要參考的書（或文章影片）是：「JavaScript資料結構及演算法實作 Loiane Groner著」/youtuber：彭彭的課程之JavaScript網頁前端工程入門

先來看看計算機的基本介面

 <body onload = "start();">
        <div> 
            <table>
                <tr>
                    <td colspan="4"><input class="window" type='text' disabled/></td> 
                </tr>
                <tr>
                    <td colspan="2"><input class="btnClick" type='button' value="AC"/></td>
                    <td colspan="2"><input class="btnClick" type='button' value="Del"/></td>
                </tr>
                <tr>
                    <td><input class="btn" type="button" value="7"/></td>
                    <td><input class="btn" type="button" value="8"/></td>
                    <td><input class="btn" type="button" value="9"/></td>
                    <td><input class="btn" type="button" value="+"/></td>
                </tr>
                <tr>
                    <td><input class="btn" type="button" value="4"/></td>
                    <td><input class="btn" type="button" value="5"/></td>
                    <td><input class="btn" type="button" value="6"/></td>
                    <td><input class="btn" type="button" value="-"/></td>
                </tr>
                <tr>
                    <td><input class="btn" type="button" value="1"/></td>
                    <td><input class="btn" type="button" value="2"/></td>
                    <td><input class="btn" type="button" value="3"/></td>
                    <td><input class="btn" type="button" value="*"/></td>
                </tr>
                <tr>
                    <td><input class="btn" type="button" value="0"/></td>
                    <td><input class="btn" type="button" value="."/></td>
                    <td><input class="btn" type="button" value="="/></td>
                     <td><input class="btn" type="button" value="/"/></td>
                 </tr>
             </table>
        </div>

這裡body標籤內先用onload告知網頁一旦載入就要使用start()函數
接者區塊內包含著一個table
table用來裝各種數字按鍵及運算功能鍵
這裡基本上不太難，又或者說沒有太多新東西，大部分都是html的標籤
所以我們來看看start()做了哪些事情

 function start(){
                var btnget = document.getElementsByClassName("btn");//得知按鈕是哪顆
                var btnOnWindow = document.getElementsByClassName("window")[0];//顯示在螢幕上
                var btnDelAc = document.getElementsByClassName("btnClick");//功能鍵
                var wayres = [];//儲存資料

                for(var i = 0; i <btnDelAc.length; i++){
                    btnDelAc[i].onclick = function(){
                        if(this.value == "AC"){
                            wayres = [];
                            btnOnWindow.value = "";
                        }
                        else{
                            btnOnWindow.value = btnOnWindow.value.substr(0, btnOnWindow.value.length - 1);
                        }
                    }
                }
                for(var i=0; i < btnget.length; i++){
                    btnget[i].onclick = function(){
                        if(btnOnWindow.value =="" && this.value =="."){
                            btnOnWindow.value = "0.";
                        }
                        else{
                            if(!isNaN(this.value)||this.value == "."){
                                if(btnOnWindow.value.indexOf(".")!= -1){
                                    if(this.value!="."){
                                        btnOnWindow.value += this.value;
                                    }
                                }
                                else{
                                    btnOnWindow.value += this.value;
                                }
                            }
                            else{
                                if(this.value!="="){
                                    wayres[wayres.length]=btnOnWindow.value;
                                    wayres[wayres.length]=this.value;
                                    btnOnWindow.value = "";
                                }
                                else{
                                    wayres[wayres.length] = btnOnWindow.value;
                                    btnOnWindow.value = eval(wayres.join(""));
                                    wayres=[];
                                }
                            }
                        }
                    }
                }
            }

看起來有點常對吧！
我們是者分解看看吧

function start(){
                var btnget = document.getElementsByClassName("btn");//得知按鈕是哪顆
                var btnOnWindow = document.getElementsByClassName("window")[0];//顯示在螢幕上
                var btnDelAc = document.getElementsByClassName("btnClick");//功能鍵
                var wayres = [];//儲存資料

這裡基本就是設定變數與說明變數功用而已
再往下看吧

for(var i = 0; i <btnDelAc.length; i++){
                    btnDelAc[i].onclick = function(){
                        if(this.value == "AC"){
                            wayres = [];
                            btnOnWindow.value = "";
                        }
                        else{
                            btnOnWindow.value = btnOnWindow.value.substr(0, btnOnWindow.value.length - 1);
                        }

這裡我們先處理兩個功能按鍵，Del和AC
第一行是條件設定
第二行函數開始（onclick是指按了按鈕後該有什麼反應，這裏後接一個函數，表示按了後函數開始運作）
這個if...else條件具先說明了：如果使用者按了AC，則儲存資料變為空
若不是AC（因為也只有AC/Del兩個按鍵，所以這裡else必指Del)
else下的程式碼執行時將使字串長度減一，即是減去末端數字
處理完這個，我們再來看看當使用者按的是數字或運算符號時該怎麼辦

for(var i=0; i < btnget.length; i++){
                    btnget[i].onclick = function(){
                        if(btnOnWindow.value =="" && this.value =="."){
                            btnOnWindow.value = "0.";
                        }
                        else{
                            if(!isNaN(this.value)||this.value == "."){
                                if(btnOnWindow.value.indexOf(".")!= -1){
                                    if(this.value!="."){
                                        btnOnWindow.value += this.value;
                                    }
                                }
                                else{
                                    btnOnWindow.value += this.value;
                                }
                            }
                            else{
                                if(this.value!="="){
                                    wayres[wayres.length]=btnOnWindow.value;
                                    wayres[wayres.length]=this.value;
                                    btnOnWindow.value = "";
                                }
                                else{
                                    wayres[wayres.length] = btnOnWindow.value;
                                    btnOnWindow.value = eval(wayres.join(""));
                                    wayres=[];
                                }
                            }
                        }
                    }

第一行一樣是條件設定
接者一樣是函數開始
第一個if的設定是用來告訴網頁：『如果使用不按0直接按小數點則顯示0.』
排除這個特殊情況後
else裡面就可以看一般情況（包含數字與運算符號）
也因為包含了數字與運算符號
所以我們需要再一組的if...else
if後面敘述是：按的紐是數字『或』是小點
（這裡看到isNaN，其中NaN=not a number，所以isNaN就是用來判斷是『不是』數字的工具;而這裡前面加上了！表示否定，雙重否定下變成判斷『是』不是數字。另外||表示或）

而下一層的if裡面敘述是：尋找已輸入的數字中有沒有.
這裏indexOf用來收尋，如果有找到會回報在第幾位找到，沒有則回傳-1
因此如果這裡回傳了不等於（!=)-1的值，括號內便是true
則執行它下面的if敘述
（又往下一層囉）

這一層if的敘述說如果輸入的值不等於.
那麼就直接把值加上去
如果是.，我們就不理他（當然你也可以用else增加一個警告視窗：不能輸入兩次小數點之類的警語）

接下來回到與『if裡面敘述是：尋找已輸入的數字中有沒有.』這一句同一層的else
if說的是已經有.，所以else就是沒有.的情況
既然不存在小數點，那就不用擔心一串數字出現兩個小數點了
因此不管輸入什麼，我們都直接加上去就好

接者回到最外層的else，這裡就是如果輸入運算符號，要做什麼事
因此我們在這個else裡面再加一組if...else條件句
用來區分一般運算符號跟等號
if內敘述是指使用者按下等號，那我們就直接把數字秀出來了！
else則進行該運算