這次主要參考的書（或文章影片）是：「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則進行該運算
iThome鐵人賽
看影片追技術