initial commit

1 files changed, 247 insertions, 0 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
new file mode 100644
index 0000000000..47df4e6b3a
--- /dev/null
+++ b/files/he/learn/javascript/building_blocks/build_your_own_function/index.html
@@ -0,0 +1,247 @@
+---
+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>&lt;script&gt;</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>&lt;div&gt;</code> יהיה אלמנט ילד של האלמנט <code>&lt;html&gt;</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>&lt;div&gt;</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>&lt;div&gt;</code>.</p>
+
+<pre class="brush: js notranslate">closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+
+<p>בעיקרון - כל הקוד הזה פשוט יוצר בלוק של HTML שנראה כך ומכניס את זה לתוך הדף:</p>
+
+<pre class="brush: html notranslate">&lt;div class="msgBox"&gt;
+  &lt;p&gt;This is a message box&lt;/p&gt;
+  &lt;button&gt;x&lt;/button&gt;
+&lt;/div&gt;</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>