לולאות

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

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

ידע מוקדם: הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של מודול צעדים ראשונים ב-JavaScript.
מטרה: להבין כיצד להשתמש בלולאות ב-JavaScript ומתי.

מה הן לולאות?

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

יש הרבה סוגי לולאות - אבל כולן עושות בעיקרון את אותו דבר: הן חוזרות על פעולה מסויימת מספר פעמים (ואף יכול להיות גם 0 פעמים).

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


ללולאה יהיו בדרך כלל אחד או יותר (לא בהכרח את כולם) מהמאפיינים הבאים:

  • מונה - (counter) -  אשר מאותחל לערך התחלתי מסויים - זו בעצם נקודת ההתחלה של הלולאה. ("Start: I have no food", למעלה).
  • תנאי יציאה - (condition) -  התנאי להפסקת ריצת הלולאה - בדרך כלל, כאשר המונה מגיע לערך מסויים. כאשר תנאי זה מקבל ערך false, הלולאה תפסיק לרוץ ויורץ הקוד שאחרי הלולאה.
  • ביטוי לקידום הלולאה (iterator) -  אשר באופן כללי, מעלה את המונה של הלולאה לאחר כל ריצה מוצלחת של הקוד שבתוך הלולאה, עד אשר תנאי היציאה יתקיים (כלומר יחזיר ערך של טרו). יש מפתחים שקוראים לו המונה.

למה צריך לולאות?

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

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

נסתכל על דוגמא נוספת על מנת להסביר את הנושא. נניח שאנחנו רוצים לצייר 100 עיגולים אקראיים על אלמנט מסוג <canvas>, ובאמצעות לחיצה על כפתור Update אנחנו נרצה לקבל סט חדש ואחר של 100 עיגולים אקראיים:

אתם לא צריכים להבין את כל הקוד הרשום למעלה, אבל הסתכלו לעומק על החלק שמצייר בפועל 100 כדורים:

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(255,0,0,0.5)';
  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
  ctx.fill();
}
  • הפונקציה ()random, אשר הוגדרה מוקדם יותר בקוד, מחזירה לנו מספר שלם בין 0 ו- x-1.
  • WIDTH ו- HEIGHT אלו הרוחב והגובה של החלק הפנימי של הדפדפן.

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

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

ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();

לולאת for

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

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

for (initializer; exit-condition; final-expression) {
  // code to run
}

הסבר:

  1. המילה השמורה for, ולאחריה סוגריים רגילות ().
  2. בתוך הסוגריים הרגילות () יש לנו 3 ביטויים, מופרדים על ידי ;:
    1. initializer  - מונה-מאתחל — פה אנו נראה בדרך כלל הצהרה על משתנה, בדרך כלל משתנה let אשר אנחנו נותנים לו ערך (מספר) התחלתי לפני שהלולאה רצה. הוא ישמש את הלולאה כמונה של מספר הריצה הרלוונטית. 
    2. exit-condition - תנאי יציאה — זהו התנאי שנבדק בטרם כל איטרציה. אם תוצאת המבחן היא true, הלולאה תמשיך לרוץ והביטוי שבתוך הסוגריים המסולסלות יבוצע. אם תוצאת המבחן היא false הלולאה תפסיק לרוץ. תנאי היציאה הוא בדרך כלל ביטוי הכולל אופטורים להשוואה - מבחנים לבדיקה האם התקיים תנאי מסויים.
    3. final-expression - iterator - ביטוי לקידום הלולאה — ביטוי זה יבוצע או ירוץ בכל פעם שהלולאה ביצעה ריצה/איטראציה במלואה. ביטוי זה משמש בדרך כלל להעלות (או להוריד) את המונה-מאתחל על מנת לקרב אותו לקיום תנאי היציאה.
    4. שימו לב כי כל הביטויים האלו הם אופציונליים - אך לא ניכנס לאפשרויות השונות לעומק. אתם מוזמנים להרחיב בנושא בדף בנושא לולאת for
  3. לאחר מכן יש לנו סוגריים מסולסלות {...} שכוללות בתוכן קוד אשר ירוץ בכל פעם שהלולאה מבצעת איטרציה.

נסתכל על הדוגמא הבאה:

const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
let info = 'My cats are called ';
const para = document.querySelector('p');

for (let i = 0; i < cats.length; i++) {
  info += cats[i] + ', ';
}

para.textContent = info;

הקוד למעלה יציג לנו את הפלט הבא:

תשומת לב: ניתן למצוא את הקוד ב- GitHub או לראות אותו פה.

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

  1. המונה: לפעמים גם נקרא כמאתחל, הינו משתנה i, והוא מתחיל ב-0.   (let i = 0).
  2. בדיקת תנאי יציאה/עצירת הלולאה: הלולאה תרוץ כל עוד i קטן יותר ממספר האיברים שנמצאים במערך cats. (מציאת כמות האיברים שנמצאת במערך זה מתבצעת באמצעות cats.length. תנאי היציאה הוא חשוב ביצירת לולאה - הוא קובע מהו התנאי אשר רק כאשר תוצאות תהיה true, הלולאה תמשיך ותבצע איטרציה נוספת. במקרה הזה, כל עוד i < cats.length עדיין נכון, הלולאה תמשיך לרוץ.
  3. הרצת הקוד שבתוך הסוגריים המסולסלות: בתוך הלולאה, אנחנו מחברים בין הפריט הנוכחי שהלולאה מבצעת עליו איטרציה [הערך של i באותה ריצה] cats,  ביחד עם פסיק ורווח בסוף המשתנה info:
    1. במהלך הריצה הראשונה - האיטרציה הראשונה, , i = 0, ולכן cats[0] + ', ' (שהוא שווה ל-Bill, ) יצורף לתוך info.
    2. במהלך הריצה השנייה - האיטרציה השנייה , i = 1, ולכן cats[1] + ', ' (אשר שווה ל- Jeff, ) יצורך גם הוא לתוך info.
  4. קירוב המונה לתנאי היציאה: אחרי כל ריצה של הלולאה, נוסיף 1 ל-i באמצעות ++iשימו לב - רק אחרי שהקוד שבתוך הסוגריים המסולסלות מבוצע, מתבצעת הוספה של 1 למשתנה i וכך הלאה.
  5. ביצוע בדיקה חוזרת לתנאי העצירה ועמידה בו:  לאחר קירוב המונה לתנאי העצירה, תבוצע בדיקה חוזרת האם התנאי מתקיים -  כאשר תוצאת התנאי תהיה שוב true, הלולאה תמשיך ותבצע איטרציה נוספת.
  6. רק כאשר i יהיה שווה ל- cats.length (במקרה זה, 5), הלולאה תפסיק שכן הערך המתקבל בתוצאה הוא false והדפדפן יעבור לקוד שמתחת לולאה. 

לתשומת לבכם: רשמנו את תנאי היציאה כ- i < cats.length, ולא i <= cats.length, מכיוון שמחשבים מתחילים לספור מ-0 ולא מ-1 — אנחנו מתחילים כאשר i שווה ל0, וממשיכים עד אשר i = 4 (האינדקס של האיבר האחרון במערך).

 cats.length יחזיר 5, ומכיוון שאכן ישנם 5 פריטים, אבל הפריט החמישי של cats.length, נמצא באינדקס מס׳ 4. ולכן אנחנו לא רוצים את cats.length אלא את cats.length פחות אחד. אם נשים רק את cats.length, כאשר   i = 5  המבחן יחזיר לנו ערך של  undefined בעבור הפריט האחרון - שכן אין איבר באינדקס 5. ולכן, אנחנו נרצה להריץ את הלולאה מספר 1 פחות.

לתשומת לב: טעות נפוצה עם תנאי יציאה היא להשתמש עם (״שווה ל-״)  (===)  במקום עם (״קטן מ- או שווה ל-״) (<=) .

אם אנחנו נרצה להריץ את הלולאה שלנו עד אשר i = 5, תנאי היציאה יצטרך להיות i <= cats.length.אם נקבע אותו כ i === cats.length  אזי הלולאה לא תרוץ בכלל מכיוון ש-i לא שווה ל-5 באיטרציה הראשונה של הלולאה, ולכן הלולאה תעצור במיידי.

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

My cats are called Bill, Jeff, Pete, Biggles, Jasmin,

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

for (let i = 0; i < cats.length; i++) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }
}

לתשומת לב: ניתן למצוא את קוד הדוגמא הזו ב- GitHub או כ- דף אינטרנט).

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

יציאה מלולאות באמצעות break

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

בדיוק אותו הדבר כמו עם לולאות - הביטוי break יגרום ליציאה מיידית מהלולאה והדפדפן ימשיך לקוד שנמצא לאחר מכן.

נניח ואנחנו רוצים לחפש בתוך מערך של אנשי קשר וטלפונים, ואז להחזיר רק את המספר שאנחנו רוצים למצוא? נתחיל ב-HTML פשוט - תיבת טקסט <input>, המאפשרת לנו להכניס את השם שנרצה לחפש ואלמנט מסוג כפתור <button> על מנת לשלוח את החיפוש וכן אלמנט של פסקה  <p> על מנת להציג בו את התוצאות.

<label for="search">Search by contact name: </label>
<input id="search" type="text">
<button>Search</button>

<p></p>

כעת נכניס - JavaScript:

const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');

btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();
  input.value = '';
  input.focus();
  for (let i = 0; i < contacts.length; i++) {
    let splitContact = contacts[i].split(':');
    if (splitContact[0].toLowerCase() === searchName) {
      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
      break;
    } else {
      para.textContent = 'Contact not found.';
    }
  }
});

  1. ראשית - הגדרנו קבועים - יש לנו מערך עם פרטי קשר - כאשר כל איבר במערך הוא מחרוזת המכילה שם ומספר טלפון המופרדים על ידי :. הגדרנו קבוע בשם para שמקבל הפנייה לאלמנט <p>. הגדרנו קבוע בשם input שמקבל הפניה לאלמנט <input> וקבוע בשם btn שמקבל הפניה ל-<button>
  2. לאחר מכן חיברנו ״מאזין אירוע״ לכפתור - (btn), כך שבכל פעם שהוא יילחץ ירוץ קוד מסויים לביצוע החיפוש ויחזיר את התוצאה (event handler). במקרה הזה, זו הפונקציה האנונימית שנמצאת מיד לאחר הביטוי 'click'.
  3. אחסנו את הערך שהוכנס לתוך תיבת הטקסט (input)  בתוך משתנה שנקרא searchName, לאחר מכן ריקנו את תיבת הטקסט מתוכן, ועשינו עליה פוקוס באמצעות מתודת ()focus , על מנת שתהיה מוכנה לחיפוש הבא. שימו לב שאנחנו גם הרצנו את מתודת ()toLowerCase על הערך שהתקבל ב-input כדי לנרמל את המחרוזת. 
  4. ועכשיו לחלק המעניין של לולאת ה-for
    1. אנחנו מתחילים את המונה ב-0, מתבצעת בדיקת עמידה בתנאי, ככל והערך המוחזר הוא true, מתבצעת איטרציה - הרצה של הקוד שבתוך הסוגריים המסולסלות של הלולאה:
      1. בתוך הלולאה אנחנו תחילה מחלצים כל חלק מהמחרוזת הראשית באמצעות מתודה שאנחנו מכירים ()split, אשר מקבלת את התו : כתו שיחצה את המחרוזת contacts בכל פעם שהמתודה תמצא את התו הזה. להזכירכם מתודה זו מחזירה מערך של מחרוזות שהופרדו על ידי התו שהיא קיבלה. במקרה הזה אנחנו מאחסנים במשתנה בשם splitContact את המערך החדש שהוחזר לנו בכל איטרציה שזה בעצם מערך עם שני איברים: שם ומספר. 
      2. לאחר מכן אנחנו משתמשים במשפט תנאי לבדוק האם [splitContact[0 שזה בעצם שם האדם מנורמל באמצעות()toLowerCase, שווה לטקסט שנמצא ב-searchName. אם כן, אנחנו נכניס מחרוזת לתוך הפסקה עם הטלפון שלו שזה בעצם [splitContact[1, ונשתמש ב-break על מנת לעצור את הלולאה. 
    2. לאחר מכן מתבצעת הגדלת של ה-i ב-1 בכל איטרציה מוצלחת של הלולאה באמצעות ++i.
  5. אחרי כל האיטרציות, כאשר i יהיה שווה לאיבר האחרון במערך של המחרוזת הראשית - כלומר אחרי (contacts.length-1) אם searchName לא זהה לאף  [splitContact[i, אז טקטסט של הפסקה הופך ל- "Contact not found."  

לתשומת לב: ניתן למצוא את קוד המקור - GitHub code on GitHub או כדף אינטרנט.

דילוג על איטרציה עם continue

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

ה-HTML  בעיקרון דומה לדוגמא הקודמת - יש לנו תיבת טקסט פשוטה ופסקה להציג את הפלט. ה-JavaScript גם דומה, למרות שהלולאה שלנו קצת אחרת:

let num = input.value;

for (let i = 1; i <= num; i++) {
  let sqRoot = Math.sqrt(i);
  if (Math.floor(sqRoot) !== sqRoot) {
    continue;
  }

  para.textContent += i + ' ';
}

זה הפלט שלנו:

  1. במקרה הזה, הקלט צריך להיות מספר - num. אנו נותנים ללולאת ה-for מונה שמתחיל ב-1 (אנחנו לא מעוניינים ב- 0 במקרה הנוכחי), תנאי יציאה שאומר שהלולאה תפסיק כאשר המונה יהיה גדול מהמספר שהכנסנו - מ-num, ואז ביטוי העלאה שמוסיף למונה 1 בכל איטרציה. 
  2. בתוך הלולאה, אנחנו מוצאים את השורש הריבועי של כל מספר (של כל num) באמצעות שימוש במתודה ()Math.sqrt, ואז בודקים האם השורש הריבועי הוא שלם על ידי בדיקה האם הוא זהה לעצמו כשהוא מעוגל כלפי מטה לשלם הקרוב - זה מה שמתודת ()Math.floor עושה למספר שמועבר אליה - היא מחזירה את המספר השלם הגדול ביותר אשר נמוך מהמספר שהבאנו לה או השווה לו.
  3. אם השורש הריבועי והמספר שעוגל כלפי מטה אינהם זהים אחד לשני - (!==), המשמעות היא שהשורש הריבועי הוא לא מספר שלם, ולכן אנחנו לא מעוניינים בו. במקרה כזה, אנחנו נשתמש בביטוי continue על מנת לעבור לאיטרציה הבאה, אבל מבלי להמשיך להריץ את קוד אשר נמצא בהמשך האיטרציה הנוכחית (וביתר האיטרציות) ומבלי לצאת מהלולאה.
  4. אם השורש הריבוע הוא מספר שלם, אנחנו לא עומדים בתנאי שרשום במשפט ה-if ולכן המשפט continue לא מורץ. במקום, אנחנו מצרפים את הערך שבתוך i בצירוף רווח, לסוף של הטקסט שבתוך הפסקה. 

לתשומת לב: ניתן לראות את  קוד המקור ב-GitHub או לראות את הדף אינטרנט.

while ו-do ... while

לולאות for הן לא הלולאות היחידות שיש לנו ב-JavaScript. האמת שיש עוד הרבה אחרות. אנחנו ללא צריכים לדעת את כולן כעת, אבל שווה יהיה להעיף מבט בכמה ונבין שאפשרויות שונות עובדים בצורה שונה.

לולאת while מורכבת מהסינטקס הבא:

initializer
while (exit-condition) {
  // code to run

  final-expression
}

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

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

בוא נסתכל שוב על רשימת החתולים, אבל נכתוב אותה באמצעות לולאת while:

let i = 0;

while (i < cats.length) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
}

לתשומת לב: זה עובד כמו שציפינו — ראו את הדף עובד ב-GitHub או את קוד המקור).

לולאת do...while דומה מאוד ללולאת while אבל שונה מעט:

initializer
do {
  // code to run

  final-expression
} while (exit-condition)

במקרה הזה, המאתחל מגיע שוב ראשון, לפני שהלולאה מתחילה. המילה שמורה do ולאחר מכן סוגריים מסולסלות {} שבותכן ייכנס הקוד שנרה שירוץ בלולאה. ולסוף , המילה השמורה while ולאחרי קוד היציאה.

השוני כאן זה שתנאי היציאה מגיע בסוף, עטוף בתוך סוגריים רגילות (). בלולאת do...while, הקוד בתוך הסוגריים המסולסלות {...} תמיד ירוץ פעם אחת לפחות לפני בדיקת התנאי ואז יבדוק את התנאי על מנת לבדוק האם לרוץ שוב. להזכירכם - בלולאות while ובלולאות for, בדיקת התקיימות התנאי מתבצעת לפני הרצת הקוד שבתוך {...}  כך שיכול להיות שהקוד בלולאות אלו לא יבוצע לעולם. בלולאת do...while לעומת זאת, הקוד תמיד ירוץ פעם אחת לפחות.

בוא נכתוב את הדוגמא שלנו באמצעות הלולאה do...while:

let i = 0;

do {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
} while (i < cats.length);

לתשומת לב: הלולאה עובדת בדיוק כפי שרצינו - ראו ב- GitHub וכן את קוד המקור.

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

למידה עצמאית: בניית שעון ספירה לאחור

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

  • תבנה לולאה שתרוץ מ-10 עד 0. סיפקנו לכם מאתחל - let i = 10;
  • בעבור כל איטרציה, צרו פסקה חדשה והוסיפו אותה ל-output div', המיוצגת על ידי const output = document.querySelector('.output');
  • בהערות סיפקנו לכם 2 שורות קוד שתצטרכו להתמש בהם איפשהו בלולאה:
    • const para = document.createElement('p'); — יוצרת פסקה חדשה.
    • output.appendChild(para); — מוסיפה את הפסקה החדש ל <div> של האאוטפוט.
    • para.textContent = — הופכת את הטקסט שבתוך הפסקה למה שנשים מצד ימין לסימן ה-=.
  • בכל מספר ריצה דרוש טקסט אחר שיהיה מוצג לאותה ריצה - אתם תצטרכו משפט תנאי ומניפולציה ל- para.textContent:
    • אם המספר הוא 10, הדפיסו ״Countdown 10״ לתוך הפסקה.
    • אם המספר הוא 0, הדפיסו "Blast off!" לתוך הפסקה.
    • בכל יתר המספרים, פשוט הדפיסו את המספר לתוך הפסקה.
  • זכרו לכלול ביטוי לקידום הלולאה. שימו לב שבדוגמא הזו אנחנו סופרים למטה לאחר כל ריצה ולא למעלה, אז אנחנו לא יכולים להשתמש ב-++i

אם עשיתם טעות אתם תמיד יכולים לאתחל את הקוד באמצעות הכפתור "Reset" ואם ממש נתקתעם לחצו על כפתור "Show solution" לפתרון.

למידה עצמאית - מילוי של רשימת אורחים

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

אתם מתבקשים לבצע את הדברים הבאים:

  • כתבו לולאה שתרוץ מ-0 ועד לאורך של מערך people array. אתם צריכים להתחיל עם ערך מאתחל כמו let i = 0;, אבל מה יהיה תנאי היציאה?
  • בכל איטרציה, אתם צריכים לבדוק האם האיבר הנוכחי של המערך people שווה להאורחים Phil או Lola באמצעות משפט תנאי:
    • אם כן, צרפו את איבר המערך הרלוונטי הtextContent של פסקת refused, בצירוף פסיק וכן רווח.
    • אם לא, צרפו את האיבר הרלוונטי של המערך לסוף הcode>admitted של פסקת code>admitted, בצירוף פסיק וכן רווח.

לבינתיים סיפקנו לכם:

  • let i = 0; — המאתחל .
  • refused.textContent += — זו ההתחלה של השורה שמצרפת ערך לסוף של refused.textContent.
  • admitted.textContent += — זו ההתחלה של השורה שמצרפת ערך לסוף שלadmitted.textContent.

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

אם עשיתם טעות אתם תמיד יכולים לאתחל את הקוד באמצעות הכפתור "Reset" ואם ממש נתקתעם לחצו על כפתור "Show solution" לפתרון

באיזו לולאה עלינו להשתמש??

בדרך כךך, לשימושים בסיסים, הלולאות for, while, ו-do...while, הן חלופיות. כולן לרוב יכולות לפתור את אותן בעיות ואתם תחליטו במה לבחור.

תחילה לולאת for:

for (initializer; exit-condition; final-expression) {
  // code to run
}

לולאת while:

initializer
while (exit-condition) {
  // code to run

  final-expression
}

לולאת do...while:

initializer
do {
  // code to run

  final-expression
} while (exit-condition)

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

לתשומת לב: יש סוגי לולאות נוספים ואפשרויות נוספות ללולאות, גם לאלו שסקרנו במאמר זה. אפשרויות ולולאות אלו הן מאוד שימושיות במקרים מתקדמים או פרטניים ולא נגע בהם במאמר זה. אם תרצו להעמיק, ראו את הדף בנושא Loops and iteration guide.

לסיכום

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

ראו גם

במודול זה