PracticU

תרגילים 8-9

בלי כתוביותעם כתוביות
PracticU › קורס ג'אווה סקריפט מעשי - JavaScript › תרגילים 8-9
מילון מושגים:
לולאה - מבנה בקרה שחוזר על קטע קוד שוב ושוב כל עוד תנאי מתקיים או עבור כל פריט באוסף.
משתנה - שם שמפנה למקום בזיכרון שבו נשמר ערך שיכול להשתנות במהלך ריצת התוכנית, כמו מספר, טקסט או אובייקט.
מחרוזת - סוג נתונים שמייצג רצף של תווים, כלומר טקסט, ומשמש לאחסון מילים, משפטים או כל רצף סימנים.
אינדקס - מבנה במסד נתונים שמאיץ חיפוש ושליפה. גם מספר המציין מיקום של איבר במערך.

תרגילים 8-9
בתרגילים 8 ו-9 מדפיסים שורות של כוכביות: בתרגיל הראשון כל שורה קבועה, ובתרגיל השני אורך השורה אקראי. התרגיל השני דורש לולאה בתוך לולאה, וזו הזדמנות טובה לתרגל את ההבנה של ההבדל בין המשתנים בכל לולאה.
תרגיל 8: 30 שורות של שלוש כוכביות
1. קבוע: משתנה מכיל את המחרוזת ***.
2. לולאה: 30 סיבובים, שבכל אחד מהם מוסיפים את הכוכביות ואת br לתוצאה.
3. הדפסה: התוצאה נכתבת לדיב פעם אחת, בסוף הלולאה, ולא בכל סיבוב.
4. מספור: אפשר להוסיף את האינדקס i לכל שורה, כדי לבדוק שהלולאה רצה 30 פעמים.
תרגיל 9: אורך אקראי לכל שורה
1. מספר אקראי לשורה: Math.floor(Math.random()*10)+1 נותן מספר בין 1 ל-10.
2. לולאה פנימית: בונה את השורה כוכבית אחר כוכבית, כי אין פקודה שמוסיפה כמה כוכביות במכה.
3. שמות שונים: הלולאה הפנימית משתמשת במשתנה אחר מהלולאה החיצונית, כדי לא לשבור את האינדקס שלה.
4. הוספה לתוצאה: בסוף כל שורה מוסיפים אותה לתוצאה יחד עם br, ורק אחר כך עוברים לשורה הבאה.
שימו לב
1. איפוס המשתנה הזמני: המשתנה שבונה את השורה מתאפס לריק בתחילת כל סיבוב של הלולאה החיצונית, ולכן כל שורה נבנית מחדש ולא מתחברת לקודמת.
2. דיבאגר: מעבר שורה-שורה בדיבאגר מראה איך כל שורה נבנית, ולכן כדאי לעשות אותו לפני שמוסיפים עוד תכונות.
השיעור הבא בקורס: תרגילים 10-11

פרקי ההרצאה: תרגילים 8-9

  1. 00:00

    מבוא: תרגילים 8-9 עם כוכביות

  2. 00:38

    תרגיל 8: שלוש כוכביות בשלושים שורות

  3. 02:29

    צבירת הטקסט והדפסה ל-div

  4. 04:07

    מעקב אחר המשתנים בדיבאגר

  5. 05:46

    תרגיל 9: מספר כוכביות אקראי בכל שורה

  6. 06:44

    הגרלה עם Math.random ועיגול

  7. 09:14

    לולאה פנימית שצוברת כוכביות

  8. 12:25

    אלגוריתמיקה: איך חושב המחשב

תמלול ההרצאה: תרגילים 8-9

הטקסט המלא של הדקות הראשונות בהרצאה «תרגילים 8-9» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:03

    אנחנו ממשיכים לפתור את התרגילים המעשיים בג'אווה סקריפט ואנחנו בתרגיל 8. תרגיל 8 אומר להדפיס על המסך 30 כוכביות לקחת שלוש כאילו שלוש כוכביות 30 פעם יותר נכון לקחת משתנה מייליין להכניס לתוכו שלוש כוכביות ולהדפיס את זה 30 פעם על המסך כל פעם בשורה נפרדת.

  2. 00:26

    זאת אומרת שיהיה לנו משימה מספר 8 להדפיס על המסך 30 פעם שלוש כוכביות כל שלוש כוכביות בשורה נפרדת. בואו נעשה את זה כמשימה מספר 8, נתחיל מזה שאנחנו נקרא לפונקציה לנקות מסך, ואחרי שאנחנו נקרא לפונקציה לנקות מסך אנחנו נתחיל בזה שנעשה משתנה מייליין כי ככה ביקשו

  3. 00:57

    בתרגיל, שלוש כוכביות ונעשה לולאה שרצה 30 פעם, מתחילה ב-0 ורצה עד 30, שימו לב, לא צריך את ה-30, למה לא צריך? כי היא מתחילה ב-0, אז 0 עד 29 זה 30 פעם, כי אם לא מתחילים ב-1 מתחילים ב-0.

  4. 01:18

    אז ירוץ לנו 30 פעמים, אם היינו מתחילים ב-1 היינו צריכים גם שיהיה שווה ל-30. טוב, מה שאנחנו רוצים לעשות, אנחנו רוצים שיודפס לנו במסך, שיודפס לנו במסך בעצם השלוש כוכביות האלו.

  5. 01:37

    אז יש לנו משתנה רס, שזה התוצאה הסופית, ואנחנו לתוך דיו של רס בסוף בסוף מכניסים את המשתנה רס, אוקיי? שימו לב, אין קשר בין שם משתנה לשם של דיו, זה במקרה יצא לי אותו דבר.

  6. 01:55

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

  7. 02:21

    זה הטקסט שנצבר בתוך הרס, ובסוף הטקסט הזה הופך להיות html. יפה מאוד. אז אנחנו נעשה שלושים פעם שלוש כוכביות פלוס בי-אר, שלוש כוכביות פלוס בי-אר ונצבור את הכל לתוך רס, שזה קיצור של רזלטס, תוצאות.

  8. 02:45

    טוב, בואו תמיד אנחנו נפתח F12 ונעשה קונסול ונראה שאין לנו הודעות שגיאה. ומה אנחנו רואים? אנחנו רואים שיש לנו על המסך באמת כוכביות כמו שצריך, הכל בסדר. יופי, בואו נוסיף פה הדפסה של איי, שזה יהיה מספר שנספור כמה שורות באמת יש לנו.

  9. 03:13

    החלטתי להוסיף את i אחרי זה נקודתיים אחרי זה את השלוש כוכביות ואחרי זה br ובואו נראה מה יצא לנו מכל זה אנחנו רואים i קודם כל שווה 0 ואז i עד ה-29 זה 30 שורות מ-0 עד 29 ובכל שורה אנחנו מדפיסים את השלוש כוכביות טוב לא ביקשו מאיתנו לעשות מספור רק רציתי לעצמי לראות שהכל בסדר וגם ראיתם שאפשר לחבר i עם להדפיס i או לא להדפיס i ולא חייבים להשתמש ב-i

  10. 03:50

    לדוגמה אני פה בתוך הלולאה לא משתמש ב-i הזה, אני צריך שהוא 30 פעם יבצע לי משהו, אבל את ה-i עצמו אני לא צריך, זה משהו פנימי ללולאה. אני יכול להיעזר במשתנה הזה, אני יכול לא להיעזר בו, תלוי במה שאני רוצה.

  11. 04:03

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

  12. 04:14

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

  13. 04:32

    מתחילים מזה ש-I שווה 0 ו-Rס זה שלוש כוכביות ו-BR. נהדר. עכשיו שש כוכביות ו-BR, תשע כוכביות ו-BR.

  14. 04:47

    וככה אנחנו צוברים עוד ועוד כוכביות ו-BR, ברים בתוך זה כטקסט, שתבינו, המשתנה רס הזה זה כל הטקסט פשוט בסוף אנחנו מכניסים את כל הטקסט הזה ואומרים שזה מבחינתנו HTML.

  15. 05:01

    יפה מאוד. אנחנו יכולים לשים breakpoint בסוף ולהגיד לו לרוץ מהר עד הנקודת עצירה הבאה. והנה הוא רץ מהר ואנחנו יכולים לראות שבעצם במשתנה rest יש לנו את כל הכוכביות.

  16. 05:17

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

  17. 05:36

    הכל יצטבר במשתנה בזיכרון כטקסט ועד שאנחנו נבצע את השורה האחרונה שמעבירה את כל הטקסט הזה לתוך ה-HTML. והנה כל הטקסט עבר לתוך ה-HTML וכל הכוכביות הופיעו במכה אחת במסך.

  18. 05:53

    עכשיו נעבור למשימה הבאה, משימה מספר 9, שהיא אומרת אותו דבר רק מספר כוכביות במסך צריך להיות אקראי, פעם בין 1 ל-10, זאת אומרת פעם 3 כוכביות, פעם 7 כוכביות, שתי כוכביות, פעם כוכבית אחת ופעם תשע כוכביות.

  19. 06:09

    זאת אומרת, מספר כוכביות צריך להיות בין 1 ל-10, לא פחות מ-1 ליותר מ-10, וכל שורה מספר אקראי של כוכביות. אוקיי? כמו שעשינו שלוש כוכביות, רק לעשות עכשיו מספר אקראי של כוכביות, שזה הרבה הרבה יותר מסובך. למה?

  20. 06:26

    כי אנחנו צריכים עכשיו בתוך לולאה, שבה יש לנו בעצם, אנחנו עושים עבור כל שורה לולאה. אנחנו צריכים עכשיו בתוך לולאה לעשות מספר אקראי של שורות כוכביות.

  21. 06:41

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

  22. 06:51

    מה לעגל כלפי מטה? את התוצאה, זאת אומרת ה-MathLore מקבל בסוגריים מה לעגל. אנחנו נותנים לו בסוגריים תעגל לנו את מה ש...

  23. 07:02

    תחזיר לך פונקציה matRandom, את המספר האקראי, תיקח את המספר האקראי, תכפיל אותו ב-10 ואז תעגל אותו. אז MathLore, פונקציה MathLore בסוגריים מקבלת מה לעגל, אנחנו נותנים לה קחי אבל לפני שאת תדעי מה לעגל תפעיל לי פונקציה אחרת שתיתן לך מספר אקראי

  24. 07:20

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

  25. 07:46

    ובסוף אנחנו צריכים להוסיף 1 כי יצא לנו מספר בין 1 ל-10. ומאסט רנדום ייתן לנו בין 0 ל-1. בקיצור, צריך להכפיל ב-10 ולהוסיף 1 אחרי העיגול.

  26. 08:04

    עכשיו התוצאה יוצאת לנו מספר מ-1 ל-10 וזה יהיה המספר כוכביות בשורה. זה המספר האקראי של כמה כוכביות אנחנו רוצים לשים בשורה בין 1 ל-10. יפה מאוד, אבל הבעיה שלנו שאין לנו פקודה מוכנה, אין לנו פקודה מוכנה שאומרת אה... אין לנו פקודה מוכנה שאומרת תשים לי על המסך שבע כוכביות.

  27. 08:36

    אין לנו פקודה לשים על המסך שבע כוכביות. אנחנו יכולים לשים פלוס כוכבית אחת, פלוס שתי כוכביות. ואנחנו, אין לנו פקודה לקחת כוכבית ולשכפל אותה שבע פעמים במסך.

  28. 08:49

    אנחנו לא יכולים לעשות כוכבית כפול שבע או דברים כאלו, כן? כל מיני דברים שאני רואה שתלמידים כותבים. אה... אין דבר כזה, פשוט אין דבר כזה.

  29. 09:00

    אבל יש לנו פקודה להוסיף כוכבית אחת פלוס כוכבית. כוכבית אחת אנחנו יודעים להוסיף, שבע כוכביות אין לנו משהו שמוסיף אותה. אז מה אנחנו נעשה?

  30. 09:09

    אנחנו נעשה לולאה שבע פעמים להוסיף כוכבית אחת. הבנתם? יש לנו פקודה להוסיף כוכבית אחת פלוס כוכבית.

  31. 09:17

    אחת אנחנו יודעים להוסיף, אבל אין לנו, אז אנחנו נעשה הרבה פעמים, נניח שבע פעמים להוסיף כוכבית. למה להוסיף? למשתנה מייליין. זאת אומרת משתנה מייליין יתחיל בריק, הוא יהיה ריק ואנחנו נוסיף לו כל פעם כוכבית אחת מספר num stars per line כוכביות זאת אומרת אנחנו עושים לולאה עכשיו אנחנו עושים

  32. 09:43

    לולאה שבלולאה הזאת אנחנו כל פעם נוסיף כוכבית אחת שימו לב הלולאה מתחילה מאפס והיא רצה לפי המספר כוכביות שימו לב עוד משהו חשוב שאסור להשתמש אם אנחנו עושים לולאה בתוך לולאה אסור לנו להשתמש באותו i, זה חייב להיות i ו-j או אותיות שונות או שמות שונים של משתנים, כדי שלולאה פנימית לא תהרוס ללולאה חיצונית

  33. 10:12

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

  34. 10:29

    למה כל פעם כוכבית אחת? כי אין פקודה לצבור ישר הרבה כוכביות, אין פקודה כזאת. אז אנחנו לוקחים ועושים לולאה שכל פעם צוברת כוכבית אחת וכך אנחנו מגיעים למספר הרצוי של כוכביות.

  35. 10:43

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

  36. 10:59

    בסוף בסוף כשצברנו מספיק כוכביות בשורה הנוכחית אנחנו מוסיפים אותם לתוך משתנה רס זאת אומרת משתנה תוצאה סופית הוא לוקח את כל הכוכביות שצברנו בשורה נוכחית, שומר אצלהם ומוסיף בר.

  37. 11:17

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

  38. 11:33

    אז מייליין בעצם יצבור לנו כוכביות מ-0 עד למספר האקראי שהגרלנו. ושימו לב, ההגרלה מתבצעת בכל שורה מחדש. זאת אומרת, הלולה הראשית, הלולה הראשית זה לעבור כל שורה, עבור כל שורה אנחנו נעשה הגרלה חדשה.

  39. 11:51

    נתחיל עם זה שמיילאיין ריק, נצבור כוכביות ונוסיף אותן לתוצאה סופית, אוקיי? אז יש לנו בעצם בכל שורה תהליך שקורה מחדש, ובתהליך הזה יש גם לולאה פנימית.

  40. 12:06

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

  41. 12:21

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

  42. 12:40

    אבל רגע, אני רואה שמחקתי את שמונה המקוריים, השלוש כוכביות בטעות. אתם רואים מה קרה פה? לקחתי, שיניתי את השמונה המקורי.

  43. 12:49

    אני אעשה קופי על כל הפתרון שלי ועכשיו אני לוחץ קונטרול Z מחזיר הכל אחורה הכל אחורה אני נוסע אחורה בזמן קונטרול Z הרבה פעמים וחוזר חזרה למצב שיש לי שלוש כוכביות קונטרול Y רגע רגע מחקתי יותר מדי קונטרול Y מתחיל להחזיר לי חזרה את הכל קונטרול Y אני מחזיר קדימה עכשיו אני עכשיו זז קדימה בזמן זהו זה התרגיל המושלם יפה מאוד ועכשיו קונטרול Z וקונטרול Y קונטרול Z זז

  44. 13:22

    אחורה בזמן קונטרול ווייז אז קדימה בזמן ועכשיו נעשה task 9 ונעשה פייסט, כן, עשינו קופי ועכשיו הדבק עשינו לפני כן העתק ועכשיו עשינו הדבק ואז יש לנו למעשה ב-task 9 את כל המשימה עם מספר כוכביות האקראי שצוברים אל תדאגו, עכשיו נעשה עם דיבאגר ונבין את זה עוד יותר טוב נעשה דיבאגר ונבין את זה ממש טוב

  45. 13:46

    תחכו דקה, יפה מאוד ובואו נעשה רק כפתור ל-9, למשימה מספר 9 נעשה

לקורס המלא: קורס ג'אווה סקריפט מעשי

ההרצאה הקודמת: תרגילים 5-7

ההרצאה הבאה: תרגילים 10-11

הרצאות קשורות מקורסים אחרים

  • תרגילים על Collections
  • תרגילים על מטריצות בג'אווה
  • תרגילים מסכמים בנושא עיצוב

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס TypeScript
  • קורס ריאקט - React
  • קורס NodeJS