סיכום השיעור

עברנו על תרגיל אחד של מחרוזות וכמה תרגילים לסיכום נושא המערכים.

התלמידות קיבלו חידון במתמטיקה ובמהלך השיעור שינו אותו כך שהאזנה לארועים תהיה באמצעות addEventListener, קוד ה JS יטען מקובץ נפרד (שימוש ב

onLoad) וגישה לאלמנטים תעשה באמצעות GetElementsByTagName / GetElementsByClassName איפה שניתן.

על הדרך הכרנו את הביטוי switch case ואת האפשרות להגיב לארועים על החלון (כמו load ו resize)

מצגת בנושא ארועים

http://gamani.info/prog/JS/lesson7/lesson4-7-events.zip

תרגילים בנושא addeventListener

http://gamani.info/prog/JS/lesson7/lesson7-add-event-listener-ex.zip

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

http://gamani.info/prog/JS/lesson7/quize-first/quize.html

ובסוף השיעור

http://gamani.info/prog/JS/lesson7/quize-last/quize.html

כמו כן התחלנו לדבר על מבנה המסמך שלנו ועל כך שהאלמנטים בHTML הם במבנה דמוי עץ וניתן לנווט בין הקודקודים. ראינו דוגמא של חנות שבה יש פונקציה אחת ויחידה לטיפול בהוספת מוצר. על מנת לגשת לכמות המוצרים ולמחיר מתבצע חיפוש של השדות הרלוונטים הקרובים לכפתור (בעץ הקודקודים).

שיעורי בית

שיעורי בית – קפטשה תוצרת בית

כתבי ממשק בדומה לזה:

קחי את הזמן לחשוב איך לממש את זה ורק לאחר מכן קראי את ההוראות המפורטות שלהלן.

אינך חייבת לעבוד לפי ההוראות. אם מצאת את הדרך לממש זאת ללא ההוראות, אדרבה.

ניתן לראות את הפתרון פה

http://gamani.info/prog/JS/lesson7/ceptcha/ceptcha.html

צרי אלמנטים ב HTML כדלהלן:

• טופס ובו שתי שדות למילוי וכפתור שליחה (id של כפתור השליחה הוא submit)
• פיסקה ריקה עבור תרגיל לפתרון (id = exe )
• שדה input עבור פתרון שהגולש יכניס ( id = captcha )
• כפתור להחלפת התרגיל ( id=change )

פונקציות

כתבי פונקציה בשם fillCeptcha

הפונקציה תייצר מחרוזת של תרגיל על סמך שני המספרים והסימן

הפונקציה תייצר שלושה מספרים רנדומלים (על ידי שימוש באוביקט Math)

שני מספרים בין 0 ל 9 עליהם תבוצע פעולת החשבון

מספר אחד בין 0-3 שלפיו יקבע אם התרגיל יהיה חיבור חיסור כפל או חילוק

אם המספר הוא 0 הסימן יהיה +

אם המספר הוא 1 הסימן יהיה –

אם המספר הוא 2 הסימן יהיה *

אם המספר הוא3 הסימן יהיה /

ניתן להשתמש בתנאים רגילים if-else או בביטוי switch-case

הפונקציה תשים את המחרוזת שהיא בנתה (מחרוזת התרגיל) בפיסקה שנועדה לכך (id = exe  )

כתבי פונקציה בשם checkCaptcha

פונקציה זו תקרא כאשר הגולש לוחץ על כפתור ה"שלח" של הטופס והיא מחזירה ערך true  או  false כך שבמקרה שהיא מחזירה false הטופס לא ישלח.

הפונקציה לוקחת את הערך שהגולש הכניס בשדה ה input המיועד לכך ( id = captcha ) ושומרת אותו במשתנה מקומי בשם userResult

במידה והגולש השאיר שדה זה ריק היא תקפיץ הודעה "נא למלא ערך" ותחזיר false

במידה ולא עצרנו פה (לא החזרנו false) הפונקציה תמשיך הלאה – קורה גם בלי שתרצו – זה המשמעות של return false

הפונקציה תקרא מתוך הפסקה עם הid  בשם exe את התרגיל ותפרק אותו לחלקים

התרגיל תמיד מורכב מ 3 תוים בלבד –

התו הראשון (במקום ה 0 ) הוא המספר הראשון

התו השני (במקום ה 1) הוא הסימן

התו השלישי (במקום ה 2) הוא המספר השני

לכן ניתן לפרק את התרגיל בקלות על ידי str[0],str[1],str[2]…

הפונקציה צריכה לחשב את פתרון התרגיל בהתאם לסימן (ולשמור אותו במשנה מקומי שלה בשם correctResult)

אם הסימן הוא "+" הרי שהפתרון הוא סכום המספרים

אם הסימן הוא "-" הרי שהפתרון הוא הפרש המספרים

אם הסימן הוא "*" הרי שהפתרון הוא מכפלת המספרים

אם הסימן הוא "/" הרי שהפתרון הוא מנת המספרים

לאחר שהפונקציה חישבה את תוצאת התרגיל עליה להשוות את התוצאה עם זו שהגולש הקליד עם זו התוצאה הנכונה שהיא מצאה

(If (userResult == correctResult

במידה והתוצאה הנכונה היא תקפיץ חלון שאומר "מעולה, אפשר להמשיך" ותחזיר true (על מנת שהטופס אכן ישלח)

במידה והתוצאה אינה נכונה עליה להקפיץ חלון שאומר "נסה שנית", לקרוא לפונקציה fillCeptcha שתחליף את התרגיל, לרוקן את השדה שבו הגולש הכניס את הפתרון שלו ( id = captcha ) ולהחזיר false  על מנת שהטופס לא ישלח.

כתבי פונקציה בשם mainFuncrion

פונקציה זו תקרא מיד לאחר טעינת העמוד באמצעות

window.addEventListener('load', mainFunction);

והיא תהיה אחראית לתפקוד הכללי של התוכנית

בתוך פונקציה זו תתבצע קריאה ראשונית ל fillCeptcha

בתוך פונקציה זו תתבצע האזנה לארוע לחיצה על כפתור שינוי הקפטשה ( id=change )  כך שכאשר לוחצים עליו תקרא הפונקציה fillCeptcha

הערה : הקריאה לפונקציה checkCeptcha תעשה בתוך תגית הפתיחה של הטופס באופן הבא

<";()form id="myForm" method="GET" action="other.html" onsubmit="return checkCaptch>

חזרה לעמוד הקורס