diff options
Diffstat (limited to 'files/he/learn/javascript/building_blocks')
7 files changed, 0 insertions, 3173 deletions
diff --git a/files/he/learn/javascript/building_blocks/build_your_own_function/index.html b/files/he/learn/javascript/building_blocks/build_your_own_function/index.html deleted file mode 100644 index 47df4e6b3a..0000000000 --- a/files/he/learn/javascript/building_blocks/build_your_own_function/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: בניית פונקציה משלנו -slug: Learn/JavaScript/Building_blocks/Build_your_own_function -translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div> - -<p class="summary">לאחר שסיימנו את רוב התיאוריה במאמר הקודם, מאמר זה נועד להעניק לכם ניסיון מעשי. אנחנו ננסה להעניק לכם כלים לבנות את הפונקציה שלכם. במהלך הדרך, אנחנו נסביר כמה פרטים שימושיים בקשר לשימוש בפונקציות.</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>., <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — פונקציות - חלקי קוד לשימוש חוזר</a>.</td> - </tr> - <tr> - <th scope="row">מטרה:</th> - <td>לספק לכם כלים לבניית פונקציות ולהסביר פרטים שימושיים בהקשר של בניית פונקציות.</td> - </tr> - </tbody> -</table> - -<h2 id="למידה_עצמאית_בניית_פונקציה">למידה עצמאית: בניית פונקציה</h2> - -<p>הפונקציה שנראה לבנות תיקרא <code>displayMessage()</code>. היא תציג הודעה על גבי דף אינטרנט, אשר תחליף את הפונקציה המובנית של הדפדפן <a href="/en-US/docs/Web/API/Window/alert">alert()</a>. ראינו משהו דומה לפני כן,על מנת לרענן את הזכרון, הדפיסו את הקוד הבא בקונסולה</p> - -<pre class="brush: js notranslate">alert('This is a message');</pre> - -<p>הפונקציה <code>alert</code> מקבל פרמטר אחד כארגומנט - המחרוזת ששתוצג על גבי תיבת ההודעה. נא לשנות המחרוזת על מנת לשנות את ההודעהf</p> - -<p>הפונקציה <code>alert</code> היא מוגבלת: אנחנו יכולים לשנות את הטקסט, אבל אנחנו לא ממש יכולים לשנות בקלות את כל היתר כמו צבעים, אייקון, או כל דבר אחר. אנו נבנבה פונקציה שתאפשר לנו את הדברים הללו.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong> דוגמא זו אמורה לעבוד בכל הדפדפדנים המודרניים, אבל העיצוב עלול להיראות קצת מוזר בדפדפנים ישנים. אנחנו ממליצים ללכם להתשמשמ בדפדפן מודרני כגון פיירפוקס, כרום או אופרה לשם תרגול זה.</p> -</div> - -<h2 id="הפונקציה_הבסיסית">הפונקציה הבסיסית</h2> - -<p>על מנת להתחיל, בואו נבנה פונקציה בסיסית</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: הכללים בנושא מתן שמות לפונקציה הם דומים לכללים בנושא <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">מתן שמות למשתנים</a>. יחד עם זאת, בפונקציות, לאחר השם יבואו סוגריים רגילות () ואילו במשתנים לא.</p> -</div> - -<ol> - <li>התחילו בכך שתיצרו עותק מקומי של הקובץ <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a>. בקובץ אתם תיראו שה-body כולל כפתור אחד. בנוסף הוספנו גם כמה כללי css פשוטים על מנת לעצב את תיבת ההודעה שלנו וכן אלממנט {{htmlelement("script")}} ריקה שבה נוסיף את קוד ה-JavaScriipt שלנו.</li> - <li>לאחר מכן, הוסיפו הקוד הבא בתוך האלמנט <code><script></code>: - <pre class="brush: js notranslate">function displayMessage() { - -}</pre> - אנחנו מתחילים עם המילה השמורה <code>function</code>, אשר משמעותה היא שאנחנו מגדירים פונקציה. לאחר מכן, אנחנו רושמים את שם הפונקציה שנרצה לתת לה, ולאחר מכן סוגריים רגילות () ולאחריהן סוגריים מסולסלות {....}. הפרמטרים שנרצה לתת לפונקציה שלנו - הארגומנטים, ייכנסו בתוך הסוגריים הרגילות (ובמידה שיש לנו כמה ארגומנטים, נפריד ביניהם באמצעות פסיק , ורווח.) את הקוד שנרצה שהפונקציה תריץ בכל פעם שנקרא לה אנחנו נשים בתוך הסוגריים המסולסות {....}.</li> - <li>לבסוף, הוסיפו את התקוד הבא בתוך הסוגריים המסולסלות - <pre class="brush: js notranslate">var html = document.querySelector('html'); - -var panel = document.createElement('div'); -panel.setAttribute('class', 'msgBox'); -html.appendChild(panel); - -var msg = document.createElement('p'); -msg.textContent = 'This is a message box'; -panel.appendChild(msg); - -var closeBtn = document.createElement('button'); -closeBtn.textContent = 'x'; -panel.appendChild(closeBtn); - -closeBtn.onclick = function() { - panel.parentNode.removeChild(panel); -}</pre> - </li> -</ol> - -<p>נעבור על הקוד שהוספנו שורה אחר שורה</p> - -<p>השורה הראשונה משתמשת בפונקציה של DOM API הנקראת {{domxref("document.querySelector()")}}, על מנת לבחור אלמנט מסוג {{htmlelement("html")}} ולאחסן הפנייה אליו בתוך משתנה שנקרא <code>html</code>, כדי שנוכל לבצע איתו דברים מאוחר יותר:</p> - -<pre class="brush: js notranslate">var html = document.querySelector('html');</pre> - -<p>החלק הבא בקוד שלנו משתמש בפונקציה נוספת של DOM API הנקראת {{domxref("document.createElement()")}} על מנת ליצור אלמנט מסוג {{htmlelement("div")}} ואנו מאחסנים הפניה אליו בתוך המשתנה שנקרא <code>panel</code>. האלמנט הזה יהיה הקונטיינר החיצוני של תיבת ההודעה שלנו.</p> - -<p>לאחר מכן אנחנו משתמשים בפונקציה נוספת של DOM API שנקראת <code>class</code> על מנת לקבוע {{domxref("Element.setAttribute()")}} למשתנה <code>msgBox</code> שלנו עם הערך <code>msgBox</code>. זה אמור להקל עלינו לעצב את האלמנט - אם תסתכלו ב-CSS שבדךף, אתם תראו שאנחנו משתשמים בסלקטור של CSS <code>.msgBox</code> על מנת לעצב את תיבת ההודעה והתוכן שלה.</p> - -<p>לבסוף - אנחנו קוראים לפונקציית DOM נוספת שנקראת {{domxref("Node.appendChild()")}} על גבי המשתנה <code>html</code> , אשר משרשרת את האלמנט שהיא מקבלת כארגומנט לאלמנט שהיא הופעלה עליו. כאן אנחנו מציינים שאנחנו רוצים שהאלמנט <code><div></code> יהיה אלמנט ילד של האלמנט <code><html></code>. אחנו צריכים להוסיף פונקציה זו בכל פעם שאנחנו משתמשים בפונקציה {{domxref("document.createElement()")}}, מכיוון שהאלמנט שיצרנו לא יופיע בעצמו ולא יתחבר בעצמו לאלמנט אחר - אנחנו צריכים לציין איפה אנחנו רוצים לשים אותו ולמי הוא יהיה קשור.</p> - -<pre class="brush: js notranslate">var panel = document.createElement('div'); -panel.setAttribute('class', 'msgBox'); -html.appendChild(panel);</pre> - -<p>ב-2 החלקים הבאים אנחנו עושים שימוש באותן פונקציות <code>createElement()</code> ן- <code>appendChild()</code> שהשתמשנו בהן על מנת ליצור שני אלמנטים חדשים: {{htmlelement("p")}} ו- {{htmlelement("button")}} — ומכניסים אותם בתוך הדף כאלמנטים ילדים של <code><div></code> panel. לאחר מכן אנחנו משתמשים בפרופ׳ {{domxref("Node.textContent")}} - אשר מייצג בעצם את תוכן הטקסט של אלמנט - על מנת להכניס הודעה בתוך הפסקה וכן אנחנו מוסיפים את התו 'x' בתוך הכפתור. הכפתור הזה צריך להיות לחוץ/מופעל כשהמשתמש רוצה לסגור את תיבת ההודעה.</p> - -<pre class="brush: js notranslate">var msg = document.createElement('p'); -msg.textContent = 'This is a message box'; -panel.appendChild(msg); - -var closeBtn = document.createElement('button'); -closeBtn.textContent = 'x'; -panel.appendChild(closeBtn);</pre> - -<p>לבסוף, אנחנו משתמשים במאזין אירוע ומטפל אירוע - {{domxref("GlobalEventHandlers.onclick")}} - על מנת להוסיף האזנה להתרחשות אירוע של לחיצה (במקרה הזה לחיצה על ) closeBtn וטיפול באותו אירוע על ידי הפונקציה האנונימית המכילה קוד שמוחק את כל ה-panel מהדף - כלומר מוחק את תיבת ההודעה.</p> - -<p>בקצרה, מאזין האירוע <code>onclick</code> הוא פרופ׳ שזמין עבור כפתור (ובעצם זמין עבור כל אלמנט בדף) שיכול להיות מוגדר לפונקציה שתבצע קוד מסויים כאשר הכפתור/האלמנט נלחץ. אנחנו נלמד על כך לעומק במאמר שלנו בנושא אירועים. שימו לב שוב שמטפל האירוע של מאזין האירוע <code>onclick</code> שווה לפונקציה אנונימית, אשר מכילה קוד שירוץ כאשר הכפתור נלחץ. שורת הקוד שבתוך הפונקציה האנונימית משתמש בפונקציה של ה- DOM API בשם {{domxref("Node.removeChild()")}} על מנת להסיר אלמנט בן של אלמנט - במקרה זה של אלמנט <code><div></code>.</p> - -<pre class="brush: js notranslate">closeBtn.onclick = function() { - panel.parentNode.removeChild(panel); -}</pre> - -<p>בעיקרון - כל הקוד הזה פשוט יוצר בלוק של HTML שנראה כך ומכניס את זה לתוך הדף:</p> - -<pre class="brush: html notranslate"><div class="msgBox"> - <p>This is a message box</p> - <button>x</button> -</div></pre> - -<p>זה היה הרבה קוד לעבור עליו - אל תדאגו אם אתם לא זוכרים במדויק איך הוא עובד כרגע. הרעיון המרכזי שאנחנו רוצים לשים עליו דגש כאן הוא הפונקציה, המבנה שלה והשימוש שלה.</p> - -<h2 id="קריאה_לפונקציההפעלת_הפונקציה">קריאה לפונקציה/הפעלת הפונקציה</h2> - -<p>כעת יש לנו את הגדרת הפונקציה בתוך האלמנט 555555, אבל היא לא תבצע כלום אם לא נקרא לה.</p> - -<ol> - <li>נסו לכלול את הקוד הבא מחת לפונקציה על מנת לקרוא לה: - <pre class="brush: js notranslate">displayMessage();</pre> - שורה זו בעצם קוראת פונקציה (Invoking the function) וגורמת לה לרוץ מיד. כאשר תשמרו את הקוד ותעלו מחדש את הדף בדפדפן, אתם תראו שתיבת ההודעה הופיע מיד, פעם אחת. אחרי הכל, קראנו לפונקציה רק פעם אחת.</li> - <li> - <p>כעת, פתחו את הקונסולה והדפיסו את השורה למעלה שוב, ואתם תראו את ההודעה שוב. כלומר בנינו פונקציה שאנחנו יכולים להשתמש בה שוב ושוב.</p> - - <p>רוב הסיכויים שנרצה שתיבת ההודעה תופיע כתגובה לאירועים מסויימים של המערכת או של המשתמש. ביישומים אמיתיים, תיבת הודעה שכזו תיקרא בתגובה למידע חדש שזמין או לשגיאה שנוצרה, או כאשר המשתמש מוחק את הפרופיל שלו (״האם אתה בטוח רוצה למחוק את הפרופיל? וכד׳).</p> - - <p>בתרגול זה, אנחנו נגרום לתיבת ההודעה להופיע כאשר המשתמש לוחץ על כפתור.</p> - </li> - <li>מחקו את השורה שהוספתם.</li> - <li>כעת, אנחנו נבחר את הכפתור ונאחסן הפניה אליו בתוך משתנה. הוסיפו את הקוד הבא לקוד שלהם, מעל הגדרת הפונקציה : - <pre class="brush: js notranslate">var btn = document.querySelector('button');</pre> - </li> - <li>לבסו, הוסיפו את הקוד הבא, מתחת לקוד שהוספתם בסעיף הקודם: - <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre> - בדרך דומה ל<code> ...closeBtn.onclick</code> בתוך הפונקציה, כאן אנחנו קוראים קוד מסויים בתגובה כך שהכפתור נלחץ. אבל במקרה הזה במקום לקרוא לפונקציה אנונימית המכילה את אותו קוד, אנחנו קוראים לפונקציה שלנו בשמה באופן מפורש.</li> - <li>נסו לשמור ולרענן את הדף - אתם אמורים לראות את תיבת ההודעה כאשר הכפתור נלחץ.</li> -</ol> - -<p>אתם בטח תוהים מדוע לא כללנו סוגריים () אחרי שם הפונקציה. הסיבה היא שאנחנו לא רוצים לקרוא לפונקציה ישר - אלא רק אחרי שהכפתור נלחץ. אם תשנו את השורה הבא כך:</p> - -<pre class="brush: js notranslate">btn.onclick = displayMessage();</pre> - -<p>ותרעננו את הדף, אתם תיראו שהתיבת ההודעה הופיע מבלי שלחצנו על הכפתור. הסוגריים () בהקשר זה לפעמים נקראים "function invocation operator". אנחנו משתמשים בהם כאשר אנחנו רוצים להריץ את הפונקציה באופן מיידי בתוך הסקופ הנוכחי. באותו דרך, הקוד שבתוך הפונקציה האנונימית לא ירוץ ישר, שכן הוא נמצא בתוך הסקופ של הפונקציה בלבד - שכאמור תופעל רק כאשר כפתור יילחץ.</p> - -<p>אם ניסיתם את התרגול הקודם של הוספת (), אנא וודאו שמחקתם אותם לפני שאתם ממשיכים</p> - -<h2 id="שדרוג_הפונקציה_שלנו_באמצעות_פרמטריםארגומנטים">שדרוג הפונקציה שלנו באמצעות פרמטרים/ארגומנטים</h2> - -<p>כרגע, הפונקציה שלנו לא ממש שימושית - אנחנו לא רוצים סתם להציג הודעה זהה בכל פעם. ננסה לשדרג אוהת על ידי כך שנוסיף מספר פרמטרים, אשר יאפשרו לנו לקרוא לה, אך עם אפשרויות שונות בכל קריאה.</p> - -<ol> - <li>תחילה, עדכנו את השורה הראשונה של הפונקציה: - <pre class="brush: js notranslate">function displayMessage() {</pre> - - <div>לקוד הבא:</div> - - <pre class="brush: js notranslate">function displayMessage(msgText, msgType) {</pre> - כעת, כאשר אנחנו קוראים לפונקציה, אנחנו מספקים לה שני ערכים של משתנים בתוך הסוגריים () על מנת לציין את תוכן ההודעה שתוצג ואת סוג ההודעה.</li> - <li>על מנת לעשות שימוש בפרמטר הראשון, עדכנו את הקוד שבתוך הפונקציה : - <pre class="brush: js notranslate">msg.textContent = 'This is a message box';</pre> - - <div>לקוד הבא</div> - - <pre class="brush: js notranslate">msg.textContent = msgText;</pre> - </li> - <li>לבסוף, אנחנו נרצה לעדכן כעת את הפונקציה כך שתכלול הודעה מעודכנת . שנה את השורה הבאה: - <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre> - - <div>לקוד הבא :</div> - - <pre class="brush: js notranslate">btn.onclick = function() { - displayMessage('Woo, this is a different message!'); -};</pre> - If we want to specify parameters inside parentheses for the function we are calling, then we can't call it directly — we need to put it inside an anonymous function so that it isn't in the immediate scope and therefore isn't called immediately. Now it will not be called until the button is clicked.</li> - <li>עכשיו טען מחדש ונסה שוב את הקוד ותראה שהוא עדיין עובד כמו מקודם ,רק שעכשיו גם התווסף אפשרות לשנות את ההודעה שבתוך הפרמטר כדי להציג הודעות שונות בתיבה! </li> -</ol> - -<h3 id="פרמטר_מורכב_יותר">פרמטר מורכב יותר</h3> - -<p>הלאה לפרמטר הבא. זו תכלול עבודה מעט יותר - אנו מתכוונים להגדיר אותה כך שלפי הפרמטר msgType, הפונקציה תציג אייקון אחר וצבע רקע שונה.</p> - -<ol> - <li>First of all, download the icons needed for this exercise (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> and <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) from GitHub. Save them in a new folder called <code>icons</code> in the same location as your HTML file. - - <div class="note"><strong>Note</strong>: The warning and chat icons were originally found on <a href="https://www.iconfinder.com/">iconfinder.com</a>, and designed by <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a> — Thanks! (The actual icon pages were since moved or removed.)</div> - </li> - <li>Next, find the CSS inside your HTML file. We'll make a few changes to make way for the icons. First, update the <code>.msgBox</code> width from: - <pre class="brush: css notranslate">width: 200px;</pre> - - <div>ל</div> - - <pre class="brush: css notranslate">width: 242px;</pre> - </li> - <li>Next, add the following lines inside the <code>.msgBox p { ... }</code> rule: - <pre class="brush: css notranslate">padding-left: 82px; -background-position: 25px center; -background-repeat: no-repeat;</pre> - </li> - <li>Now we need to add code to our <code>displayMessage()</code> function to handle displaying the icons. Add the following block just above the closing curly brace (<code>}</code>) of your function: - <pre class="brush: js notranslate">if (msgType === 'warning') { - msg.style.backgroundImage = 'url(icons/warning.png)'; - panel.style.backgroundColor = 'red'; -} else if (msgType === 'chat') { - msg.style.backgroundImage = 'url(icons/chat.png)'; - panel.style.backgroundColor = 'aqua'; -} else { - msg.style.paddingLeft = '20px'; -}</pre> - Here, if the <code>msgType</code> parameter is set as <code>'warning'</code>, the warning icon is displayed and the panel's background color is set to red. If it is set to <code>'chat'</code>, the chat icon is displayed and the panel's background color is set to aqua blue. If the <code>msgType</code> parameter is not set at all (or to something different), then the <code>else { ... }</code> part of the code comes into play, and the paragraph is simply given default padding and no icon, with no background panel color set either. This provides a default state if no <code>msgType</code> parameter is provided, meaning that it is an optional parameter!</li> - <li>Let's test out our updated function, try updating the <code>displayMessage()</code> call from this: - <pre class="brush: js notranslate">displayMessage('Woo, this is a different message!');</pre> - - <div>to one of these:</div> - - <pre class="brush: js notranslate">displayMessage('Your inbox is almost full — delete some mails', 'warning'); -displayMessage('Brian: Hi there, how are you today?','chat');</pre> - You can see how useful our (now not so) little function is becoming.</li> -</ol> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אם אתם נתקלים בבעיות או הדוגמא אינה עובדת לכם, אנא בדקו את הקוד שלכם אל מול <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">הקוד הסופי שלנו ב- GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">או בדף האינטרנט</a> או שאלו אותנו</p> -</div> - -<h2 id="לסיכום">לסיכום</h2> - -<p>במאמר זה ניסינו להסביר לכם את התהליך של בניית פונקציה בעצמנו, כאשר עם עט עבודה נוספת, יכול להפוך לפרוייקט אמיתי. במאמר הבא אנחנו נסיים לעבור על נושא פונקציות ונסביר עקרון חשוב נוסף בנושא זה - ערכי החזרה — return values.</p> - -<ul> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "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> diff --git a/files/he/learn/javascript/building_blocks/conditionals/index.html b/files/he/learn/javascript/building_blocks/conditionals/index.html deleted file mode 100644 index e76c9c16cb..0000000000 --- a/files/he/learn/javascript/building_blocks/conditionals/index.html +++ /dev/null @@ -1,790 +0,0 @@ ---- -title: משפטי תנאי - קבלת החלטות בקוד שלנו -slug: Learn/JavaScript/Building_blocks/conditionals -tags: - - Conditionals - - Switch - - else if - - if ... else - - ternary - - אופרטור טרנארי - - משפטי אם...אחר - - משפטי תנאי - - תנאים -translation_of: Learn/JavaScript/Building_blocks/conditionals -original_slug: Learn/JavaScript/Building_blocks/תנאים ---- -<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> diff --git a/files/he/learn/javascript/building_blocks/events/index.html b/files/he/learn/javascript/building_blocks/events/index.html deleted file mode 100644 index 9fc4363939..0000000000 --- a/files/he/learn/javascript/building_blocks/events/index.html +++ /dev/null @@ -1,588 +0,0 @@ ---- -title: היכרות ראשונית עם אירועים - Events -slug: Learn/JavaScript/Building_blocks/Events -translation_of: Learn/JavaScript/Building_blocks/Events ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> - -<p class="summary">אירועים (Evants) אלו פעולות או התרחשויות אשר קורות במערכת שאנחנו מתכנתים בה, והמערכת אומרת לנו בדרך מסויימת על ההתרחשות שלהם, כך שאנחנו יכולים להגיב להתרחשות של האירוע המסויים בדרך מסויימת שנרצה. לדוגמא אם משתמש לחץ על כפתור באתר, אולי נרצה בתגובה לטפל באירוע הלחיצה הזה על ידי הצגת הודעה כלשהי. במאמר זה אנחנו נדון בעקרונות החשובים של events ונסתכל כיצד הם עובדים בדפדפדנים. אנחנו לא נרחיב יותר מדי, אלא רק מה שתצטרכו לדעת בשלב זה.</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>להבין את התיאוריה הבסיסית של אירועים וכיצד הם עובדים בדפדפנים וכיצד אירועים יכולים להיות שונים בסביבות פיתוח שונות.</td> - </tr> - </tbody> -</table> - -<h2 id="מה_הם_אירועים">מה הם אירועים? </h2> - -<p>כפי שרשמנו למעלה, אירועים, <strong>events,</strong> הם פעולות או התרחשויות שקורות במערכת שאנחחנו מתכנתים עליה - המערכת שולחת סימן מסויים שהאירוע מתרחש וגם מספקת לנו מכניזם מסויים שעל פיו כלומר, קוד מסויים ירוץ בתגובה להתרחשות אירוע מסויים. כמו בדוגמא עם לחיצת הכפתור שפירטנו למעלה. כאשר האירוע של ״לחיצת כפתור״ התרחש, הדפדפן שלח לנו סימן מסויים שהתרחש אירוע וטיפלנו בו באמצעות הקפצת חלונית.</p> - -<p>במקרה שלנו, אירועים מתרחשים בתוך חלון הדפדפן, ונוטים להיות מחוברים לפריט מסויים שבו הם התרחשו או עליו הם קרו - זה יכול להית אלמנט אחד, מספר אלמנטים, אירוע של טעינה דף HTML בלשונית מסויימת או טעינתו של חלון הדפדפן כולו.</p> - -<p>יש הרבה סוגים של אירועים שיכולים להתרחש. הנה דוגמא קטנה שלהם:</p> - -<ul> - <li>המשתמש לחץ על אלמנט מסויים או עבר עם העכבר על אלמנט מסויים.</li> - <li>המשתמש לחץ על כפתור במקלדת.</li> - <li>המשתמש הגדיל או הקטין את חלון הדפדפן.</li> - <li>דף אינטרנט סיים להיטען במלואו.</li> - <li>טופס נשלח.</li> - <li>וידאו החל להתנגן או הושהה או סיים לנגן.</li> - <li>התרחשה שגיאה.</li> -</ul> - -<p>תוכלו לראות בדף MDN בנושא <a href="/en-US/docs/Web/Events">Event reference</a> שיש <strong>לא מעט</strong> סוגי אירועים שניתן לטפל בהם - כלומר להגיב להתרחשותם.</p> - -<p>לכל אירוע זמין יש ״<strong>מטפל אירוע</strong>״ - <strong>event handler</strong>, שזה בעצם בלוק של קוד שבדרך כלל זו פונקציה שאנחנו נגדיר בעצמנו ושירוצו כאשר האירוע החל להתרחש. שימו לב שלפעמים <strong>event handlers</strong> נקראים <strong>event listeners</strong> - ״<strong>מאזיני אירוע</strong>״ בעיקרון, הם כמעט אותו דבר מבחינתנו כרגע, אבל יש הבדלים ביניהם, הם עובדים יחד: מאזין אירוע - <strong>event listeners</strong> - מאזין להתרחשות האירוע, ואילו מטפל האירוע - <strong>event handlers</strong>, מטפל באותו אירוע שהתרחש - (הקוד שמורץ בתגובה להתרחשות של אותו אירוע).</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: חשוב לדעת כי אירועי web אינם חלק מהבסיס של JavaScript - הם מוגדרים כחלק מה-API של JavaScript המובנים בתוך הדפדפן.</p> -</div> - -<h3 id="דוגמא">דוגמא</h3> - -<p>נסתכל על דוגמא פשוטה על מנת להסביר את הנושא. ראינו כבר אירועים ו-event handlers בהרבה מהדוגמאות במהלך הקורס אבל בואו נרענן את הזיכרון.</p> - -<p>הסתכלו בדוגמא הבאה, יש לנו אלמנט {{htmlelement("button")}} אחד, אשר כאשר הוא נלחץ, הוא שנה את הצבע של הרקע לצבע אקראי:</p> - -<pre class="brush: html"><button>Change color</button></pre> - -<div class="hidden"> -<pre class="brush: css">button { margin: 10px };</pre> -</div> - -<p>קוד ה-JavaScript שלנו נראה כך:</p> - -<pre class="brush: js">var btn = document.querySelector('button'); - -function random(number) { - return Math.floor(Math.random()*(number+1)); -} - -btn.onclick = function() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -}</pre> - -<p>בדוגמא למעלה, אחסנו הפניה לאלמנט <code><button></code> בתוך משתנה שנקרא <code>btn</code>, באמצעות פונקציית {{domxref("Document.querySelector()")}}. בנוסף ,הגדרנו פונקציה שמחזירה לנו מספר אקראי. החלק השלישי של הקוד הוא מטפל האירוע - event handler. המשתנה <code>btn</code> מצביע על אלמנט <code><button></code> ולסוג הזה של האובייקט יש מספר מסוים של אירועים שיכולים להתרחש עליו, ולכן יש מספר מטפלי אירוע זמינים עבורו.</p> - -<p>בדוגמא זו אנחנו מקשיבים בעצם לאירוע/התרחשות של לחיצת עכבר באמצעות השמת ערך לתכונה (property) של event handler השווה לפונקציה אנונימית. פונקציה אנונימית זו מכילה קוד שמייצר צבע רנדומלי בפורמט rgb וקובעת את ה-<code>background-color</code> לצבע זה.</p> - -<p>הקוד שבפונקציה האנונימית ירוץ בכל פעם שאירוע הלחיצה על האלמנט <code><button></code> יתרחש, כלומר בכל פעם שהמשתמש לחץ על האלמנט הזה.</p> - -<p>התוצאה של הדוגמא תהא כך:</p> - -<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="זה_לא_רק_בדפי_האינטרנט">זה לא רק בדפי האינטרנט</h3> - -<p>דבר נוסף שנרצה להזכיר בנקודה זו הוא שאירועים הם לא מיוחדים ל-JavaScript - רוב שפות התכנות מכילות מודל כלשהו של אירועים, והדרך שבה מודל זה עובד בהם, יהיה לרוב שונה מהדרך שבה מודל זה עובד ב-JavaScript. האמת, מודל האירועים ב-JavaScript עבור דפי אינטרנט, שונה ממודל האירועים עבור JavaScript כאשר היא בסביבות אחרות.</p> - -<p>לדוגמא, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> היא סביבה המאפשרת לנו הרצה ושימוש ב-JavaScript בצד השרת. <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">מודל האירועים של Node.js </a>מתבסס על מאזינים (listeners) אשר מאזינים לאירועים ועל פולטים (emitters) אשר פולטים אירועים בתדירות מסויימת - זה לא נשמע שונה, אבל הקוד הוא שונה, ושם מתבצע שימוש בפונקציות כמו <code>()on</code> על מנת לרשום מאזין אירוע ו-<code>()once</code> על מנת לרשום מאזין אירוע שיאזין באופן חד פעמי ויתבטל לאחר שהורץ פעם אחת. דוגמא לכך ניתן לראות ב-<a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a>.</p> - -<p>דוגמא נוספת למודל אירועים שונים אנחנו יכולים לראות כאשר משתמשים ב-JavaScript על מנת לבנות תוספים לדפדפנים (מעין שיפורים לדפדפנים) - באמצעות טכנולוגיה שנקראת <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. מודל האירועים שם הוא דומה למודל האירועים של ה-Web, אבל שונה מעט - מאזיני האירועים הם camel-cased - כלומר, <code>on<strong>M</strong>essage</code> ולא <code>on<strong>m</strong>essage</code>, והם צריכים להיות ביחד עם פונקצית <code>addListener</code>. לדוגמאות ראו <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage page</a>.</p> - -<p>אינכם צריכים להבין עכשיו שום דבר על הסביבות הללו, רק רצינו להסביר לכם שאירועים ומודל האירועים יכול להיות בסביבות פיתוח שונות.</p> - -<h2 id="דרכים_לשימוש_ב-web_events">דרכים לשימוש ב-web events</h2> - -<p>יש מספר דרכים שונות שבהם אנחנו יכולים להוסיף מאזין אירוע -event listener לדפי הרשת על מנת שהוא יריץ את ה-event handler כאשר יתרחש האירוע הרלוונטי (event registration). בחלק זה, אנחנו נסקור את הדרכים השונות ונדון באילו מהן אנו צריכים להשתמש.</p> - -<h3 id="דרך_I_הוספת_תכונה_של_מטפל_אירוע_-_Event_handler_properties">דרך I: הוספת תכונה של מטפל אירוע - Event handler properties</h3> - -<p>דרך אחת היא בעצם לתת לאלמנט מסויים תכונה של מאזין אירוע והערך שלה יהיה מטפל אירוע. אנו נקרא לה ״<strong>תכונת מטפל אירוע</strong>״. נתקלנו בזה במהלך הקורס לא מעט. אם נחזור לדוגמא למעלה:</p> - -<pre class="brush: js">var btn = document.querySelector('button'); - -btn.onclick = function() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -}</pre> - -<p>התכונה <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> היא תכונת מטפל האירוע (מאזין האירוע) הרלוונטית כרגע לדוגמא זו. היא תכונה בדיוק כמו שיש ל-<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">btn</span></font> תכונות נוספות שזמינו תעבורו כמו <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, או <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>, אבל היא תכונה מסוג מיוחד - כאשר אנחנו משימים בה ערך ששווה לקוד מסויים, הקוד הזה ירוץ בכל פעם שהאירוע יתרחש על הכפתור (או על האלמנט אשר נתנו לו את התכונה הזו).</p> - -<p>אנחנו גם יכולים לתת למטפל אירוע שכזה שיהיה שווה לשם של פונקציה מסויימת, כמו שראינו במאמר <a href="he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a>. הקוד הבא יעבוד בצורה מצויינת:</p> - -<pre class="brush: js">var btn = document.querySelector('button'); - -function bgChange() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -} - -btn.onclick = bgChange;</pre> - -<p>יש הרבה סוגים של תכונות מטפלות אירוע שזמינות. ננסה כמה מהם:</p> - -<p>ראשית, שמרו לכם עותק מקומי של <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, ופיתחו אותו בדפדפן. זהו עותק של הדוגמא הפשוטה של בחירת הצבע שראינו בעבר. עכשיו שנו את ה- <code>btn.onclick</code> לערכים הבאים, כל אחד בתור, וראו מה קורה :</p> - -<ul> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> ו- <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — הצבע ישתנה כאשר הפוקוס יהיה על הכפתור וכאשר הוא יוצא ממנו - באמצעות מקש <kbd>tab</kbd>. אלו משמשים אותנו להצגת מידע כיצד למלא שדות בטופס שלנו או על מנת להציג הודעת שגיאה כאשר הכניסו בשדה ערך שגוי.</li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — כאן הצבע ישתנה רק כאשר נלחץ עליו פעמיים - דאבל קליק.</li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — כאן הצבע ישתנה כאשר המשתמש לחץ על כפתור במקלדת אשר יכול להפיק תו ושחרר אותו. <code>keypress</code> הוסר מהסטנדרטים המקובלים ולא מומלץ להשתמש באירוע מסוג זה מכיוון שהתמיכה בו נעלמת. <code>keydown</code> and <code>keyup</code> לא מדובר באירוע של לחיצה על לחצני החצים - אלא מדובר באירוע שמתרחש ברגע שהכפתור נלחץ ואירוע אחר שמתרחש ברגע שהפסיק ללחוץ על הכפתור. שימו לב שזה לא עובד אם נרשום את המטפל אירוע הזה על הכפתור צמו - אנחנו צריכים לרשום אותו על אובייקט <a href="/en-US/docs/Web/API/Window">window</a> שמייצג את החלון הדפדפן כולו. </li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> ו- <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — כאן הצבע ישתנה כאשר סמן העכבר עובר מעל הכפתור וכאשר הוא יוצא ממנו, בהתאמה.</li> -</ul> - -<p>ישנם אירועים שהם מאד כלליים והם זמינים כמעט בכל מקום או עבור כל אלמנט - לדוגמא - אפשר להאזין לאירוע <code>onclick</code> כמעט על כל אלמנט, בעוד יש כאלו שהם יותר ספציפיים ושימושיים בסיטואציות מסויימת. לדוגמא, הגיוני לנו ש-<a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> יהיה זמין רק לאלמנטים מסוג מסויים כמו {{htmlelement("video")}}.</p> - -<h3 id="דרך_II_לידיעה_בלבד_-_לא_להשתמש_בהם_-_Inline_event_handlers">דרך II: לידיעה בלבד - לא להשתמש בהם - Inline event handlers</h3> - -<p>יכול להיות שראיתם קוד שנראה כך:</p> - -<pre class="brush: html"><button onclick="bgChange()">Press me</button> -</pre> - -<pre class="brush: js">function bgChange() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -}</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אתם יכולים לראות את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">קוד המקור</a> לדוגמא זו ב- GitHub או <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">בדף אינטרנט</a>.</p> -</div> - -<p>בעבר, הדרך לרשום (register) מטפלי אירוע הייתה באמצעות <strong>event handler HTML attributes</strong> הידועים גם כ- <strong>inline event handlers,</strong> כמו שרשום בדוגמא למעלה. הערך של אותו attribute הוא ממש קוד JavaScript שאנחנו רוצים שירוץ כאשר האירוע מתרחש. הדוגמא למעלה מפעילה פונקציה שמוגדרת בתוך האלמנט {{htmlelement("script")}} אבל באותה הדרך אנחנו יכולים להכניס פונקציה שלמה לתוך אותו attribute:</p> - -<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> - -<p>אל תשתמשו בדרך שכזו על מנת לטפל באירוע, זה נחשב כ- bad practice (פרקטיקה שאינה מקובלת בתעשייה). זה אולי נשמע יותר פשוט, אבל מהר מאוד זה הופך למשהו שלא ניתן לעקוב אחריו ולא יעיל.</p> - -<p>בנוסף, זה לא רעיון טוב לערבב בין HTML לבין JavaScript מאחר שזה נהיה קשה לעיבוד - היצמדו לכך שכל ה-JavaScript נמצא במקום אחד.</p> - -<p>אפילו כאשר מדובר בקובץ אחד, inline event handlers הם לא רעיון טוב. כאשר יש כפתור אחד זה עוד סביר, אבל מה אם היו לנו 100 כפתורים? היינו צריכים להוסיף 100 attributes לתוך הקובץ. מהר מאוד זה הופך לסיוט מבחינת תחזוקה של הקוד. עם JavaScript, אנחנו יכולים בקלות להוסיף מטפל אירוע לכל הכפתורים, לא משנה כמה יש כאלו, באמצעות קוד כזה:</p> - -<pre class="brush: js">var buttons = document.querySelectorAll('button'); - -for (var i = 0; i < buttons.length; i++) { - buttons[i].onclick = bgChange; -}</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>: הפרדה בין הקוד שלנו לבין התוכן גם הופך את האתר שלנו ליותר ידידותי למנועי החיפוש.</p> -</div> - -<h3 id="דרך_addEventListener()_III_ו-_()removeEventListener">דרך addEventListener() : III ו- ()removeEventListener</h3> - -<p>הסוג החדש ביותר של מנגנון אירועים הוגדר ב- <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> של ארגון W3C. מסמך זה הגדיר דרך טובה יותר לנהל אירועים, בין היתר באמצעות אובייקט מיוחד בשם <code>EvantTarget</code> אשר נוצר בדפדפן כאשר אירוע מתרחש. לאובייקט זה יש שלוש מתודות ואחת מהן היא <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code>. מתודה זו דומה לדרך הראשונה של event handler properties, אבל הסינטקס שונה. אנחנו יכולים לכתוב את הדוגמא שלנו עם הצבעים האקראיים בצורה הזו:</p> - -<pre class="brush: js">var btn = document.querySelector('button'); - -function bgChange() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -} - -btn.addEventListener('click', bgChange);</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>:תוכלו למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">קוד המקור </a> של דוגמא זו ב- GitHub או ראו כ- <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">דף אינטרנט</a>).</p> -</div> - -<p>בתוך מתודת <code>()addEventListener</code>, אנחנו מציינים שני פרמטרים - אחד בעבור אותו האירוע, אותו ה-event אשר אנחנו רוצים שיאזינו והפרמטר השני זה פונקציה של הקוד שאנחנו רוצים שירוץ כמטפל באותו אירוע. שימו לב שזה בסדר גמור לשים את כל הקוד שיטפל באירוע כפונקציה אנונימית, בשונה מהדוגמא למעלה:</p> - -<pre class="brush: js">btn.addEventListener('click', function() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -});</pre> - -<p>לשיטה הזו יש יתרונות ברורים על השיטות הישנות שדנו בהם למעלה. ראשית, יש מתודה נוספת בשם <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">()removeEventListener</a></code> אשר מאפשרת לנו להסיר מאזיני אירוע. לצורך העניין, הקוד הבא יסיר את מאזין האירוע שקבענו למעלה:</p> - -<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> - -<p>זה אמנם לא כזה משמעותי עבור תוכניות קטנות או פשוטות, אבל בעבור תוכניות גדולות או מורכבות, זה יכול להגביר את היעילות ומאפשר לנקות מטפלי אירוע שאינם בשימוש עוד. בנוסף, זה מאפשר לנו שלאותו אלמנט - לאותו הכפתור - יהיו מספר מטפלי אירועים אשר יפעלו בצורה אחרת באירועים שונים - כל מה שאנחנו צריכים לעשות זה להוסיף/להסיר מטפלי אירוע בהתאם.</p> - -<p>בנוסף, אנחנו גם יכולים לרשום מספר מטפלי אירוע לאותו אירוע - הקוד הבא לדוגמא לא יכול להחיל שני מטפלי אירוע:</p> - -<pre class="brush: js">myElement.onclick = functionA; -myElement.onclick = functionB;</pre> - -<p>זאת מכיוון שהשורה השנייה דורסת את הערך שנקבע ל-<code>onclick</code> של השורה הראשנה. על מנת להוסיף מטפל אירוע נוסף מבלי לדרוס את מטפל את האירוע הקיים, אנחנו יכולים לעשות משהו כזה:</p> - -<pre class="brush: js">myElement.addEventListener('click', functionA); -myElement.addEventListener('click', functionB);</pre> - -<p>במקרה זה, שתי הפונקציות ירוצו כאשר ילחצו על האלמנט.</p> - -<p>כמו כן, יש מספר אפשרויות משמעותיות ותכונות זמינות עבור מנגנון ירועים בדרך הזו. אנחנו לא נרחיב עליהם, אך אם תרצו להרחיב את ידיעתכם בנושא, היכנסו לדפי ההסבר של MDN בנושא <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code> ובנושא <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">()removeEventListener</a></code>.</p> - -<h3 id="באיזה_מנגנון_אירועים_להשתמש">באיזה מנגנון אירועים להשתמש?</h3> - -<p>מתוך שלושת המנגנונים הללו, בוודאות <u><strong>אל</strong></u> תשתמשו במנגנון HTML event handler attributes - זה מנגנון ישן, שלא נמצא כבר בשימוש ונחשב כ- bad practice להשתמש בו.</p> - -<p>השניים האחרים הם יחסית די חלופיים כאשר מדובר בתוכנית פשוטה או כאשר מדובר בשימוש פשוט שנרצה לעשות באירועים:</p> - -<ul> - <li>ל- <strong>Event handler properties</strong> יש פחות אפשרויות ופחות כוח אך תמיכת הדפדפנים רחבה יותר (כולל Internet Explorer 8).</li> - <li>DOM Level 2 Events - כגון <code>addEventListener() ו-()removeEventListener</code> ועוד, מאפשרים לנו הרבה יותר אפשרויות, אבל יכולים להיות מורכבים ובעלי פחות תמיכת דפדפנים (נתמך החל מגרסת Internet Explorer 9). השתדלו לנסות ולהשתמש בהם בכך מתי שניתן. </li> -</ul> - -<p>כמו שאמרנו, היתרון העיקרי של המנגנון השלישי הוא שאתם יכולים להסיר קוד שמטפל באירוע, באמצעות <code>()removeEventListener</code>, ואתם יכולים להוסיף מספר מאזיני אירוע לאותו אלמנט. לדוגמא, אנחנו יכולים לקרוא ל-<code>({ ... }()addEventListener('click', function</code> על אלמנט מסויים מספר רב של פעמים, כאשר בכל פעם תהיה פונקציה אחרת בארגומנט השני. אופציה זו לא אפשרית ב- event handler properties כי כל הגדרה נוספת של property תמחוק את ההגדרה הקודמת שלו:</p> - -<pre class="brush: js">element.onclick = function1; -element.onclick = function2; -etc.</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אם אתם נדרשים לתמוך בדפדפנים ישנים מאינטרנט אקפלורר 8, אתם עלולים להיתקל בקשיים שכן דפדפדנים ישנים אלו משתמשים במודל אירועים שונה מדפדפנים חדשים, אך אל פחד. מרבית ספריות JavaScript (כמו לדוגמא jQuery) מכילות פונקציות מובנות שמבטלות כביכול את ההבדלים בין הדפדנים השונים. אין לכם צורך לדאוג לנושא זה בתחילת הלמידה שלכם.</p> -</div> - -<h2 id="עקרונות_נוספים_בנושא_אירועים">עקרונות נוספים בנושא אירועים</h2> - -<p>בחלק זה, אנחנו נגע בקצרה בנושאים מתקדמים הקשורים לאירועים. אין זה הכרחי להבין נושאים אלו לעומק בשלב זה, אך זה עלול לסייע לכם להבין תבניות קוד שתיתקלו בהם מדי פעם.</p> - -<h3 id="Event_objects">Event objects</h3> - -<p>לפעמים בתוך פונקצייה המטפלת באירוע (event handler) - אתם תראו פרמטר המצויין בתך הסוגריים, הנושא שם כמו <code>event</code>, <code>evt</code>, או סתם <code>e</code>. זה נקרא <strong>event object - האובייקט של האירוע עצמו,</strong> והוא <strong>מועבר בצורה אוטומטית למטפלי האירוע</strong> על מנת לספק אפשרויות נוספות ומידע נוסף. לדוגמא, נרשום את דוגמת הצבעים שלנו מחדש בצורה קצת שונה:</p> - -<pre class="brush: js">function bgChange(e) { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - e.target.style.backgroundColor = rndCol; - console.log(e); -} - -btn.addEventListener('click', bgChange);</pre> - -<div class="note"> -<p><strong>לתשומת לב</strong>: תוכלו למצוא <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">את קוד המקור</a> ב-GitHub וגם לראות <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">את הדוגמא כדף אינטרנט</a>.</p> -</div> - -<p>כאן אנחנו יכולים לראות שאנחנו כוללים את האובייקט של האירוע - <strong>e</strong>, בתוך הפונקציה, ובתוך הפונקציה אנחנו קובעים צבע רקע ל- <code>e.target</code> — שזה בעצם הכפתור עצמו. המאפין <code>target</code> של event object הוא תמיד <strong>הפנייה לאלמנט שהאירוע התרחש עליו</strong>. כך, בדוגמא שלנו, אנחנו קובעים בעצם צבע רקע אקראי לכפתור עצמו שהאירוע הלחיצה התרחש עליו ולא לדף.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אתם יכולים להשתמש באיזה שם שנרצה עבור event object — רק השתמשו בשם שיהיה ברור שזה הפניה ל- event object. השמות המקובלים הם <code>e</code>/<code>evt</code>/<code>event</code> מכיוון שהם קצרים וקל לזכור את ההקשר שלהם.</p> -</div> - -<p><code>e.target</code> הוא שימושי להפליא כשאנחנו רוצים לקבוע את אותו event handler על מספר אלמנטים ולעשות משהו לכולם כאשר אותו אירוע מתרחש. לדוגמא, נניח ויש לנו סט של 16 אריחים שנעלמים כאשר הם נלחצים. זה נוח יותר כאשר מתאפשר לנו לקבוע שאלמנט יעלם כשאנחנו נלחץ עליו באמצעות שימוש ב- <code>e.target</code> , מאשר לבחור אותו בצורה מורכבת אחרת. בדוגמאות הבאות למשל ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html - קוד המקור</a> (ניתן לראות גם ב-<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">דף האינטרנט</a>) יצרנו 16 אלמנטים מסוג {{htmlelement("div")}} באמצעות JavaScript, ואנחנו בוחרים את כולם באמצעות {{domxref("document.querySelectorAll()")}} ואז עוברים על כל אחד מהם באמצעות לולאה ומוסיפים מאזין אירוע ומטפל אירוע של <code>onclick</code> לכל אחד מהם כך שכאשר כל אחד מהאלמנטים הללו נלחץ על ידי המשתמש, צבע אקראי אחר ניתן לאותו אלמנט:</p> - -<pre class="brush: js">var divs = document.querySelectorAll('div'); - -for (var i = 0; i < divs.length; i++) { - divs[i].onclick = function(e) { - e.target.style.backgroundColor = bgChange(); - } -}</pre> - -<p>הפלט נראה כך. נסו לשחק איתו:</p> - -<div class="hidden"> -<h6 id="Hidden_example">Hidden example</h6> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Useful event target example</title> - <style> - div { - background-color: red; - height: 100px; - width: 25%; - float: left; - } - </style> - </head> - <body> - <script> - for (var i = 1; i <= 16; i++) { - var myDiv = document.createElement('div'); - document.body.appendChild(myDiv); - } - - function random(number) { - return Math.floor(Math.random()*number); - } - - function bgChange() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - return rndCol; - } - - var divs = document.querySelectorAll('div'); - - for (var i = 0; i < divs.length; i++) { - divs[i].onclick = function(e) { - e.target.style.backgroundColor = bgChange(); - } - } - </script> - </body> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>הרבה ממאזיני האירועים/מטפלי האירועים שניתקל בהם הם בעלי סט סטנדרטי של properties ופונקציות - או יותר נכון מתודות, אשר זמינים עבור ה-event object - ראו את הדף בנושא אובייקט {{domxref("Event")}} לרשימה המלאה.</p> - -<p>יש מטפלי אירועים יותר מורכבים, המכילים properties מיוחדים בעלי מידע ספציפי שהם צריכים על מנת לתפקד כמטפל אירוע. לדוגמא ל-<a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, יש סוג אירוע - <code>dataavailable</code> - שמתרחש כאשר אודיו או וידאו הוקלטו והם זמינים כך שניתן לבצע עליהם פעולות מסויימות - לדוגמא לשמור אותם או לנגן אותם שוב. למאזין האירוע/מטפל אירוע התואם <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> יש property שזמין בשם <code>data</code> עבורו המכיל את האודיו/וידאו שהוקלט ומאפשר לנו לגשת אליו ולעשות איתו דברים.</p> - -<h3 id="מניעת_התנהגות_ברירת_מחדל">מניעת התנהגות ברירת מחדל</h3> - -<p>לפעמים אנחנו ניתקל בסיטואצית שאנחנו נרצה למנוע מאירוע לבצע את מה שהוא אמור לעשות כברירת מחדל. הדוגמא הכי נפוצה היא טופס באינטרנט. כאשר אנחנו נמלא את הפרטים ונלחץ על כפתור ה-Submit , ההתנהגות ברירת המחדל תהיה לשלוח את המידע שהוכנס בטופס לדף מסויים בשרת לשם עיבוד, והדפדפן יועבר למעין דף של ״הפרטים נשלחו בהצלחה״ או משהו דומה.</p> - -<p>הבעיה מתעוררת כאשר המשתמש לא הזין את המידע כראוי - כמפתחים, אנחנו נרצה למנוע שליחה של המידע השגוי לשרת ולתת למשתמש הודעת שגיאה שאומרת להם מה הייתה הטעות ומה הם צריכים לעשות. חלק מהדפדנים תומכים בולידציה של מידע בטפסים, אך מכיון שהרבה לא ומסיבות נוספות, אנחנו ממליצים לא להסתמך על ולידציה של דפדפנים אלא לבנות את הולידציה בעצמכם. לדוגמא:</p> - -<p>נתחיל עם טופס HTML פשוט דורש מאיתנו להכניס שם פרטי ושם משפחה:</p> - -<pre class="brush: html"><form> - <div> - <label for="fname">First name: </label> - <input id="fname" type="text"> - </div> - <div> - <label for="lname">Last name: </label> - <input id="lname" type="text"> - </div> - <div> - <input id="submit" type="submit"> - </div> -</form> -<p></p></pre> - -<div class="hidden"> -<pre class="brush: css">div { - margin-bottom: 10px; -} -</pre> -</div> - -<p>כעת קצת JavaScript - כאן החלנו בדיקה פשוטה מאוד בתוך מטפל האירוע <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (האירוע של submit מתרחש כאשר הטופס נשלח).</p> - -<p>הבדיקה שלנו בודקת הם שדות הטקסט ריקים. אם כן, אנחנו קוראים לפונקציית <code><a href="/en-US/docs/Web/API/Event/preventDefault">()preventDefault</a></code> על ה- event object - כלומר על האלמנט שעליו התרחש האירוע. פונקצייה זו מונעת מהטופס להישלח - ומציגה הודעת שגיאה בפסקה מתחת לטופס שלנו, על מנת להציג למשתמש מה השתבש:</p> - -<pre class="brush: js">var form = document.querySelector('form'); -var fname = document.getElementById('fname'); -var lname = document.getElementById('lname'); -var submit = document.getElementById('submit'); -var para = document.querySelector('p'); - -form.onsubmit = function(e) { - if (fname.value === '' || lname.value === '') { - e.preventDefault(); - para.textContent = 'You need to fill in both names!'; - } -}</pre> - -<p>ברור שזו ולידציה פשוטה וחלשה מאוד - זה לא ימנע מהמשתמש להזין רווחים או מספרים לתוך שדות הטקסט, אך זה מספיק לשם הדוגמא. הפלט ייראה כך:</p> - -<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: ראו את קוד המקור פה <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> או <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">דף אינטרנט</a>.</p> -</div> - -<h3 id="event_bubbling_ו-_capture">event bubbling ו- capture</h3> - -<p>נושא נוסף שאנחנו נרצה לדון הוא משהו שאמנם לא ניתקל בו הרבה, אך אם לא נכיר אותו ונבין אותו, יכול לעשות לנו כאב ראש לא קטן.</p> - -<p>event bubbling ו- capture אלו שני מנגנונים אשר מסבירים מה קורה כאשר שנים או יותר <strong>מטפלי אירוע</strong> של <strong>אותו אירוע</strong> מופעלים על <strong>אלמנט אחד</strong>. לצורך ההסבר, פתחו את <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> בלשונית חדשה בדפדפן ואת <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">קוד המקור</a> בלשונית אחרת. ניתן גם לראות את הדוגמא כאן למטה:</p> - -<div class="hidden"> -<h6 id="Hidden_video_example">Hidden video example</h6> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Show video box example</title> - <style> - div { - position: absolute; - top: 50%; - transform: translate(-50%,-50%); - width: 480px; - height: 380px; - border-radius: 10px; - background-color: #eee; - background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); - } - - .hidden { - left: -50%; - } - - .showing { - left: 50%; - } - - div video { - display: block; - width: 400px; - margin: 40px auto; - } - - </style> - </head> - <body> - <button>Display video</button> - - <div class="hidden"> - <video> - <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> - <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> - </video> - </div> - - <script> - - var btn = document.querySelector('button'); - var videoBox = document.querySelector('div'); - var video = document.querySelector('video'); - - btn.onclick = function() { - displayVideo(); - } - - function displayVideo() { - if(videoBox.getAttribute('class') === 'hidden') { - videoBox.setAttribute('class','showing'); - } - } - - videoBox.addEventListener('click',function() { - videoBox.setAttribute('class','hidden'); - }); - - video.addEventListener('click',function() { - video.play(); - }); - - </script> - </body> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>זו דוגמא פשוטה שמראה ומסתירה אלמנט {{htmlelement("div")}} שמכיל אלמנט {{htmlelement("video")}} בתוכו:</p> - -<pre class="brush: html"><button>Display video</button> - -<div class="hidden"> - <video> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> - </video> -</div></pre> - -<p>כאשר אנחנו לוחצים על {{htmlelement("button")}} הוידאו מוצג, באמצעות שינוי ה-class של <code><div></code> מ- <code>hidden</code> ל- <code>showing</code> (ה-css בקובץ מכיל בין היתר שני classes אשר מציגים את הקופסא במסך או מסתירים אותה, בהתאמה) :</p> - -<pre class="brush: js">btn.onclick = function() { - videoBox.setAttribute('class', 'showing'); -}</pre> - -<p>לאחר מכן אנחנו מוסיפים עוד שני מטפלי אירוע של <code>onclick</code> - הראשון ל- <code><div></code> והשני ל - <code><video></code>. הרעיון הוא שכאשר האזור של ה- <code><div></code> מחוץ לוידאו מקבל לחיצה, הקופסא אמורה להיעלם שוב; כאשר הוידאו עצמו נלחץ, הוידאו אמור לפעול שוב:</p> - -<pre>videoBox.onclick = function() { - videoBox.setAttribute('class', 'hidden'); -}; - -video.onclick = function() { - video.play(); -};</pre> - -<p>אבל ישנה בעי כרגע, כאשר אנחנו לוחצים על הוידאו הוא מתחיל להתנגן, אבל גורם גם ל- <code><div></code> להיות מוסתר באותו הזמן. זה מכיוון שהוידאו שבתוך ה-<code><div></code> - הוא חלק ממנו - אז כאשר אנחנו לוחצים על הוידאו - אנחנו בעצם גם מפעילים את האירוע על ה-<code><div></code> עצמו, ושני מטפלי האירוע נכנסים לפעולה.</p> - -<h4 id="bubbling_ו-_capturing">bubbling ו- capturing</h4> - -<p>כאשר אירוע מתרחש על אלמנט שיש לו אלמנט אב - לדוגמא האלמנט {{htmlelement("video")}} שלנו, לדפדפנים המודרניים יש שני תהליכים שונים שהם מבצעים: שלב ה- <strong>capturing</strong> ושלב ה- <strong>bubbling</strong>.</p> - -<p>בשלב - <strong>capturing</strong>:</p> - -<ul> - <li>הדפדפן בודק האם אלמנט האב הראשי ({{htmlelement("html")}}) מכיל event handler של <code>onclick</code> הרשום בשלב capturing ואם כן הוא מריץ אותו.</li> - <li>לאחר מכן, ובכל מקרה, הוא עובר לאלמנט הבן שנמצא בתוך - ({{htmlelement("html")}}) - ובודק שוב את הדבר, וכך הלאה, עד אשר הוא מגיע לאלמנט שבפועל לחצנו עליו.</li> -</ul> - -<p>בשלב - <strong>bubbling</strong> קורה בדיוק ההפך:</p> - -<ul> - <li>הדפדפן בודק האם האלמנט שלחצו עליו בפועל מכיל event handler של <code>onclick</code> הרשום עליו בשלב bubbling ואז מריץ אותו אם כן.</li> - <li>לאחר מכן הוא ממשיך בכל מקרה לאלמנט האב הישיר שלו ומבצע את אותו דבר וכך הלאה, עד שהוא מגיע לאלמנט <code><html></code>.</li> -</ul> - -<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p> - -<p>לחצו על התמונה על מנת להגדיל אותה.</p> - -<p>בדפדפנים מודרניים, <strong>ברירת המחדל היא שכל ה-event handlers נרשמים בשלב ה-bubbling</strong>. בדוגמא שלנו למשל, כאשר לחצנו על הוידאו, <u><strong>האירוע</strong></u> מסוג לחיצה ״בועבע״ מאלמנט <code><video></code> הלאה לאלמנט <code><html></code>, כאשר במהלך הדרך :</p> - -<ul> - <li>הוא מצא מטפל אירוע - <code>video.onclick...</code> והריץ אותו ולכן הוידאו החל להתנגן.</li> - <li>לאחר מכן הוא מצא מטפל אירוע <code>videoBox.onclick...</code> והריץ אותו גם, ולכן הסתיר את הוידאו (או יותר נכון הסתיר את ה-div שהכיל את הוידאו).</li> -</ul> - -<p><strong>שימו לב שמה שבועבע הוא התרחשות האירוע עצמו, ולא מטפל האירוע (אותו דבר קורה גם בשלב ה-capturing). </strong></p> - -<h4 id="תיקון_הבעיה_עם_()stopPropagation">תיקון הבעיה עם ()stopPropagation</h4> - -<p>על מנת לתקן את ההתנהגות הזו, לאובייקט האירוע עצמו - event object - יש מתודה זמינה עבורו שנקראת <code><a href="/en-US/docs/Web/API/Event/stopPropagation">()stopPropagation</a></code>, כאשר היא מופעלת על מטפל האירוע של אובייקט האירוע, היא תריץ את מטפל האירוע, אבל <strong>תמנע מהאירוע עצמו להמשיך לבעבע במעלה השרשרת לאלמנטי האב שלו</strong> (וכנ״ל גם בשלב ה- capturing)<strong> </strong>וכך מטפלי אותו אירוע של אלמנטי האב לא ירוצו.</p> - -<p>כך, על מנת לתקן את הבעיה בדוגמא שלנו, אנחנו נשנה את הפונקציה המטפלת באירוע כך:</p> - -<pre class="brush: js">video.onclick = function(e) { - e.stopPropagation(); - video.play(); -};</pre> - -<p>אתם יכולים ליצור עותק מקומי של קוד המקור של <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html </a> ולתקן זאת בעצמכם או לראות הקובץ המתוקן <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">כאן</a> ואת <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">קוד המקור</a> כאן.</p> - -<div class="note"> -<p><strong>הערה חשובה</strong>: אתם בטח שואלים את עצמכם מדוע לטרוח וליצור שני שלבים - גם capturing וגם bubbling? התשובה נעוצה בהיסטוריה ובימי העבר כאשר התאימות בין דפדפנים הייתה שונה מאוד ולא כפי שהיא היום.</p> - -<p>בימים ההם Netscape השתמש ב-event capturing בלבד ואילו Internet Explorer השתמש ב - event bubbling בלבד. כאשר ארגון W3C החליט לנסות וליצור סטדרט אחיד, הם החליטו על מנגנון שיכלול את שני השלבים - וכל הדפדפנים אימצו את שני השלבים.</p> -</div> - -<div class="note"> -<p><strong>לתשומת לב</strong>: יחד עם זאת, כברירת מחדל, כל מטפלי האירועים נרשמים בשלב bubbling ולא בשלב capturing וברוב המוחלט של הפעמים זה עושה שכל. אם אנחנו ממש רוצים לרשום אירוע בשלב ה-capturing, אנחנו יכולים לעשות זאת באמצעות הוספת <code>true</code> כפרמטר שלישי בתוך <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code>. היכנסו לקישור זה אם תרצו להרחיב בנושא. </p> -</div> - -<h4 id="Event_delegation">Event delegation</h4> - -<p>bubbling מאפשר לנו להשתמש ביתרונות של <strong>event delegation</strong> — רעיון זה מתבסס על העובדה שאם אנחנו רוצים להריץ קוד מסויים כאשר אנחנו לוחצים על אלמנט ילד אחד שהוא חלק ממספר אלמנטים ילדים של אלמנט אב, אנחנו יכולים לקבוע את מאזין האירוע על אלמנט האב, ואז כאשר האירוע מתרחש על אחד מאלמנטים הילדים, האירוע ״יבועבע״ לאלמנט ההורה שלהם.</p> - -<p>כתיבה שכזו עדיפה על רישום מאזין אירוע לכל אחד מהילדים בנפרד. להזכירכם - בשלב ה-bubbling נבדק האם האלמנט שהאירוע התרחש עליו מכיל מטפל אירוע לאירוע שהתרחש ומתקדם הלאה לאלמנט ההורה ומבעבע אליו את האירוע ובודק האם הוא מכיל מטפל אירוע לאירוע שהתרחש וכך הלאה.</p> - -<p>דוגמא טובה לכך היא רשימה של פריטים - אם אנחנו רוצים שכל פריט מהרשימה יקפיץ הודעה כאשר לוחצים עליו, אנחנו יכולים לקבוע מאזין אירוע על האלמנט ההורה - במקרה שלנו <code><ul></code>, וכל לחיצה על פריט מהרשימה (<code><li></code>) - כלומר כל התרחשות אירוע שכזה על פריט מהרשימה - אירוע הלחיצה יבעבע מאלמנט <code><li></code> לאלמנט האב - <code><ul></code>.</p> - -<p>רעיון זה מוסבר בפירוט רב בבלוג של David Walsh עם דוגמאות נוספות. ראו את המאמר שלו בנושא <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p> - -<h2 id="לסיכום">לסיכום</h2> - -<p>במאמר זה ניסינו להסביר כל מה שאתם צריכים לדעת על אירועי Web בשלב זה. כפי שנאמר למעלה, אירועים הם לא חלק מה-core של JavaScript - הם מוגדרים ב-Web APIs של הדפדפן.</p> - -<p>חשוב להבין בנוסף שיש הבדלים בין מודלי האירועים של JavaScript בסביסות השונות שהיא מורצת - החל מ- Web APIs ועד לסביבות אחרות כמו Browser WebExtensions ו- Node.js. לא מצפים מכם שכרגע תבינו את כל הסביבות הללו, אבל זה עוזר לכם להבין את הבסיס ככל ותתקדמו בלמידה.</p> - -<p>אם משהו לא ברור, הרגישו חופשי לקרוא שוב את המאמר או <a href="/en-US/Learn#Contact_us">ליצור עמנו קשר</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> - מאמר מפורט בנושא capturing and bubbling שנכתב על ידי Peter-Paul Koch.</li> - <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> - מאמר מפורט בנושא event object שנכתב גם הוא על ידי Peter-Paul Koch.</li> - <li><a href="/en-US/docs/Web/Events">Event reference</a></li> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "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> diff --git a/files/he/learn/javascript/building_blocks/functions/index.html b/files/he/learn/javascript/building_blocks/functions/index.html deleted file mode 100644 index 99255d0591..0000000000 --- a/files/he/learn/javascript/building_blocks/functions/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Functions — פונקציות - חלקי קוד לשימוש חוזר -slug: Learn/JavaScript/Building_blocks/Functions -translation_of: Learn/JavaScript/Building_blocks/Functions ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> - -<p class="summary">עקרון חשוב והכרחי נוסף בתכנות הוא פונקציות - <strong>functions. פונקציות</strong> מאפשרות לנו לאחסן קוד בתוך בלוק מוגדר ומבצע פעולה מסויימת, ואז לקרוא לאותו קוד מתי שנצטרך אותו באמצעות פקודה קצרה. זאת במקום לרשום את אותו קוד שוב ושוב. במאמר זה אנחנו נחקור את העקרונות הבסיסיים והחשובים שמאחורי פונקציות כמו הסינטקס הבסיסי שלהן, כיצד להגדיר אותן, כיצד להפעיל אותן, נלמד מהו סקופ ופרמטרים ועוד.</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>ב-JavaScript אנחנו נמצא פונקציות בכל מקום. בעיקרון, אנחנו השתמשנו בפונקציות לאורך כל הדרך של הקורס, פשוט לא פירטנו עליהם לעומק. כעת אנחנו ניכנס לעומק של אלו ונבין כיצד להשתמש בהם.</p> - -<p>כמעט כל פעם שאנחנו עושים שימוש בביטוי מסויים של JavaScript שעושה שימוש בסוגריים רגילות <code>()</code> וזה <u><strong>לא</strong></u> במסגרת לולאת <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a> או לולאות <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while ו- do...while loop</a> או משפטי תנאי <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else</a> אנחנו בעצם עושים שימוש בפונקציות.</p> - -<h2 id="פונקציות_מובנות_Built-in_של_הדפדפן">פונקציות מובנות (Built-in) של הדפדפן</h2> - -<p>אנחנו ביצענו לא מעט שימוש בפונקציות המובנות בדפדפן. בכל פעם שעשינו מניפולציה על מחרוזת לדוגמא:</p> - -<pre class="brush: js notranslate">let myText = 'I am a string'; -let newString = myText.replace('string', 'sausage'); -console.log(newString); -// the replace() string function takes a source string, -// and a target string and replaces the source string, -// with the target string, and returns the newly formed string</pre> - -<p>או בכל פעם שעשינו מניפולציה על מערך:</p> - -<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs']; -let madeAString = myArray.join(' '); -console.log(madeAString); -// the join() function takes an array, joins -// all the array items together into a single -// string, and returns this new string</pre> - -<p>או בכל פעם שרצינו ליצור מספר רנדומלי:</p> - -<pre class="brush: js notranslate">let myNumber = Math.random(); -// the random() function generates a random number between -// 0 and up to but not including 1, and returns that number</pre> - -<p>אנחנו בעצם השתמשנו בפונקציות.</p> - -<div class="note"> -<p><strong>תשומת לבכם</strong>: נסו להכניס את השורות קוד הרשומות למעלה לקונסולה אם אתם לא זוכרים איך לעשות בהם שימוש.</p> -</div> - -<p>ל- JavaScript יש לא מעט פונקציות מובנות אשר מאפשרות לנו לעשות דברים שימושיים מבלי לכתוב את כל הקוד בעצמנו. בפועל, חלק מהקוד שאנחנו מריצים כאשר אנחנו אנחנו קוראים לפונקציה מובנית של הדפדפן, לא יכל היה להירשם ב-JavaScript - הרבה מהפונקציות הללו קוראות לחלקים בקוד הדפדפן עצמו, אשר נבנה בשפה אחרת שאינה JavaScript כלל.</p> - -<p>אנא זכרו שחלק מהפונקציות המובנות של הדפדפם אינן חלק מהבסיס של שפת JavaScript - חלקן מהן מוגדרות כחלק מה-API של הדפדפן, אשר בנוי מעל שפת הכתיבה של הדפדפן על מנת להעניק יותר פונקציונליות. אנחנו נסתכל על ה-API של הדפדפן בהמשך המודול. לרענון זכרונכם, <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">ראו מאמר זה מתחילת הקורס</a>.</p> - -<h2 id="functions_vs._methods_-_פונקציות_מול_מתודות">functions vs. methods - פונקציות מול מתודות</h2> - -<p>אנו קוראים לפונקציות שהן חלק מאובייקטים כ-מתודות (methods). אנחנו לא צריכים כרגע לדעת על המבנה הפנימי של אובייקטים ב-JavaScript - אנו נלמד את זה לעומק במודול הבא. לבינתיים, רק רצינו למנוע בלבול בין המושגים השונים. רוב הסיכויים שתשמעו את שניהם.</p> - -<p>הקוד המובנה שעשינו בו שימוש לבינתיים מגיע ב-2 תצורות: פונקציות ו-מתודות. אתם יכולים לבדוק את הרשימה המלאה של פונקציות מובנות וכן את הרשימה המלאה של אובייקטים מובנים והמתודות שלהם <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">פה</a>.</p> - -<p>כמו כן, ראינו הרבה פונקציות מותאמות -<strong>custom functions</strong> - פונקציות שאנחנו הגדרנו בעצמנו ולא מוגדרות בתוך הדפדפן עצמו. בכל פעם שאנחנו רואים שם שאינו שם שמור של השפה ולאחריו סוגריים רגילות <code>()</code>, זוהי פונקציה שהמפתח הגדיר בעצמו. בתרגול שלנו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> וגם <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">בקוד המקור שלו</a> במאמר בנושא <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות</a>, כללנו פונקציה <code>()draw</code> שאנחנו בנינו שנראית כך :</p> - -<pre class="brush: js notranslate">function draw() { - ctx.clearRect(0,0,WIDTH,HEIGHT); - for (let i = 0; i < 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> - -<p>פונקציה זו מציירת 100 עיגולים אקראיים בתוך אלמנט {{htmlelement("canvas")}} . בכל פעם שאנחנו רוצים לעשות זאת, אנחנו יכולים להפעיל את הפונקציה עם הקוד הבא:</p> - -<pre class="brush: js notranslate">draw(); -</pre> - -<p>במקום לכתוב את כל הקוד שבתוך הפונקציה בכל פעם שאנחנו רוצים שיצוייר עיגול. </p> - -<p>פונקציות יכולות להכיל כל קוד שנרצה - אנחנו אפילו יכולים לקרוא לפונקציות אחרות מתוך פונקציות. הפונקציה למעלה לדוגמא, קוראת לפונקציה <code>()random</code> שלוש פעמים, כפי שאנו רואים בקוד הבא:</p> - -<pre class="brush: js notranslate">function random(number) { - return Math.floor(Math.random()*number); -}</pre> - -<p>אנחנו צריכים לבנות את הפונקציה <code>()random</code> כי הפונקציה המובנית של הדפדפן <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">()Math.random</a> מייצרת לנו מספר רנדומלי, אבל מספר רנדומלי עשרוני בין 0 ל-1. אנחנו לעומת זאת רצינו מספר רנדומלי שלם ולא עשרוני ושיהיה בין 0 למספר מסויים שאנחנו נגדיר לו.</p> - -<h2 id="Invoking_functions_-_קריאה_לפונקציה">Invoking functions - קריאה לפונקציה</h2> - -<p>ככל הנראה אתם כבר מבינים את הנושא, אבל בכל מקרה אנו מזכירים שכדי להשתמש בפועל בפונקציה אחרי שהיא הוגדרה, אנחנו צריכים להריץ אותה, לקרוא לה. בשפה האנגלית זה נקרא <strong>To invoke</strong>. זה נעשה באמצעות כתיבת שם הפונקציה איפה שנרצה בתוך הקוד שלנו, ולאחריו סוגריים מסולסלות <code>()</code>.</p> - -<pre class="brush: js notranslate">function myFunction() { - alert('hello'); -} - -myFunction() -// calls the function once</pre> - -<h2 id="Anonymous_functions_-_פונקציות_אנונימיות">Anonymous functions - פונקציות אנונימיות</h2> - -<p>אולי נתקלתם בפונקציות אשר מוגדרות ומופעלות בצורות אחרות. עד עכשיו, יצרנו פונקציה בצורה כזו:</p> - -<pre class="brush: js notranslate">function myFunction() { - alert('hello'); -}</pre> - -<p>אבל אנחנו גם יכולים ליצור פונקציה שאין לה שם:</p> - -<pre class="brush: js notranslate">function() { - alert('hello'); -}</pre> - -<p>פונקציה שכזו נקראת פונקציה אנונימית - <strong>anonymous function</strong> - אין לה שם. היא גם לא עושה כלום בעצמה. בדרך כלל אנחנו נשתמש בפונקציה אנונימית ביחד עם ״מטפל אירוע״ - event handler. לדוגמא, הקוד הבא יריץ את הקוד בנמצא בתוך הפונקציה, כאשר הכפתור myButton נלחץ:</p> - -<pre class="brush: js notranslate">var myButton = document.querySelector('button'); - -myButton.onclick = function() { - alert('hello'); -}</pre> - -<p>הדוגמא למעלה דורשת שיהיה אלמנט {{htmlelement("button")}} זמין על גבי הדף כדי שנוכל לבחור אותו וללחוץ עליו. ראיתם מבנה שכזה מספר פעמים במהלך הקורס ואתם תלמדו עליו עוד בהמשך הקורס.</p> - -<p>אנחנו יכולים להשים פונקציה אנונימית לתוך משתנה כך שהיא תהיה הערך של אותו משתנה. לדוגמא:</p> - -<pre class="brush: js notranslate">let myGreeting = function() { - alert('hello'); -}</pre> - -<p>ניתן להפעיל את הפונקציה הזו (invoke) באמצעות:</p> - -<pre class="brush: js notranslate">myGreeting();</pre> - -<p>בפועל, זה מעניק לשם פונקציה, למרות שהיא הייתה פונקציה אנונימית. אנחנו גם יכולים להשים את הפונקציה כך שהיא תהיה הערך של מספר משתנים. לדוגמא:</p> - -<pre class="brush: js notranslate">let anotherGreeting = myGreeting;</pre> - -<p>הפונקציה הזו יכולה להיות מופעלת בשתי הדרכים:</p> - -<pre class="brush: js notranslate">myGreeting(); -anotherGreeting();</pre> - -<p>אבל זה עלול להיות מבלבל, <strong>אז אל תעשו זאת</strong>. כשאנחנו יוצרים פונקציות, עדיף יהיה להיצמד למבנה הזה:</p> - -<pre class="brush: js notranslate">function myGreeting() { - alert('hello'); -}</pre> - -<p>אנחנו נשתמש בפונקציות אנונימיות בעיקר על מנת להריץ קוד בתגובה לאירוע שהתרחש - כמו לחיצה על כפתור - וזאת באמצעות ״מטפל אירוע״ - event handler. לדוגמא:</p> - -<pre class="brush: js notranslate">myButton.onclick = function() { - alert('hello'); - // I can put as much code - // inside here as I want -}</pre> - -<h2 id="הפרמטרים_של_הפונקציה">הפרמטרים של הפונקציה</h2> - -<p>חלק מהפונקציות דורשות שיינתנו להם פרמטרים מסויימים כשאנחנו מפעילים אותן - אלו בעצם ערכים שאנחנו צריכים לכלול בתוך הסוגריים הרגילות <code>()</code>, וזאת על מנת שהפונקציה תוכל לבצע את מה שהיא צריכה לבצע.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: פרמטרים אלו נקראים ארגומנטים</p> -</div> - -<p>כדוגמא, הפונקציה המובנית של הדפדפן לא דורשת שום פרמטרים. כשאנחנו קוראים לה, היא מחזירה מספר עשרוני בין 0 ל-1. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">()Math.random</a>:</p> - -<pre class="brush: js notranslate">let myNumber = Math.random();</pre> - -<p>הפונקציה המובנית של הדפדפן <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">()replace</a> לעומת זאת, צריכה שני ארגומנטים - מחרוזת משנה שנרצה לחפש בתוך מחרוזת ראשית ואת המחרוזת המשנה שתחליף את זו שמצאנו בתוך המחרוזת הראשית:</p> - -<pre class="brush: js notranslate">let myText = 'I am a string'; -let newString = myText.replace('string', 'sausage');</pre> - -<div class="note"> -<p><strong>שימו לב</strong>: כשאנחנו צריכים לציין מספר של ארגומנטים, אנחנו נפריד ביניהם באמצעות פסיק - <code>,</code>.</p> -</div> - -<p>חשוב לדעת כי לפעמים ארגומנטים יהיו אופציונליים - כלומר אנחנו לא נהיה חייבים לציין אותם. אם לא נציין אותם כאשר הם אופציונליים, הפונקציה בדרך כלל תאמץ סוג של התנהגות ברירת מחדל. לדוגמא, הפרמטר של פונקציה <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">()join</a> של מערכים הוא אופציונלי:</p> - -<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs']; -let madeAString = myArray.join(' '); -// returns 'I love chocolate frogs' -let madeAString = myArray.join(); -// returns 'I,love,chocolate,frogs'</pre> - -<p>אם לא נציין אותו, ערך ברירת המחדל הוא שיהיה התו המחבר - במקרה הזה זה יהיה פסיק <code>,</code>.</p> - -<h2 id="סקופ_של_הפונקציה_והתנגשויות">סקופ של הפונקציה והתנגשויות</h2> - -<p>בוא נדבר מעט על {{glossary("scope")}} - עקרון חשוב מאוד להבנה כאשר אנחנו עוסקים בפונקציות. כאשר אנחנו יוצרים פונקציה, המשתנים וכל הדברים האחרים המוגדרים בתוך הפונקציה נמצאים בתוך <strong>scope</strong> נפרד, כלומר, הם נעולים בתוך מתחם מסויים, שלא ניתן לגשת אליו מחוץ לפונקציה.</p> - -<p>הסקופ או התחום שנמצא מחוץ לכל הפונקציות שלנו נקרא <strong>global scope</strong>. ערכים שמוגדרים ב-<strong>global scope</strong> נגישים מכל מקום בקוד.</p> - -<p>JavaScript נבנתה כך בצורה מסיבות מסויימות - אבל בעיקר מסיבות של אבטחה וארגון. לפעמים אנחנו לא נראה שמשתנים יהיו נגישים מכל מקום בקוד - סקריפטים חיצוניים שאנחנו מפעילים ממקומות אחרים יכולים לעשות לנו בלאגן ולגרום לשגיאות במקרה והם ישתמשו בשמות משתנים זהים ועלולים ליצור התנגשויות בין אם בטעות ובין אם מכוון.</p> - -<p>לדוגמא, נניח ויש לנו קובץ HTML אשר קורא לשני קבצי JavaScript חיצוניים, ובשניהם יש משתנה ופונקציה מוגדרים שמשתמשים באותו שם:</p> - -<pre class="brush: html notranslate"><!-- Excerpt from my HTML --> -<script src="first.js"></script> -<script src="second.js"></script> -<script> - greeting(); -</script></pre> - -<pre class="brush: js notranslate">// first.js -var name = 'Chris'; -function greeting() { - alert('Hello ' + name + ': welcome to our company.'); -}</pre> - -<pre class="brush: js notranslate">// second.js -var name = 'Zaptec'; -function greeting() { - alert('Our company is called ' + name + '.'); -}</pre> - -<p>שתי הפונקציות שאנחנו רוצים לקרוא להם נקראות <code>()greeting</code>, אבל אנחנו יכולים לגשת רק לפונקציה <code>()greeting</code> שבקובץ <code>second.js</code> - שכן הקישור לקובץ מבוצע ב -HTML מאוחר יותר בקוד שלנו, ולכן המשתנים והפונקציה שלו דורסים את אלו שב- <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">first.js</span></font>.</p> - -<div class="note"> -<p><strong>לתשומת לב</strong>: ניתן לראות את הדוגמא <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">ב-GitHub</a> וכן את <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">קוד המקור</a>).</p> -</div> - -<p>שמירה על הקוד שלנו נעול בתוך סקופ מונע בעיות שכאלו ונחשב כ- best practice.</p> - -<p>ניתן לחשוב על זה כמו גן חיות. האריות, זברות, נמרים ופינגווינים נמצאים כל במתחמים נפרדים כל אחד, ויש להם גישה רק לדברים שנמצאים במתחם שלהם - בדיוק כמו בסקופים של פונקציות. אם הם היו יכולים להיכנס למתחמים אחרים, היו נוצרות לא מעט בעיות. במקרה הטוב, החיות האחרות היו מרגישות לא בנוח, במקרה הרע, הן היו נאכלות על ידי חיה אחרת.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> - -<h3 id="למידה_אקטיבית_לשחק_עם_ה-scope">למידה אקטיבית: לשחק עם ה-scope</h3> - -<p>נסתכל על דוגמא על מנת להבין מהו scope.</p> - -<ol> - <li>ראשית, צרו לעצמכם עותק של הדוגמא שלנו <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. הקובץ מכיל 2 פונקציות שנקראות <code>()a</code> ו- <code>()b</code> וכן שלושה משתנים - <code>x</code>, <code>y</code>, ו- <code>z</code> - שניים מתוכם מוגדרים בתוך פונקציות ואחד מתוכם מוגדר ב-global scope. בנוסף, הדוגמא גם מכילה פונקציה שלישית שנקראת <code>()output</code>, אשר מקבלת ארגומנט אחד ומציגה אותו בתוך פסקה על גבי הדף.</li> - <li>פתחו את הדוגמא בדפדפן ובעורך הקוד שלכם.</li> - <li>הקלידו בקונסולה את הקוד הבא: - <pre class="brush: js notranslate">output(x);</pre> - אתם אמורים לראות שהערך של המשתנה <code>x</code> הוצג למסך.</li> - <li>כעת נסו להזין את הקוד הבא לקונסולה: - <pre class="brush: js notranslate">output(y); -output(z);</pre> - שתי הפקודות הללו יחזירו לנו שגיאה ביחד עם המשפט: "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". מדוע? הסיבה נעוצה ב-scope של הפונקציות: - <code>y</code> ו- <code>z</code> נעולים בתוך הפונקציות <code>()a</code> ו- <code>()b</code> ולכן הפונקציה <code>()output</code> לא יכולה לגשת אליהם כשהיא נקראת מה-global scope.</li> - <li>עם זאת, מה לדעתכם יקרה כשנקרא לפונקציה <code>()output </code>מתוך הפונקציות? נסו לשנות את <code>()a</code> ו- <code>()b</code> שייראו כך: - <pre class="brush: js notranslate">function a() { - let y = 2; - output(y); -} - -function b() { - let z = 3; - output(z); -}</pre> - שמרו את הקוד ואז העלו מחדש את הדף בדפדפן ונסו לקרוא לפונקציות <code>()a</code> ו- <code>()b</code> מהקונסולה: - - <pre class="brush: js notranslate">a(); -b();</pre> - אתם אמורים לראות את הערכים של <code>y</code> ו- <code>z</code> על גבי הדף. זה עובד מכיוון שהפונקציה <code>()output</code> מופעלת מתוך פונקציה אחרת - כלומר מתוך אותו סקופ שבו מוגדרים המשתנים שהיא מדפיסה. הפונקציה <code>()output</code> עצמה זמיני מכל מקום, שכן היא מוגדרת ב-global scope.</li> - <li>נסו עכשיו לעדכן את הקוד שלכם כך: - <pre class="brush: js notranslate">function a() { - var y = 2; - output(x); -} - -function b() { - var z = 3; - output(x); -}</pre> - רענון והעלו את הדף שוב והזינו את הקוד הבא בקונסולה:</li> - <li> - <pre class="brush: js notranslate">a(); -b();</pre> - גם <code>a()</code> וגם <code>b()</code> מחזירים את הערך של x — 1. זה עובד מכיוון שלמרות ש-<code>()output</code> לא מוגדרת באותו סקופ ש- <code>x</code> מוגדר בו, אבל <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">x</span></font> הוא משתנה גלובלי אז הוא זמין בכל מקום בקוד.</li> - <li>לבסוף, עדכנו את הקוד כך: - <pre class="brush: js notranslate">function a() { - var y = 2; - output(z); -} - -function b() { - var z = 3; - output(y); -}</pre> - שמור ורענן את הדף. לאחר מכן הזן את הקוד הבא בקונסולה:</li> - <li> - <pre class="brush: js notranslate">a(); -b();</pre> - הפעם כשקראנו ל- <code>()a</code> ו- <code>()b</code> אנחנו נקבל שגיאה מסוג "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" זה מכיוון שביצוע הקוד <code>()output</code> והמשתנים שהם מנסים להשיג לא מוגדרים בתוך אותו סקופ של פונקציה - המשתנים בעיקרון בלתי נראים לקריאות הפונציה הזו.</li> -</ol> - -<div class="note"> -<p><strong>לתשומת לבכם</strong>: אותו מנגנון סקופינג לא חל על לולאות <code>{ ... }(...) for</code> ובלוקים של תנאים - <code>{ ... }(...) if</code> הם אמנם נראים דומים, אבל הם לא אותו דבר. אל תתבלבלו.</p> -</div> - -<div class="note"> -<p><strong>לתשומת לבכם</strong>: השגיאה <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> היא אחת מהשגיאות השכיחות שתיתקלו בה. אם קיבלתם שגיאה שכזו, וודאו שהגדרת את המשתנה הרלוונטי ובסקופ הרלוונטי.</p> -</div> - -<ul> -</ul> - -<h3 id="פונקציות_בתוך_פונקציות">פונקציות בתוך פונקציות</h3> - -<p>זכרו שאנחנו יכולים לקרוא לפונקציה מכל מקום, <strong>גם מתוך פונקציה אחרת</strong>. זה שימושי על מנת על מנת להשאיר את הקוד שלנו מסודר - אם יש לנו פונקציה אחת מורכבת וגדולה יהיה יותר ברור להבין אותה אם נפרק אותה לכמה פונקציות:</p> - -<pre class="brush: js notranslate">function myBigFunction() { - var myValue; - - subFunction1(); - subFunction2(); - subFunction3(); -} - -function subFunction1() { - console.log(myValue); -} - -function subFunction2() { - console.log(myValue); -} - -function subFunction3() { - console.log(myValue); -} -</pre> - -<p>חשוב לוודא שה<strong>ערכים שמבוצע בהם שימוש בתוך הפונקציה, מוגדרים בסקופ הנכון</strong>. הדוגמא למעלה תחזיר לנו שגיאה <code>ReferenceError: myValue is not defined</code> מכיוון שאמנם המשתנה <code>myValue</code> מוגדר באותו סקופ שהפונקציה נקראת, אך הוא לא מוגדר בתוך הפונקציות עצמן - בתוך הקוד שירוץ בפועל כשאנחנו קוראים לתתי פונקציות. על מנת לגרום לכך לעבוד, היינו צריכים להעביר אליהם את הפונקציה כפרמטר כמו שרשום בקוד מטה:</p> - -<pre class="brush: js notranslate">function myBigFunction() { - var myValue = 1; - - subFunction1(myValue); - subFunction2(myValue); - subFunction3(myValue); -} - -function subFunction1(value) { - console.log(value); -} - -function subFunction2(value) { - console.log(value); -} - -function subFunction3(value) { - console.log(value); -}</pre> - -<h2 id="לסיכום">לסיכום</h2> - -<p>מאמר זה סקר את העקרונות יסוד של פונקציות, על מנת לסלול את הדרך שלכם להבנה של כלים שימושיים נוספות ולהבנה כיצד לבנות פונקציה משלכם.</p> - -<h2 id="ראו_גם">ראו גם</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions מדריך מפורט בנושא</a> — מכסה אפשרויות מתקדמות שלא נדונו במאמר זה.</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions reference</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> — הסבר מתקדם בנושא.</li> -</ul> - -<ul> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "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> diff --git a/files/he/learn/javascript/building_blocks/index.html b/files/he/learn/javascript/building_blocks/index.html deleted file mode 100644 index e60d618b4e..0000000000 --- a/files/he/learn/javascript/building_blocks/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: אבני הבנין של JavaScript -slug: Learn/JavaScript/Building_blocks -tags: - - JavaScript - - events - - אירועים - - לולאות - - מדריך - - ערכים מוחזרים מפונקציה - - פונקציות - - תנאים - Conditionals -translation_of: Learn/JavaScript/Building_blocks ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">במודול זה, אנחנו נמשיך להעמיק ביסודות ובמאפיינים והחשובים של JavaScript ונתמקד בסוגים שונים של קוד כגון משפטי תנאי (conditional statements),לולאות (loops), פונקציות (functions), ואירועים (events). חלק מהם כבר ראינו בשלבים קודמים של הקורס, אך לא העמקנו בהם. במודול זה ניכנס לעומק של אותן אבני בניין ונבין כיצד הן עובדות ומה מטרתן.</p> - -<h2 id="ידע_מוקדם">ידע מוקדם</h2> - -<p>לפני שתתחילו את המודול הזה, אנא וודאו כי הנכם בקיאים ביסודות <a href="/he/docs/Learn/HTML/Introduction_to_HTML">HTML</a> ושל <a href="/he/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, וכן סיימתם לעבור על המודול הקודם שלנו <a href="/he/docs/Learn/JavaScript/First_steps"> צעדים ראשונים ב-JavaScript</a>.</p> - -<div class="note"> -<p><strong>הערה</strong>: אם אתם עובדים על מחשב\טבלט\מכשיר אחר שאין לכם אפשרות ליצור עליו קבצים אישיים, אתם יכולים לנסות את (רוב) דוגמאות הקוד על תוכנות קוד אינטרנטיות כמו <a href="http://jsbin.com/">JSBin</a> או <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="מדריכים">מדריכים</h2> - -<dl> - <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></dt> - <dd>כמו בכל שפת תכנות, קוד צריך לקבל החלטות ולבצע פעולות מסויימות בהתאם למקרים שונים. לדוגמא - במשחק, אם מספר הנסיונות המותרים של השחקן עבר את מספר הנסיונות המקסימלי שהוגדר, המשמעות היא שהמשחק הסתיים. או יישום אינטרנט של מזג אוויר אשר יציג למשתמש עיצוב מסויים של מזג האוויר בהתאם לשעה הנוכחית ביום, כך שבשעות היום יוצג עיצוב בהיר ובשעות הערב יוצג עיצוב כהה. במאמר זה אנחנו נחקור את המבנה של <strong>משפטי תנאי</strong> ב-JavaScript וכיצד הם עובדים.</dd> - <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></dt> - <dd>לפעמים אנחנו נצטרך לבצע את אותה פעולה או משימה ברצף, יותר מפעם אחת. לדוגמא - כשנרצה לעבור רשימת שמות. בתכנות, <strong>לולאות</strong> יכולות לעשות את העבודה הזו בצורה מצויינת. במאמר זה אנחנו נחקור את המבנה של לולאות ב- JavaScript וכיצד הן עובדות.</dd> - <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></dt> - <dd>קונספט הכרחי חשוב בתכנות הוא <strong>פונקציות. </strong>פונקציות מאפשרות לנו לאחסן חלקי קוד שמבצעים פעולה מסויימת בתוך בלוק מוגדר, ואז לקרוא לאותו קוד כשנצטרך להשתמש בו, באמצעות פקודה קצרה - וזאת במקום לרשום את אותו קוד פעם אחר פעם, כל פעם מחדש. במאמר זה נחקור את המבנה של פונקציה והרעיון העומד מאחוריה, ונבין מה הוא הסינטקס הבסיסי על מנת לרשום פונקציה, כיצד אנו קוראים לפונקציה ועוד. כמו כן, נלמד מהם ארגומנטים או פרמטרים אשר הפונקציות יכולות לקבל וכן מהו Scope.</dd> - <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></dt> - <dd>לאחר שנסיים לעבור על התיאוריה ונבין מהן פונקציות, במאמר זה נתרגל ונבין בצורה מעשית כיצד לבנות פונקציות משלנו, בהתאם לפעולת שנרצה לבצע. בהמשך הדרך, אנחנו נסביר גם פרטים שימושיים כיצד לטפל בפונקציות ובערכים שהן יכולות להחזיר לנו. </dd> - <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה</a> - <a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></dt> - <dd>עקרון הכרחי וחשוב שאנחנו צריכים להכיר לגבי פונקציות הוא אילו ערכים פונקציות מחזירות לנו, אם בכלל. ישנן פונקציות שלא מחזירות ערכים לאחר שסיימו להריץ את הקוד שבתוכן, וישנן פונקציות שיחזירו לנו ערכים מסויימים. במאמר זה אנחנו נבין מהם אותם <strong>ערכים מוחזרים</strong>, כיצד אנחנו יכולים להשתמש בהם וכיצד אנחנו יכולים לגרום לפונקציות שלנו להחזיר ערכים. </dd> - <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events </a></dt> - <dd><strong>אירועים</strong> אלו בעצם פעולות או התרחשויות אשר קורים במערכת, אשר אנחנו יכולים ״להאזין״ להם כך שנוכל להגיב בדרך מסויימת, ברגע שהם יתרחשו. לדוגמא, כאשר משתמש לוחץ על כפתור, אולי נרצה להגיב לאותה התרחשות, לאותו אירוע של לחיצת הכפתור על ידי הקפצת הודעה מסויימת. במאמר אחרון זה אנחנו נדון בכמה מהעקרונות החשובים בהקשר של אירועים, ונסתכל כיצד הם עובדים בדפדפנים.</dd> -</dl> - -<h2 id="תרגול">תרגול</h2> - -<p>התרגול הבא יבדוק את ההבנה שלכם של החומר שנלמד במודול זה</p> - -<dl> - <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">בניית גלריית תמונות</a></dt> - <dd>אנו נתרגל שימוש בלולאות ופונקציות וכן בתנאים ואירועים על ידי בנייה של גלריית תמונות.</dd> -</dl> diff --git a/files/he/learn/javascript/building_blocks/looping_code/index.html b/files/he/learn/javascript/building_blocks/looping_code/index.html deleted file mode 100644 index b9067199e7..0000000000 --- a/files/he/learn/javascript/building_blocks/looping_code/index.html +++ /dev/null @@ -1,931 +0,0 @@ ---- -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"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Random canvas circles</title> - <style> - html { - width: 100%; - height: inherit; - background: #ddd; - } - - canvas { - display: block; - } - - body { - margin: 0; - } - - button { - position: absolute; - top: 5px; - left: 5px; - } - </style> - </head> - <body> - - <button>Update</button> - - <canvas></canvas> - - - <script> - 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 < 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); - - </script> - - </body> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>אתם לא צריכים להבין את כל הקוד הרשום למעלה, אבל הסתכלו לעומק על החלק שמצייר בפועל 100 כדורים:</p> - -<pre class="brush: js">for (let i = 0; i < 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 < 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"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Basic for loop example</title> - <style> - - </style> - </head> - <body> - - <p></p> - - - <script> - const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin']; - let info = 'My cats are called '; - const para = document.querySelector('p'); - - for (let i = 0; i < cats.length; i++) { - info += cats[i] + ', '; - } - - para.textContent = info; - - </script> - - </body> -</html></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 < 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 < cats.length</code>, ולא <code>i <= 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><=</code>) .</p> - -<p>אם אנחנו נרצה להריץ את הלולאה שלנו עד אשר <code>i = 5</code>, תנאי היציאה יצטרך להיות <code>i <= 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 < 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"><label for="search">Search by contact name: </label> -<input id="search" type="text"> -<button>Search</button> - -<p></p></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 < 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"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Simple contact search example</title> - <style> - - </style> - </head> - <body> - - <label for="search">Search by contact name: </label> - <input id="search" type="text"> - <button>Search</button> - - <p></p> - - - <script> - 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 < 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.'; - } - }); - </script> - - </body> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p> - -<ol> - <li>ראשית - הגדרנו קבועים - יש לנו מערך עם פרטי קשר - כאשר כל איבר במערך הוא מחרוזת המכילה שם ומספר טלפון המופרדים על ידי <code>:</code>. הגדרנו קבוע בשם <code>para</code> שמקבל הפנייה לאלמנט <code><p></code>. הגדרנו קבוע בשם <code>input</code> שמקבל הפניה לאלמנט <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);"><input></span></font> וקבוע בשם <code>btn</code> שמקבל הפניה ל-<code><button></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 <= 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"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Integer squares generator</title> - <style> - - </style> - </head> - <body> - - <label for="number">Enter number: </label> - <input id="number" type="text"> - <button>Generate integer squares</button> - - <p>Output: </p> - - - <script> - 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 <= num; i++) { - let sqRoot = Math.sqrt(i); - if (Math.floor(sqRoot) !== sqRoot) { - continue; - } - - para.textContent += i + ' '; - } - }); - </script> - - </body> -</html></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 < 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 < 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><div></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"><h2>Live output</h2> -<div class="output" style="height: 410px;overflow: auto;"> - -</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: 300px;width: 95%"> -let output = document.querySelector('.output'); -output.innerHTML = ''; - -// let i = 10; - -// const para = document.createElement('p'); -// para.textContent = ; -// output.appendChild(para); -</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">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 >= 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>admitted של פסקת code>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"><h2>Live output</h2> -<div class="output" style="height: 100px;overflow: auto;"> - <p class="admitted">Admit: </p> - <p class="refused">Refuse: </p> -</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%"> -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 += ; - -</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">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 < 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> diff --git a/files/he/learn/javascript/building_blocks/return_values/index.html b/files/he/learn/javascript/building_blocks/return_values/index.html deleted file mode 100644 index 52e224289b..0000000000 --- a/files/he/learn/javascript/building_blocks/return_values/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: return values - ערכים המוחזרים מפונקציה -slug: Learn/JavaScript/Building_blocks/Return_values -tags: - - Beginner - - Functions - - JavaScript - - Return values - - מדריך - - ערכים מוחזרים - - פונקציות -translation_of: Learn/JavaScript/Building_blocks/Return_values ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> - -<p class="summary">עקרון חשוב שנותר לנו לדון בו בהקשר של פונקציות הוא הערכים שהפונקציות יכולות להחזיר - <strong>return values</strong>. יש פונקציות שלא מחזירות ערך משמעותי אחרי שהן סיימו, אבל אחרות כן וזה חשוב שנבין מהם אותם ערכים, כיצד אנחנו יכולים לעשות בהם שימוש ואיך לגרום לפונקציות שאנחנו בונים להחזיר ערכים שנוכל להשתמש בהם. במאמר זה נדון בהיבטים אלו.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">ידע מוקדם:</th> - <td> - <p>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, סיום במלואו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>. וכן, את המאמר בנושא <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — פונקציות - חלקי קוד לשימוש חוזר</a>.</p> - </td> - </tr> - <tr> - <th scope="row">מטרה:</th> - <td>להבין מהם return values, וכיצד להתשמש בהם.</td> - </tr> - </tbody> -</table> - -<h2 id="מה_הם_return_values">מה הם return values?</h2> - -<p><strong>Return values</strong> הם בדיוק כמו שהם נשמעים - אלו ערכים שמוחזרים על ידי הפונקציה כאשר היא מסיימת. אנחנו כבר ראינו return values במספר פעמים, למרות שאולי לא חשבנו עליהם כך. נחזור לקוד שאנחנו מכירים:</p> - -<pre class="brush: js">var myText = 'I am a string'; -var newString = myText.replace('string', 'sausage'); -console.log(newString); -// the replace() string function takes a string, -// replaces one substring with another, and returns -// a new string with the replacement made</pre> - -<p>ראינו את הקוד הזה בעבר במאמר הראשון בנושא פונקציות. אנחנו קוראים/מפעילים את הפונקציה <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">()replace</a> על המחרוזת <code>myText</code> ומעבירים לה שני פרמטרים (ארגומנטים) - את המחרוזת משנה(<code>'string'</code>) שהיא צריכה לחפש במחרוזת הראשית (<code>myText</code>) ואת המחרוזת משנה החדשה שתחליף את המחרוזת משנה שנמצאה (<code>'sausage'</code>). כאשר פונקציה זו מסיימת - משלימה את הריצה שלה, היא מחזירה ערך, שהוא בעצם המחרוזת החדשה עם ההחלפה שבוצgה. בקוד למעלה, אנחנו שומרים את אותו ערך מוחזר כערך של המשתנה <code>newString</code> שלנו.</p> - -<p>אם תעיפו מבט על הדף שלנו בנושא פונקציית <code>()replace</code>, אתם תראו חלק שנקרא <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Return value</a>. תמיד חשוב לדעת ולהבין אלו ערכים מוחזרים על ידי פונקציה, על מנת שנוכל להשתמש בהם אם נרצה או כשנצטרך.</p> - -<p>חלק מהפונקציות לא מחזירות return value. במקרים כאלו, הערך המוחזר יהיה <code>void</code> או <code>undefined</code>. לדוגמא, בפונקציה <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">()displayMessage</a> שבנינו במאמר הקודם, אין ערך מוחזר כתוצאה מהשלמת ריצת הפונקציה. היא רק גרמה לקופסא להיות מוצגת איפשהו על המסך.</p> - -<p>באופן כללי, return value משמש כאשר הפונקציה היא שלב ביניים בחישוב כלשהו שאנחנו מבצעים לשם קבלת תוצאה סופית. ערכים מוחזרים אלו צריכים להיות מחושבים על ידי הפונקציה, והיא מחזירה את הערכים הללו בתור התוצאות של הקריאה לה (הריצה שלה), ובתוצאות הללו ניתן להשתמש בשלב הבא של החישוב.</p> - -<h3 id="שימוש_ב-_return_values_בפונקציות_שלנו">שימוש ב- return values בפונקציות שלנו</h3> - -<p>על מנת להחזיר ערך מפונקציה שאנחנו בונים, אנחנו צריכים להשתמש במילה השמורה <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a>. ראינו מילה זו בפעולה לאחרונה בתרגול שלנו בנושא <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. פונקציית <code>()draw</code> שלנו מציירת 100 עיגולים אקראיים על האלמנט {{htmlelement("canvas")}}:</p> - -<pre class="brush: js">function draw() { - ctx.clearRect(0,0,WIDTH,HEIGHT); - for (var i = 0; i < 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> - -<p>בכל איטרציה של הלולאה, מבוצעות שלוש קריאות לפונקציה <code>()random</code>, על מנת לייצר מספר אקראי לקוארדינטות <code>x</code> ו-<code>y</code> של העיגול הנוכחי וכן לרדיוס שלו. הפונקציה <code>()random</code> מקבלת ארגומנט אחד - מספר שלם - ומחזירה מספר שלם בין 0 לאותו מספר שלם שהכנסנו לה כארגומנט. זה נראה כך:</p> - -<pre class="brush: js">function randomNumber(number) { - return Math.floor(Math.random()*number); -}</pre> - -<p>הקוד למעלה היה יכול להירשם גם כך:</p> - -<pre class="brush: js">function randomNumber(number) { - var result = Math.floor(Math.random()*number); - return result; -}</pre> - -<p>אבל הגרסה הראשונה של הקוד קלה יותר לכתיבה וגם קומפקטית יותר.</p> - -<p>אנחנו מחזירים את התוצאה של החישוב <code>(Math.floor(Math.random()*number</code> בכל פעם שקוראים לפונקציה. הערכים המוחזרים הללו מופיעים ברגע שהפונקציה נקראת (מופעלת), והקוד ממשיך. לדוגמא, אם נריץ את השורות הבאות:</p> - -<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre> - -<p>ושלושת הקריאות לפונקציה <code>()random</code> החזירו נניח את הערכים 500, 200, ו- 35, בהתאמה, השורה תרוץ בפועל כאילו היא נכתבה כך :</p> - -<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre> - -<p>הקריאות לפונקציה באותה שורה רצות קודם והערכים המוחזרים של אותן קריאות נכנסים לתוך השורה עוד לפני ששורת הקוד עצמה מורצת במלואה.</p> - -<h2 id="למידה_עצמאית_הגדרת_-_return_value_של_הפונקציה_שלנו">למידה עצמאית: הגדרת - return value של הפונקציה שלנו</h2> - -<p>בתרגול זה אנחנו נכתוב פונקציות משלנו הכוללות return values.</p> - -<ol> - <li>ראשית, שמרו עותק מקומי של הקובץ <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> מ-GitHub. זהו דף HTML פשוט המיכל שדה טקסט {{htmlelement("input")}} ופסקה. בנוסף יש גם אלמנט {{htmlelement("script")}} כאשר בתוכו עשינו הפנייה לשני האלמנטים של ה-HTML בתוך שני משתנים. דף זה יאפשר לנו להכניס מספר כלשהו לתוך תיבת טקסט, ולהציג חישובים שונים על המספר הזה בתוך הפסקה שמתחת.</li> - <li>כעת, נוסיף פונקציות בתוך <code><script></code>. מתחת לשתי השורות הקיימות של JavaScript, הוסיפו את הגדרות הפונקציות הבאות: - <pre class="brush: js">function squared(num) { - return num * num; -} - -function cubed(num) { - return num * num * num; -} - -function factorial(num) { - var x = num; - while (x > 1) { - num *= x-1; - x--; - } - return num; -}</pre> - הפונקציות <code>()squared</code> ו- <code>()cubed</code> דיי ברורות - הן מחזירות את תוצאות ההכפלה או את השילוש של מספר שניתן להן כפרמטר, בעצמו. הפונקציה <code>()factorial</code> מחזירה את תוצאת העצרת של מספר מסויים. אם אתם לא זוכרים מה זה עצרת, ראו <a href="https://he.wikipedia.org/wiki/עצרת">הסבר על הערך </a>בויקיפדיה.</li> - <li>כעת, אנחנו הולכים להוסיף דרך להדפיס את כל המידע הזה לגבי המספר שהכנסנו. הכניסו את הקוד הבא, מתחת לפונקציות הנוכחיות: - <pre class="brush: js">input.onchange = function() { - var num = input.value; - if (isNaN(num)) { - para.textContent = 'You need to enter a number!'; - } else { - para.textContent = num + ' squared is ' + squared(num) + '. ' + - num + ' cubed is ' + cubed(num) + '. ' + - num + ' factorial is ' + factorial(num) + '.'; - } -}</pre> - - <p>הוספנו פונקציה בתור ״מטפל אירוע״ אשר תרוץ כל פעם שאירוע מסוג <code>onchange</code> החל להתרחש בשדה הטקסט שלנו (<code>input</code>), כלומר - כל פעם שמוכנס ערך חדש לתוך שדה הטקסט והערך הזה הוגש - כלומר לחצנו על אנטר או עברנו לאלמנט אחר בדף. כאשר פונקציה אנונימית זו רצה, הערך שהוכנס לתוך שדה הטקסט מאוחסן בתוך המשתנה <code>num</code>.</p> - </li> - <li> - <p>לאחר מכן, אנחו מבצעים בדיקה באמצעות משפט תנאי -</p> - - <ol> - <li> - <p>אם הערך שהוכנס <u><strong>אינו</strong></u> מספר, אנחנו נציג הודעת שגיאה לתוך הפסקה. המבחן שלנו מבצע שימוש בפונקציית <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">()isNaN</a> אשר בודקת האם הערך שהוכנס ב-<code>num</code> הוא לא מספר. אם הערך שהוכנס הוא מספר - היא מחזירה <code>false</code> ואם הוא לא מספר היא מחזירה <code>true</code>.</p> - </li> - <li> - <p>אם המבחן שלנו החזיר <code>false</code>, אז הערך של <code>num</code> הוא מספר ואנחנו יכולים להדפיס לתוך האלמנט <code>p</code> שלנו מהו תוצאת ההכפלה, השילוש והעצרת שלו. המשפט שלנו קורא לפונקציות <code>()squared()</code>, <code>cubed</code>, ו- <code>()factorial</code> על מנת לקבל את הערכים הללו.</p> - </li> - </ol> - </li> - <li>שמרו את הקוד ונסו אותו בדפדפן שלכם.</li> -</ol> - -<div class="note"> -<p><strong>לתשומת לב</strong>: אם נתקלתם בבעיות בתוכנית או אתם לא מצליחים לגרום לקוד שלכם לעבוד, נסו להשוו אותו ל<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">גרסה הסופית שלנו ב-GitHub</a> או ראו אותו כ<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">דף אינטרנט</a>.</p> -</div> - -<p>תרגיל זה ניסה להציג לכם כמה מהנקודות החשובות של ביטוי <code>return</code>. בנוסף:</p> - -<ul> - <li>הסתכלנו על דוגמא כיצד לכתוב טיפול בשגיאה בתוך הפונקציה שלנו. באופן עקרוני, מומלץ תמיד לבדוק שהפונקציה קיבלה את הפרמטרים הדרושים לה, ככל ואלו דרושים, ושהם בסוג הנכון. ואם פרמטרים אלו הם אופציונליים, אז מומלץ להגדיר מעין ערך ברירת מחדל. כך רוב הסיכויים שהתוכניות שלנו תהיה עם פחות שגיאות.</li> - <li>חישבו על הרעיון של ליצור לעצמכם ספריית פונקציות. ככל שתתקדמו בהמשך הלמידה והקריירה שלכם, אתה תיתקלו במקרים שבהם תצטרכו לעשות דברים דומים שוב ושוב. זה רעיון טוב ליצור לעצמכם ספריה של פונקציות שימושיות שאתם משתמשים בהם באופן תדיר, וכך אתם יכולים להעתיק אותם לפרוייקט חדש או פשוט להחיל אותם בכל פעם שתרצו.</li> -</ul> - -<h2 id="לסיכום">לסיכום</h2> - -<p>במאמר זה ובשני המאמרים הקודמים למדנו על פונקציות, כמה הן שימושיות וכיצד ניתן להשתמש בהם. יש כמובן הרבה מה להוסיף על פונקציות בנוגע לסינטקס שלהם ולפונקציונליות שלהם, שלושת המאמרים האחרונים בנושא פונקציות ניסו להסביר לכם את עקרונות היסוד והבסיס. הרגישו חופשי להרחיב את הידיעות שלכם בנושא בקישורים המופיעים מטה.</p> - -<h2 id="ראו_גם">ראו גם</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Functions in-depth</a> — מדריך מפורט בנושא פונקציות המפרט לעומק את האפשרויות השונות של הפונקציות, סינטקסים אפשריים נוספים ועוד.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Callback_function">Callback functions ב- JavaScript</a> — תבנית נפוצה ב-JavaScript היא להעביר פונקציה כארגומנט לתוך פונקציה אחרת, ואז הפונקציה נקראת בתוך הפונקציה שהיא הועברה אליה. מומלץ להרחיב את הידע בנושא.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "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> |