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

אודות

קורסים

מערכות ניהול תוכן

לימוד Java Script למתקדמים

מחשבון ב-Javascript

איך עושים מחשבון פשוט, עם 4 פעולות חשבון ב-JavaScript? הקוד הבא מדגים איך עושים את זה, וגם נראה בו שימוש בפונקציות getElementById, innerHTML, ו-parseFloat. בנוסף, נראה שימוש בתגית select ואיך ניגשים אליה מה-Javascript.

<html>
<head>
<script language="javascript">
function calculate()
{
    var value1 = parseFloat(document.getElementById('value1').value);
    var value2 = parseFloat(document.getElementById('value2').value);
    var result = 0;
    switch(document.getElementById('operator').selectedIndex)
    {
        case 0:
            result = value1 + value2;
            break;
        case 1:
            result = value1 - value2;
            break;
        case 2:
            result = value1 * value2;
            break;
        case 3:
            result = value1 / value2;
            break;
    }
    document.getElementById('result').value = result;
}
</script>
</head>
<body>
<div>
    <input id='value1' type='text' size='8' />
    <select id='operator'>
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input id='value2' type='text' size='8' />
    <input id='button' type='button' size='4' value=' = ' onclick="calculate();"/>
    <input id='result' type='text' size='12' readonly="readonly" />
</div>
</body>
</html>

הסבר לקוד

בשביל להציג את המחשבון יצרנו קודם כל יצרנו div עם שדה input עם id בשם value1 בשביל המספר הראשון במחשבון. אחריו שמנו תגית select אשר תוצג כרשימה ממנה ניתן יהיה לבחור את הפעולה החשבונית. לאחר מכן שמנו עוד input מסוג text בשביל המספר השני במחשבון. אחריו שמנו כפתור עם סימן = עבור ביצוע החישוב. על ידי שימוש ב-onclick תקרא הפונקציה calculate כאשר הכפתור ילחץ (נרחיב על הפונקציה עוד מעט). בסוף שמנו Input נוסף מסוג text אשר ישמש להצגת התוצאה של החישוב. הגדרנו אותו כ-readonly על מנת שיציג את הערך, אך אי אפשר יהיה לשנות אותו ישירות.

בלחיצה על כפתור ה-'=' תופעל הפונקציה calculate. הפונקציה לוקחת בהתחלה את הערכים של המספר הראשון והמספר השני על ידי שימוש בפונקציה getElementById, ומתוך האובייקט שמוחזר לקחנו את שדה ה-value. הערך החוזר הוא מסוג string ולכן כדי לקבל את הערך המספרי השתמשנו ב-parseFloat. אם לא היינו ממירים למספר היינו מקבלים שתוצאת החיבור של 1 ו-1 היא 11, כי בשימוש ב-+ היה מתבצע שרשור מחרוזות.

עכשיו אנו רוצים לבצע את החישוב בהתאם לאופרטור החשבוני שנבחר. לכן אנו משתמשים ב-switch על אינדקס הבחירה הנוכחית ברשימת האופרטורים. לשם כך השתמשנו בשדה selectedIndex.

נעשה את החישוב הנדרש ואת התוצאה נשים ב-input בשם result על ידי הצבה לשדה value.

אובייקט Select ב-Javascript

כמו שראינו בקוד כאשר נשתמש בתגית ה-Html הנקראת select, נוכל ב-javascript לגשת לאובייקט זה מסוג select.

אובייקט select - מאפיינים:

form - הטופס שמכיל את ה-select.
length - מספר האפשרויות ב-select.
name - שדה ה-name של ה-select.
options - מערך של אפשרויות הבחירה ב-select.
selectedIndex - האינדקס הנוכחי הנבחר ברשימה.
type - הטיפוס הוא "select".

אובייקט select - מתודות:

()blur - מסיר את הפוקוס מאובייקט ה-select.
()focus - מעביר את הפוקוס אל אובייקט ה-select.

אובייקט select - אירועים (events):

onBlur
onChange
onFocus

לימוד JavaScript

JS למתחילים:

JS למתקדמים:

פוטושופ - הכרת סביבת העבודה

פוטושופ - עבודה עם שכבות וכלים

פוטושופ - אפקטי טקסט

פוטושופ - מניפולציה על תמונה

פוטושופ - הוספת קרני אור לתמונה

סרטוני פוטושופ נוספים

מה זה מערכת ניהול תוכן?

וורדפרס - Wordpress

ג'ומלה - Joomla

דרופל - Drupal

לימוד Html

לימוד CSS

לימוד JavaScript

אחסון אתרים

שמות מתחם (דומיין)

הנחות באחסון אתרים

הנחות בקניית דומיין

שוברים של גוגל

ללמוד משגיאות של אחרים

מה בין בניית קישורים ו... דיאטה

מאיפה להתחיל בניית אתר?

5 רעיונות לקידום האתר

בחירת מילות מפתח

החשיבות של אתר רלוונטי