יצירת מחשבון ב-JS

ישנן דרכים רבות לכתוב מחשבון ב-Java Script ולהציגו ב-HTML , בפוסט זה אראה דרך שנחשבת יחסית לפשוטה.

אך תחילה, בואו ונראה את הדמו:

בחלק ה-HTMLי נגדיר בתוך טבלה את הכפתורים שלנו עם ערכי המספרים כשלכל כפתור נגדיר OnClick Event .

כל הכפתורים מלבד כפתור ה "=" , יקראו לפונקציית pushButton כאשר מעבירים לה את ערך הכפתור (יוגדר תחת מאפיין ה-Value).

כפתור ה "=" יקרא לפונקצית calculate ויעביר לה את הערך הנקרא ממסך התצוגה של המחשבון , במסך זה התווספו כל ערכי הכפתורים שנלחצו קודם לכן על ידי פונקציית pushButton. לאחר שקראנו את מחרוזת התווים מהמסך, נשערך (על ידי שימוש בפונקציית eval) את התוצאה ונכניס את התוצאה שוב על מסך התצוגה של המחשבון.

בואו נראה את החלק ה-HTMLי של התוכנית:

 
<style type="text/css">
table.calc
{
     border: 2px solid #0034D1;
     background-color: #809FFF;
}
input.calc {
     width: 100%;
     margin: 5px;
}
</style>
<fieldset>
<legend>Demo</legend>
<table class="calc" cellpadding=4>
<tr><td colspan=3><input class="calc" id="screen" type="text"></td></tr>
<tr>
<td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='/' onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='*' onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='-' onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td colspan=3><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td></tr>
</table>

ואת החלק ה-JS של התוכנית:

 

function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '';
     }
     else {
          document.getElementById('screen').value += buttonValue;
     }
}
function calculate(equation) {
     var answer = eval(equation);
     document.getElementById('screen').value = answer;
}

שימו לב כי בחלק ה-JS , בסה"כ מדובר ב-2 פונקציות, האחת מטפלת בחישוב התוצאה לאחר הקלקה על כפתור ה "="

השנייה מטפלת בכל כפתורי המחשבון האחרים כאשר גם היא מתחלקת לשני מקרים, הראשון ברגע לחיצת כפתור ה-C (ואז הערכים נמחקים), השני – כל שאר הכפתורים.