המדריך הישראלי ל-JavaScript, פרק 4

פרק 4: משפטי בקרה ולולאות

· משפט התנאי if

· משפט התנאי if..else

· משפט ה-switch

· משפט לולאת ה-for

· משפט לולאת ה- do..while

· משפט לולאת ה- while

· משפט ה- label

· משפט ה- break

· משפט ה- continue

· משפט ה- for..in

· תרגילים

משפט התנאי if

משפט התנאי if הוא משפט התנאי הפשוט ביותר. הוא מורכב מהמילה if , מביטוי לוגי בסוגריים (התנאי) אחריה וממשפט בהמשך. אם הביטוי הלוגי true אז המשפט שבהמשך יתבצע.

if (condition)

statement

המשפט יכול להיות משפט פשוט (פקודה אחת) או משפט מורכב (מספר פקודות שמתוחמות בסוגריים מסוסלות כמו ב- C\C++ וב- JAVA). אם רוצים, ניתן לרשום כמשמט שאמור להתבצע משפט תנאי if נוסף.

הביטוי הלוגי יכול להיות כל ביטוי ב-JavaScript שערכו true או false (הערכים הבסיסיים). יש לשים לב לכך שכל אובייקט שערכו איננו undefined ואיננו null , לרבות אובייקט מטיפוס Boolean שערכו false , מקבל את הערך הפרימיטיבי true כאשר הוא ממוקם בתור הביטוי הלוגי במשפט תנאי.

התכנית הבאה מדגימה את משפט התנאי if ואת מה שהוסבר.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>ifDemo.html</TITLE>

var num1=24;

var num2=25;

if (num1<num2)

document.write("<BR>num1 is smaller than num2");

var num3=4;

var num4=90;

if (num4>num3)

if (num4%3==0)

{

document.write("<BR>num4 is bigger than num3 and

divides with ");

document.write("no residual into 3");

}

var b = new Boolean(false);

if (b)

{

document.write("<BR>Object of the Boolean type that holds false ");

document.write("evaluates to the primitive value true");

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

משפט התנאי if..else

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

if (condition)

statement1

else

statement2

התכנית הבאה מדגימה את השימוש במשפט ה-if..else.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>ifElseDemo.html</TITLE>

var num1=24;

var num2=25;

if (num1>num2)

document.write("<BR>num1 is bigger than num2");

else

if (num1<num2)

document.write("<BR>num1 is smaller than num2");

else

document.write("<BR>num1 is equal to num2");

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

משפט ה-switch

בדומה ל-C\C++ ול-JAVA גם ב-JavaScript ניתן לכתוב את משפט ה-swirch. משפט ה-swith כולל בתוכו ביטוי שאת ערכו הוא מחשב, ומשווה את הערך שמתקבל למספר קבועים שנתונים מראש. אם קיים קבוע שזהה בערכו לערך של הביטוי אז המשפט (או המשפטים) שמופיע/ים בצמידות לאותו קבוע מתבצע/ים.

התחביר של משפט זה נראה כדלקמן:

switch (expression)

{

case label1:

statement;

break;

case label2:

statement;

break;

case labe13:

statement;

break;

case label4:

statement;

break;

. . .

default:

statement;

}

כלומר, ערכו של ה-expression מחושב, ומושווה לכל אחד מה-labels שנתונים. אם קיים label שערכו זהה לביטוי שחושב אז המשפט/ים שמופיע/ים בצמידות אליו מתבצעים עד לפקודה break.

אם ערכו של הביטוי שחושב לא שווה לאף אחד מה-labels הנתונים אז יבוצע המשפט/המשפטים שמופיעים אחרי המילה default. המילה default אופציונלית ולא חייבים לרשום אותה. לפיכך, אם ערכו של הביטוי לא שווה לאף אחד מה-labels ובמשפט ה-switch לא נרשמה המילה default אז משפט ה-switch לא יבצע שום דבר, והתכנית תמשיך לרוץ החל מהמשפט הראשון שבא אחרי משפט ה-switch.

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

התכנית הבאה מדגימה את השימוש במשפט ה-switch.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>switchDemo.html</TITLE>

var car = "VOLVO";

switch(car)

{

case "SKODA":

document.write("<BR>SKODA is a cheap car");

document.write("<BR>The SKODA price is 50,000 NIS");

break;

case "FIAT":

document.write("<BR>FIAT is an Italean car");

document.write("<BR>The FIAT price is 54,000 NIS");

break;

case "VOLVO":

document.write("<BR>VOLVO is a Sweden car");

document.write("<BR>The VOLVO price is 120,400 NIS");

break;

default:

document.write("<BR>This car doesn't exist");

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

לולאת ה- for

לולאה היא פקודה אחת או יותר שמתבצעות שוב ושוב כל עוד תנאי מסוים true. רוב הלולאות ש-JavaScript תומכת בהן מוכרות למי שמכיר את שפות התכנות C\C++ ו- JAVAוהן כוללות את הלולאות הבאות: for, while ו- do..while.

JavaScript תומכת גם במשפטי הבקרה break ו- continue, וכמו כן, תומכת בלולאה ייחודית לעצמה, לולאת ה- for..in.

לולאת ה-for ב-JavaScript פועלת כמו ב-JAVA וכמו ב- C\C++. לולאת ה-for כוללת בתוך הסוגריים העגולות שאחרי המילה for שלושה חלקים:

initialExpression, הביטוי שמאתחל את משתנה/י הלולאה (ניתן לוותר עליו).

booleanExpression, התנאי שכל עוד הוא true הלולאה ממשיכה לפעול (ניתן לוותר עליו).

IncrementExpression, הביטוי שמקדם את משתנה/י הלולאה (ניתן לוותר עליו).

התחביר של לולאת ה-for הוא כדלקמן:

For (initializationExpression ; booleanExpression ; incremetExpression)

statement

לולאת ה-for מתבצעת באופן הבא:

תחילה מחושב הביטוי initialExpression, אשר מאתחל את המשתנים שעליהם הלולאה פועלת.

לאחר שהביצוע של ביטוי זה מסתיים, מחושב הביטוי booleanExpression שערכו true או false. אם ערכו false אז הלולאה מסתיימת, והתכנית ממשיכה לפעול החל מהמשפט הראשון שמופיע אחרי לולאת ה-for. אם ערכו של הביטוי booleanExpression הוא true אז המשפט או המשפטים שעליהם הלולאה פועלת מתבצע/ים ומייד לאחר מכן מתבצע הביטוי incrementExpression, אשר מקדם את ערכו /ערכם של משתני הלולאה.

לאחר מכן, ערכו של הביטוי booleanExpressin מחושב שוב.

אם הוא false אז הלולאה מסתיימת כפי שהוסבר.

אם הוא true אז המשפט/משפטים שעליהם הלולאה פועלת מתבצעים שוב, ולאחר מכן התכנית עוברת לביטוי incrementExpression, ואחריו, שוב, לביטוי booleanExpression, וחוזר חלילה: אם ערכו false אז הלולאה מסתיימת ...

אם ערכו true אז הלולאה ממשיכה . . .

התכנית הבאה מדגימה את פעולתה של לולאה זו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>forLoopDemo.html</TITLE>

var num = 5;

var result, index;

for (result=1, index=1; index<=num; index++)

result=result*index;

document.write("The factorial of 5 is : " + result);

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

לולאת ה- do..while

לולאה זו מבצעת משפט (או קבוצה של משפטים) שוב ושוב כל עוד ערכו של הביטוי הלוגי שלה true.

התחביר של לולאה זו הוא כדלקמן:

{

statement

}

while(booleanExpression);

המשפט (או המשפטים) של הלולאה, statement, מתבצע בפעם הראשונה ללא כל תנאי. לאחר ביצועו מחושב ערכו של הביטוי הבוליאני boooleanExpression.

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

אם ערכו של הביטוי הבוליאני הוא true אז המשפט (או המשפטים) של הלולאה מתבצעים שוב, ולאחר מכן שוב מחושב ערכו של הביטוי הבוליאני booleanExpressionוחוזר חלילה.

התכנית הבאה מדגימה את אופן פעולתה של הלולאה do..while.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>doWhileLoopDemo.html</TITLE>

var num = 5;

var result=1;

{

result*=num;

num--;

}

while(num>0);

document.write("The factorial of 5 is : " + result);

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

לולאת ה- while

הלולאה while מבצעת את המשפט (או המשפטים) שעליו היא פועלת שוב ושוב כל עוד ערכו של הביטוי הלוגי שלה הוא true.

התחביר של לולאה זו הוא כדלקמן:

While (booleanExpression)

Statement;

כאשר לולאת ה-while מתחילה להתבצע, הפעולה הראשונה שנעשית היא חישוב ערכו של ה-booleanException.

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

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

כפי שניתן לראות, ההבדל הבולט בין לולאת ה-while ללולאת ה-do..while הוא שבעוד שהמשפט (או המשפטים) של לולאת ה-do..while מתבצעים לפחות פעם אחת, המשפט (או המשפטים) של לולאת ה-while עשויים שלא להתבצע בכלל.

התכנית הבאה מדגימה את השימוש בלולאה while.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>whileLoopDemo.html</TITLE>

var num = 5;

var result=1;

while (num>0)

{

result*=num;

num--;

}

document.write("The factorial of 5 is : " + result);

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

משפט ה-label

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

השם (התווית) שבוחרים – אסור שתהיה שם שמור, שם שמשמש למטרה אחרת שמוגדרת בשפה. בהמשך, תינתן דוגמא שתציג את השימוש במשפט ה-label.

משפט ה-break

משפט ה-break משמש להפסקת פעולתה של לולאה שסומנה באמצעות משפט ה-label.

כללי התחביר של משפט ה-label מאפשרים את כתיבתו בשתי דרכים:

1. כתיבת המילה break ללא כל תוספת.

2. כתיבת המילה break בצירוף שם של label מסוים.

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

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

התכנית הבאה מדגימה את השימוש במשפט ה-break.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>breakDemo.html</TITLE>

var j = 0;

var i = 0;

loop1:while (true)

{

i++

loop2:while (true)

{

j++;

if (i==11)

break loop1;

if (j==11)

{

j=0;

break;

}

result = i * j;

document.write(result + " ");

}

document.write("<BR>");

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

משפט ה-continue

את משפט ה-continue ניתן למקם בתוך כל אחת מהלולאות for, while ו- do..while ואופן פעולתו דומה לאופן פעולתו ב-JAVA וב- C\C++.

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

אם ממקמים את משפט ה-continue בתוך לולאת while או בתוך לולאת do..while אז בפעולתו הוא יגרום לסיום האיטרציה הנוכחית, ולמעבר אל התנאי של הלולאה (מעבר אל ה-booleanExpression של הלולאה).

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

התכנית הבאה מדגימה את השימוש במשפט ה-continue.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>continueDemo.html</TITLE>

var i = 0;

loop1:while (true)

{

i++;

if (i%7!=0)

continue;

if (i>1000)

break;

document.write(i+" ");

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

משפט ה- for..in

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

כללי התחביר בכתיבת משפט זה הם:

for (variableName in objectVariable)

statement

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

כלומר, בכתיבת הביטוי: VariableObject[variableName] בתוך הלולאה מקבלים את ערכו של המשתנה ששמו variableName בתוך האובייקט variableObject.

התכנית הבאה מדגימה את השימוש במשפט ה- for..in .

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>forInDemo.html</TITLE>

newStudent = {name: "Dany", age: 30, country: "CANADA"};

var property;

for (property in newStudent)

{

document.write("<BR>newStudent." + property + " = ");

document.write(newStudent[property]);

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

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

תרגילים

1. כתוב/כתבי תכנית אשר תכלול שלושה משתנים. התכנית תחשב ותבדוק אם שלושת הערכים שבתוך שלושת המשתנים יכולים להרכיב משולש.

2. כתוב/כתבי תכנית אשר תחשב ותדפיס באמצעות לולאת for את עשרת המספרים הראשונים בסדרת פיבונאצ'י.

3. כתוב/כתבי תכנית אשר תחשב ותדפיס באמצעות לולאת while את העצרת של 8.

4. כתוב/כתבי תכנית אשר תחשב ותדפיס באמצעות לולאת do..while את העצרת של 7.

5. כתוב/כתבי תכנית אשר תחשב ותדפיס את כל המספרים הראשוניים שבין 0 ל- 1000. התכנית תעשה שימוש בפקודות break ו- continue.

6. כתוב/כתבי תכנית אשר תכלול את יצירתו של אובייקט אשר מכיל 4 משתנים. התכנית תדפיס את ערכיהם של 4 המשתנים של האובייקט באמצעות לולאת for..in.

No parts of the contents of this paper may be reproduced or transmitted in any form by any means

without the written permission of the publisher ! This book can be used for personal use only !!!

Brought to you by Zindell

(http://www.zindell.com)

לנוחיותך, להלן תוכן העניינים של הספר:

פרק 1 : הבסיס
פרק 2 : ערכים בסיסיים
פרק 3 : אופרטורים
פרק 4 : משפטי בקרה ולולאות
פרק 5 : פונקציות
פרק 6 : אובייקטים
פרק 7 : אובייקטים מובנים בשפה
פרק 8 : אופן פעולת האובייקטים
פרק 9 : תבניות טקסט
פרק 10 : שילוב של JavaScript ו- HTML
פרק 11 : טיפול באירועים
פרק 12 : האובייקטים שנוצרים בדפדפן
פרק 13 : האובייקט Navigator
פרק 14 : האובייקט Window
פרק 15 : האובייקט Document
פרק 16 : האובייקט Location
פרק 17 : האובייקט History
פרק 18 : יצירת cookies
פרק 19 : האובייקטים Link ו- Anchor
פרק 20 : האובייקט Image
פרק 21 : יצירת Image Map
פרק 22 : האובייקט Form
פרק 23 : טכנולוגית ה- LiveConnect