סיכום שיעור (מצגת)
http://gamani.info/prog/JS/lesson4/lesson4-events.zip
תרגילים שמלווים את המצגת להורדה
http://gamani.info/prog/JS/lesson4/fileslesson4-events.zip
תרגיל כיתה המרת מעלות
http://gamani.info/prog/JS/lesson4/calc_degree.html
שיעורי בית
שתי משימות
מחשבון BMI
סיימו את הכנת המחשבון שהתחלנו בכיתה
הוסיפו תגובה לארוע של פוקוס (onfocus) על השדות וקשרו לפונקציה שמשנה את שצבע הרקע של השדה
הוסיפו תגובה לארוע של איבוד פוקוס (onblur) על השדות וקשרו לפונקציה שמשנה את שצבע הרקע של השדה חזרה ללבן
הוסיפו תגובה לארוע של שינוי ערך (onchange) בשדות וקשרו לפונקציה שבודקת שאכן הכניסו מספר
התרגיל יכלול 5 פונקציות:
- פונקציה שמחשבת את ה BMI
- פונקציה שמטפלת בלחיצה על כפתור "חשב" ומפעילה את החישוב על הנתונים מתוך השדות
- פונקציה אחת שמטפלת בקבלת פוקוס לinput ומשנה צבע רקע (הפונקציה מקבל את האלמנט עצמו באמצעות שליחה של this)
- פונקציה שמטפלת בעזיבת input ומשנה את צבע הרקע חזרה ללבן (הפונקציה מקבל את האלמנט עצמו באמצעות שליחה של this)
- פונקציה שמטפלת בהכנסה של ערך ל input ובודקת שאכן הכניסו מספר
משימה שניה – חנות קטנה ומטריפה
בנו עמוד אינטרנט שמדמה חנות כמו בתמונה
כל מוצר נמצא בתוך div משלו ויש לו:
מחיר משלו (אלמנט עם id יחודי)
שדה כמות משלו (אלמנט עם id יחודי)
כפתור הוספה משלו (אלמנט עם id יחודי)
הגדירו בתוכנית שלכן משתנה גלובלי שבו ישמר כל הזמן המחיר הסופי שיש לשלם עד כה (בהתחלה כמובן 0)
לחיצה על "הוסף" מפעילה פונקציה שניגשת לשדה המחיר ולוקחת את הערך שבו ולשדה הכמות ולוקחת את הערך המושם בו, מחשבת את המחיר שיש להוסיף ומוסיפה אותו למשתנה הגלובלי ואז שמה אותו באלמנט המחזיק את המחיר הסופי.
לעת עתה יהיו לכן 3 פונקציות של הוספה כאשר כל אחת תטפל בכפתור של מוצר אחד ותיגש למחיר שלו ולשדה הכמות שלו ותבצע את חישוב המחיר וההוספה.
הוסיפו טיפול בפוקוס על Input ובעזיבה שלו (ממש כמו בתרגיל הקודם)
במקרה זה אין צורך בשלוש פונקציות שונות לכל שדה. הטיפול בארועים אלו יבוצע בפוקנציה שמקבלת את האלמנט כפרמטר.
הוסיפו בדיקה כי הגולש הכניס לשדה כמות מספר ולא תו אחר וכן אל תאפשרו רכישה של יותר מ 10 פריטים בבת אחת.
במקרה זה אין צורך בשלוש פונקציות שונות לכל שדה. הטיפול בארועים אלו יבוצע בפוקנציה שמקבלת את האלמנט כפרמטר.
פתרון שיעורי הבית – ארועים
http://gamani.info/prog/JS/lesson4/bmi/
בפתרון של החנות יש באג קטן בבדיקות תקינות הקלט – אתקן בהקדם. מיהרתי להעלות כדי לא לעכב את מי שזה חשוב לזה להתחיל להתמודד עם המשימות.
http://gamani.info/prog/JS/lesson4/shop/
