אבן חן, אבן חן די מתוקה! אבל אתם יודעים מה יותר טוב מאבן אחת, שורה שלמה של אבני חן! וכמובן, עכשיו אנחנו יודעים את הדרך הטובה ביותר ליצור שורה של אבני חן, בעזרת לולאה. אז בואו נשתמש בלולאה כדי ליצור 12 אבני חן בשורה. משמאל לימין על פני המסך. אז כך for(var i שווה 0; i פחות מ- 12;i פלוס פלוס) ואנחנו ניקח את השורה הזאת ונעביר לכאן. אז עכשיו יש לנו 12 אבנים אבל הם בעצם כולם נערמו ממש אחד מעל השני. זכרו, אנחנו רוצים אותם לאורך המסך. זה אומר שאנחנו רוצים לשנות את ה-X 36 זה ה-X עכשיו, אבל אנחנו רוצים אותו שונה בכל פעם. זה אומר שאנחנו רוצים שהוא יהיה תלוי ב-i אז מה שנוכל לעשות זה פשוט לכתוב i כפול 36 . אז הראשון הוא ב 0, ולאחר מכן 36, אז 72, וכו'. מגניב! עכשיו יש לנו שורה של אבני חן. וזה סוג של מזכיר לי את הסצנות האלה באינדיאנה ג'ונס או אלדין שבו הגיבור מגלה אוצר מתחת לאדמה של אבני חן אבל הם בדרך כלל מוצאים הרבה יותר אבני חן מזה. לא רק שורה של אבני חן, אלא ערימה של אבני חן! אז איך נוכל לגרום לאבני החן לרדת כל הדרך לתחתית המסך? ובכן אנחנו יכולים להתחיל על ידי חזרה על הלולאה בעזרת העתק הדבק. ולשנות את ה-Y בכל פעם ונשנה את זה ל-60 ואז -90. ועכשיו יש לנו שלוש שורות של אבני חן, מגניב. אך זה נהיה ממש משעמם כיוון שכל מה שאני עושה זה העתק הדבק ושינוי דבר אחד קטן. ובדרך כלל בעבר כאשר מצאנו את עצמנו כותבים קוד שחוזר על עצמו כמו זה היינו חושבים, "אולי פשוט נשתמש בלולאה במקום" אבל אנחנו כבר משתמשים בלולאה. אז מה הפיתרון כדי להימנע מלכתוב כך, אתם יודעים, העתק-הדבק? ובכן לזה אנחנו קוראים "לולאה מקוננת", לולאה בתוך לולאה אז מה שאנחנו הולכים לעשות זה להכין לולאה חיצונית וזה מה שהולך לדאוג לירידה לתחתית המסך והלולאה הפנימית שלנו תדאג לעשות את מה שהיא עושה עכשיו שזה ללכת משמאל לימין. תנו לי להראות לכם למה אני מתכוונת. אז לולאת for - ונשתמש במשתנה אחר הפעם, נקרא לו j , כיוון ואנחנו כבר משתמשים ב-i for(var j שווה 0; j פחות מ- 13; j פלוס פלוס) אוקיי, אז זו הולכת להיות הלולאה החיצונית שלנו, שאחראית על הולכה מלמעלה למטה. ואז אנחנו רק הולכים לקחת אחת מהלולאות הקודמות שלנו ולשים אותה בפנים ולתקן את מה שלא נחוץ, נמחק את הישנות. אז עכשיו יש לנו את כולם נערמו על גבי שורה אחת. אז אנחנו רוצים לשנות את ה-Y , נכון? זה מה ששינינו מקודם, כאשר עשינו העתק-הדבק ועכשיו, ה-Y תמיד 90 אנחנו רוצים ש-Y ישתנה בכל שורה. זה בדיוק כמו ש-X תלוי ב-i, אנחנו רוצים את Y שיהיה תלוי ב-j. נוכל ללכת קדימה ולשנות את זה למשהו כמו, אולי, j כפול 30. מעולה! כל כך הרבה אבני חן! בואו נראה מה זה עושה, שוב. הלולאה החיצונית יוצרת משתנה j ומגדילה אותו עד 13. בכל ביצוע של הלולאה החיצונית, זה מריץ את הלולאה הפנימית. הלולאה הפנימית יוצרת משתנה i שגדל עד ל-12. ובעבור כל ביצוע של הלולאה הפנימית, היא מציירת תמונה במיקום x ו-y שמבוסס על i ו-j. וה-i משתנה בתדירות גבוה יותר מה-j בגלל זה בכדי לנסות להבין זאת אפילו טוב יותר, בואו ננסה להמחיש את ערכי i ו-j . אז מה שאני יעשה זה תגובה מתוך תמונה ואז קבע צבע מילוי ואני הולכת להשתמש בפקודת text כדי להראות את ערכו של j - אז text j ואני אכתוב את זה בנקודה המתאימה. אוקיי עכשיו נוכל לראות j הולך מ-0 ל-12. זהו בעצם איפה שהשורות של אבניהחן שלנו הוצבו גם כן. עכשיו נמחיש את i ונראה איך זה משתנה אז ל-i, נבחר צבע שונה. נשים את ה-i במקומו נשנה את ה-x שלו כדי שילך לאורך כל המסך. נעשה אותו דבר עם y. עכשיו נוכל לראות ש-i הולך מ-0 ל-11 וה-i כפי שאמרתי, משתנה בתדירות גבוהה יותר. ושורה זו של הקוד מבוצעת הרבה יותר פעמים מהשורה הזו של הקוד. כיוון ושורה זו של הקוד מבוצעת בכל ביצוע של הלולאה הפנימית. בעוד שהשורה הזאת של הקוד מבוצעת רק עבור ביצוע של הלולאה החיצונית. אז זאת המחשה של i ו-j בתקווה שזה עזר לכם להבין טוב יותר מה קורה בלולאות מקוונות. עכשיו בואו נחזיר את אבני החן, כיוון והן מגניבות יותר! אז יש הרבה שתוכלו לעשות בעזרת לולאות for מקוונות אם אתם רק תחשבו על כל דבר בעולם שנראה כמו לוח דו מימדי, כמו לוח שחמט, הכוכבים על דגל ארה"ב, דפוסים וטפטים מגניבים כדי להתחיל את הדמיון שלכם, פשוט שחקו עם הקוד הזה כמו על ידי שינוי התמונה. אני אתחיל בשינוי התמונה ללב! כדי להראות לכם כמה אני אוהבת לולאות for מקוננות!