סיכום השיעור
בין הפונקציה html לפונקציה text
http://gamani.info/prog/JS/lesson10/html-text.html
ניווט בין קודקודים
מצגת
http://gamani.info/prog/JS/lesson10/nevigation-slideshow.zip
localStorage , תאריכים ו setTimeout
מצגת
http://gamani.info/prog/JS/lesson10/lesson3-localstorage-dates-timeout-slideshow.pptx
דוגמאות localStorage
http://gamani.info/prog/JS/lesson10/localStorage-example.zip
דוגמאות dates
http://gamani.info/prog/JS/lesson10/dates-example.zip
דוגמאות setTimeout
http://gamani.info/prog/JS/lesson10/setTimeout1-example.zip
שיעורי בית
משימה 1 – ניווט בין קודקודים
http://gamani.info/prog/JS/lesson10/node2-ex.zip
שמנה לב –
בשיעורי הבית יש מספר משימות שמוגדרות כאתגר
למשל לצבוע בכחול את הקישור שמכיל את המילה "שלום"
כלומר עליכם לטרגט פסקה שמכילה את המילה "שלום". מכילה באנגלית זה contains… עכשיו גוגל…
בשקופית האחרונה במצגת יש 3 קישורים שיכולים לעזור בכך (הנה הם גם פה)
קישור ראשון לכל פונקציות הניווט ב jQuery
https://www.w3schools.com/jquery/jquery_ref_traversing.asp
קישור שני לסלקטורים ב jQuery
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
קישור שלישי לסלקטורים ב CSS
https://www.w3schools.com/cssref/css_selectors.asp
חלק מהמשימות ניתן לבצע ביותר מדרך אחת
למשל
ישנה פונקציית ניווט ב jquery בשם eq שיכולה לטרגט את כל האלמנטים שהאינדקס שלהם הוא 3 (בנים רביעים של ההורה שלהם)
https://www.w3schools.com/jquery/traversing_eq.asp
ואת אותם אלמנטים ניתן לטרגט באמצעות סלקטור של jQuery
https://www.w3schools.com/jquery/sel_eq.asp
בהצלחה!!!
משימה 2 –
כתבי תוכנית שבכניסה ראשונה אליה היא שואלת את הגולש מתי יחול יום הולדתו ולאחר מכן מציגה ספירה לאחור ליום הולדתו (ספירה שמתעדכנת בכל שניה)
התוכנית שומרת את תאריך יום ההולדת ב localStorage
מחדדת לגבי localStorage
הנתון נשמר על המחשב שלכן על ידי הדפדפן
תוכלו לבדוק את זה פעם בכרום ופעם בפיירפוקס (לי בנתיים אקספלורר עושה קצת בעיות, ספרו לי אם אתן הסתדרתן איתו או לא)
תוכלו גם לבדוק את זה באמצעות חלון גלישה בסתר
לא מן הנמנע שבמהלך הבדיקות שלכן תרצו לאפס את התאריך ששמתן אז תוכלו לעשות 1 משני דברים – או לשנות את שם הנתון שאתן שומרות (לאט לאט יהיו לכן עוד ועוד נתונים ללא שימוש ב localStorage) או להוסיף לתוכנית שלכן איפוס של הנתון שנשמר. מחיקה שלו.
בין הדוגמאות שהעלתי יש גם דוגמא ששמתי בה כפתורי שינוי וניקוי לנתון השמור.
בהצלחה!
פתרון –
http://gamani.info/prog/JS/lesson10/countDown1.html
אתגרים אתגרים אתגרים
כפי שאמרתי בכיתה – עכשיו כשאתן יודעות לנווט בין קודקודים אתן יכולות לשכלל את החנות שלכן כך שהיא תתנהג יפה גם כשיהיו לה 100 מוצרים (ולא תצטרכו פונקציה לטיפול בהוספת כל מוצר בנפרד), אתן יכולות לשכלל תרגילים שעשינו בעבר. אתן יכולות לכתוב משחק זיכרון (הרבה לוגיקה אבל הרעיון הוא כמובן שכשפותחים קלף שלישי אז סוגרים את האחים שלו שהם פתוחים)…
עכשיו שאתן יודעות לעבוד אם טיימרים אתן יכולות להוסיף במשחקים שלכן מגבלת זמן לכל דבר (נניח לחידון בחשבון)
אנחנו מניחות יחד אבני בניין ומה תבנו מהן זה כבר תלוי בכן. השמים הם הגבול.
אז מי שרוצה אתגר מוזמנת לפתח משחק זיכרון נחמד כזה (או כל משחק אחר שעולה בדעתה והיא מצליחה לנתח מה בעצם יש בו ואיך בונים אותו) מוזמנת לאתגר.
את הפתרון שלי אם תרצו אעלה בהמשך.
בשיעור הבא נלמד להוסיף אלמנטים למסמך שלנו. זה יפתח בפניכן עוד מלא אפשרויות….
