initial commit

7 files changed, 1866 insertions, 0 deletions

diff --git a/files/he/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/he/learn/javascript/objects/adding_bouncing_balls_features/index.html
new file mode 100644
index 0000000000..23197f00c4
--- /dev/null
+++ b/files/he/learn/javascript/objects/adding_bouncing_balls_features/index.html
@@ -0,0 +1,214 @@
+---
+title: Adding features to our bouncing balls demo
+slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features
+translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">במשימה זאת, אתה צריך להשתמש בכדורים הקופצים מהמאמר הקודם כנקודת התחלה ולהוסיף אליה כמה פיצ'רים חדשים ומעניינים.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Before attempting this assessment you should have already worked through all the articles in this module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To test comprehension of JavaScript objects and object-oriented constructs</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Starting_point">Starting point</h2>
+
+<p>To get this assessment started, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> from our last article in a new directory in your local computer.</p>
+
+<p>Alternatively, you could use a site like <a class="external external-icon" href="http://jsbin.com/">JSBin</a> or <a class="external external-icon" href="https://glitch.com/">Glitch</a> to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have separate JavaScript/CSS panels, feel free to put them inline <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> elements inside the HTML page.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p>
+</div>
+
+<h2 id="Hints_and_tips">Hints and tips</h2>
+
+<p>A couple of pointers before you get started.</p>
+
+<ul>
+ <li>This assessment is quite challenging. Read the whole assessment before you start coding, and take each step slowly and carefully.</li>
+ <li>It might be a good idea to save a separate copy of the demo after you get each stage working, so you can refer back to it if you find yourself in trouble later on.</li>
+</ul>
+
+<h2 id="Project_brief">Project brief</h2>
+
+<p>Our bouncy ball demo is fun, but now we want to make it a little bit more interactive by adding a user-controlled evil circle, which will eat the balls if it catches them. We also want to test your object-building skills by creating a generic <code>Shape()</code> object that our balls and evil circle can inherit from. Finally, we want to add a score counter to track the number of balls left to capture.</p>
+
+<p>The following screenshot gives you an idea of what the finished program should look like:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p>To give you more of an idea, have a look at the <a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">finished example</a> (no peeking at the source code!)</p>
+
+<h2 id="Steps_to_complete">Steps to complete</h2>
+
+<p>The following sections describe what you need to do.</p>
+
+<h3 id="Creating_our_new_objects">Creating our new objects</h3>
+
+<p>First of all, change your existing <code>Ball()</code> constructor so that it becomes a <code>Shape()</code> constructor and add a new <code>Ball()</code> constructor:</p>
+
+<ol>
+ <li>The <code>Shape()</code> constructor should define the <code>x</code>, <code>y</code>, <code>velX</code>, and <code>velY</code> properties in the same way as the <code>Ball()</code> constructor did originally, but not the <code>color</code> and <code>size</code> properties.</li>
+ <li>It should also define a new property called <code>exists</code>, which is used to track whether the balls exist in the program (have not been eaten by the evil circle). This should be a boolean (<code>true</code>/<code>false</code>).</li>
+ <li>The <code>Ball()</code> constructor should inherit the <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, and <code>exists</code> properties from the <code>Shape()</code> constructor.</li>
+ <li>It should also define a <code>color</code> and a <code>size</code> property, like the original <code>Ball()</code> constructor did.</li>
+ <li>Remember to set the <code>Ball()</code> constructor's <code>prototype</code> and <code>constructor</code> appropriately.</li>
+</ol>
+
+<p>The ball <code>draw()</code>, <code>update()</code>, and <code>collisionDetect()</code> method definitions should be able to stay exactly the same as they were before.</p>
+
+<p>You also need to add a new parameter to the <code>new Ball() ( ... )</code> constructor call — the <code>exists</code> parameter should be the 5th parameter, and should be given a value of <code>true</code>.</p>
+
+<p>At this point, try reloading the code — it should work just the same as it did before, with our redesigned objects.</p>
+
+<h3 id="Defining_EvilCircle">Defining EvilCircle()</h3>
+
+<p>Now it's time to meet the bad guy — the <code>EvilCircle()</code>! Our game is only going to involve one evil circle, but we are still going to define it using a constructor that inherits from <code>Shape()</code> to give you some practice. You might want to add another circle to the app later on that can be controlled by another player, or have several computer-controlled evil circles. You're probably not going to take over the world with a single evil circle, but it will do for this assessment.</p>
+
+<p>The <code>EvilCircle()</code> constructor should inherit <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, and <code>exists</code> from <code>Shape()</code>, but <code>velX</code> and <code>velY</code> should always equal 20.</p>
+
+<p>You should do this something like <code>Shape.call(this, x, y, 20, 20, exists);</code></p>
+
+<p>It should also define its own properties, as follows:</p>
+
+<ul>
+ <li><code>color</code> — <code>'white'</code></li>
+ <li><code>size</code> — <code>10</code></li>
+</ul>
+
+<p>Again, remember to define your inherited properties as parameters in the constructor, and set the <code>prototype</code> and <code>constructor</code> properties correctly.</p>
+
+<h3 id="Defining_EvilCircles_methods">Defining EvilCircle()'s methods</h3>
+
+<p><code>EvilCircle()</code> should have four methods, as described below.</p>
+
+<h4 id="draw"><code>draw()</code></h4>
+
+<p>This method has the same purpose as <code>Ball()</code>'s <code>draw()</code> method: It draws the object instance on the canvas. It will work in a very similar way, so you can start by copying the <code>Ball.prototype.draw</code> definition. You should then make the following changes:</p>
+
+<ul>
+ <li>We want the evil circle to not be filled in, but rather just have an outer line (stroke). You can achieve this by updating <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> and <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> to <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> and <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li>
+ <li>We also want to make the stroke a bit thicker, so you can see the evil circle a bit more easily. This can be achieved by setting a value for <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> somewhere after the <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> call (3 will do).</li>
+</ul>
+
+<h4 id="checkBounds"><code>checkBounds()</code></h4>
+
+<p>This method will do the same thing as the first part of <code>Ball()</code>'s <code>update()</code> function — look to see whether the evil circle is going to go off the edge of the screen, and stop it from doing so. Again, you can mostly just copy the <code>Ball.prototype.update</code> definition, but there are a few changes you should make:</p>
+
+<ul>
+ <li>Get rid of the last two lines — we don't want to automatically update the evil circle's position on every frame, because we will be moving it in some other way, as you'll see below.</li>
+ <li>Inside the <code>if()</code> statements, if the tests return true we don't want to update <code>velX</code>/<code>velY</code>; we want to instead change the value of <code>x</code>/<code>y</code> so the evil circle is bounced back onto the screen slightly. Adding or subtracting (as appropriate) the evil circle's <code>size</code> property would make sense.</li>
+</ul>
+
+<h4 id="setControls"><code>setControls()</code></h4>
+
+<p>This method will add an <code>onkeydown</code> event listener to the <code>window</code> object so that when certain keyboard keys are pressed, we can move the evil circle around. The following code block should be put inside the method definition:</p>
+
+<pre class="brush: js notranslate">let _this = this;
+window.onkeydown = function(e) {
+    if (e.key === 'a') {
+      _this.x -= _this.velX;
+    } else if (e.key === 'd') {
+      _this.x += _this.velX;
+    } else if (e.key === 'w') {
+      _this.y -= _this.velY;
+    } else if (e.key === 's') {
+      _this.y += _this.velY;
+    }
+  }</pre>
+
+<p>So when a key is pressed, the event object's <code><a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> property is consulted to see which key is pressed. If it is one of the four represented by the specified keycodes, then the evil circle will move left/right/up/down.</p>
+
+<p>For a bonus point, can you tell us why we've had to set <code>let _this = this;</code> in the position it is in? It is something to do with function scope.</p>
+
+<h4 id="collisionDetect"><code>collisionDetect()</code></h4>
+
+<p>This method will act in a very similar way to <code>Ball()</code>'s <code>collisionDetect()</code> method, so you can use a copy of that as the basis of this new method. But there are a couple of differences:</p>
+
+<ul>
+ <li>In the outer <code>if</code> statement, you no longer need to check whether the current ball in the iteration is the same as the ball that is doing the checking — because it is no longer a ball, it is the evil circle! Instead, you need to do a test to see if the ball being checked exists (with which property could you do this with?). If it doesn't exist, it has already been eaten by the evil circle, so there is no need to check it again.</li>
+ <li>In the inner <code>if</code> statement, you no longer want to make the objects change color when a collision is detected — instead, you want to set any balls that collide with the evil circle to not exist any more (again, how do you think you'd do that?).</li>
+</ul>
+
+<h3 id="Bringing_the_evil_circle_into_the_program">Bringing the evil circle into the program</h3>
+
+<p>Now we've defined the evil circle, we need to actually make it appear in our scene. To do this, you need to make some changes to the <code>loop()</code> function.</p>
+
+<ul>
+ <li>First of all, create a new evil circle object instance (specifying the necessary parameters), then call its <code>setControls()</code> method. You only need to do these two things once, not on every iteration of the loop.</li>
+ <li>At the point where you loop through every ball and call the <code>draw()</code>, <code>update()</code>, and <code>collisionDetect()</code> functions for each one, make it so that these functions are only called if the current ball exists.</li>
+ <li>Call the evil ball instance's <code>draw()</code>, <code>checkBounds()</code>, and <code>collisionDetect()</code> methods on every iteration of the loop.</li>
+</ul>
+
+<h3 id="Implementing_the_score_counter">Implementing the score counter</h3>
+
+<p>To implement the score counter, follow the following steps:</p>
+
+<ol>
+ <li>In your HTML file, add a {{HTMLElement("p")}} element just below the {{HTMLElement("h1")}} element containing the text "Ball count: ".</li>
+ <li>In your CSS file, add the following rule at the bottom:
+  <pre class="brush: css notranslate">p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}</pre>
+ </li>
+ <li>In your JavaScript, make the following updates:
+  <ul>
+   <li>Create a variable that stores a reference to the paragraph.</li>
+   <li>Keep a count of the number of balls on screen in some way.</li>
+   <li>Increment the count and display the updated number of balls each time a ball is added to the scene.</li>
+   <li>Decrement the count and display the updated number of balls each time the evil circle eats a ball (causes it not to exist).</li>
+  </ul>
+ </li>
+</ol>
+
+<ul>
+</ul>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li>
+ <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Adding bouncing balls features".</li>
+   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
+   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/he/learn/javascript/objects/basics/index.html b/files/he/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..25c439e43d
--- /dev/null
+++ b/files/he/learn/javascript/objects/basics/index.html
@@ -0,0 +1,257 @@
+---
+title: JavaScript object basics
+slug: Learn/JavaScript/Objects/Basics
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">במאמר בזה, אנחנו נסתכל על עקרונות הסינטקס הבסיסים של אובייקטים ב-JavaScript, ונבקר בחלק ממאפייניה של השפה שנתקלנו בה בעבר, ונבין כי חלק ממאפיינים אלו הם בעצם אובייקטים.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>הבנת התיאוריה הבסיסית שעומדת מאחורי תכנות מונחה עצמים, כיצד זה מתקשר ל-JavaScript (״רוב הדברים הם אובייקטים״) והבנה כיצד ניתן לעבוד עם אובייקטים ב-JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Object_-_אובייקטים_-_עקרונות_יסוד">Object - אובייקטים - עקרונות יסוד</h2>
+
+<p>אובייקט הוא אוסף של מידע או פונקציונליות (בדרך מכיל מספר של מתשנים ופונקציות, אשר נקראים - מאפיינים (properties) ו-מתודות (Methodes) כאשר ה נמצאים בתוך אובייקט). נסתכל על דוגמא על מנת להמחיש את הנושא.</p>
+
+<p>על מנת להתחיל, הכינו עותק מקומי של <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. קובץ זה מכיל אלמנט של {{HTMLElement("script")}} על מנת שבתוכו נכתוב את הקוד שלנו. אנחנו נשתמש בתצורה הזו על מנת להבין את הסינטקס הבסיסי של אובייקטים. יד עם קובץ זה, פתחו את <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a>.</p>
+
+<p>כמו בהרבה דברים ב-JavaScript, יצירת אובייקט לרוב מתחילים עם הגדרת ואתחול של משתנה. נסו להכניס את הקוד הבא לתוך קוד ה-JavaScript שבקובץ ולאחר מכן שמרו ורעננו את הדף:</p>
+
+<pre class="brush: js notranslate">const person = {};</pre>
+
+<p>כעת פתחו את הקונסולה בדפדפן והזינוו <code>person</code> בתוך הקונסולה, ולאחר מכן לחצו על , <kbd>Enter</kbd>/<kbd>Return</kbd>. אתם אמורים לקבל תוצאה שנראית כך:</p>
+
+<pre class="brush: js notranslate">[object Object]
+Object { }
+{ }
+</pre>
+
+<p>מזל טוב, הרגע יצרתם את האובייקט הראשון שלכם. יחד עם זאת, זהו אובייקט ריק, אז אין יותר מדי מה לעשות איתו. נעדכן את האובייקט שלנו בתוך הקובץ כך שייראה בתצורה הזו:</p>
+
+<pre class="brush: js notranslate">const person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p>לאחר שמירה ורענון של הדף, נסו להכניס את השורות הבאות לתוך הקונסולה:</p>
+
+<pre class="brush: js notranslate">person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p>כעת יש לנו מידע ופונקציונליות בתוך האובייקט שלנו, ואנחנו יכולים לגשת אליהם באמצעות סינטקס פשוט:</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם אינכם מצליחים לגרום לכך לעבוד, נסו להשוות אל מול הקובץ שלנו <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> או ראו את <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html"> דף האינטרנט ופתחו את הקונסולה בדף זה</a></p>
+</div>
+
+<p>אובייקט מורכב ממספר רכיבים, כאשר לכל רכיב יש שם   (<code>name</code> ו- <code>age</code> למעלה), וכן יש לכל רכיב value (e.g. <code>['Bob', 'Smith']</code> ו- <code>32</code>). כל צמד של שם/ערך חייב להיות מופרד באמצעות פסיק , והשם והערך בכל צמד חייבים להיות מופרדים עם :. הסינטקס תמיד ייראה בתבנית הזו:</p>
+
+<pre class="brush: js notranslate">const objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};</pre>
+
+<p>הערך של אובייקט יכול להיות כל דבר - במקרה שלנו, האובייקט person, יש לנו מחרוזת, מספר, שני מערכים, ושתי פונקציות. ארבעת הצמדים הראשונים הם פריטי מידע והם נקראים כ-properties של האובייקט. שני הצמדים האחרונים אלו פונקציות שמאפשרות לאובייקט לעשות משהו עם המידע הזה, והם נקראים ה-methods של האובייקט.</p>
+
+<p>אובייקט כמו זה נקרא <strong>object literal</strong> — אנחנו באופן ליטראלי )מפורש) יצרנו את האובייקט והתוכן שלו. זה בניגוד לאובייקטים שנוצרו ממחלקות (classs) שאשר נראה בהמשך.</p>
+
+<p>זה נפוץ מאוד ליצור אובייקט באמצעות <strong>object literal</strong> כאשר אנחנו רוצים להעביר סדרה של פריטי מידע קשורים ובמבנה מסויים, לדוגמא, שליחת בקשה לשרת לצורך השמה במאגר המידע. שליחה של אובייקט יחיד היא יעילה יותר מאשר שליחה של כמה פריטי מידע בנפרד, וזה קל יותר לעבוד עם אובייקט מאשר עם מערך, כאשר אנחנו רוצים לזהות כל פריט באמצעות השם שלךו.</p>
+
+<h2 id="Dot_notation_שימוש_בנקודה-">Dot notation שימוש בנקודה-</h2>
+
+<p>למעלה, אנחנו יכולים לגשת למתודות ולפרופ׳ של האובייקט באמצעות <strong>dot notation</strong>. שם האובייקט - person - משמש כ-<strong>namespace</strong> - הוא חייב להיות מוכנס ראשון, על מנת לקבל גישה לכל מה שמוכס - <strong>encapsulated</strong> בתוך האובייקט. לאחר מכן אנחנו רושמים נקודה <code>.</code> ואז את הפריט מידע שאנחנו רוצים לגשת אליו - זה יכול שם של פרופ׳ מסויים, או לקרוא לאחת מהמתודות של האובייקט. לדוגמא:</p>
+
+<pre class="brush: js notranslate">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Sub-namespaces">Sub-namespaces</h3>
+
+<p>זה אפילו אפשרי ליצור אובייקט כערך מסויים של אובייקט אחר. כך לדוגמא, נסו לשנות את ערך הפרופ׳ name מהקוד הבא:</p>
+
+<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre>
+
+<p>לקוד זה:</p>
+
+<pre class="brush: js notranslate">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>כאן אנחנו בעצם יצרנו <strong>sub-namespace</strong>. זה אולי נשמע מורכז, אבל זה לא - על מנת לגשת לפריטים אלו, אנחנו פשוט צריכים להשתמש בעוד נקודה <code>.</code>. נסו להזין את הקוד הבא בקונסולה:</p>
+
+<pre class="brush: js notranslate">person.name.first
+person.name.last</pre>
+
+<p><strong>חשוב</strong>: לאחר שינוי זה אתם צריכים גם לשנות במתודות את צורת הכתיבה לאור כך ששינינו את הערך ממערך לאובייקט</p>
+
+<pre class="brush: js notranslate">name[0]
+name[1]</pre>
+
+<p>לתצורה הבאה:</p>
+
+<pre class="brush: js notranslate">name.first
+name.last</pre>
+
+<p>אחרת המתודות לא יעבדו.</p>
+
+<h2 id="Bracket_notation_-_שימוש_בסוגריים_מרובעות">Bracket notation - שימוש בסוגריים מרובעות</h2>
+
+<p>יש דרך נוספת לגשת לפרופ׳ של האובייקט - באמצעות שימוש בסוגריים מרובעות. במקום הקוד הבא:</p>
+
+<pre class="brush: js notranslate">person.age
+person.name.first</pre>
+
+<p>אנחנו יכולים להשתמש בקוד זה:</p>
+
+<pre class="brush: js notranslate">person['age']
+person['name']['first']</pre>
+
+<p>זה אמנם נראה מאוד דומה לדרך שבה אנחנו ניגשים לאיברים במערך, ובעיקרון זה אותו דבר - אך במקום להשתמש במספר אינדקס על מנת לבחור איבר מסויים, כפי שנאחנו עושים במערך, אנחנו משתמשים בשם המקושר לכל ערך. זה לא פלא שלפעמים אובייקטים נקראים <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p>
+
+<h2 id="הגדרת_מפתחות_ומתודות_לאובייקט_-">הגדרת מפתחות ומתודות לאובייקט -</h2>
+
+<p>עד עכשיו ראינו כיצד לאחזר או לגשת לפריטים באובייקט - אך אנחנו יכולים גם לקבוע או לעדכן את הערכים של אותם פריטים ואף ליצור מפתחות ומתודות חדשים, באמצעות הצהרה על אותו מפתח או מתודה שאנחנו רוצים לעדכן או קבוע - (באמצעות שימוש בנקודה או בסוגריים המרובעות) כך:</p>
+
+<pre class="brush: js notranslate">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>נסו להזין את השורות למעלה ואז לגשת לערכים ששיניתם באמצעות הקוד על מנת לראות השינוי:</p>
+
+<pre class="brush: js notranslate">person.age
+person['name']['last']</pre>
+
+<p>קביעת ערכים במפתחות או מתודות קיימים היא רק אחד מהדברים שניתן לעשות. כפי שאמרנו למעלה, ניתן גם ליצור מפתחות ומתודות חדשים לאותו אובייקט. נסו להזין את הקוד הבא בקונסולה:</p>
+
+<pre class="brush: js notranslate">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>וכעת בדקו את המפתח והמתודה החדשה כך:</p>
+
+<pre class="brush: js notranslate">person['eyes']
+person.farewell()</pre>
+
+<p>היבט מאוד שימושי של שימוש בסוגריים מרובעות הוא שזה לא רק מאפשר לנו לקבוע את הערכים של אותו פריט בצורה דינאמית, אלא גם את השם של אותו פרופ׳ . נניח שאנחנו רוצים שהמשתמשים יוכלו לאחסן ערכים שונים בתוך המידע, באמצעות One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:</p>
+
+<pre class="brush: js notranslate">let myDataName = nameInput.value;
+let myDataValue = nameValue.value;</pre>
+
+<p>We could then add this new member name and value to the <code>person</code> object like this:</p>
+
+<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre>
+
+<p>To test this, try adding the following lines into your code, just below the closing curly brace of the <code>person</code> object:</p>
+
+<pre class="brush: js notranslate">let myDataName = 'height';
+let myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>Now try saving and refreshing, and entering the following into your text input:</p>
+
+<pre class="brush: js notranslate">person.height</pre>
+
+<p>הוספת פרופ׳ לאובייקט באמצעות המתודה לעיל אינה אפשרית כאשר אנחנו משתמשים ב-dot notation, כי היא מקבלת רק ערך ליטרלי ולא ערך של משתנה מסויים שמצביע על אותו שם.</p>
+
+<h2 id="מה_זה_this">מה זה "this"?</h2>
+
+<p>אולי שמתם לב למשהו קצת מוזר בתוך המתודות שלנו. ראו את הדוגמא הבאה:</p>
+
+<pre class="brush: js notranslate">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>אתם בטח שואלים את עצמכם מה זה "this". המילה השומרה <code>this</code> מתייחסת לאובייקט שהקוד נכתב בתוכו - אז במקרה הזה המילה <code>this</code> שווה ל- <code>person</code>. אז מדוע לא לרשום <code>person</code> במקום? כפי שתראו במאמר שלנו בנושא<a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript מתחילים</a> - כאשר אנחנו יוצרים קונסטרקטורים, המילה <code>this</code> היא מאוד שימושית - היא תבטיח לנו תמיד שהערכים הנכונים מושמים בכל פעם שהמופעים של האובייקט פפפפפ נוצרים - גלומר - אובייקטים שנוצרו - 999999, יהיו בעלי ערכים שונים article, when we start creating constructors and so on, <code>this</code> is very useful — it will always ensure that the correct values are used when a member's context changes (e.g. two different <code>person</code> object instances may have different names, but will want to use their own name when saying their greeting).</p>
+
+<p>ננסה לפשט ולהסביר באמצעות יצירת שני אובייקטים של person:</p>
+
+<pre class="brush: js notranslate">const person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+const person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>במקרה הזה, <code>person1.greeting()</code> יציג "Hi! I'm Chris.";ואילו <code>person2.greeting()</code> יציג "Hi! I'm Brian.", למרות שהקוד של המתודה הוא זהה לחלוטין. כפי שאמרנו למעלה, <code>this</code> שוה בעצם לאובייקט שהקוד נמצא בתוכו - this לא משמעותי ושימושי כאשר אנחנו יוצרים אובייקטים באמצעות אובייקט ליטראלי, אבל הוא מאוד שימושי כאשר אנחנו יוצרים אובייקטים באופן דינאמי (באמצעות קונסטרקטורים לדוגמא). זה יהיה ברור יותר בהמשך הדרך, מבטיחים.</p>
+
+<h2 id="השתמשנו_באובייקטים_לאורך_כל_הזמן_הזה">השתמשנו באובייקטים לאורך כל הזמן הזה</h2>
+
+<p>ככל שאנחנו עוברים על הדוגמאות הללו, אתם בטח חושבים לעצמכם שכבר השתמשנו בעבר בתחביר של סימון נקודה, וזה נכון. בכל פעם שאנחנו השתמשנו בדוגמא אשר משתמשת ב-api מובנה של הדפדפן או באובייקט של javascript, אנחנו בעצם השתמשנו באובייקטים, מכיוון שאותם מאפיינים נבנו באמצעות שימוש במבנה זה למבנה של אובייקט שהסברנו עליו במודול זה, אמנם בצורה קצת יותר מורכבת מהדוגמאות שלנו כאן, אך במבנה דומה.</p>
+
+<p>כאשר אנחנו משתמשים במתודות של מחרוזות כאלו לדוגמא:</p>
+
+<pre class="brush: js notranslate">myString.split(',');</pre>
+
+<p>אנחנו בעצם מתשמשים במתודה שזמינה לנו באמצעות האובייקט הגלובלי <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. בכל פעם שאנחנו יוצרים מחרוזת בקוד שלנו, מחרוזת זו באופן אוטומטי נוצרת כמופע/מודל/דוגמא של <code>String</code>, ולכן יש לה מספר מתודות ופרופ׳ אשר זמינות לה.</p>
+
+<p>כאשר אנחנו ניגשים ל-<strong>d</strong>ocument <strong>o</strong>bject <strong>m</strong>odel אמצעות הקוד הבא:</p>
+
+<pre class="brush: js notranslate">const myDiv = document.createElement('div');
+const myVideo = document.querySelector('video');</pre>
+
+<p>אנחנו מתשמשים במתודות שזמינות לנו עבור מופע של ה-<code><a href="/en-US/docs/Web/API/Document">Document</a></code>. לכל דף אינטרנט שמועלה, נוצר מופע של <code>Document</code>, אשר נקרא <code>document</code>והוא מייצג את כל המבנה, תוכן ומאפיינים נוספים של אותו דף (כמו לדוגמא ה-URL שלו). וזה אומר שיש לו מספר מתודות ומפתחות שזמינים עבור אותו מופע זה.</p>
+
+<p>אותו הדבר בערך קורה עם הרבה אובייקטים מובנים/api שאנחנו משתשמים בהם — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, וכך הלאה.</p>
+
+<p>שימו לב שbuilt in Objects/APIs לא תמיד יוצרים מופעים של אובייקט באופן אוטומטי. לדוגמא, ה- <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — אשר מאפשר לדפדפנים מודרניים להזרים התראות מערת - דורש מאיתנו לייצר מופע אובייקט חדש באמצעות קונסטקטור, עבור כל התראה שנרצה להזרים. נסו להזין את הקוד הבא בקוסולה: :</p>
+
+<pre class="brush: js notranslate">const myNotification = new Notification('Hello!');</pre>
+
+<p>אנו נסתכל על קונסרקטורים במאמרים הבאים.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: זה מאוד שימושי לחשוב על הדרך שבה אובייקטים מתקשרים כ- <strong>message passing</strong> — כאשר אובייקט אחד צריך אובייקט אחד על מנת לבצע פעולה מסויימת, הוא לרוב ישלח הודעה לאותו אובייקט באמצעו תאחת המתודות שלו ויחכה לתגובה, שהיא בעצם ה- return value.</p>
+</div>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>סיימנו את המאמר הראשונות שלנו בנושא אובייקטים ב-JavaScript - כעת, אמור להיות לכם בסיס כיצד לעבוד עם אובייקטים ב-JavaScript, כיצד ליצור אובייקטים פשוטים בעצמם. הבנו גם שאובייקטים הם מבנה מאוד שימוש לאחסון של מידע ופונקציונליות הקשורים זה בזה - אם היינו מנסים לשמור את כל המידע והפונקציונליות של האובייקט <code>person</code> כמשתנים ופונקציות נפרדות, זה היה מאתגר וקשה. אבוייקטים מאפשרים לנו לשמור את המידע בצורה בטוחה ונעולה בתוך חבילה משל עצמו.</p>
+
+<p>במאמר הבא אנחנו נסתכל על תיאוריית object-oriented programming (OOP), וכיצד טכניקות שכאלו יכולות לשמש אותנו ב- JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript למתחילים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Inheritance">הורשה ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/JSON">עבודה עם JSON data</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_building_practice">שיטות ליצירת אובייקטים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/he/learn/javascript/objects/index.html b/files/he/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..3b033ee0e8
--- /dev/null
+++ b/files/he/learn/javascript/objects/index.html
@@ -0,0 +1,54 @@
+---
+title: Introducing JavaScript objects
+slug: Learn/JavaScript/Objects
+tags:
+  - Article
+  - Assessment
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - Objects
+  - TopicStub
+  - Tutorial
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">ב-JavaScript, רוב הדברים הם אובייקטים, החל מהמאפיינים הבסיסיים של השפה כמו מחרוזות ומערכים, ועד {{Glossary("API", "APIs")}} של הדפדפן שבנויים מעל JavaScript. אנחנו אפילו יכולים ליצור אובייקטים בעצמנו, ו-״להכמיס״ בתוכן פונקציות ומשתנים כך שיתפקדו ככלי להכלת מידע מאוד שימושי. חשוב להבין את הרעיון של JavaScript סביב האובייקט אם אנחנו רוצים להמשיך להתקדם בלמידה שלנו של שפה זו, ומודול זה נועד בדיוק לשם כך. במודול זהנלמד על התיאוריה סביב אובייקט וכן על הסינטקס בפרטים ומשם נמשיך ליצירת אובייקטים בעצמנו</p>
+
+<h2 id="ידע_מוקדם">ידע מוקדם</h2>
+
+<p>לפני שתחלו בלימוד מודול זה, ודאו כי אתם בקיאים ב- {{Glossary("HTML")}} וב- {{Glossary("CSS")}}. אנו ממליצים לכם לעבור על המודולים בנושא <a href="https://developer.mozilla.org/he/docs/Web/Guide/HTML/Introduction">הכרות עם HTML</a> ו-<a href="https://developer.mozilla.org/he/docs/Learn/CSS/Introduction_to_CSS">הכרות עם CSS</a> לפני שתמשיכו בלימוד JavaScript.</p>
+
+<p>בנוסף, הנכם מתבקשים לעבור על עקרונות הבסיס של JavaScript לפני שתמשיכו במודול זה. לשם כך, וודאו כי הנכם בקיאי במודול <a href="/he/docs/Learn/JavaScript/First_steps">צעדים ראשונים ב-JavaScript</a> ובמודול <a href="/he/docs/Learn/JavaScript/Building_blocks">אבני הבניין של 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="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a></dt>
+ <dd>במאמר הראשון אנחנו נסתכל על אובייקטים ב-JavaScript, ועל הסינטקס הבסיסי והחשוב של אובייקט. נבקר שוב כמה מאפשרויות של JavaScript שכבר ראינו לפני כן בקורס, ונבין שהרבה מאותן אפשרויות אלו שנתקלנו בהן בעבר, הן בעצם אובייקטים.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Objects/Object-oriented_JS">תכנות מונחה עצמים ב-JavaScript למתחילים</a></dt>
+ <dd>לאחר שסיימנו עם הבסיס, נתמקד במעבר על התיאוריה של תכנות מונחה עצמים (object-oriented programming (OOP)) ב-JavaScript (object-oriented JavaScript (OOJS)) - מאמר זה יספק רקע בסיסי על תכנות מונחה עצמים בכלל, ולאחר מכן נחקור כיצד JavaScript מחקה (מלשון: חיקוי) מחלקות (classes) באמצעות constructor functions ואיך אנחנו יוצרים אובייקט.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes - טיפוסי אב של אובייקט</a></dt>
+ <dd>טיפוסי אב - Prototypes - זה המנגנון שבאמצעותו אובייקטים ב-JavaScript יורשים מאפיינים אחד מהשנים, והם עובדים בצורה אחרת מאשר מנגנוני הורשה הקיימים בשפות לתכנות מונחה עצמים אחרות. במאמר זה אנחנו נחקור את ההבדלים השונים, נסביר כיצד שרשרת אבי הטיפוס (prototype chains) עובדת ונסתכל על איך ה-property שנקרא prototype יכול לשמש על מנת להוסיף מתודות לקונסטרקטורים קיימים.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Objects/Inheritance">הורשה ב-JavaScript</a></dt>
+ <dd>לאחר שסיימנו להסביר על התיאוריה של תכנות מונחה עצמים (object-oriented programming (OOP)) ב-JavaScript, מאמר זה יראה איך ליצור מחלקות בנות (constructors) שיורשות מאפיינים מהמחלקות ״הורים״ With most of the gory details of OOJS now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes. In addition, we present some advice on when and where you might use OOJS.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></dt>
+ <dd>JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax, which is commonly used for representing and transmitting data on web sites (i.e. sending some data from the server to the client, so it can be displayed on a web page). You'll come across it quite often, so in this article we give you all you need to work with JSON using JavaScript, including parsing the JSON so you can access data items within it and writing your own JSON.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></dt>
+ <dd>In previous articles we looked at all the essential JavaScript object theory and syntax details, giving you a solid base to start from. In this article we dive into a practical exercise, giving you some more practice in building custom JavaScript objects, which produce something fun and colorful — some colored bouncing balls.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></dt>
+ <dd>In this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it.</dd>
+</dl>
diff --git a/files/he/learn/javascript/objects/inheritance/index.html b/files/he/learn/javascript/objects/inheritance/index.html
new file mode 100644
index 0000000000..1d43d06d14
--- /dev/null
+++ b/files/he/learn/javascript/objects/inheritance/index.html
@@ -0,0 +1,437 @@
+---
+title: Inheritance in JavaScript
+slug: Learn/JavaScript/Objects/Inheritance
+translation_of: Learn/JavaScript/Objects/Inheritance
+---
+<div dir="rtl">{{LearnSidebar}}</div>
+
+<div dir="rtl">{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary" dir="rtl">לאחר שסיימנו עם התיאוריה והפרטים של OOJS, המאמר הזה נועד להראות כיצד ליצור מחלקות אובייקטים ״ילדים״ (constructors) אשר יורשים מההורים שלהם. אנו גם נציג מעין עצות מתי נרצה להשתמש ב-OOJS ונסתכל כיצד ״מחלקות״ מתבצעות בסינטקס המודרני של ECMAScript.</p>
+
+<table class="learn-box standard-table" dir="rtl">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>
+    <p>אוריינות מחשב בסיסית, הבנה בסיסית ב-HTML ו ב-CSS, היכרות עם יסודות ה-JavaScript (ראה <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) and OOJS basics (see <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין כיצד זה אפשרי להחיל הורשה ב- JavaScript</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="Prototypal_inheritance">Prototypal inheritance</h2>
+
+<p dir="rtl">עד עכשיו ראינו קצת הורשה בפעולה - ראינו כיצד prototype chains עובדות וכיצד מתודות ופרופ׳ מורשים בהמשך השרשרת. אבל זה היה בעיקר עם פונקציות מובנות של הדפדפן. כיצד אנחנו יכולים ליצור אובייקט ב-JavaScript אשר יורש מאובייקט אחר?</p>
+
+<h2 dir="rtl" id="דוגמא">דוגמא:</h2>
+
+<p dir="rtl">ראשית, עשו עותק מקומי של <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">הקובץ</a> או ראו אותו כ<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">דף אינטרנט</a>. בקוד זה אתם תראו את ה-<code>Person()</code> constructor שהשתמשנו בו לאורך המודול, עם שינוי קל - הגדרנו רק את ה-properties בתוך ה-constructor.</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};</pre>
+
+<p dir="rtl">כל המתודות <em>כולן</em> מוגדרות בתוך ה-constructor's prototype. לדוגמא:</p>
+
+<pre class="brush: js" dir="rtl">Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};</pre>
+
+<div class="note" dir="rtl">
+<p><strong>לתשומת לבך</strong>: בקוד המקור אתם גם תראו מתודות נוספות שמוגדרות, <code>()bio</code> ו-<code>()farewell</code>. אנחנו נראה בהמשך כיצד מתודות אלו יכולות להיות מורשות ל-constructors אחרים.</p>
+</div>
+
+<p dir="rtl">נניח ואנחנו רוצים ליצור מחלקה של <code>Teacher</code>, כמו זו שהסברנו בתחילת המודול לגבי תכנות מונחה עצמים, ומחלקה זו יורשת את כל הפרופ׳ והמתודות של <code>Person</code>, אבל גם כוללת:</p>
+
+<ol dir="rtl">
+ <li>ה- property החדש בשם <code>subject</code> — אשר יכיל את נושאי הלימוד שהמורה מלמד.</li>
+ <li>מתודה <code>()greeting</code> מעודכנת, אשר תהיה יותר רשמית מהמתודה <code>()greeting</code> הרגילה.</li>
+</ol>
+
+<h2 dir="rtl" id="הגדרה_של_ה-constructor_function_בשם_Teacher">הגדרה של ה-constructor function בשם ()Teacher</h2>
+
+<p dir="rtl">הדבר הראשון שאנחנו צריכים לעשות הוא להגדיר את ה-constructor בשם <code>()Teacher</code> - הוסיפו את הקוד הבא מתחת לקוד הנוכחי:</p>
+
+<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}</pre>
+
+<p dir="rtl">זה נראה מאוד דומה ל-constructor בשם Person, אבל משהו פה שונה, משהו שלא ראינו עד כה - פונקציה בשם <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">()call</a></code>.</p>
+
+<p dir="rtl">פונקציה זו היא בעיקרון מאפשרת לנו לקרוא לפונקציה שהוגדרה במקום אחר, אבל לקרוא לה בהקשר הנוכחי.</p>
+
+<p dir="rtl">הפרמטר הראשון שהפונקציה הזו מקבלת מכיל את הערך של <code>this</code> שאנחנו נרצה להשתמש בו כאשר אנחנו מריצים את הפונקציה, והפרמטרים האחרים אלו פרמטרים שאמורים להיות מועברים לפונקציה עצמה כאשר היא מופעלת.</p>
+
+<p dir="rtl">אנחנו רוצים שה-<code>Teacher()</code> constructor יקבל את אותם פרמטרים כמו שה-<code>Person()</code> constructor שהוא יורש ממנו מקבל, ולכן אנחנו מציינים אותם כפרמטרים בתוך ההפעלה של ה-<code>()call</code>.</p>
+
+<p dir="rtl">השורה האחרונה בתוך ה-constructor פשוט מגדירה property בשם <code>subject</code> אשר ייחודי למורים, שאנשים רגילים מ-<code>()Person</code> לא מקבלים.</p>
+
+<p dir="rtl">יכלנו גם לרשום זאת כך, ללא שימוש ב-<code>()call</code>:</p>
+
+<pre class="brush: js" dir="rtl">function Teacher(first, last, age, gender, interests, subject) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.subject = subject;
+}</pre>
+
+<p>אבל בקוד למעלה זו הגדרה מחדש של ה-properties כחדשים, לא כאלו שיורשים מ- <code>()Person</code>, אז זה סותר את מה שאנחנו מנסים לעשות - זה לא מוריש אלא זה יוצר חדשים. מה גם שזה לוקח יותר שורות קוד.</p>
+
+<h3 id="ירושה_מ-constructor_שלא_מקבל_פרמטרים">ירושה מ-constructor שלא מקבל פרמטרים</h3>
+
+<p>שימו לב שאם ה-constructor שאנחנו יורשים ממנו לא מקבל את הערכים של ה-property שלו מקבלים מפרמטרים, אז אנחנו לא צריכים לציין אותם כפרמטרים בתוך ה-<code>()call</code>. לדומא, אם היה לנו משהו פשוט כמו זה: :</p>
+
+<pre class="brush: js">function Brick() {
+  this.width = 10;
+  this.height = 20;
+}</pre>
+
+<p>אנחנו יכולים לרשת את ה-properties של ה-<code>width</code> ואת ה-<code>height</code>, באמצעות שימוש בקוד הרשום מטה:</p>
+
+<pre class="brush: js">function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}</pre>
+
+<p>שימו לב שאנחנו רק צריכים לציין את ה-<code>this</code> בתוך ה-<code>()call</code>, ללא פרמטרים נוספים, שכן אנחנו לא יכולים יורשים שום דבר מ-<code>()Brick</code> שהוא קיבל דרך פרמטרים.</p>
+
+<h2 id="קביעת_ה-prototype_וה-constructor_של_Teacher">קביעת ה-prototype וה-constructor של ()Teacher</h2>
+
+<p>עד עכשיו הכל עובד תקין, אך יש לנו בעיה. הגדרנו אמנם constructor חדש, ויש לו את ה-property בשם <code>prototype</code>, אשר כברירת מחדל מכיל רק הפנייה ל-constructor function עצמה.</p>
+
+<p>הוא לא מכיל שום מתודות של ה-property בשם <code>prototype</code> של ה-Person constructor. על מנת לראות זאת, הכניסו <code>(Object.getOwnPropertyNames(Teacher.prototype</code> לתוך הקונסולה.</p>
+
+<p>לאחר מכן הכניסו זאת שוב, והחליפו את המילה <code>Teacher</code> במילה <code>Person</code>. ה-constructor החדש לא יורש את אותן מתודות. על מנת לראות זאת, השוו את הפלט של <code>Person.prototype.greeting</code> והפלט של <code>Teacher.prototype.greeting</code>. אנחנו צריכים לגרום ל-<code>()Teacher</code> לירוש מתודות שמוגדרות ב-prototype של <code>()Person</code>. איך עושים זאת?</p>
+
+<ol>
+ <li>הוסיפו את הקוד הבא מתחת לקוד שהוספתם לפני כן:
+  <pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre>
+  כאן <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()create</a></code> מגיע שוב לעזרה. במקרה הזה, אנחנו משתמשים בו על מנת ליצור אובייקט חדש שיהיה הערך של <code>Teacher.prototype</code>. האובייקט החדש הוא בעל <code>Person.prototype</code> כאובייקט ה-prototype שלו, ולכן, הוא יירש ממנו אם וכאשר יצטרך, את כל המתודות שזמינות ב-<code>Person.prototype</code>.</li>
+ <li>אנחנו צריכים לעשות משהו נוסף לפני שנמשיך הלאה. לאחר שהוספנו את השורה הקודמת, ה-property בשם <code>constructor</code> שווה כעת ל- <code>()Person</code>, מכיוון שאנחנו הרגע הגדרנו את <code>Teacher.prototype</code> אליו. נסו לשמור את הקוד ולהעלות את הדף בדפדפן וראו זאת על ידי הקלדת <code>Teacher.prototype.constructor</code> בקונסולה.</li>
+ <li>זה יכול להיות בעיה, ולכן אנחנו צריכים לתקן זאת. ניתן לעשות זאת באמצעות הקלדת הקוד הבא מתחת לקוד הנוכחי שלנו.:
+  <pre class="brush: js">Object.defineProperty(Teacher.prototype, 'constructor', {
+    value: Teacher,
+    enumerable: false, // so that it does not appear in 'for in' loop
+    writable: true });</pre>
+ </li>
+ <li>כעת, אם תשמרו ותרעננו את הדף, הקלדת <code>Teacher.prototype.constructor</code> לקונסולה אמורה להחזיר לכם <code>()Teacher</code>, כפי שרצינו, ובנוסף אנחנו יורשים מ-<code>()Person</code>.</li>
+</ol>
+
+<h2 id="הענקה_ל-_Teacher_פונקצייתמתודת_greeting_חדשה">הענקה ל- Teacher() פונקציית/מתודת greeting() חדשה</h2>
+
+<p>אנו רוצים להגדיר פונקציית <code>()greeting</code> חדשה בתוך ה-<code>Teacher()</code> constructor שלנו.</p>
+
+<p>הדרך הפשוטה ביותר לעשות זאת היא להגדיר זאת בתוך ה-prototype של <code>()Teacher</code> - הוסיפו את הקוד הבא מתחת לקוד הנוכחי:</p>
+
+<pre class="brush: js">Teacher.prototype.greeting = function() {
+  var prefix;
+
+  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
+    prefix = 'Mr.';
+  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
+    prefix = 'Mrs.';
+  } else {
+    prefix = 'Mx.';
+  }
+
+  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+};</pre>
+
+<p>מתודה זו מקפיצה את הברכה של המורה, ומשתמשת במילים הנכונות בהתאם למין המורה באמצעות משפטי תנאי שהוגדרו.</p>
+
+<h2 id="נסו_את_הדוגמא_הבאה">נסו את הדוגמא הבאה:</h2>
+
+<p>כעת שהכנסו את כל הקוד, נסו ליצור אובייקטים חדשים מ-<code>()Teacher</code> באמצעות הכנסת הקוד הבא מתחת לקוד הנוכחי:</p>
+
+<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre>
+
+<p>כעת, שמרו את הדף ורעננו ונסו לגשת לפרופ׳ והמתודות של האובייקט <code>teacher1</code> החדש שלנו. לדוגמא:</p>
+
+<pre class="brush: js">teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();</pre>
+
+<p>הכל אמור לעבוד כשורה. השורות 1,2,3 ו-6 משתמשות במתודות/פרופ׳ שנורשו מה-<code>Person()</code> constructor שלנו. השורה 4 משתמשת בפרופ׳ שזמין רק באמצעות ה-<code>Teacher()</code> constructor שלנו. שורה 5 הייתה יכולה להיות מורשת מ-<code>()Person</code>, אבל מכיוון של-<code>()Teacher</code> יש את אותה מתודה, אז היא ניגשת למתודה שנמצאת ב-<code>()Teacher</code>.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם נתקלתם בבעיות, נסו להשוות את הקוד שלכם ל <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">קוד הסופי</a> או ראו אותו כ <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">דף אינטרנט</a>.</p>
+</div>
+
+<p>הטכניקות שראינו עד כה, אינן היחידות ליצירת מחלקות ירושה ב-JavaScript, אבל הן עובדות בסדר, הן נותנות לכם הבנה כיצד להחיל ירושה ב-JavaScript.</p>
+
+<p>אולי תהיו מעוניינים לבדוק חלק מהאפשרויות החדשות ש-{{glossary("ECMAScript")}} מאפשרת לנו, בצורה ״נקייה״ יותר, באמצעות <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>. אנו נגע בדרך זו בהמשך. שימו לב כי דרך חדשה זו לא תומכת בכל הדפדפנים. כל יתר הדרכים שראינו תומכות בדפדנים ישנים גם כמו IE9 ומוקדם יותר ויש דרכים גם לאפשר תמיכה לדפדפנים ישנים יותר.</p>
+
+<p>דרך מקובלת היא להשתמש בספריית JavaScript - לפופולריות שביניהן יש סט של פונקציונליות שזמין עבור ביצוע הורשה בצורה פשוטה ומהירה. אחת מהן היא <a href="http://coffeescript.org/#classes">CoffeeScript</a> אשר מאפשרת <code>class</code> ,<code>extends</code> לדוגמא.</p>
+
+<h2 id="המשך_תרגול">המשך תרגול</h2>
+
+<p>במאמר שלנו בנושא <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP theory section</a>, כללנו גם מחלקת <code>Student</code> באופן עקרוני, אשר יורשת תכונות מ-<code>Person</code> וגם יש לה מתודת <code>()greeting</code> שונה מזו של <code>Person</code> ומשל <code>Teacher</code>. נסתכל כיצד ה-greeting של התלמידים אמורה להיות וננסה לבנות constructor בשם <code>()Student</code> משלנו, אשר יורש את כל התכונות מ-<code>()Person</code> ומחיל מתודת <code>()greeting</code> שונה.</p>
+
+<div class="note">
+<p><strong>שימו לב</strong>: אם אתם נתקלים בבעיות, ראו את ה<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">גרסה הסופית</a> או <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">כדף אינטרנט</a> .</p>
+</div>
+
+<h2 id="סיכום_בנושא_תכונות_האובייקט">סיכום בנושא תכונות האובייקט</h2>
+
+<p>על מנת לסכם, יש לנו בעיקרון שלוש סוגים של property/method לדאוג להם:</p>
+
+<ol>
+ <li>אלו המוגדרים בתוך ה-constructor function וניתנים לאובייקטים שנוצרים באמצעות ה- <code>this</code>. אלו בעיקרון מאוד קלים לאיתור - בתוך הקוד שלנו, אלו התכונות שמוגדרות בתוך ה-constructor באמצעות <code>this.x = x</code>, והם זמינים רק עבור האובייקטים שנוצרים (בדרך כלל נוצרים באמצעות ה-constructor ושימוש במילה השמורה <code>new</code>, לדוגמא: <code>()var myInstance = new myConstructor</code>.</li>
+ <li>אלו המוגדרים ישרות על ה-constructor עצמם, ואלו זמינות רק על ה-constructor. הם לרוב יהיו זמינים רק אובייקטים מובנים של הדפדפן, ואנחנו יכולים לזהות שהם קשורים באופן ישירות ל-constructor ולא למופע אובייקט. לדוגמא <code>()<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code>.</li>
+ <li>ואלו המוגדרים על הפרופ׳ בשם prototype של ה-constructor, אשר נורשים על ידי כל מופעי האובייקט שנוצרים או אובייקטים שיורשים מהם. זה כולל כל תכונה שמוגדרת ב-property בשם prototype של ה-Constructor. לדוגמא: <code>()myConstructor.prototype.x</code>.</li>
+</ol>
+
+<p>אם אתם לא בטוחים מה זה מה, אל תדאגו, אתם תכירו אותם יותר לעומק במהלך הדרך והמשך הקריירה שלכם ככל שתתמודדו איתם.</p>
+
+<h2 id="ECMAScript_2015_Classes">ECMAScript 2015 Classes</h2>
+
+<p>ECMAScript 2015 הציגה מעין סינטקס חדש בשם <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class syntax</a> ל- JavaScript כדרך חדשה לרשום מחלקות לשימוש חוזר, באמצעות סינטקס פשוט ונקי יותר, אשר דומה יותר ל-classes ב-C++ או ב-Java. בחלק הזה של המאמר אנחנו נמיר את הדוגמאות מלמעלה מ-prototypal inheritance ל-classes, על מנת להראות לכם איך לעשות שימוש-classes.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: דרך חדשה זו של כתיבת classes נתמכת בכל הדפדפנים המודרניים, אבל זה עדיין חשוב להבין את ה-prototypal inheritance במקרה ותיתקלו בפרוייקט שדורש תמיכה בדפדפן שאינו תומך בסינטקס של classes - הידוע מבין כולם הוא Internet Explorer.</p>
+</div>
+
+<p>נסתכל על הדוגמא שלנו של Person כתובה בצורת classes:</p>
+
+<pre class="brush: js">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+</pre>
+
+<p>ההצהרה באמצעות המילה השמורה <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> מצהירה בעצם בשאנחנו רוצים ליצור class חדשה. בתוך הבלוק הזה שבין <code>{}</code>, אנחנו מגדירים את התכונות של אותה מחלקה:</p>
+
+<ul>
+ <li>המתודה <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">()constructor</a></code> מגדירה את ה-constructor function שמייצגת את ה-class <code>Person</code> שלנו.</li>
+ <li><code>()greeting</code> ו- <code>()farewell</code> הם class methods. כל מתודה שאנחנו נרצה לייחס אותה למחלקה מוגדרת בתוך ה-class, לאחר ה-constructor. בדוגמא הזו, השתמשנו ב- <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> מאשר בשרשור מחרוזות על מנת שהקוד שלנו יהיה קריא יותר.</li>
+</ul>
+
+<p>כעת אנחנו יכולים ליצור מופעי אובייקט חדשים באמצעות שימוש באופרטור <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, באותה הדרך שעשינו בעבר:</p>
+
+<pre class="brush: js">let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);
+leia.farewell();
+// Leia has left the building. Bye for now
+</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: מאחורי הקלעים, ה-classes שלנו מומרים ל-prototypal Inheritance models - זהו רק syntactic sugar - שזה אומר דרך אחרת מבחינת סינטקס לעשות דבר זהה, אך לא משהו אחר. יחד עם זאת, אין ספק שזו דרך פשוטה יותר להעניק הורשה.</p>
+</div>
+
+<h3 id="הורשה_עם_class_syntax">הורשה עם class syntax</h3>
+
+<p>למעלה יצרנו class על מנת לתאר person. יש לנו סט של תכונות שזהות לכל האנשים. בחלק זה אנחנו ניצור את ה-class המיוחד של <code>Teacher</code>, ונגרום לו לירוש מ-<code>Person</code> באמצעות שימוש בסינטקס class החדש. זה נקרא יצירת subclass או ביצוע subclassing.</p>
+
+<p>על מנת ליצור subclass אנחנו יכולים להשתמש במילה השמורה <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> על מנת להגיד ל-JavaScript איזו class אנחנו מתבססים עליה ביצירת ה-class החדשה:</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(subject, grade) {
+    this.subject = subject;
+    this.grade = grade;
+  }
+}</pre>
+
+<p>אך יש קאצ׳ קטן:</p>
+
+<p>שלא כמו ה-Constructor function, שבהן האופרטור <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> היה עושה את האתחול של המילה <code>this</code> לאובייקט חדש, פה זה לא קורה בצורה אוטומטית בעבור המחלקה שמוגדרת באמצעות המילה <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a>, כלומר עבור ה-sub-classes.</p>
+
+<p>ולכן הרצה שלהקוד למעלה יציג לנו שגיאה:</p>
+
+<pre class="brush: js">Uncaught ReferenceError: Must call super constructor in derived class before
+accessing 'this' or returning from derived constructor</pre>
+
+<p>למחלקות משנה, sub-classes, ההגדרה של <code>this</code> בעבור אובייקט חדש, תהיה תמיד תלויה ב-parent class constructor, כלומר ב-constructor function של ה-class שממנה אנחנו מתרחבים (extending).</p>
+
+<p>כאן, אנחנו מרחיבים את המחלקה <code>Person</code>- המחלקת משנה בשם -<code>Teacher</code> היא בעצם extension - הרחבה - של המחלקה <code>Person</code>. אז עבור <code>Teacher</code> האתחול של <code>this</code> מתבצע על ידי ה-constructor <code>Person</code>.</p>
+
+<p>על מנת לקרוא ל-constructor ה-parent, אנחנו צריכים להשתמשש באופרטור <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>()super</code> </a>, כך:</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(subject, grade) {
+    super();              // Now `this` is initialized by calling the parent constructor.
+    this.subject = subject;
+    this.grade = grade;
+  }
+}</pre>
+
+<p>אין שום סיבה שתהיה לנו sub-class אם היא לא יורשת מאפיינים מה-parent class.<br>
+ זה רעיון טוב אז שהאופרטור <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>()super</code></a>  גם מקבל ארגומנטים בעבור ה- parent constructor.</p>
+
+<p>כאשר אנחנו מסתכלים על ה- <code>Person</code> constructor,  אנחנו יכולים לראות שיש לו את הבלוק קוד הבא בתוך ה-constructor שלו:</p>
+
+<pre class="brush: js"> constructor(first, last, age, gender, interests) {
+   this.name = {
+     first,
+     last
+   };
+   this.age = age;
+   this.gender = gender;
+   this.interests = interests;
+} </pre>
+
+<p>מאחר והאופרטור <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">()super</a></code> הוא בעצם ה-parent class constructor, העברה של הארגומנטים הרלוונטיים של המחלקת אם, גם תאתחל את הפרופ׳ במחלקת משנה שלנו, ותירש אותם: </p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+</pre>
+
+<p>כעת, כשיוצרים מופעי אובייקט של <code>Teacher</code>, אנחנו יכולים לקרוא למתודות ופרופ׳ שהוגדרו גם ב-<code>Teacher</code> וגם ב-<code>Person</code>:</p>
+
+<pre class="brush: js">let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אתם יכולים למצוא את הדוגמא ב-GitHub ב- <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a>  או כ-<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">דף אינטרנט</a>.</p>
+</div>
+
+<h2 id="Getters_ו-_Setters">Getters ו- Setters</h2>
+
+<p>יהיו פעמים שאנחנו נרצה לשנות את הערכים של מאפיין בתוך השאנחנו יוצרים או שאנחנו לא נדע מהו הערך הסופי שאותו מאפיין יקבל. אם נסתכל על הדוגמא שלנו <code>Teacher</code>, יכול להיות מצב שאנחנו לא נדע מה הנושא שהמורה מלמד לפני שאנחנו יוצרים אותו או שהנושא יכול להשתנות במהלך התקופה.</p>
+
+<p>במקרים כאלו אנחנו נוכל להשתמש ב-getters ו-setters.</p>
+
+<p>נשפר את Teacher class עם  getters ו-setters. המחלקה מתחילה בדיוק כמו שראינו אותה בדוגמא האחרונה.</p>
+
+<p> getters ו-setters עובדים בזוגות. getter מחזיר את הערך הנוכחי של משתנה וה-setter הבן זוג שלו משנה את הערך של המשתנה למה שה-setter יגדיר. </p>
+
+<p>המחלקה <code>Teacher</code> החדשה תיראה כך:</p>
+
+<pre class="brush: js">class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+</pre>
+
+<p>במחלקה למעלה יש לנו getter ו-setter בעבור הפרופ׳ <code>subject</code>. אנחנו משתמשים בסימן <code>_</code> על מנת ליצור ערך נפרד שבו נאחסכן את השם של הפרופ׳. אם לא נעשה זאת בצורה הזה, אנחנו נקבל שגיאות בכל פעם שנקרא ל-get או ל-set. בנקודה זו: </p>
+
+<ul>
+ <li>על מנת לקבל את הערך הנוכחי של הפרופ׳ <code>_subject</code> של האובייקט <code>snape</code>, אנחנו יכולים להשתמש במתודת <code>snape.subject</code> getter.</li>
+ <li>על מנת להשים ערך חדש לפרופ׳ <code>_subject</code> אנחנו יכולים להשתמש במתודת <code>snape.subject="new value"</code> setter. </li>
+</ul>
+
+<p>הדוגמא למטה מראה את השימוש באפשרויות האלו: </p>
+
+<pre class="brush: js">// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject="Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+</pre>
+
+<div class="note">
+<p><strong>לתשומת לב </strong>: תוכלו למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> ב-GitHub, או כ<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">דף אינטרנט</a>.</p>
+</div>
+
+<h2 id="מתי_אנחנו_נשתמש_בהורשה_ב-JavaScript">מתי אנחנו נשתמש בהורשה ב-JavaScript?</h2>
+
+<p>רוב הסיכויים שלאחר קריאת המאמר הזה, אתם בטח חושבים לעצמכם ״טוב, זה מסובך מאוד״. אתם צודקים. הורשה ואבי טיפוס הינם חלק מההיבטים המורכבים ביותר של JavaScript, אבל הרבה מעוצמתה של השפה והגמישות שלה מגיע מתוך המבנה של האובייקטים והירושה שלהם, וזה שווה להכיר ולהבין כיצד התהליכים הללו מתרחשים. </p>
+
+<p>בדרך מסויימת, אנחנו משתמשים בהורשה כל הזמן. בכל פעם שאנחנו משתמשים במאפיינים שונים של Web API או בפרופ׳/מתודות שהוגדרו באובייקט מובנה של הדפדפן (built-in browser object) על מחרוזות, מערכים וכד׳ אנחנו באופן עקיף משתמשים בירושה. </p>
+
+<p>במונחים של שימוש בירושה בקוד שלנו, אנחנו ככל הנראה לא נשתמש בזה באופן תדיר, במיוחד בהתחלה ובפרוייקטים קטנים. זה בזבוז זמן להשתמש באובייקטים וירושה רק לשם השימוש בהם אם אנחנו לא צריכים. אבל ככל שכמות הקוד גדלה, אנחנו ככל הנראה נזהה את הצורך להתחיל להשתמש בכך. םא אנחנו מוצאים את עצמנו מתחילים ליצור מספר אובייקטים שיש להם מאפיינים זהים, אז יצירת אובייקט גנרי אחד אשר יכיל את כל הפונקציונליות המשותפת של אותם אובייקטים ויוריש להם את אותה פונקציונליות תהיה דרך מאוד שימושית ונוחה.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: לאור הדרך שבה JavaScript עובדת עם שרשרת אבי הטיפוס (prototype chain) וכד׳ - השיתוף של פונקציונליות בין אובייקטים נקרא לרוב <strong>delegation - ״האצלה״</strong>. אובייקטים מיוחדים ״מאצילים״ פונקציונליות לאובייקטים שנוצרים.  </p>
+</div>
+
+<p>כאשר אנחנו משתמשים בהורשה, ההמלצה היא שלא יהיו יותר מדי רמות של הורשה, ושתמיד נעקוב איפה אנחנו מגדירים את המתודות והפרופ׳. זה אפשרי להתחיל לכתוב קוד שבאופן זמני משנה את ה-prototypes של האובייקטים המובנים של הדפדפן (built-in browser objects), אבל אין לעשות זאת אלא אם כן יש לנו סיבה מאוד טובה. יותר מדי הורשה יכולה להוביל לבלבול אינסופי ולשגיאות בקוד. </p>
+
+<p>באופן אולטמטיבי, אובייקטים הם פשוט תבנית אחרת של שימוש חוזר בקוד, כמו פונקציות ולולאות, עם הכללים והיתרונות שלהם. אם אתם מוצאים את עצמכם יוצרים משתנים ופונקציות הקשורים אחד לשני ואתם רוצים לעקוב ולארוז אותם יחד בצורה מסודרת, אובייקט הוא רעיון טוב. אובייקטים גם שימושיים מאוד כשאנחנו רוצים להעביר ריכוז של מידע ממקום אחד למקום שני. את שני הדברים הללו ניתן להשיג ללא שימוש ב-constructors או ב-inheritance. אם אנחנו צריכים רק מופע אחד של אובייקט, כנראה יהיה עדיף פשוט להשתמש ב-inheritance ואין צורך בירושה.</p>
+
+<h2 id="אלטרנטיבות_להרחבה_של_שרשרת_ההורשה">אלטרנטיבות להרחבה של שרשרת ההורשה </h2>
+
+<p>ב-JavaScript, יש מספר דרכים שונות להרחבה של ה-prototype של אובייקט חוץ מאלו שראינו במאמר זה. להרחבה בנושא, ראו את הדף שלנו בנושא <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">Inheritance and the prototype chain</a>.</p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>מאמר זה נועד לסקור את יתרת הנושא של OOJS וסינטקס נוסף שאנחנו חושבים שאתם צריכים לדעת. בנקודה זו אתם אמורים להבין את ההיבטים של אובייקטים ב-JavaScript ואת הבסיס של תכנות מונחה עצמים (OOP), אביט טיפוס, שרשרת אבי-טיפוס, הורשה באמצעות אבי-טיפוס, כיצד ליצור מחלקות (classes), מופעי אובייקטים, הוספת מאפיינים למחלקות, יצירת מחלקות משנה שיורשות ממחלקות אחרות ועוד. </p>
+
+<p>במאמר הבא אנחנו נגע כיצד לעבוד עם (JavaScript Object Notation (JSON, פורמט מקובל להעברת מידע.</p>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<ul>
+ <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — אתר ללמידה אינטראקטיבית של בנושא אובייקטים.</li>
+ <li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition">Secrets of the JavaScript Ninja</a>, פרק 7 - ספר טוב בנושא עקרונות מתקדמים של JavaScript של John Resig, Bear Bibeault, ו-Josip Maras. פרק 7 מכסה את ההיבטים של אבי טיפוס והורשה. </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript למתחילים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Inheritance">הורשה ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/JSON">עבודה עם JSON data</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_building_practice">שיטות ליצירת אובייקטים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+ <li></li>
+</ul>
diff --git a/files/he/learn/javascript/objects/json/index.html b/files/he/learn/javascript/objects/json/index.html
new file mode 100644
index 0000000000..5f61b5aa22
--- /dev/null
+++ b/files/he/learn/javascript/objects/json/index.html
@@ -0,0 +1,346 @@
+---
+title: Working with JSON
+slug: Learn/JavaScript/Objects/JSON
+translation_of: Learn/JavaScript/Objects/JSON
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">JavaScript Object Notation (JSON) הוא סטדנרט לפורמט מבוסס-טקסט, המבוסס על הסינטקס של אובייקט ב-ה. הוא לרוב משמש בעבור העברת מידע ביישומי רשת (כלומר העברת מידע משרת לקוח, כך שהמידע יוכל להיות מוצג על גבי דף אינטרנט, או ההפך). אנחנו ניתקל בו לעיתים קרובות מאוד ומאמר זה נועד להעניק לכם כל מה שצריך לדעת על עבודה עם JSON כשאנחנו משתמשים ב-JavaScript, כולל עיבוד שלו כך שאנחנו נוכל לגשת למידע המאוחסן בו וכן ליצור JSON.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) and OOJS basics (see <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין כיצד לעבוד עם מידע המאוחסן בתוך JSON וכיצד ליצור אובייקטי JSON בעצמנו.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="מה_זה_JSON">מה זה JSON?</h2>
+
+<p>{{glossary("JSON")}} הוא פורמט מידע מבוסס-טקסט אשר דומה לסינטקס של אובייקט ב-JavaScript. פורמט זה הוצג על ידי <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. למרות שהוא מאוד דומה ומזכיר סינטקס של object literal ב-JavaScript, ניתן להשתמש בו באופן עצמאי ולא רק ב-JavaScript, וסביבות פיתוח אחרות מכילות אפשרויות לקרוא או לעבד וכן ליצור JSON. </p>
+
+<p>JSON מתקיים כמחרוזת - שימושי מאוד כשאנחנו רוצים להעביר מידע ברשת. הוא צריך להיות מומר לאובייקט JavaScript כאשר אנחנו רוצים לגשת לאותו מידע שמאוחסן בתוך ה-JSON. זה לא מורכב או מסובך - JavaScript מעניקה לנו את האובייקט <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> הגלובלי שיש לו מתודות שזמינות עבורו בעבור המרה בין JSON למחרוזת.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: המרה של מחרוזת לאובייקט נקראת <em>parsing</em> ואילו המרה של אובייקט למחרזות כך שהוא יוכל להיות מועבר ברשת, נקראת <em>stringification</em>.</p>
+</div>
+
+<p>אובייקט JSON יכול להיות מאוחסן בתוך קובץ נפרד משלו, שהוא בעצם קובץ טקסט עם סיימות של <code>.json</code> ו-{{glossary("MIME type")}} של <code>application/json</code>.</p>
+
+<h3 id="המבנה_של_JSON">המבנה של JSON</h3>
+
+<p>כפי שציינו למעלה, JSON הוא מחרוזת, שהמבנה שלה מזכיר מאוד object literal ב-JavaScript. אנחנו יכולים לכלול את אותם סוגי מידע בסיסיים בתוך JSON כפי אנחנו יכולים לכלול אותם בתוך אובייקט של JavaScript - מחרוזות, מספרים, מערכים, בוליאנים ואובייקטים אחרים. זה מאפשר לנו ליצור היררכיית מידע כמו זו לדוגמא:</p>
+
+<pre class="brush: json">{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}</pre>
+
+<p>אם אנחנו נטען את האובייקט הזה לתוך תוכנית JavaScript ונמיר אותו (parse) בתוך משתנה בשם <code>superHeroes</code> לדוגמא, אנחנו אז נוכל לגשת לאותו מידע המאוחסן בו באמצעות שימוש ב-00000 שאנחנו מכירים מהמאמר בנושא <a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a>. לדוגמא: </p>
+
+<pre class="brush: js">superHeroes.homeTown
+superHeroes['active']</pre>
+
+<p>על מנת לגשת למידע בהמשך ההיררכיה, אנחנו פשוט נצטרך ״לקשור״ את שם הפרופ׳ המבוקש והאינדקס הרלוונטי במערך ביחד. לדוגמא, על מנת לגשת ל-9999 השלישי של ה-0000 השני ברשימת ה-9999, נוכל לרשום קוד כזה:</p>
+
+<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre>
+
+<ol>
+ <li>ראשית יש לנו את שם המשתנה  — <code>superHeroes</code>.</li>
+ <li>בתוך המשתנה אנחנו רוצים לגשת לפרופ׳ <code>members</code>, אז אנחנו משתמשים ב- <code>["members"]</code>. </li>
+ <li><code>members</code> מכיל מערך של אובייקטים. אנחנו רוצים לגשת לאובייקט השני בתוך המערך אז אנחנו נשתמש באינדקס <code>[1]</code>. </li>
+ <li>בתוך האובייקט, אנחנו רוצים לגשת לפרופ׳ <code>powers</code>, אז אנחנו נשתמש ב-<code>["powers"]</code>. </li>
+ <li>ובתוך הפרופ׳ <code>powers</code>, אנחנו נרצה את הערך השלישי, אז אנחנו נשתמש ב-<code>[2]</code>. </li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: יצרנו את ה-JSON שבדוגמא למעלה בקובץ <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> וניתן לראותו גם ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">קוד המקור</a>. </p>
+
+<p>מנסו להעלות את הקובץ ולגשת למידע בתוך המשתנה באמצעות הקונסולה בדפדפן. </p>
+</div>
+
+<h3 id="מערכים_כ-JSON">מערכים כ-JSON</h3>
+
+<p>למעלה ציינו שטקסט ב-JSON דומה בעקרון לאובייקט ב-JavaScript, וזה דיי נכון. הסיבה שאנחנו אומרים ״דומה״ ולא ״זהה״, מכיוון שמערך ב-JavaScript הוא בעצם JSON תקין:</p>
+
+<pre class="brush: json">[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]</pre>
+
+<p>הטקסט למעלה הוא JSON תקין לחלוטין. אנחנו פשוט נצטרך לגשת לאיברים במערך (בגרסה המעובדת שלו), באמצעות אינדקס של מערך/</p>
+
+<h3 id="הערות_נוספות">הערות נוספות</h3>
+
+<ul>
+ <li>JSON הוא פשוט פורמט מידע — הוא מכיל רק פרופ׳ ולא מתודות. </li>
+ <li>JSON דורש גרשיים כפולות - <code>״ ״</code> - סביב מחרוזות ושמות של פרופ׳. גרשיים בודדות - <code>׳ ׳</code> - אינן תקינות. </li>
+ <li>אפילו טעות כתיב קטנה כמו פסיק או נקודותיים לא במקום יכולה לגרום לקובץ JSON לשגיאה. צריך לשים לב ולעשות ולידציה לכל מידע שאנחנו נרצה להשתמש בו, למרות שהסיכויים שקובץ JSON שנוצר על ידי מחשב יכיל שגיאות הוא נמוך, אם התוכנה שיצרה אותו עובדת כמו שצריך. אנחנו יכולים לעשות ולידציה לקבצי JSON באמצעות יישומים כמו <a href="http://jsonlint.com/">JSONLint</a>. </li>
+ <li>JSON גם יכול לקחת תבנית של כל סוג מידע שאפשר לכלול אותו ב-JSON, לא רק מערכים או אובייקטים. לדוגמא, מחרוזת בודדת או מספר הם אובייקטי JSON תקינים לחלוטין. </li>
+ <li>שלא כמו בקוד JavaScript שבו פרופ׳ של אובייקטים אינם מחוייבים בגרשיים, ב-JSON, הפרופ׳ מחוייבים בגרשיים (וכפי שציינו למעלה, רק גרשיים כפולות).</li>
+</ul>
+
+<h2 id="למידה_עצמאית_עבודה_עם_JSON">למידה עצמאית: עבודה עם JSON</h2>
+
+<p>כעת נלמד באמצעות דוגמא כיצד ניתן לעשות שימוש במידע JSON באתר אינטרנט.</p>
+
+<h3 id="התחלה">התחלה</h3>
+
+<p>על מנת להתחיל, עשו עותקים מקודמיים של <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> ושל <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> . הקובץ האחרון מכיל CSS פשוט לעיצוב הדף שלנו והראשון מכיל גוף HTML פשוט:</p>
+
+<pre class="brush: html">&lt;header&gt;
+&lt;/header&gt;
+
+&lt;section&gt;
+&lt;/section&gt;</pre>
+
+<p>בנוסף, הקובץ הראשון מכיל אלמנט {{HTMLElement("script")}} פשוט שיכיל את קוד ה-JavaScript שנכתוב בתרגיל זה. כעת, קובץ זה מכיל שתי שורות, אשר מכילות הפניה לאלמנט {{HTMLElement("header")}} ולאלמנט {{HTMLElement("section")}} ומאחסן הפניות אלו בתוך משתנים:</p>
+
+<pre class="brush: js">var header = document.querySelector('header');
+var section = document.querySelector('section');</pre>
+
+<p>מידע ה-JSON זמין ב-GitHub בכתובת: <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+
+<p>בתרגיל אנחנו נעלה את המידע לתוך הדף שלנו, באמצעות שימוש במניפולציות על ה-DOM, כך שהדף שלנו ייראה כך:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="קבלת_ה-JSON">קבלת ה-JSON</h3>
+
+<p>על מנת להשיג את ה-JSON, אנחנו נשתמש ב-API שנקרא {{domxref("XMLHttpRequest")}} (לרוב נקרא <strong>XHR</strong>). זהו אובייקט JavaScript שימושי מאוד, אשר מאפשר לנו לבצע בקשות רשת על מנת לקבל משאבים מהשרת באמצעות JavaScript (כמו תמונות, טקסט, JSON, ואפילו קוד HTML), כלומר, אנחנו יכולים לעדכן חלקים מתוך התוכן שלנו, מבלי לטעון מחדש את הדף כולו. אפשרות זו איפשה לדפי אינטרנט להיות הרבה יותר רספונסיביים. אנחנו נלמד בהרחבה על נושא זה בהמשך. </p>
+
+<ol>
+ <li>על מנת להתחיל, אנחנו הולכים לאחסן את ה-URL של ה-JSON שאנחנו נרצה לקבל בתוך משתנה. הוסיפו את הקוד הבא בתחתית הקוד של JavaScript שברשותכם:</li>
+ <li>
+  <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
+ </li>
+ <li>על מנת ליצור בקשה, אנחנו צריכים ליצור אובייקט בקשה חדשה מה-constructor בשם <code>XMLHttpRequest</code>, באמצעות שימוש במילה השמורה <code>new</code>. הוסיפות את הקוד הבא מתחת לשורה האחרונה:
+  <pre class="brush: js">var request = new XMLHttpRequest();</pre>
+ </li>
+ <li>כעת, אנחנו צריכים לפתוח בקשה חדשה לאובייקט בקשה שיצרנו באמצעות המתודה <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">()open</a></code>. הוסיפו את הקוד הבא:
+  <pre class="brush: js">request.open('GET', requestURL);</pre>
+
+  <p>מתודה זו מקבל לפחות שני פרמטרים - וניתן להזין עוד פרמטרים אופציונליים. הפרמטרים שאנחנו חייבים לציין בעבור הדוגמא הזו הם:</p>
+
+  <ul>
+   <li>סוג המתודה של HTTP שאנחנו נרצה לבצע בבקשת השרת - במקרה שלנו זו תהיה <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code>, שכן אנחנו רוצים לקבל מידע כלשהו. </li>
+   <li>ה-URL שאנחנו נבצע אליו בקשה - זהו ה-URL שבו מאוחסן קובץ ה-JSON שלנו. </li>
+  </ul>
+ </li>
+ <li>כעת, הוסיפו את השורות הבאות  - בשורות אלו אנחנו מגדירים את ה-<code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> ל-JSON, כך שה-XHR יודע שהשרת יחזיר לנו JSON, ושמאחורי הקלעים תבוצע לו המרה לאובייקט JavaScript. בשורה השנייה אנחנו שולחים את הבקשה באמצעות מתודת <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">()send</a></code>:
+  <pre class="brush: js">request.responseType = 'json';
+request.send();</pre>
+ </li>
+ <li>החלק האחרון של הקוד הרשום להלן הוא בעצם המתנה לקבלת תגובה מהשרת, וביצוע פעולה איתה. הוסיפו את הקוד הבא מתחת לקוד הנוכחי שלכם:
+  <pre class="brush: js">request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+ </li>
+</ol>
+
+<p>כאן אנחנו מאחסנים את התגובה לבקשה לשלנו (הזמינה בפרופ׳ <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code> ) בתוך משתנה שנקרא <code>superHeroes</code>. המשתנה עכשיו מכיל את האובייקט JavaScript שמבוסס על ה-JSON. לאחר מכן אנחנו מעבירים את אותו אובייקט כארגומנט לשתי קריאות פונקציות - הראשונה תמלא את ה-&lt;<code>header&gt;</code> עם המידע הנכון, ואילו השניה תיצור לנו כרטיס מידע בעבור כל ״גיבור״ בקבוצה ותכניס את הכרטיס הזה לתוך &lt;<code>section&gt;</code>. </p>
+
+<p>עטפנו את הקוד הזה בתוך מטפל אירוע - event handler - שירוץ ברגע שהאירוע load נוצר על האובייקט <code>request</code> (ראו <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) - זה מכיוון שהאירוע load נוצר כאשר התגובה מהשרת הוחזרה בהצלחה. ביצוע של דבר זה מבטיח לנו שה-<code>request.response</code> יהיה זמין בוודאות כשנרצה לעשות משהו איתו.</p>
+
+<h3 id="מילוי_של_מידע_ב-header">מילוי של מידע ב-header</h3>
+
+<p>כעת, כשהשגנו את המידע ב-JSON והמרנו אותו לאובייקט JavaScript, אנחנו יכולים לעשות בו שימוש באמצעות כתיבה של הפונקציות שציינו למעלה. ראשית, הוסיפו את הפונקציות הרשומות מטה מתחת לקוד הנוכחי שלכם: </p>
+
+<pre class="brush: js">function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}</pre>
+
+<p>אנחנו קראנו לפרמטר בשם <code>jsonObj</code>, על מנת להזכיר לעצמנו שזהו בעצם אובייקט JavaScript שמקורו ב-JSON. ראשית, יצרנו אלמנט {{HTMLElement("h1")}} עם <code><a href="/en-US/docs/Web/API/Document/createElement">()createElement</a></code>, והשמנו את ה-<code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> שיהיה שווה לפרופ׳ <code>squadName</code> של האובייקט, ולאחר מכן שייכנו אותו ל-header באמצעות <code><a href="/en-US/docs/Web/API/Node/appendChild">()appendChild</a></code>. </p>
+
+<p>לאחר מכן עשינו פעולה דומה בעבור הפסקה - <code>p</code>: יצרנו אותה, השמנו את ה-<code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> שלה ולאחר מכן הוספנו אותה ל-header. ההבדל היחיד הוא שהטקסט שלה הוא שרשור של מחרוזות המכילות את הפרופ׳ <code>homeTown</code> ו-<code>formed</code> של האובייקט <code>jsonObj</code>.</p>
+
+<h3 id="יצירה_של_כרטיסי_המידע_״hero״">יצירה של כרטיסי המידע ״hero״</h3>
+
+<p>כעת, הוסיפו את הפונקציה הבאה מתחת לקוד הנוכחי, אשריוצרץ ומצגיה את כרטיסי המידע של ה-hero: </p>
+
+<pre class="brush: js">function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i &lt; heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j &lt; superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}</pre>
+
+<p>לשם התחלה, אחסנו את הפרופ׳ <code>members</code> של אובייקט ה-JavaScript בתוך משתנה חדש. מערך זה מכיל מספר אובייקטים שמכילים את המידע בעבור כל hero. </p>
+
+<p>לאחר מכן, השתמשנו בלולאת <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a> על מנת לעבור על כל אובייקט בתוך מערך זה. בעבור כל אובייקט במערך, עשינו את הדברים הבאים: </p>
+
+<ol>
+ <li>יצרנו מספר אלמנטים חדשים: <code>&lt;article&gt;</code>, <code>&lt;h2&gt;</code>, שלוש <code>&lt;p&gt;</code>, ו-<code>&lt;ul&gt;</code>.</li>
+ <li>קבענו ש-<code> &lt;h2&gt; </code>יכיל את הערך הנוכחי של ה-<code>name</code> של ה-hero.</li>
+ <li>מילאנו את שלושת ה-p עם <code>secretIdentity</code>, <code>age</code> ושורה עם הטקסט "Superpowers:".</li>
+ <li>אחסנו את הפרופ׳ <code>powers</code> בתוך משתנה חדש שנקרא <code>superPowers</code> - זה מכיל מערך שמציג את ה-superpowers הנוכחיים.</li>
+ <li>השתמשנו בלולאת <code>for</code> שוב על מנת לעבור על כל ה-superpowers הנוכחיים של hero - בעבור כל אחד יצרנו אלמנט <code>&lt;li&gt;</code>, והכנסו את ה-superpower לתוכו ולאחר מכן שמנו את ה-<code>listItem</code> בתוך <code>&lt;ul&gt;</code> באמצעות <code>()appendChild</code>.</li>
+ <li>לבסוף, שייכנו את <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code> ו-<code>&lt;ul&gt;</code> לתוך <code>&lt;article&gt;</code> (<code>myArticle</code>) ולאחר מכן שייכנו את <code>&lt;article&gt;</code> לתוך <code>&lt;section&gt;</code>. הסדר שבו דברים משוייכים הוא חשוב שכן כך הם יוצגו על גבי הדף.</li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם אתם נתקלים בבבעיה, ראו את הקוד המקור ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> או כ-<a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">דף אינטרנט</a>. </p>
+</div>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>:  אם אתם מתקשים בעניין ה-dot/bracket notation שאנו משתמשים כדי לגשת לאובייקט JavaScript, אולי יעזור לכם לפתוח את הקובץ <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> בלשונית אחרת או בעורך הקוד שלכם, ולהסתכל עליו תוך כדי מעבר על הקוד שלנו. בנוסף, שקלו לעשות חזרה על המאמר שלנו בנושא <a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a>.</p>
+</div>
+
+<h2 id="המרה_בין_אובייקטים_וטקסט">המרה בין אובייקטים וטקסט</h2>
+
+<p>הדוגמא למעלה הייתה יחסי פשוטה במונחים של לגשת לאובייקט JavaScript, מכיוון שקבענו שבקשת ה-XHR שלנו תמיר את התגובת JSON ישירות לאובייקט JavaScript באמצעות: </p>
+
+<pre class="brush: js">request.responseType = 'json';</pre>
+
+<p>לפעמים אנחנו נקבל מחרוזת JSON לא מעובדת, ואנחנו נצטרך להמיר אותה לאובייקט בעצמנו. וכאשר אנחנו נרצה לשלוח אובייקט JavaScript ברשת, אנחנו נצטרך להמיר אותו ל-JSON (מחרוזת) לפני השליחה שלו. למזלנו, שתי בעיות אלו כל כך נפוצות, שקיים אובייקט בשם <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> הזמין בכל הדפדפנים, המכיל שתי מתודות: </p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">()parse</a></code>: מקבל מחרוזת JSON כפרמטר ומחזיר את אובייקט JavaScript בהתאם. </li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">()stringify</a></code>: מקבל אובייקט כפרמטר ומחזיר אותו כמחרוזת JSON בהתאם.</li>
+</ul>
+
+<p>אתם יכולים לראות את הראשון בפעולה בקובץ -<a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> - הוא עושה בדיוק את אותו הדבר כמו בדוגמא שבנינו קודם, רק שאנחנו קבענו שה-XHR יחזיר טקסט JSON גולמ, ואז השתמשנו ב-<code>()parse</code> על מנת להמיר אותו לאובייקט JavaScript זה הקוד הרלוונטי:</p>
+
+<pre class="brush: js">request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<p>כפי שאתם יכולים לנחש, <code>()stringify</code> עובד בדרך ההפוכה. נסו להזין את השורות הבאות לקונסולה:</p>
+
+<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString</pre>
+
+<p>כאן יצרנו אובייקט JavaScript ואז המרנו אותו למחרוזת JSON באמצעות <code>()stringify</code> - ושמרנו את הערך שחזר במשתנה חדש. </p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>במאמר זה, ניסינו להעניק לכם מדריך פשוט כיצד להשתמש ב-JSON בתוכנויות שלנו, כולל כיצד ליצור ולהמיר JSON, וכיצד לגשת למידע המאוחסן בתוכו. במאמר הבא אנחנו נסתכל על פרקטיקות ביצירת אובייקטים ב-JavaScript.</p>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+ <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript למתחילים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Inheritance">הורשה ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/JSON">עבודה עם JSON data</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_building_practice">שיטות ליצירת אובייקטים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/he/learn/javascript/objects/object-oriented_js/index.html b/files/he/learn/javascript/objects/object-oriented_js/index.html
new file mode 100644
index 0000000000..63f83aa94d
--- /dev/null
+++ b/files/he/learn/javascript/objects/object-oriented_js/index.html
@@ -0,0 +1,275 @@
+---
+title: Object-oriented JavaScript for beginners
+slug: Learn/JavaScript/Objects/Object-oriented_JS
+translation_of: Learn/JavaScript/Objects/Object-oriented_JS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">לאחר שסיימנו עם עקרונות היסוד, כעת אנחנו נתמקד על- object-oriented JavaScript (OOJS) — מאמר זה נועד להעניק מבט בסיסי של תיאוריית object-oriented programming (OOP) ולאחר מכן נחקור כיצד JavaScript מחקה (מלשון חיקוי) מחלקות אובייקטים באמצעות פנקציה בנאית (constructor functions), וכיצד אנחנו יכולים ליצור ״מופעי״ אובייקטים</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) and OOJS basics (see <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין את בסיס התיאוריה שעומדת מאחורי תכנות מונחה עצמים, וכיצד זה מתקשר ל- JavaScript ("everything is an object"), ולהבין כיצד ליצור constructors ו- object instances.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Object-oriented_programming_—_הבסיס">Object-oriented programming — הבסיס</h2>
+
+<p>לשם ההצלחה, ננסה ללהעניק לכם נקודת מבט מופשטת, מלמעלה, של מה זה בעצם תכנות מונחה עצמים - Object-oriented programming (OOP). אנחנו אומרים מופשט מכיוון ש-0000 יכול להיות מורכב מאוד ופירוט של כל התיאוריה רוב הסיכויים תבלבל אתכם. הרעיון הבסיסי של OOP הוא שאנחנו משתמשים באובייקטים על מנת לדמות דברים אמיתיים מהעולם האמיתי שנרצה לכלול בתוך התוכנית שלנו, ו/או להעניק דרך פשוטה לגשת לפונקציונליות מסויימת, שבדרכים אחרות היה פשוט בלתי אפשרי או מסובך מאוד.</p>
+
+<p>אובייקטים יכולים להכיל מידע וקוד הקשורים זה לזה, אשר מייצדים מידע אודות הדבר שנאחנו מנסים לדמות, ופונקציונליות או התנהגות שאנחנו רוצים שיהיה לאובייקט שלנו. המידע של האובייקט, ולרוב גם הפונקציות שלו, יכולות להיות מאוחסות בצורה מסודרת - (המילה המקצועית היא <strong>encapsulated</strong> - בתוך האובייקט (וניתן לתת להם שמות שיהוו הפניה לאותם ערכים, ולפעמים זה נקרא <strong>namespace</strong>), וכך נהיה פשוט לבנות ולגשת אליהם. אובייקטים גם לרוב משמשים כמאחסני מידע שאנחנו יכולים לשלוח בקלות ברשת.</p>
+
+<h3 id="הגדרה_של_טמפלייט_של_אובייקט">הגדרה של טמפלייט של אובייקט</h3>
+
+<p>ננסה לחשוב על תוכנית פשוטה אשר מציגה מידע על תלמידים ועל מורים בבית ספר. אנחנו נסתכל על דוגמא זו ועל תיאוריית oop באופן כללי, מבלי להתייחס לשפת תכנות מסויימת.</p>
+
+<p>על מנת להתחיל, אנחנו נחזור לאובייקט Person מהמאמר הקוד <a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a>, אשר מגדיר את המידע והפונקציונליות הגנריות של בן אדם, של person. יש הרבה דברים שאנחנו יכולים לדעת על אדם (כתובת, גובה, מידת נעליים וכד׳), אבל במקרה שלנו אנחנו מעונינים להראות את השם, גיל, מין תחומי עניין שלהם, ואנחנו רוצים שתאפשר לנו לכתוב הקדמה קצרה עליהם, בהתבסס על המידע שיש לנו ולאפשר לאותו אובייקט להגיד שלום בצורה כלשהי. זה בעצם נקרה <strong>abstraction</strong> — יצירת מודל פשוט של משהו מורכב יותר אשר מייצג את האספקטיים החשובים ביותר בדרך כזו שניתן לעבוד איתה בתוכנית שלנו ולצרכי התוכנית שלנו.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p>
+
+<h3 id="יצירת_אובייקטים">יצירת אובייקטים</h3>
+
+<p>מהמחלקה שלנו אנחנו יכולים ליצור מופעי אובייקט - <strong>object instances</strong> — אלו בעצם אובייקטים המכילים את המידע והפונקציונליות שהוגדרו ב-מחלקה. מהמחלקה Person שלנו, אנחנו יכולים ליצור כמה אנשים בפועל:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p>
+
+<p>כאשר נוצר מופע אובייקט ממחלקה, ה- <strong>constructor function</strong> של אותה מחלקה מורץ על מנת ליצור את האובייקט החדש. תהליך זה של יצירת מופע אובייקט ממחלקה נקרא <strong>instantiation</strong> — ומופע האובייקט שנוצר, האובייקט שנוצר, אנו אומרים שהוא <strong>instantiated</strong> מהמחלקה</p>
+
+<h3 id="Specialist_classes">Specialist classes</h3>
+
+<p>במקרה שלנו אנחנו לא רוצים אנשים שנראים אותו דבר - אנחנו רוצים מורים וסטודנטים, אשר הם בעלי מאפיינים ספיצפיים של בני אדם. ב-OOP, אנחנו יכולים ליצור מחלקות חדשות בהתבסס על מחלקות קיימות - אלו נקראים - <strong>child classes</strong> והם יכולים לרשת, <strong>ירושה </strong> של מידע ומאפיינים של  <strong>קלאס האב</strong> שלהם, כך שאנחנו יכולים להשתמש בפונקציונליות שמשותפת לכל האובייקטים באמצעות אותה הורשה, מבלי שנצטרף לכתוב אותה מחדש בכל פעם. כאשר אנחנו צריכים להעניק תכונה או פונקציונליות פרטנית לאובייקט, אנחנו יכולים להגדיר אותם על אותו אובייקט באופן פרטני.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>זהו מאוד שימושי - מורים וסטודנטים חולקים מאפיינים בסיסיים כמו שם, גיל, מין כך שזה יהיה נוח אם נוכל להגדיר את המאפיינים הללו פעם אחת בלבד. אנחנו גם יכולים להגדיר מאפיינים דומים באופן נפרד, במחלקות שונות, כך שכל מאפיין שכזה יהיה ב-namespace אחר. לדוגמא,הברה של סטודנט יכולה להיות שונה מהברכה של מורה. כך לדוגמא, הברכה של סטודנט תהיה "Yo, I'm [firstName]" (e.g <em>Yo, I'm Sam</em>), בעוד הברכה של מורה תהיה "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (e.g <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>).</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: המילה הרשמית לאפשרות לשכפל אובייקטים ולהחיל עליהם את אותה פונקציונליות נקראת <strong>polymorphism</strong>. רק למקרה ותהיתם</p>
+</div>
+
+<p>אנחנו יכולים ליצור מופעי אובייקטים חדשים מה-child classes. לדוגמא:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>בהמשך המאמר, אנחנו נסתכל כיצד תיאורית oop באה לידי ביטוי ב-JavaScript.</p>
+
+<h2 id="Constructors_ו-_object_instances">Constructors ו- object instances</h2>
+
+<p>JavaScript  משתמש בפונקציות מיוחדות שנקראות <strong>constructor functions</strong> על מנת להגדיר ול initialize אובייקטים ואת המאפיינים שלהם. זה שימושי מאוד מכיוון שאנחנו ניתקל בסיטואציות שבהן אנחנו לא יודעים כמה אובייקטים אנחנו נרצה או נצטרף ליצור. constructors מאפשרים לנו ליצור אובייקטים כמה שנרצה בדרך אפקטיבית, וך צירוף המידע והפונקציות שלהם ככל שנרצה.</p>
+
+<p>נחקור כעת יצירה של מחלקות באמצעות constructors ויצירה של מופעי אובייקט מהם ב-JavaScript. ראשית, אנא צרו עותק של <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a></p>
+
+<h3 id="דוגמא_פשוטה">דוגמא פשוטה</h3>
+
+<ol>
+ <li>נתחיל בכך שנסתכל כיצד אנחנו יכולים להגדיר person באמצעות פונקציה רגילה. הוסיפו את הפונקציה הזו לתוך אלמנט <code>script</code> :
+
+  <pre class="brush: js notranslate">function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + obj.name + '.');
+  };
+  return obj;
+}</pre>
+ </li>
+ <li>כעת אנחנו יכולים ליצור person חדש באמצעות קריאה לפונקציה זו - נסו להזין אתהקוד הבא בקונסולה:
+  <pre class="brush: js notranslate">var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();</pre>
+  זה עובד בצורה טובה, אבל קצת מפותלת. אם אנחנו יודעים שאנחנו רוצים ליצור אובייקט, מדוע אנחנו צריכים ליצור במפורש אובייקט ריק בהתחלה ולהחזיר אותו? למרבה המזל, javascript מעניקה לנו קיצור שימושי פונקציה בנאית- constructor functions - בואו ניצור אחת יחד:</li>
+ <li>החליפו את הפונקציה הקודמת עם הפונקציה הנוכחית:
+  <pre class="brush: js notranslate">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+ </li>
+</ol>
+
+<p>ה-constructor function היא הגרסה של javascript למחלקות. שימו לב שיש לה את כל המאפיינים שאנחנו נצפה לראות בפונקציה, למרות שהיא לא מחזירה שום דבר או יוצרת אובייקט באופן מפורש - היא בסך הכל מגדירה מפתחות ומתודות. אנו משתמשים במילה השמורה <code>this</code> — זה בעיקרון אומר שבכל פעם שנוצר מופע אובייקט, ה- <code>name</code> property יהיה שווה לערך של name value שהועבר לתוך ה- constructor, והמתודה <code>greeting()</code> תשתמש באותם ערכים שהועברו ל- constructor.</p>
+
+<div class="note">
+<p><strong>שימו לב</strong>:שם של constructor function בדרך כלל מתחיל עם אות גדולה - זו מוסכמה מקובלת על מנת לזהות בקלותconstructor functions קוד שלנו.</p>
+</div>
+
+<p>אז כיצד אנחנו קוראים ל-constructor function על מנת ליצור אובייקטים?</p>
+
+<ol>
+ <li>הוסיפו את השורות הבאות מתחת לקוד הקודם שהוספתם:
+  <pre class="brush: js notranslate">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+ </li>
+ <li>שמרו ורעננו את הדף ולאחר מכן הזינו את השורות הבאות בקונסולה:
+  <pre class="brush: js notranslate">person1.name
+person1.greeting()
+person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>אתם תראו שאנחנו יצרנו שני אובייקטים חדשים, כאשר כל אחד מהם נשמר תחת שם אחר — כאשר אנחנו רוצים לגשת למפתחות ולמתודות שלהם, אנחנו צריכים להתחיל עם קריאה ל <code>person1</code> או ל- <code>person2</code>; הפונקציונליות המאוחסנת בהם ארוזה בצורה מסודרת כך שהיא תתנגש עם פונקציונליות אחרת. יחד עם זאת, יש להם את אותו מפתח <code>name</code>  ואת אותה מתודת <code>greeting()</code> שזמינה עבורה. שימו לב שהם משתמשים בערך של ה - <code>name</code> שניתן להם כאשר הם נוצרו. זו אחת מהסיבות מדוע זה מאוד חשוב להתשמש במילה <code>this</code>, כך שהם ישתמשו בערכים שלהם ולא בערכים אחרים.</p>
+
+<p>נסתכל שוב על הקריאות ל- constructor שוב:</p>
+
+<pre class="brush: js notranslate">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+
+<p>בכל אחת מהקריאות, המילה השמורה <code>new</code> משמשת על מנת להגיד לדפדפן שאנחנו רוצים ליצוא מופע אובייקט חדש, ולאחר מכן יש את שם הפונקציה עם הפרמטרים הרלוונטיים בתוך הסוגריים והתוצאה של אותה פונקציה, של אותה constructor function, מאוחסנת בתוך משתנה - זה דומה מאוד לאיך שפונקציה רגילה מופעלת או לאיך שקוראים לפונקציה רגילה. כל מופע אובייקט שכזה נוצר בהתאם להגדרה של ה-constructor function:</p>
+
+<pre class="brush: js notranslate">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+
+<p>לאחר שהאובייקטים החדשים נוצרו, המשתנים <code>person1</code> ו- <code>person2</code> מכילים את האובייקטים הבאים:</p>
+
+<pre class="brush: js notranslate">{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>שימו לב שכאשר אנחנו קוראים ל-constructor function שלנו, אנחנו מגדירים את המתודה <code>greeting()</code> בכל פעם - משהו שאינו אידיאלי. על מנת להימנע מכך, אנחנו נגדיר פונקציות שהוא בתבנית האב - אנו נגע בנושא זה בהמשך.</p>
+
+<h3 id="יצירת_ה-constructor_הסופי_שלנו">יצירת ה-constructor הסופי שלנו</h3>
+
+<p>הדוגמא שהסברנו למעלה הייתה דוגמא פשוטה שנועדה רק לסבר לנו את האוזן. כעת, ניצור את ה-constructor function code&gt;Person() הסופי שלנו.</p>
+
+<ol>
+ <li>הסירו את הקוד שהכנסתם עד עכשיו, והוסיפו את ה - constructor הזה - הוא בעצם אותו דבר כמו בדוגמא למעלה, רק קצת יותר מורכב: :
+  <pre class="brush: js notranslate">function Person(first, last, age, gender, interests) {
+  this.name = {
+     first : first,
+     last : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}</pre>
+ </li>
+ <li>כעת, הוסיפו את הקוד הבא מתחת, על מנת ליצור מופעי אובייקט מ-constructor:
+  <pre class="brush: js notranslate">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+ </li>
+</ol>
+
+<p>אתם תראו שאנחנו יכולים לגשת לכל אחד מהמפתחות והמתודות בדיוק כפי שיכלנו לפני כן - נסו להזין את הקוד הבא בקונסולה:</p>
+
+<pre class="brush: js notranslate">person1['age']
+person1.interests[1]
+person1.bio()
+// etc.</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם אתם נתקלים בבעיות, נסו להשוות את הקוד שלכם לקוד שלנו - <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> או ראו את <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">דף האינטרנט</a>.</p>
+</div>
+
+<h3 id="תרגולים_נוספים">תרגולים נוספים</h3>
+
+<p>על מנת להתחיל, הוסיפו כמה אובייקטים נוספים משלכם, ונסו לקבל או לקבוע את המידע שלהם.</p>
+
+<p>בנוסף, יש מספר בעיות עם המתודה <code>bio()</code> — הפלט שלה תמיד יציג פלט בלשון זכר, למרות ש-person הוא נקבה. והמתמודה גם תציג רק שני תחומי עניין, אפילו אם בתוך המערך <code>interests</code> יש יותר תחומי עניין. האם אתם יכולים לתקן את זה ב-constructor שלנו? אם יכולים לשים כל קוד בתוך הconstructor (אתם כנראה תצרו משפטי תנאי ולולאה). חשבו כיצד המשפטים אמורים להיראות בצורה שונה כאשר מדובר במין שונה ומה עושים כאשר מספר תחומי העניין הוא 1, 2 או יותר מ-2.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם אתם נתקעים, ראו את <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">התשובה ב- GitHub repo</a> או ב<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">דף היאנטרנט</a>) — אך נסו בעצמכם לפני כן</p>
+</div>
+
+<h2 id="דרכים_נוספות_ליצירת_מופעי_אובייקט_-_ליצירת_אובייקטים_חדשים">דרכים נוספות ליצירת מופעי אובייקט - ליצירת אובייקטים חדשים</h2>
+
+<p>עד עכשיו ראינו שתי דרכים ליצירת מופעי אובייקט — <a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">הצהרה על אובייקט ליטראלי</a>, ובאמצעות שימוש ב - constructor function (כפי שראינו למעלה).</p>
+
+<p>ישנם דרכים נוספים ואנחנו נרצה להציג לכם אותם על מנת שתכירו אותם במידה ותיתקלו בהם בהמשך הדרך</p>
+
+<h3 id="The_Object_constructor">The Object() constructor</h3>
+
+<p>ראשית, אתם יכולים לעשות שימוש ב constructor <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> על מנת ליצור אובייקט חדש. כן, גם אובייקטים גנריים יש להם constructor, אשר יוצר אובייקט ריק.</p>
+
+<ol>
+ <li>נסו להזין את הקוד הבא לתוך הקונסולה:
+  <pre class="brush: js notranslate">var person1 = new Object();</pre>
+ </li>
+ <li>קוד זה מאחסן בעצם אובייקט ריק בתוך המשתנה <code>person1</code> .אנחנו יכולים להוסיף מפתחות ומתודות לאובייקט זה באמצעות שימוש ב- dot או dot; נסו להזין את הדוגמאות הבאות בקונסולה:
+  <pre class="brush: js notranslate">person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};</pre>
+ </li>
+ <li>אתם גם יכולים להעביר object literal ל- <code>Object()</code> constructor כפרמטר, על מנת למלא מראש את הפרופ׳ והמתודות: נסו להזין את הקוד הבא בקונסולה:
+  <pre class="brush: js notranslate">var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});</pre>
+ </li>
+</ol>
+
+<h3 id="שימוש_במתודת_create">שימוש במתודת create()</h3>
+
+<p>Constructors יכולים לעזור להעניק סדר לקוד שלנו - אנחנו יכולים ליצור את הconstructors במקום אחד ואז ליצור מופעים שלהם כמה שנרצה, במקום אחר, וזה יהיה ברור מאיפה הם נוצרוץ</p>
+
+<p>יחד עם זאת, ישנם מפתחים אשר מעדיפים ליצור מופעי אובייקט מבלי ליצור תחילה constructors, במיוחד אם אתם יוצרים רק מספר קטם של מופעי אובייקט. ל-JavaScript יש מתודה מובנת שנקראת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> אשר מאפשרת לנו לעשות זאת. עם מתודה זו, אנחנו יכולים ליצור אובייקט חדש, בהתבסס על אובייקט קיים.</p>
+
+<ol>
+ <li>העלו את התרגיל שסיימתם בתרגול הקודם לדפדפן והוסיפו את הקוד הבא לקונסולה: :
+  <pre class="brush: js notranslate">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>כעת נסו להזין את הקוד הבא בקונסולה:
+  <pre class="brush: js notranslate">person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>אתם תראו ש-<code>person2</code> נוצר בהתבסס על <code>person1</code> - יש לו את אותם פרופ׳ ומתודות שזמינות עבורו.</p>
+
+<p>הגבלה אחת שיש בשימוש עם מתודת <code>create()</code> היא שדפדפן IE8 does לא תומך בה. אז constructors יכולים להיות דרך רלוונטם במידה ואתם צריכים לתמוך בגרסה זו.</p>
+
+<p>אנו נחקור את המתודה <code>create()</code> בפרטי פרטים בהמשך הקורס.</p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>מאמר זה העניק לכם מבט מופשט על תיאוריית פיתוח מונחה עצמים - זה לא הסיפור המלא כמובן, אבל זה נועד לתת לכם את הרעיון שאיתו אנחנו ממשיכים. בנוסף, התחלנו לגלות כיצד אנחנו יכולים ליצור מופעי אובייקט, או אובייקטים חדשים, בדרכים שונות.</p>
+
+<p>במאמר הבא אנחנו נחקור את נושא JavaScript object prototypes.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript למתחילים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Inheritance">הורשה ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/JSON">עבודה עם JSON data</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_building_practice">שיטות ליצירת אובייקטים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/he/learn/javascript/objects/object_prototypes/index.html b/files/he/learn/javascript/objects/object_prototypes/index.html
new file mode 100644
index 0000000000..0afe0ef67d
--- /dev/null
+++ b/files/he/learn/javascript/objects/object_prototypes/index.html
@@ -0,0 +1,283 @@
+---
+title: Object prototypes
+slug: Learn/JavaScript/Objects/Object_prototypes
+translation_of: Learn/JavaScript/Objects/Object_prototypes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Prototypes - אבי טיפוס, זה המנגנון שבאמצעותו אובייקטים של javascript יורשים מאפיינים אחד מהשני. במאמר זה אנחנו נסביר כיצד שרשראות אבי טיפוס - (prototype chains) עובדות ונסתכל כיצד מאפיין (property) בשם prototype יכול לשמש עבור הוספת מתודות ל-constructors קיימים.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>
+    <p>הבנה של פונקציות ב-JavaScript, הכרות עם הבסיס של JavaScript (ראו את המאמר צעדים ראשונים ב-<a href="/en-US/docs/Learn/JavaScript/First_steps">צעדים ראשונים ב-JavaScript</a> ו-<a href="/en-US/docs/Learn/JavaScript/Building_blocks">אבני הבניין של </a><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript</a>) וכן הבסיס של תכנות מונחה עצמית ב-JavaScript (ראו <a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>הבנה של JavaScript object prototypes, כיצד שרשראות prototype עובדות, וכיצד להוסיף מתודות חדשות לתוך פרופ׳ בשם prototype .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="שפה_מבוססת_אב-טיפוס">שפה מבוססת אב-טיפוס?</h2>
+
+<p>JavaScript לעיתים קרובות מתוארת כ<strong>שפה מונחית אבי-טיפוס (prototype-based language)</strong> - על מנת לאפשר הורשה, לאובייקטים יכול להיות <strong>אובייקט אב-טיפוס </strong>(<strong>prototype object</strong>)<strong>,</strong> אשר מתפקד כאובייקט תבנית - אובייקט אב טיפוס אשר ממנו האובייקטים יכולים לירוש מתודות (methods) ומאפיינים (properties).</p>
+
+<p>לאובייקט אב-הטיפוס (prototype), יכול להיות גם אובייקט אב-טיפוס משל עצמו, אשר ממנו הוא יורש מתודות (methods) ומאפיינים (properties) וכך הלאה. תהליך זה לרוב מוגדר כ<strong>שרשרת אבי הטיפוס (prototype chain)</strong>, אשר מסבירה מדוע לאובייקטים שונים יש מאפיינים ומתודות שזמינים עבורם, כאשר אלו בכלל הוגדרו באובייקטים אחרים. </p>
+
+<p>ליתר דיוק, המתודות והמאפיינים מוגדרים במאפיין (property) בשם <code>prototype</code> ב-constructor functions <strong>ולא</strong> באובייקטים עצמם שנוצרו (object instance).</p>
+
+<p>ב-JavaScript, נוצר קשר בין האובייקט שנוצר (object instance) לבין אב הטיפוס/prototype שלו באמצעות ״הליכה״ על שרשרת אבי הטיפוס. אנו נוכל לראות את אב הטיפוס של אובייקט ב-property של האובייקט שנוצר בשם <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> . שם זה נגזר מ-<code>prototype</code> שמוגדר בכלל ב-constructor.  </p>
+
+<div class="note">
+<p><strong>לתשומת לב:</strong>  חשוב להבין שיש אבחנה בין אב הטיפוס של האובייקט  (object' s prototype) אשר זמין באמצעות <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">(Object.getPrototypeOf(obj</a></code> או באמצעות מאפיין <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code><u><strong>לבין</strong></u> מאפיין (property) בשם אב-טיפוס (prototype) אשר נמצא ב-constructor functions. </p>
+
+<p>הראשון הוא מאפיין שיופיע על כל אובייקט שייווצר ויעיד מיהו אב הטיפוס של אותו אובייקט ואילו השני, אשר נמצא ב-constructor הוא בעצם מאפיין של אותו constructor. </p>
+</div>
+
+<p>נסתכל על דוגמא על מנת להבין זאת לעומק.</p>
+
+<h2 id="הבנה_של_אובייקטים_מסוג_אב-טיפוס">הבנה של אובייקטים מסוג אב-טיפוס</h2>
+
+<p>נחזור לדוגמא הקודמת שבה סיימנו לכתוב את ה-constructor שלנו <code>()Person</code>:</p>
+
+<p>העלו את הדוגמא בדפדפן שלכם. אם אין לכם את הדוגמא עצמה או שהיא אינה עובדת, אנא השתמשו בדוגמא שלנו אשר נמצאת ב<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">קישור</a> זה או ב<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">קוד המקור</a>.</p>
+
+<p>בדוגמא זו, אנחנו מגדירים את ה -constructor function שלנו כך:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+  this.first = first;
+  this.last = last;
+//...
+}</pre>
+
+<p>אנו יוצרים אובייקטים מה-constructor function שהגדרנו כך:</p>
+
+<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+
+<p>אם תקלידו <code>.person1</code> בקונסולה, אתם אמורים לראות שהדפדפן מנסה להשלים באופן אוטומטי אפשרויות הזמינות עבור אובייקט זה: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p>
+
+<p>ברשימה זו, אתם יכולים לראות את הפרופ׳ ומתודות שהוגדרו ב-constructor <code>Person()</code> — <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code>, ו- <code>greeting</code>. בנוסף, אנחנו גם נראה פרופ׳ ומתודות נוספות - <code>watch</code>, <code>valueOf</code> וכד׳ - אלו מוגדרים בתבנית אב הטיפוס (prototype object) של <code>()Person</code>, שזה  <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p>
+
+<p>מה קורה כשאנחנו רוצים לקרוא למתודה, להפעיל מתודה על <code>person1</code>, אשר מוגדרת ב-<code>Object</code>?:</p>
+
+<pre class="brush: js">person1.valueOf()</pre>
+
+<p>המתודה הזו - <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">()Object.valueOf</a></code> נורשת על ידי <code>person1</code> בגלל שתבנית אב הטיפוס של האובייקט (הפונקציה <code>()Person</code>) שיצר אותו היא  <code>()Object.</code> המתודה <code>()valueOf</code> מחזירה את הערך של האובייקט שהיא נקראה עליו: </p>
+
+<ul>
+ <li>הדפדפן תחילה בודק לראות האם לאובייקט <code>person1</code> יש את המתודה <code>()valueOf</code> זמינה עליו, כפי שמוגדר ב-constructor שלו, <code>()Person</code>. </li>
+ <li>אם לא - הוא בודק האם לאב הטיפוס של <code>()Person</code>, יש את המתודה <code>()valueOf</code> זמינה עליו. יש לו ולכן היא זמינה עבור <code>person1</code>. </li>
+</ul>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אנחנו רוצים להדגיש את העבודה שמתודות ופרופ׳ <strong>לא</strong> מועתקים מאובייקט אחד לשני ב-prototype chain - הם זמינים עבורם באצעות הליכה על prototype chain כפי שהסברנו למעלה..</p>
+</div>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אין דרך רשמית להיכנס לאובייקט אב הטיפוס של אובייקט בצורה ישירה  הקשרים שבין הפריטים בשרשרת מוגדר בתוך פרופ׳ פנימי - שנקרא <code>[[prototype]]</code> במסמכים של השפה - ראו גם {{glossary("ECMAScript")}}. </p>
+
+<p>מרבית הדפדפנים המודרניים מכילים פרופ׳ שזמין שנקרא בשם <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code>, אשר מכיל את האובייקט שהוא תבנית האב של האובייקט הרלוונטי. לדוגמא, נסו להזין <code>person1.__proto__</code> ו- <code>person1.__proto__.__proto__</code> לראות איך זה נראה. החל מ-ECMAScript 2015 אנחנו יכולים לגשת לאובייקט אב הטיפוס של אובייקט באמצעות <code>Object.getPrototypeOf(obj)</code>.</p>
+</div>
+
+<h2 id="The_prototype_property_היכן_שמגדירים_מה_מורישים">The prototype property: היכן שמגדירים מה מורישים</h2>
+
+<p>אז, היכן הפרופ׳ והמתודות שמורישים מוגדרים? אם אנחנו מסתכלים על הדף <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, אנחנו נראה רשימה מצד של שמאל של פרופ׳ ומתודות - הרבה יותר מאלו שראינו שזמינות עבור <code>person1</code>. למה? מכיוון שחלקם הורשו ל-<code>person1</code> וחלקם לא. </p>
+
+<p>כפי שהוסבר למעלה, אלו שנורשו הם אלו שמוגדרים במאפיין (property) בשם <code>prototype</code> - כלומר אלו הם שמתחילים עם <code>.Object.prototype</code> ולא אלו שרק מתחילים עם <code>Object</code>. הערך של המאפיין <code>prototype</code> הוא אובייקט, אשר בעצם הוא מאחסן את כל הפרופ׳ והמתודות שאנחנו רוצים להוריש לאובייקטים בהמשך ה-prototype chain.</p>
+
+<p>כך לדוגמא, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">()Object.prototype.watch</a></code> ו- <code>()<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf</a></code> זמינות עבור כל אובייקט שיירש מ-<code>Object.prototype</code>, כולל מופעים חדשים של אובייקטים מה-<code>()</code>constructor <code>Person</code>. </p>
+
+<p>לעומת זאת, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">()Object.is</a></code> ו-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">()Object.keys</a></code> לדוגמא, לא מוגדרים בתוך <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">()</a></code> ולכן לא נוריש אותם לאובייקטים אשר יירשו מ-<code>Object.prototype</code>. הם מתודות ופרופ׳ אשר זמינים רק עבור ה-constructor <code>Object</code> עצמו. </p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>:  זה נראה מוזר - כיצד יכולה להיות מתודה שמוגדרת על ה-constructor, שהיא בעצמה פונקציה? פונקציות הם גם סוג של אובייקט - ראו הדף בנושא <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">()Function</a></code> להמשך פרטים.</p>
+</div>
+
+<ol>
+ <li>אתם יכולים לבדוק את הפרופ׳ בשם ה-prototype של האובייקטים הנוכחיים שלנו - חזרו לדוגמא הקודמת והקלידו את הקוד הבא בקונסולה:
+  <pre class="brush: js">Person.prototype</pre>
+ </li>
+ <li>אתם לא תראו יותר מדי אפשרויות מכיוון שלא הגדרנו כלום בפרופ׳ בשם prototype של ה-constructor. כברירת מחדל, הפרופ׳ בשם prototype של ה-constructor תמיד מתחיל ריק.</li>
+ <li>כעת, נסו להזין את הקוד הבא:
+  <pre class="brush: js">Object.prototype</pre>
+ </li>
+</ol>
+
+<p>אתם תראו מספר גדול של מתודות שמוגדרות ב-property בשם <code>prototype</code> של <code>Object</code>, אשר זמינות עבור אובייקטים שירשו מ-<code>Object</code> כפי שהסברנו למעלה.</p>
+
+<p>אתם תראו דוגמאות כאלו של שרשרת ההורשה - prototype chain inheritance בכל JavaScript - נסו לחפש אחר מתודות ופרופ׳ אשר מוגדרים בפרופ׳ של האובייקטים הגלובליים <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code>, ו-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>. לכולם יש מס׳ מתודות ופרופ׳ שמוגדרות באותו prototype. זו הסיבה לדוגמא שכשאר אנחנו יוצרים מחרוזת בצורה הבאה:</p>
+
+<pre class="brush: js">var myString = 'This is my string.';</pre>
+
+<p>ל-<code>myString</code> ישר יש מספר מתודות שימושיות שזמינות עבורו כמו <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">()</a></code> <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace</a></code> וכד׳. </p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אנו ממליצים לקרוא את המדריך המעמיק שלנו בנושא - <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Using_prototypes_in_JavaScript">Using prototypes in JavaScript</a> לאחר שהבנתם את החלק הזה. החלק הזה בכוונה נכתב בצורה פשוטה (יחסית) על מנת להסביר את הרעיון שעומד מאחורי הנושא.</p>
+</div>
+
+<div class="warning">
+<p><strong>חשוב</strong>: המאפיין (<code>prototype</code> (property הוא אחד מהחלקים המבלבלים ב-JavaScript. אתם עלולים לחשוב ש-<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">this</span></font> מצביע על האובייקט אב טיפוס של האובייקט הנוכחי, אבל הוא לא (זה אובייקט פנימי שניתן לגשת אליו באמצעות <code>__proto__</code>, זוכרים? ).</p>
+
+<p>המאפיין <code>prototype</code> הוא בעצם property שמכיל אובייקט, אשר על אובייקט זה אנחנו מגדירים את המתודות והפרופ׳ שנרצו שיורשו.</p>
+</div>
+
+<h2 id="שימוש_במתודה_()create">שימוש במתודה ()create</h2>
+
+<p>מוקדם יותר ראינו כיצד מתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create</a></code> יכולה לשמש על מנת ליצור אובייקט חדש:</p>
+
+<ol>
+ <li>לדוגמא, נסו להזין בקונסולה של הדוגמא הקודמת את הקוד הבא:
+  <pre class="brush: js">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>מה ש-<code>()create</code> עושה בפועל היא ליצור אובייקט חדש מ-prototype מוגדר. כאן <code>person2</code> מיוצר כאובייקט חדש באמצעות שימוש ב-<code>person1</code> כאובייקט ה-prototype שלו, כאובייקט אב הטיפוס שלו. אתם יכולים לראות זאת באמצעות הזנת הקוד הבא בקונסולה:</li>
+ <li>
+  <pre class="brush: js">person2.__proto__</pre>
+ </li>
+</ol>
+
+<p>זה יחזיר לנו <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">person1</span></font>.</p>
+
+<h2 id="המאפיין_(property)_בשם_constructor">המאפיין (property) בשם constructor</h2>
+
+<p>לכל constructor function יש מאפיין (property) בשם <code>prototype</code> אשר הערך שלו הוא אובייקט. אותו אובייקט מכיל מאפיין (property) בשם <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code>. </p>
+
+<p>המאפיין <code>constructor</code> הזה, <strong>מצביע ל-constructor function המקורית</strong>. כפי שתראו בהמשך, כאשר properties שמוגדרים על Person.prototype property, או באופן כללי, על המאפיין <code>prototype</code> של constructor function, שהוא בעצמו הוא אובייקט, הם נהיים זמינים עבור כל האובייקטים שייווצרו באמצעות ה-constructor בשם ()Person. המאפיין <code>constructor</code> זמין גם עבור האובייקט <code>person1</code> וגם עבור האובייקט <code>person2</code>. </p>
+
+<ol>
+ <li>לדוגמא, נסו להזין את השורות הבאות בקונסולה:
+  <pre class="brush: js">person1.constructor
+person2.constructor</pre>
+
+  <p>שתיהן אמורות להחזיר לנו ה-<code>Person()</code> constructor, שכן היא מכילה את ה-״הגדרה״ המקורית של אובייקטים אלו. טריק חכם הוא שניתן לשים סוגריים רגילות <code>()</code> בסוף המאפיין <code>constructor</code> (ובתוך הסוגריים להכניס פרמרטים הנדרשים ל-<code>constructor</code>, ככל ונדרשים), וואז נוצר לנו אובייקט חדש מאותו <code>constructor</code>. ה-<code>constructor</code> הוא בעצם פונקציה אחרי הכל, אז אפשר לקרוא לפונקציה באמצעות שימוש ב-<code>()</code> כמו שאנחנו יודעים. רק חשוב לשים את המילה השמורה <code>new</code> לפני, על מנת להגדיר שאנחנו רוצים שיווצר אובייקט חדש ולהשתמש בפונקציה הזו כ-<code>constructor</code> של אותו אובייקט. </p>
+ </li>
+ <li>נסו להזין את הקוד הבא בקונסולה:
+  <pre class="brush: js">var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre>
+ </li>
+ <li>כעת, נסו לגשת למתודות ולפרופ׳ של האובייקט החדש:
+  <pre class="brush: js">person3.name.first
+person3.age
+person3.bio()</pre>
+ </li>
+</ol>
+
+<p>זה עובד מצויין. אנחנו בדרך לא נשתמש באופציה שכזו, אבל זה יכול להיות שימושי כאשר אנחנו רוצים ליצור מופע אובייקט חדש ואין לנו הפנייה לקונסטרקטור המקורי בצורה פשוטה מכל סיבה שהיא. </p>
+
+<p>ה-property בשם <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> שימושי גם לדברים נוספים. לדוגמא, אם יש לנו אובייקט ואני רוצה להחזיר את שם ה-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> שהוא מופע שלו, כלומר שבנה אותו, אנחנו יכולים להזין את הקוד הבא:</p>
+
+<pre class="brush: js">instanceName.constructor.name</pre>
+
+<p>נסו לדוגמא להזין את הקוד הבא:</p>
+
+<pre class="brush: js">person1.constructor.name
+</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>:  הערך של <code>constructor.name</code> יכול להשתנות (כתוצאה מ-prototypical inheritance, binding, preprocessors, transpilers, etc. ועד), אז לדוגמאות מורכבות יותר, אנחנו נרצה להתשמש באופרטור <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code> במקום. </p>
+</div>
+
+<ol>
+</ol>
+
+<h2 id="שינוי_של_הפרופ׳_בשם_prototype_-_הוספההסרה_של_מתודות">שינוי של הפרופ׳ בשם prototype - הוספה/הסרה של מתודות</h2>
+
+<p>נסתכל כעת על דוגמא לשינוי של ה-property בשם <code>prototype</code> שנמצא ב-constructor function - מתודות שיתווספו ל-<code>prototype</code> יהיו זמינות עבור כל האובייקטים שנוצרו מאותה constructor function. בנקודה הזו אנחנו נוסיף מתודות ל-property בשם <code>prototype</code>של constructor function שלנו, כך שכל מה שנגדיר במאפיין <code>prototype</code> יהיה זמין עבור האובייקטים שייווצרו ממנו. </p>
+
+<ol>
+ <li>חזרו לדוגמא המופיע בקישור <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.htm</a> וצרו עותק מקומי של קוד המקור <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">source code</a>. מתחת לקוד הנוכחי של של JavaScript, הוסיפו את הקוד הבא, אשר יוצר מתודה חדשה במאפיין <code>prototype</code> של constructor function:</li>
+ <li>
+  <pre class="brush: js">Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+ </li>
+ <li>שמרו את הקוד והעלו את הדף בדפדפן, ונסו להזין את הקוד הבא :
+  <pre class="brush: js">person1.farewell();</pre>
+ </li>
+</ol>
+
+<p>אתם אמורים לקבל הודעה קופצת מסוג alert, המכילה את שם ה-person שהוגדר ב-constructor. זה מאוד שימוש, אבל מה שיותר שימושי זה שכל שרשרת ההורשה עודכנה באופן דינאמי ואוטומטי והפכה את המתודה הזו לזמינה עבור כל האובייקטים שנוצרו באמצעות אותה constructor function. </p>
+
+<p>חשבו על זה לרגע, בקוד שלנו אנחנו הגדרנו את ה-constructor function, ואז יצרנו אובייקט מאותה constructor function, ואז הוספנו מתודה נוספות ל-<code>prototype</code> של אותה constructor function: </p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+
+}
+
+var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+
+Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+
+<p>ומה שקרה זה שהמתודה שהגדרנו <code>()farewell</code> נהייתה זמינה עבור <code>person1</code> - והוא יכול לעשות בה שימוש, למרות שהוא הוגדר לפני שהגדרנו את המתודה החדשה. מגניב, לא?</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם אתם נתקלים בבעיות, ראו את הדוגמא <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">פה</a> או כ<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">דף אינטרנט</a>.</p>
+</div>
+
+<p>יחד עם זאת, לעיתים נדירות נראה properties שמוגדרים ב-property ה<code>prototype</code> מכיוון שהם לא ממש גמישים כשהם מוגדרים בצורה הזו. לדוגמא, ניתן להוסיף property בצורה הזו: </p>
+
+<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre>
+
+<p>זה לא ממש מאפשר גמישות (שכן יכול להיות שקוראים לאובייקט person החדש בשם אחר), ולכן יהיה עדיף לבנות את המאפיין החדש בצורה הבאה: </p>
+
+<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre>
+
+<p>יחד עם זאת, זה לא יעבוד שכן <code>this</code> יפנה לסקופ הגלובלי במקרה הנוכחי ולא לסקופ של הפונקציה. קריאה למאפיין זה תחזיר ערך של <code>undefined undefined</code>.</p>
+
+<p>זה עובד מצוין על מתודה שהגדרנו למעלה ב-prototype מכיוון שהיא יושבת בתוך הסקופ של ה-function, והמתודה מועברת בתורה לסקופ של האובייקט שנוצר באמצעות constructor function. אז אולי נגדיר constant properties ב- prototype, כאלו שלא נשנה לעולם, אבל בכללי, זה עובד טוב יותר להגדיר properties בתוך ה-constructor. </p>
+
+<p>בעקרון, השימוש המקובל להגדרת אובייקטים הוא להגדיר את המאפיינים (properties) בתוך ה-constructor ואת המתודות בתוך ה-prototype. </p>
+
+<p>זה הופך הקוד לקל יותר לקריאה, שכן ה-constractor מכיל רק  את ההגדרות של properties ואילו המתודות מחולקות לבלוקים נפרדים. לדוגמא:</p>
+
+<pre class="brush: js">// Constructor with property definitions
+
+function Test(a, b, c, d) {
+  // property definitions
+}
+
+// First method definition
+
+Test.prototype.x = function() { ... };
+
+// Second method definition
+
+Test.prototype.y = function() { ... };
+
+// etc.</pre>
+
+<p>ניתן לראות שימוש בפועל בדוגמא <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">school plan app</a> של Piotr Zalewa.</p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>מאמר זה כיסה את הנושא של JavaScript object prototypes, כולל כיצד prototype object chains מאפשרת לאובייקטים לירוש מתודות ופרופ׳ אחד מהשני, ראינו את ה-property בשם prototype וכיצד הוא יכול לשמש על מנת להוסיף מתודות ל-constructors וכן נושאים נוספים.</p>
+
+<p>במאמר הבא אנחנו נראה כיצד ניתן להחיל הורשה של פונצקיונליות בין שני אובייקטים שניצור. </p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript למתחילים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Inheritance">הורשה ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/JSON">עבודה עם JSON data</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Object_building_practice">שיטות ליצירת אובייקטים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>