בחירה בין חלופות ב-JavaScript באמצעות if ו-else

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

כך נכתוב תנאי פשוט:

if(תנאי)  {
  // קוד לביצוע
}

בדוגמה הבאה, ערכו של המשתנה myNumber הוא 42, והתנאי אומר שאם המשתנה גדול מ-13 אז להקפיץ פופ-אפ שאומר "המספר גדול מ-13" :

var myNumber = 42;

// התנאי
if(myNumber > 13) {
  // קוד לביצוע אם התנאי מתקיים
  alert("המספר גדול מ-13");
}

הסקריפט יקפיץ למסך את הפופ-אפ הבא:

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

בדוגמה הבאה, ערכו של myVar הוא 1:

var myNumber = 1;

// התנאי
if(myNumber > 13) {
  // קוד לביצוע אם התנאי מתקיים
  alert("המספר גדול מ-13");
}

כשנריץ את הסקריפט הקוד לא יתבצע (ושום פופ-אפ לא יקפוץ) בגלל שהתנאי לא התקיים.

else – המשלים של if

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

בדוגמה הבאה, אם המספר גדול מ-13 מקפיצים פופ-אפ עם הודעה מסוימת, אחרת מקפיצים פופ-אפ עם הודעה אחרת.

var   myNumber = 1;

// התנאי
if(myNumber > 13) {
  // קוד לביצוע אם התנאי מתקיים
  alert("המספר גדול מ-13");
} else {
  // קוד לביצוע במידה והתנאי אינו מתקיים
  alert("המספר קטן מ-13");
}

והתוצאה:

בגלל שהתנאי אינו מתקיים, יוקפץ פופ-אפ שאומר "המספר קטן מ-13" .

סוגי השוואות ב-JavaScript

עד עכשיו ראינו השוואה של "גדול מ" באמצעות הסימן < .

כדי להשוות בין שני משתנים ולבדוק האם הם שווים, משתמשים בפעמיים שווה.

==

לדוגמה, הקוד הבא ששואל האם המשתנה שווה ל-42.

var   myNumber = 42;

// התנאי בודק האם המשתנה שווה 
if(myNumber == 42) {
  // קוד לביצוע אם התנאי מתקיים
  alert("BINGO!!");
}

והתוצאה היא בהתאם:

כדי לשאול האם שני משתנים שונים משתמשים בסימן קריאה שווה:

!=

בסקריפט הבא, אנו שואלים האם ערכו של המשתנה myLang שונה מ- javascript .

var myLang = 'javascript';

// תנאי שבודק האם הערכים שונים
if(myLang != 'javascript') {
  alert("הגיע הזמן ללמוד");
}

ומכיוון שהערכים אינם שונים, התנאי לא מתקיים, והקוד לא מתבצע.

לעומת זאת, הקוד הבא, שבו כתבנו "JavaScript" באותיות גדולות (ולא רק בקטנות) יקיים את התנאי, ויגרום לפופ-אפ לקפוץ.

var myLang = 'JavasSript';

// תנאי שבודק האם הערכים שונים
if(myLang != 'javascript') {
  alert("הגיע הזמן ללמוד");
}

כתוצאה מהקוד הפופ-אפ יקפוץ. כך זה ייראה:

מזה אנו יכולים ללמוד שני דברים:

1. שאפשר להשוות מחרוזות של טקסט ולא רק מספרים.
2. ש-JavaScript מתחשב באותיות קטנות לעומת גדולות.

קטן שווה וגדול שווה

עוד השוואה שחייבים לדעת מאפשרת לנו לשאול האם ערך הוא קטן או שווה ל. לדוגמה, האם 6 קטן או שווה מ-7.

var  a = 6;
var  b = 7;

if(a <= b) {
  alert(a + "קטן שווה מ-  " + b);
} else {
  alert(a + "לא קטן שווה מ  " + b);
}

כשנריץ את הקוד נקבל את הפופ-אפ שאומר ש-6 קטן שווה מ-7.

באותה מידה, אפשר להשתמש ב-=< (גדול שווה).

מה עושים כשיש יותר משתי אפשרויות?

מה שראינו עד כה הוא מצב שבו יש שתי אפשרויות בלבד: אמת או שקר. true או false. התנאי מתקיים או שאינו מתקיים.

ייתכנו מקרים שבהם יהיו לנו יותר משתי אפשרויות, ובשביל זה המציאו את else if .

כך נראה המקרה הכללי:

if(תנאי){
   // קוד
} else if(תנאי נוסף) {
   // קוד חלופי
} else {
   // קוד ברירת מחדל
}

• את התנאי הראשון יוצרים באמצעות if .
• את התנאים הנוספים מוסיפים באמצעות else if .
• ואת התנאי האחרון (שמהווה ברירת מחדל) מוסיפים באמצעות else .

בדוגמה הבאה מבררים האם ערכו של המשתנה animal הוא קוף, פרה או שפן. ואם לא מצליחים, אז מקפיצים פופ-אפ ששואל "מה זה?"

var animal = "תרנגולת";

//  התנאי הראשון תמיד מתחיל עם if 
if (animal == "פרה"){
  alert( "יה, פרה!"); 
} else if(animal == "שפן") {
   // לצורך התנאים הנוספים משתמשים בelse if
  alert( "יה, שפן!");
} else if(animal == "קוף") {
  alert("קוף אחרי בנאדם!");
} else {
   // else ובסוף ברירת המחדל
  alert("מה זה?");
}

התוצאה של הרצת הקוד היא שיוקפץ פופ-אפ שעליו כתוב "מה זה?"

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

לכל מדריכי ה-javascript

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים