סיכום שיעור
חזרה על שיעורי בית
אתגרים בזמן חזרה על שיעורי הבית
קחו את תרגיל 3 משיעורי הבית ושנו אותו כך שידפיס את המשולש למסך
הגדירו משתנה גלובלי שתפקידו להחזיק את כל המשולש
שנו את הפונקציה כך שבמקום שתדפיס שורה לקונסול, תכין מחרוזת (שורה אחת) ותוסיף אותה למשתנה הגלובלי שהגדרתן
על מנת שההדפסה אכן תצא במשולש (במספר שורות) השורה שהפונקציה תכין תכלול בתחילתה את המחרוזת <p> ובסיומה את המחרוזת </p>
למשל כך
<p>1</p>
<p>22</p>
המחרוזת שצריכה להיות במשתנה הגלובלי בסוף התוכנית (עבור 3 למשל) היא
<p>1</p><p>22</p><p>333</p>
בסוף התוכנית נדפיס את המחרוזת שלנו לאלמנט מסויים על המסך באמצעות פקודה כזו:
document.getElementByID("id").ineerHTML = "מחרוזת כלשהי";
שלב שני –
הדפסת המשולש הזה למסך כאשר הפונקציה מחזירה ערך
במקום שהפונקציה תגדיל את המשתנה הגלובלי שתפקידו להחזיק את כל המשולש היא תחזיר שורה אחת
מחוץ לפונקציה יהיה לי משתנה שיחזיק את כל המחרוזות שחזרו מהפונקציה בכל קריאה לה
;(oterText += oneLine(x
כיצד תוכלו למרכז משולש זה?
סיכום שיעור
ב JS ישנן שלוש דרכים לשלב טיפול בארועים
דרך 1 – ב HTML בתוך תגית הפתיחה
this היא מילה שמורה שמאפשרת לנו להתייחס לאלמנט שעליו קרה הארוע
דרך 2 – על ידי אובייקט של ה dom (באמצעות getElementById ודומיו)
דרך 3 – addEventListener – לא הגענו עדיין
היתרונות של הדרך השלישית:
ניתן לקשר מספר תגובות לאותו ארוע על אותו אלמנט
הקוד הוא חיצוני
האזנה מתבצעת רק מרגע שקישרנו אותה עד שניתקנו ולא כל התוכנית
נכון להתרגל לדרך זו גם משום שבהמשך נעבוד ב jQuery בסינטקס שמזכיר את זה.
הכרנו את הארועים:
click
change
focus
mousedown
mouseup
mouseover
mouseout
הכרנו את הפונקציות:
focus – שימש אותנו לתת את הפוקוס לאלמנט מסויים
toUpperCase – שימש אותנו להפוך מחרוזת לאותיות גדולות
תרגילי הדגמה בכיתה
http://gamani.info/prog/JS/lesson4/lesson4-events-class.zip
שיעורי בית
תרגיל 4 – הדפיסו למסך ומרכזו
תרגיל 5 – צרו משולש בדומה לזה אבל ממרוכז…
אתגר – להדפיס למסך את לוח הכפל
(אתגר בריבוע – פתחו חשבון באתר https://codepen.io והעלו את הפתרונות לשם…)
ארועים –
צרו ממשק מחשבון BMI בדומה לתמונה
מדובר בעמוד HTML הכולל שתי שדות (inputs) כפתור (button) ופסקה (כרגע ריקה ולאן לא נראית) עבור התוצאה.
טפלו בלחיצה על כפתור "חשב"
הוסיפו תגובה לארוע של פוקוס (onfocus) על השדות וקשרו לפונקציה שמשנה את שצבע הרקע של השדה
הוסיפו תגובה לארוע של איבוד פוקוס (onblur) על השדות וקשרו לפונקציה שמשנה את שצבע הרקע של השדה חזרה ללבן
הוסיפו תגובה לארוע של שינוי ערך (onchange) בשדות וקשרו לפונקציה שבודקת שאכן הכניסו מספר
התרגיל יכלול 5 פונקציות:
- פונקציה שמחשבת את ה BMI
- פונקציה שמטפלת בלחיצה על כפתור "חשב" ומפעילה את החישוב על הנתונים מתוך השדות
- פונקציה אחת שמטפלת בקבלת פוקוס לinput ומשנה צבע רקע (הפונקציה מקבל את האלמנט עצמו באמצעות שליחה של this)
- פונקציה שמטפלת בעזיבת input ומשנה את צבע הרקע חזרה ללבן (הפונקציה מקבל את האלמנט עצמו באמצעות שליחה של this)
- פונקציה שמטפלת בהכנסה של ערך ל input ובודקת שאכן הכניסו מספר
משימת טיפול בארועים 2 –
בנו עמוד אינטרנט שמדמה חנות כמו בתמונה
כל מוצר נמצא בתוך div משלו ויש לו:
מחיר משלו (אלמנט עם id יחודי)
שדה כמות משלו (אלמנט עם id יחודי)
כפתור הוספה משלו (אלמנט עם id יחודי)
הגדירו בתוכנית שלכן משתנה גלובלי שבו ישמר כל הזמן המחיר הסופי שיש לשלם עד כה (בהתחלה כמובן 0)
לחיצה על "הוסף" מפעילה פונקציה שניגשת לשדה המחיר ולוקחת את הערך שבו ולשדה הכמות ולוקחת את הערך המושם בו, מחשבת את המחיר שיש להוסיף ומוסיפה אותו למשתנה הגלובלי ואז שמה אותו באלמנט המחזיק את המחיר הסופי.
לעת עתה יהיו לכן 3 פונקציות של הוספה כאשר כל אחת תטפל בכפתור של מוצר אחד ותיגש למחיר שלו ולשדה הכמות שלו ותבצע את חישוב המחיר וההוספה.
הוסיפו טיפול בפוקוס על Input ובעזיבה שלו (ממש כמו בתרגיל הקודם)
במקרה זה אין צורך בשלוש פונקציות שונות לכל שדה. הטיפול בארועים אלו יבוצע בפוקנציה שמקבלת את האלמנט כפרמטר.
הוסיפו בדיקה כי הגולש הכניס לשדה כמות מספר ולא תו אחר וכן אל תאפשרו רכישה של יותר מ 10 פריטים בבת אחת.
במקרה זה אין צורך בשלוש פונקציות שונות לכל שדה. הטיפול בארועים אלו יבוצע בפוקנציה שמקבלת את האלמנט כפרמטר.
פתרונות
שמנה לב – בפתרון של החנות הוצאת את ה JS לקובץ נפרד ולכן עטפתי אותו ב onLoad כפי שהתחלתי להסביר בכיתה אבל טרם הצגתי דוגמא. נדבר על זה כמובן בשיעור הקרוב.
http://gamani.info/prog/JS/lesson4/lesson4-hw-sol-loops-events1.zip
בשיעור הבא נפתח ב onload ונעבור לארועים באמצעות הדרך השלישית שטרם הגענו אליה
