תרגילים 5-7
>=). המרצה מסביר שכתיבה בסדר הלא נכון תקעה את הדפדפן, והוא הדגיש שמדובר בבאג בדפדפן.clearScreen מנקה את המסך, וכל משימה קוראת לה במקום לשכפל את הקוד.Math.floor, והמספר שמתקבל הוא בין 0 ל-9.פרקי ההרצאה: תרגילים 5-7
תמלול ההרצאה: תרגילים 5-7
הטקסט המלא של הדקות הראשונות בהרצאה «תרגילים 5-7» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו ממשיכים עם ההרצאות שלנו ועם התרגילים המעשיים ב-JavaScript ו-JQuery ואנחנו פותרים עכשיו את התרגיל החמישי שלנו שהתרגיל החמישי אומר לעשות להדפיס על המסך את כל המספרים בין מינוס 5 ל-5 בין מינוס 5 ל-5 וכל מספר על שורה משלו על שורה נפרדת כאשר לדלג ולא להדפיס מספר 0 אוקיי לא להדפיס מספר 0 על המסך אנחנו נעשה את זה בכמה דרכים
זאת אומרת שיש לי משהו בתוך הלולאה בין מינוס חמש לחמש שאני רוצה לדלג על אפס או על איזשהו מספר או על איזשהו מקרה לדלג עליו, איך אנחנו יכולים לעשות את זה?
בוא נעשה כפתור חדש שנקרא משימה חמש וכשלוחצים עליו מגיעים לפונקציה שנקראת משימה חמש פאנקשן. אני כותב פאנקשן ואני יכול לכתוב הכל לבד או שאני יכול ללחוץ טאפ טאפ והוא יכתוב לי לבד את כל הטמפלייט.
יפה. ובתוך הפונקציה function5 אנחנו רוצים דבר ראשון לנקות את המסך, לסדר את כל המסך, אז אנחנו מתחילים ב-getElementByID.res, זאת אומרת ה-getElementByID בסוגריים ID של ה-div שלנו, לוקחים אלמנט לפי המזהה שלו ומכניסים ב-HTML שלו ריק.
בקיצור אנחנו מנקים את המסך, מנקים את ה-div שבתוכו צריכה להיות תוצאה. יפה, ועכשיו מתחילים לעשות משתנה, התחלנו לקרוא למשתנה בכל שם, קראתי לו רס, זה לא קשור לדיו, זה סתם משתנה שקוראים לו רס, לא מעניין אותו מה השם של הדיו, זה לא רלוונטי עכשיו, והרס הזה יצבור בתוכו את התוצאות,
ועכשיו אנחנו מתחילים לולאה בין מינוס חמש לחמש, שימו לב, הלולאה בין מינוס חמש לחמש, זאת אומרת היא מתחילה במינוס חמש, וכל עוד i קטן מחמש היא ממשיכה, מתחילה במינוס חמש, כל עוד i קטן מחמש אנחנו מוסיפים ל-i אחד, זה אומר מינוס חמש, מינוס ארבע, מינוס שלוש, מינוס שתיים, אחד, אפס, אחד, שתיים, שלוש, ארבע, חמש.
רצים ממינוס חמש עד חמש כאשר מוסיפים ל-i כל פעם פלוס אחד. יפה מאוד. ולתוך ה-res אנחנו צוברים את i ונוסיף לדוגמה גם ירידת שורה פלוס br.
אנחנו צוברים לתוכה את התוצאות. יפה מאוד. עכשיו, אחרי שצברנו לתוכו תוצאות, בואו נראה מה יקרה לנו, איך זה נראה הכל, שבאמת הצלחנו.
ואנחנו עושים קונטרול F5 ושום דבר לא עובד עושים F12 הולכים לקונסול ושום דבר אין גם טעויות מה שכחנו שכחנו להדפיס את הרס הזה על המסך צברנו לתוכו את הכל ושכחנו להדפיס אותו על המסך וזה דברים שקורים כל הזמן לא להיבהל או אם יש טעויות סינטקס אתם רואים אותם במסך של קונסול אבל אם יש טעויות לוגיות אתם לא רואים אותם
במסך של קונסול את הטעויות הלוגיות שלכם אתם פשוט רואים שזה עובד לא נכון לא כמו שציפיתם אוקיי יפה אז אנחנו עכשיו נראה שזה הכל עובד כמו שצריך אחרי שהוספנו את ההדפסה של משתנה res בתוך דיו עם אותו שם זה במקרה אותו שם זה לא חייב להיות אותו שם זה במקרה אותו שם ובאמת זה עובד ממינוס חמש זה מדפיס לי את האפס למרות שאני רוצה להוריד את זה
ואני רואה שחסר לי פה ספרה חמש בסוף ספרה חמש חסרה לי ספרה חמש חסרה לי טוב בוא נוסיף ספרה חמש שימו לב אני יכול לכתוב i קטן מחמש קטן שווה לחמש או גדול שווה יש כל מיני דרכים לרשום את זה בואו ננסה עכשיו כן ממינוס חמש עד חמש יפה זה עובד לנו מצוין.
נשארה לי רק בעיה שהאפס הזה מודפס על המסך ואני לא רוצה את האפס הזה. אז אתם רואים אנחנו מתחילים בחמש כל עוד i קטן שווה לחמש עושים i++. עכשיו מה אנחנו עושים עם האפס הזה אנחנו אנחנו יכולים לעשות פשוט בדיקת if בתוך לולאה אנחנו בודקים האם i זה שרץ כל הזמן האינדקס של הלולאה המשתנה שכל הזמן עולה באחד האם
הוא שווה לאפס או האם הוא שונה מאפס יש לנו אנחנו נראה עכשיו כמה פתרונות שונים לסוגיה אם הוא שונה מאפס ורק אם הוא שונה מאפס אז תבצע את הפקודה של ההדפסה של הצבירה זאת אומרת הוא צובר לתוך התוצאה שבסוף נדפיס רק כל עוד i רק אם i שונה מאפס. זאת אומרת, אם i יהיה שווה לאפס, אם i יהיה אפס, הוא לא ייכנס לתוך התנאי הזה.
הוא לא ייכנס לתוך התנאי הזה. זאת אומרת, בתוך הלולן יכול להוריץ לעשות תנאים ובדיקות. ובדקתי, אם i שווה אפס, אז אני פשוט לא נכנס לתוך הif הזה.
זאת אומרת, הוא לא ייכנס לתוך הif וימשיך הלאה. ומה שיקרה, שהוא לא יצבור לתוך התוצאה הסופית את המקרה שבו i שווה 0, כי הוא פשוט לא ייכנס לתנאי הזה. זאת אומרת, השורה של הצבירה, הכנסתי סביבה תנאי.
יכלתי גם לעשות את זה בצורה אחרת, שזה יותר יפה, מה שנקרא. פקודת קונטיניו בלולאה, פקודת קונטיניו ופקודת ברייק. ברייק עוצרת את הלולאה, אבל אני לא רוצה לעצור את הלולאה.
אני רוצה שהלולאה תמשיך, אני רוצה רק שהקונטיניו מדלג וקופץ להתחלה. בואו נראה. נפעיל עם הדבאגר ונראה איך ה-Continue עובד.
אנחנו מגיעים, שימו לב, הגענו לדבאגר, עצר לנו. זאת אומרת, הביצוע של התוכנית נעצרה לנו. ואנחנו עכשיו נעבור שורה-שורה ונראה מה קורה.
קודם כל, אנחנו במצב, עצרנו בזמן לא בשורה הראשונה, אלא עצרנו בתוך התנאי if. זאת אומרת שאנחנו כבר במצב שבתוך ה-Ress, התוצאה שלנו, יש מינוס 4, מינוס 3, מינוס 2, מינוס 1, BR, ואז הגענו למצב ש-I שווה 0, ונכנסנו לתוך תנאי של i שווה 0, אנחנו כבר בפנים.
ואנחנו עכשיו רוצים לראות מה קורה כשאנחנו לוחצים קונטיניו. שימו לב, איך שאני אלחץ קונטיניו הוא יקפוץ להתחלה של הלולאה ולא ימשיך למטה. הופה, הוא דילג.
על השורה הזאת הוא פשוט דילג ולא ביצע אותה, כי פקודת קונטיניו אומרת לו דלג להתחלה, ופקודת ברייק אומרת לו תעצור את הכל. שימו לב, כשאני כבר ב-i שווה 1 הוא לא מדלג מעל השורה, ואז יוצא שיש לנו מינוס 1 ו-1 ובזמן ה-0 הוא קפץ מעל השורה.
זאת אומרת, פקודת קונטיניו אומרת לו לחזור חזרה לתחילת הלולאה. ואם יש לנו רק פקודה אחת, אפשר לרשום אותה גם בלי סוגריים. זאת אומרת, בלי גרשיים אפשר לרשום אותה, בלי בלוק.
הסוגריים מסולסלות אומרות שזה בלוק של פקודות שמתבצע ביחד. אנחנו לא חייבים לעשות אותו, ויפה מאוד. אנחנו הגענו למצב ש-i שווה שווה 0, ואז הוא מדלג לתחילת הלולאה ולא מבצע את הפקודה הבאה שזה בעצם לצבור את העיים לתוך התוצאה, הוא לא צובר אותם כי הוא מדלג מעל השורה 54.
עכשיו אם אני מתבלבל ושם שורה 54 ו-53 אני הופך אותם במקומות שלהם, אז זה שהוא ידלג זה לא יעזור לי כי הוא כבר הכניס את האפס לתוך התוצאה. זאת אומרת יש משמעות לשורות בתוכנה, זה חשוב איזה שורה מתבצעת קודם, כי במקרה של קונטיניו הוא יקפוץ להתחלה ולא יבצע את כל השורות שיש אחרי זה.
הבנתם? מחשב הוא לא מבין את המשמעות הגדולה של הכוונות שלכם, הוא מבצע שורה-שורה, אז נורא חשוב איזו שורה מתבצעת. לדוגמה, שורה שאומרת לרשום משהו בתוך המשתנה, אם היא לא התבצעה אז לא נרשם שם שום דבר.
טוב, בואו נעשה את זה עם jQuery ואנחנו עושים את זה עם jQuery ומרוקנים את הדיב של רס. יש שם פקודת אמפטי לרוקן והוא מרוקן את כל ה-HTML.
שימו לב הלולה נשארת אותו דבר ואנחנו רק כותבים את החלק הוויזואלי ב-JQuery ואנחנו עושים, לוקחים מזהה רס ומחליפים לו את ה-HTML.
אנחנו חייבים HTML בגלל שיש לנו בתוך הרס גם תגיות HTML. יפה מאוד. אם לא היה לנו תגיות HTML יכלנו להשתמש בנקודה טקסט ואנחנו בתוך הרס הזה צברנו תגיות HTML. בואו נראה שזה עובד עם JQuery ואנחנו רואים שהכל עובד אותו דבר, ובקונסול אין לנו שגיאות.
זה אומר שהצלחנו. אני אתקדם עכשיו למשימה הבאה, משימה מספר 6, שמשימה מספר 6 אומרת להדפיס את כל המספרים מ-20 עד 7, כל אחד במספר, זאת אומרת להדפיס עכשיו סדר יורד מ-20 עד 7, מדפיסים כלפי מטה.
עד עכשיו הדפסנו כלפי מעלה, עכשיו אנחנו מדפיסים מ-20 ומטה, 20 עד 7. מתחילים עוד פעם בלנקות את המסך, אבל אתם לא רואים שאני כל הזמן עושה אותן פקודות של לנקות מסך בתחילת כל משימה שלי?
אני כל פעם כותב לקחת את הדולר רס, את מזהה הרס, את ה-result שלי ולנקות את ה-inner html שלו. אני מרגיש שאני עושה אותו קוד שוב שוב ושוב ואם יום אחד יחליפו לי את השם של הדיו ואליו צריך להוציא את התוצאות או משהו כזה, אני אצטרך עכשיו לרוץ בין כל הפונקציות ולשנות שם בכולם הכל וגם לשכפל אותו קוד 20 פעם זה ממש לא יפה,
בגלל זה אני לוקח את הקוד המשותף להרבה משימות ושם אותו בפונקציה נפרדת. אני מייצר פונקציה חדשה שנקראת לנקות מסך, פונקציה שנקראת לנקות מסך, והפונקציה הזאת של לנקות מסך, מי שיקרא לה, זה לא יהיה איזשהו כפתור כמו שעשינו עד עכשיו, מי שיקרא לה זה בעצם הפונקציה שלי, זאת
אומרת יש לי פונקציית עזר, בלחיצת כפתור אתם תיכנסו לטאסק 6, וטאסק 6 יקרא לפונקציה clear screen. יכולה לקרוא לפונקציה, אין שום בעיה עם זה. ועכשיו אנחנו יכולים לכתוב את הקוד שלנו.
אנחנו מתחילים עוד פעם עם המשתנה שיצבור לנו את כל התוצאות, ובסוף נדפיס אותו. עושים לולה 4 שמתחילה ב-20, שימו לב, היא מתחילה ב-20, וכל עוד i לא קטן ממשהו, כל עוד i גדול מ-7.
כל עוד i גדול מ-7, מתחילים מ-20 ועושים כל עוד i גדול מ-7, אוקיי? אפשר לרשום את זה בהרבה צורות שונות, אנחנו צריכים לעשות לא i פלוס פלוס אלא i מינוס מינוס להקטין את i באחד כל פעם לרדת באחד מתחילים ב-20, 19, 18 והעלולה נמשכת כל עוד i גדול מ-7 יפה מאוד שימו לב אפשר לרשום
את זה ככה ואפשר לרשום את זה הפוך i גדול מ-7 יופי אז שימו לב מה עשיתי הפכתי את ה-i מגדול לקטן שזה פעם ראשונה שאנחנו עושים את זה ודבר שני עשיתי i מינוס מינוס הקטנתי את ה-i כי התחלתי ממספר גבוה ואני מקטין אותו אוקיי, ולתוך ה-Ress אני צובר את i ו-br, i, 20, 19, 18, אני צובר אותו, ועכשיו אני צריך להדפיס על המסך את ה-Ress
שלנו, אפשר להדפיס אותו דרך jQuery, אפשר להדפיס אותו דרך JavaScript טהור, ואני אומר לתוך div Ress תכניס ערך של משתנה Ress, שימו לב, אין שום קשר בין זה שהמשתנה וה-Div באותו שם הם לא קשורים, שמות של דיבים זה לא קשור ל-JavaScript, כן?
JavaScript משתנים ו-divים יכולים להיות באותו שם, אין שום קשר. בואו נעשה את זה עכשיו ב- jQuery לא לשכוח סולמית אם זה מזהה. נקודה html, למה נקודה html? כי יש לי תגיות כמו br בפנים ואני ב- jQuery מכניס לתוך div res את המשתנה res.
עשיתי אותם אותו שם, אני מקווה שזה לא מבלבל אתכם ואנחנו משאירים את אחד האופציות, או את jQuery או JavaScript האור. עד שמונה וואי רציתי שבע יפה אז זה אומר שאני צריך פה לעשות גדול שווה או צריך לרשום הפוך