פוטושופ - הכרת סביבת העבודה
פוטושופ - עבודה עם שכבות וכלים
פוטושופ - אפקטי טקסט
פוטושופ - מניפולציה על תמונה
פוטושופ - הוספת קרני אור לתמונה
סרטוני פוטושופ נוספים
מה זה מערכת ניהול תוכן?
וורדפרס - Wordpress
ג'ומלה - Joomla
דרופל - Drupal
לימוד Html
לימוד CSS
לימוד JavaScript
אחסון אתרים
שמות מתחם (דומיין)
הנחות באחסון אתרים
הנחות בקניית דומיין
שוברים של גוגל
ללמוד משגיאות של אחרים
מה בין בניית קישורים ו... דיאטה
מאיפה להתחיל בניית אתר?
5 רעיונות לקידום האתר
בחירת מילות מפתח
החשיבות של אתר רלוונטי
סרטון: מאט קאטס מלמד קידום אתרים
לימוד בניית אתרים


לימוד 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

 

 

ווב-ספוט | אחסון ודומיין | מדריך JS | הנחות על אחסון אתרים | הנחות בקניית דומיין | קידום אתרים | מערכות ניהול תוכן | לימוד פוטושופ
WebSpot | Site Building | Learn Javascript | Hosting Discount | Domain Discount | SEO | CMS | Learn Photoshop
2010 © ארז בניית אתרים. כל הזכויות שמורות.