יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

לולאת for

  1. דף הבית
  2. מדריך HTML5
  3. לולאת for

לולאות for מתקדמות בג'אווה סקריפט, עם break ו-continue.

לולאת for בג'אווה סקריפט

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

 

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

<script>
const names = ["Zamir", "Yariv", "Eli", "Sandra", "Sivan"];
document.write("Name number " + 1 + ": " + names[0] + "<br />");
document.write("Name number " + 2 + ": " + names[1] + "<br />");
document.write("Name number " + 3 + ": " + names[2] + "<br />");
document.write("Name number " + 4 + ": " + names[3] + "<br />");
document.write("Name number " + 5 + ": " + names[4] + "<br />");
</script>

נשים לב כי פקודת ההדפסה document.write משוכפלת 5 פעמים, פעם אחת עבור כל איבר במערך. אבל מה יקרה אם יהיו לנו 100 שורות במערך? נצטרך לשכפל אותה 100 פעמים.

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

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

 

ככה הקוד יעבוד עם לולאת for:

<script>
const names = ["Zamir", "Yariv", "Eli", "Sandra", "Sivan"];

for (var i=0; i<names.length; i++) {
	document.write("Name number " + (i+1) + ": " + names[i] + "<br />");
}
</script>

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

 

נסביר את הלולאה שבדוגמה:

בתוך הסוגריים שממוקמים אחרי המילה השמורה for, יש 3 חלקים המופרדים בסימן ;.

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

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

החלק השלישי - חלק הקידום. חלק זה מקדם את המשתנים שאותם איתחלנו.

בדוגמה שלנו, אתחלנו את המשתנה i שישמש כאינדקס, בערך 0. בסיום כל ריצה של הקוד בסוגריים המסולסלים, נבדק אם מתקיים i<names.length ואם כן, הלולאה מסתיימת. אם היא לא מסתיימת, מקודם הערך i באחד (פקודת i++).

כל סבב ריצה של הקוד בסוגריים המסולסלים מכונה איטרציה. המשתנה שמונה את הסבבים (במקרה של המשתנה i, כפי שנהוג לבחור) מכונה איטרטור.

 

לולאות מתקדמות ומקוננות

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

ניתן לאתחל מספר משתנים בחלק האתחול.

ניתן גם לקנן לולאה בתוך לולאה.

 

נראה דוגמה ללולאה מקוננת עם חלק אתחול כפול וחלק אתחול חסר:

<script>
const names = ["Zamir", "Yariv", "Eli", "Sandra", "Sivan"];

for (var i=0, c=names.length; i<c; i++) {
	var j=0;
	for (; j<3; j++) {
		document.write("Name number " + (i+1) + ": " + names[i] + " (execution number " + (j+1) + ")<br />");
	}
}

/*
output:
Name number 1: Zamir (execution number 1)
Name number 1: Zamir (execution number 2)
Name number 1: Zamir (execution number 3)
Name number 2: Yariv (execution number 1)
Name number 2: Yariv (execution number 2)
Name number 2: Yariv (execution number 3)
Name number 3: Eli (execution number 1)
Name number 3: Eli (execution number 2)
Name number 3: Eli (execution number 3)
Name number 4: Sandra (execution number 1)
Name number 4: Sandra (execution number 2)
Name number 4: Sandra (execution number 3)
Name number 5: Sivan (execution number 1)
Name number 5: Sivan (execution number 2)
Name number 5: Sivan (execution number 3)
*/
</script>

בדוגמה הגדרנו לולאה שהאיטרטור שלה הוא i ובתוכה לולאה שהאיטרטור שלה הוא j. הלולאה החיצונית מופעלת names.length פעמים, כלומר תרוץ 5 איטרציות, והלולאה הפנימית מופעלת 3 פעמים (עבור הערכים j=0, j=1, j=2).

בלולאה החיצונית, אתחלנו גם את הערך של המשתנה i שמהווה איטרטור ללולאה וגם את הערך של המשתנה c שמאותחל בערך של names.length.

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

 

שימוש ב-continue וב-break:

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

המילה השמורה break עוצרת את ריצת הלולאה לגמרי.

 

דוגמה לשימוש ב-continue וב-break:

<script>
const names = ["Zamir", "Yariv", "Eli", "Sandra", "Sivan"];

for (var i=0; i<names.length; i++) {
	// skip Yariv
	if (names[i] == "Yariv") {
		continue;
	}

	document.write("Name number " + (i+1) + ": " + names[i] + "<br />");

	// exit the loop after Sandra
	if (names[i] == "Sandra") {
		break;
	}
}
</script>

לולאת ה-for מופעלת על כל אחד מ-5 השמות במערך names.

אם השם הנוכחי (כלומר names[i] בריצה הקוד בסוגריים המסולסלים) הוא "Yariv" מדלגים על יתר הקוד בסוגריים המסולסלים לשם הבא, וכך השם "Yariv" לא מודפס על המסך.

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

 

YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

אל תהססו! מלאו את הטופס או התקשרו עכשיו 077-7644819

 
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: