path: root/files/he/learn/javascript/building_blocks/looping_code/index.html

---
title: לולאות
slug: Learn/JavaScript/Building_blocks/Looping_code
translation_of: Learn/JavaScript/Building_blocks/Looping_code
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>

<p class="summary">שפות תכנות הן שימושיות מאוד כשזה קשור לביצוע משימות מסויימות שוב ושוב. מביצוע חישובים מתמטיים עד לכל דבר שאנחנו יכולים לחשוב עליו. במאמר זה נסתכל על מבנים שלו לולאות שזמינים עבורנו ב-JavaScript.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">ידע מוקדם:</th>
   <td>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>.</td>
  </tr>
  <tr>
   <th scope="row">מטרה:</th>
   <td>להבין כיצד להשתמש בלולאות ב-JavaScript ומתי.</td>
  </tr>
 </tbody>
</table>

<h2 id="מה_הן_לולאות">מה הן לולאות?</h2>

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

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

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

<p><br>
 <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>

<p>ללולאה יהיו בדרך כלל<strong> אחד או יותר </strong>(לא בהכרח את כולם) מהמאפיינים הבאים:</p>

<ul>
 <li>מונה - (<strong>counter</strong>)<strong> </strong>-<strong> </strong> אשר <strong>מאותחל לערך התחלתי</strong> מסויים - זו בעצם נקודת ההתחלה של הלולאה. ("Start: I have no food", למעלה).</li>
 <li>תנאי יציאה - (<strong>condition</strong>) -<strong> </strong> התנאי להפסקת ריצת הלולאה - בדרך כלל, כאשר המונה מגיע לערך מסויים. כאשר תנאי זה מקבל ערך <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">false</span></font>, הלולאה תפסיק לרוץ ויורץ הקוד שאחרי הלולאה.</li>
 <li>ביטוי לקידום הלולאה (<strong>iterator</strong>)<strong> </strong>-<strong> </strong> אשר באופן כללי, מעלה את המונה של הלולאה לאחר כל ריצה מוצלחת של הקוד שבתוך הלולאה, עד אשר תנאי היציאה יתקיים (כלומר יחזיר ערך של טרו). יש מפתחים שקוראים לו המונה.</li>
</ul>

<h3 id="למה_צריך_לולאות">למה צריך לולאות?</h3>

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

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

<p>נסתכל על דוגמא נוספת על מנת להסביר את הנושא. נניח שאנחנו רוצים לצייר 100 עיגולים אקראיים על אלמנט מסוג {{htmlelement("canvas")}}, ובאמצעות לחיצה על כפתור <em>Update</em> אנחנו נרצה לקבל סט חדש ואחר של 100 עיגולים אקראיים:</p>

<div class="hidden">
<h6 id="Hidden_code">Hidden code</h6>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Random canvas circles&lt;/title&gt;
    &lt;style&gt;
      html {
        width: 100%;
        height: inherit;
        background: #ddd;
      }

      canvas {
        display: block;
      }

      body {
        margin: 0;
      }

      button {
        position: absolute;
        top: 5px;
        left: 5px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;button&gt;Update&lt;/button&gt;

  &lt;canvas&gt;&lt;/canvas&gt;


    &lt;script&gt;
    const btn = document.querySelector('button');
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    let WIDTH = document.documentElement.clientWidth;
    let HEIGHT = document.documentElement.clientHeight;

    canvas.width = WIDTH;
    canvas.height = HEIGHT;

    function random(number) {
      return Math.floor(Math.random()*number);
    }

    function draw() {
      ctx.clearRect(0,0,WIDTH,HEIGHT);
      for (let i = 0; i &lt; 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();
      }
    }

    btn.addEventListener('click',draw);

    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>

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

<pre class="brush: js">for (let i = 0; i &lt; 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();
}</pre>

<ul>
 <li>הפונקציה <code>()random</code>, אשר הוגדרה מוקדם יותר בקוד, מחזירה לנו מספר שלם בין <code>0</code> ו- <code>x-1</code>.</li>
 <li><code>WIDTH</code> ו- <code>HEIGHT</code> אלו הרוחב והגובה של החלק הפנימי של הדפדפן.</li>
</ul>

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

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

<pre class="brush: js">ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();</pre>

<h2 id="לולאת_for">לולאת for</h2>

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

<p>הראשונה, שאנחנו נשתמש בה הרבה מאוד פעמים, היא <strong>לולאה מסוג <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></strong>. לולאה זו היא בעלת הסינטקס הבא:</p>

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

<p>הסבר:</p>

<ol>
 <li>המילה השמורה <code>for</code>, ולאחריה סוגריים רגילות <code>()</code>.</li>
 <li>בתוך הסוגריים הרגילות <code>()</code> יש לנו 3 ביטויים, מופרדים על ידי <code>;</code>:
  <ol>
   <li><strong>initializer  - מונה-מאתחל</strong> — פה אנו נראה בדרך כלל הצהרה על משתנה, בדרך כלל משתנה <code>let</code> אשר אנחנו נותנים לו ערך (מספר) התחלתי לפני שהלולאה רצה. הוא ישמש את הלולאה כמונה של מספר הריצה הרלוונטית. </li>
   <li><strong>exit-condition - תנאי יציאה</strong> — זהו התנאי שנבדק בטרם כל איטרציה. אם תוצאת המבחן היא <code>true</code>, הלולאה תמשיך לרוץ והביטוי שבתוך הסוגריים המסולסלות יבוצע. אם תוצאת המבחן היא <code>false</code> הלולאה תפסיק לרוץ. תנאי היציאה הוא בדרך כלל ביטוי הכולל אופטורים להשוואה - מבחנים לבדיקה האם התקיים תנאי מסויים.</li>
   <li><strong>final-expression - iterator - ביטוי לקידום הלולאה </strong>— ביטוי זה יבוצע או ירוץ בכל פעם שהלולאה ביצעה ריצה/איטראציה במלואה. ביטוי זה משמש בדרך כלל להעלות (או להוריד) את המונה-מאתחל על מנת לקרב אותו לקיום תנאי היציאה.</li>
   <li>שימו לב כי כל הביטויים האלו הם אופציונליים - אך לא ניכנס לאפשרויות השונות לעומק. אתם מוזמנים להרחיב בנושא בדף <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/statements/for">בנושא לולאת for</a>. </li>
  </ol>
 </li>
 <li>לאחר מכן יש לנו סוגריים מסולסלות <code>{...}</code> שכוללות בתוכן קוד אשר ירוץ בכל פעם שהלולאה מבצעת איטרציה.</li>
</ol>

<p>נסתכל על הדוגמא הבאה:</p>

<pre class="brush: js">const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
let info = 'My cats are called ';
const para = document.querySelector('p');

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

para.textContent = info;</pre>

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

<div class="hidden">
<h6 id="Hidden_code_2">Hidden code 2</h6>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Basic for loop example&lt;/title&gt;
    &lt;style&gt;

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;p&gt;&lt;/p&gt;


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

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

    para.textContent = info;

    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>

<div class="note">
<p><strong>תשומת לב</strong>: ניתן למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">הקוד ב- GitHub</a> או לראות אותו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">פה</a>.</p>
</div>

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

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

<div class="note">
<p><strong>לתשומת לבכם</strong>: רשמנו את תנאי היציאה כ- <code>i &lt; cats.length</code>, ולא <code>i &lt;= cats.length</code>, מכיוון שמחשבים מתחילים לספור מ-0 ולא מ-1 — אנחנו מתחילים כאשר <code>i</code> שווה ל<code>0</code>, וממשיכים עד אשר <code>i = 4</code> (האינדקס של האיבר האחרון במערך).</p>

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

<div class="note">
<p><strong>לתשומת לב</strong>: טעות נפוצה עם תנאי יציאה היא להשתמש עם (<em>״שווה ל-״</em>)  (<code>===</code>)  במקום עם (<em>״קטן מ- או שווה ל-״</em>) (<code>&lt;=</code>) .</p>

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

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

<blockquote>
<p>My cats are called Bill, Jeff, Pete, Biggles, Jasmin,</p>
</blockquote>

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

<pre class="brush: js">for (let i = 0; i &lt; cats.length; i++) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }
}</pre>

<div class="note">
<p><strong>לתשומת לב</strong>: ניתן למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">קוד הדוגמא הזו ב- GitHub</a> או כ- <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">דף אינטרנט</a>).</p>
</div>

<div class="warning">
<p><strong>זהירות</strong>: בלולאת for — כמו ביתר הלולאות, אנחנו צריכים לוודא שהמונה שלנו עולה או יורד, בהתאם למקרה הרלוונטי, כך שבשלב מסויים הוא יגיע לתנאי היציאה. אם לא - הלולאה תמשיך בלי סוף, ותגרום לכך שהדפדפן יעצור אותה או יקרוס. דבר כזה נקרא <strong>לולאה אינסופית</strong>.</p>
</div>

<h2 id="יציאה_מלולאות_באמצעות_break">יציאה מלולאות באמצעות break</h2>

<p>אם אנחנו רוצים לצאת מלולאה לפני שכל האיטרציות הושלמו, אנחנו יכולים להשתמש בביטוי <a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a>. ראינו אותו בעבר כשלמדנו על משפטי תנאי מסוג <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch</a> (כאשר ביטוי מסויים עונה למקרה מסויים - <code>break</code> עוצר באופן מיידי את המשך הבדיקה וממשיך לקוד שלאחר משפט <code>switch</code>).</p>

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

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

<pre class="brush: html">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
&lt;input id="search" type="text"&gt;
&lt;button&gt;Search&lt;/button&gt;

&lt;p&gt;&lt;/p&gt;</pre>

<p>כעת נכניס - JavaScript:</p>

<pre class="brush: js">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 &lt; 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.';
    }
  }
});</pre>

<div class="hidden">
<h6 id="Hidden_code_3">Hidden code 3</h6>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Simple contact search example&lt;/title&gt;
    &lt;style&gt;

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
  &lt;input id="search" type="text"&gt;
  &lt;button&gt;Search&lt;/button&gt;

  &lt;p&gt;&lt;/p&gt;


    &lt;script&gt;
    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 &lt; contacts.length; i++) {
        let splitContact = contacts[i].split(':');
        if (splitContact[0].toLowerCase() === searchName) {
          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
          break;
        } else if (i === contacts.length-1)
              para.textContent = 'Contact not found.';
        }
    });
    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>

<ol>
 <li>ראשית - הגדרנו קבועים - יש לנו מערך עם פרטי קשר - כאשר כל איבר במערך הוא מחרוזת המכילה שם ומספר טלפון המופרדים על ידי <code>:</code>. הגדרנו קבוע בשם <code>para</code> שמקבל הפנייה לאלמנט <code>&lt;p&gt;</code>. הגדרנו קבוע בשם <code>input</code> שמקבל הפניה לאלמנט <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">&lt;input&gt;</span></font> וקבוע בשם <code>btn</code> שמקבל הפניה ל-<code>&lt;button&gt;</code>. </li>
 <li>לאחר מכן חיברנו ״מאזין אירוע״ לכפתור - (<code>btn</code>), כך שבכל פעם שהוא יילחץ ירוץ קוד מסויים לביצוע החיפוש ויחזיר את התוצאה (event handler). במקרה הזה, זו הפונקציה האנונימית שנמצאת מיד לאחר הביטוי 'click'.</li>
 <li>אחסנו את הערך שהוכנס לתוך תיבת הטקסט (<code>input)</code>  בתוך משתנה שנקרא <code>searchName</code>, לאחר מכן ריקנו את תיבת הטקסט מתוכן, ועשינו עליה פוקוס באמצעות מתודת <code>()focus</code> , על מנת שתהיה מוכנה לחיפוש הבא. שימו לב שאנחנו גם הרצנו את מתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">()toLowerCase</a></code> על הערך שהתקבל ב-<code>input</code> כדי לנרמל את המחרוזת. </li>
 <li>ועכשיו לחלק המעניין של לולאת ה-<code>for</code>:
  <ol>
   <li>אנחנו מתחילים את המונה ב-<code>0</code>, מתבצעת בדיקת עמידה בתנאי, ככל והערך המוחזר הוא <code>true</code>, מתבצעת איטרציה - הרצה של הקוד שבתוך הסוגריים המסולסלות של הלולאה:
    <ol>
     <li>בתוך הלולאה אנחנו תחילה מחלצים כל חלק מהמחרוזת הראשית באמצעות מתודה שאנחנו מכירים <code>()split</code>, אשר מקבלת את התו <code>:</code> כתו שיחצה את המחרוזת <code>contacts</code> בכל פעם שהמתודה תמצא את התו הזה. להזכירכם מתודה זו מחזירה מערך של מחרוזות שהופרדו על ידי התו שהיא קיבלה. במקרה הזה אנחנו מאחסנים במשתנה בשם <code>splitContact</code> את המערך החדש שהוחזר לנו בכל איטרציה שזה בעצם מערך עם שני איברים: שם ומספר. </li>
     <li>לאחר מכן אנחנו משתמשים במשפט תנאי לבדוק האם <code>[splitContact[0</code> שזה בעצם שם האדם מנורמל באמצעות<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">()toLowerCase</a></code>, שווה לטקסט שנמצא ב-<code>searchName</code>. אם כן, אנחנו נכניס מחרוזת לתוך הפסקה עם הטלפון שלו שזה בעצם <code>[splitContact[1</code>, ונשתמש ב-<code>break</code> על מנת לעצור את הלולאה. </li>
    </ol>
   </li>
   <li>לאחר מכן מתבצעת הגדלת של ה-<code>i</code> ב-<code>1</code> בכל איטרציה מוצלחת של הלולאה באמצעות <code>++i</code>.</li>
  </ol>
 </li>
 <li>אחרי כל האיטרציות, כאשר i יהיה שווה לאיבר האחרון במערך של המחרוזת הראשית - כלומר אחרי <code>(contacts.length-1)</code> אם <code>searchName</code> לא זהה לאף  <code>[splitContact[i</code>, אז טקטסט של הפסקה הופך ל- "Contact not found."  </li>
</ol>

<div class="note">
<p>לתשומת לב: ניתן למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">קוד המקור - GitHub code on GitHub</a> או כדף <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">אינטרנט</a>.</p>
</div>

<h2 id="דילוג_על_איטרציה_עם_continue">דילוג על איטרציה עם continue</h2>

<p>ביטוי ה-<a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> עובד בדרך דומה לביטוי <code>break</code>, רק שבמקום לעצור את הלולאה ולצאת ממנה, הוא פשוט ממשיך לאיטרציה הבאה של הלולאה. נעבור כעת על דוגמא נוספת שבה אנחנו נזין מספר מקבל מספר כערך, ומחזיקה רק המספרים שהם מספרים שלמים.</p>

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

<pre class="brush: js">let num = input.value;

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

  para.textContent += i + ' ';
}</pre>

<p>זה הפלט שלנו:</p>

<div class="hidden">
<h6 id="Hidden_code_4">Hidden code 4</h6>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Integer squares generator&lt;/title&gt;
    &lt;style&gt;

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;

  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
  &lt;input id="number" type="text"&gt;
  &lt;button&gt;Generate integer squares&lt;/button&gt;

  &lt;p&gt;Output: &lt;/p&gt;


    &lt;script&gt;
    const para = document.querySelector('p');
    const input = document.querySelector('input');
    const btn = document.querySelector('button');

    btn.addEventListener('click', function() {
      para.textContent = 'Output: ';
      let num = input.value;
      input.value = '';
      input.focus();
      for (let i = 1; i &lt;= num; i++) {
        let sqRoot = Math.sqrt(i);
        if (Math.floor(sqRoot) !== sqRoot) {
          continue;
        }

        para.textContent += i + ' ';
      }
    });
    &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>

<ol>
 <li>במקרה הזה, הקלט צריך להיות מספר - <code>num</code>. אנו נותנים ללולאת ה-<code>for</code> מונה שמתחיל ב-<code>1</code> (אנחנו לא מעוניינים ב- <code>0</code> במקרה הנוכחי), תנאי יציאה שאומר שהלולאה תפסיק כאשר המונה יהיה גדול מהמספר שהכנסנו - מ-<code>num</code>, ואז ביטוי העלאה שמוסיף למונה <code>1</code> בכל איטרציה. </li>
 <li>בתוך הלולאה, אנחנו מוצאים את השורש הריבועי של כל מספר (של כל <code>num</code>) באמצעות שימוש במתודה <a href="/he/docs/">(</a>)<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt</a>, ואז בודקים האם השורש הריבועי הוא שלם על ידי בדיקה האם הוא זהה לעצמו כשהוא מעוגל כלפי מטה לשלם הקרוב - זה מה שמתודת <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">()Math.floor</a> עושה למספר שמועבר אליה - היא מחזירה את המספר השלם הגדול ביותר אשר נמוך מהמספר שהבאנו לה או השווה לו.</li>
 <li>אם השורש הריבועי והמספר שעוגל כלפי מטה אינהם זהים אחד לשני - (<code>!==</code>), המשמעות היא שהשורש הריבועי הוא לא מספר שלם, ולכן אנחנו לא מעוניינים בו. במקרה כזה, אנחנו נשתמש בביטוי <code>continue</code> על מנת לעבור לאיטרציה הבאה, אבל מבלי להמשיך להריץ את קוד אשר נמצא בהמשך האיטרציה הנוכחית (וביתר האיטרציות) ומבלי לצאת מהלולאה.</li>
 <li>אם השורש הריבוע הוא מספר שלם, אנחנו לא עומדים בתנאי שרשום במשפט ה-<code>if</code> ולכן המשפט <code>continue</code> לא מורץ. במקום, אנחנו מצרפים את הערך שבתוך <code>i</code> בצירוף רווח, לסוף של הטקסט שבתוך הפסקה. </li>
</ol>

<div class="note">
<p><strong>לתשומת לב</strong>: ניתן לראות את  <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">קוד המקור ב-GitHub</a> או לראות את הדף <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">אינטרנט</a>.</p>
</div>

<h2 id="while_ו-do_..._while">while ו-do ... while</h2>

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

<p>לולאת <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> מורכבת מהסינטקס הבא:</p>

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

  final-expression
}</pre>

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

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

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

<pre class="brush: js">let i = 0;

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

  i++;
}</pre>

<div class="note">
<p><strong>לתשומת לב</strong>: זה עובד כמו שציפינו — ראו את <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html"> הדף עובד ב-GitHub</a> או את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">קוד המקור</a>).</p>
</div>

<p>לולאת <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> דומה מאוד ללולאת while אבל שונה מעט:</p>

<pre>initializer
do {
  // code to run

  final-expression
} while (exit-condition)</pre>

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

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

<p>בוא נכתוב את הדוגמא שלנו באמצעות הלולאה <code>do...while</code>:</p>

<pre class="brush: js">let i = 0;

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

  i++;
} while (i &lt; cats.length);</pre>

<div class="note">
<p><strong>לתשומת לב</strong>: הלולאה עובדת בדיוק כפי שרצינו - ראו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">ב- GitHub</a> וכן את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">קוד המקור</a>.</p>
</div>

<div class="warning">
<p><strong>זהירות</strong>: בלולאות <code>while</code>  וב-<code>do...while</code> - אנחנו חייבם לוודא שהמאתחל מועלה או, בהתאם למקרה, יורד, כך שבסופו של דבר הקוד יגיע לתנאי היציאה והלולאה תסתיים. אחרת, הלולאה תמשיך עד אינסוף. במקרה כזה הדפדפן יכריח אותה להפסיק או שהוא יקרוס. זה נקרא <strong>לולאה אינסופית</strong>.</p>
</div>

<h2 id="למידה_עצמאית_בניית_שעון_ספירה_לאחור">למידה עצמאית: בניית שעון ספירה לאחור</h2>

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

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


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

<div class="hidden">
<h6 id="למידה_עצמאית">למידה עצמאית</h6>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
&lt;div class="output" style="height: 410px;overflow: auto;"&gt;

&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
&lt;textarea id="code" class="playable-code" style="height: 300px;width: 95%"&gt;
let output = document.querySelector('.output');
output.innerHTML = '';

// let i = 10;

// const para = document.createElement('p');
// para.textContent = ;
// output.appendChild(para);
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>



<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>


<pre class="brush: js">const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i &gt;= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
let solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  let scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  let front = (textarea.value).substring(0, caretPos);
  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>

<p class="brush: js"></p>
</div>

<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="למידה_עצמאית_-_מילוי_של_רשימת_אורחים">למידה עצמאית - מילוי של רשימת אורחים</h2>

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

<p>אתם מתבקשים לבצע את הדברים הבאים:</p>

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

   </li>
   <li>
     אם לא, צרפו את האיבר הרלוונטי של המערך לסוף הcode&gt;admitted של פסקת code&gt;admitted, בצירוף פסיק וכן רווח.
    </li>
  </ul>
 </li>
</ul>

<p>לבינתיים סיפקנו לכם:</p>

<ul>
 <li><code>let i = 0;</code> — המאתחל .</li>
 <li><code>refused.textContent +=</code> — זו ההתחלה של השורה שמצרפת ערך לסוף של <code>refused.textContent</code>.</li>
 <li><code>admitted.textContent +=</code> —  זו ההתחלה של השורה שמצרפת ערך לסוף של<code>admitted.textContent</code>.</li>
</ul>

<p>
  שאלת בונוס - אחרי השלמת המשימה, אתם תישארו עם 2 רשימת שמות, מופרדות על ידי פסיקים, אבל לא מסודרות, שכן בסוף כל רשימה יש לנו פסיק.
  מה ניתן לעשות כדי לחתוך את אותו פסיק או לבטל אותו? הסכתלו על
<a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות מחרוזות שימושיות</a> לעזרה.</p>

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

<div class="hidden">
<h6 id="תרגול_עצמאי_נוסף">תרגול עצמאי נוסף</h6>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
  &lt;p class="admitted"&gt;Admit: &lt;/p&gt;
  &lt;p class="refused"&gt;Refuse: &lt;/p&gt;
&lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;
&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];

const admitted = document.querySelector('.admitted');
const refused = document.querySelector('.refused');
admitted.textContent = 'Admit: ';
refused.textContent = 'Refuse: '

// let i = 0;

// refused.textContent += ;
// admitted.textContent += ;

&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js">const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
let solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  let scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  let front = (textarea.value).substring(0, caretPos);
  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="באיזו_לולאה_עלינו_להשתמש">באיזו לולאה עלינו להשתמש??</h2>

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

<p>תחילה לולאת <code>for</code>:</p>

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

<p>לולאת <code>while</code>:</p>

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

  final-expression
}</pre>

<p>לולאת <code>do...while</code>:</p>

<pre>initializer
do {
  // code to run

  final-expression
} while (exit-condition)</pre>

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

<div class="note">
<p><strong>לתשומת לב</strong>:
  יש סוגי לולאות נוספים ואפשרויות נוספות ללולאות, גם לאלו שסקרנו במאמר זה. אפשרויות ולולאות אלו הן מאוד שימושיות במקרים מתקדמים או פרטניים ולא נגע בהם במאמר זה. אם תרצו להעמיק, ראו את הדף בנושא
 <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a>.</p>
</div>

<h2 id="לסיכום">לסיכום</h2>

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

<h2 id="ראו_גם">ראו גם</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement דף הסבר בנושא</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> ו- <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> דפי הסבר</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> ו- <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> דפי הסבר</li>
 <li>
  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — בנושא לולאות best practices</p>
 </li>
</ul>

<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>

<h2 id="במודול_זה">במודול זה</h2>

<ul>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li>
</ul>