diff options
Diffstat (limited to 'files/he/learn/javascript/building_blocks/conditionals/index.html')
| -rw-r--r-- | files/he/learn/javascript/building_blocks/conditionals/index.html | 789 |
1 files changed, 789 insertions, 0 deletions
diff --git a/files/he/learn/javascript/building_blocks/conditionals/index.html b/files/he/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..4c5c5dcc54 --- /dev/null +++ b/files/he/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,789 @@ +--- +title: משפטי תנאי - קבלת החלטות בקוד שלנו +slug: Learn/JavaScript/Building_blocks/תנאים +tags: + - Conditionals + - Switch + - else if + - if ... else + - ternary + - אופרטור טרנארי + - משפטי אם...אחר + - משפטי תנאי + - תנאים +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "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>בני האדם מקבלים החלטות שמשפיעות על החיים שלהם באופן קבוע, מהחלטה קטנה האם לאכול שתי עוגיות או אחת עד להחלטות מורכבות האם לעזוב את העבודה או האם ללכת ללמוד אסטרונומיה במקום סוציולוגיה.</p> + +<p>משפטי תנאי ב-JavaScript אפשרים לנו לייצג בקוד שלנו את התהליך של קבלת ההחלטה, החל מהחלטות שנהיה חייבים לקבל ועד החלטות שנקבל רק אם ניתקל במקרה מסויים.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="if_..._else_-_משפטי_אם_..._אחרת">if ... else - משפטי אם ... אחרת</h2> + +<p>נסתכל על הסוג הנפוץ ביותר של משפטי תנאי ב-JavaScript - משפט התנאי <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a>.</p> + +<h3 id="הסינטקס_הבסיסי_של_משפטי_if_..._else">הסינטקס הבסיסי של משפטי if ... else</h3> + +<p>אם ננסה להמחיש את הסינטקס הבסיסי של <code>if...else</code> בצורה מופשטת של {{glossary("pseudocode")}}, הוא ייראה כך:</p> + +<pre>if (condition - תנאי) { + code to run if condition is true - הקוד שירוץ אם התנאי נכון +} else { + run some other code instead - הקוד שירוץ אם התנאי לא נכון +}</pre> + +<p>מה שיש לנו כאן זה:</p> + +<ol> + <li>המילה השמורה <code>if</code> ולאחרי סוגריים רגילות <code>()</code>.</li> + <li>לאחר מכן - התנאי שנבדוק האם הוא מתקיים נמצא בתוך ה- <code>()</code> (כמו: ״האם הערך הזה גדול מערך אחר״ או ״הערך הזה קיים״). תנאי זה יעשה שימוש באופרטורים שדבירנו עליהם במודול הקודם - <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">comparison operators אופרטורים להשוואה </a> ויחזיר לנו ערך של אמת - <code>true</code> או ערך של שקר - <code>false</code>.</li> + <li>לאחר מכן - סוגריים מסולסלות - <code>{}</code> - שבתוכן נכניס כל קוד שנרצה, אשר יתבצע אך ורק אם התנאי התקיים, כלומר החזיר תוצאת אמת - <code>true</code>.</li> + <li>לאחר מכן - מילה שמורה נוספת שהיא <code>else</code>. אשר באה לבטא מה יקרה, אם בכלל, כאשר התנאי לא יחזיר תוצאת <code>true</code>. </li> + <li>ולבסוף - סוגריים מסולסלות נוספות<code>{}</code>- שבתוכן נכניס כל קוד שנרצה, אשר יתבצע אך ורק אם התנאי עצמו לא התקיים, כלומר החזיר תוצאת שקר - <code>false</code>.</li> +</ol> + +<p>קוד זה דיי קריא ומובן על ידי בני אדם - הוא אומר בעצם ש-"<strong>אם</strong> ה- <strong>condition (התנאי)</strong> מתקיים - כלומר מחזיר ערך של אמת - <code>true</code>, תריץ את קוד A, <strong>אחרת -</strong> תריץ את קוד B"</p> + +<p>שימו לב שאנחנו לא חייבים את לכלול את ה- <code>else</code> ואת הסוגריים המסולסלות השניות. כך לדוגמא, התנאי הבא הוא חוקי לחלוטין:</p> + +<pre>if (condition) { + code to run if condition is true +} + +run some other code</pre> + +<p>יחד עם זאת, אנחנו צריכים לזכור שבמקרה כזה, הקוד השני שאינו חלק ממשפט התנאי, לא נשלט על ידיו ולא כפוף למשפט התנאי - מה שאומר שהוא ירוץ <strong>תמיד</strong> לא משנה אם התנאי החזיר ערך <code>true</code> או <code>false</code>. זה לאו דווקא משהו רע, אבל חשוב לדעת זאת.</p> + +<p>לפעמים אנחנו גם נראה משפטי- <code>if...else</code> ללא סוגריים מסולסלות כלל, בקיצור אשר נראה כך:</p> + +<pre>if (condition) code to run if condition is true +else run some other code instead</pre> + +<p>זהו קוד תקין לחלוטין, אך <strong>אינו מומלץ לשימוש</strong> - הרבה יותר קל לקרוא קוד ולהבין מה קורה, אם אנחנו משתמשים בסוגריים מסולסולת לתחום את הקוד, וכן משתמשים במס׳ שורות ורווחים על מנת להפוך את הקוד לקריא ומובן יותר.</p> + +<h3 id="דוגמא_לתרגול">דוגמא לתרגול</h3> + +<p>על מנת להבין את הסינטקס טוב יותר, בוא ננסה דוגמא קטנה לתרגול. דמיינו ילד אשר התבקש לעזור לאימו בביצוע הקניות. אם הוא ישלים את המשימה, הוא יקבל דמי כיס גבוהים יותר מהרגיל:</p> + +<pre class="brush: js">var shoppingDone = false; + +if (shoppingDone === true) { + var childsAllowance = 10; +} else { + var childsAllowance = 5; +}</pre> + +<p>עם זאת, קוד זה תמיד יגרום לכך שהילד יקבל דמי כיס מופחתים שכן בתחילת הקוד המשתנה <code>shoppingDone</code> קיבל את הערך של <code>false</code>. אנחנו צריכים למצוא דרך להפוך את הערך של המשתנה <code>shoppingDone</code> - <code>true</code> אם הילד השלים את הקניות.</p> + +<div class="note"> +<p><strong>תשומת לב</strong>: ניתן לראות את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">הפתרון לתרגול זה ב- GitHub</a> (וכן ניתן לראות אותו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">כדף אינטרנט</a>.)</p> +</div> + +<h3 id="else_if_-_משפטי_התניה_משורשרים">else if - משפטי התניה משורשרים</h3> + +<p>הדוגמא הקודמת נתנה לנו שתי אפשרויות אך מה אם נצטרך יותר משתי אפשרויות?</p> + +<p>ישנה דרך לשרשר אפשרויות נוספות לתוך משפט <code>if...else</code> שלנו באמצעות שימוש ב- <code>else if</code>. כל בחירה נוספות דורשת בלוק נוסף של קוד שייכנס בין<code>{ ... }() if</code> לבין <code>{ ... }else</code> — ראו את הדוגמאות הבאות, שהן בעצם חלק מיישום פשוט לתחזית מזג אוויר:</p> + +<pre class="brush: html"><label for="weather">Select the weather type today: </label> +<select id="weather"> + <option value="">--Make a choice--</option> + <option value="sunny">Sunny</option> + <option value="rainy">Rainy</option> + <option value="snowing">Snowing</option> + <option value="overcast">Overcast</option> +</select> + +<p></p></pre> + +<pre class="brush: js">var select = document.querySelector('select'); +var para = document.querySelector('p'); + +select.addEventListener('change', setWeather); + +function setWeather() { + var choice = select.value; + + if (choice === 'sunny') { + para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'; + } else if (choice === 'rainy') { + para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'; + } else if (choice === 'snowing') { + para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'; + } else if (choice === 'overcast') { + para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; + } else { + para.textContent = ''; + } +} + +</pre> + +<p>{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<ol> + <li>כאן יש לנו אלמנט {{htmlelement("select")}} המאפשר לנו לבחור אפשרויות שונות, וכן פסקה פשוטה.</li> + <li>ב-JavaScript, אנחו מאחסנים הפניות לאלמנט {{htmlelement("select")}} ולאלמנט- {{htmlelement("p")}} על ידי שמירתם במשתנים ומוסיפים ל-{{htmlelement("select")}} ״מאזין אירוע״ - event listener לאלמנט {{htmlelement("select")}} כך שכאשר הערך שלו ישתנה, הפונקציה <code>()setWeather</code>תופעל.</li> + <li>כאשר הפונקציה הזו רצה, אנחנו מגדירים תחילה משתנה בשם <code>choice</code> ומשימים לו את הערך הרלוונטי שהמשתמש בחר באלמנט <code><select></code>. לאחר מכן, אנחנו משתמשים במשפטי תנאי על מנת לתת כיתוב שונה בטקסט של הפסקאות, בהתאם לערך שיקבל <code><select></code> בכל פעם. שימו לב שכל התנאים נבדקים בבלוקי קוד של משפט תנאי <code>{...}()else if</code>, למעט האפשרות הראשונה, אשר נבדק בבלוק של המשפט התנאי <code> {...}()if</code>.</li> + <li>האפשרות האחרונה הנמצאת בבלוק של <code>{...}else</code> היא בעצם ברירת המחדל, או האופציה האחרונה. הקוד בבלוק שלה ירוץ רק אם אף אחד מהתנאים לא החזירו <code>true</code>. במקרה הזה, זה ישמש לרוקן את הטקסט מהפסקה ומידה ושום אופציה לא נבחרה.</li> +</ol> + +<div class="note"> +<p><strong>לתשומת לב</strong>: אתם גם יכולים <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">למצוא את הדוגמא הזו ב- GitHub</a> או <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">להריץ אותה</a>.</p> +</div> + +<h3 id="תשומת_לב_לאופרטורים_להשוואה">תשומת לב לאופרטורים להשוואה</h3> + +<p>אופרטורים להשוואה משמשים לבדוק את התנאים בתוך משפטי התנאי שלנו. עברנו עליהם במאמר <a href="/he/Learn/JavaScript/First_steps/Math#Comparison_operators">מתמטיקה בסיסית ב-JavaScript — מספרים ואופרטורים</a> שלנו. האפשרויות שלנו הן:</p> + +<ul> + <li><code>===</code> ו- <code>!==</code> — בודקים האם ערך אחד זהה או שונה באופן מוחלט מערך אחר.</li> + <li><code><</code> ו- <code>></code> — בודקים האם ערך אחד קטן או גדול מערך אחר.</li> + <li><code><=</code> ו- <code>>=</code> — בודקים האם ערך אחד קטן/שווה או גדול/שווה לערך אחר .</li> +</ul> + +<div class="note"> +<p><strong>לתשומת לבכם</strong>: חיזרו על החומר אם אינכם זוכרים אותם. </p> +</div> + +<p>כאשנו מדברים על תוצאות ההשוואה, אנחנו רוצים לשים תשומת לב לערכים הבוליאנים שנקבל - הלא הם (<code>true</code>/<code>false</code>) ומהו המקור שלהם וכן לשים לב להתנהגות מסויימת שאנחנו ניתקל בה שוב ושוב.</p> + +<p>כל ערך שהוא לא <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, או מחרוזת ריקה - (<code>''</code>), יחזיר לנו אמת - <code>true</code> כאשר הוא נבדק כתנאי במשפט תנאי. ולכן, אנחנו יכולים להשתמש רק בשם של המשתנה בלבד על מנת לבדוק האם הוא אמת או אפילו לבדוק האם הוא קיים - כלומר הוא לא <code>undefined</code> לדוגמא:</p> + +<pre class="brush: js">var cheese = 'Cheddar'; + +if (cheese) { + console.log('Yay! Cheese available for making cheese on toast.'); +} else { + console.log('No cheese on toast for you today.'); +}</pre> + +<p>ואם נחזור לדוגמא הקודמת שלנו עם הילד והמטלה, נוכל לרשום זאת כך:</p> + +<pre class="brush: js">var shoppingDone = false; + +if (shoppingDone) { // don't need to explicitly specify '=== true' + var childsAllowance = 10; +} else { + var childsAllowance = 5; +}</pre> + +<h3 id="שרשור_של_if_..._else">שרשור של if ... else</h3> + +<p>זה בסדר גמור לשים משפט <code>if...else</code> אחד בתוך השני - כלומר לשרשר אותם. לדוגמא, אנחנו יכולים לעדכן את היישום מזג אוויר שלנו להראות רשימה נוספת של אפשרויות בהתבסס על הטמפרטורה:</p> + +<pre class="brush: js">if (choice === 'sunny') { + if (temperature < 86) { + para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.'; + } else if (temperature >= 86) { + para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.'; + } +}</pre> + +<p>למרות שכל הקוד עובד יחד, כל משפט <code>if...else</code> עובד לחלוטין באופן עצמאי מהאחר.</p> + +<h3 id="AND_OR_או_NOT_אופרטוריים_לוגיים_-_Logical_operators">AND, OR או NOT :אופרטוריים לוגיים - Logical operators</h3> + +<p>אם נרצה לבדוק מספר תנאים מבלי לשרשר משפטי <code>if...else</code> שונים, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">logical operators אופרטוריים לוגיים -</a> יכולים לעזור לנו. כשנעשה בהם שימוש בתנאים, השניים ראשונים עושים את הדברים הבאים:</p> + +<ul> + <li><code>&&</code> — AND; מאפשר לנו לשרשר ביחד מס׳ תנאים אשר כולם חייבים להתקיים ועל כולם להחזיר <code>true</code> על מנת שכל הביטוי יהיה <code>true</code>.</li> + <li><code>||</code> — OR; מאפשר לנו לשרשר מס׳ תנאים אשר מספיק שאחד מהם יתקיים ויחזיר ערך של <code>true</code>, על מנת שכל הביטוי יהיה <code>true</code>.</li> +</ul> + +<p> ניתן היה לרשום את הקוד הקודם באמצעות שימוש באופרטור הלוגי AND בצורה הבאה:</p> + +<pre class="brush: js">if (choice === 'sunny' && temperature < 86) { + para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.'; +} else if (choice === 'sunny' && temperature >= 86) { + para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.'; +}</pre> + +<p>בדוגמא זו, הבלוק קוד הראשון ירוץ רק אם <code>'choice === 'sunny</code> <em>וגם</em> <code>temperature < 86</code> יחזיר <code>true</code>.</p> + +<p>דוגמא לשימוש באופרטור הלוגי OR:</p> + +<pre class="brush: js">if (iceCreamVanOutside || houseStatus === 'on fire') { + console.log('You should leave the house quickly.'); +} else { + console.log('Probably should just stay in then.'); +}</pre> + +<p>הסוג האחרון של אופרטור לוגי - NOT, מבוטא על ידי האופרטור <code>!</code> וניתן לשימוש על מנת לשלול ביטוי מסויים. נראה אותו בדוגמא הבאה:</p> + +<pre class="brush: js">if (!(iceCreamVanOutside || houseStatus === 'on fire')) { + console.log('Probably should just stay in then.'); +} else { + console.log('You should leave the house quickly.'); +}</pre> + +<p>בקוד זה אם ביטוי של OR מסויים מחזיר <code>true</code>, אז האופרטור NOT יהפוך אותו לשלילי על מנת שכל הביטוי יחזור <code>false</code>.</p> + +<p>אנחנו יכולים לאחד כמה משפטי התנייה ואופרטורים לוגיים כמה שנרצה, בכל מבנה שנרצה. הדוגמאות הבאות מריצות קוד בפנים רק אם שני משפטי ה-OR מחזירים ערך של אמת. </p> + +<pre class="brush: js">if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { + // run the code +}</pre> + +<p>טעות נפוצה שעושים כאשר משתמשים באופרטור הלוגי OR במשפט תנאי היא לציין את המשתנה שאנחנו נרצה לבדוק את הערך שלו ואז לתת מס׳ ערכים לבדיקה מופרדים על ידי האופרטור<code>||</code> (OR) , זה עלול להחזיר לנו ערך של אמת. לדוגמא:</p> + +<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) { + // run my code +}</pre> + +<p>במקרה זה, התנאי בתוך הסוגריים <code>()</code> יחזיר לנו תמיד <code>true</code>, כי המספר 7 או כל מספר שאינו 0, תמיד יחזיר ערך של <code>true</code> כי כל ערך שהוא לא <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, או מחרוזת ריקה - (<code>''</code>), יחזיר לנו אמת - <code>true</code> כאשר הוא נבדק כתנאי במשפט תנאי. </p> + +<p>על מנת שקוד זה יעבוד לוגית כפי שרצינו, אנחנו צריכים להשתמש<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> אופרטור </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">OR </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">על כל אחד מהם:</span></p> + +<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) { + // run my code +}</pre> + +<h2 id="משפטי_switch">משפטי switch</h2> + +<p>משפטי <code>if...else</code> עוזרים לנו לממש קוד מותנה שירוץ בהתאם לתנאים שנגדיר לו, אבל לא בלי החסרונות שלהם. הם לרוב יהיו טובים כאשר יש לנו שתי אפשרויות וכל מהן דורשת כמויות הגיונית של קוד, או כאשר התנאים שלנו מורכבים יחסית. למקרים שבה אנחנו נרצה הרבה מקרים לבדיקה, הקוד עלול להיות קצת מעצבן וארוך. </p> + +<p>בשביל זה נועדו משפטי <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></code>. משפטים אלו מקבלים ביטוי/ערך בתוך פרמטר ואז בודקים התקיימותו בין מספר אפשרויות שמוגדרות להם. אם הם מוצאים אחת מהאפשרויות שמתאימה לביטוי/ערך שהם קיבלו כפרמטר, הן יריצו את הקוד המתאים. כך זה קורה מבחינה רעיונית<span style="font-size: 1rem; letter-spacing: -0.00278rem;">:</span></p> + +<pre>switch (expression) { + case choice1: + run this code + break; + + case choice2: + run this code instead + break; + + // include as many cases as you like + + default: + actually, just run this code +}</pre> + +<p>הסבר:</p> + +<ol> + <li>המילה השמורה <code>switch</code>, ולאחריה סט של סוגריים רגילות <code>()</code>.</li> + <li>ביטוי או ערך בתוך הסוגריים.</li> + <li>המילה השמורה <code>case</code>, ולאחריה מקרה אפשרי שהביטוי או הערך יכול להיות, לאחריו <code>:</code>.</li> + <li>קוד שירוץ אם המקרה מתאים לביטוי/ערך.</li> + <li>המילי השמורה <code>break</code>, ולאחריה <code>;</code> אם האפשרות הקודמת תואמת לערך/ביטוי, הדפדפן יפסיק להריץ את הקוד במשפט ה-<code>switch</code> וימשיך לקוד שמתחת למשפט ה-<code>switch</code>.</li> + <li>ניתן להוסיף <code>case</code> כמה שרק נרצה. </li> + <li>לבסוף, המילה השמורה <code>default</code>, ולאחריה <code>:</code> וקוד שירוץ. <code>default</code> תרוץ אם הערך/ביטוי שהוכנס לא תואם לאף אחד מאפשרויות ה-<code>case</code> שרשמנו. במקרה של <code>default</code> - אין צורך להתשמש במילה השמורה <code>break</code>, מכיוון שאין מה להפסיק/לעצור לאחר התקיימותו של מקרה זה. </li> +</ol> + +<div class="note"> +<p><strong>לתשומת לב</strong>: החלק של <code>default</code> הוא אופציונלי - אנחנו יכולים להשמיט אותו אם אין סיכוי כשהביטוי יחזיר לנו ערך לא ידוע או לא תואם לאף אחד מהמקרים. אם יש סיכוי כזה - אנחנו צריכים לכלול <code>default</code> במשפט ה-<code>switch</code> על מנת להתמודד עם אותם מקרים לא ידועים. </p> +</div> + +<h3 id="דוגמא_למשפט_switch">דוגמא למשפט switch</h3> + +<p>נסתכל על דוגמא אמיתית - נכתוב את יישום מזג האוויר שלנו מחדש באמצעות שימוש במשפט <code>switch</code>:</p> + +<pre class="brush: html"><label for="weather">Select the weather type today: </label> +<select id="weather"> + <option value="">--Make a choice--</option> + <option value="sunny">Sunny</option> + <option value="rainy">Rainy</option> + <option value="snowing">Snowing</option> + <option value="overcast">Overcast</option> +</select> + +<p></p></pre> + +<pre class="brush: js">var select = document.querySelector('select'); +var para = document.querySelector('p'); + +select.addEventListener('change', setWeather); + + +function setWeather() { + var choice = select.value; + + switch (choice) { + case 'sunny': + para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.'; + break; + case 'rainy': + para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.'; + break; + case 'snowing': + para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.'; + break; + case 'overcast': + para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.'; + break; + default: + para.textContent = ''; + } +}</pre> + +<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>לתשומת לבכם</strong>: אפשר למצוא את הדוגמא ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">GitHub</a> או להריץ אותה <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">פה</a>.</p> +</div> + +<h2 id="Ternary_operator_-_אופרטור_טרנארי"> Ternary operator - אופרטור טרנארי</h2> + +<p>סינטקס נוסף שנרצה להציג בפניכם לפני שנמשיך הוא <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">אופרטור טרנארי</a>. </p> + +<p>אופרטור טרנארי הוא סינטקס קצר אשר בודק התקיימותו של תנאי מסויים ומבצע פעולה מסויימת אם התנאי מתקיים - <code>true</code>, ופעולה אחרת אם התנאי לא מתקיים - <code>false</code>. אופרטור זה שימושי בסיטואציות מסוימות ויכול לקחת הרבה פחות קוד מאשר <code>if...else</code>, במידה ויש שתי אפשרויות, אשר נבחרות לפי מבחן/תנאי <code>true</code>/<code>false</code>.</p> + +<p>על מנת להפשיט את הנושא, הקוד בצורה רעיונית נראה כך:</p> + +<pre>( condition ) ? run this code : run this code instead</pre> + +<p>נסתכל על דוגמא פשוטה:</p> + +<pre class="brush: js">var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';</pre> + +<p>יש לנו פה משתנה בשם <code>isBirthday</code> - אם הוא <code>true</code>, אנחנו נתן הודעת יומולדת שמח, ואם הוא <code>false</code>, אנחנו נתן ברכה רגילה.</p> + +<h3 id="דוגמא_לאופרטור_טרנארי">דוגמא לאופרטור טרנארי</h3> + +<p>שימו לב כי אנחנו לא חייבים לקבוע ערכים בפרמטרים של האופרטור הטרנארי - אנחנו יכולים גם לתת לו כפרמטרים שורות קוד או פונקציות - כל דבר שנרצה. הדוגמא הבאה מראה לנו אפשרות לבחירת עיצוב לאתר על בסיס אופרטור טרנארי.</p> + +<pre class="brush: html"><label for="theme">Select theme: </label> +<select id="theme"> + <option value="white">White</option> + <option value="black">Black</option> +</select> + +<h1>This is my website</h1></pre> + +<pre class="brush: js">var select = document.querySelector('select'); +var html = document.querySelector('html'); +document.body.style.padding = '10px'; + +function update(bgColor, textColor) { + html.style.backgroundColor = bgColor; + html.style.color = textColor; +} + +select.onchange = function() { + ( select.value === 'black' ) ? update('black','white') : update('white','black'); +} +</pre> + +<p>{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>כאן יש לנו אלמנט {{htmlelement('select')}} המאפשר לנו לבחור את הסגנון (שחור או לבן) ובנוסף כותרת פשוטה של {{htmlelement('h1')}} על מנת להציג את הכותרת של האתר. לאחר מכן יש לנו פונקציה שנקראת <code>()update</code> שמקבלת שני צבעים כארגומנטים. הרקע של האתר נקבע על ידי הצבע הראשון שאנחנו בוחרים, והצבע של הטקסט ניתן כפרמטר השני.</p> + +<p>לבסוף ישלנו ״מאזין אירוע״ - event listener בשם <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a>. מאזין אירוע זה מכיל ״מטפל אירוע״ - event handler מסוג מסוג אופרטור טרנארי. הוא מתחיל עם מבחן התנאי - <code>select.value === 'black'</code>. אם התנאי מחזיר <code>true</code>, אנחנו נריץ את פונקציית <code>true</code> עם האפרמטרי ׳black׳ ו-׳white׳ - כלומר אנחנו נקבל רקע שחור עם כיתוב טקסט לבן. אם זה תוצאת התקיימות התנאי היא <code>false</code> - פונקציית <code>()update</code> תרוץ עם פרמטרים לבן ושחור, כלומר הצבעים יהיו הפוכים.</p> + +<div class="note"> +<p><strong>לתשומת לבכם</strong>: אירועים אלו בעצם פעולות או התרחשויות אשר קורים במערכת, אשר אנחנו יכולים ״להאזין״ להם באמצעות ״מאזין אירוע״ - <strong>event listener</strong> כך שנוכל להגיב בדרך מסויימת, ברגע שהם יתרחשו באמצעות ״מטפל אירוע״ - <strong>event handler</strong>. אנו נגע בהם בהמשך.</p> +</div> + +<div class="note"> +<p><strong>לתשומת לב</strong>: ראו גם <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">דוגמא זו ב- GitHub</a> או בדוגמא <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">כדף אינטרנט</a>. </p> +</div> + +<h2 id="למידה_עצמאית_לוח_שנה_פשוט">למידה עצמאית: לוח שנה פשוט</h2> + +<p>בדוגמא הבאה, אנחנו הולכים לכתוב דוגמא ללוח שנה. בקוד שלנו יש:</p> + +<ul> + <li>אלמנט {{htmlelement("select")}} המאפשר לנו לתת למשתמש לבחור בין חודשים שונים בשנה.</li> + <li>מאזין אירוע מסוג <code>onchange</code> על מנת ״להאזין״ להתרחשות של שינוי ערך בתפריט ה- <code><select></code>.</li> + <li>פונקציה שנקאת <code>()createCalendar</code> יוצרת לנו ללוח שנה ומציגה את החודש הנכון באלמנט {{htmlelement("h1")}}.</li> +</ul> + +<p>אנחנו צריכים משפט תנאי בתוך ה-event handler שלנו - כלומר בתוך פונקציית <code>onchange</code> שלנו, מתחת להערה <code>ADD CONDITIONAL HERE //</code>. משפט תנאי זה אמור:</p> + +<ol> + <li>להסתכל על החודש שנבחר ואוכסן במשתנה <code>choice</code>. זה יהיה הערך של האלמנט <code><select></code> לאחר שהערך שלו השתנה. בדוגמא שלנו זה יהיה January.</li> + <li>להגדיר משתנה בשם <code>days</code> שיהיה שווה למספר הימים בחודש הנבחר. על מנת לעשות זאת אנחנו נצטרך להסתכל על מספר הימים בכל חודש בשנה. אנחנו יכולים להתעלם משנים מעוברות לצרכי דוגמא זו.</li> +</ol> + +<p><u>רמזים</u>:</p> + +<ul> + <li>אנו ממליצים להשתמש באופרטור הלוגי OR (<code>||</code>) על מנת לאחד מספר חודשים ביחד לתנאי אחד. מרביתם הרי חולקים את אותו מספר הימים.</li> + <li>חשבו מהו מספר הימים הנפוץ ביותר בחודשים השונים והשתמשו בו כערך ברירת מחדל.</li> +</ul> + +<p>אם אתם עושים טעות - תמיד ניתן לאתחל את הקוד למצבו הראשוני באמצעות כפתור ה-״Reset״. אם ממש נתקעתם - הסתכלו על הפתרון.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> +<div class="output" style="height: 500px;overflow: auto;"> + <label for="month">Select month: </label> + <select id="month"> + <option value="January">January</option> + <option value="February">February</option> + <option value="March">March</option> + <option value="April">April</option> + <option value="May">May</option> + <option value="June">June</option> + <option value="July">July</option> + <option value="August">August</option> + <option value="September">September</option> + <option value="October">October</option> + <option value="November">November</option> + <option value="December">December</option> + </select> + + <h1></h1> + + <ul></ul> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 400px;width: 95%"> +var select = document.querySelector('select'); +var list = document.querySelector('ul'); +var h1 = document.querySelector('h1'); + +select.onchange = function() { + var choice = select.value; + + // ADD CONDITIONAL HERE + + createCalendar(days, choice); +} + +function createCalendar(days, choice) { + list.innerHTML = ''; + h1.textContent = choice; + for (var i = 1; i <= days; i++) { + var listItem = document.createElement('li'); + listItem.textContent = i; + list.appendChild(listItem); + } +} + +createCalendar(31,'January'); +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css">.output * { + box-sizing: border-box; +} + +.output ul { + padding-left: 0; +} + +.output li { + display: block; + float: left; + width: 25%; + border: 2px solid white; + padding: 5px; + height: 40px; + background-color: #4A2DB6; + color: white; +} + +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">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var code = textarea.value; +var 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(); +}); + +var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; +var 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) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var 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('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="למידה_עצמאית_יותר_אפשרויות_צבעים!">למידה עצמאית: יותר אפשרויות צבעים!</h2> + +<p>בתרגול זה, אנחנו הולכים לקחת את האופרטור הטרנארי שראינו קודם, ולהפוך אותו למשפט <code>switch</code> שיאפשר לנו לבחור מבין אפשרות אחת מבין אפשרויות רבות יותר עבור האתר הפשוט שלנו. הסתכלו על {{htmlelement("select")}} - הפעם אתם תראו שיש לו חמש אופציות ולא שתיים. אתם נדרשים להוסיף משפט <code>switch</code> ישר מתחת להערת <code>ADD SWITCH STATEMENT //</code>אשר יבצע את הפעולות הבאות:</p> + +<ul> + <li>הוא אמור לקבל את המשתנה <code>choice</code> כפרמטר שלו.</li> + <li>עבור כל מקרה, <code>choice</code> אמור להיות שווה לאחד מהערכים היכולים להיבחר - לדוגמא, לבן, שחור, סגול, צהוב או פסיכודלי. שימו לב שערכים אלו הם case sensitive וזה צריך להיות שווה לערכים של האלמנט <code><option></code>.</li> + <li>עבור כל מקרה, הפונקציה <code>()update</code> אמורה לרוץ ולקבל אליה כארגומנטים 2 ערכים של צבעים - הראשון עבור הרקע והשני עבור הטקסט. זכרו שערכי הצבעים אלו מחרוזות, אז צריך לעטוף אותם במרכאות. </li> +</ul> + +<p>אם אתם עושים טעות - תמיד ניתן לאתחל את הקוד למצבו הראשוני באמצעות כפתור ה-״Reset״. אם ממש נתקעתם - הסתכלו על הפתרון.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><h2>Live output</h2> +<div class="output" style="height: 300px;"> + <label for="theme">Select theme: </label> + <select id="theme"> + <option value="white">White</option> + <option value="black">Black</option> + <option value="purple">Purple</option> + <option value="yellow">Yellow</option> + <option value="psychedelic">Psychedelic</option> + </select> + + <h1>This is my website</h1> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 450px;width: 95%"> +var select = document.querySelector('select'); +var html = document.querySelector('.output'); + +select.onchange = function() { + var choice = select.value; + + // ADD SWITCH STATEMENT +} + +function update(bgColor, textColor) { + html.style.backgroundColor = bgColor; + html.style.color = textColor; +}</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</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">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var code = textarea.value; +var 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(); +}); + +var jsSolution = 'var select = document.querySelector(\'select\');\nvar html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n var choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; +var 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) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var 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('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="לסיכום">לסיכום</h2> + +<p>אלו הדברם העיקריים והמרכזיים שאנחנו צריכים לדעת על משפטי תנאי ומבניהם ב-JavaScript. אם לא הבנתם את הרעיונות שעברנו עליהם בתרגולים למעלה, חזרו על השיעור שוב. ואם משהו לא ברור, <a href="/en-US/Learn#Contact_us">צרו עמנו קשר</a> לשם קבלת עזרה.</p> + +<h2 id="ראו_גם">ראו גם</h2> + +<ul> + <li><a href="/he/Learn/JavaScript/First_steps/Math#Comparison_operators">Comparison operators - אופרטורים להשוואה</a></li> + <li><a href="/he/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">משפטי תנאי בהרחבה</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else reference</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional (ternary) operator reference</a></li> +</ul> + +<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "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> |