initial commit

41 files changed, 11831 insertions, 0 deletions

diff --git a/files/he/learn/css/index.html b/files/he/learn/css/index.html
new file mode 100644
index 0000000000..92e818ddb8
--- /dev/null
+++ b/files/he/learn/css/index.html
@@ -0,0 +1,64 @@
+---
+title: CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Debugging
+  - Landing
+  - NeedsContent
+  - NeedsTranslation
+  - Topic
+  - TopicStub
+  - length
+  - specificity
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. Whereas HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. So for example, you can use CSS to alter the font, color, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.</p>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>You should really learn the basics of HTML before attempting any CSS. We'd recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first — you can then learn about:</p>
+
+<ul>
+ <li>CSS, starting with the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> module</li>
+ <li>More advanced <a href="/en-US/Learn/HTML#Modules">HTML modules</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li>
+</ul>
+
+<p>We'd recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting with CSS, and you can't really learn CSS without knowing HTML.</p>
+
+<p>Before starting this topic, you should also have at least basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.) You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p>
+
+<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before attempting this topic, however it isn't absolutely necessary; much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt>
+ <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt>
+ <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
+ <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
+ <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so you can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.</dd>
+ <dt>Responsive design (TBD)</dt>
+ <dd>With so many different types of devices able to browse the Web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD, explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution, and explore the technologies available for serving different video and images depending on such features.</dd>
+</dl>
+
+<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.</p>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt>
+ <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd>
+</dl>
diff --git a/files/he/learn/getting_started_with_the_web/index.html b/files/he/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..b0c020b580
--- /dev/null
+++ b/files/he/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,61 @@
+---
+title: תחילת הדרך עם ה-Web
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Index
+  - NeedsTranslation
+  - TopicStub
+  - 'l10n:priority'
+  - publishing
+  - theory
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Getting started with the Web</em> is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.</p>
+</div>
+
+<h2 id="The_story_of_your_first_website">The story of your first website</h2>
+
+<p>It's a lot of work to create a professional website, so if you're new to web development we encourage you to start small. You won't build another Facebook right away, but it's not hard to get your own simple website online, so we'll start there.</p>
+
+<p>By working through the articles listed below in order, you will go from nothing to getting your first webpage online. Let's go!</p>
+
+<h3 dir="rtl" id="התקנת_תוכנות_בסיסיות"><a href="/he/Learn/Getting_started_with_the_web/Installing_basic_software">התקנת תוכנות בסיסיות </a></h3>
+
+<p>When it comes to tools for building a website, there's a lot to pick from. If you're just starting out, you might be confused by the array of code editors, frameworks, and testing tools out there. In <a href="/he/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a> we show you step-by-step how to install just the software you need to begin some basic web development.</p>
+
+<h3 dir="rtl" id="עיצוב_ונראות"><a href="/he/Learn/Getting_started_with_the_web/What_will_your_website_look_like">עיצוב ונראות</a></h3>
+
+<p dir="rtl">מומלץ לתכנן את אתר האינטרנט לפני בנייתו, יש להכיר את הקווים המנחים שלו כגון: גודל הבאנרים, היכן ימוקם הלוגו? מהו הגובה המתאים, גופן, צבעים ועוד.</p>
+
+<h3 dir="rtl" id="התמודדות_עם_קבצים"><a href="/he/Learn/Getting_started_with_the_web/Dealing_with_files">התמודדות עם קבצים</a></h3>
+
+<p>A website consists of many files: text content, code, stylesheets, media content, and so on. When you're building a website, you need to assemble these files into a sensible structure and make sure they can talk to one another. <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> explains how to set up a sensible file structure for your website and what issues you should be aware of.</p>
+
+<h3 dir="rtl" id="היכרות_עם_HTML"><a href="/he/Learn/Getting_started_with_the_web/HTML_basics">היכרות עם HTML </a></h3>
+
+<p dir="rtl">שפת HTML היא שפת תגיות המשמשת לבניה, עיצוב ועריכה של דפי אינטרנט.<br>
+ זוהי שפה פשוטה לכתיבה ובאמצעותה ניתן להוסיף אל דף האינטרנט אלמנטים שונים כגון: טבלה, תמונות, קישורים, פסקאות ועוד.</p>
+
+<h3 dir="rtl" id="היכרות_עם_CSS"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">היכרות עם CSS </a></h3>
+
+<p>Cascading Stylesheets (CSS) is the code that you use to style your website. For example, do you want the text to be black or red? Where should content be drawn on the screen? What background images and colors should be used to decorate your website? <a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a> takes you through what you need to get started.</p>
+
+<h3 dir="rtl" id="היכרות_עם_Javascript"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">היכרות עם Javascript </a></h3>
+
+<p>JavaScript is the programming language that you use to add interactive features to your website — for example: games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more. <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a> gives you an idea of what is possible with this exciting language, and how to get started.</p>
+
+<h3 dir="rtl" id="פרסום_האתר"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">פרסום האתר</a></h3>
+
+<p dir="rtl">כעת, לאחר שהקוד מוכן וכל קבצי האתר מאורגנים כל שנותר הוא להעלות אותו לאינטרנט כדי שכולם יוכלו לבקר בו, ראה <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">מאמר זה</a> המסביר כיצד לפרסם את האתר.</p>
+
+<h3 dir="rtl" id="כיצד_פועל_האינטרנט"><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">כיצד פועל האינטרנט?</a></h3>
+
+<p dir="rtl">מה קורה ברקע לאחר שאנחנו נכנסים לאתר האהוב עלינו? כיצד הנתונים מגיעים מהשרת והיכן הם מאוחסנים?</p>
diff --git a/files/he/learn/html/index.html b/files/he/learn/html/index.html
new file mode 100644
index 0000000000..df97989e28
--- /dev/null
+++ b/files/he/learn/html/index.html
@@ -0,0 +1,58 @@
+---
+title: 'Learning HTML: Guides and tutorials'
+slug: Learn/HTML
+tags:
+  - Beginner
+  - Guide
+  - HTML
+  - Intro
+  - Learn
+  - NeedsTranslation
+  - Topic
+  - TopicStub
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>Ideally, you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li>
+</ul>
+
+<p>Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p>
+
+<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt>
+ <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt>
+ <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt>
+ <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt>
+ <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd>
+</dl>
+
+<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2>
+
+<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p>
+
+<h2 id="See_also">See also</h2>
+
+<div class="document-head" id="wiki-document-head">
+<dl>
+ <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt>
+ <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd>
+</dl>
+</div>
diff --git a/files/he/learn/html/טבלאות/index.html b/files/he/learn/html/טבלאות/index.html
new file mode 100644
index 0000000000..8882fff3a0
--- /dev/null
+++ b/files/he/learn/html/טבלאות/index.html
@@ -0,0 +1,34 @@
+---
+title: טבלאות HTML
+slug: Learn/HTML/טבלאות
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little <a href="/en-US/docs/Learn/CSS">CSS</a> for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already have covered the basics of HTML — see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></dt>
+ <dd>This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></dt>
+ <dd>In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></dt>
+ <dd>In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.</dd>
+</dl>
diff --git a/files/he/learn/html/טפסים/index.html b/files/he/learn/html/טפסים/index.html
new file mode 100644
index 0000000000..87fe398bc4
--- /dev/null
+++ b/files/he/learn/html/טפסים/index.html
@@ -0,0 +1,72 @@
+---
+title: טפסי HTML
+slug: Learn/HTML/טפסים
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should at least work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Native form widgets</a> guide.</p>
+
+<p>The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some <a href="/en-US/docs/Learn/CSS">CSS</a> and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> first.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Basic_guides">Basic guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></dt>
+ <dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt>
+ <dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd>
+</dl>
+
+<h2 id="What_form_widgets_are_available">What form widgets are available?</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></dt>
+ <dd>We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.</dd>
+</dl>
+
+<h2 id="Validating_and_submitting_form_data">Validating and submitting form data</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt>
+ <dd>This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></dt>
+ <dd>Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd>
+</dl>
+
+<h2 id="Advanced_guides">Advanced guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></dt>
+ <dd>You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></dt>
+ <dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
+ <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
+</dl>
+
+<h2 id="Form_styling_guides">Form styling guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
+ <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
+ <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
+ <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/input">HTML &lt;input&gt; types reference</a></li>
+</ul>
diff --git a/files/he/learn/html/מבוא_לשפת_html/index.html b/files/he/learn/html/מבוא_לשפת_html/index.html
new file mode 100644
index 0000000000..4af3b86da6
--- /dev/null
+++ b/files/he/learn/html/מבוא_לשפת_html/index.html
@@ -0,0 +1,55 @@
+---
+title: מבוא לשפת HTML
+slug: Learn/HTML/מבוא_לשפת_HTML
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">At its heart, {{glossary("HTML")}} is a fairly simple language made up of <a href="/en-US/docs/Glossary/Element">elements</a>, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these, and introduce fundamental concepts and syntax you need to know to understand HTML.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>), and understand how to create and manage files (as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>). Both are parts of our <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></dt>
+ <dd>Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></dt>
+ <dd>The <a href="/en-US/docs/Glossary/Head">head</a> of an HTML document is the part that <strong>is not</strong> displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></dt>
+ <dd>One of HTML's main jobs is to give text meaning (also known as <a href="/en-US/docs/Glossary/Semantics">semantics</a>), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></dt>
+ <dd>Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link, and discusses best practices for links.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></dt>
+ <dd>There are many other elements in HTML for formatting text that we didn't get to in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> article. The elements in here are less well-known, but still useful to know about. In this article you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></dt>
+ <dd>As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></dt>
+ <dd>Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the HTML basics covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></dt>
+ <dd>We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment you'll be given a letter to mark up.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></dt>
+ <dd>This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt>
+ <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to HTML</em> module. Learners get familiar with reading, writing, and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.</dd>
+</dl>
diff --git a/files/he/learn/html/פתרון_בעיות/index.html b/files/he/learn/html/פתרון_בעיות/index.html
new file mode 100644
index 0000000000..d136f6d552
--- /dev/null
+++ b/files/he/learn/html/פתרון_בעיות/index.html
@@ -0,0 +1,141 @@
+---
+title: השתמש ב-HTML כדי לפתור בעיות נפוצות
+slug: Learn/HTML/פתרון_בעיות
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The following links point to solutions to common everyday problems you'll need to solve with HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basic_structure">Basic structure</h3>
+
+<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li>
+</ul>
+
+<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3>
+
+<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hyperlinks">Hyperlinks</h3>
+
+<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li>
+</ul>
+
+<h3 id="Images_multimedia">Images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">How to add images to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li>
+</ul>
+
+<h3 id="Scripting_styling">Scripting &amp; styling</h3>
+
+<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
+</ul>
+
+<h3 id="Embedded_content">Embedded content</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2>
+
+<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Forms">Forms</h3>
+
+<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
+</ul>
+
+<h3 id="Tabular_information">Tabular information</h3>
+
+<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
+</ul>
+
+<h3 id="Data_representation">Data representation</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Advanced_text_semantics">Advanced text semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
+</ul>
+
+<h3 id="Advanced_images_multimedia">Advanced images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+</ul>
+
+<h3 id="Internationalization">Internationalization</h3>
+
+<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
+</ul>
+
+<h3 id="Performance">Performance</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/he/learn/index.html b/files/he/learn/index.html
new file mode 100644
index 0000000000..792ffac056
--- /dev/null
+++ b/files/he/learn/index.html
@@ -0,0 +1,98 @@
+---
+title: מדריך Web Development
+slug: Learn
+translation_of: Learn
+---
+<div class="summary">
+<p>ברוכים הבאים לאזור הלמידה של MDN. קבוצה זו של מאמרים שואפת לספק לאנשים חסרי רקע בתכנות את הכלים הדרושים על מנת להתחיל לפתח אתרי אינטרנט ויישומי אינטרנט..</p>
+
+<p>מטרתו של אזור זה של MDN היא לא לקחת אתכם מ-"מתחילים" -"מומחה" אלא לקחת אתכם מ-"מתחילים" ל"נוח". משם אתם אמורים להיות מסוגלים להתקדם בכוחות עצמכם, ללמוד מיתר התכנים באתר שלנו ובאתרים אחרים.</p>
+
+<p>אם אתם חסרי רקע לחלוטין בתכנות חשוב להבין ש-web development יכול להיות מאתגר - אנו נסייע כמה שניתן על מנת לספק מספיק פרטים כדי שתוכלו להרגיש בנוח וללמוד את הנושאים כראוי.</p>
+</div>
+
+<div class="warning">
+<p><strong>חשוב</strong>: התוכן באיזור הלמידה מתעדכן באופן שוטף. אם יש לכם שאלות בנוגע לנושאים שאנו דנים בהם או שתרצו שנוסיף נושאים חדשים, הרגישו חופשי ליצור עמנו קשר ב {{anch("Contact us")}}</p>
+</div>
+
+<h2 id="היכן_להתחיל">היכן להתחיל?</h2>
+
+<p>אנחנו רוצים לפגוש אותך היכן שאתה נמצא. מה מהתיאורים הבאים מתאים לך יותר?</p>
+
+<ul class="card-grid">
+ <li><span>מתחילים - הכרות ראשונית עם סביבת האינטרנט</span>
+
+  <p>אם אתם חסרי רקע ב-web development אנחנו ממליצים לכם להתחיל עם מודול  <a href="/he/Learn/Getting_started_with_the_web">"מתחילים עם סביבת אינטרנט"</a> אשר מספק את כל הבסיס וההקדמה כדי ל-web development.</p>
+ </li>
+ <li><span>מתקדמים - הכרות עם HTML ו-CSS</span>
+  <p>אם כבר יש לכם את ידע הבסיס, ואתם רוצים להתקדם ללמוד {{glossary("HTML")}} ו - {{glossary("CSS")}} יותר לעומק, אנו ממליצים לכם על סדרת המודולים בנושא <a href="https://developer.mozilla.org/he/docs/Learn/HTML">HTML</a> - וסדרת המודולים בנושא <a href="https://developer.mozilla.org/he/docs/Learn/CSS">CSS</a> שלנו. </p>
+ </li>
+ <li><span>מתקדמים - הכרות עם JavaScript</span>
+  <p>אם אתם מרגישים כבר בנוח עם HTML ועם CSS, או אם אתם מעוניינים בעיקר ללמוד את שפת התכנות JavaScript, אנו ממליצים ללכת להתקדם לסדרת המודולים בנושא <a href="/he/docs/Learn/JavaScript">JavaScript — Dynamic client-side scripting</a> או ל-<a href="https://developer.mozilla.org/he/docs/Learn/Server-side">Server-side website programming</a>. אנחנו נשמח גם אם תסייעו להרחיב את <a href="/he/Learn/How_to_contribute">איזור הלמידה</a>. </p>
+ </li>
+ <li><span>Frameworks and tooling:</span>
+  <p>לאחר שליטה בסיסית ב  HTML, CSS, ו JavaScript כדאי ללמוד על <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">client-side web development tools</a>, and then consider digging into <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">client-side JavaScript frameworks</a>, and <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">server-side website programming</a>. </p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>הערה:</strong> ה<a href="/he/docs/Glossary">מילון </a>שלנו מכיל הסבר לכל מונח וביטוי. נסו להפיק ממנו את המירב.</p>
+</div>
+
+<p>{{LearnBox({"title":"Random glossary entry"})}}</p>
+
+<h2 id="נושאי_הלימוד">נושאי הלימוד</h2>
+
+<p>אלו הנושאים שנגע בהם באיזור הלימוד של MDN:</p>
+
+<dl>
+ <dt><a href="/he/docs/Learn/Getting_started_with_the_web">תחילת הדרך עם ה-Web</a></dt>
+ <dd>מספק הכרות בסיסית ומעשית לפיתוח אינטרנט עבור מתחילים וחסרי רקע.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML">HTML - בונים את האינטרנט </a></dt>
+ <dd>HTML זו השפה שבה אנחנו משתמשים על מנת לתת מבנה לתוכן שלנו ולהגדיר מה המשמעות שלהם או מטרתם. נושא זה מלמד את שפת HTML לעומק.  </dd>
+ <dt><a href="/he/docs/Learn/CSS">CSS - מעצבים את האינטרנט</a></dt>
+ <dd>CSS היא השפה שאנחנו משתמשים בה על מנת לעצב את התוכן שלנו ועל מנת לפרוס את התוכן שלנו באתר, כמו גם להוסיף הנפשות ואנימציות שונות. נושא זה מלמד היבטים רבים של שפת CSS והכלים העומדים לרשותנו. </dd>
+ <dt><a href="/he/docs/Learn/JavaScript">JavaScript - תכנות צד לקוח </a></dt>
+ <dd>JavaScript היא שפת תכנות דינאמית אשר משמשת על מנת להוסיף פונקציונליות דינאמית לאתרי אינטרנט. נושא זה מלמד את כל הכלים והנושאים הנדרשים על מנת להבין ולכתוב בשפת  JavaScript.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms">Web forms — Working with user data</a></dt>
+ <dd>Web forms are a potent tool for interacting with users — most commonly, they are used for collecting data from users, or allowing them to control a user interface. In the articles listed below, we'll cover all the essential aspects of structuring, styling, and interacting with web forms.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Accessibility">נגישות אתרים</a></dt>
+ <dd>נגישות אתרים זה מושג המאגד בתוכו מספר פרקטיקות מקובלות אשר מטרתן היא להפוך את התוכן ברשת לנגיש עבור כמה שיותר אנשים, ללא השפעה של מוגבלות פיזית, סוג המכשיר, מיקום וגורמים נוספים. נושא זה נוגע בכל מה שאתם צריכים לדעת בנושא.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Performance">Web Performance - הפיכת האתר למהיר ורספונסיבי</a></dt>
+ <dd>ביצועים זו האמנות של הפיכת אתרי אינטרנט ויישומים מבוססי web למהירים ורספונסיביים לאינטראקציות של המשתמש, ללא השפעה של מהירות הגלישה של המשתמש, גודל המסך, הגבלות מכשיר וכד׳. </dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">כלים ובדיקות</a></dt>
+ <dd>נושא זה מכסה את כל הכלים שמפתחים צריכים על מנת לבחון ולבדוק את הפיתוח שלהם. </dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">תכנות צד-שרת</a></dt>
+ <dd>גם אם אתם מתרכזים בפיתוח צד-לקוח, יהיה זה שימושי והכרחי מאוד עבורכם להבין מהם שרתים ומהו קוד של צד השרת וכיצד הם עובדים יחד. נושא זה מעניק הכרות כללית כיצד צד השרת עובד, ומדריכים מפורטים המראים כיצד לבנות יישום צד שרת באמצעות שתי פריימוורקים פופולרים - Django (Python) and Express (node.js). </dd>
+</dl>
+
+<h2 id="דוגמאות_הקוד_שלנו">דוגמאות הקוד שלנו</h2>
+
+<p>כל דוגמאות הקוד שלנו זמינים כמובן גם ב-<a href="https://github.com/mdn/learning-area/">GitHub</a>. אם תרצו להוריד עותק מרוכז שלהם למחשב, תוכלו להוריד <a href="https://github.com/mdn/learning-area/archive/master.zip">קובץ ZIP</a> מרוכז.</p>
+
+<p>אם אתם מעדיפים להעתיק את המאגר בדרך יותר מורכבת אך מאפשרת לכם לקבל עדכונים אוטומטיים לדוגמאות הקוד, ראו ההסבר בשפה האנגלית <a href="https://developer.mozilla.org/en-US/docs/Learn">פה</a>. </p>
+
+<h2 id="צרו_עמנו_קשר">צרו עמנו קשר</h2>
+
+<p>אם תרצו ליצור עמנו קשר בכל נושא, הדרך הטובה ביותר היא ב-<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">learning area discourse thread</a> או בערוצי ה-<a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">IRC</a>. היינו רוצים לשמוע האם לדעתכם חסר משהו באתר, או נושא לא מוסבר לעומק או לא ברור וכמובן אם מצאתם שגיאה. כמובן, הרגישו חופשי לפנות בכל שאלה או בעיה. </p>
+
+<p>אם אתם מעוניינים לעזור ולפתח את התוכן פה באתר שלנו שלנו, ראו את המאמר בנושא <a href="/e he/Learn/How_to_contribute">how you can help</a> וצרו עמנו קשר. אנחנו יותר מנשמח לדבר אתכם בנושא בין אם אתם סטודנטים, מורים, מפתחים מנוסים או סתם בא לכם לעזור לשפר את חווית הלמידה של הגולשים באתר.</p>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla developer newsletter</a></dt>
+ <dd>הניוזלטר שלנו למפתחי Web - מקור מידע מעולה לכל רמות הניסיון. </dd>
+ <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
+ <dd>סדרה מצויינת של סרטוני וידאו המסבירה את הבסיס של פיתוח Web, נועדה בעיקר לחסרי רקע. נוצרה על ידי  <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
+ <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
+ <dd>אתר אינטראקטיבי מעולה ללימוד שפות תכנות מהבסיס.</dd>
+ <dt><a href="https://code.org/">Code.org</a></dt>
+ <dd>אתר בסיסי לתכנות אשר נועד בעיקר לחסרי רקע/ילדים.</dd>
+ <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
+ <dd>אתר אינטראקטיבי מעולה ללימוד פיתוח Web.</dd>
+ <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
+ <dd>A series of teaching activities for teaching (and learning) created by the Mozilla Foundation, covering everything from basic web literacy and privacy to JavaScript and hacking Minecraft.</dd>
+ <dt><a href="https://edabit.com/">Edabit</a></dt>
+ <dd>Hundreds of free interactive coding challenges in various languages.</dd>
+</dl>
diff --git a/files/he/learn/javascript/asynchronous/concepts/index.html b/files/he/learn/javascript/asynchronous/concepts/index.html
new file mode 100644
index 0000000000..273c184474
--- /dev/null
+++ b/files/he/learn/javascript/asynchronous/concepts/index.html
@@ -0,0 +1,203 @@
+---
+title: עקרונות תכנות א-סינכרוני כלליים
+slug: Learn/JavaScript/Asynchronous/Concepts
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>
+  במאמר זה אנחנו נעבור על מספר עקרונות חשובים בנושא תכנות א-סינכרוני וכיצד זה נראה בדפדפנים וב-JavaScript. חשוב להבין עקרונות אלו לפני שממשיכים למאמרים הבאים במודול זה.
+</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>
+    הבנה של העקרונות הבסיסיים מאחורי תכנות א-סינכרוני וכיצד אלו באים לידי ביטוי בדפדפנים וב-JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous_-_א-סינכרוני">Asynchronous - א-סינכרוני?</h2>
+
+<p>
+  באופן נורמלי, קוד של תוכנית רץ בצורה עצמאית, כאשר רק דבר אחד קורה בכל רגע נתון. אם פונקציה מסויימת נשנעת על התוצאה של פונקציה אחרת, היא חייבית לחכות לפונקציה האחרת לסיים ולהחזיר את התוצאה ועד שזה לא קורה, כל התוכנית עוצרת מנקודת מבטו של המשתמש.</p>
+
+<p>Mac אלו המשתמשים ב-, לדוגמא,
+  לפעמים רואים עיגול צבעוני... עיגול זה בעצם אומר למשתמש ״התוכנית הנוכחית שאתה מתמש בה הייתה צריכה לעצור ולחכות שמשהו הסתיים, וזה לוקח זמן..״ </p>
+
+<p><img alt="multi-colored macos beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; margin: 0 auto;"></p>
+
+<p>
+  זו חווית שימוש מעצבנת, ולא ממש שימוש יעיל ביכולות המחשב, במיוחד בעידן שלמחשבים יש מספר ליבות מעבד זמינות. אין שום סיבה שאנחנו נחכה למשהו כשאנחנו יכולים להמשיך במקביל בעבודה שלנו בזמן שהמחשב עובד על אותה פעולה ויעדכן אותנו כשהפעולה הסתיימה. זה מאפשר לנו לבצע פעולות אחרות במקביל, וזה בעיקרון הבסיס של תכנות א-סינכרוני - <strong>asynchronous programming</strong>. זה תלוי בסביבת הפיתוח שבה אנחנו משתמשים (דפדני אינטרנט במקרה שלנו) להעניק למפתח APIs שיאפשרו לנו להריץ משימות באופן א-סינכרוני
+
+
+  </p>
+
+<h2 id="Blocking_code">Blocking code</h2>
+
+<p>
+  טכניקות א-סינכרוניות הן שימושיות מאוד, במיוחד בפיתוח web. כאשר יישום web רץ בדפדפן ומריץ שורות קוד מבלי להחזיר את השליטה לדפדפן, הדפדפן יכול להיראות כאילו הוא ״קפא״. זה נקרא <strong>blocking</strong>. הדפדפן חסום מלהמשיך ולטפל בפעולות מצד המשתמש ולבצע פעולות נוספות עד אשר יישום ה-web מחזיר את השליטה למעבד.</p>
+
+<p>
+  נסתכל על מספר דוגמאות על מנת להסביר למה אנחנו מתכוונים ב- blocking
+
+</p>
+
+<p>ב <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> דוגמא שלנו (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">או כ דף אינטרנט</a>),
+
+  הוספנו מאזין אירוע מסוג click לכפתור כך שבכל פעם שהכפתור יילחץ, הוא יריץ פעולה שלוקחת המון זמן (מחשבת 10 מיליון תאריכים ואז מחזירה את האחרון לקונסולה) ולאחר מכן מוסיפה פסקה ל-DOM: </p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>
+   כשאתם מריצים את הדוגמא למלעלה, פתחו את הקונסולה ואז לחצו על הכפתור - אתם תשימו לב שהפסקה אינה מופיעה עד אשר חישוב התאיריכים הסתיים והוצגה ההודעה לקונסולה. הקוד רץ בסדר שבה הוא מופיע בקוד המקור והפעולה האחרונה לא תרוץ עד אשר הפעולה הקודמת לא סיימה.</p>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>: הדוגמא הקודמת דיי לא מציאותית. אנחנו לעול לא נחשב 10 מיליון תאריכים בתוכנית אמיתית. דוגמא זו נועדה לתת לכם רק את ההבנה של תכנות א-סינכרוני. </p>
+</div>
+
+<p>בדוגמא השנייה שלנו, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">ראו כדף אינטרנט</a>),
+  אנחנו מנסים לדמות משהו קצת יותר ריאלי שאתם אולי תיתקלו בו בדף אמיתי. אנחנו חוסמים את האינטראקציה של המשתמש עם העיבוד של ממשק המשתמש. בדוגמא זו יש לנו שני כפתורים:</p>
+
+<ul>
+ <li>כפתור בשם "Fill canvas" אשר כאשר הוא נלחץ, אלמנט ה- {{htmlelement("canvas")}} מתמלא במיליון כדורים כחולים. </li>
+ <li>כפתור בשם "Click me for alert" אשר כאשר הוא נלחץ מופיעה הודעה למשתמש</li>
+</ul>
+
+<pre class="brush: js">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>
+  אם תלחצו עלהכפתור הראשון ואז ישר לאחר מכן על השני אתם תראו שההודעה למשתמש לא מופיע עד אשר העיגולים לא סיימו להיות מעובדים. הפעולה הראשונה חוסמת את ביצוע הפעולה השנייה עד אשר הפעולה הראשונה תסתיים. </p>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>:
+  זהו אמנם נראה לא טוב, אך זוהי רק דוגמא למה שמפתחים נתקלים בה ביישומים אמיתיים. </p>
+</div>
+
+<p>
+  מדוע זה קורה? התשובה נעוצה בכך ש-JavaScript היא <strong>single threaded</strong>. בנקודה, אנחנו נרצה להציג בפניכם את הרעיון של <strong>threads</strong>.</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p><strong>Thread</strong> הוא בעיקרון תהליך יחיד שתוכנית יכולה להשתמש בה על מנת להשלים משימות. כל תהליך כזה יכול לבצע משימה אחת בכל פעם: </p>
+
+<pre>Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>
+  כל משימה תרוץ באופן טורי, רציף, אך לא סימולטני. משימה צריכה להסתיים כדי שהבאה בתור תחל בריצה. </p>
+
+<p>
+  כפי שאמרנו מקודם, הרבה מחשבים הם בעלי מספר רב של ליבות, כך שהם יכולים לבצע מספר דברים בבת אחת. שפות תכנות שתומכות בליבות מרובות יכולות להתשמש בליבות אלו על מנת לבצע מספר פעולות באופן סימולטני ובמקביל: </p>
+
+<pre>Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_-_single_threaded">JavaScript -  single threaded</h3>
+
+<p>JavaScript היא single-threaded.
+  אפילו אם יש מספר ליבות, אנחנו יכולים רק להריץ משימה על thread יחיד, שנקרא <strong>main thread</strong>. הדוגמא שלנו מלמעלה מורצת כך: </p>
+
+<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>
+  לאחר זמן מסויים, JavaScript קיבלה מס׳ כלים על מנת להתמודד עם בעיות אלו.
+
+  <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a>
+  מאפשר לנו לשלוח חלק מהביצוע של JavaScript ל-thread נפרד שנקרא בשם worker, כך שאנחנו יכולים להריץ קודי JavaScript באופן סימולטני מקביל. בדרך כלל אנחנו נשתמש ב-worker להריץ תהליכי
+
+  allow you to send some of the JavaScript processing off to a separate thread, called a worker, so that you can run multiple JavaScript chunks simultaneously. You'd generally use a worker to run expensive processes off the main thread so that user interaction is not blocked.</p>
+
+<pre>  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>
+  כעת, לאחר שאנחנו יודעים זאת, נסתכל על  <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> או <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">כדף אינטרנט</a>, ונפתח את הקונסולה.
+  בקובץ זה כתבנו מחדש את הדוגמא שלנו לחישוב 10 מיליון תאריכים בworker thread נפרד. כעת כשאנחנו לוחצים על הכפתור, הדפדן מסוכל להציג את הפסקה לפני שחישוב התאיריכים הסתיימו. הפעולה הראשונה כבר לא חוסמת את הפעולה השנייה.
+
+  </p>
+
+<h2 id="Asynchronous_code_קוד_א-סינכרוני">Asynchronous code קוד א-סינכרוני</h2>
+
+<p>Web workers הם מאוד שימושיים, אבל יש להם הגבלות.
+  אחת מהן היא שהם לא יכולים לגשת ל-{{Glossary("DOM")}} - אנחנו לא יכולים לגרום ל-worker לעשות שום דבר שיכול לעדכן את ממשק המשתמש, את ה-UI. אנחנו לא נוכל לעבד מיליון כדורים כחולים בתוך ה-worker שלנו. הוא בעיקרון יכול רק לעשות מניפולציות מספריות.
+</p>
+
+<p>
+  הבעיה השנייה היא שלמרות שהקוד שרץ בתוך ה-000000 לא חוסם, הוא עדיין בסופו של דבר סינכרוני. זה הופך לבעיה כשאר פונקציה מתבססת על התוצאה של חישובים של תהליכים שקדמו לפונקציה. הסתכלו על התרשים הבא:</p>
+
+<pre>Main thread: Task A --&gt; Task B</pre>
+
+<p>
+  במקרה זה, משימה A עושה משהו כמו הבאת תמונה מהשרת, ואז משימה B עושה משהו עם התמונה הזו, כגון החלת פילטר. אם אנחנו נתחיל את משימה A ואז ישר נריץ את משימה B , אנחנו נקבל שגיאה כי התמנוה עדיין לא זמינה, כי משימה A לא הסתיימה עדיין. </p>
+
+<pre>  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>
+  במקרה הזה לדוגמא, יש לנו את משימה D שמבצעת שימוש בתוצאות של משימה B ומשימה C. אם אנחנו יכולים להבטיח שהתוצאות של שתי משימות אלו יהיהו זמינות בואתו הזמן, אז זה יכול להיות תקין, אבל זה בדרך כלל לא קורה. אם משימה D תנסה לרוץ לפני שהערכים שהיא צריכה לקבל זמינים עבורה, זה יחזיר לנו רוב הסיכויים שגיאה.</p>
+
+<p>
+  על מנת לתקן בעיות שכאלו, דפדנים מאפשרים לנו להריץ מס׳ פעולות באופן א-סינכרוני. תכונות כמו <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> מאפשרות לנו לקבוע משימה שתרוץ, כמו לדוגמא הבאת תמונה מהשרת, ולחכות עד אשר התוצאה של אותה משימה תוחזר שנריץ פעולה מסויימת אחרת.</p>
+
+<pre>Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>
+  מאחר שהפעולה מתרחשת במקום אחר, ה-main thread לא חסום בזמן שהפעולה הא-סינכרונית מתרחשת.
+
+</p>
+
+<p>
+  אנחנו נסתכל כיצד אנחנו יכולים לרשום קוד א-סינכרוני במאמר הבא.
+  </p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>
+    עיצוב תוכנה מודרני סובב יותר ויותר סביב שימוש בתכנות א-סינכרוני, כדי לאפשר לתוכניות לעשות יותר מדבר אחד בכל פעם. כאשר נשתמש ב-API חדשים ובעלי יכולות מתקדמות, אנחנו נמצא יותר מקרים שבהם הדרך היחידה לבצע משהו מסויים היא רק באופן א-סינכרוני. זה היה דיי קשה בעבר לכתוב קוד א-סינכרוני. אמנם עדיין לוקח זמן להתרגל לכך, אבל זה נעשה הרבה יותר קל. ביתר המאמרים במודול זה אנחנו נסביר מדוע קוד א-סינכרוני הוא רלוונטי וחשוב וכיצד נעצב את הקוד על מנת להימנע מחלק מהבעיות שסקרנו במאמר זה.
+
+
+    יותר מדבר אחד בכל פעם. כשאתה משתמש בממשקי API חדשים וחזקים יותר, תמצא מקרים נוספים שבהם הדרך היחידה לעשות דברים היא בצורה אסינכרונית. פעם היה קשה לכתוב קוד אסינכרוני. זה עדיין לוקח להתרגל, אבל זה נעשה הרבה יותר קל. בשאר מודול זה נבדוק יותר מדוע חשוב קוד אסינכרוני וכיצד לתכנן קוד שנמנע מכמה מהבעיות שתוארו לעיל.</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת asynchronous JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></li>
+</ul>
diff --git a/files/he/learn/javascript/asynchronous/index.html b/files/he/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..01ec7babb7
--- /dev/null
+++ b/files/he/learn/javascript/asynchronous/index.html
@@ -0,0 +1,43 @@
+---
+title: Asynchronous JavaScript
+slug: Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">במודות זה אנחנו נסתכל על {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, ומדוע זה חשוב, וכיצד אנחנו יכולים להשתמש בזה על מנת לטפל בפעולות חוסמות () כמו הבאת משאבים מהשרת.</span></p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Asynchronous JavaScript הוא יחסית נושא מתקדם ואנו ממליצים לכם לעבור על המודולים <a href="/he/docs/Learn/JavaScript/First_steps"> צעדים ראשונים ב-JavaScript</a> ועל<a href="/he/docs/Learn/JavaScript/Building_blocks"> אבני הבניין של </a> <a href="/he/docs/Learn/JavaScript/Building_blocks">JavaScript </a>לפני שתתחילו ללמוד מודול זה.</p>
+
+<p>אם אינכם בקיאים בקונספט של תכנות א-סינכרוני, אנא התחילו עם המאמר <a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני</a> במודול זה. אם אתם כן בקיאים, אתם ככל הנראה יכולים להתחיל ב-<a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת Asynchronous JavaScript</a>.</p>
+
+<div class="note">
+<p><strong>הערה</strong>: אם אתם עובדים על מחשב\טבלט\מכשיר אחר שאין לכם אפשרות ליצור עליו קבצים אישיים, אתם יכולים לנסות את (רוב) דוגמאות הקוד על תוכנות קוד אינטרנטיות כמו <a href="http://jsbin.com/">JSBin</a> או <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="מדריכים">מדריכים</h2>
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a> </dt>
+ <dd>
+ <p>במאמר זה אנחנו נעבור על מספר עקרונות חשובים בנושא תכנות א-סינכרוני וכיצד עקרונות אלו באים לידי ביטוי בדפדפנים וב-JavaScript. אתם אמורים להבין עקרונות אלו בטרם תמשיכו למאמרים נוספים במודול זה.</p>
+ </dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת Asynchronous JavaScript</a></dt>
+ <dd>במאמר זה נסקור בקצרה את הבעיות הקשורות ל-JavaScript סינכרונית, ונסתכל לראשונה על האופציות השונות ב-JavaScript א-סינכרוני שניתקל בהן, ונראה כיצד טכניקות אלו יכולות לפתור לנו בעיות.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts </a></dt>
+ <dd>במאמר זה נסתכל על המתודות המסורתיות שקיימות ב-JavaScript להרצת קוד בצורה א-סינכרונית לאחר שזמן מסויים עבר או בקבועי זמן מסויימים ונדון במקרים שהם רלוונטיים לשימוש וכן נדון בסוגיות הטבועות בהם.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises </a></dt>
+ <dd>Promises הם בעיקרון תכונה חדשה יחסית של שפת JavaScript המאפשרת לך לדחות פעולות נוספות עד      לאחר השלמת הפעולה הקודמת, או להגיב לכישלונה. זה מאוד שימושי להגדרת רצף של פעולות שיעבדו בצורה מסויימת. מאמר זה מראה לך כיצד promises עובדות, היכן תראה אותן בשימוש ב- WebAPIs,      ואיך לכתוב promises משלך.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></dt>
+ <dd>Promises יכולות להיות קצת מורכבות לביצוע והבנה, ודפדפנים מודרניים הטמיעו את הפונקציות <code>async</code> ואת האופרטור <code>await</code> - הראשון מאפשר לפונקציות סטנדרטיות להתנהג בצורה עקיפה כא-סינכרוניות עם Promises ואילו בשני אנחנו יכולים לעשות שימוש בתוך פונקציות <code>async</code> על מנת לחכות ל-promises לפני שהפונקציה ממשיכה, כך שנוכל לקשור promises בצורה קלה יותר. מאמר זה מסביר את <code>async</code>/<code>await</code>.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></dt>
+ <dd>בסיום המודול אנחנו נדון בהבדלים שבין הטכניקות השונות שנגענו בהם, ונדון באיזו טכניקה יהיה מומלץ להשתמש במקרים השונים.</dd>
+</dl>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<ul>
+ <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> ב- <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> ספר אינטרנטי של Marijn Haverbeke.</li>
+</ul>
diff --git a/files/he/learn/javascript/asynchronous/introducing/index.html b/files/he/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..3f5a342e1e
--- /dev/null
+++ b/files/he/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,281 @@
+---
+title: הצגת asynchronous JavaScript
+slug: Learn/JavaScript/Asynchronous/Introducing
+translation_of: Learn/JavaScript/Asynchronous/Introducing
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">במאמר זה אנחנו נסקור שוב את הבעיות הקשורות ב-Synchronous JavaScript, ונסתכל לראשונה על הטכניקות לא-סינכרוניות שניתקל בהן, וכיצד הן יכולות לסייע לנו לפתור בעיות אלו.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין מהי שAsynchronous JavaScript וכיצד היא שונה מ-Synchronous JavaScript, ומתי להשתמש בה.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Synchronous_JavaScript">Synchronous JavaScript</h2>
+
+<p>על מנת שנוכל להבין מה זה <strong>{{Glossary("asynchronous")}}</strong> JavaScript אנחנו צריכים תחילה להבין מה זה <strong>{{Glossary("synchronous")}}</strong> JavaScript. חלק זה של המאמר יסקור שוב חלק מהמידע שכבר עברנו עליו במאמר הקודם.</p>
+
+<p>הרבה מהפונקציונליות שראינו במודולים הקודמים של מדריך זה היו דיי סינכרוניים - אנחנו מריצים קוד מסויים והתוצאה של אותה ריצה מוחזרת כאשר הדפדפן יכול להחזיר את התוצאה. נסתכל כעת על דוגמא פשוטה ב-<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">דף זה</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync.html">או בקוד המקור</a>:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  alert('You clicked me!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+</pre>
+
+<p>בקוד זה, השורות מורצות אחת אחרי השנייה:</p>
+
+<ol>
+ <li>אנחנו יוצרים הפנייה לאלמנט {{htmlelement("button")}} שכבר זמין ב-DOM.</li>
+ <li>אנחנו מוסיפים מטפל אירוע בשם <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> כך שכאשר הכפתור נלחץ:
+  <ol>
+   <li>הודעת <code><a href="/en-US/docs/Web/API/Window/alert">()alert</a></code> מוצגת למשתמש.</li>
+   <li>ברגע שהודעה זו נסגרת, אנחנו יוצרים אלמנט {{htmlelement("p")}}.</li>
+   <li>לאחר מכן אנחנו מכניסים לתוך האלמנט  {{htmlelement("p")}} תוכן.</li>
+   <li>בסוף אנחנו משייכים את ה- {{htmlelement("p")}} ל-body.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>בעוד שכל תהליך שכזה נמצא בהרצה או עיבוד, שום דבר אחר לא יכול להתרחש - יתר העיבוד מושהה. זה מכיוון שכפי שראינו ב<a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">מאמר הקודם</a> ש-<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts#JavaScript_is_single_threaded">JavaScript היא single threaded</a>. רק דבר אחד יכול להתרחש בכל פעם על ה-single main thread, וכל היתר חסום לביצוע או לעיבוד עד אשר אותה פעולה תושלם.</p>
+
+<p>בדוגמא למעלה, אחרי שלחצנו על הכפתור, הפסקה לא הופיעה עד לאחר שכפתור ה-OK לא נלחץ בחלונית הקופצת. אתם יכולים לנסות זאת בעצמכם:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;<span class="pl-ent">button</span>&gt;Click me&lt;/<span class="pl-ent">button</span>&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>: חשוב לזכור שאמנם <code><a href="/en-US/docs/Web/API/Window/alert">()alert</a></code> מאוד שימושי לשם הסבר על פעולות סינכרוניות שחוסמות את המשך הפעילות, זוהי פונקציה שאינה בשימוש רב ביישומים אמיתיים מטעמים של חווית משתמש לרוב.</p>
+</div>
+
+<h2 id="Asynchronous_JavaScript">Asynchronous JavaScript</h2>
+
+<p>לאור הסיבות שנסקרו למעלה, הרבה Web API משתמשים בקוד א-סינכרוני על מנת לפעול, במיוחד אלו שניגשים או מביאים משאב מסויים מגורם חיצוני, כמו הבאה של קובץ מהרשת, גישה למאגר מידע והחזרת מידע מתוכו, הפעלת של הזרמת וידאו באמצעות מצלמת רשת וכד׳.</p>
+
+<p>מדוע העבודה עם קוד א-סינכרוני היא מורכבת? נסתכל על דוגמא זריזה. כאשר אנחנו מבקשים תמונה משרת מסויים, איננו יכולים לקבל את התשובה באופן מיידי. זה אומר שהפסאודו-קוד הרשום להלן לא יעבוד:</p>
+
+<pre class="brush: js notranslate">var response = fetch('myImage.png');
+var blob = response.blob();
+// display your image blob in the UI somehow</pre>
+
+<p>זה מכיוון שאנחנו לא יודעים כמה זמן ייקח לתמונה להגיע מהשרת, אז כאשר אנחנו נרצה להריץ את שורת הקוד הבאה, היא תחזיר לנו שגיאה (אולי לסירוגין, אולי בכל פעם) מכיוון שה-<code>response</code> אינו זמין עבורנו עדיין. במקום זאת, אנחנו צריכים שהקוד שלנו יחכה ל-<code>response</code> שיוחזר אלינו לפני שאנחנו מנסים לעשות עם <code>response</code> פעולה כלשהי.</p>
+
+<p>יש שני סוגים עיקריים של קוד א-סינכרוני שאנחנו ניתקל בהם בקוד javascript, יש את ה-callbacks הותיקים ואת ה-promises החדשים יותר.  במאמר זה נסקור את שניהם.</p>
+
+<h2 id="Async_callbacks">Async callbacks</h2>
+
+<p>Async callbacks אלו פונקציות המועברות כפרמטר (ארגומנט) לפונקציה אחרת, כאשר אנחנו קוראים לפונקציה אחרת אשר מריצה קוד ברקע. כאשר הקוד שברקע סיים לרוץ, הוא קורא לאותן פונקציות callbacks על מנת לציין שהפעולה שהייתה ברקע הסתיימה או לציין שמשהו הסתיים.</p>
+
+<p>שימוש ב-callbacks יחסית נחשב מיושן כעת, אבל אנחנו עדיין נראה שימוש רב שלהם ב-APIs ישנים אבל עדיין מאוד שימושיים.</p>
+
+<p>דוגמא ל-async callback אפשר לראות בפרמטר השני של {{domxref("EventTarget.addEventListener", "addEventListener()")}} (כפי שראינו בפעולה למעלה):</p>
+
+<pre class="brush: js notranslate">btn.addEventListener('click', () =&gt; {
+  alert('You clicked me!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>הפרמטר הראשון הוא הסוג של האירוע שאנחנו רוצים להאזין להתרחשות שלו, והפרמטר השני הוא פונקציית callback שמופעלת ברגע שהאירוע מתרחש.</p>
+
+<p>כאשר אנחנו מעבירים callback function כפרמטר לפונקציה אחרת, אנחנו רק מעבירים את הגדרת הפונקציה כפרמטר, כלומר ה-callback function לא מופעל באופן מיידי. הוא נקרא לאחר מכן (“called back”) באופן א-סינכרוני איפשהו בתוך הגוף של הפונקציה שקיבלה אותו כפרמטר. הפונקציה שקיבלה אותו כפרמטר היא האחראית להפעיל את ה-callback function כשנצטרך.</p>
+
+<p>אנחנו יכולים לכתוב פונקציות משלנו שיכילו callback function באופן דיי פשוט יחסית. נסתכל על דוגמא שמעלה משאב באמצעות <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">דף האינטרנט</a>, ו- <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">קוד המקור</a>):</p>
+
+<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<p>כאן יצרנו את פונקציית <code>()displayImage</code> שפשוט מקבלת blob שמועבר אליה ויוצרת לו URL באמצעות URL.createObjectURL(blob). לאחר מכן הפונקציה יוצרת אלמנט HTML מסוג <code>img</code>, משימה לו את הערך של ה-<code>src</code> לאותו URL שנוצר לנו ומשייכת את ה-image ל-body. </p>
+
+<p>בנוסף, יצרנו פונקציה בשם <code>()loadAsset</code> שמקבלת כפרמטרים כתובת URL, סוג הקובץ וכן פונקציית callback (שימו לב שהשם שנתנו לפרמטר - <code>callback</code> - הוא לשם הנוחות בלבד וניתן לקרוא לפרמטר זה בכל שם). פונקציית <code>()displayImage</code> משתמשת ב-<code>XMLHttpRequest</code> (לרוב משתמשים בקיצור שלו - "XHR") על מנת להביא משאב מ-URL מסויים לפני שמעבירים את התגובה של אותה <code>XMLHttpRequest</code> לפונקציית callback שלנו - לפונקציית  <code>()displayImage</code>.</p>
+
+<p>במקרה הזה, פונקציית ה-callback שלנו מחכה ש-XHR יסיים להוריד את המשאב שהוא הביא (באמצעות שימוש במטפל אירוע מסוג <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>), וזאת לפני שהיא תקבל את המשאב.</p>
+
+<p>Callbacks הם מאוד ורסטיליים - לא רק שהם מאפשרים לנו לשלוט בסדר שבו פונקציות ירוצו ואיזה מידע יועבר ביניהן, הן גם מאפשרות לנו להעביר מידע לפונקציות שונות בהתאם לנסיבות. כך שאנחנו יכולים להריץ פעולות שונות על המשאב שהתקבל או התגובה שהתקבלה כמו <code>processJSON()</code>, <code>displayText()</code>, וכד׳. </p>
+
+<p>שימו לב שלא כל ה-Callbacks הם א-סינכרוניים וחלקם הם סינכרוניים. כך לדוגמא, כאשר אנחנו משתמשים ב- {{jsxref("Array.prototype.forEach()")}} על מנת לעבור באמצעות לולאה על איברים במערך (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">ראו כדף אינטרנט</a>, וכן <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">את קוד המקור</a>):</p>
+
+<pre class="brush: js notranslate">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
+
+gods.forEach(function (eachName, index){
+  console.log(index + '. ' + eachName);
+});</pre>
+
+<p>בדוגמא זו, אנחנו עוברים על מערך של Greek gods ומדפיסים את מספרי האינדקס והערכים לקונסולה. הפרמטר שאנחנו נותנים ל-<code>()forEach</code> הוא פונקציית callback, אשר בעצמו מקבל שני פרמטרים, שם הפריט במערך ומספר האינדקס. יחד עם זאת, היא  לא מחכה לשום דבר, היא פשוט רצה באופן אוטומטי. </p>
+
+<h2 id="Promises">Promises</h2>
+
+<p>Promises אלו בעצם הסגנון החדש לקוד א-סינכרוני שאנחנו נראה שמבוצע בהם שימוש ב-Web APIs מודרניים. דוגמא טובה לכך היא <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API, אשר הוא בעצם כמו גרסה מודרנית ויעילה יותר של {{domxref("XMLHttpRequest")}}. נסתכל על דוגמא מהמאמר שלנו בנושא <a href="/he/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">הבאת מידע מהשרת</a> אשר תגיעו אליו בהמשך:</p>
+
+<pre class="brush: js notranslate">fetch('products.json').then(function(response) {
+  return response.json();
+}).then(function(json) {
+  products = json;
+  initialize();
+}).catch(function(err) {
+  console.log('Fetch problem: ' + err.message);
+});</pre>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>: אתם יכולים למצוא את הגרסה הסופית ב- GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">ראו כאן את קוד המקור</a>, וגם <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">כדף אינטרנט</a>).</p>
+</div>
+
+<p>כאן אנחנו רואים ש-<code>fetch</code><code>()</code> לוקח פרמטר אחד - את ה-URL של המשאב שנאחנו רוצים להביא מהרשת - והוא מחזיר <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>. ה-promise היא בעצם אובייקט המייצג השלמה או כישלון של פעולת ה-שaysync. בצורה מסויימת, זו הדרך של הדפדפן להגיד ״אני מבטיח לחזור אליך עם תשובה ברגע שאוכל״. מכאן השם promise.</p>
+
+<p>צריך להתרגל לרעיון הזה על ידי תרגול. זה מרגיש קצת מוזר בהתחלה, כמו החתול של שרדינגר - {{interwiki("wikipedia", "Schrödinger's cat")}}. אף אחת מהאפשרויות לא קרתה עדיין, אז פעולת ההבאה - פעולת ה-fetch, כרגע מחכה לתוצאה של פעולת הדפדפן - להשלמה שלה בעתיד. לאחר מכן שיש לנו שלושה קודי בלוק שמשורשרים לסוף <code>fetch()</code>:</p>
+
+<ul>
+ <li>שני בלוקים של <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>. שניהם מכילים callback function שתרוץ אם הפעולה שקדמה לה הצליחה, וכל callback מקבל כקלט, את התוצאה של הפעולה המוצלחת הקודמת, כך שאנחנו יכולים להמשיך ולעשות עם התוצאה משהו. כל <code>.then()</code> מחזיר הבטחה - promise נוספת, כלומר אנחנו יכולים לקשור כמה וכמה בלוקי קוד של <code>.then()</code> אחד לשני, כך שיהיוה הרבה פעולות א-סינכרוניות שירוצו בסדר מסויים, אחת אחרי השנייה.</li>
+ <li>בלוק הקוד של <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> בסוף ירוץ אם אחד מהבלוקים של <code>.then()</code> ייכשל - בדרך דומה ל-<code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> הסינכרוני. אובייקט שגיאה - error object - ייהפך לזמין בתוך ה-<code>catch()</code>, והוא יוכל לשמש עבור דיווח על סוג השגיאה שהתרחשה. שימו לב כי promises הסינכרוני לא עובד עם <code>try...catch</code>, למרות שהוא כן יעבוד עם <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>, כפי שנראה בהמשך המאמר.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>: אתם תלמדו עוד הרבה על promises בהמשך המודול הזה, אז אל דאגה אם לא הבנתם אותם עד הסוף. זוהי רק סקירה.</p>
+</div>
+
+<h3 id="The_event_queue">The event queue</h3>
+
+<p>פעולות א-סינכרוניות כמו promises מושמות לתוך ה-<strong>event queue</strong>, אשר רץ לאחר שה-main thread סיים את העיבודים שלו, כך שהם לא יחסמו קוד JavaScript שבא אחריהם. הפעולות שב-promises יושלמו ברגע שיתאפשר, ויחזירו את התוצאה שלהן לסביבת הjavascript. Async operations like promises are put into an <strong>event queue</strong>, which runs after the main thread has finished processing so that they <em>do not block</em> subsequent JavaScript code from running. The queued operations will complete as soon as possible then return their results to the JavaScript environment.</p>
+
+<h3 id="Promises_מול_callbacks">Promises מול callbacks</h3>
+
+<p>ל-Promises יש קצת דמיון ל-callbacks הוותיקים. הם בעיקרון אבוייקט שהוחזר, אליו אנחנו מחברים פונקציות callbacks, ולא צריכים להעביר callbacks לתוך פונקציה.</p>
+
+<p>יחד עם זאת, promises נוצרו במיוחד עבור טיפול בפעולת א-סינכרוניות, ויש להם הרבה יתרונות על ה-callbacks הוותיקים:</p>
+
+<ul>
+ <li>ראשית, אנחנו יכולים לקשור מספר פעולות א-סינכרוניות ביחד באמצעות שימוש בכמה <code>.then()</code>, והעברה התוצאה של אחד כקלט של זה שאחריו. זה הרבה יותר קשה לביצוע עם callbacks, מה שבדרך מסתיים עם "pyramid of doom", אשר ידוע גם כ-ה</li>
+ <li>Promise callbacks תמיד ייקראו בסדר שבו הם מושמים ב- event queue.</li>
+ <li>Error טיפול ב- הוא הרבה יותר קל - כל השגיאות מטופלות על ידי בלוק <code>.catch()</code> אחד בסוף הבדלוק, ולא באמצעות טיפול בכל שלב של ה-פירמידה.</li>
+ <li>Avoid inversion control: unlike callbacks will lose full control of how the function will be executed when passing a callback to a third-party library. <a href="https://www.youtube.com/watch?v=bAlczbDUXx8">A great demonstration</a> by Stevie Jay.</li>
+</ul>
+
+<h2 id="ההתנהגות_של_קוד_א-סינכרוני">ההתנהגות של קוד א-סינכרוני</h2>
+
+<p>בואו נעמיק בדוגמא שתסביר לנו יותר לעומק את ההתהנגות של קוד א-סינכרוני, שמראה מה יכול לקראת כשאנחנו לא בקיאים לגמי בסדר של הרצת הקוד וההבעיות שיש בניסיון לטפל בקוד א-סינכרוני כמו בקוד סינכרוני. הודמא הבא היא יחסית דומה למה שראינו בעבר. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">sכדף אינטרנט</a>, וגם <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">קוד המקור</a>). הבדל אחד הוא שכללנו מספר ביטויים של {{domxref("console.log()")}} על ממנת להמחיש את הסדר שאנחנו נחשוב שבו הקוד ירוץ</p>
+
+<pre class="brush: js notranslate">console.log ('Starting');
+let image;
+
+fetch('coffee.jpg').then((response) =&gt; {
+  console.log('It worked :)')
+  return response.blob();
+}).then((myBlob) =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch((error) =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + error.message);
+});
+
+console.log ('All done!');</pre>
+
+<p>הדפדפן יתחיל להריץ את הקוד, הוא יראה את ה-<code>console.log()</code> הראשון ויריץ אותו. ולאחר מכן ייצור את המשתנה <code>image</code> .</p>
+
+<p>הוא לאחר מכן ימשיך לשורה הבאה, ויתחיל להריץ את הבלוק קוד של <code>fetch()</code>, אבל מכיוון ש-<code>fetch()</code> מורץ באופן א-סינכרוני בלי חסימה, הדפדפן ימשיך לקוד שלאחר הקוד של ה-promise-related code, ולכן יגיע ל-<code>console.log()</code> האחרון ( <code>All done!</code>) ואותו יציג לקונסולה. ימשיך לרוץ</p>
+
+<p>רק ברגע שהבלוק של ה-code&gt;fetch() סיים לחלוטין לרוץ והביא תוצאה - result באמצעות הבלוקים של <code>.then()</code>, אנחנו נראה לבסוף את הההודעה שב-<code>console.log()</code> השני (<code>It worked ;)</code>). כך שההודעות הופיעו בסדר שונה ממה שאולי חשבתם:</p>
+
+<ul>
+ <li>Starting</li>
+ <li>All done!</li>
+ <li>It worked :)</li>
+</ul>
+
+<p>אם זה מבלבל אתכם, הסתכלו על הדוגמא הבאה:</p>
+
+<pre class="brush: js notranslate">console.log("registering click handler");
+
+button.addEventListener('click', () =&gt; {
+  console.log("get click");
+});
+
+console.log("all done");</pre>
+
+<p>זה מאוד דומה בהתנהגות - ה-<code>console.log()</code> הראשון והשלישי יציגו את ההודעות שלהן מיד, אבל ה-<code>console.log()</code> השני יהיה חסום להצגה עד אשר מישהו ילחץ על הכפתור. הדוגמא הקודמת פועלת בדרך דוה, למעט כך שבמקרה שההודעה השנייה חסומה בשרשרת ההבטחות המביאות משאב מסויים ומוצגת רק כאשר שרשרת ההבטטחות הושלמה, ולא כאשר המשתמש ילחץ על כפתור. .</p>
+
+<p>בדוגמה של קוד פחות טריוויאלי, קוד מהסוג של הדוגמא הראשונה עלולה לגרום לבעיה - אינכם יכולים לכלול בלוק קוד אסינכרוני המחזיר תוצאה, עליה אתם מסתמכים בהמשך בבלוק קוד סינכרוני. אינכם כולים להבטיח שפונקציית ה-שaysync תחזור לפני שהדפדפן יעבד את חסימת האסינכרון.</p>
+
+<p>על מנת לראות זאת בפעולה, נסו לעשות עותק מקומי של To see this in action, try taking a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">הדוגמאו תשלנו</a>, ושנו את ה- <code>console.log()</code> שלישית כך:</p>
+
+<pre class="brush: js notranslate">console.log ('All done! ' + image + 'displayed.');</pre>
+
+<p>אתם אמורים לקבל שגיאה בקונסולה במקום ההודעה השלישית :</p>
+
+<pre class="notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre>
+
+<p>זה מכיוון שבזמן שהדפדפן מנסה להריץ את ה-<code>console.log()</code> השלישית, הבלוק קוד של <code>fetch()</code> עדיין לא סיים לרות, כך שהמשתנה <code>image</code> לא ניתן לו ערך עדיין.</p>
+
+<h2 id="למידה_עצמאית_פכו_את_הכל_ל-_async!">למידה עצמאית: פכו את הכל ל- async!</h2>
+
+<p>על מנת לתקן את ה- <code>fetch()</code>, ולהפוך את שלושת -<code>console.log()</code> להיות מופעים בסדר הרצוי, אתם יכולים לעשות את ה-<code>console.log()</code> השלישי שירוץ גם הוא בצורה א-סינכרוני. את זה ניתן לעשות באמצעות העברה שלו לתוך <code>.then()</code> אחר, אשר משורשר לתוך הסוף של ה-<code>.then()</code> השני, או באמצעות פשוט העברה שלו לתוך ה-<code>.then()</code> השני. נסו לתקן זאת.</p>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>: אם נתקעתם, אתם יכולים למצוא את התשובה <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">כאן</a> או כ <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">דף אינטרנט</a> also). אתם גם יכולים למצוא עוד הרבה על promises במדריך שלנו בנושא <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a>, בהמשך המודול הזה.</p>
+</div>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>במבנה הבסיסי שלה, JavaScript היא סינכרונית, שפה single-threaded,כך רק פעולה אחת יכולה להיות מעובדת בכל זמן נתון. יחד עם זאת, הדפדפנים הגדירו פונקציות ו-APIs שמאפשרים לנו לרשום פונקציות שלא ירוצו באופן סינכרוני, ובמקום זאת, יופעלו באופן א-סינכרוני כאשר אירוע מסויים מתרחש. זה אומר שאנחנו יכולים לתת לקוד שלנו לעשות דברים אחרים באותו הזמן, מבלי לחסום או לעצור את ה-main thread.</p>
+
+<p>בין אם אנחנו רוצים להירץ קוד באופן סינכרוני או א-סינכרוני, זה תלוי במה שאנחנו מנסים לעשות.</p>
+
+<p>יש פעמים שאנחנו נרצה שדברים יועלו ויתרחשו במיידי. לדוגמא, כאשר המתשמש מגדיר סגנון לאתר ואתם רוצים שהסגנון יוחל באופן מיידי.</p>
+
+<p>אם אנחנו מריצים פעולה מסויימת שלוקח לה זמן, כמו לדוגמא גישה למאגר מידע ושימוש בתוצאות על מנת ליצור תבניות לדגומא, זה יהיה עדיף להעביר את הפעולה הזו מחוץ ל-main thread, כך שתתצבע באופן א-סינכרוני. עם הזמן, אתם תלמדו מתי זה היה הגיוני לבחור בטכניקה א-סינכרונית ולא בסינכורנית.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת asynchronous JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></li>
+</ul>
diff --git a/files/he/learn/javascript/asynchronous/promises/index.html b/files/he/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..87c8839084
--- /dev/null
+++ b/files/he/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,589 @@
+---
+title: Graceful asynchronous programming with Promises
+slug: Learn/JavaScript/Asynchronous/Promises
+translation_of: Learn/JavaScript/Asynchronous/Promises
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>Promises</strong> הן תכונה חדשה יחסית ב-JavaScript, אשר מאפשרת לנו לדחות פעולות מסוייומות עד אשר פעולותדמות להן יושלמו, או שיגיבו לכך שהן נכשלו. זוהי תכונה מאוד שימושית על מנת ליצור רצף של פעולות א-סינכרוניות שיעבדו בצור הטובה. מאמר זה נועד להסביר כיצד promises עובדות, כיצד אנו נראה אותם בשימוש ב-web APIs וכיצד נכתוב promises משלנו. </span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין מהן promises וכיצד להשתמש בהן.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="מהן_promises">מהן promises?</h2>
+
+<p>סקרנו קצת <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> במאמר הראשון במודול זה, אבל במאמר זה נסקור אותן יותר לעומק.?</p>
+
+<p>בעיקרון promise הוא בעצם אובייקט שמייצג מצב ביניים של פעולה - בפועל, promise היא מעין הבטחה שתוצאה מסויימת תוחזר בנקודה מסויימת בעתיד. אין שום הבטחה מתי הפעולה תושלם ומתי התוצאה תוחזר, אבל יש הבטחה שכאשר התוצאה מוכנה, או שכאשר הפעוללה נכשלה, הקוד שסיפקנו ירוץ על מנת לעשות משהו עם תוצאה מוצלחת או להתמודד עם כשלון בפעולה.</p>
+
+<p>באופן כללי, אנחנו פחות מתעניינים בזמן שייקח לפעולה א-סינכרונית להחזיר את התוצאה שלה (אלא אם כן מדובר בזמן יותר מדי ארוך), ואנחנו יותר מעוניינים בכך שתהיה לנו אפשרות להגיב לאותה תגובה כאשר היא תחזור, לא משנה מהי התגובה. וכמובן, זה נחמד שאותה פעולה לא חוסמת את הקוד מלרוץ.</p>
+
+<p>אחד מהשימושים של promise שאנחנו נראה הוא ב-web APIs שמחזירים promise. נניח ויש לנו יישום וידאו צ׳אט. ליישום זה יש חלון עם רשימת החברים של המשתמש, ובלחיצה על כפתור ליד שם החבר, תחל שיחת וידאו עם אותו חבר.</p>
+
+<p>מטפל האירוע של הכפתור הזה קורא ל- {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} על מנת לקבל גישה למיקרופון ולמצלמה של המשתמש. מאחר ו-<code>()getUserMedia</code> חייב לוודא שלמשתמש יש אישור להשתמש באותם מכשירים ולבקש מהמשתמש לבחור איזה מיקרופון ואיזו מצלמה להשתמש בהם או בכל שילוב אחר. בזמן הבקשה הזו, פעולה זו יכולה לחסום את המשך התוכנית לא רק עד אשר כל האישורים האלו התקבלו, אלא גם עד אשר המצלמה והמיקרופון יתחברו. בנוסף, המשתמש אולי לא יגיב באופן מיידי לבקשות אלו. זה יכול לקחת הרבה זמן.</p>
+
+<p>מאחר והקריאה ל- <code>()getUserMedia</code> נעשית מה- browser's main thread, הדפדפן חסום עד אשר <code>()getUserMedia</code> תסיים. ברור כמובן שזו לא אפשרות מקובלת בימים אלו. ללא promises, כל דבר בדפדפן היה נהפך ללא שימושי עד אשר המשתמש יחליט מה לעשות עם המצלמה והמיקרופון. אז במקום לחכות למשתמש, לקבל את המכשירים שנבחרו, ולהחזיר את ה-{{domxref("MediaStream")}} שנוצר למקורות אלו, <code>()getUserMedia</code> מחזיר {{jsxref("promise")}} אשר נפתר עם {{domxref("MediaStream")}} ברגע שהוא זמין.</p>
+
+<p>הקוד של יישום הוידאו צאט שלנו, עשוי להיראות כך?:?</p>
+
+<pre class="brush: js">function handleCallButton(evt) {
+  setStatusMessage("Calling...");
+  navigator.mediaDevices.getUserMedia({video: true, audio: true})
+    .then(chatStream =&gt; {
+      selfViewElem.srcObject = chatStream;
+      chatStream.getTracks().forEach(track =&gt; myPeerConnection.addTrack(track, chatStream));
+      setStatusMessage("Connected");
+    }).catch(err =&gt; {
+      setStatusMessage("Failed to connect");
+    });
+}
+</pre>
+
+<p>הפונקציה הזו מתחילה בכך שהיא משתמש בפונקציה שנקראת <code>()setStatusMessage</code> על מנת לעדכן שורת עדכון למשתמש עם הטקסט: "Calling...", שמעידה על כך שמבוצע ניסיול החל בשיחה. לאחר מכן היא קוראת לפונקציה <code>()getUserMedia</code>, ומבקשת שתחל בסטרים (stream) ?שיש לו גם וידאו וגם אודיו וברגע שהסטרים יהיה מוכן, היא ממשיכה בפעולות לשם הקמת הסטרים וחיבור המצלמה והאודיו. לאחר מכן היא מציגה למשתמש הודעה ״Connected״. </p>
+
+<p>אם <code>()getUserMedia</code> תיכשל, בלוק הקוד של <code>catch</code> ירוץ. הוא משתמש שוב ב- <code>()setStatusMessage</code> על מנת להציג למשתמש שהתרחשה שגיאה. </p>
+
+<p>הדבר החשוב כן הוא שהקריאה של <code>()getUserMedia</code> מוחזרת כמעט באופן מיידי, גם אם הסטרים של המצלמה לא התקבל עדיין. אפילו אם הפונקציה של <code>()handleCallButton</code> סיימה להריץ את הקוד שבתוכה והחזירה את השליטה לקוד שקרא לה, כאשר <code>()getUserMedia</code> תסיים את הפעולה שלה, בין אם בהצלחה ובין אם תתרחש שגיאה, פונקציה זו תקרא שוב לאותו מטפל אירוע שסיפקנו לה. כלומר, היישום ימשיך לעבוד ולא יחכה לזרם הוידאו ולא ימנע מיתר הקוד להמשיך לרוץ. </p>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב:</strong>  לפרטים נוספים אודות נושא מורכב זה של וידאו ואודיו, ראו <a href="/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>.</p>
+</div>
+
+<h2 id="הבעיה_עם_callbacks">הבעיה עם callbacks</h2>
+
+<p>על מנת להבין לעומק מדוע promises הן דבר טוב, יעזור לנו לחשוב על ה-callbacks המיושנות ולהבין מדוע הן בעייתיות. </p>
+
+<p>ננסה להמחיש זאת באמצעות דוגמא להזמנת פיצה כאנלוגיה. יש מספר שלבים שאנחנו צריכים לעשות ולהשלים בהצלחה, אשר לא ממש הגיוני לבצע אותם בסדר אחר או לבצע אותם בסדר הנכון, אבל בלי לחכות שהשלב הקודם הסתיים:</p>
+
+<ol>
+ <li>בחירת התוספות לפיצה - זה יכול לקחת זמן אם אנחנו לא ממש בטוחים איזו תוספת אנחנו רוצים על הפיצה ושלב זה יכול להיכשל אם בסופו של דבר לא קיבלנו החלטה איזו תוספת אנחנו רוצים, או אם בסוף החלטנו לאכול משהו אחר. </li>
+ <li>בהנחה והחלטנו על תוספת, לאחר מכן אנחנו מבצעים הזמנה של הפיצה שאנחנו רוצים. שלב זה יכול לקחת זמן עד אשר הפיצה תהיה מוכנה, ואף יכול להיכשל אם לפיצרייה אין את המרכיבים הנכונים. </li>
+ <li>בשלב האחרון אנחנו אוספים את הפיצה ואוכלים, גם שלב זה יכול להיכשל אם לא שילמנו לדוגמא על הפיצה או לא באנו לאסוף את הפיצה. </li>
+</ol>
+
+<p>עם ה-<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Callbacks">callbacks</a> הישנות, קוד מופשט שלנו ייראה בערך כך: </p>
+
+<pre class="brush: js">chooseToppings(function(toppings) {
+  placeOrder(toppings, function(order) {
+    collectOrder(order, function(pizza) {
+      eatPizza(pizza);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);</pre>
+
+<p>קוד זה הוא מבולגן וקשה להבנה, ולפעמים גם נקרא כ-callback hell, הוא גם דורש שהפונקציה <code>()failureCallback</code> תיקרא כמה פעמים (בעבור כל פונקציה משורשרת) ויש לו גם חסרונות נוספים.</p>
+
+<h3 id="שדרוג_עם_promises">שדרוג עם  promises</h3>
+
+<p>Promises הופכות את סיטואציות כמו למעלה להרבה יותר פשוטות לכתיבה, פירוש וריצה. אם נציג את הקוד המופשט שלנו שוב באמצעות promises א-סינכרוניות, הוא ייראה כך:</p>
+
+<pre class="brush: js">chooseToppings()
+.then(function(toppings) {
+  return placeOrder(toppings);
+})
+.then(function(order) {
+  return collectOrder(order);
+})
+.then(function(pizza) {
+  eatPizza(pizza);
+})
+.catch(failureCallback);</pre>
+
+<p>זה כבר הרבה יותר טוב- הרבה יותר קל להבין מה קורה כאן והיינו צריכים רק בלוק קוד אחד של <code>()</code><code>catch.</code> בעבור כל השגיאות שאולי יתרחשו. כל הקוד הזה אינו חוסם את ה-main thread (כך שאנחנו יכולים להמשיך לראות טלווזיה עד אשר הפיצה תהיה מוכנה), וכל פעולה תחכה בוודאות עד אשר הפעולה הקודמת תסיים לפני שהיא תרוץ. אנחנו יכולים לקשור מספר פעולות א-סינכרוניות כך שיתרחשו אחת אחרי השנייה מכיוון שכל בלוק קוד של <code>(.....)then.</code> מחזיר promise חדשה, שנפתח כאשר הקוד שבתוך ה-<code>(.....)then.</code> הרלוונטי מסיים לרוץ. </p>
+
+<p>באמצעות שימוש בפונקציות חץ (arrow functions), אנחנו אפילו יכולים להפוך את הקוד לעוד יותר פשוט: </p>
+
+
+
+<pre class="brush: js">chooseToppings()
+.then(toppings =&gt;
+  placeOrder(toppings)
+)
+.then(order =&gt;
+  collectOrder(order)
+)
+.then(pizza =&gt;
+  eatPizza(pizza)
+)
+.catch(failureCallback);</pre>
+
+<p>או אפילו בצורה הזו:</p>
+
+<pre class="brush: js">chooseToppings()
+.then(toppings =&gt; placeOrder(toppings))
+.then(order =&gt; collectOrder(order))
+.then(pizza =&gt; eatPizza(pizza))
+.catch(failureCallback);</pre>
+
+<p>זה עובד מכיוון שעם פונקציות חץ, <code>x &lt;= ()</code> הוא סינטקסס חוקי והוא קיצור של <code>{return x} &lt;= ()</code>.</p>
+
+<p>אנחנו אפילו יכולים לרשום את הקוד שלנו בצורה כזו, מאחר שהפונקציות רק מעביר את הארגומנטים שלהם בצורה ישירה, אין צורך באמת לשכבה נוספת של פונקציה:</p>
+
+<pre class="brush: js">chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);</pre>
+
+<p>יחד עם זאת, סינטקס זה לא ניתן לשימוש שוב, ולא ממש ברור לקריאה. </p>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>: אנחנו אפילו יכולים לעשות שיפורים נוספים בסינטקס באמצעות הסינטקס של <code>async</code>/<code>await</code>, אשר נסקור אותו בהמשך המודול.</p>
+</div>
+
+<p>בבסיס שלהן, promises דומות למאזיני אירוע - event lisenters אך עם הבדלים ביניהם:</p>
+
+<ul>
+ <li>promis יכולה להצליח או להיכשל רק פעם אחת. היא לא יכול הלהציח פעמיים או להיכשל פעמיים והיא לא יכולה לעבור ממצב של הצלחה למצב של כישולון או ההפך, ברגע שהפעולה הסתייימה. </li>
+ <li>אם promise הצליחה או נכשלה ואלחר מכן אנחנו רוצים להוסיף success/failure callback, ה-callback הנכון הוא שייקרא, למרות שהאירוע עצמו התרחש לפני כן. </li>
+</ul>
+
+<h2 id="הסבר_של_הסינטקט_הבסיסי_של_promise">הסבר של הסינטקט הבסיסי של promise</h2>
+
+<p>Promises חשובות מאוד להבנה מכיוון שמרבית ה-Web API המודרניים משתמשים בהן בעבור פונקציות שעלולות לבצע פעולות ארוכות. </p>
+
+<p>בהמשך המאמר הזה אנחנו נראה כיצד לכתוב promises משלנו, אבל כאן אנחנו נסכתל על דוגמאות פשוטות שאנחנו ניתקל בהן ב-Web API שונים.</p>
+
+<p>בדוגמא הראשונה שלנו, אנחנו נשתמש במתודת <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>, על מנת להביא תמונה מהאינטרנט, במתודת {{domxref("Body.blob", "blob()")}} על מנת להמיר את התוכן הגולמי של התגובה שקיבלנו לאובייקט {{domxref("Blob")}} , ולאחר מכן נציג את אותו blob בתוך אלמנט {{htmlelement("img")}}. זהו מאוד דומה לדוגמא שהסתכלנו עליה ב<a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Asynchronous_JavaScript">מאמר הראשון במודול</a>, אבל אנחנו נעשה את זה מעט שונה כך שאתם תבנו את ה-promise. </p>
+
+<ol>
+ <li>
+  <p>ראשית, הורידו את ה-<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">HTML template</a> ואת ה-<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg">image file</a> שאנחנו נייבא. </p>
+ </li>
+ <li>
+  <p>הוסיפו אלמנט {{htmlelement("script")}} בתחתית ה-{{htmlelement("body")}} בקובץ ה-HTML.</p>
+ </li>
+ <li>
+  <p>בתוך האלמנט {{HTMLElement("script")}} , הוסיפו את השורה הבאה: </p>
+ </li>
+ <li>
+  <pre class="brush: js">let promise = fetch('coffee.jpg');</pre>
+
+  <p>שורה זו קוראת למתודת <code>()fetch</code> ומעבירה אליה כפרמטר את ה-URL של התמונה שאנחנו רוצים לייבא מהרשת. אנחנו מאחסנים את אובייקט ה-promise שיוחזר אלינו מ-<code>()fetch</code> בתוך משתנה שנקרא לו promise. כפי שאמרנו בעבר, האובייקט הזה מייצג מצב ביניים שבהתחלה הוא לא הצלחה ולא כישלון - מצב זה נקרא <strong>pending.</strong></p>
+ </li>
+ <li>על מנת להגיב להצלחה של הפעולה כאשר היא תקרה, במקרה הזה כאשר {{domxref("Response")}} תוחזר אלינו, אנחנו נפעיל את המתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> של אובייקט ה-promise. ה-callback בתוך בלוק הקוד של <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> (שנקרא גם <strong>executor</strong>), ירוץ רק כאשר פעולת ה-promise תושלם בהצלחה ותחזיר אובייקט {{domxref("Response")}} - במונחי promise, כאשר ה-promise תגיע למצב של הושלמה, <strong>fulfilled</strong>. היא תעביר את האובייקט {{domxref("Response")}} כפרמטר. </li>
+ <li>
+  <div class="blockIndicator note">
+  <p><strong>לתשומת לב</strong>: הדרך שבה הבלוק <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> עובד היא דומה לדרך שבה אנחנו מוסיפים מאזין אירוע - event listener - לאובייקט באמצעות המתודה <code>()AddEventListener</code>. מאזין האירוע לא ירוץ עד אשר האירוע יתרחש (ובאותה נשימה, כאשר ה-promise הושלמה בהצלחה). ההבדל העיקרי ביניהם הוא ש-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> ירוץ רק פעם אחת בכל פעם שמשתמשים בו ואילו מאזין האירוע יכול להיות מופעל כמה פעמים. </p>
+  </div>
+
+  <p>אנחנו מייד נריץ את מתודת  <code>()blob</code> על התגובה הזו, על מנת לוודא שגוף התגובה הורד בהצלחה, וכאשר הוא זמין נהפוך אותו לאובייקט <code>Blob</code> שאנחנו יכולים לעשות איתו משהו. התוצאה של זה תוחזר לנו כך :</p>
+
+  <pre class="brush: js">response =&gt; response.blob()</pre>
+
+  <p>שזה קיצור של: </p>
+
+  <pre class="brush: js">function(response) {
+  return response.blob();
+}</pre>
+
+  <p>עד כאן עם ההסבר, אנא הוסיפו את הקוד הבא מתחת לשורה הראשונה של JavaScript: </p>
+
+  <pre class="brush: js">let promise2 = promise.then(response =&gt; response.blob());</pre>
+ </li>
+ <li>
+  <p>כל קריאה ל-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> יוצרת promise חדשה. זהו מאוד שימושי - מכיוון שמתודת -  <code>()blob</code> מחזירה גם היא promise, אנחנו יכולים לטפל באובייקט ה-<code>Blob</code> שהיא מחזירה בעת ההשלמה שלו באמצעות הפעלה של מתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then.</a></code> על ה-promise השנייה. מכיוון שאנחנו רוצים לעשות משהו קצת יותר מורכב לאותו blob מאשר רק להריץ מתודה אחת עליו ולהחזיר את התוצאה, אנחנו צריכים לעטוף את גוף הפונקצייה בסוגריים מסולסלות - אחרת זה יגרום לשגיאה. הוסיפו את השורה הבאה מתחת לקוד הנוכחי שלכם: </p>
+ </li>
+ <li>
+  <pre class="brush: js">let promise3 = promise2.then(myBlob =&gt; {
+
+})</pre>
+ </li>
+ <li>
+  <p>כעת, נכניס את הקוד הבא שהוא הפונקציה שתופעל, לתוך הסוגריים המסולסלות:</p>
+
+  <pre class="brush: js">let objectURL = URL.createObjectURL(myBlob);
+let image = document.createElement('img');
+image.src = objectURL;
+document.body.appendChild(image);</pre>
+
+  <p>מה שעשינו כאן אנחנו מריצים בעצם מריצים מתודת {{domxref("URL.createObjectURL()")}} , מעבירים אליה כפרמרט את ה-<code>Blob</code> שהוחזר אלינו כאשר ה-promise השנייה הושלמה. זה מחזיר לנו URL שמצביע על האובייקט. לאחר מכן יצרנו אלמנט {{htmlelement("img")}} , וקבענו את ה-<code>src</code> שלו שיהיה שווה ל-URL של האובייקט ושייכנו אותו ל-DOM, כך שהתמונה תוצג על גבי הדף. </p>
+ </li>
+</ol>
+
+<p>אם תשמרו ותרעננו את הדף, אתם תראו שהתמונה מוצגת על גבי הדף. </p>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>:  אתם בטח תשימו לב שדוגמאות אלו ארוכות מדי בשביל פעולה פשוטה שיכולנו לבצע באמצעות יצירת אלמנט <code>&lt;img&gt;</code> וקביעת ה-<code>src</code> שלו לאותו URL של התמונה במקום לעשות זאת באמצעות <code>()fetch</code> ובאמצעות <code>()blob</code>. יחד עם זאת, דוגמא זו נועדה על מנת להסביר בפשטות את תהליך ה-promises.</p>
+</div>
+
+<h3 id="תגובה_לכישלון">תגובה לכישלון </h3>
+
+<p>יש משהו חסר בדוגמא שלנו - כרגע, אין משהו שמגדיר כיצד להתמודד עם שגיאה כאשר ה-promise נכשלת, או <strong>rejects</strong> במונחים של promises. אנחנו יכולים להוסיף טיפול בשגיאה באמצעות הרצת מתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">()catch</a>.</code> של ה-promise הקודמת:</p>
+
+<pre class="brush: js">let errorCase = promise3.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+
+
+<p>To see this in action, try misspelling the URL to the image and reloading the page. The error will be reported in the console of your browser's developer tools.</p>
+
+<p>This doesn't do much more than it would if you just didn't bother including the <code>.catch()</code> block at all, but think about it — this allows us to control error handling exactly how we want. In a real app, your <code>.catch()</code> block could retry fetching the image, or show a default image, or prompt the user to provide a different image URL, or whatever.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html">our version of the example live</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html">source code</a> also).</p>
+</div>
+
+<h3 id="Chaining_the_blocks_together">Chaining the blocks together</h3>
+
+<p>This is a very longhand way of writing this out; we've deliberately done this to help you understand what is going on clearly. As shown earlier on in the article, you can chain together <code>.then()</code> blocks (and also <code>.catch()</code> blocks). The above code could also be written like this (see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">simple-fetch-chained.html</a> on GitHub):</p>
+
+<pre class="brush: js">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>Bear in mind that the value returned by a fulfilled promise becomes the parameter passed to the next <code>.then()</code> block's executor function.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>.then()</code>/<code>.catch()</code> blocks in promises are basically the async equivalent of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> block in sync code. Bear in mind that synchronous <code>try...catch</code> won't work in async code.</p>
+</div>
+
+<h2 id="Promise_terminology_recap">Promise terminology recap</h2>
+
+<p>There was a lot to cover in the above section, so let's go back over it quickly to give you a <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Promise_terminology_recap">short guide that you can bookmark</a> and use to refresh your memory in the future. You should also go over the above section again a few more time to make sure these concepts stick.</p>
+
+<ol>
+ <li>When a promise is created, it is neither in a success or failure state. It is said to be <strong>pending</strong>.</li>
+ <li>When a promise returns, it is said to be <strong>resolved</strong>.
+  <ol>
+   <li>A successfully resolved promise is said to be <strong>fulfilled</strong>. It returns a value, which can be accessed by chaining a <code>.then()</code> block onto the end of the promise chain. The executor function inside the <code>.then()</code> block will contain the promise's return value.</li>
+   <li>An unsuccessful resolved promise is said to be <strong>rejected</strong>. It returns a <strong>reason</strong>, an error message stating why the promise was rejected. This reason can be accessed by chaining a <code>.catch()</code> block onto the end of the promise chain.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</h2>
+
+<p>The above example showed us some of the real basics of using promises. Now let's look at some more advanced features. For a start, chaining processes to occur one after the other is all fine, but what if you want to run some code only after a whole bunch of promises have <em>all</em> fulfilled?</p>
+
+<p>You can do this with the ingeniously named <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> static method. This takes an array of promises as an input parameter and returns a new <code>Promise</code> object that will fulfill only if and when <em>all</em> promises in the array fulfill. It looks something like this:</p>
+
+<pre class="brush: js">Promise.all([a, b, c]).then(values =&gt; {
+  ...
+});</pre>
+
+<p>If they all fulfill, then chained <code>.then()</code> block's executor function will be passed an array containing all those results as a parameter. If any of the promises passed to <code>Promise.all()</code> reject, the whole block will reject.</p>
+
+<p>This can be very useful. Imagine that we’re fetching information to dynamically populate a UI feature on our page with content. In many cases, it makes sense to receive all the data and only then show the complete content, rather than displaying partial information.</p>
+
+<p>Let's build another example to show this in action.</p>
+
+<ol>
+ <li>
+  <p>Download a fresh copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">page template</a>, and again put a <code>&lt;script&gt;</code> element just before the closing <code>&lt;/body&gt;</code> tag.</p>
+ </li>
+ <li>
+  <p>Download our source files (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg">coffee.jpg</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/tea.jpg">tea.jpg</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/description.txt">description.txt</a>), or feel free to substitute your own.</p>
+ </li>
+ <li>
+  <p>In our script we'll first define a function that returns the promises we want to send to <code>Promise.all()</code>. This would be easy if we just wanted to run the <code>Promise.all()</code> block in response to three <code>fetch()</code> operations completing. We could just do something like:</p>
+
+  <pre class="brush: js">let a = fetch(url1);
+let b = fetch(url2);
+let c = fetch(url3);
+
+Promise.all([a, b, c]).then(values =&gt; {
+  ...
+});</pre>
+
+  <p>When the promise is fulfilled, the <code>values</code> passed into the fullfillment handler would contain three <code>Response</code> objects, one for each of the <code>fetch()</code> operations that have completed.</p>
+
+  <p>However, we don't want to do this. Our code doesn't care when the <code>fetch()</code> operations are done. Instead, what we want is the loaded data. That means we want to run the <code>Promise.all()</code> block when we get back usable blobs representing the images, and a usable text string. We can write a function that does this; add the following inside your <code>&lt;script&gt;</code> element:</p>
+
+  <pre class="brush: js">function fetchAndDecode(url, type) {
+  return fetch(url).then(response =&gt; {
+    if (type === 'blob') {
+      return response.blob();
+    } else if (type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log('There has been a problem with your fetch operation: ' + e.message);
+  });
+}</pre>
+
+  <p>This looks a bit complex, so let's run through it step by step:</p>
+
+  <ol>
+   <li>First of all we define the function, passing it a URL and a string representing the type of resource it is fetching.</li>
+   <li>Inside the function body, we have a similar structure to what we saw in the first example — we call the <code>fetch()</code> function to fetch the resource at the specified URL, then chain it onto another promise that returns the decoded (or "read") response body. This was always the <code>blob()</code> method in the previous example.</li>
+   <li>However, two things are different here:
+    <ul>
+     <li>First of all, the second promise we return is different depending on what the <code>type</code> value is. Inside the executor function we include a simple <code>if ... else if</code> statement to return a different promise depending on what type of file we need to decode (in this case we've got a choice of <code>blob</code> or <code>text</code>, but it would be easy to extend this to deal with other types as well).</li>
+     <li>Second, we have added the <code>return</code> keyword before the <code>fetch()</code> call. The effect this has is to run the entire chain and then run the final result (i.e. the promise returned by <code>blob()</code> or <code>text()</code>) as the return value of the function we've just defined. In effect, the <code>return</code> statements pass the results back up the chain to the top.</li>
+    </ul>
+   </li>
+   <li>
+    <p>At the end of the block, we chain on a <code>.catch()</code> call, to handle any error cases that may come up with any of the promises passed in the array to <code>.all()</code>. If any of the promises reject, the catch block will let you know which one had a problem. The <code>.all()</code> block (see below) will still fulfill, but just won't display the resources that had problems. If you wanted the <code>.all</code> to reject, you'd have to chain the <code>.catch()</code> block on to the end of there instead.</p>
+   </li>
+  </ol>
+
+  <p>The code inside the function body is async and promise-based, therefore in effect the entire function acts like a promise — convenient.</p>
+ </li>
+ <li>
+  <p>Next, we call our function three times to begin the process of fetching and decoding the images and text, and store each of the returned promises in a variable. Add the following below your previous code:</p>
+
+  <pre class="brush: js">let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');</pre>
+ </li>
+ <li>
+  <p>Next, we will define a <code>Promise.all()</code> block to run some code only when all three of the promises stored above have successfully fulfilled. To begin with, add a block with an empty executor inside the <code>.then()</code> call, like so:</p>
+
+  <pre class="brush: js">Promise.all([coffee, tea, description]).then(values =&gt; {
+
+});</pre>
+
+  <p>You can see that it takes an array containing the promises as a parameter. The executor will only run when all three promises resolve; when that happens, it will be passed an array containing the results from the individual promises (i.e. the decoded response bodies), kind of like [coffee-results, tea-results, description-results].</p>
+ </li>
+ <li>
+  <p>Last of all, add the following inside the executor. Here we use some fairly simple sync code to store the results in separate variables (creating object URLs from the blobs), then display the images and text on the page.</p>
+
+  <pre class="brush: js">console.log(values);
+// Store each value returned from the promises in separate variables; create object URLs from the blobs
+let objectURL1 = URL.createObjectURL(values[0]);
+let objectURL2 = URL.createObjectURL(values[1]);
+let descText = values[2];
+
+// Display the images in &lt;img&gt; elements
+let image1 = document.createElement('img');
+let image2 = document.createElement('img');
+image1.src = objectURL1;
+image2.src = objectURL2;
+document.body.appendChild(image1);
+document.body.appendChild(image2);
+
+// Display the text in a paragraph
+let para = document.createElement('p');
+para.textContent = descText;
+document.body.appendChild(para);</pre>
+ </li>
+ <li>
+  <p>Save and refresh and you should see your UI components all loaded, albeit in a not particularly attractive way!</p>
+ </li>
+</ol>
+
+<p>The code we provided here for displaying the items is fairly rudimentary, but works as an explainer for now.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can compare your version of the code to ours, to see what it is meant to look like — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you were improving this code, you might want to loop through a list of items to display, fetching and decoding each one, and then loop through the results inside <code>Promise.all()</code>, running a different function to display each one depending on what the type of code was. This would make it work for any number of items, not just three.</p>
+
+<p>In addition, you could determine what the type of file is being fetched without needing an explicit <code>type</code> property. You could for example check the {{HTTPHeader("Content-Type")}} HTTP header of the response in each case using <code><a href="/en-US/docs/Web/API/Headers/get">response.headers.get("content-type")</a></code>, and then react accordingly.</p>
+</div>
+
+<h2 id="Running_some_final_code_after_a_promise_fulfillsrejects">Running some final code after a promise fulfills/rejects</h2>
+
+<p>There will be cases where you want to run a final block of code after a promise completes, regardless of whether it fulfilled or rejected. Previously you'd have to include the same code in both the <code>.then()</code> and <code>.catch()</code> callbacks, for example:</p>
+
+<pre class="brush: js">myPromise
+.then(response =&gt; {
+  doSomething(response);
+  runFinalCode();
+})
+.catch(e =&gt; {
+  returnError(e);
+  runFinalCode();
+});</pre>
+
+<p>In more recent modern browsers, the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> method is available, which can be chained onto the end of your regular promise chain allowing you to cut down on code repetition and do things more elegantly. The above code can now be written as follows:</p>
+
+<pre class="brush: js">myPromise
+.then(response =&gt; {
+  doSomething(response);
+})
+.catch(e =&gt; {
+  returnError(e);
+})
+.finally(() =&gt; {
+  runFinalCode();
+});</pre>
+
+<p>For a real example, take a look at our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-finally.html">promise-finally.html demo</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-finally.html">source code</a> also). This works exactly the same as the <code>Promise.all()</code> demo we looked at in the above section, except that in the <code>fetchAndDecode()</code> function we chain a <code>finally()</code> call on to the end of the chain:</p>
+
+<pre class="brush: js">function fetchAndDecode(url, type) {
+  return fetch(url).then(response =&gt; {
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  })
+  .finally(() =&gt; {
+    console.log(`fetch attempt for "${url}" finished.`);
+  });
+}</pre>
+
+<p>This logs a simple message to the console to tell us when each fetch attempt has finished.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>finally()</code> allows you to write async equivalents to try/catch/finally in async code.</p>
+</div>
+
+<h2 id="Building_your_own_custom_promises">Building your own custom promises</h2>
+
+<p>The good news is that, in a way, you've already built your own promises. When you've chained multiple promises together with <code>.then()</code> blocks, or otherwise combined them to create custom functionality, you are already making your own custom async promise-based functions. Take our <code>fetchAndDecode()</code> function from the previous examples, for example.</p>
+
+<p>Combining different promise-based APIs together to create custom functionality is by far the most common way you'll do custom things with promises, and shows the flexibility and power of basing most modern APIs around the same principle. There is another way, however.</p>
+
+<h3 id="Using_the_Promise()_constructor">Using the Promise() constructor</h3>
+
+<p>It is possible to build your own promises using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise()</a></code> constructor. The main situation in which you'll want to do this is when you've got code based on an an old-school asynchronous API that is not promise-based, which you want to promis-ify. This comes in handy when you need to use existing, older project code, libraries, or frameworks along with modern promise-based code.</p>
+
+<p>Let's have a look at a simple example to get you started — here we wrap a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call with a promise — this runs a function after two seconds that resolves the promise (using the passed <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolve()</a></code> call) with a string of "Success!".</p>
+
+<pre class="brush: js">let timeoutPromise = new Promise((resolve, reject) =&gt; {
+  setTimeout(function(){
+    resolve('Success!');
+  }, 2000);
+});</pre>
+
+<p><code>resolve()</code> and <code>reject()</code> are functions that you call to fulfill or reject the newly-created promise. In this case, the promise fulfills with a string of "Success!".</p>
+
+<p>So when you call this promise, you can chain a <code>.then()</code> block onto the end of it and it will be passed a string of "Success!". In the below code we simply alert that message:</p>
+
+<pre class="brush: js">timeoutPromise
+.then((message) =&gt; {
+   alert(message);
+})</pre>
+
+<p>or even just</p>
+
+<pre class="brush: js">timeoutPromise.then(alert);
+</pre>
+
+<p>Try <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise.html">running this live</a> to see the result (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html">source code</a>).</p>
+
+<p>The above example is not very flexible — the promise can only ever fulfill with a single string, and it doesn't have any kind of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">reject()</a></code> condition specified (admittedly, <code>setTimeout()</code> doesn't really have a fail condition, so it doesn't matter for this simple example).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Why <code>resolve()</code>, and not <code>fulfill()</code>? The answer we'll give you for now is <em>it's complicated</em>.</p>
+</div>
+
+<h3 id="Rejecting_a_custom_promise">Rejecting a custom promise</h3>
+
+<p>We can create a promise that rejects using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">reject()</a></code> method — just like <code>resolve()</code>, this takes a single value, but in this case it is the reason to reject with, i.e., the error that will be passed into the <code>.catch()</code> block.</p>
+
+<p>Let's extend the previous example to have some <code>reject()</code> conditions as well as allowing different messages to be passed upon success.</p>
+
+<p>Take a copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html">previous example</a>, and replace the existing <code>timeoutPromise()</code> definition with this:</p>
+
+<pre class="brush: js">function timeoutPromise(message, interval) {
+  return new Promise((resolve, reject) =&gt; {
+    if (message === '' || typeof message !== 'string') {
+      reject('Message is empty or not a string');
+    } else if (interval &lt; 0 || typeof interval !== 'number') {
+      reject('Interval is negative or not a number');
+    } else {
+      setTimeout(function(){
+        resolve(message);
+      }, interval);
+    }
+  });
+};</pre>
+
+<p>Here we are passing two arguments into a custom function — a message to do something with, and the time interval to pass before doing the thing. Inside the function we then return a new <code>Promise</code> object — invoking the function will return the promise we want to use.</p>
+
+<p>Inside the Promise constructor, we do a number of checks inside <code>if ... else</code> structures:</p>
+
+<ol>
+ <li>First of all we check to see if the message is appropriate for being alerted. If it is an empty string or not a string at all, we reject the promise with a suitable error message.</li>
+ <li>Next, we check to see if the interval is an appropriate interval value. If it is negative or not a number, we reject the promise with a suitable error message.</li>
+ <li>Finally, if the parameters both look OK, we resolve the promise with the specified message after the specified interval has passed using <code>setTimeout()</code>.</li>
+</ol>
+
+<p>Since the <code>timeoutPromise()</code> function returns a <code>Promise</code>, we can chain <code>.then()</code>, <code>.catch()</code>, etc. onto it to make use of its functionality. Let's use it now — replace the previous <code>timeoutPromise</code> usage with this one:</p>
+
+<pre class="brush: js">timeoutPromise('Hello there!', 1000)
+.then(message =&gt; {
+   alert(message);
+})
+.catch(e =&gt; {
+  console.log('Error: ' + e);
+});</pre>
+
+<p>When you save and run the code as is, after one second you'll get the message alerted. Now try setting the message to an empty string or the interval to a negative number, for example, and you'll be able to see the promise reject with the appropriate error messages! You could also try doing something else with the resolved message rather than just alerting it.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find our version of this example on GitHub as <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html">custom-promise2.html</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html">source code</a>).</p>
+</div>
+
+<h3 id="A_more_real-world_example">A more real-world example</h3>
+
+<p>The above example was kept deliberately simple to make the concepts easy to understand, but it is not really very async. The asynchronous nature is basically faked using <code>setTimeout()</code>, although it does still show that promises are useful for creating a custom function with sensible flow of operations, good error handling, etc.</p>
+
+<p>One example we'd like to invite you to study, which does show a useful async application of the <code>Promise()</code> constructor, is <a href="https://github.com/jakearchibald/idb/">Jake Archibald's idb library</a>. This takes the <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>, which is an old-style callback-based API for storing and retrieving data on the client-side, and allows you to use it with promises. If you look at the <a href="https://github.com/jakearchibald/idb/blob/master/lib/idb.js">main library file</a> you'll see the same kind of techniques we discussed above being used there. The following block converts the basic request model used by many IndexedDB methods to use promises:</p>
+
+<pre class="brush: js">function promisifyRequest(request) {
+  return new Promise(function(resolve, reject) {
+    request.onsuccess = function() {
+      resolve(request.result);
+    };
+
+    request.onerror = function() {
+      reject(request.error);
+    };
+  });
+}</pre>
+
+<p>This works by adding a couple of event handlers that fulfill and reject the promise at appropriate times:</p>
+
+<ul>
+ <li>When the <code><a href="/en-US/docs/Web/API/IDBRequest">request</a></code>'s <a href="/en-US/docs/Web/API/IDBRequest/success_event"><code>success</code> event</a> fires, the <code><a href="/en-US/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code> handler fulfills the promise with the request <code><a href="/en-US/docs/Web/API/IDBRequest/result">result</a></code>.</li>
+ <li>When the <code><a href="/en-US/docs/Web/API/IDBRequest">request</a></code>'s <a href="/en-US/docs/Web/API/IDBRequest/error_event"><code>error</code> event</a> fires, the <code><a href="/en-US/docs/Web/API/IDBRequest/onerror">onerror</a></code> handler rejects the promise with the request <code><a href="/en-US/docs/Web/API/IDBRequest/error">error</a></code>.</li>
+</ul>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Promises are a good way to build asynchronous applications when we don’t know the return value of a function or how long it will take to return. They make it easier to express and reason about sequences of asynchronous operations without deeply nested callbacks, and they support a style of error handling that is similar to the synchronous <code>try...catch</code> statement.</p>
+
+<p>Promises work in the latest versions of all modern browsers; the only place where promise support will be a problem is in Opera Mini and IE11 and earlier versions.</p>
+
+<p>We didn't touch on all promise features in this article, just the most interesting and useful ones. As you start to learn more about promises, you'll come across further features and techniques.</p>
+
+<p>Most modern Web APIs are promise-based, so you'll need to understand promises to get the most out of them. Among those APIs are <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams</a>, and many more. Promises will be more and more important as time goes on, so learning to use and understand them is an important step in learning modern JavaScript.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise()</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a> by Nolan Lawson</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת asynchronous JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></li>
+</ul>
diff --git a/files/he/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/he/learn/javascript/asynchronous/timeouts_and_intervals/index.html
new file mode 100644
index 0000000000..2d97d2827d
--- /dev/null
+++ b/files/he/learn/javascript/asynchronous/timeouts_and_intervals/index.html
@@ -0,0 +1,651 @@
+---
+title: 'Cooperative asynchronous JavaScript: Timeouts and intervals'
+slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">
+  במאמר זה אנחנו נסתכל על מתודות מסורתיות שיש ב-JavaScript, בעבור הרצה של קוד באופן א-סינכרוני לאחר שזמן מסויים עבר או באינטרוול מסויים (כלומר לקבוע מספר פעמים שירוץ בכל פרק זמן מסויים), נדון בשימושים שלהם ומה הסוגיות הטבועות בהם.
+
+  </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>
+    הבנה של לולאות א-סינכרוניות ואינטרוולים ולמה הם משמים. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="הקדמה">הקדמה</h2>
+
+<p>
+  במשך זמן רב, פלטפורמת ה-web  העניקה למפתחי JavaScript מספר של פונקציות שאפשרו לה להריץ קוד באופן א-סינכרוני, כך שהקוד ירוץ לאחר זמן מסויים שעבר או להריץ קוד מסויים באופן א-סינכרוני,ע ם הפרש זמן מסויים בין כל ריצה שלו, עד שאנחנו נגיד לו לעצור. אלו הם :</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>
+  מריץ בלוק קוד מסויים פעם אחת לאחר שזמן מסויים עבר. </dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>
+  מריץ בלוק קוד מסויים באופן חוזר, עם הפרש של זמן מסויים בין כל ריצה. </dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>
+   זוהי גרסה מודרנית ל-<code>setInterval()</code>. היא מריצה בלוק קוד מסויים לפני שהדפדפן צובע מחדש את התצוגה, כך שמתאפשרת לאניממציה לרוץ  במסגרת מתאימה ללא קשר לסביבה בה היא פועלת.
+  </dd>
+</dl>
+
+<p>
+  הקוד הא-סינכרוני שנכתב באמצעות פונקציות אלו בעצם ירוץ על ה-00000, אבל כן התאפשר לנו להריץ קוד אחר בין כל ריצה שלהם במידה מסוייתמ, תלוי כמה הפונקציות שנכתוב יעשו שימוש רב במעבד. בכל מקרה, הפונקציות הללו משמשות אנימציות קבועות ועוד תהליכי רקע על אתר אינטרנט או יישום אינטרנטר. בחלקים הבאים של המאמר אנחנו נגע בכל אחת מהן ולמה הן משמשות. .</p>
+
+<h2 id="setTimeout()">setTimeout()</h2>
+
+<p>
+  כפי שאמרנו למעלה,  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> מריצה בלוק קוד מסויים פעם אחת, לאחר שזמן מסויים שהגדרנו לה חלף. היא מקבלת את הפרמטרים הבאים: </p>
+
+<ul>
+ <li>פונקציה שתרוץ או הפנייה לפונקציה שהוגדרה במקום אחר.
+
+ </li>
+ <li>
+
+  מספר שמייצג את משך הזמן (אינטרוול הזמן) במילשניות (כך 1000 מילישניות שווה לשנייה אחת). המספר הזה מייצג את משך הזמן שיעבור לפני שהקוד יורץ - הפונקציה תורץ. אנחנו יכולים לרשום את הערך של 0 או להשמיט את המספר הזה לחלוטין ואז הפונקציה תרוץ באופן מיידע. עוד על מדוע נרצה לעשות זאת אנחנו נראה בהמשך. </li>
+ <li>
+  פרמטרים נוספים, ככל ונדרשים על ידי הפונקציה שנתנו כפרמטר ל--<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>. כלומר, פרמטרים שנרצה להעביר לפונקציה שתרוץ.
+</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב:</strong>
+  מכיוון ש-0000000 מורצות ביחד, אין כל הבטחה שהן יופעלו  <em>במדוייק</em> לאחר הזמן שהגדרנו. במקום, הם ייקראו לאחר שהזמן שהגדרנו חלף, <em>לפחות</em>.
+
+  Because timeout callbacks are executed cooperatively, there's no guarantee that they will be called after <em>exactly</em> the specified amount of time. Instead, they will be called after <em>at least</em> that much time has elapsed.
+
+
+  Timeout handlers לא יכולים לרוץ עד אשר ה-main thread מגיע לנקודה בריצה שלו שם הוא עובר על מטפלים אלו למצוא את אלו שהוא צריך להריץ אותם.  שה-00000
+</p>
+</div>
+
+<p>
+  בדוגמא הבאה, הדפדפן יחכה שתי שניות לפני שיריץ את הפונקציה האנונימית, ואז יציג את הודעת ה-alert.
+e (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">ראו כדף אינטרנט</a>, וכן <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">את קוד המקור</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>
+  הפונקציות שאנחנו מציינים לא חייבות להיות אנונימיות. אנחנו יכולים לתת לפונקציה שלנו שם ואפילו להגדיר אותה במקום אחר, ואז להעביר הפנייה לפונקציה בתוך ה- <code>setTimeout()</code> . הגרסאות הבאות של הקוד שלנו הם שוות לראשונה:
+
+  he functions we specify don't have to be anonymous. We can give our function a name, and can even define it somewhere else and pass a function reference to the <code>setTimeout()</code>. The following two versions of our code snippet are equivalent to the first one:</p>
+
+<pre class="brush: js">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>
+  זה יכול להיות שימושי כאשר יש לנו פונקציה שצריכה להיקרא/להיות מופעלת גם מתוך -timeout וגם בתגובה לאירוע, לדוגמא. אבל, זה גם יכול לעזור לנו להשאיר את הקוד שלנו מסודר, במיוחד אם אחרי ה-timeout callback יש לנו יותר מכמה שורות קוד.
+</p>
+
+<p><code>setTimeout()</code>
+  מחזירה ערך מזהה שיכול לשמש לשם הפנייה לאותו timeout לאחר מכן, אם נרצה לדוגמא לעצור את ה-timeout. ראו  {{anch("Clearing timeouts")}}  בהמשך על מנת ללמוד כיצד לעשות זאת.
+
+
+  </p>
+
+<h3 id="העברת_פרמטרים_לפונקציית_setTimeout()">העברת פרמטרים לפונקציית setTimeout() </h3>
+
+<p>
+  כל פרמטר שנרצה להעביר לפונקציה שתרוף בתוך ה-<code>setTimeout()</code>, יהיו חייבים להיות מועברים כפרמטרים נוספוים לפונקציית ה-<code>setTimeout()</code>, וזאת בסוף הרשימת פרמטרים. לדוגמא, אנחנו יכולים כתוב מחדש את הפונקציה הקודמת שלנו כך שהיא תגיד hi לכל שם שיועבר אליה
+:</p>
+
+<pre class="brush: js">function sayHi(who) {
+  alert('Hello ' + who + '!');
+}</pre>
+
+<p>
+  השם של ה-person יכול להיות מועבר כפרמטר שלישי לתוך ה-<code>setTimeout()</code>
+
+:</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="מחיקת_Timeouts">מחיקת Timeouts</h3>
+
+<p>
+  לבסוף, אם timeout נוצר, אנחנו יכולים לבטל אותו לפני שהזמן שהגדרנו לו הסתיים באמצעשות שימוש ב-<code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code> והעברה של אותו ערך מזהה של ה-<code>setTimeout()</code> כפרמטר. כך, על מנת לבטל את ה-<code>setTimeout()</code> בדוגמא למעלה, אנחנו צריכים לרשום משהו כזה:
+</p>
+
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לב</strong>: ראו <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a>
+  לדוגמא יותר מעניינת אשר מאפשרת לכן לקבוע את השם של האדם שנגיד לו שלום בטופס, ואז לבטל את הברכה באמצעו תכפתור אחג. (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">קוד המקור</a>).</p>
+</div>
+
+<h2 id="setInterval()">setInterval()</h2>
+
+<p><code>setTimeout()</code> עובדת מצוים כאשר אנחנו צריכים להריץ בלוק קוד מסויים פעם אחת לאחר  אינטרוול זמן שעבר. אבל מה קורה כאשר אנחנו רוצים להריץ קוד מסויים שוב ושוב, כמו במקרה של אנימציות?</p>
+
+<p>כאן נכנס לתמונה <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> .
+  פונקציה זו עובדת בצורה דומה ל-<code>setTimeout()</code>, למעט העובדה שהפונקציה שאנחנו מעבירים כפרמטר ראשון, תרוץ באופן חוזר ונשנה לכל הפחות בכל משך הזמן שהוגדר לה (גם כן במילישניות), ולא רק פעם אחת. אנחנו גם יכולים להעביר לה את הפרמטרים הדרושים לפונקציה שתרוץ.
+.</p>
+
+<p>
+  נראה דוגמא על מנת להמחיש את העניין. הפונקציה הבא יוצרת אובייקט <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/Date/toLocaleTimeString">toLocaleTimeString()</a></code> ציגה את זה לממשק המתשמש. לאחר מכן אנחנו מריצים פונקציה אחת לשנייה באמצעות שימוש ב-<code>setInterval()</code>
+  על מנת ליצור את האפשר של שעון דיגיטלי שמעדכן את עצמו כל שנייה.
+  (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">ראו כדף אינטרנט</a>, ואת also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">קוד המקור</a>):</p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>בדיוק כמו <code>setTimeout()</code>, <code>setInterval()</code> מחזירה ערך מזהה כך שאנחנו יכולים להשתמש בו בהמשך על מנת למחוק את ה-interval.</p>
+
+<h3 id="מחיקת_intervals">מחיקת intervals</h3>
+
+<p><code>setInterval()</code> תמשיך לרוץ באופן מתמשך וקבוע, אלא אם אנחנו נעשה איתה משהו -
+  אנחנו נרצה אולי דרך לעצור משימות כאלו, אחרת אנחנו נקבל שגיאות השהדפדפן לא מצליח להשלים גרסאות נוספות של המשימה הזו, או שהאניממציה שמטופלת על ידי המשימה הזו הסתיימה. אנחנו יכולים לעשות זאת באותה דרך שבה אנחנו מסיימים <code>setInterval()</code> - באמצעות העבר הערך המזהה שהוחזר לנו בהפעלה של <code>setInterval()</code> לפונקציה  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code>:
+
+  </p>
+
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="למידה_עצמאית_יצירה_של_שעון_עצר">למידה עצמאית: יצירה של שעון עצר</h4>
+
+<p>לאחר שעברנו על פונקציות אלו, נסו לאתגר את עצמכם במשימה זו. עשו עותקשל הדוגמא שלנו שנמצא ב- <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a> ושנו אותה כך שתהיה שעון סטופר.</p>
+
+<p>
+  אתם צריכים להציג את הזמן כמו בדוגמא הקודמת, רק שבתרגיל זה אתם תצטרכו:</p>
+
+<ul>
+ <li>כפתור "Start" על מנת שהשעון יתחיל לרוץ.</li>
+ <li>כפתור "Stop" להשהות את השעון.</li>
+ <li>כפתור "Reset" לאפס את השעון ל- 0.</li>
+ <li>תצוגת זמן על מנת להציג כמה שניות עברו ולא מה השעה הנוכחית </li>
+</ul>
+
+<p>רמזים:</p>
+
+<ul>
+ <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
+ <li>You probably want to create a variable that starts at 0, then increments by one every second using a constant loop.</li>
+ <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly 1000ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
+ <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
+ <li>How would you calculate them? Have a think about it:
+  <ul>
+   <li>The number of seconds in an hour is 3600.</li>
+   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by 60.</li>
+   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
+  </ul>
+ </li>
+ <li>You'll want to include a leading zero on your display values if the amount is less than 10, so it looks more like a traditional clock/watch.</li>
+ <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to 0 and then immediately update the display.</li>
+ <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="Things_to_keep_in_mind_about_setTimeout()_and_setInterval()">Things to keep in mind about setTimeout() and setInterval()</h2>
+
+<p>There are a few things to keep in mind when working with <code>setTimeout()</code> and <code>setInterval()</code>. Let's review these now.</p>
+
+<h3 id="Recursive_timeouts">Recursive timeouts</h3>
+
+<p>There is another way we can use <code>setTimeout()</code>: We can call it recursively to run the same code repeatedly, instead of using <code>setInterval()</code>.</p>
+
+<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every 100 milliseconds:</p>
+
+<pre class="brush: js">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
+
+<pre class="brush: js">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="How_do_recursive_setTimeout()_and_setInterval()_differ">How do recursive <code>setTimeout()</code> and <code>setInterval()</code> differ?</h4>
+
+<p>The difference between the two versions of the above code is a subtle one.</p>
+
+<ul>
+ <li>Recursive <code>setTimeout()</code> guarantees the same delay between the executions, so for example 100ms in the above case. The code will run and then wait 100 milliseconds before it runs again, so the interval will be the same regardless of how long the code takes to run.</li>
+ <li>The example using <code>setInterval()</code> does things somewhat differently. The interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
+ <li>When using <code>setTimeout()</code> recursively, each iteration can calculate a different delay before running the next iteration. In other words, the value of the second parameter can specify a different time in milliseconds to wait before running the code again.</li>
+</ul>
+
+<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
+
+<h3 id="Immediate_timeouts">Immediate timeouts</h3>
+
+<p>Using 0 as the value for <code>setTimeout()</code> schedules the execution of the specified callback function as soon as possible but only after the main code thread has been run.</p>
+
+<p>For instance, the code below (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) outputs an alert containing "Hello", then an alert containing "World" as soon as you click OK on the first alert.</p>
+
+<pre class="brush: js">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>This can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running — put it on the async event loop, so it will run straight afterwards.</p>
+
+<h3 id="Clearing_with_clearTimeout()_or_clearInterval()">Clearing with clearTimeout() or clearInterval()</h3>
+
+<p><code>clearTimeout()</code> and <code>clearInterval()</code> both use the same list of entries to clear from. Interestingly enough, this means that you can use either method to clear a <code>setTimeout()</code> or <code>setInterval()</code>.</p>
+
+<p>For consistency, you should use <code>clearTimeout()</code> to clear <code>setTimeout()</code> entries and <code>clearInterval()</code> to clear <code>setInterval()</code> entries. This will help to avoid confusion.</p>
+
+<h2 id="requestAnimationFrame()">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a specialized looping function created for running animations efficiently in the browser. It is basically the modern version of <code>setInterval()</code> — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in.</p>
+
+<p>It was created in response to perceived problems with <code>setInterval()</code>, which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc. <a href="http://creativejs.com/resources/requestanimationframe/index.html">Read more about this on CreativeJS</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find examples of using <code>requestAnimationFrame()</code> elsewhere in the course — see for example <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
+</div>
+
+<p>The method takes as an argument a callback to be invoked before the repaint. This is the general pattern you'll see it used in:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>The idea is that you define a function in which your animation is updated (e.g. your sprites are moved, score is updated, data is refreshed, or whatever), then you call it to start the process off. At the end of the function block you call <code>requestAnimationFrame()</code> with the function reference passed as the parameter, and this instructs the browser to call the function again on the next display repaint. This is then run continuously, as we are calling <code>requestAnimationFrame()</code> recursively.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you want to perform some kind of simple constant DOM animation, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> are probably faster as they are calculated directly by the browser's internal code rather than JavaScript. If however you are doing something more complex and involving objects that are not directly accessible inside the DOM (such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> is the better option in most cases.</p>
+</div>
+
+<h3 id="How_fast_does_your_animation_run">How fast does your animation run?</h3>
+
+<p>The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). The higher this number is, the smoother your animation will look, to a point.</p>
+
+<p>Since most screens have a refresh rate of 60Hz, the fastest frame rate you can aim for is 60 frames per second (FPS) when working with web browsers. However, more frames means more processing, which can often cause stuttering and skipping — also known as <em>dropping frames</em>, or <em>jank</em>.</p>
+
+<p>If you have a monitor with a 60Hz refresh rate and you want to achieve 60 FPS you have about 16.7 milliseconds (1000 / 60) to execute your animation code to render each frame. This is a reminder that we need to be mindful of the amount of code that we try to run for each pass through the animation loop.</p>
+
+<p><code>requestAnimationFrame()</code> always tries to get as close to this magic 60 FPS value as possible, although sometimes it isn't possible — if you have a really complex animation and you are running it on a slow computer, your frame rate will be less. <code>requestAnimationFrame()</code> will always do the best it can with what it has available.</p>
+
+<h3 id="How_does_requestAnimationFrame()_differ_from_setInterval()_and_setTimeout()">How does requestAnimationFrame() differ from setInterval() and setTimeout()?</h3>
+
+<p>Let's talk a little bit more about how the <code>requestAnimationFrame()</code> method differs from the other methods we looked at earlier. Looking at our code from above:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Let's now see how we'd do the same thing using <code>setInterval()</code>:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>As we said before, we don't specify a time interval for <code>requestAnimationFrame()</code>; it just runs it as quickly and smoothly as possible in the current conditions. The browser also doesn't waste time running it if the animation is offscreen for some reason, etc.</p>
+
+<p><code>setInterval()</code> on the other hand requires an interval to be specified. We arrived at our final value of 17 via the formula <em>1000 milliseconds / 60Hz</em>, and then rounded it up. Rounding up is a good idea, as if you rounded down the browser might try to run the animation faster than 60fps, and it wouldn't make any difference to the smoothness of the animation anyway. As we said before, 60Hz is the standard refresh rate.</p>
+
+<h3 id="Including_a_timestamp">Including a timestamp</h3>
+
+<p>The actual callback passed to the <code>requestAnimationFrame()</code> function can be given a parameter too — a timestamp value that represents the time since the <code>requestAnimationFrame()</code> started running. This is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. The general pattern you'd use looks something like this:</p>
+
+<pre class="brush: js">let startTime = null;
+
+function draw(timestamp) {
+    if(!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p><code>requestAnimationFrame()</code> is supported in slightly more recent browsers than <code>setInterval()</code>/<code>setTimeout()</code> — most interestingly it is available in Internet Explorer 10 and above. So unless you need to support older versions of IE with your code, there is little reason to not use <code>requestAnimationFrame()</code>.</p>
+
+<h3 id="A_simple_example">A simple example</h3>
+
+<p>Enough with the theory; let's go through and build our own <code>requestAnimationFrame()</code> example. We're going to create a simple "spinner animation", the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more like to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
+</div>
+
+<ol>
+ <li>
+  <p>First of all, grab a basic HTML template <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>.</p>
+ </li>
+ <li>
+  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This is a circular arrow character that will act as our spinner for this simple example.</p>
+ </li>
+ <li>
+  <p>Apply the following CSS to the HTML template in whatever way you prefer. This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
+
+  <pre class="brush: css">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>Insert a {{htmlelement("script")}} element just above the <code>&lt;/body&gt;</code> tag.</p>
+ </li>
+ <li>
+  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here we're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to 0, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>Inside <code>draw()</code>, add the following lines. Here we define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
+
+  <pre class="brush: js">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous line inside <code>draw()</code>, add the following block — this checks to see if the value of <code>rotateCount</code> is above <code>359</code> (e.g. <code>360</code>, a full circle). If so, it sets the value to its modulo of 360 (i.e. the remainder left over when the value is divided by 360) so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of 0-359 degrees than values like "128000 degrees".</p>
+
+  <pre class="brush: js">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>Next, below the previous block add the following line to actually rotate the spinner:
+  <pre class="brush: js">spinner.style.transform = 'rotate(' + rotateCount + 'deg)';</pre>
+ </li>
+ <li>
+  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — we are setting the variable we defined earlier to an active <code>requestAnimation()</code> call that takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate of as close to 60 FPS as possible.</p>
+
+  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
+</div>
+
+<h3 id="Clearing_a_requestAnimationFrame()_call">Clearing a requestAnimationFrame() call</h3>
+
+<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method (note, "cancel" not "clear" as with the "set..." methods), passing it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which we stored in a variable called <code>rAF</code>:</p>
+
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
+
+<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
+
+<p>Some hints:</p>
+
+<ul>
+ <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
+ <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
+</div>
+
+<h3 id="Throttling_a_requestAnimationFrame()_animation">Throttling a requestAnimationFrame() animation</h3>
+
+<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible, but what about when you want to create an old school, 8-bit-style animation?</p>
+
+<p>This was a problem for example in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>In this example we have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation; if we showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. We therefore throttled the rate at which the sprite cycles its frames using the following code:</p>
+
+<pre class="brush: js">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>So we are only cycling a sprite once every 13 animation frames. OK, so it's actually about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
+
+<pre class="brush: js">if(posX &gt; width/2) {
+  newStartPos = -((width/2) + 102);
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>This is the code that works out how to update the position in each animation frame.</p>
+
+<p>The method you use to throttle your animation will depend on your particular code. For example, in our spinner example we could make it appear to move slower by only increasing our <code>rotateCount</code> by one on each frame instead of two.</p>
+
+<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
+
+<p>For our final section of this article, we'll create a 2-player reaction game. Here we have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
+
+<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying "PLAYERS GO!!" — once this happens, the first player to press their control button will win the game.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Let's work through this.</p>
+
+<ol>
+ <li>
+  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> — this contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. We just have to write the JavaScript code.</p>
+ </li>
+ <li>
+  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables we'll need in the rest of the code:</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>In order, these are:</p>
+
+  <ol>
+   <li>A reference to our spinner, so we can animate it.</li>
+   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
+   <li>A rotate count — how much we want to show the spinner rotated on each frame of the animation.</li>
+   <li>A null start time — will be populated with a start time when the spinner starts spinning.</li>
+   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
+   <li>A reference to the Start button.</li>
+   <li>A reference to the results paragraph.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Next, below the previous lines of code, add the following function. This simply takes two numerical inputs and returns a random number between the two. We'll need this to generate a random timeout interval later on.</p>
+
+  <pre class="brush: js">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Next add in the <code>draw()</code> function, which animates the spinner. This is exactly the same as the version seen in the simple spinner example we looked at earlier:</p>
+
+  <pre class="brush: js">  function draw(timestamp) {
+    if(!startTime) {
+     startTime = timestamp;
+    }
+
+    let rotateCount = (timestamp - startTime) / 3;
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+    if(rotateCount &gt; 359) {
+      rotateCount -= 360;
+    }
+
+    rAF = requestAnimationFrame(draw);
+  }</pre>
+ </li>
+ <li>
+  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
+
+  <pre class="brush: js">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>We'll also define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
+
+  <pre class="brush: js">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>OK, enough preparation.  Let's make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so we can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. We also add an event listener to our button to run the <code>start()</code> function when it is clicked.</p>
+
+  <pre class="brush: js">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: You'll see that in this example we are calling <code>setTimeout()</code> without storing the return value (so not <code>let myTimeout = setTimeout(functionName, interval)</code>). This works and is fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier.</p>
+  </div>
+
+  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are then asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which we should define next.</p>
+ </li>
+ <li>
+  <p>So add the following function to your code next:</p>
+
+  <pre class="brush: js">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}</pre>
+
+  <p>Stepping through this:</p>
+
+  <ol>
+   <li>First we cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
+   <li>Next we display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
+   <li>We then attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to our document — when any button is pressed down, the <code>keyHandler()</code> function is run.</li>
+   <li>Inside <code>keyHandler()</code>, we include the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and we can use this to respond to specific key presses with specific actions.</li>
+   <li>We first log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
+   <li>When <code>e.key</code> is "a", we display a message to say that Player 1 won, and when <code>e.key</code> is "l", we display a message to say Player 2 won. Note that this will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key.</li>
+   <li>Regardless of which one of the player control keys was pressed, we remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. We also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as we explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>That's it, you're all done.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them — since these still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Concepts">עקרונות תכנות א-סינכרוני כלליים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Introducing">הצגת asynchronous JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Asynchronous JavaScript: שימוש ב-Intervals ו-Timeouts</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Promises">טיפול בפעולות א-סינכרוניות באמצעות Promises</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Async_await">הפיכת Asynchronous Programming לקל יותר עם async ועם await</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">בחירת האפשרות המתאימה</a></li>
+</ul>
diff --git a/files/he/learn/javascript/building_blocks/build_your_own_function/index.html b/files/he/learn/javascript/building_blocks/build_your_own_function/index.html
new file mode 100644
index 0000000000..47df4e6b3a
--- /dev/null
+++ b/files/he/learn/javascript/building_blocks/build_your_own_function/index.html
@@ -0,0 +1,247 @@
+---
+title: בניית פונקציה משלנו
+slug: Learn/JavaScript/Building_blocks/Build_your_own_function
+translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">לאחר שסיימנו את רוב התיאוריה במאמר הקודם, מאמר זה נועד להעניק לכם ניסיון מעשי. אנחנו ננסה להעניק לכם כלים לבנות את הפונקציה שלכם. במהלך הדרך, אנחנו נסביר כמה פרטים שימושיים בקשר לשימוש בפונקציות.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>., <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — פונקציות - חלקי קוד לשימוש חוזר</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>לספק לכם כלים לבניית פונקציות ולהסביר פרטים שימושיים בהקשר של בניית פונקציות.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="למידה_עצמאית_בניית_פונקציה">למידה עצמאית: בניית פונקציה</h2>
+
+<p>הפונקציה שנראה לבנות תיקרא <code>displayMessage()</code>. היא תציג הודעה על גבי דף אינטרנט, אשר תחליף את הפונקציה המובנית של הדפדפן <a href="/en-US/docs/Web/API/Window/alert">alert()</a>. ראינו משהו דומה לפני כן,על מנת לרענן את הזכרון, הדפיסו את הקוד הבא בקונסולה</p>
+
+<pre class="brush: js notranslate">alert('This is a message');</pre>
+
+<p>הפונקציה <code>alert</code> מקבל פרמטר אחד כארגומנט - המחרוזת ששתוצג על גבי תיבת ההודעה. נא לשנות המחרוזת על מנת לשנות את ההודעהf</p>
+
+<p>הפונקציה <code>alert</code> היא מוגבלת: אנחנו יכולים לשנות את הטקסט, אבל אנחנו לא ממש יכולים לשנות בקלות את כל היתר כמו צבעים, אייקון, או כל דבר אחר. אנו נבנבה פונקציה שתאפשר לנו את הדברים הללו.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong> דוגמא זו אמורה לעבוד בכל הדפדפדנים המודרניים, אבל העיצוב עלול להיראות קצת מוזר בדפדפנים ישנים. אנחנו ממליצים ללכם להתשמשמ בדפדפן מודרני כגון פיירפוקס, כרום או אופרה לשם תרגול זה.</p>
+</div>
+
+<h2 id="הפונקציה_הבסיסית">הפונקציה הבסיסית</h2>
+
+<p>על מנת להתחיל, בואו נבנה פונקציה בסיסית</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: הכללים בנושא מתן שמות לפונקציה הם דומים לכללים בנושא <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">מתן שמות למשתנים</a>. יחד עם זאת, בפונקציות, לאחר השם יבואו סוגריים רגילות () ואילו במשתנים לא.</p>
+</div>
+
+<ol>
+ <li>התחילו בכך שתיצרו עותק מקומי של הקובץ <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a>. בקובץ אתם תיראו שה-body כולל כפתור אחד. בנוסף הוספנו גם כמה כללי css פשוטים על מנת לעצב את תיבת ההודעה שלנו וכן אלממנט {{htmlelement("script")}} ריקה שבה נוסיף את קוד ה-JavaScriipt שלנו.</li>
+ <li>לאחר מכן, הוסיפו הקוד הבא בתוך האלמנט <code>&lt;script&gt;</code>:
+  <pre class="brush: js notranslate">function displayMessage() {
+
+}</pre>
+  אנחנו מתחילים עם המילה השמורה <code>function</code>, אשר משמעותה היא שאנחנו מגדירים פונקציה. לאחר מכן, אנחנו רושמים את שם הפונקציה שנרצה לתת לה, ולאחר מכן סוגריים רגילות () ולאחריהן סוגריים מסולסלות {....}. הפרמטרים שנרצה לתת לפונקציה שלנו - הארגומנטים, ייכנסו בתוך הסוגריים הרגילות (ובמידה שיש לנו כמה ארגומנטים, נפריד ביניהם באמצעות פסיק , ורווח.) את הקוד שנרצה שהפונקציה תריץ בכל פעם שנקרא לה אנחנו נשים בתוך הסוגריים המסולסות {....}.</li>
+ <li>לבסוף, הוסיפו את התקוד הבא בתוך הסוגריים המסולסלות
+  <pre class="brush: js notranslate">var html = document.querySelector('html');
+
+var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+ </li>
+</ol>
+
+<p>נעבור על הקוד שהוספנו שורה אחר שורה</p>
+
+<p>השורה הראשונה משתמשת בפונקציה של DOM API הנקראת {{domxref("document.querySelector()")}}, על מנת לבחור אלמנט מסוג {{htmlelement("html")}} ולאחסן הפנייה אליו בתוך משתנה שנקרא <code>html</code>, כדי שנוכל לבצע איתו דברים מאוחר יותר:</p>
+
+<pre class="brush: js notranslate">var html = document.querySelector('html');</pre>
+
+<p>החלק הבא בקוד שלנו משתמש בפונקציה נוספת של DOM API הנקראת {{domxref("document.createElement()")}} על מנת ליצור אלמנט מסוג {{htmlelement("div")}} ואנו מאחסנים הפניה אליו בתוך המשתנה שנקרא <code>panel</code>. האלמנט הזה יהיה הקונטיינר החיצוני של תיבת ההודעה שלנו.</p>
+
+<p>לאחר מכן אנחנו משתמשים בפונקציה נוספת של DOM API שנקראת <code>class</code> על מנת לקבוע {{domxref("Element.setAttribute()")}} למשתנה <code>msgBox</code> שלנו עם הערך <code>msgBox</code>. זה אמור להקל עלינו לעצב את האלמנט - אם תסתכלו ב-CSS שבדךף, אתם תראו שאנחנו משתשמים בסלקטור של CSS <code>.msgBox</code> על מנת לעצב את תיבת ההודעה והתוכן שלה.</p>
+
+<p>לבסוף - אנחנו קוראים לפונקציית DOM נוספת שנקראת {{domxref("Node.appendChild()")}} על גבי המשתנה <code>html</code> , אשר משרשרת את האלמנט שהיא מקבלת כארגומנט לאלמנט שהיא הופעלה עליו. כאן אנחנו מציינים שאנחנו רוצים שהאלמנט <code>&lt;div&gt;</code> יהיה אלמנט ילד של האלמנט <code>&lt;html&gt;</code>. אחנו צריכים להוסיף פונקציה זו בכל פעם שאנחנו משתמשים בפונקציה {{domxref("document.createElement()")}}, מכיוון שהאלמנט שיצרנו לא יופיע בעצמו ולא יתחבר בעצמו לאלמנט אחר - אנחנו צריכים לציין איפה אנחנו רוצים לשים אותו ולמי הוא יהיה קשור.</p>
+
+<pre class="brush: js notranslate">var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);</pre>
+
+<p>ב-2 החלקים הבאים אנחנו עושים שימוש באותן פונקציות <code>createElement()</code> ן- <code>appendChild()</code> שהשתמשנו בהן על מנת ליצור שני אלמנטים חדשים: {{htmlelement("p")}} ו- {{htmlelement("button")}} — ומכניסים אותם בתוך הדף כאלמנטים ילדים של <code>&lt;div&gt;</code> panel. לאחר מכן אנחנו משתמשים בפרופ׳ {{domxref("Node.textContent")}} - אשר מייצג בעצם את תוכן הטקסט של אלמנט - על מנת להכניס הודעה בתוך הפסקה וכן אנחנו מוסיפים את התו 'x' בתוך הכפתור. הכפתור הזה צריך להיות לחוץ/מופעל כשהמשתמש רוצה לסגור את תיבת ההודעה.</p>
+
+<pre class="brush: js notranslate">var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);</pre>
+
+<p>לבסוף, אנחנו משתמשים במאזין אירוע ומטפל אירוע - {{domxref("GlobalEventHandlers.onclick")}} - על מנת להוסיף האזנה להתרחשות אירוע של לחיצה (במקרה הזה לחיצה על ) closeBtn וטיפול באותו אירוע על ידי הפונקציה האנונימית המכילה קוד שמוחק את כל ה-panel מהדף - כלומר מוחק את תיבת ההודעה.</p>
+
+<p>בקצרה, מאזין האירוע <code>onclick</code> הוא פרופ׳ שזמין עבור כפתור (ובעצם זמין עבור כל אלמנט בדף) שיכול להיות מוגדר לפונקציה שתבצע קוד מסויים כאשר הכפתור/האלמנט נלחץ. אנחנו נלמד על כך לעומק במאמר שלנו בנושא אירועים. שימו לב שוב שמטפל האירוע של מאזין האירוע <code>onclick</code> שווה לפונקציה אנונימית, אשר מכילה קוד שירוץ כאשר הכפתור נלחץ. שורת הקוד שבתוך הפונקציה האנונימית משתמש בפונקציה של ה- DOM API בשם {{domxref("Node.removeChild()")}} על מנת להסיר אלמנט בן של אלמנט - במקרה זה של אלמנט <code>&lt;div&gt;</code>.</p>
+
+<pre class="brush: js notranslate">closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+
+<p>בעיקרון - כל הקוד הזה פשוט יוצר בלוק של HTML שנראה כך ומכניס את זה לתוך הדף:</p>
+
+<pre class="brush: html notranslate">&lt;div class="msgBox"&gt;
+  &lt;p&gt;This is a message box&lt;/p&gt;
+  &lt;button&gt;x&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>זה היה הרבה קוד לעבור עליו - אל תדאגו אם אתם לא זוכרים במדויק איך הוא עובד כרגע. הרעיון המרכזי שאנחנו רוצים לשים עליו דגש כאן הוא הפונקציה, המבנה שלה והשימוש שלה.</p>
+
+<h2 id="קריאה_לפונקציההפעלת_הפונקציה">קריאה לפונקציה/הפעלת הפונקציה</h2>
+
+<p>כעת יש לנו את הגדרת הפונקציה בתוך האלמנט 555555, אבל היא לא תבצע כלום אם לא נקרא לה.</p>
+
+<ol>
+ <li>נסו לכלול את הקוד הבא מחת לפונקציה על מנת לקרוא לה:
+  <pre class="brush: js notranslate">displayMessage();</pre>
+  שורה זו בעצם קוראת פונקציה (Invoking the function) וגורמת לה לרוץ מיד. כאשר תשמרו את הקוד ותעלו מחדש את הדף בדפדפן, אתם תראו שתיבת ההודעה הופיע מיד, פעם אחת. אחרי הכל, קראנו לפונקציה רק פעם אחת.</li>
+ <li>
+  <p>כעת, פתחו את הקונסולה והדפיסו את השורה למעלה שוב, ואתם תראו את ההודעה שוב. כלומר בנינו פונקציה שאנחנו יכולים להשתמש בה שוב ושוב.</p>
+
+  <p>רוב הסיכויים שנרצה שתיבת ההודעה תופיע כתגובה לאירועים מסויימים של המערכת או של המשתמש. ביישומים אמיתיים, תיבת הודעה שכזו תיקרא בתגובה למידע חדש שזמין או לשגיאה שנוצרה, או כאשר המשתמש מוחק את הפרופיל שלו (״האם אתה בטוח רוצה למחוק את הפרופיל? וכד׳).</p>
+
+  <p>בתרגול זה, אנחנו נגרום לתיבת ההודעה להופיע כאשר המשתמש לוחץ על כפתור.</p>
+ </li>
+ <li>מחקו את השורה שהוספתם.</li>
+ <li>כעת, אנחנו נבחר את הכפתור ונאחסן הפניה אליו בתוך משתנה. הוסיפו את הקוד הבא לקוד שלהם, מעל הגדרת הפונקציה :
+  <pre class="brush: js notranslate">var btn = document.querySelector('button');</pre>
+ </li>
+ <li>לבסו, הוסיפו את הקוד הבא, מתחת לקוד שהוספתם בסעיף הקודם:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+  בדרך דומה ל<code> ...closeBtn.onclick</code> בתוך הפונקציה, כאן אנחנו קוראים קוד מסויים בתגובה כך שהכפתור נלחץ. אבל במקרה הזה במקום לקרוא לפונקציה אנונימית המכילה את אותו קוד, אנחנו קוראים לפונקציה שלנו בשמה באופן מפורש.</li>
+ <li>נסו לשמור ולרענן את הדף - אתם אמורים לראות את תיבת ההודעה כאשר הכפתור נלחץ.</li>
+</ol>
+
+<p>אתם בטח תוהים מדוע לא כללנו סוגריים () אחרי שם הפונקציה. הסיבה היא שאנחנו לא רוצים לקרוא לפונקציה ישר - אלא רק אחרי שהכפתור נלחץ. אם תשנו את השורה הבא כך:</p>
+
+<pre class="brush: js notranslate">btn.onclick = displayMessage();</pre>
+
+<p>ותרעננו את הדף, אתם תיראו שהתיבת ההודעה הופיע מבלי שלחצנו על הכפתור. הסוגריים () בהקשר זה לפעמים נקראים "function invocation operator". אנחנו משתמשים בהם כאשר אנחנו רוצים להריץ את הפונקציה באופן מיידי בתוך הסקופ הנוכחי. באותו דרך, הקוד שבתוך הפונקציה האנונימית לא ירוץ ישר, שכן הוא נמצא בתוך הסקופ של הפונקציה בלבד - שכאמור תופעל רק כאשר כפתור יילחץ.</p>
+
+<p>אם ניסיתם את התרגול הקודם של הוספת (), אנא וודאו שמחקתם אותם לפני שאתם ממשיכים</p>
+
+<h2 id="שדרוג_הפונקציה_שלנו_באמצעות_פרמטריםארגומנטים">שדרוג הפונקציה שלנו באמצעות פרמטרים/ארגומנטים</h2>
+
+<p>כרגע, הפונקציה שלנו לא ממש שימושית - אנחנו לא רוצים סתם להציג הודעה זהה בכל פעם. ננסה לשדרג אוהת על ידי כך שנוסיף מספר פרמטרים, אשר יאפשרו לנו לקרוא לה, אך עם אפשרויות שונות בכל קריאה.</p>
+
+<ol>
+ <li>תחילה, עדכנו את השורה הראשונה של הפונקציה:
+  <pre class="brush: js notranslate">function displayMessage() {</pre>
+
+  <div>לקוד הבא:</div>
+
+  <pre class="brush: js notranslate">function displayMessage(msgText, msgType) {</pre>
+  כעת, כאשר אנחנו קוראים לפונקציה, אנחנו מספקים לה שני ערכים של משתנים בתוך הסוגריים () על מנת לציין את תוכן ההודעה שתוצג ואת סוג ההודעה.</li>
+ <li>על מנת לעשות שימוש בפרמטר הראשון, עדכנו את הקוד שבתוך הפונקציה :
+  <pre class="brush: js notranslate">msg.textContent = 'This is a message box';</pre>
+
+  <div>לקוד הבא</div>
+
+  <pre class="brush: js notranslate">msg.textContent = msgText;</pre>
+ </li>
+ <li>לבסוף, אנחנו נרצה לעדכן כעת את הפונקציה כך שתכלול הודעה מעודכנת . שנה את השורה הבאה:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+
+  <div>לקוד הבא :</div>
+
+  <pre class="brush: js notranslate">btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};</pre>
+  If we want to specify parameters inside parentheses for the function we are calling, then we can't call it directly — we need to put it inside an anonymous function so that it isn't in the immediate scope and therefore isn't called immediately. Now it will not be called until the button is clicked.</li>
+ <li>עכשיו טען מחדש ונסה שוב את הקוד ותראה שהוא עדיין עובד כמו מקודם ,רק שעכשיו גם התווסף אפשרות לשנות את ההודעה שבתוך הפרמטר כדי להציג הודעות שונות בתיבה! </li>
+</ol>
+
+<h3 id="פרמטר_מורכב_יותר">פרמטר מורכב יותר</h3>
+
+<p>הלאה לפרמטר הבא. זו תכלול עבודה מעט יותר - אנו מתכוונים להגדיר אותה כך שלפי הפרמטר msgType, הפונקציה תציג אייקון אחר וצבע רקע שונה.</p>
+
+<ol>
+ <li>First of all, download the icons needed for this exercise (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> and <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) from GitHub. Save them in a new folder called <code>icons</code> in the same location as your HTML file.
+
+  <div class="note"><strong>Note</strong>: The warning and chat icons were originally found on <a href="https://www.iconfinder.com/">iconfinder.com</a>, and designed by <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a> — Thanks! (The actual icon pages were since moved or removed.)</div>
+ </li>
+ <li>Next, find the CSS inside your HTML file. We'll make a few changes to make way for the icons. First, update the <code>.msgBox</code> width from:
+  <pre class="brush: css notranslate">width: 200px;</pre>
+
+  <div>ל</div>
+
+  <pre class="brush: css notranslate">width: 242px;</pre>
+ </li>
+ <li>Next, add the following lines inside the <code>.msgBox p { ... }</code> rule:
+  <pre class="brush: css notranslate">padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;</pre>
+ </li>
+ <li>Now we need to add code to our <code>displayMessage()</code> function to handle displaying the icons. Add the following block just above the closing curly brace (<code>}</code>) of your function:
+  <pre class="brush: js notranslate">if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}</pre>
+  Here, if the <code>msgType</code> parameter is set as <code>'warning'</code>, the warning icon is displayed and the panel's background color is set to red. If it is set to <code>'chat'</code>, the chat icon is displayed and the panel's background color is set to aqua blue. If the <code>msgType</code> parameter is not set at all (or to something different), then the <code>else { ... }</code> part of the code comes into play, and the paragraph is simply given default padding and no icon, with no background panel color set either. This provides a default state if no <code>msgType</code> parameter is provided, meaning that it is an optional parameter!</li>
+ <li>Let's test out our updated function, try updating the <code>displayMessage()</code> call from this:
+  <pre class="brush: js notranslate">displayMessage('Woo, this is a different message!');</pre>
+
+  <div>to one of these:</div>
+
+  <pre class="brush: js notranslate">displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');</pre>
+  You can see how useful our (now not so) little function is becoming.</li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם אתם נתקלים בבעיות או הדוגמא אינה עובדת לכם, אנא בדקו את הקוד שלכם אל מול <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">הקוד הסופי שלנו ב- GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">או בדף האינטרנט</a> או שאלו אותנו</p>
+</div>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>במאמר זה ניסינו להסביר לכם את התהליך של בניית פונקציה בעצמנו, כאשר עם עט עבודה נוספת, יכול להפוך לפרוייקט אמיתי. במאמר הבא אנחנו נסיים לעבור על נושא פונקציות ונסביר עקרון חשוב נוסף בנושא זה - ערכי החזרה — return values.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li>
+</ul>
diff --git a/files/he/learn/javascript/building_blocks/events/index.html b/files/he/learn/javascript/building_blocks/events/index.html
new file mode 100644
index 0000000000..9fc4363939
--- /dev/null
+++ b/files/he/learn/javascript/building_blocks/events/index.html
@@ -0,0 +1,588 @@
+---
+title: היכרות ראשונית עם אירועים - Events
+slug: Learn/JavaScript/Building_blocks/Events
+translation_of: Learn/JavaScript/Building_blocks/Events
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">אירועים (Evants) אלו פעולות או התרחשויות אשר קורות במערכת שאנחנו מתכנתים בה, והמערכת אומרת לנו  בדרך מסויימת על ההתרחשות שלהם, כך שאנחנו יכולים להגיב להתרחשות של האירוע המסויים בדרך מסויימת שנרצה. לדוגמא אם משתמש לחץ על כפתור באתר, אולי נרצה בתגובה לטפל באירוע הלחיצה הזה על ידי הצגת הודעה כלשהי. במאמר זה אנחנו נדון בעקרונות החשובים של events ונסתכל כיצד הם עובדים בדפדפדנים. אנחנו לא נרחיב יותר מדי, אלא רק מה שתצטרכו לדעת בשלב זה.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין את התיאוריה הבסיסית של אירועים וכיצד הם עובדים בדפדפנים וכיצד אירועים יכולים להיות שונים בסביבות פיתוח שונות.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="מה_הם_אירועים">מה הם אירועים? </h2>
+
+<p>כפי שרשמנו למעלה, אירועים, <strong>events,</strong> הם פעולות או התרחשויות שקורות במערכת שאנחחנו מתכנתים עליה - המערכת שולחת סימן מסויים שהאירוע מתרחש וגם מספקת לנו מכניזם מסויים שעל פיו כלומר, קוד מסויים ירוץ בתגובה להתרחשות אירוע מסויים. כמו בדוגמא עם לחיצת הכפתור שפירטנו למעלה. כאשר האירוע של ״לחיצת כפתור״ התרחש, הדפדפן שלח לנו סימן מסויים שהתרחש אירוע וטיפלנו בו באמצעות הקפצת חלונית.</p>
+
+<p>במקרה שלנו, אירועים מתרחשים בתוך חלון הדפדפן, ונוטים להיות מחוברים לפריט מסויים שבו הם התרחשו או עליו הם קרו - זה יכול להית אלמנט אחד, מספר אלמנטים, אירוע של טעינה דף HTML בלשונית מסויימת או טעינתו של חלון הדפדפן כולו.</p>
+
+<p>יש הרבה סוגים של אירועים שיכולים להתרחש. הנה דוגמא קטנה שלהם:</p>
+
+<ul>
+ <li>המשתמש לחץ על אלמנט מסויים או עבר עם העכבר על אלמנט מסויים.</li>
+ <li>המשתמש לחץ על כפתור במקלדת.</li>
+ <li>המשתמש הגדיל או הקטין את חלון הדפדפן.</li>
+ <li>דף אינטרנט סיים להיטען במלואו.</li>
+ <li>טופס נשלח.</li>
+ <li>וידאו החל להתנגן או הושהה או סיים לנגן.</li>
+ <li>התרחשה שגיאה.</li>
+</ul>
+
+<p>תוכלו לראות בדף MDN בנושא <a href="/en-US/docs/Web/Events">Event reference</a> שיש <strong>לא מעט</strong> סוגי אירועים שניתן לטפל בהם - כלומר להגיב להתרחשותם.</p>
+
+<p>לכל אירוע זמין יש ״<strong>מטפל אירוע</strong>״ - <strong>event handler</strong>, שזה בעצם בלוק של קוד שבדרך כלל זו פונקציה שאנחנו נגדיר בעצמנו ושירוצו כאשר האירוע החל להתרחש. שימו לב שלפעמים <strong>event handlers</strong> נקראים <strong>event listeners</strong> - ״<strong>מאזיני אירוע</strong>״ בעיקרון, הם כמעט אותו דבר מבחינתנו כרגע, אבל יש הבדלים ביניהם, הם עובדים יחד: מאזין אירוע - <strong>event listeners</strong> - מאזין להתרחשות האירוע, ואילו מטפל האירוע - <strong>event handlers</strong>, מטפל באותו אירוע שהתרחש - (הקוד שמורץ בתגובה להתרחשות של אותו אירוע).</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: חשוב לדעת כי אירועי web אינם חלק מהבסיס של JavaScript - הם מוגדרים כחלק מה-API של JavaScript המובנים בתוך הדפדפן.</p>
+</div>
+
+<h3 id="דוגמא">דוגמא</h3>
+
+<p>נסתכל על דוגמא פשוטה על מנת להסביר את הנושא. ראינו כבר אירועים ו-event handlers בהרבה מהדוגמאות במהלך הקורס אבל בואו נרענן את הזיכרון.</p>
+
+<p>הסתכלו בדוגמא הבאה, יש לנו אלמנט {{htmlelement("button")}} אחד, אשר כאשר הוא נלחץ, הוא שנה את הצבע של הרקע לצבע אקראי:</p>
+
+<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">button { margin: 10px };</pre>
+</div>
+
+<p>קוד ה-JavaScript שלנו נראה כך:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random()*(number+1));
+}
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>בדוגמא למעלה, אחסנו הפניה לאלמנט <code>&lt;button&gt;</code> בתוך משתנה שנקרא <code>btn</code>, באמצעות פונקציית {{domxref("Document.querySelector()")}}. בנוסף ,הגדרנו פונקציה שמחזירה לנו מספר אקראי. החלק השלישי של הקוד הוא מטפל האירוע - event handler. המשתנה <code>btn</code> מצביע על אלמנט  <code>&lt;button&gt;</code> ולסוג הזה של האובייקט יש מספר מסוים של אירועים שיכולים להתרחש עליו, ולכן יש מספר מטפלי אירוע זמינים עבורו.</p>
+
+<p>בדוגמא זו אנחנו מקשיבים בעצם לאירוע/התרחשות של לחיצת עכבר באמצעות השמת ערך לתכונה (property) של event handler השווה לפונקציה אנונימית. פונקציה אנונימית זו מכילה קוד שמייצר צבע רנדומלי בפורמט rgb וקובעת את ה-<code>background-color</code> לצבע זה.</p>
+
+<p>הקוד שבפונקציה האנונימית ירוץ בכל פעם שאירוע הלחיצה על האלמנט <code>&lt;button&gt;</code> יתרחש, כלומר בכל פעם שהמשתמש לחץ על האלמנט הזה.</p>
+
+<p>התוצאה של הדוגמא תהא כך:</p>
+
+<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="זה_לא_רק_בדפי_האינטרנט">זה לא רק בדפי האינטרנט</h3>
+
+<p>דבר נוסף שנרצה להזכיר בנקודה זו הוא שאירועים הם לא מיוחדים ל-JavaScript - רוב שפות התכנות מכילות מודל כלשהו של אירועים, והדרך שבה מודל זה עובד בהם, יהיה לרוב שונה מהדרך שבה מודל זה עובד ב-JavaScript. האמת, מודל האירועים ב-JavaScript עבור דפי אינטרנט, שונה ממודל האירועים עבור JavaScript כאשר היא בסביבות אחרות.</p>
+
+<p>לדוגמא, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> היא סביבה המאפשרת לנו הרצה ושימוש ב-JavaScript בצד השרת. <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">מודל האירועים של Node.js </a>מתבסס על מאזינים (listeners) אשר מאזינים לאירועים ועל פולטים (emitters) אשר פולטים אירועים בתדירות מסויימת - זה לא נשמע שונה, אבל הקוד הוא שונה, ושם מתבצע שימוש בפונקציות כמו <code>()on</code> על מנת לרשום מאזין אירוע ו-<code>()once</code> על מנת לרשום מאזין אירוע שיאזין באופן חד פעמי ויתבטל לאחר שהורץ פעם אחת. דוגמא לכך ניתן לראות ב-<a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a>.</p>
+
+<p>דוגמא נוספת למודל אירועים שונים אנחנו יכולים לראות כאשר משתמשים ב-JavaScript על מנת לבנות תוספים לדפדפנים (מעין שיפורים לדפדפנים) - באמצעות טכנולוגיה שנקראת <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. מודל האירועים שם הוא דומה למודל האירועים של ה-Web, אבל שונה מעט - מאזיני האירועים הם camel-cased - כלומר, <code>on<strong>M</strong>essage</code> ולא <code>on<strong>m</strong>essage</code>, והם צריכים להיות ביחד עם פונקצית <code>addListener</code>. לדוגמאות ראו <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage page</a>.</p>
+
+<p>אינכם צריכים להבין עכשיו שום דבר על הסביבות הללו, רק רצינו להסביר לכם שאירועים ומודל האירועים יכול להיות בסביבות פיתוח שונות.</p>
+
+<h2 id="דרכים_לשימוש_ב-web_events">דרכים לשימוש ב-web events</h2>
+
+<p>יש מספר דרכים שונות שבהם אנחנו יכולים להוסיף מאזין אירוע -event listener לדפי הרשת על מנת שהוא יריץ את ה-event handler כאשר יתרחש האירוע הרלוונטי (event registration). בחלק זה, אנחנו נסקור את הדרכים השונות ונדון באילו מהן אנו צריכים להשתמש.</p>
+
+<h3 id="דרך_I_הוספת_תכונה_של_מטפל_אירוע_-_Event_handler_properties">דרך I: הוספת תכונה של מטפל אירוע - Event handler properties</h3>
+
+<p>דרך אחת היא בעצם לתת לאלמנט מסויים תכונה של מאזין אירוע והערך שלה יהיה מטפל אירוע. אנו נקרא לה ״<strong>תכונת מטפל אירוע</strong>״. נתקלנו בזה במהלך הקורס לא מעט. אם נחזור לדוגמא למעלה:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>התכונה <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> היא תכונת מטפל האירוע (מאזין האירוע) הרלוונטית כרגע לדוגמא זו. היא תכונה בדיוק כמו שיש ל-<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">btn</span></font> תכונות נוספות שזמינו תעבורו כמו <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, או <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>, אבל היא תכונה מסוג מיוחד - כאשר אנחנו משימים בה ערך ששווה לקוד מסויים, הקוד הזה ירוץ בכל פעם שהאירוע יתרחש על הכפתור (או על האלמנט אשר נתנו לו את התכונה הזו).</p>
+
+<p>אנחנו גם יכולים לתת למטפל אירוע שכזה שיהיה שווה לשם של פונקציה מסויימת, כמו שראינו במאמר <a href="he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a>. הקוד הבא יעבוד בצורה מצויינת:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;</pre>
+
+<p>יש הרבה סוגים של תכונות מטפלות אירוע שזמינות. ננסה כמה מהם:</p>
+
+<p>ראשית, שמרו לכם עותק מקומי של <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, ופיתחו אותו בדפדפן. זהו עותק של הדוגמא הפשוטה של בחירת הצבע שראינו בעבר. עכשיו שנו את ה- <code>btn.onclick</code> לערכים הבאים, כל אחד בתור, וראו מה קורה :</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> ו- <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — הצבע ישתנה כאשר הפוקוס יהיה על הכפתור וכאשר הוא יוצא ממנו - באמצעות מקש <kbd>tab</kbd>. אלו משמשים אותנו להצגת מידע כיצד למלא שדות בטופס שלנו או על מנת להציג הודעת שגיאה כאשר הכניסו בשדה ערך שגוי.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — כאן הצבע ישתנה רק כאשר נלחץ עליו פעמיים - דאבל קליק.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — כאן הצבע ישתנה כאשר המשתמש לחץ על כפתור במקלדת אשר יכול להפיק תו ושחרר אותו. <code>keypress</code> הוסר מהסטנדרטים המקובלים ולא מומלץ להשתמש באירוע מסוג זה מכיוון שהתמיכה בו נעלמת. <code>keydown</code> and <code>keyup</code> לא מדובר באירוע של לחיצה על לחצני החצים - אלא מדובר באירוע שמתרחש ברגע שהכפתור נלחץ ואירוע אחר שמתרחש ברגע שהפסיק ללחוץ על הכפתור. שימו לב שזה לא עובד אם נרשום את המטפל אירוע הזה על הכפתור צמו - אנחנו צריכים לרשום אותו על אובייקט <a href="/en-US/docs/Web/API/Window">window</a> שמייצג את החלון הדפדפן כולו. </li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> ו- <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — כאן הצבע ישתנה כאשר סמן העכבר עובר מעל הכפתור וכאשר הוא יוצא ממנו, בהתאמה.</li>
+</ul>
+
+<p>ישנם אירועים שהם מאד כלליים והם זמינים כמעט בכל מקום או עבור כל אלמנט - לדוגמא - אפשר להאזין לאירוע <code>onclick</code> כמעט על כל אלמנט, בעוד יש כאלו שהם יותר ספציפיים ושימושיים בסיטואציות מסויימת. לדוגמא, הגיוני לנו ש-<a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> יהיה זמין רק לאלמנטים מסוג מסויים כמו {{htmlelement("video")}}.</p>
+
+<h3 id="דרך_II_לידיעה_בלבד_-_לא_להשתמש_בהם_-_Inline_event_handlers">דרך II: לידיעה בלבד - לא להשתמש בהם - Inline event handlers</h3>
+
+<p>יכול להיות שראיתם קוד שנראה כך:</p>
+
+<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
+</pre>
+
+<pre class="brush: js">function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אתם יכולים לראות את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">קוד המקור</a> לדוגמא זו ב- GitHub או <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">בדף אינטרנט</a>.</p>
+</div>
+
+<p>בעבר, הדרך לרשום (register) מטפלי אירוע הייתה באמצעות <strong>event handler HTML attributes</strong> הידועים גם כ- <strong>inline event handlers,</strong> כמו שרשום בדוגמא למעלה. הערך של אותו attribute הוא ממש קוד JavaScript שאנחנו רוצים שירוץ כאשר האירוע מתרחש. הדוגמא למעלה מפעילה פונקציה שמוגדרת בתוך האלמנט {{htmlelement("script")}} אבל באותה הדרך אנחנו יכולים להכניס פונקציה שלמה לתוך אותו attribute:</p>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+
+<p>אל תשתמשו בדרך שכזו על מנת לטפל באירוע, זה נחשב כ- bad practice (פרקטיקה שאינה מקובלת בתעשייה). זה אולי נשמע יותר פשוט, אבל מהר מאוד זה הופך למשהו שלא ניתן לעקוב אחריו ולא יעיל.</p>
+
+<p>בנוסף, זה לא רעיון טוב לערבב בין HTML לבין JavaScript מאחר שזה נהיה קשה לעיבוד - היצמדו לכך שכל ה-JavaScript נמצא במקום אחד.</p>
+
+<p>אפילו כאשר מדובר בקובץ אחד, inline event handlers הם לא רעיון טוב. כאשר יש כפתור אחד זה עוד סביר, אבל מה אם היו לנו 100 כפתורים? היינו צריכים להוסיף 100 attributes לתוך הקובץ. מהר מאוד זה הופך לסיוט מבחינת תחזוקה של הקוד. עם JavaScript, אנחנו יכולים בקלות להוסיף מטפל אירוע לכל הכפתורים, לא משנה כמה יש כאלו, באמצעות קוד כזה:</p>
+
+<pre class="brush: js">var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: הפרדה בין הקוד שלנו לבין התוכן גם הופך את האתר שלנו ליותר ידידותי למנועי החיפוש.</p>
+</div>
+
+<h3 id="דרך_addEventListener()_III_ו-_()removeEventListener">דרך addEventListener() : III  ו- ()removeEventListener</h3>
+
+<p>הסוג החדש ביותר של מנגנון אירועים הוגדר ב- <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> של ארגון W3C. מסמך זה הגדיר דרך טובה יותר לנהל אירועים, בין היתר באמצעות אובייקט מיוחד בשם  <code>EvantTarget</code> אשר נוצר בדפדפן כאשר אירוע מתרחש. לאובייקט זה יש שלוש מתודות ואחת מהן היא <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code>. מתודה זו דומה לדרך הראשונה של event handler properties, אבל הסינטקס שונה. אנחנו יכולים לכתוב את הדוגמא שלנו עם הצבעים האקראיים בצורה הזו:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>:תוכלו למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">קוד המקור </a> של דוגמא זו ב- GitHub או ראו כ- <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">דף אינטרנט</a>).</p>
+</div>
+
+<p>בתוך מתודת <code>()addEventListener</code>, אנחנו מציינים שני פרמטרים - אחד בעבור אותו האירוע, אותו ה-event אשר אנחנו רוצים שיאזינו והפרמטר השני זה פונקציה של הקוד שאנחנו רוצים שירוץ כמטפל באותו אירוע. שימו לב שזה בסדר גמור לשים את כל הקוד שיטפל באירוע כפונקציה אנונימית, בשונה מהדוגמא למעלה:</p>
+
+<pre class="brush: js">btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});</pre>
+
+<p>לשיטה הזו יש יתרונות ברורים על השיטות הישנות שדנו בהם למעלה. ראשית, יש מתודה נוספת בשם <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">()removeEventListener</a></code> אשר מאפשרת לנו להסיר מאזיני אירוע. לצורך העניין, הקוד הבא יסיר את מאזין האירוע שקבענו למעלה:</p>
+
+<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>
+
+<p>זה אמנם לא כזה משמעותי עבור תוכניות קטנות או פשוטות, אבל בעבור תוכניות גדולות או מורכבות, זה יכול להגביר את היעילות ומאפשר לנקות מטפלי אירוע שאינם בשימוש עוד. בנוסף, זה מאפשר לנו שלאותו אלמנט - לאותו הכפתור - יהיו מספר מטפלי אירועים אשר יפעלו בצורה אחרת באירועים שונים - כל מה שאנחנו צריכים לעשות זה להוסיף/להסיר מטפלי אירוע בהתאם.</p>
+
+<p>בנוסף, אנחנו גם יכולים לרשום מספר מטפלי אירוע לאותו אירוע - הקוד הבא לדוגמא לא יכול להחיל שני מטפלי אירוע:</p>
+
+<pre class="brush: js">myElement.onclick = functionA;
+myElement.onclick = functionB;</pre>
+
+<p>זאת מכיוון שהשורה השנייה דורסת את הערך שנקבע ל-<code>onclick</code> של השורה הראשנה. על מנת להוסיף מטפל אירוע נוסף מבלי לדרוס את מטפל את האירוע הקיים, אנחנו יכולים לעשות משהו כזה:</p>
+
+<pre class="brush: js">myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);</pre>
+
+<p>במקרה זה, שתי הפונקציות ירוצו כאשר ילחצו על האלמנט.</p>
+
+<p>כמו כן, יש מספר אפשרויות משמעותיות ותכונות זמינות עבור מנגנון ירועים בדרך הזו. אנחנו לא נרחיב עליהם, אך אם תרצו להרחיב את ידיעתכם בנושא, היכנסו לדפי ההסבר של MDN בנושא <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code> ובנושא <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">()removeEventListener</a></code>.</p>
+
+<h3 id="באיזה_מנגנון_אירועים_להשתמש">באיזה מנגנון אירועים להשתמש?</h3>
+
+<p>מתוך שלושת המנגנונים הללו, בוודאות <u><strong>אל</strong></u> תשתמשו במנגנון HTML event handler attributes - זה מנגנון ישן, שלא נמצא כבר בשימוש ונחשב כ- bad practice להשתמש בו.</p>
+
+<p>השניים האחרים הם יחסית די חלופיים כאשר מדובר בתוכנית פשוטה או כאשר מדובר בשימוש פשוט שנרצה לעשות באירועים:</p>
+
+<ul>
+ <li>ל- <strong>Event handler properties</strong> יש פחות אפשרויות ופחות כוח אך תמיכת הדפדפנים רחבה יותר (כולל Internet Explorer 8).</li>
+ <li>DOM Level 2 Events - כגון <code>addEventListener() ו-()removeEventListener</code> ועוד, מאפשרים לנו הרבה יותר אפשרויות, אבל יכולים להיות מורכבים ובעלי פחות תמיכת דפדפנים (נתמך החל מגרסת Internet Explorer 9). השתדלו לנסות ולהשתמש בהם בכך מתי שניתן. </li>
+</ul>
+
+<p>כמו שאמרנו, היתרון העיקרי של המנגנון השלישי הוא שאתם יכולים להסיר קוד שמטפל באירוע, באמצעות <code>()removeEventListener</code>, ואתם יכולים להוסיף מספר מאזיני אירוע לאותו אלמנט. לדוגמא, אנחנו יכולים לקרוא ל-<code>({ ... }()addEventListener('click', function</code> על אלמנט מסויים מספר רב של פעמים, כאשר בכל פעם תהיה פונקציה אחרת בארגומנט השני. אופציה זו לא אפשרית ב- event handler properties כי כל הגדרה נוספת של property תמחוק את ההגדרה הקודמת שלו:</p>
+
+<pre class="brush: js">element.onclick = function1;
+element.onclick = function2;
+etc.</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם אתם נדרשים לתמוך בדפדפנים ישנים מאינטרנט אקפלורר 8, אתם עלולים להיתקל בקשיים שכן דפדפדנים ישנים אלו משתמשים במודל אירועים שונה מדפדפנים חדשים, אך אל פחד. מרבית ספריות JavaScript (כמו לדוגמא jQuery) מכילות פונקציות מובנות שמבטלות כביכול את ההבדלים בין הדפדנים השונים. אין לכם צורך לדאוג לנושא זה בתחילת הלמידה שלכם.</p>
+</div>
+
+<h2 id="עקרונות_נוספים_בנושא_אירועים">עקרונות נוספים בנושא אירועים</h2>
+
+<p>בחלק זה, אנחנו נגע בקצרה בנושאים מתקדמים הקשורים לאירועים. אין זה הכרחי להבין נושאים אלו לעומק בשלב זה, אך זה עלול לסייע לכם להבין תבניות קוד שתיתקלו בהם מדי פעם.</p>
+
+<h3 id="Event_objects">Event objects</h3>
+
+<p>לפעמים בתוך פונקצייה המטפלת באירוע (event handler) - אתם תראו פרמטר המצויין בתך הסוגריים, הנושא שם כמו <code>event</code>, <code>evt</code>, או סתם <code>e</code>. זה נקרא <strong>event object - האובייקט של האירוע עצמו,</strong> והוא <strong>מועבר בצורה אוטומטית למטפלי האירוע</strong> על מנת לספק אפשרויות נוספות ומידע נוסף. לדוגמא, נרשום את דוגמת הצבעים שלנו מחדש בצורה קצת שונה:</p>
+
+<pre class="brush: js">function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: תוכלו למצוא <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">את קוד המקור</a> ב-GitHub וגם לראות <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">את הדוגמא כדף אינטרנט</a>.</p>
+</div>
+
+<p>כאן אנחנו יכולים לראות שאנחנו כוללים את האובייקט של האירוע - <strong>e</strong>, בתוך הפונקציה, ובתוך הפונקציה אנחנו קובעים צבע רקע ל- <code>e.target</code> — שזה בעצם הכפתור עצמו. המאפין <code>target</code> של event object הוא תמיד <strong>הפנייה לאלמנט שהאירוע התרחש עליו</strong>. כך, בדוגמא שלנו, אנחנו קובעים בעצם צבע רקע אקראי לכפתור עצמו שהאירוע הלחיצה התרחש עליו ולא לדף.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אתם יכולים להשתמש באיזה שם שנרצה עבור event object — רק השתמשו בשם שיהיה ברור שזה הפניה ל- event object. השמות המקובלים הם <code>e</code>/<code>evt</code>/<code>event</code> מכיוון שהם קצרים וקל לזכור את ההקשר שלהם.</p>
+</div>
+
+<p><code>e.target</code> הוא שימושי להפליא כשאנחנו רוצים לקבוע את אותו event handler על מספר אלמנטים ולעשות משהו לכולם כאשר אותו אירוע מתרחש. לדוגמא, נניח ויש לנו סט של 16 אריחים שנעלמים כאשר הם נלחצים. זה נוח יותר כאשר מתאפשר לנו לקבוע שאלמנט יעלם כשאנחנו נלחץ עליו באמצעות שימוש ב- <code>e.target</code> , מאשר לבחור אותו בצורה מורכבת אחרת. בדוגמאות הבאות למשל ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html - קוד המקור</a> (ניתן לראות גם ב-<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">דף האינטרנט</a>) יצרנו 16 אלמנטים מסוג {{htmlelement("div")}} באמצעות JavaScript, ואנחנו בוחרים את כולם באמצעות {{domxref("document.querySelectorAll()")}} ואז עוברים על כל אחד מהם באמצעות לולאה ומוסיפים מאזין אירוע ומטפל אירוע של <code>onclick</code> לכל אחד מהם כך שכאשר כל אחד מהאלמנטים הללו נלחץ על ידי המשתמש, צבע אקראי אחר ניתן לאותו אלמנט:</p>
+
+<pre class="brush: js">var divs = document.querySelectorAll('div');
+
+for (var i = 0; i &lt; divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}</pre>
+
+<p>הפלט נראה כך. נסו לשחק איתו:</p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Useful event target example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        background-color: red;
+        height: 100px;
+        width: 25%;
+        float: left;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+      for (var i = 1; i &lt;= 16; i++) {
+        var myDiv = document.createElement('div');
+        document.body.appendChild(myDiv);
+      }
+
+      function random(number) {
+        return Math.floor(Math.random()*number);
+      }
+
+      function bgChange() {
+        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        return rndCol;
+      }
+
+      var divs = document.querySelectorAll('div');
+
+      for (var i = 0; i &lt; divs.length; i++) {
+        divs[i].onclick = function(e) {
+          e.target.style.backgroundColor = bgChange();
+        }
+      }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>הרבה ממאזיני האירועים/מטפלי האירועים שניתקל בהם הם בעלי סט סטנדרטי של properties ופונקציות - או יותר נכון מתודות, אשר זמינים עבור ה-event object - ראו את הדף בנושא אובייקט {{domxref("Event")}} לרשימה המלאה.</p>
+
+<p>יש מטפלי אירועים יותר מורכבים, המכילים properties מיוחדים בעלי מידע ספציפי שהם צריכים על מנת לתפקד כמטפל אירוע. לדוגמא ל-<a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, יש סוג אירוע - <code>dataavailable</code> - שמתרחש כאשר אודיו או וידאו הוקלטו והם זמינים כך שניתן לבצע עליהם פעולות מסויימות - לדוגמא לשמור אותם או לנגן אותם שוב. למאזין האירוע/מטפל אירוע התואם <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> יש property שזמין בשם <code>data</code> עבורו המכיל את האודיו/וידאו שהוקלט ומאפשר לנו לגשת אליו ולעשות איתו דברים.</p>
+
+<h3 id="מניעת_התנהגות_ברירת_מחדל">מניעת התנהגות ברירת מחדל</h3>
+
+<p>לפעמים אנחנו ניתקל בסיטואצית שאנחנו נרצה למנוע מאירוע לבצע את מה שהוא אמור לעשות כברירת מחדל. הדוגמא הכי נפוצה היא טופס באינטרנט. כאשר אנחנו נמלא את הפרטים ונלחץ על כפתור ה-Submit , ההתנהגות ברירת המחדל תהיה לשלוח את המידע שהוכנס בטופס לדף מסויים בשרת לשם עיבוד, והדפדפן יועבר למעין דף של ״הפרטים נשלחו בהצלחה״ או משהו דומה.</p>
+
+<p>הבעיה מתעוררת כאשר המשתמש לא הזין את המידע כראוי - כמפתחים, אנחנו נרצה למנוע שליחה של המידע השגוי לשרת ולתת למשתמש הודעת שגיאה שאומרת להם מה הייתה הטעות ומה הם צריכים לעשות. חלק מהדפדנים תומכים בולידציה של מידע בטפסים, אך מכיון שהרבה לא ומסיבות נוספות, אנחנו ממליצים לא להסתמך על ולידציה של דפדפנים אלא לבנות את הולידציה בעצמכם. לדוגמא:</p>
+
+<p>נתחיל עם טופס HTML פשוט דורש מאיתנו להכניס שם פרטי ושם משפחה:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name: &lt;/label&gt;
+    &lt;input id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
+    &lt;input id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+     &lt;input id="submit" type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+</pre>
+</div>
+
+<p>כעת קצת JavaScript - כאן החלנו בדיקה פשוטה מאוד בתוך מטפל האירוע <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (האירוע של submit מתרחש כאשר הטופס נשלח).</p>
+
+<p>הבדיקה שלנו בודקת הם שדות הטקסט ריקים. אם כן, אנחנו קוראים לפונקציית <code><a href="/en-US/docs/Web/API/Event/preventDefault">()preventDefault</a></code> על ה- event object - כלומר על האלמנט שעליו התרחש האירוע. פונקצייה זו מונעת מהטופס להישלח - ומציגה הודעת שגיאה בפסקה מתחת לטופס שלנו, על מנת להציג למשתמש מה השתבש:</p>
+
+<pre class="brush: js">var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}</pre>
+
+<p>ברור שזו ולידציה פשוטה וחלשה מאוד - זה לא ימנע מהמשתמש להזין רווחים או מספרים לתוך שדות הטקסט, אך זה מספיק לשם הדוגמא. הפלט ייראה כך:</p>
+
+<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ראו את קוד המקור פה <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> או <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">דף אינטרנט</a>.</p>
+</div>
+
+<h3 id="event_bubbling_ו-_capture">event bubbling ו- capture</h3>
+
+<p>נושא נוסף שאנחנו נרצה לדון הוא משהו שאמנם לא ניתקל בו הרבה, אך אם לא נכיר אותו ונבין אותו, יכול לעשות לנו כאב ראש לא קטן.</p>
+
+<p>event bubbling ו- capture אלו שני מנגנונים אשר מסבירים מה קורה כאשר שנים או יותר <strong>מטפלי אירוע</strong> של <strong>אותו אירוע</strong> מופעלים על <strong>אלמנט אחד</strong>. לצורך ההסבר, פתחו את <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> בלשונית חדשה בדפדפן ואת <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">קוד המקור</a> בלשונית אחרת. ניתן גם לראות את הדוגמא כאן למטה:</p>
+
+<div class="hidden">
+<h6 id="Hidden_video_example">Hidden video example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Show video box example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: 480px;
+        height: 380px;
+        border-radius: 10px;
+        background-color: #eee;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+      }
+
+      .hidden {
+        left: -50%;
+      }
+
+      .showing {
+        left: 50%;
+      }
+
+      div video {
+        display: block;
+        width: 400px;
+        margin: 40px auto;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button&gt;Display video&lt;/button&gt;
+
+    &lt;div class="hidden"&gt;
+      &lt;video&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
+        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+      &lt;/video&gt;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+
+      var btn = document.querySelector('button');
+      var videoBox = document.querySelector('div');
+      var video = document.querySelector('video');
+
+      btn.onclick = function() {
+        displayVideo();
+      }
+
+      function displayVideo() {
+        if(videoBox.getAttribute('class') === 'hidden') {
+          videoBox.setAttribute('class','showing');
+        }
+      }
+
+      videoBox.addEventListener('click',function() {
+        videoBox.setAttribute('class','hidden');
+      });
+
+      video.addEventListener('click',function() {
+        video.play();
+      });
+
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>זו דוגמא פשוטה שמראה ומסתירה אלמנט {{htmlelement("div")}} שמכיל אלמנט {{htmlelement("video")}} בתוכו:</p>
+
+<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;
+
+&lt;div class="hidden"&gt;
+  &lt;video&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</pre>
+
+<p>כאשר אנחנו לוחצים על {{htmlelement("button")}} הוידאו מוצג, באמצעות שינוי ה-class של <code>&lt;div&gt;</code> מ- <code>hidden</code> ל- <code>showing</code> (ה-css בקובץ מכיל בין היתר שני classes אשר מציגים את הקופסא במסך או מסתירים אותה, בהתאמה) :</p>
+
+<pre class="brush: js">btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}</pre>
+
+<p>לאחר מכן אנחנו מוסיפים עוד שני מטפלי אירוע של <code>onclick</code> - הראשון ל- <code>&lt;div&gt;</code> והשני ל - <code>&lt;video&gt;</code>. הרעיון הוא שכאשר האזור של ה- <code>&lt;div&gt;</code> מחוץ לוידאו מקבל לחיצה, הקופסא אמורה להיעלם שוב; כאשר הוידאו עצמו נלחץ, הוידאו אמור לפעול שוב:</p>
+
+<pre>videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};</pre>
+
+<p>אבל ישנה בעי כרגע, כאשר אנחנו לוחצים על הוידאו הוא מתחיל להתנגן, אבל גורם גם ל- <code>&lt;div&gt;</code> להיות מוסתר באותו הזמן. זה מכיוון שהוידאו שבתוך ה-<code>&lt;div&gt;</code> - הוא חלק ממנו - אז כאשר אנחנו לוחצים על הוידאו - אנחנו בעצם גם מפעילים את האירוע על ה-<code>&lt;div&gt;</code> עצמו, ושני מטפלי האירוע נכנסים לפעולה.</p>
+
+<h4 id="bubbling_ו-_capturing">bubbling ו- capturing</h4>
+
+<p>כאשר אירוע מתרחש על אלמנט שיש לו אלמנט אב - לדוגמא האלמנט {{htmlelement("video")}} שלנו, לדפדפנים המודרניים יש שני תהליכים שונים שהם מבצעים: שלב ה- <strong>capturing</strong> ושלב ה- <strong>bubbling</strong>.</p>
+
+<p>בשלב - <strong>capturing</strong>:</p>
+
+<ul>
+ <li>הדפדפן בודק האם אלמנט האב הראשי ({{htmlelement("html")}}) מכיל event handler של <code>onclick</code> הרשום בשלב capturing ואם כן הוא מריץ אותו.</li>
+ <li>לאחר מכן, ובכל מקרה, הוא עובר לאלמנט הבן שנמצא בתוך - ({{htmlelement("html")}}) - ובודק שוב את הדבר, וכך הלאה, עד אשר הוא מגיע לאלמנט שבפועל לחצנו עליו.</li>
+</ul>
+
+<p>בשלב - <strong>bubbling</strong> קורה בדיוק ההפך:</p>
+
+<ul>
+ <li>הדפדפן בודק האם האלמנט שלחצו עליו בפועל מכיל event handler של <code>onclick</code> הרשום עליו בשלב bubbling ואז מריץ אותו אם כן.</li>
+ <li>לאחר מכן הוא ממשיך בכל מקרה לאלמנט האב הישיר שלו ומבצע את אותו דבר וכך הלאה, עד שהוא מגיע לאלמנט <code>&lt;html&gt;</code>.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+
+<p>לחצו על התמונה על מנת להגדיל אותה.</p>
+
+<p>בדפדפנים מודרניים, <strong>ברירת המחדל היא שכל ה-event handlers נרשמים בשלב ה-bubbling</strong>. בדוגמא שלנו למשל, כאשר לחצנו על הוידאו, <u><strong>האירוע</strong></u> מסוג לחיצה ״בועבע״ מאלמנט <code>&lt;video&gt;</code> הלאה לאלמנט <code>&lt;html&gt;</code>, כאשר במהלך הדרך :</p>
+
+<ul>
+ <li>הוא מצא מטפל אירוע - <code>video.onclick...</code> והריץ אותו ולכן הוידאו החל להתנגן.</li>
+ <li>לאחר מכן הוא מצא מטפל אירוע  <code>videoBox.onclick...</code> והריץ אותו גם, ולכן הסתיר את הוידאו (או יותר נכון הסתיר את ה-div שהכיל את הוידאו).</li>
+</ul>
+
+<p><strong>שימו לב שמה שבועבע הוא התרחשות האירוע עצמו, ולא מטפל האירוע (אותו דבר קורה גם בשלב ה-capturing). </strong></p>
+
+<h4 id="תיקון_הבעיה_עם_()stopPropagation">תיקון הבעיה עם ()stopPropagation</h4>
+
+<p>על מנת לתקן את ההתנהגות הזו, לאובייקט האירוע עצמו - event object - יש מתודה זמינה עבורו שנקראת <code><a href="/en-US/docs/Web/API/Event/stopPropagation">()stopPropagation</a></code>, כאשר היא מופעלת על מטפל האירוע של אובייקט האירוע, היא תריץ את מטפל האירוע, אבל <strong>תמנע מהאירוע עצמו להמשיך לבעבע במעלה השרשרת לאלמנטי האב שלו</strong> (וכנ״ל גם בשלב ה- capturing)<strong> </strong>וכך מטפלי אותו אירוע של אלמנטי האב לא ירוצו.</p>
+
+<p>כך, על מנת לתקן את הבעיה בדוגמא שלנו, אנחנו נשנה את הפונקציה המטפלת באירוע כך:</p>
+
+<pre class="brush: js">video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};</pre>
+
+<p>אתם יכולים ליצור עותק מקומי של קוד המקור של <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html </a> ולתקן זאת בעצמכם או לראות הקובץ המתוקן <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">כאן</a> ואת <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">קוד המקור</a> כאן.</p>
+
+<div class="note">
+<p><strong>הערה חשובה</strong>: אתם בטח שואלים את עצמכם מדוע לטרוח וליצור שני שלבים  - גם capturing וגם bubbling? התשובה נעוצה בהיסטוריה ובימי העבר כאשר התאימות בין דפדפנים הייתה שונה מאוד ולא כפי שהיא היום.</p>
+
+<p>בימים ההם Netscape השתמש ב-event capturing בלבד ואילו Internet Explorer השתמש ב - event bubbling בלבד. כאשר ארגון W3C החליט לנסות וליצור סטדרט אחיד, הם החליטו על מנגנון שיכלול את שני השלבים - וכל הדפדפנים אימצו את שני השלבים.</p>
+</div>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: יחד עם זאת, כברירת מחדל, כל מטפלי האירועים נרשמים בשלב bubbling ולא בשלב capturing וברוב המוחלט של הפעמים זה עושה שכל. אם אנחנו ממש רוצים לרשום אירוע בשלב ה-capturing, אנחנו יכולים לעשות זאת באמצעות הוספת <code>true</code> כפרמטר שלישי בתוך <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code>. היכנסו לקישור זה אם תרצו להרחיב בנושא. </p>
+</div>
+
+<h4 id="Event_delegation">Event delegation</h4>
+
+<p>bubbling מאפשר לנו להשתמש ביתרונות של <strong>event delegation</strong> — רעיון זה מתבסס על העובדה שאם אנחנו רוצים להריץ קוד מסויים כאשר אנחנו לוחצים על אלמנט ילד אחד שהוא חלק ממספר אלמנטים ילדים של אלמנט אב, אנחנו יכולים לקבוע את מאזין האירוע על אלמנט האב, ואז כאשר האירוע מתרחש על אחד מאלמנטים הילדים, האירוע ״יבועבע״ לאלמנט ההורה שלהם.</p>
+
+<p>כתיבה שכזו עדיפה על רישום מאזין אירוע לכל אחד מהילדים בנפרד. להזכירכם - בשלב ה-bubbling נבדק האם האלמנט שהאירוע התרחש עליו מכיל מטפל אירוע לאירוע שהתרחש ומתקדם הלאה לאלמנט ההורה ומבעבע אליו את האירוע ובודק האם הוא מכיל מטפל אירוע לאירוע שהתרחש וכך הלאה.</p>
+
+<p>דוגמא טובה לכך היא רשימה של פריטים - אם אנחנו רוצים שכל פריט מהרשימה יקפיץ הודעה כאשר לוחצים עליו, אנחנו יכולים לקבוע מאזין אירוע על האלמנט ההורה - במקרה שלנו <code>&lt;ul&gt;</code>, וכל לחיצה על פריט מהרשימה (<code>&lt;li&gt;</code>) -  כלומר כל התרחשות אירוע שכזה על פריט מהרשימה - אירוע הלחיצה יבעבע מאלמנט <code>&lt;li&gt;</code> לאלמנט האב - <code>&lt;ul&gt;</code>.</p>
+
+<p>רעיון זה מוסבר בפירוט רב בבלוג של David Walsh עם דוגמאות נוספות. ראו את המאמר שלו בנושא <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>במאמר זה ניסינו להסביר כל מה שאתם צריכים לדעת על אירועי Web בשלב זה. כפי שנאמר למעלה, אירועים הם לא חלק מה-core של JavaScript - הם מוגדרים ב-Web APIs של הדפדפן.</p>
+
+<p>חשוב להבין בנוסף שיש הבדלים בין מודלי האירועים של JavaScript בסביסות השונות שהיא מורצת - החל מ- Web APIs ועד לסביבות אחרות כמו Browser WebExtensions ו- Node.js. לא מצפים מכם שכרגע תבינו את כל הסביבות הללו, אבל זה עוזר לכם להבין את הבסיס ככל ותתקדמו בלמידה.</p>
+
+<p>אם משהו לא ברור, הרגישו חופשי לקרוא שוב את המאמר או <a href="/en-US/Learn#Contact_us">ליצור עמנו קשר</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a>  - מאמר מפורט בנושא capturing and bubbling שנכתב על ידי Peter-Paul Koch.</li>
+ <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a>  - מאמר מפורט בנושא event object שנכתב גם הוא על ידי Peter-Paul Koch.</li>
+ <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li>
+</ul>
diff --git a/files/he/learn/javascript/building_blocks/functions/index.html b/files/he/learn/javascript/building_blocks/functions/index.html
new file mode 100644
index 0000000000..99255d0591
--- /dev/null
+++ b/files/he/learn/javascript/building_blocks/functions/index.html
@@ -0,0 +1,386 @@
+---
+title: Functions — פונקציות - חלקי קוד לשימוש חוזר
+slug: Learn/JavaScript/Building_blocks/Functions
+translation_of: Learn/JavaScript/Building_blocks/Functions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">עקרון חשוב והכרחי נוסף בתכנות הוא פונקציות - <strong>functions. פונקציות</strong> מאפשרות לנו לאחסן קוד בתוך בלוק מוגדר ומבצע פעולה מסויימת, ואז לקרוא לאותו קוד מתי שנצטרך אותו באמצעות פקודה קצרה. זאת במקום לרשום את אותו קוד שוב ושוב. במאמר זה אנחנו נחקור את העקרונות הבסיסיים והחשובים שמאחורי פונקציות כמו הסינטקס הבסיסי שלהן, כיצד להגדיר אותן, כיצד להפעיל אותן, נלמד מהו סקופ ופרמטרים ועוד.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>הבנה של עקרונות היסוד בנושא פונקציות ב-JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="איפה_נמצא_פונקציות">איפה נמצא פונקציות?</h2>
+
+<p>ב-JavaScript אנחנו נמצא פונקציות בכל מקום. בעיקרון, אנחנו השתמשנו בפונקציות לאורך כל הדרך של הקורס, פשוט לא פירטנו עליהם לעומק. כעת אנחנו ניכנס לעומק של אלו ונבין כיצד להשתמש בהם.</p>
+
+<p>כמעט כל פעם שאנחנו עושים שימוש בביטוי מסויים של JavaScript שעושה שימוש בסוגריים רגילות <code>()</code> וזה <u><strong>לא</strong></u> במסגרת לולאת <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a> או לולאות <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while ו- do...while loop</a> או משפטי תנאי <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else</a> אנחנו בעצם עושים שימוש בפונקציות.</p>
+
+<h2 id="פונקציות_מובנות_Built-in_של_הדפדפן">פונקציות מובנות (Built-in) של הדפדפן</h2>
+
+<p>אנחנו ביצענו לא מעט שימוש בפונקציות המובנות בדפדפן. בכל פעם שעשינו מניפולציה על מחרוזת לדוגמא:</p>
+
+<pre class="brush: js notranslate">let myText = 'I am a string';
+let newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a source string,
+// and a target string and replaces the source string,
+// with the target string, and returns the newly formed string</pre>
+
+<p>או בכל פעם שעשינו מניפולציה על מערך:</p>
+
+<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs'];
+let madeAString = myArray.join(' ');
+console.log(madeAString);
+// the join() function takes an array, joins
+// all the array items together into a single
+// string, and returns this new string</pre>
+
+<p>או בכל פעם שרצינו ליצור מספר רנדומלי:</p>
+
+<pre class="brush: js notranslate">let myNumber = Math.random();
+// the random() function generates a random number between
+// 0 and up to but not including 1, and returns that number</pre>
+
+<p>אנחנו בעצם השתמשנו בפונקציות.</p>
+
+<div class="note">
+<p><strong>תשומת לבכם</strong>: נסו להכניס את השורות קוד הרשומות למעלה לקונסולה אם אתם לא זוכרים איך לעשות בהם שימוש.</p>
+</div>
+
+<p>ל- JavaScript יש לא מעט פונקציות מובנות אשר מאפשרות לנו לעשות דברים שימושיים מבלי לכתוב את כל הקוד בעצמנו. בפועל, חלק מהקוד שאנחנו מריצים כאשר אנחנו אנחנו קוראים לפונקציה מובנית של הדפדפן, לא יכל היה להירשם ב-JavaScript - הרבה מהפונקציות הללו קוראות לחלקים בקוד הדפדפן עצמו, אשר נבנה בשפה אחרת שאינה JavaScript כלל.</p>
+
+<p>אנא זכרו שחלק מהפונקציות המובנות של הדפדפם אינן חלק מהבסיס של שפת JavaScript - חלקן מהן מוגדרות כחלק מה-API של הדפדפן, אשר בנוי מעל שפת הכתיבה של הדפדפן על מנת להעניק יותר פונקציונליות. אנחנו נסתכל על ה-API של הדפדפן בהמשך המודול. לרענון זכרונכם, <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">ראו מאמר זה מתחילת הקורס</a>.</p>
+
+<h2 id="functions_vs._methods_-_פונקציות_מול_מתודות">functions vs. methods  - פונקציות מול מתודות</h2>
+
+<p>אנו קוראים לפונקציות שהן חלק מאובייקטים כ-מתודות (methods). אנחנו לא צריכים כרגע לדעת על המבנה הפנימי של אובייקטים ב-JavaScript - אנו נלמד את זה לעומק במודול הבא. לבינתיים, רק רצינו למנוע בלבול בין המושגים השונים. רוב הסיכויים שתשמעו את שניהם.</p>
+
+<p>הקוד המובנה שעשינו בו שימוש לבינתיים מגיע ב-2 תצורות: פונקציות ו-מתודות. אתם יכולים לבדוק את הרשימה המלאה של פונקציות מובנות וכן את הרשימה המלאה של אובייקטים מובנים והמתודות שלהם <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">פה</a>.</p>
+
+<p>כמו כן, ראינו הרבה פונקציות מותאמות -<strong>custom functions</strong> - פונקציות שאנחנו הגדרנו בעצמנו ולא מוגדרות בתוך הדפדפן עצמו. בכל פעם שאנחנו רואים שם שאינו שם שמור של השפה ולאחריו סוגריים רגילות <code>()</code>, זוהי פונקציה שהמפתח הגדיר בעצמו. בתרגול שלנו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> וגם <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">בקוד המקור שלו</a> במאמר בנושא <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות</a>, כללנו פונקציה <code>()draw</code> שאנחנו בנינו שנראית כך :</p>
+
+<pre class="brush: js notranslate">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (let i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>פונקציה זו מציירת 100 עיגולים אקראיים בתוך אלמנט {{htmlelement("canvas")}} . בכל פעם שאנחנו רוצים לעשות זאת, אנחנו יכולים להפעיל את הפונקציה עם הקוד הבא:</p>
+
+<pre class="brush: js notranslate">draw();
+</pre>
+
+<p>במקום לכתוב את כל הקוד שבתוך הפונקציה בכל פעם שאנחנו רוצים שיצוייר עיגול. </p>
+
+<p>פונקציות יכולות להכיל כל קוד שנרצה - אנחנו אפילו יכולים לקרוא לפונקציות אחרות מתוך פונקציות. הפונקציה למעלה לדוגמא, קוראת לפונקציה <code>()random</code> שלוש פעמים, כפי שאנו רואים בקוד הבא:</p>
+
+<pre class="brush: js notranslate">function random(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>אנחנו צריכים לבנות את הפונקציה <code>()random</code> כי הפונקציה המובנית של הדפדפן <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">()Math.random</a> מייצרת לנו מספר רנדומלי, אבל מספר רנדומלי עשרוני בין 0 ל-1. אנחנו לעומת זאת רצינו מספר רנדומלי שלם ולא עשרוני ושיהיה בין 0 למספר מסויים שאנחנו נגדיר לו.</p>
+
+<h2 id="Invoking_functions_-_קריאה_לפונקציה">Invoking functions - קריאה לפונקציה</h2>
+
+<p>ככל הנראה אתם כבר מבינים את הנושא, אבל בכל מקרה אנו מזכירים שכדי להשתמש בפועל בפונקציה אחרי שהיא הוגדרה, אנחנו צריכים להריץ אותה, לקרוא לה. בשפה האנגלית זה נקרא <strong>To invoke</strong>. זה נעשה באמצעות כתיבת שם הפונקציה איפה שנרצה בתוך הקוד שלנו, ולאחריו סוגריים מסולסלות <code>()</code>.</p>
+
+<pre class="brush: js notranslate">function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// calls the function once</pre>
+
+<h2 id="Anonymous_functions_-_פונקציות_אנונימיות">Anonymous functions - פונקציות אנונימיות</h2>
+
+<p>אולי נתקלתם בפונקציות אשר מוגדרות ומופעלות בצורות אחרות. עד עכשיו, יצרנו פונקציה בצורה כזו:</p>
+
+<pre class="brush: js notranslate">function myFunction() {
+  alert('hello');
+}</pre>
+
+<p>אבל אנחנו גם יכולים ליצור פונקציה שאין לה שם:</p>
+
+<pre class="brush: js notranslate">function() {
+  alert('hello');
+}</pre>
+
+<p>פונקציה שכזו נקראת פונקציה אנונימית - <strong>anonymous function</strong> - אין לה שם. היא גם לא עושה כלום בעצמה. בדרך כלל אנחנו נשתמש בפונקציה אנונימית ביחד עם ״מטפל אירוע״ - event handler. לדוגמא, הקוד הבא יריץ את הקוד בנמצא בתוך הפונקציה, כאשר הכפתור myButton נלחץ:</p>
+
+<pre class="brush: js notranslate">var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}</pre>
+
+<p>הדוגמא למעלה דורשת שיהיה אלמנט {{htmlelement("button")}} זמין על גבי הדף כדי שנוכל לבחור אותו וללחוץ עליו. ראיתם מבנה שכזה מספר פעמים במהלך הקורס ואתם תלמדו עליו עוד בהמשך הקורס.</p>
+
+<p>אנחנו יכולים להשים פונקציה אנונימית לתוך משתנה כך שהיא תהיה הערך של אותו משתנה. לדוגמא:</p>
+
+<pre class="brush: js notranslate">let myGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>ניתן להפעיל את הפונקציה הזו (invoke) באמצעות:</p>
+
+<pre class="brush: js notranslate">myGreeting();</pre>
+
+<p>בפועל, זה מעניק לשם פונקציה, למרות שהיא הייתה פונקציה אנונימית. אנחנו גם יכולים להשים את הפונקציה כך שהיא תהיה הערך של מספר משתנים. לדוגמא:</p>
+
+<pre class="brush: js notranslate">let anotherGreeting = myGreeting;</pre>
+
+<p>הפונקציה הזו יכולה להיות מופעלת בשתי הדרכים:</p>
+
+<pre class="brush: js notranslate">myGreeting();
+anotherGreeting();</pre>
+
+<p>אבל זה עלול להיות מבלבל, <strong>אז אל תעשו זאת</strong>. כשאנחנו יוצרים פונקציות, עדיף יהיה להיצמד למבנה הזה:</p>
+
+<pre class="brush: js notranslate">function myGreeting() {
+  alert('hello');
+}</pre>
+
+<p>אנחנו נשתמש בפונקציות אנונימיות בעיקר על מנת להריץ קוד בתגובה לאירוע שהתרחש - כמו לחיצה על כפתור - וזאת באמצעות ״מטפל אירוע״ - event handler. לדוגמא:</p>
+
+<pre class="brush: js notranslate">myButton.onclick = function() {
+  alert('hello');
+  // I can put as much code
+  // inside here as I want
+}</pre>
+
+<h2 id="הפרמטרים_של_הפונקציה">הפרמטרים של הפונקציה</h2>
+
+<p>חלק מהפונקציות דורשות שיינתנו להם פרמטרים מסויימים כשאנחנו מפעילים אותן - אלו בעצם ערכים שאנחנו צריכים לכלול בתוך הסוגריים הרגילות <code>()</code>, וזאת על מנת שהפונקציה תוכל לבצע את מה שהיא צריכה לבצע.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: פרמטרים אלו נקראים ארגומנטים</p>
+</div>
+
+<p>כדוגמא, הפונקציה המובנית של הדפדפן לא דורשת שום פרמטרים. כשאנחנו קוראים לה, היא מחזירה מספר עשרוני בין 0 ל-1. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">()Math.random</a>:</p>
+
+<pre class="brush: js notranslate">let myNumber = Math.random();</pre>
+
+<p>הפונקציה המובנית של הדפדפן <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">()replace</a> לעומת זאת, צריכה שני ארגומנטים - מחרוזת משנה שנרצה לחפש בתוך מחרוזת ראשית ואת המחרוזת המשנה שתחליף את זו שמצאנו בתוך המחרוזת הראשית:</p>
+
+<pre class="brush: js notranslate">let myText = 'I am a string';
+let newString = myText.replace('string', 'sausage');</pre>
+
+<div class="note">
+<p><strong>שימו לב</strong>: כשאנחנו צריכים לציין מספר של ארגומנטים, אנחנו נפריד ביניהם באמצעות פסיק - <code>,</code>.</p>
+</div>
+
+<p>חשוב לדעת כי לפעמים ארגומנטים יהיו אופציונליים - כלומר אנחנו לא נהיה חייבים לציין אותם. אם לא נציין אותם כאשר הם אופציונליים, הפונקציה בדרך כלל תאמץ סוג של התנהגות ברירת מחדל. לדוגמא, הפרמטר של פונקציה <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">()join</a> של מערכים הוא אופציונלי:</p>
+
+<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs'];
+let madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+let madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'</pre>
+
+<p>אם לא נציין אותו, ערך ברירת המחדל הוא שיהיה התו המחבר - במקרה הזה זה יהיה פסיק <code>,</code>.</p>
+
+<h2 id="סקופ_של_הפונקציה_והתנגשויות">סקופ של הפונקציה והתנגשויות</h2>
+
+<p>בוא נדבר מעט על {{glossary("scope")}} - עקרון חשוב מאוד להבנה כאשר אנחנו עוסקים בפונקציות. כאשר אנחנו יוצרים פונקציה, המשתנים וכל הדברים האחרים המוגדרים בתוך הפונקציה נמצאים בתוך <strong>scope</strong> נפרד, כלומר, הם נעולים בתוך מתחם מסויים, שלא ניתן לגשת אליו מחוץ לפונקציה.</p>
+
+<p>הסקופ או התחום שנמצא מחוץ לכל הפונקציות שלנו נקרא <strong>global scope</strong>. ערכים שמוגדרים ב-<strong>global scope</strong> נגישים מכל מקום בקוד.</p>
+
+<p>JavaScript נבנתה כך בצורה מסיבות מסויימות - אבל בעיקר מסיבות של אבטחה וארגון. לפעמים אנחנו לא נראה שמשתנים יהיו נגישים מכל מקום בקוד - סקריפטים חיצוניים שאנחנו מפעילים ממקומות אחרים יכולים לעשות לנו בלאגן ולגרום לשגיאות במקרה והם ישתמשו בשמות משתנים זהים ועלולים ליצור התנגשויות בין אם בטעות ובין אם מכוון.</p>
+
+<p>לדוגמא, נניח ויש לנו קובץ HTML אשר קורא לשני קבצי JavaScript חיצוניים, ובשניהם יש משתנה ופונקציה מוגדרים שמשתמשים באותו שם:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Excerpt from my HTML --&gt;
+&lt;script src="first.js"&gt;&lt;/script&gt;
+&lt;script src="second.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  greeting();
+&lt;/script&gt;</pre>
+
+<pre class="brush: js notranslate">// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}</pre>
+
+<pre class="brush: js notranslate">// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}</pre>
+
+<p>שתי הפונקציות שאנחנו רוצים לקרוא להם נקראות <code>()greeting</code>, אבל אנחנו יכולים לגשת רק לפונקציה <code>()greeting</code> שבקובץ <code>second.js</code> - שכן הקישור לקובץ מבוצע ב -HTML מאוחר יותר בקוד שלנו, ולכן המשתנים והפונקציה שלו דורסים את אלו שב- <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">first.js</span></font>.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ניתן לראות את הדוגמא <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">ב-GitHub</a> וכן את <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">קוד המקור</a>).</p>
+</div>
+
+<p>שמירה על הקוד שלנו נעול בתוך סקופ מונע בעיות שכאלו ונחשב כ- best practice.</p>
+
+<p>ניתן לחשוב על זה כמו גן חיות. האריות, זברות, נמרים ופינגווינים נמצאים כל במתחמים נפרדים כל אחד, ויש להם גישה רק לדברים שנמצאים במתחם שלהם - בדיוק כמו בסקופים של פונקציות. אם הם היו יכולים להיכנס למתחמים אחרים, היו נוצרות לא מעט בעיות. במקרה הטוב, החיות האחרות היו מרגישות לא בנוח, במקרה הרע, הן היו נאכלות על ידי חיה אחרת.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="למידה_אקטיבית_לשחק_עם_ה-scope">למידה אקטיבית: לשחק עם ה-scope</h3>
+
+<p>נסתכל על דוגמא על מנת להבין מהו scope.</p>
+
+<ol>
+ <li>ראשית, צרו לעצמכם עותק של הדוגמא שלנו <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. הקובץ מכיל 2 פונקציות שנקראות <code>()a</code> ו- <code>()b</code> וכן שלושה משתנים - <code>x</code>, <code>y</code>, ו- <code>z</code> - שניים מתוכם מוגדרים בתוך פונקציות ואחד מתוכם מוגדר ב-global scope. בנוסף, הדוגמא גם מכילה פונקציה שלישית שנקראת <code>()output</code>, אשר מקבלת ארגומנט אחד ומציגה אותו בתוך פסקה על גבי הדף.</li>
+ <li>פתחו את הדוגמא בדפדפן ובעורך הקוד שלכם.</li>
+ <li>הקלידו בקונסולה את הקוד הבא:
+  <pre class="brush: js notranslate">output(x);</pre>
+  אתם אמורים לראות שהערך של המשתנה <code>x</code> הוצג למסך.</li>
+ <li>כעת נסו להזין את הקוד הבא לקונסולה:
+  <pre class="brush: js notranslate">output(y);
+output(z);</pre>
+  שתי הפקודות הללו יחזירו לנו שגיאה ביחד עם המשפט: "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". מדוע? הסיבה נעוצה ב-scope של הפונקציות: - <code>y</code> ו- <code>z</code> נעולים בתוך הפונקציות <code>()a</code> ו- <code>()b</code> ולכן הפונקציה <code>()output</code> לא יכולה לגשת אליהם כשהיא נקראת מה-global scope.</li>
+ <li>עם זאת, מה לדעתכם יקרה כשנקרא לפונקציה <code>()output </code>מתוך הפונקציות? נסו לשנות את <code>()a</code> ו- <code>()b</code> שייראו כך:
+  <pre class="brush: js notranslate">function a() {
+  let y = 2;
+  output(y);
+}
+
+function b() {
+  let z = 3;
+  output(z);
+}</pre>
+  שמרו את הקוד ואז העלו מחדש את הדף בדפדפן ונסו לקרוא לפונקציות <code>()a</code> ו- <code>()b</code> מהקונסולה:
+
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  אתם אמורים לראות את הערכים של <code>y</code> ו- <code>z</code> על גבי הדף. זה עובד מכיוון שהפונקציה <code>()output</code> מופעלת מתוך פונקציה אחרת - כלומר מתוך אותו סקופ שבו מוגדרים המשתנים שהיא מדפיסה. הפונקציה <code>()output</code> עצמה זמיני מכל מקום, שכן היא מוגדרת ב-global scope.</li>
+ <li>נסו עכשיו לעדכן את הקוד שלכם כך:
+  <pre class="brush: js notranslate">function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}</pre>
+  רענון והעלו את הדף שוב והזינו את הקוד הבא בקונסולה:</li>
+ <li>
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  גם <code>a()</code> וגם <code>b()</code> מחזירים את הערך של x — 1. זה עובד מכיוון שלמרות ש-<code>()output</code> לא מוגדרת באותו סקופ ש- <code>x</code> מוגדר בו, אבל <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">x</span></font> הוא משתנה גלובלי אז הוא זמין בכל מקום בקוד.</li>
+ <li>לבסוף, עדכנו את הקוד כך:
+  <pre class="brush: js notranslate">function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}</pre>
+  שמור ורענן את הדף. לאחר מכן הזן את הקוד הבא בקונסולה:</li>
+ <li>
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  הפעם כשקראנו ל- <code>()a</code> ו- <code>()b</code> אנחנו נקבל שגיאה מסוג "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" זה מכיוון שביצוע הקוד <code>()output</code> והמשתנים שהם מנסים להשיג לא מוגדרים בתוך אותו סקופ של פונקציה - המשתנים בעיקרון בלתי נראים לקריאות הפונציה הזו.</li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לבכם</strong>: אותו מנגנון סקופינג לא חל על לולאות <code>{ ... }(...) for</code> ובלוקים של תנאים - <code>{ ... }(...) if</code> הם אמנם נראים דומים, אבל הם לא אותו דבר. אל תתבלבלו.</p>
+</div>
+
+<div class="note">
+<p><strong>לתשומת לבכם</strong>: השגיאה <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> היא אחת מהשגיאות השכיחות שתיתקלו בה. אם קיבלתם שגיאה שכזו, וודאו שהגדרת את המשתנה הרלוונטי ובסקופ הרלוונטי.</p>
+</div>
+
+<ul>
+</ul>
+
+<h3 id="פונקציות_בתוך_פונקציות">פונקציות בתוך פונקציות</h3>
+
+<p>זכרו שאנחנו יכולים לקרוא לפונקציה מכל מקום, <strong>גם מתוך פונקציה אחרת</strong>. זה שימושי על מנת על מנת להשאיר את הקוד שלנו מסודר - אם יש לנו פונקציה אחת מורכבת וגדולה יהיה יותר ברור להבין אותה אם נפרק אותה לכמה פונקציות:</p>
+
+<pre class="brush: js notranslate">function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+</pre>
+
+<p>חשוב לוודא שה<strong>ערכים שמבוצע בהם שימוש בתוך הפונקציה, מוגדרים בסקופ הנכון</strong>. הדוגמא למעלה תחזיר לנו שגיאה <code>ReferenceError: myValue is not defined</code> מכיוון שאמנם המשתנה <code>myValue</code> מוגדר באותו סקופ שהפונקציה נקראת, אך הוא לא מוגדר בתוך הפונקציות עצמן - בתוך הקוד שירוץ בפועל כשאנחנו קוראים לתתי פונקציות. על מנת לגרום לכך לעבוד, היינו צריכים להעביר אליהם את הפונקציה כפרמטר כמו שרשום בקוד מטה:</p>
+
+<pre class="brush: js notranslate">function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}</pre>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>מאמר זה סקר את העקרונות יסוד של פונקציות, על מנת לסלול את הדרך שלכם להבנה של כלים שימושיים נוספות ולהבנה כיצד לבנות פונקציה משלכם.</p>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions מדריך מפורט בנושא</a> — מכסה אפשרויות מתקדמות שלא נדונו במאמר זה.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> — הסבר מתקדם בנושא.</li>
+</ul>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li>
+</ul>
diff --git a/files/he/learn/javascript/building_blocks/index.html b/files/he/learn/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..e60d618b4e
--- /dev/null
+++ b/files/he/learn/javascript/building_blocks/index.html
@@ -0,0 +1,51 @@
+---
+title: אבני הבנין של JavaScript
+slug: Learn/JavaScript/Building_blocks
+tags:
+  - JavaScript
+  - events
+  - אירועים
+  - לולאות
+  - מדריך
+  - ערכים מוחזרים מפונקציה
+  - פונקציות
+  - תנאים - Conditionals
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">במודול זה, אנחנו נמשיך להעמיק ביסודות ובמאפיינים והחשובים של JavaScript ונתמקד בסוגים שונים של קוד כגון משפטי תנאי (conditional statements),לולאות (loops), פונקציות (functions), ואירועים (events). חלק מהם כבר ראינו בשלבים קודמים של הקורס, אך לא העמקנו בהם. במודול זה ניכנס לעומק של אותן אבני בניין ונבין כיצד הן עובדות ומה מטרתן.</p>
+
+<h2 id="ידע_מוקדם">ידע מוקדם</h2>
+
+<p>לפני שתתחילו את המודול הזה, אנא וודאו כי הנכם בקיאים ביסודות <a href="/he/docs/Learn/HTML/Introduction_to_HTML">HTML</a> ושל <a href="/he/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, וכן סיימתם לעבור על המודול הקודם שלנו <a href="/he/docs/Learn/JavaScript/First_steps"> צעדים ראשונים ב-JavaScript</a>.</p>
+
+<div class="note">
+<p><strong>הערה</strong>: אם אתם עובדים על מחשב\טבלט\מכשיר אחר שאין לכם אפשרות ליצור עליו קבצים אישיים, אתם יכולים לנסות את (רוב) דוגמאות הקוד על תוכנות קוד אינטרנטיות כמו <a href="http://jsbin.com/">JSBin</a> או <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="מדריכים">מדריכים</h2>
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></dt>
+ <dd>כמו בכל שפת תכנות, קוד צריך לקבל החלטות ולבצע פעולות מסויימות בהתאם למקרים שונים. לדוגמא - במשחק, אם מספר הנסיונות המותרים של השחקן עבר את מספר הנסיונות המקסימלי שהוגדר, המשמעות היא שהמשחק הסתיים. או יישום אינטרנט של מזג אוויר אשר יציג למשתמש עיצוב מסויים של מזג האוויר בהתאם לשעה הנוכחית ביום, כך שבשעות היום יוצג עיצוב בהיר ובשעות הערב יוצג עיצוב כהה. במאמר זה אנחנו נחקור את המבנה של <strong>משפטי תנאי</strong> ב-JavaScript וכיצד הם עובדים.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></dt>
+ <dd>לפעמים אנחנו נצטרך לבצע את אותה פעולה או משימה ברצף, יותר מפעם אחת. לדוגמא -  כשנרצה לעבור רשימת שמות. בתכנות, <strong>לולאות</strong> יכולות לעשות את העבודה הזו בצורה מצויינת. במאמר זה אנחנו נחקור את המבנה של לולאות ב- JavaScript וכיצד הן עובדות.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></dt>
+ <dd>קונספט הכרחי חשוב בתכנות הוא <strong>פונקציות. </strong>פונקציות מאפשרות לנו לאחסן חלקי קוד שמבצעים פעולה מסויימת בתוך בלוק מוגדר, ואז לקרוא לאותו קוד כשנצטרך להשתמש בו, באמצעות פקודה קצרה - וזאת במקום לרשום את אותו קוד פעם אחר פעם, כל פעם מחדש. במאמר זה נחקור את המבנה של פונקציה והרעיון העומד מאחוריה, ונבין מה הוא הסינטקס הבסיסי על מנת לרשום פונקציה, כיצד אנו קוראים לפונקציה ועוד. כמו כן, נלמד מהם ארגומנטים או פרמטרים אשר הפונקציות יכולות לקבל וכן מהו Scope.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></dt>
+ <dd>לאחר שנסיים לעבור על התיאוריה ונבין מהן פונקציות, במאמר זה נתרגל ונבין בצורה מעשית כיצד לבנות פונקציות משלנו, בהתאם לפעולת שנרצה לבצע. בהמשך הדרך, אנחנו נסביר גם פרטים שימושיים כיצד לטפל בפונקציות ובערכים שהן יכולות להחזיר לנו. </dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה</a> - <a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></dt>
+ <dd>עקרון הכרחי וחשוב שאנחנו צריכים להכיר לגבי פונקציות הוא אילו ערכים פונקציות מחזירות לנו, אם בכלל. ישנן פונקציות שלא מחזירות ערכים לאחר שסיימו להריץ את הקוד שבתוכן, וישנן פונקציות שיחזירו לנו ערכים מסויימים. במאמר זה אנחנו נבין מהם אותם <strong>ערכים מוחזרים</strong>, כיצד אנחנו יכולים להשתמש בהם וכיצד אנחנו יכולים לגרום לפונקציות שלנו להחזיר ערכים. </dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events </a></dt>
+ <dd><strong>אירועים</strong> אלו בעצם פעולות או התרחשויות אשר קורים במערכת, אשר אנחנו יכולים ״להאזין״ להם כך שנוכל להגיב בדרך מסויימת, ברגע שהם יתרחשו. לדוגמא, כאשר משתמש לוחץ על כפתור, אולי נרצה להגיב לאותה התרחשות, לאותו אירוע של לחיצת הכפתור על ידי הקפצת הודעה מסויימת. במאמר אחרון זה אנחנו נדון בכמה מהעקרונות החשובים בהקשר של אירועים, ונסתכל כיצד הם עובדים בדפדפנים.</dd>
+</dl>
+
+<h2 id="תרגול">תרגול</h2>
+
+<p>התרגול הבא יבדוק את ההבנה שלכם של החומר שנלמד במודול זה</p>
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">בניית גלריית תמונות</a></dt>
+ <dd>אנו נתרגל שימוש בלולאות ופונקציות וכן בתנאים ואירועים על ידי בנייה של גלריית תמונות.</dd>
+</dl>
diff --git a/files/he/learn/javascript/building_blocks/looping_code/index.html b/files/he/learn/javascript/building_blocks/looping_code/index.html
new file mode 100644
index 0000000000..b9067199e7
--- /dev/null
+++ b/files/he/learn/javascript/building_blocks/looping_code/index.html
@@ -0,0 +1,931 @@
+---
+title: לולאות
+slug: Learn/JavaScript/Building_blocks/Looping_code
+translation_of: Learn/JavaScript/Building_blocks/Looping_code
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">שפות תכנות הן שימושיות מאוד כשזה קשור לביצוע משימות מסויימות שוב ושוב. מביצוע חישובים מתמטיים עד לכל דבר שאנחנו יכולים לחשוב עליו. במאמר זה נסתכל על מבנים שלו לולאות שזמינים עבורנו ב-JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין כיצד להשתמש בלולאות ב-JavaScript ומתי.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="מה_הן_לולאות">מה הן לולאות?</h2>
+
+<p>לולאו הן עקרון חשוב מאוד בתכנות. לולאות קוד מכילות פעולות שנרצה לבצע שוב ושוב - ובשפה מקצועית - איטראציה - <strong>Iteration</strong>.</p>
+
+<p>יש הרבה סוגי לולאות - אבל כולן עושות בעיקרון את אותו דבר: הן חוזרות על פעולה מסויימת מספר פעמים (ואף יכול להיות גם 0 פעמים).</p>
+
+<p>ננסה להבין זאת באמצעות דוגמא פשוטה. נניח ויש לנו חקלאי אשר רוצה לוודא שיש לו מספיק אוכל למשפחה להמשך השבוע. הוא עשוי להשתמש בלולאה הבאה על מנת לעשות זאת:</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>
+
+<p>ללולאה יהיו בדרך כלל<strong> אחד או יותר </strong>(לא בהכרח את כולם) מהמאפיינים הבאים:</p>
+
+<ul>
+ <li>מונה - (<strong>counter</strong>)<strong> </strong>-<strong> </strong> אשר <strong>מאותחל לערך התחלתי</strong> מסויים - זו בעצם נקודת ההתחלה של הלולאה. ("Start: I have no food", למעלה).</li>
+ <li>תנאי יציאה - (<strong>condition</strong>) -<strong> </strong> התנאי להפסקת ריצת הלולאה - בדרך כלל, כאשר המונה מגיע לערך מסויים. כאשר תנאי זה מקבל ערך <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">false</span></font>, הלולאה תפסיק לרוץ ויורץ הקוד שאחרי הלולאה.</li>
+ <li>ביטוי לקידום הלולאה (<strong>iterator</strong>)<strong> </strong>-<strong> </strong> אשר באופן כללי, מעלה את המונה של הלולאה לאחר כל ריצה מוצלחת של הקוד שבתוך הלולאה, עד אשר תנאי היציאה יתקיים (כלומר יחזיר ערך של טרו). יש מפתחים שקוראים לו המונה.</li>
+</ul>
+
+<h3 id="למה_צריך_לולאות">למה צריך לולאות?</h3>
+
+<p>בשלב זה כנראה הבנו את הרעיון העומד מאחורי לולאות. כעת ננסה להבין כיצד זה עוזר לנו לבצע פעולות מסויימות שוב ושוב. </p>
+
+<p>בדרך כלל, הקוד שלנו יהיה מעט שונה בכל ריצה של הלולאה (כלומר - בכל איטראציה מוצלחת של הלולאה). דבר זה מאפשר לנו להשלים את ביצוען של כמות רבה של משימות דומות, אך שונות מעט. כך לדוגמא, אם יש לנו כמות רבה של חישובים שונים אשר נרצה לבצע קצת אחרת בכל ריצה/איטראציה.</p>
+
+<p>נסתכל על דוגמא נוספת על מנת להסביר את הנושא. נניח שאנחנו רוצים לצייר 100 עיגולים אקראיים על אלמנט מסוג {{htmlelement("canvas")}}, ובאמצעות לחיצה על כפתור <em>Update</em> אנחנו נרצה לקבל סט חדש ואחר של 100 עיגולים אקראיים:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Random canvas circles&lt;/title&gt;
+    &lt;style&gt;
+      html {
+        width: 100%;
+        height: inherit;
+        background: #ddd;
+      }
+
+      canvas {
+        display: block;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      button {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;button&gt;Update&lt;/button&gt;
+
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+
+    &lt;script&gt;
+    const btn = document.querySelector('button');
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+
+    let WIDTH = document.documentElement.clientWidth;
+    let HEIGHT = document.documentElement.clientHeight;
+
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+
+    function random(number) {
+      return Math.floor(Math.random()*number);
+    }
+
+    function draw() {
+      ctx.clearRect(0,0,WIDTH,HEIGHT);
+      for (let i = 0; i &lt; 100; i++) {
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,0.5)';
+        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
+
+    btn.addEventListener('click',draw);
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>אתם לא צריכים להבין את כל הקוד הרשום למעלה, אבל הסתכלו לעומק על החלק שמצייר בפועל 100 כדורים:</p>
+
+<pre class="brush: js">for (let i = 0; i &lt; 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<ul>
+ <li>הפונקציה <code>()random</code>, אשר הוגדרה מוקדם יותר בקוד, מחזירה לנו מספר שלם בין <code>0</code> ו- <code>x-1</code>.</li>
+ <li><code>WIDTH</code> ו- <code>HEIGHT</code> אלו הרוחב והגובה של החלק הפנימי של הדפדפן.</li>
+</ul>
+
+<p>אתם מבינים את הרעיון - אנחנו משתמשים בלולאה על מנת לרוץ 100 איטראציות של הקוד הזה, כאשר בכל ריצה כזו נקבל עיגול במיקום אקראי אחר. אם נרצה יותר מ-100 עיגולים פשוט נשנה מספר אחד!.</p>
+
+<p>אם לא היינו משתמשים בלולאה, היינו צריכים לרשום את הקוד הבא שוב ושוב בהתאם לכמות הפעמים שהיינו רוצים שיצוייר עיגול:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();</pre>
+
+<h2 id="לולאת_for">לולאת for</h2>
+
+<p>נחקור כיצד לולאות מסויימות בנויות. סוגי הלולאות השונים מאפשרים לנו דרכים שונות על מנת לקבוע את נקודת ההתחלה והעצירה של הלולאה.</p>
+
+<p>הראשונה, שאנחנו נשתמש בה הרבה מאוד פעמים, היא <strong>לולאה מסוג <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></strong>. לולאה זו היא בעלת הסינטקס הבא:</p>
+
+<pre>for (initializer; exit-condition; final-expression) {
+  // code to run
+}</pre>
+
+<p>הסבר:</p>
+
+<ol>
+ <li>המילה השמורה <code>for</code>, ולאחריה סוגריים רגילות <code>()</code>.</li>
+ <li>בתוך הסוגריים הרגילות <code>()</code> יש לנו 3 ביטויים, מופרדים על ידי <code>;</code>:
+  <ol>
+   <li><strong>initializer  - מונה-מאתחל</strong> — פה אנו נראה בדרך כלל הצהרה על משתנה, בדרך כלל משתנה <code>let</code> אשר אנחנו נותנים לו ערך (מספר) התחלתי לפני שהלולאה רצה. הוא ישמש את הלולאה כמונה של מספר הריצה הרלוונטית. </li>
+   <li><strong>exit-condition - תנאי יציאה</strong> — זהו התנאי שנבדק בטרם כל איטרציה. אם תוצאת המבחן היא <code>true</code>, הלולאה תמשיך לרוץ והביטוי שבתוך הסוגריים המסולסלות יבוצע. אם תוצאת המבחן היא <code>false</code> הלולאה תפסיק לרוץ. תנאי היציאה הוא בדרך כלל ביטוי הכולל אופטורים להשוואה - מבחנים לבדיקה האם התקיים תנאי מסויים.</li>
+   <li><strong>final-expression - iterator - ביטוי לקידום הלולאה </strong>— ביטוי זה יבוצע או ירוץ בכל פעם שהלולאה ביצעה ריצה/איטראציה במלואה. ביטוי זה משמש בדרך כלל להעלות (או להוריד) את המונה-מאתחל על מנת לקרב אותו לקיום תנאי היציאה.</li>
+   <li>שימו לב כי כל הביטויים האלו הם אופציונליים - אך לא ניכנס לאפשרויות השונות לעומק. אתם מוזמנים להרחיב בנושא בדף <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/statements/for">בנושא לולאת for</a>. </li>
+  </ol>
+ </li>
+ <li>לאחר מכן יש לנו סוגריים מסולסלות <code>{...}</code> שכוללות בתוכן קוד אשר ירוץ בכל פעם שהלולאה מבצעת איטרציה.</li>
+</ol>
+
+<p>נסתכל על הדוגמא הבאה:</p>
+
+<pre class="brush: js">const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+let info = 'My cats are called ';
+const para = document.querySelector('p');
+
+for (let i = 0; i &lt; cats.length; i++) {
+  info += cats[i] + ', ';
+}
+
+para.textContent = info;</pre>
+
+<p>הקוד למעלה יציג לנו את הפלט הבא:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Basic for loop example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+    let info = 'My cats are called ';
+    const para = document.querySelector('p');
+
+    for (let i = 0; i &lt; cats.length; i++) {
+      info += cats[i] + ', ';
+    }
+
+    para.textContent = info;
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>תשומת לב</strong>: ניתן למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">הקוד ב- GitHub</a> או לראות אותו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">פה</a>.</p>
+</div>
+
+<p>קוד זה מראה לולאת <code>for</code> שמבצעת איטרציה על הפריטים במערך ועושה משהו עם כל אחד מהם - זוהי תבנית שנראה שוב ושוב ב-JavaScript. בדוגמא זו למשל:</p>
+
+<ol>
+ <li><u><strong>המונה:</strong></u> לפעמים גם נקרא כמאתחל, הינו משתנה <code>i</code>, והוא מתחיל ב-<code>0</code>.   (<code>let i = 0</code>).</li>
+ <li><u><strong>בדיקת תנאי יציאה/עצירת הלולאה:</strong></u> הלולאה תרוץ כל עוד <code>i</code> קטן יותר ממספר האיברים שנמצאים במערך <code>cats</code>. (מציאת כמות האיברים שנמצאת במערך זה מתבצעת באמצעות <code>cats.length</code>. תנאי היציאה הוא חשוב ביצירת לולאה - הוא קובע מהו <strong>התנאי אשר רק כאשר תוצאות תהיה </strong><code>true</code><strong>, הלולאה תמשיך ותבצע איטרציה נוספת</strong>. במקרה הזה, כל עוד <code>i &lt; cats.length</code> עדיין נכון, הלולאה תמשיך לרוץ.</li>
+ <li><u><strong>הרצת הקוד שבתוך הסוגריים המסולסלות:</strong></u> בתוך הלולאה, אנחנו מחברים בין הפריט הנוכחי שהלולאה מבצעת עליו איטרציה [הערך של <code>i</code> באותה ריצה] <code>cats</code>,  ביחד עם פסיק ורווח בסוף המשתנה <code>info</code>:
+  <ol>
+   <li>במהלך הריצה הראשונה - האיטרציה הראשונה, , <code>i = 0</code>, ולכן <code>cats[0] + ', '</code> (שהוא שווה ל-<code>Bill, </code>) יצורף לתוך <code>info</code>.</li>
+   <li>במהלך הריצה השנייה - האיטרציה השנייה , <code>i = 1</code>, ולכן <code>cats[1] + ', '</code> (אשר שווה ל- <code>Jeff, </code>) יצורך גם הוא לתוך <code>info</code>.</li>
+  </ol>
+ </li>
+ <li><u><strong>קירוב המונה לתנאי היציאה: </strong></u>אחרי כל ריצה של הלולאה, נוסיף 1 ל-<code>i</code> באמצעות <code>++i</code>. <strong>שימו לב</strong> - רק אחרי שהקוד שבתוך הסוגריים המסולסלות מבוצע, מתבצעת הוספה של 1 למשתנה i וכך הלאה.</li>
+ <li><u><strong>ביצוע בדיקה חוזרת לתנאי העצירה ועמידה בו:</strong></u>  לאחר קירוב המונה לתנאי העצירה, תבוצע בדיקה חוזרת האם התנאי מתקיים -  <strong>כאשר תוצאת התנאי תהיה שוב </strong><code>true</code><strong>, הלולאה תמשיך ותבצע איטרציה נוספת</strong>.</li>
+ <li>רק כאשר <code>i</code> יהיה שווה ל- <code>cats.length</code> (במקרה זה, 5), הלולאה תפסיק שכן הערך המתקבל בתוצאה הוא <code>false</code> והדפדפן יעבור לקוד שמתחת לולאה. </li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לבכם</strong>: רשמנו את תנאי היציאה כ- <code>i &lt; cats.length</code>, ולא <code>i &lt;= cats.length</code>, מכיוון שמחשבים מתחילים לספור מ-0 ולא מ-1 — אנחנו מתחילים כאשר <code>i</code> שווה ל<code>0</code>, וממשיכים עד אשר <code>i = 4</code> (האינדקס של האיבר האחרון במערך).</p>
+
+<p> <code>cats.length</code> יחזיר 5, ומכיוון שאכן ישנם 5 פריטים, אבל הפריט החמישי של <code>cats.length</code>, נמצא באינדקס מס׳ 4. ולכן אנחנו לא רוצים את <code>cats.length</code> אלא את <code>cats.length</code> פחות אחד. אם נשים רק את <code>cats.length,</code> כאשר   <code>i = 5</code>  המבחן יחזיר לנו ערך של  <code>undefined</code> בעבור הפריט האחרון - שכן אין איבר באינדקס 5. ולכן, אנחנו נרצה להריץ את הלולאה מספר 1 פחות.</p>
+</div>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: טעות נפוצה עם תנאי יציאה היא להשתמש עם (<em>״שווה ל-״</em>)  (<code>===</code>)  במקום עם (<em>״קטן מ- או שווה ל-״</em>) (<code>&lt;=</code>) .</p>
+
+<p>אם אנחנו נרצה להריץ את הלולאה שלנו עד אשר <code>i = 5</code>, תנאי היציאה יצטרך להיות <code>i &lt;= cats.length</code>.אם נקבע אותו כ <code>i === cats.length</code>  אזי הלולאה לא תרוץ בכלל מכיוון ש-<code>i</code> לא שווה ל-<code>5</code> באיטרציה הראשונה של הלולאה, ולכן הלולאה תעצור במיידי.</p>
+</div>
+
+<p>בעיה אחת קטנה שנותרה לנו היא שהמשפט בסופה של הלולאה לא מסודר כראוי במלואו שכן בריצה האחרונה גם הוספנו פסיק ולכן יש לנו פסיק בסוף המשפט.</p>
+
+<blockquote>
+<p>My cats are called Bill, Jeff, Pete, Biggles, Jasmin,</p>
+</blockquote>
+
+<p>באופן הגיוני, אנחנו נרצה לשנות את צורת חיבור המחרוזת כך שבאיטרציה האחרונה של הלולאה, לא נקבל פסיק בסוף המשפט. לשם כך אנחנו יכולים להכניס משפט <code>if</code> בתוך לולאת <code>for</code> שלנו על מנת לטפל במקרה זה:</p>
+
+<pre class="brush: js">for (let i = 0; i &lt; cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ניתן למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">קוד הדוגמא הזו ב- GitHub</a> או כ- <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">דף אינטרנט</a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>זהירות</strong>: בלולאת for — כמו ביתר הלולאות, אנחנו צריכים לוודא שהמונה שלנו עולה או יורד, בהתאם למקרה הרלוונטי, כך שבשלב מסויים הוא יגיע לתנאי היציאה. אם לא - הלולאה תמשיך בלי סוף, ותגרום לכך שהדפדפן יעצור אותה או יקרוס. דבר כזה נקרא <strong>לולאה אינסופית</strong>.</p>
+</div>
+
+<h2 id="יציאה_מלולאות_באמצעות_break">יציאה מלולאות באמצעות break</h2>
+
+<p>אם אנחנו רוצים לצאת מלולאה לפני שכל האיטרציות הושלמו, אנחנו יכולים להשתמש בביטוי <a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a>. ראינו אותו בעבר כשלמדנו על משפטי תנאי מסוג <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch</a> (כאשר ביטוי מסויים עונה למקרה מסויים - <code>break</code> עוצר באופן מיידי את המשך הבדיקה וממשיך לקוד שלאחר משפט <code>switch</code>).</p>
+
+<p>בדיוק אותו הדבר כמו עם לולאות - הביטוי <code>break</code> יגרום ליציאה מיידית מהלולאה והדפדפן ימשיך לקוד שנמצא לאחר מכן.</p>
+
+<p>נניח ואנחנו רוצים לחפש בתוך מערך של אנשי קשר וטלפונים, ואז להחזיר רק את המספר שאנחנו רוצים למצוא? נתחיל ב-HTML פשוט - תיבת טקסט
+  {{htmlelement("input")}}, המאפשרת לנו להכניס את השם שנרצה לחפש ואלמנט מסוג כפתור {{htmlelement("button")}} על מנת לשלוח את החיפוש וכן אלמנט של פסקה  {{htmlelement("p")}} על מנת להציג בו את התוצאות.</p>
+
+<pre class="brush: html">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+&lt;input id="search" type="text"&gt;
+&lt;button&gt;Search&lt;/button&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<p>כעת נכניס - JavaScript:</p>
+
+<pre class="brush: js">const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+const para = document.querySelector('p');
+const input = document.querySelector('input');
+const btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  let searchName = input.value.toLowerCase();
+  input.value = '';
+  input.focus();
+  for (let i = 0; i &lt; contacts.length; i++) {
+    let splitContact = contacts[i].split(':');
+    if (splitContact[0].toLowerCase() === searchName) {
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      para.textContent = 'Contact not found.';
+    }
+  }
+});</pre>
+
+<div class="hidden">
+<h6 id="Hidden_code_3">Hidden code 3</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple contact search example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+  &lt;input id="search" type="text"&gt;
+  &lt;button&gt;Search&lt;/button&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+    const para = document.querySelector('p');
+    const input = document.querySelector('input');
+    const btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      let searchName = input.value.toLowerCase();
+      input.value = '';
+      input.focus();
+      for (let i = 0; i &lt; contacts.length; i++) {
+        let splitContact = contacts[i].split(':');
+        if (splitContact[0].toLowerCase() === searchName) {
+          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+          break;
+        } else if (i === contacts.length-1)
+              para.textContent = 'Contact not found.';
+        }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>ראשית - הגדרנו קבועים - יש לנו מערך עם פרטי קשר - כאשר כל איבר במערך הוא מחרוזת המכילה שם ומספר טלפון המופרדים על ידי <code>:</code>. הגדרנו קבוע בשם <code>para</code> שמקבל הפנייה לאלמנט <code>&lt;p&gt;</code>. הגדרנו קבוע בשם <code>input</code> שמקבל הפניה לאלמנט <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">&lt;input&gt;</span></font> וקבוע בשם <code>btn</code> שמקבל הפניה ל-<code>&lt;button&gt;</code>. </li>
+ <li>לאחר מכן חיברנו ״מאזין אירוע״ לכפתור - (<code>btn</code>), כך שבכל פעם שהוא יילחץ ירוץ קוד מסויים לביצוע החיפוש ויחזיר את התוצאה (event handler). במקרה הזה, זו הפונקציה האנונימית שנמצאת מיד לאחר הביטוי 'click'.</li>
+ <li>אחסנו את הערך שהוכנס לתוך תיבת הטקסט (<code>input)</code>  בתוך משתנה שנקרא <code>searchName</code>, לאחר מכן ריקנו את תיבת הטקסט מתוכן, ועשינו עליה פוקוס באמצעות מתודת <code>()focus</code> , על מנת שתהיה מוכנה לחיפוש הבא. שימו לב שאנחנו גם הרצנו את מתודת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">()toLowerCase</a></code> על הערך שהתקבל ב-<code>input</code> כדי לנרמל את המחרוזת. </li>
+ <li>ועכשיו לחלק המעניין של לולאת ה-<code>for</code>:
+  <ol>
+   <li>אנחנו מתחילים את המונה ב-<code>0</code>, מתבצעת בדיקת עמידה בתנאי, ככל והערך המוחזר הוא <code>true</code>, מתבצעת איטרציה - הרצה של הקוד שבתוך הסוגריים המסולסלות של הלולאה:
+    <ol>
+     <li>בתוך הלולאה אנחנו תחילה מחלצים כל חלק מהמחרוזת הראשית באמצעות מתודה שאנחנו מכירים <code>()split</code>, אשר מקבלת את התו <code>:</code> כתו שיחצה את המחרוזת <code>contacts</code> בכל פעם שהמתודה תמצא את התו הזה. להזכירכם מתודה זו מחזירה מערך של מחרוזות שהופרדו על ידי התו שהיא קיבלה. במקרה הזה אנחנו מאחסנים במשתנה בשם <code>splitContact</code> את המערך החדש שהוחזר לנו בכל איטרציה שזה בעצם מערך עם שני איברים: שם ומספר. </li>
+     <li>לאחר מכן אנחנו משתמשים במשפט תנאי לבדוק האם <code>[splitContact[0</code> שזה בעצם שם האדם מנורמל באמצעות<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">()toLowerCase</a></code>, שווה לטקסט שנמצא ב-<code>searchName</code>. אם כן, אנחנו נכניס מחרוזת לתוך הפסקה עם הטלפון שלו שזה בעצם <code>[splitContact[1</code>, ונשתמש ב-<code>break</code> על מנת לעצור את הלולאה. </li>
+    </ol>
+   </li>
+   <li>לאחר מכן מתבצעת הגדלת של ה-<code>i</code> ב-<code>1</code> בכל איטרציה מוצלחת של הלולאה באמצעות <code>++i</code>.</li>
+  </ol>
+ </li>
+ <li>אחרי כל האיטרציות, כאשר i יהיה שווה לאיבר האחרון במערך של המחרוזת הראשית - כלומר אחרי <code>(contacts.length-1)</code> אם <code>searchName</code> לא זהה לאף  <code>[splitContact[i</code>, אז טקטסט של הפסקה הופך ל- "Contact not found."  </li>
+</ol>
+
+<div class="note">
+<p>לתשומת לב: ניתן למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">קוד המקור - GitHub code on GitHub</a> או כדף <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">אינטרנט</a>.</p>
+</div>
+
+<h2 id="דילוג_על_איטרציה_עם_continue">דילוג על איטרציה עם continue</h2>
+
+<p>ביטוי ה-<a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> עובד בדרך דומה לביטוי <code>break</code>, רק שבמקום לעצור את הלולאה ולצאת ממנה, הוא פשוט ממשיך לאיטרציה הבאה של הלולאה. נעבור כעת על דוגמא נוספת שבה אנחנו נזין מספר מקבל מספר כערך, ומחזיקה רק המספרים שהם מספרים שלמים.</p>
+
+<p>ה-HTML  בעיקרון דומה לדוגמא הקודמת - יש לנו תיבת טקסט פשוטה ופסקה להציג את הפלט. ה-JavaScript גם דומה, למרות שהלולאה שלנו קצת אחרת:</p>
+
+<pre class="brush: js">let num = input.value;
+
+for (let i = 1; i &lt;= num; i++) {
+  let sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}</pre>
+
+<p>זה הפלט שלנו:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_4">Hidden code 4</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Integer squares generator&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
+  &lt;input id="number" type="text"&gt;
+  &lt;button&gt;Generate integer squares&lt;/button&gt;
+
+  &lt;p&gt;Output: &lt;/p&gt;
+
+
+    &lt;script&gt;
+    const para = document.querySelector('p');
+    const input = document.querySelector('input');
+    const btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      para.textContent = 'Output: ';
+      let num = input.value;
+      input.value = '';
+      input.focus();
+      for (let i = 1; i &lt;= num; i++) {
+        let sqRoot = Math.sqrt(i);
+        if (Math.floor(sqRoot) !== sqRoot) {
+          continue;
+        }
+
+        para.textContent += i + ' ';
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>במקרה הזה, הקלט צריך להיות מספר - <code>num</code>. אנו נותנים ללולאת ה-<code>for</code> מונה שמתחיל ב-<code>1</code> (אנחנו לא מעוניינים ב- <code>0</code> במקרה הנוכחי), תנאי יציאה שאומר שהלולאה תפסיק כאשר המונה יהיה גדול מהמספר שהכנסנו - מ-<code>num</code>, ואז ביטוי העלאה שמוסיף למונה <code>1</code> בכל איטרציה. </li>
+ <li>בתוך הלולאה, אנחנו מוצאים את השורש הריבועי של כל מספר (של כל <code>num</code>) באמצעות שימוש במתודה <a href="/he/docs/">(</a>)<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt</a>, ואז בודקים האם השורש הריבועי הוא שלם על ידי בדיקה האם הוא זהה לעצמו כשהוא מעוגל כלפי מטה לשלם הקרוב - זה מה שמתודת <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">()Math.floor</a> עושה למספר שמועבר אליה - היא מחזירה את המספר השלם הגדול ביותר אשר נמוך מהמספר שהבאנו לה או השווה לו.</li>
+ <li>אם השורש הריבועי והמספר שעוגל כלפי מטה אינהם זהים אחד לשני - (<code>!==</code>), המשמעות היא שהשורש הריבועי הוא לא מספר שלם, ולכן אנחנו לא מעוניינים בו. במקרה כזה, אנחנו נשתמש בביטוי <code>continue</code> על מנת לעבור לאיטרציה הבאה, אבל מבלי להמשיך להריץ את קוד אשר נמצא בהמשך האיטרציה הנוכחית (וביתר האיטרציות) ומבלי לצאת מהלולאה.</li>
+ <li>אם השורש הריבוע הוא מספר שלם, אנחנו לא עומדים בתנאי שרשום במשפט ה-<code>if</code> ולכן המשפט <code>continue</code> לא מורץ. במקום, אנחנו מצרפים את הערך שבתוך <code>i</code> בצירוף רווח, לסוף של הטקסט שבתוך הפסקה. </li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ניתן לראות את  <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">קוד המקור ב-GitHub</a> או לראות את הדף <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">אינטרנט</a>.</p>
+</div>
+
+<h2 id="while_ו-do_..._while">while ו-do ... while</h2>
+
+<p>לולאות <code>for</code> הן לא הלולאות היחידות שיש לנו ב-JavaScript. האמת שיש עוד הרבה אחרות. אנחנו ללא צריכים לדעת את כולן כעת, אבל שווה יהיה להעיף מבט בכמה ונבין שאפשרויות שונות עובדים בצורה שונה.</p>
+
+<p>לולאת <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> מורכבת מהסינטקס הבא:</p>
+
+<pre>initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>לולאה זו עובדת בצורה דומה ללולאת <code>for</code>, למעט העובדה שהערך המאתחל נקבע לפני הלולאה, והביטוי שיביא למימוש תנאי היציאה יהיה כלול בתוך הסוגריים המסולסלות <code>{}</code>. תנאי היציאה נכלל בתוך המרכאות העגולים, כאשר לפני המרכאות יש את המילה השמורה <code>while</code> ולא <code>for</code>.</p>
+
+<p>משפטי while ממשיכים לפעול עד שהתנאי המופיע בראש המשפט אינו נכון עוד. שימו לב שניתן להכניס בלולאה זו את את כל שלושת הביטויים המוכרים לנו מלולאת <code>for</code> - ערך מאתחל (לא חובה), תנאי יציאה וביטוי  סופי שיבוצע בסוף האיטרציה (לא חובה). כלומר, הערך היחיד שחובה לכלול בלולאת while הוא התנאי ליציאה - אך יחד עם זאת, ראו הערה חשובה בסוף פסקה זו בדבר סיום ריצת הלולאה. </p>
+
+<p>בוא נסתכל שוב על רשימת החתולים, אבל נכתוב אותה באמצעות לולאת while:</p>
+
+<pre class="brush: js">let i = 0;
+
+while (i &lt; cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: זה עובד כמו שציפינו — ראו את <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html"> הדף עובד ב-GitHub</a> או את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">קוד המקור</a>).</p>
+</div>
+
+<p>לולאת <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> דומה מאוד ללולאת while אבל שונה מעט:</p>
+
+<pre>initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>במקרה הזה, המאתחל מגיע שוב ראשון, לפני שהלולאה מתחילה. המילה שמורה <code>do</code> ולאחר מכן סוגריים מסולסלות <code>{}</code> שבותכן ייכנס הקוד שנרה שירוץ בלולאה. ולסוף , המילה השמורה <code>while</code> ולאחרי קוד היציאה.</p>
+
+<p>השוני כאן זה שתנאי היציאה מגיע בסוף, עטוף בתוך סוגריים רגילות <code>()</code>. בלולאת <code>do...while</code>, הקוד בתוך הסוגריים המסולסלות <code>{...}</code> תמיד ירוץ <u><strong>פעם אחת לפחות</strong></u> <u><strong>לפני</strong></u> בדיקת התנאי ואז יבדוק את התנאי על מנת לבדוק האם לרוץ שוב. להזכירכם - בלולאות <code>while</code> ובלולאות <code>for</code>, בדיקת התקיימות התנאי מתבצעת לפני הרצת הקוד שבתוך <code>{...}</code>  כך שיכול להיות שהקוד בלולאות אלו לא יבוצע לעולם. בלולאת <code>do...while</code> לעומת זאת, הקוד תמיד ירוץ פעם אחת לפחות.</p>
+
+<p>בוא נכתוב את הדוגמא שלנו באמצעות הלולאה <code>do...while</code>:</p>
+
+<pre class="brush: js">let i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i &lt; cats.length);</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: הלולאה עובדת בדיוק כפי שרצינו - ראו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">ב- GitHub</a> וכן את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">קוד המקור</a>.</p>
+</div>
+
+<div class="warning">
+<p><strong>זהירות</strong>: בלולאות <code>while</code>  וב-<code>do...while</code> - אנחנו חייבם לוודא שהמאתחל מועלה או, בהתאם למקרה, יורד, כך שבסופו של דבר הקוד יגיע לתנאי היציאה והלולאה תסתיים. אחרת, הלולאה תמשיך עד אינסוף. במקרה כזה הדפדפן יכריח אותה להפסיק או שהוא יקרוס. זה נקרא <strong>לולאה אינסופית</strong>.</p>
+</div>
+
+<h2 id="למידה_עצמאית_בניית_שעון_ספירה_לאחור">למידה עצמאית: בניית שעון ספירה לאחור</h2>
+
+<p>בתרגיל זה, אנחנו נרצה שתבנה תוכנית שתדפיס שעון עצר מ-10 ל-0 וכן:</p>
+
+<ul>
+ <li>תבנה לולאה שתרוץ מ-10 עד 0. סיפקנו לכם מאתחל - <code>let i = 10;</code></li>
+ <li>בעבור כל איטרציה, צרו פסקה חדשה והוסיפו אותה ל-<code>output div</code>', המיוצגת על ידי <code>const output = document.querySelector('.output');</code></li>
+ <li>בהערות סיפקנו לכם 2 שורות קוד שתצטרכו להתמש בהם איפשהו בלולאה:
+  <ul>
+   <li><code>const para = document.createElement('p');</code> — יוצרת פסקה חדשה.</li>
+   <li><code>output.appendChild(para);</code> — מוסיפה את הפסקה החדש ל <code>&lt;div&gt;</code> של האאוטפוט.</li>
+   <li><code>para.textContent =</code> — הופכת את הטקסט שבתוך הפסקה למה שנשים מצד ימין לסימן ה-<code>=</code>.</li>
+  </ul>
+ </li>
+ <li>בכל מספר ריצה דרוש טקסט אחר שיהיה מוצג לאותה ריצה - אתם תצטרכו משפט תנאי ומניפולציה ל- <code>para.textContent:</code>
+  <ul>
+   <li>אם המספר הוא 10, הדפיסו ״Countdown 10״ לתוך הפסקה.</li>
+   <li>אם המספר הוא 0, הדפיסו "Blast off!" לתוך הפסקה.</li>
+   <li>בכל יתר המספרים, פשוט הדפיסו את המספר לתוך הפסקה.</li>
+  </ul>
+ </li>
+ <li>זכרו לכלול ביטוי לקידום הלולאה. שימו לב שבדוגמא הזו אנחנו סופרים למטה לאחר כל ריצה ולא למעלה, אז אנחנו לא יכולים להשתמש ב-<code>++i</code>. </li>
+</ul>
+
+
+<p>אם עשיתם טעות אתם תמיד יכולים לאתחל את הקוד באמצעות הכפתור "Reset" ואם ממש נתקתעם לחצו על כפתור "Show solution" לפתרון.</p>
+
+<div class="hidden">
+<h6 id="למידה_עצמאית">למידה עצמאית</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 410px;overflow: auto;"&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 300px;width: 95%"&gt;
+let output = document.querySelector('.output');
+output.innerHTML = '';
+
+// let i = 10;
+
+// const para = document.createElement('p');
+// para.textContent = ;
+// output.appendChild(para);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i &gt;= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  let scrollPos = textarea.scrollTop;
+  let caretPos = textarea.selectionStart;
+
+  let front = (textarea.value).substring(0, caretPos);
+  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p class="brush: js"></p>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="למידה_עצמאית_-_מילוי_של_רשימת_אורחים">למידה עצמאית - מילוי של רשימת אורחים</h2>
+
+<p>
+  בתרגיל זה, אנחנו רוצים שתיקחו רשימה של שמות שמאוחסנים במערך ותכניסו אותם לתוך רשימת אורחים. זה לא כזה קל - אנחנו רוצים רשימת אורחים שמורשים להיכנס ורשימת אורחים שלא מורשים להיכנס.</p>
+
+<p>אתם מתבקשים לבצע את הדברים הבאים:</p>
+
+<ul>
+ <li>
+  כתבו לולאה שתרוץ מ-0 ועד לאורך של מערך <code>people</code> array. אתם צריכים להתחיל עם ערך מאתחל כמו <code>let i = 0;</code>, אבל מה יהיה תנאי היציאה?
+</li>
+ <li>
+   בכל איטרציה, אתם צריכים לבדוק האם האיבר הנוכחי של המערך <code>people</code> שווה להאורחים Phil או Lola באמצעות משפט תנאי:
+  <ul>
+   <li>
+    אם כן, צרפו את איבר המערך הרלוונטי ה<code>textContent</code> של פסקת <code>refused</code>, בצירוף פסיק וכן רווח.
+
+   </li>
+   <li>
+     אם לא, צרפו את האיבר הרלוונטי של המערך לסוף הcode&gt;admitted של פסקת code&gt;admitted, בצירוף פסיק וכן רווח.
+    </li>
+  </ul>
+ </li>
+</ul>
+
+<p>לבינתיים סיפקנו לכם:</p>
+
+<ul>
+ <li><code>let i = 0;</code> — המאתחל .</li>
+ <li><code>refused.textContent +=</code> — זו ההתחלה של השורה שמצרפת ערך לסוף של <code>refused.textContent</code>.</li>
+ <li><code>admitted.textContent +=</code> —  זו ההתחלה של השורה שמצרפת ערך לסוף של<code>admitted.textContent</code>.</li>
+</ul>
+
+<p>
+  שאלת בונוס - אחרי השלמת המשימה, אתם תישארו עם 2 רשימת שמות, מופרדות על ידי פסיקים, אבל לא מסודרות, שכן בסוף כל רשימה יש לנו פסיק.
+  מה ניתן לעשות כדי לחתוך את אותו פסיק או לבטל אותו? הסכתלו על
+<a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות מחרוזות שימושיות</a> לעזרה.</p>
+
+<p>אם עשיתם טעות אתם תמיד יכולים לאתחל את הקוד באמצעות הכפתור "Reset" ואם ממש נתקתעם לחצו על כפתור "Show solution" לפתרון</p>
+
+<div class="hidden">
+<h6 id="תרגול_עצמאי_נוסף">תרגול עצמאי נוסף</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
+  &lt;p class="admitted"&gt;Admit: &lt;/p&gt;
+  &lt;p class="refused"&gt;Refuse: &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
+
+const admitted = document.querySelector('.admitted');
+const refused = document.querySelector('.refused');
+admitted.textContent = 'Admit: ';
+refused.textContent = 'Refuse: '
+
+// let i = 0;
+
+// refused.textContent += ;
+// admitted.textContent += ;
+
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  let scrollPos = textarea.scrollTop;
+  let caretPos = textarea.selectionStart;
+
+  let front = (textarea.value).substring(0, caretPos);
+  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="באיזו_לולאה_עלינו_להשתמש">באיזו לולאה עלינו להשתמש??</h2>
+
+<p>
+  בדרך כךך, לשימושים בסיסים, הלולאות <code>for</code>, <code>while</code>, ו-<code>do...while</code>, הן חלופיות. כולן לרוב יכולות לפתור את אותן בעיות ואתם תחליטו במה לבחור.</p>
+
+<p>תחילה לולאת <code>for</code>:</p>
+
+<pre>for (initializer; exit-condition; final-expression) {
+  // code to run
+}</pre>
+
+<p>לולאת <code>while</code>:</p>
+
+<pre>initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>לולאת <code>do...while</code>:</p>
+
+<pre>initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>
+  אנחנו ממליצים על לולאת _____, לפחות בהתחלה, כיוון שהיא לרוב הקלה ביותר לזכור - המאתחל, תנאי היציאה ומקדם/מחסיר, אשר כולם נכנסים בתוך הסוגריים הרגילות וכך קל לבדוק שלא שכחנו כלום.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>:
+  יש סוגי לולאות נוספים ואפשרויות נוספות ללולאות, גם לאלו שסקרנו במאמר זה. אפשרויות ולולאות אלו הן מאוד שימושיות במקרים מתקדמים או פרטניים ולא נגע בהם במאמר זה. אם תרצו להעמיק, ראו את הדף בנושא
+ <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a>.</p>
+</div>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>
+  מאמר זה נועד להעניק לכם את העקרונות הבסיסים והאפשרויות העומדות בפניהם כאשר תרצו לבצע לולאה של קוד. אתם אמורים בלשב זה להבין את הרעיון והטכניקה שבה לולאות עובדות על מנת לבצע את אותו קוד שוב ושוב. </p>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement דף הסבר בנושא</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> ו- <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> דפי הסבר</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> ו- <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> דפי הסבר</li>
+ <li>
+  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — בנושא לולאות best practices</p>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li>
+</ul>
diff --git a/files/he/learn/javascript/building_blocks/return_values/index.html b/files/he/learn/javascript/building_blocks/return_values/index.html
new file mode 100644
index 0000000000..52e224289b
--- /dev/null
+++ b/files/he/learn/javascript/building_blocks/return_values/index.html
@@ -0,0 +1,180 @@
+---
+title: return values - ערכים המוחזרים מפונקציה
+slug: Learn/JavaScript/Building_blocks/Return_values
+tags:
+  - Beginner
+  - Functions
+  - JavaScript
+  - Return values
+  - מדריך
+  - ערכים מוחזרים
+  - פונקציות
+translation_of: Learn/JavaScript/Building_blocks/Return_values
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">עקרון חשוב שנותר לנו לדון בו בהקשר של פונקציות הוא הערכים שהפונקציות יכולות להחזיר - <strong>return values</strong>. יש פונקציות שלא מחזירות ערך משמעותי אחרי שהן סיימו, אבל אחרות כן וזה חשוב שנבין מהם אותם ערכים, כיצד אנחנו יכולים לעשות בהם שימוש ואיך לגרום לפונקציות שאנחנו בונים להחזיר ערכים שנוכל להשתמש בהם. במאמר זה נדון בהיבטים אלו.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>
+    <p>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, סיום במלואו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>. וכן, את המאמר בנושא <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — פונקציות - חלקי קוד לשימוש חוזר</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין מהם return values, וכיצד להתשמש בהם.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="מה_הם_return_values">מה הם return values?</h2>
+
+<p><strong>Return values</strong> הם בדיוק כמו שהם נשמעים - אלו ערכים שמוחזרים על ידי הפונקציה כאשר היא מסיימת. אנחנו כבר ראינו return values במספר פעמים, למרות שאולי לא חשבנו עליהם כך. נחזור לקוד שאנחנו מכירים:</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made</pre>
+
+<p>ראינו את הקוד הזה בעבר במאמר הראשון בנושא פונקציות. אנחנו קוראים/מפעילים את הפונקציה <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">()replace</a> על המחרוזת <code>myText</code> ומעבירים לה שני פרמטרים (ארגומנטים) - את המחרוזת משנה(<code>'string'</code>) שהיא צריכה לחפש במחרוזת הראשית (<code>myText</code>) ואת המחרוזת משנה החדשה שתחליף את המחרוזת משנה שנמצאה (<code>'sausage'</code>). כאשר פונקציה זו מסיימת - משלימה את הריצה שלה, היא מחזירה ערך, שהוא בעצם המחרוזת החדשה עם ההחלפה שבוצgה. בקוד למעלה, אנחנו שומרים את אותו ערך מוחזר כערך של המשתנה <code>newString</code> שלנו.</p>
+
+<p>אם תעיפו מבט על הדף שלנו בנושא פונקציית <code>()replace</code>, אתם תראו חלק שנקרא <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Return value</a>. תמיד חשוב לדעת ולהבין אלו ערכים מוחזרים על ידי פונקציה, על מנת שנוכל להשתמש בהם אם נרצה או כשנצטרך.</p>
+
+<p>חלק מהפונקציות לא מחזירות return value. במקרים כאלו, הערך המוחזר יהיה <code>void</code> או <code>undefined</code>. לדוגמא, בפונקציה <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">()displayMessage</a> שבנינו במאמר הקודם, אין ערך מוחזר כתוצאה מהשלמת ריצת הפונקציה. היא רק גרמה לקופסא להיות מוצגת איפשהו על המסך.</p>
+
+<p>באופן כללי, return value משמש כאשר הפונקציה היא שלב ביניים בחישוב כלשהו שאנחנו מבצעים לשם קבלת תוצאה סופית. ערכים מוחזרים אלו צריכים להיות מחושבים על ידי הפונקציה, והיא מחזירה את הערכים הללו בתור התוצאות של הקריאה לה (הריצה שלה), ובתוצאות הללו ניתן להשתמש בשלב הבא של החישוב.</p>
+
+<h3 id="שימוש_ב-_return_values_בפונקציות_שלנו">שימוש ב- return values בפונקציות שלנו</h3>
+
+<p>על מנת להחזיר ערך מפונקציה שאנחנו בונים, אנחנו צריכים להשתמש במילה השמורה <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a>. ראינו מילה זו בפעולה לאחרונה בתרגול שלנו בנושא <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. פונקציית <code>()draw</code> שלנו מציירת 100 עיגולים אקראיים על האלמנט {{htmlelement("canvas")}}:</p>
+
+<pre class="brush: js">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>בכל איטרציה של הלולאה, מבוצעות שלוש קריאות לפונקציה <code>()random</code>, על מנת לייצר מספר אקראי לקוארדינטות <code>x</code> ו-<code>y</code> של העיגול הנוכחי וכן לרדיוס שלו. הפונקציה <code>()random</code> מקבלת ארגומנט אחד - מספר שלם - ומחזירה מספר שלם בין 0 לאותו מספר שלם שהכנסנו לה כארגומנט. זה נראה כך:</p>
+
+<pre class="brush: js">function randomNumber(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>הקוד למעלה היה יכול להירשם גם כך:</p>
+
+<pre class="brush: js">function randomNumber(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}</pre>
+
+<p>אבל הגרסה הראשונה של הקוד קלה יותר לכתיבה וגם קומפקטית יותר.</p>
+
+<p>אנחנו מחזירים את התוצאה של החישוב <code>(Math.floor(Math.random()*number</code> בכל פעם שקוראים לפונקציה. הערכים המוחזרים הללו מופיעים ברגע שהפונקציה נקראת (מופעלת), והקוד ממשיך. לדוגמא, אם נריץ את השורות הבאות:</p>
+
+<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre>
+
+<p>ושלושת הקריאות לפונקציה <code>()random</code> החזירו נניח את הערכים 500, 200, ו- 35, בהתאמה, השורה תרוץ בפועל כאילו היא נכתבה כך :</p>
+
+<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre>
+
+<p>הקריאות לפונקציה באותה שורה רצות קודם והערכים המוחזרים של אותן קריאות נכנסים לתוך השורה עוד לפני ששורת הקוד עצמה מורצת במלואה.</p>
+
+<h2 id="למידה_עצמאית_הגדרת_-_return_value_של_הפונקציה_שלנו">למידה עצמאית: הגדרת - return value של הפונקציה שלנו</h2>
+
+<p>בתרגול זה אנחנו נכתוב פונקציות משלנו הכוללות return values.</p>
+
+<ol>
+ <li>ראשית, שמרו עותק מקומי של הקובץ <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> מ-GitHub. זהו דף HTML פשוט המיכל שדה טקסט {{htmlelement("input")}} ופסקה. בנוסף יש גם אלמנט {{htmlelement("script")}} כאשר בתוכו עשינו הפנייה לשני האלמנטים של ה-HTML בתוך שני משתנים. דף זה יאפשר לנו להכניס מספר כלשהו לתוך תיבת טקסט, ולהציג חישובים שונים על המספר הזה בתוך הפסקה שמתחת.</li>
+ <li>כעת, נוסיף פונקציות בתוך <code>&lt;script&gt;</code>. מתחת לשתי השורות הקיימות של JavaScript, הוסיפו את הגדרות הפונקציות הבאות:
+  <pre class="brush: js">function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x &gt; 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}</pre>
+  הפונקציות <code>()squared</code> ו- <code>()cubed</code> דיי ברורות - הן מחזירות את תוצאות ההכפלה או את השילוש של מספר שניתן להן כפרמטר, בעצמו. הפונקציה <code>()factorial</code> מחזירה את תוצאת העצרת של מספר מסויים. אם אתם לא זוכרים מה זה עצרת, ראו <a href="https://he.wikipedia.org/wiki/עצרת">הסבר על הערך </a>בויקיפדיה.</li>
+ <li>כעת, אנחנו הולכים להוסיף דרך להדפיס את כל המידע הזה לגבי המספר שהכנסנו. הכניסו את הקוד הבא, מתחת לפונקציות הנוכחיות:
+  <pre class="brush: js">input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}</pre>
+
+  <p>הוספנו פונקציה בתור ״מטפל אירוע״ אשר תרוץ כל פעם שאירוע מסוג <code>onchange</code> החל להתרחש בשדה הטקסט שלנו (<code>input</code>), כלומר - כל פעם שמוכנס ערך חדש לתוך שדה הטקסט והערך הזה הוגש - כלומר לחצנו על אנטר או עברנו לאלמנט אחר בדף. כאשר פונקציה אנונימית זו רצה, הערך שהוכנס לתוך שדה הטקסט מאוחסן בתוך המשתנה <code>num</code>.</p>
+ </li>
+ <li>
+  <p>לאחר מכן, אנחו מבצעים בדיקה באמצעות משפט תנאי -</p>
+
+  <ol>
+   <li>
+    <p>אם הערך שהוכנס <u><strong>אינו</strong></u> מספר, אנחנו נציג הודעת שגיאה לתוך הפסקה. המבחן שלנו מבצע שימוש בפונקציית <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">()isNaN</a> אשר בודקת האם הערך שהוכנס ב-<code>num</code> הוא לא מספר. אם הערך שהוכנס הוא מספר - היא מחזירה <code>false</code> ואם הוא לא מספר היא מחזירה <code>true</code>.</p>
+   </li>
+   <li>
+    <p>אם המבחן שלנו החזיר <code>false</code>, אז הערך של <code>num</code> הוא מספר ואנחנו יכולים להדפיס לתוך האלמנט <code>p</code> שלנו מהו תוצאת ההכפלה, השילוש והעצרת שלו. המשפט שלנו קורא לפונקציות <code>()squared()</code>, <code>cubed</code>, ו- <code>()factorial</code> על מנת לקבל את הערכים הללו.</p>
+   </li>
+  </ol>
+ </li>
+ <li>שמרו את הקוד ונסו אותו בדפדפן שלכם.</li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם נתקלתם בבעיות בתוכנית או אתם לא מצליחים לגרום לקוד שלכם לעבוד, נסו להשוו אותו ל<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">גרסה הסופית שלנו ב-GitHub</a> או ראו אותו כ<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">דף אינטרנט</a>.</p>
+</div>
+
+<p>תרגיל זה ניסה להציג לכם כמה מהנקודות החשובות של ביטוי <code>return</code>. בנוסף:</p>
+
+<ul>
+ <li>הסתכלנו על דוגמא כיצד לכתוב טיפול בשגיאה בתוך הפונקציה שלנו. באופן עקרוני, מומלץ תמיד לבדוק שהפונקציה קיבלה את הפרמטרים הדרושים לה, ככל ואלו דרושים, ושהם בסוג הנכון. ואם פרמטרים אלו הם אופציונליים, אז מומלץ להגדיר מעין ערך ברירת מחדל. כך רוב הסיכויים שהתוכניות שלנו תהיה עם פחות שגיאות.</li>
+ <li>חישבו על הרעיון של ליצור לעצמכם ספריית פונקציות. ככל שתתקדמו בהמשך הלמידה והקריירה שלכם, אתה תיתקלו במקרים שבהם תצטרכו לעשות דברים דומים שוב ושוב. זה רעיון טוב ליצור לעצמכם ספריה של פונקציות שימושיות שאתם משתמשים בהם באופן תדיר, וכך אתם יכולים להעתיק אותם לפרוייקט חדש או פשוט להחיל אותם בכל פעם שתרצו.</li>
+</ul>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>במאמר זה ובשני המאמרים הקודמים למדנו על פונקציות, כמה הן שימושיות וכיצד ניתן להשתמש בהם. יש כמובן הרבה מה להוסיף על פונקציות בנוגע לסינטקס שלהם ולפונקציונליות שלהם, שלושת המאמרים האחרונים בנושא פונקציות ניסו להסביר לכם את עקרונות היסוד והבסיס. הרגישו חופשי להרחיב את הידיעות שלכם בנושא בקישורים המופיעים מטה.</p>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Functions in-depth</a> — מדריך מפורט בנושא פונקציות המפרט לעומק את האפשרויות השונות של הפונקציות, סינטקסים אפשריים נוספים ועוד.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Callback_function">Callback functions ב- JavaScript</a> — תבנית נפוצה ב-JavaScript היא להעביר פונקציה כארגומנט לתוך פונקציה אחרת, ואז הפונקציה נקראת בתוך הפונקציה שהיא הועברה אליה. מומלץ להרחיב את הידע בנושא.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li>
+</ul>
diff --git a/files/he/learn/javascript/building_blocks/תנאים/index.html b/files/he/learn/javascript/building_blocks/תנאים/index.html
new file mode 100644
index 0000000000..4c5c5dcc54
--- /dev/null
+++ b/files/he/learn/javascript/building_blocks/תנאים/index.html
@@ -0,0 +1,789 @@
+---
+title: משפטי תנאי - קבלת החלטות בקוד שלנו
+slug: Learn/JavaScript/Building_blocks/תנאים
+tags:
+  - Conditionals
+  - Switch
+  - else if
+  - if ... else
+  - ternary
+  - אופרטור טרנארי
+  - משפטי אם...אחר
+  - משפטי תנאי
+  - תנאים
+translation_of: Learn/JavaScript/Building_blocks/conditionals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">כמו בכל שפת תכנות, הקוד שלנו צריך ״לקבל החלטות״ בעצמו ולבצע פעולות מסויימות בהתאם למקרים שונים. לדוגמא - במשחק, אם מספר הנסיונות המותרים של השחקן עבר את מספר הנסיונות המקסימלי שהוגדר, המשמעות היא שהמשחק הסתיים. דוגמא נוספת היא יישום אינטרנט של מזג אוויר אשר יציג למשתמש עיצוב מסויים של מזג האוויר בהתאם לשעה הנוכחית ביום, כך שבשעות היום יוצג עיצוב בהיר ובשעות הערב יוצג עיצוב כהה. במאמר זה אנחנו נחקור את המבנה של משפטי תנאי ב-JavaScript וכיצד הם עובדים.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להבין כיצד להשתמש במשפטי תנאי ב-JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="תנאים_והתניות_בחיים_האמיתיים">תנאים והתניות בחיים האמיתיים</h2>
+
+<p>בני האדם מקבלים החלטות שמשפיעות על החיים שלהם באופן קבוע, מהחלטה קטנה האם לאכול שתי עוגיות או אחת עד להחלטות מורכבות האם לעזוב את העבודה או האם ללכת ללמוד אסטרונומיה במקום סוציולוגיה.</p>
+
+<p>משפטי תנאי ב-JavaScript אפשרים לנו לייצג בקוד שלנו את התהליך של קבלת ההחלטה, החל מהחלטות שנהיה חייבים לקבל ועד החלטות שנקבל רק אם ניתקל במקרה מסויים.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="if_..._else_-_משפטי_אם_..._אחרת">if ... else - משפטי אם ... אחרת</h2>
+
+<p>נסתכל על הסוג הנפוץ ביותר של משפטי תנאי ב-JavaScript - משפט התנאי <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a>.</p>
+
+<h3 id="הסינטקס_הבסיסי_של_משפטי_if_..._else">הסינטקס הבסיסי של משפטי if ... else</h3>
+
+<p>אם ננסה להמחיש את הסינטקס הבסיסי של <code>if...else</code> בצורה מופשטת של {{glossary("pseudocode")}}, הוא ייראה כך:</p>
+
+<pre>if (condition - תנאי) {
+  code to run if condition is true - הקוד שירוץ אם התנאי נכון
+} else {
+  run some other code instead  - הקוד שירוץ אם התנאי לא נכון
+}</pre>
+
+<p>מה שיש לנו כאן זה:</p>
+
+<ol>
+ <li>המילה השמורה <code>if</code> ולאחרי סוגריים רגילות <code>()</code>.</li>
+ <li>לאחר מכן - התנאי שנבדוק האם הוא מתקיים נמצא בתוך ה- <code>()</code> (כמו: ״האם הערך הזה גדול מערך אחר״ או ״הערך הזה קיים״). תנאי זה יעשה שימוש באופרטורים שדבירנו עליהם במודול הקודם - <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">comparison operators אופרטורים להשוואה </a> ויחזיר לנו ערך של אמת - <code>true</code> או ערך של שקר - <code>false</code>.</li>
+ <li>לאחר מכן  - סוגריים מסולסלות - <code>{}</code> - שבתוכן נכניס כל קוד שנרצה, אשר יתבצע אך ורק אם התנאי התקיים, כלומר החזיר תוצאת אמת - <code>true</code>.</li>
+ <li>לאחר מכן - מילה שמורה נוספת שהיא <code>else</code>. אשר באה לבטא מה יקרה, אם בכלל, כאשר התנאי לא יחזיר תוצאת <code>true</code>. </li>
+ <li>ולבסוף - סוגריים מסולסלות נוספות<code>{}</code>- שבתוכן נכניס כל קוד שנרצה, אשר יתבצע אך ורק אם התנאי עצמו לא התקיים, כלומר החזיר תוצאת שקר - <code>false</code>.</li>
+</ol>
+
+<p>קוד זה דיי קריא ומובן על ידי בני אדם - הוא אומר בעצם ש-"<strong>אם</strong> ה- <strong>condition (התנאי)</strong> מתקיים - כלומר מחזיר ערך של אמת - <code>true</code>, תריץ את קוד A, <strong>אחרת -</strong> תריץ את קוד B"</p>
+
+<p>שימו לב שאנחנו לא חייבים את לכלול את ה- <code>else</code> ואת הסוגריים המסולסלות השניות. כך לדוגמא, התנאי הבא הוא חוקי לחלוטין:</p>
+
+<pre>if (condition) {
+  code to run if condition is true
+}
+
+run some other code</pre>
+
+<p>יחד עם זאת, אנחנו צריכים לזכור שבמקרה כזה, הקוד השני שאינו חלק ממשפט התנאי, לא נשלט על ידיו ולא כפוף למשפט התנאי - מה שאומר שהוא ירוץ <strong>תמיד</strong> לא משנה אם התנאי החזיר ערך <code>true</code> או <code>false</code>. זה לאו דווקא משהו רע, אבל חשוב לדעת זאת.</p>
+
+<p>לפעמים אנחנו גם נראה משפטי- <code>if...else</code> ללא סוגריים מסולסלות כלל, בקיצור אשר נראה כך:</p>
+
+<pre>if (condition) code to run if condition is true
+else run some other code instead</pre>
+
+<p>זהו קוד תקין לחלוטין, אך <strong>אינו מומלץ לשימוש</strong> -  הרבה יותר קל לקרוא קוד ולהבין מה קורה, אם אנחנו משתמשים בסוגריים מסולסולת לתחום את הקוד, וכן משתמשים במס׳ שורות ורווחים על מנת להפוך את הקוד לקריא ומובן יותר.</p>
+
+<h3 id="דוגמא_לתרגול">דוגמא לתרגול</h3>
+
+<p>על מנת להבין את הסינטקס טוב יותר, בוא ננסה דוגמא קטנה לתרגול. דמיינו ילד אשר התבקש לעזור לאימו בביצוע הקניות. אם הוא ישלים את המשימה, הוא יקבל דמי כיס גבוהים יותר מהרגיל:</p>
+
+<pre class="brush: js">var shoppingDone = false;
+
+if (shoppingDone === true) {
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}</pre>
+
+<p>עם זאת, קוד זה תמיד יגרום לכך שהילד יקבל דמי כיס מופחתים שכן בתחילת הקוד המשתנה <code>shoppingDone</code> קיבל את הערך של <code>false</code>. אנחנו צריכים למצוא דרך להפוך את הערך של המשתנה <code>shoppingDone</code> - <code>true</code> אם הילד השלים את הקניות.</p>
+
+<div class="note">
+<p><strong>תשומת לב</strong>: ניתן לראות את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">הפתרון לתרגול זה ב- GitHub</a> (וכן ניתן לראות אותו <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">כדף אינטרנט</a>.)</p>
+</div>
+
+<h3 id="else_if_-_משפטי_התניה_משורשרים">else if - משפטי התניה משורשרים</h3>
+
+<p>הדוגמא הקודמת נתנה לנו שתי אפשרויות אך מה אם נצטרך יותר משתי אפשרויות?</p>
+
+<p>ישנה דרך לשרשר אפשרויות נוספות לתוך משפט <code>if...else</code> שלנו באמצעות שימוש ב- <code>else if</code>. כל בחירה נוספות דורשת בלוק נוסף של קוד שייכנס בין<code>{ ... }() if</code> לבין <code>{ ... }else</code> — ראו את הדוגמאות הבאות, שהן בעצם חלק מיישום פשוט לתחזית מזג אוויר:</p>
+
+<pre class="brush: html">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
+  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
+  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
+  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
+  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  var choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>כאן יש לנו אלמנט {{htmlelement("select")}} המאפשר לנו לבחור אפשרויות שונות, וכן פסקה פשוטה.</li>
+ <li>ב-JavaScript, אנחו מאחסנים הפניות לאלמנט {{htmlelement("select")}} ולאלמנט- {{htmlelement("p")}} על ידי שמירתם במשתנים ומוסיפים ל-{{htmlelement("select")}} ״מאזין אירוע״ - event listener לאלמנט {{htmlelement("select")}} כך שכאשר הערך שלו ישתנה, הפונקציה <code>()setWeather</code>תופעל.</li>
+ <li>כאשר הפונקציה הזו רצה, אנחנו מגדירים תחילה משתנה בשם <code>choice</code> ומשימים לו את הערך הרלוונטי שהמשתמש בחר באלמנט <code>&lt;select&gt;</code>. לאחר מכן, אנחנו משתמשים במשפטי תנאי על מנת לתת כיתוב שונה בטקסט של הפסקאות, בהתאם לערך שיקבל <code>&lt;select&gt;</code> בכל פעם. שימו לב שכל התנאים נבדקים בבלוקי קוד של משפט תנאי <code>{...}()else if</code>, למעט האפשרות הראשונה, אשר נבדק בבלוק של המשפט התנאי <code> {...}()if</code>.</li>
+ <li>האפשרות האחרונה הנמצאת בבלוק של <code>{...}else</code> היא בעצם ברירת המחדל, או האופציה האחרונה. הקוד בבלוק שלה ירוץ רק אם אף אחד מהתנאים לא החזירו <code>true</code>. במקרה הזה, זה ישמש לרוקן את הטקסט מהפסקה ומידה ושום אופציה לא נבחרה.</li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אתם גם יכולים <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">למצוא את הדוגמא הזו ב- GitHub</a> או <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">להריץ אותה</a>.</p>
+</div>
+
+<h3 id="תשומת_לב_לאופרטורים_להשוואה">תשומת לב לאופרטורים להשוואה</h3>
+
+<p>אופרטורים להשוואה משמשים לבדוק את התנאים בתוך משפטי התנאי שלנו. עברנו עליהם במאמר <a href="/he/Learn/JavaScript/First_steps/Math#Comparison_operators">מתמטיקה בסיסית ב-JavaScript — מספרים ואופרטורים</a> שלנו. האפשרויות שלנו הן:</p>
+
+<ul>
+ <li><code>===</code> ו- <code>!==</code> — בודקים האם ערך אחד זהה או שונה באופן מוחלט מערך אחר.</li>
+ <li><code>&lt;</code> ו- <code>&gt;</code> — בודקים האם ערך אחד קטן או גדול מערך אחר.</li>
+ <li><code>&lt;=</code> ו- <code>&gt;=</code> — בודקים האם ערך אחד קטן/שווה או גדול/שווה לערך אחר .</li>
+</ul>
+
+<div class="note">
+<p><strong>לתשומת לבכם</strong>: חיזרו על החומר אם אינכם זוכרים אותם. </p>
+</div>
+
+<p>כאשנו מדברים על תוצאות ההשוואה, אנחנו רוצים לשים תשומת לב לערכים הבוליאנים שנקבל - הלא הם (<code>true</code>/<code>false</code>) ומהו המקור שלהם וכן לשים לב להתנהגות מסויימת שאנחנו ניתקל בה שוב ושוב.</p>
+
+<p>כל ערך שהוא לא <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, או מחרוזת ריקה - (<code>''</code>), יחזיר לנו אמת - <code>true</code> כאשר הוא נבדק כתנאי במשפט תנאי. ולכן, אנחנו יכולים להשתמש רק בשם של המשתנה בלבד על מנת לבדוק האם הוא אמת או אפילו לבדוק האם הוא קיים - כלומר הוא לא <code>undefined</code> לדוגמא:</p>
+
+<pre class="brush: js">var cheese = 'Cheddar';
+
+if (cheese) {
+  console.log('Yay! Cheese available for making cheese on toast.');
+} else {
+  console.log('No cheese on toast for you today.');
+}</pre>
+
+<p>ואם נחזור לדוגמא הקודמת שלנו עם הילד והמטלה, נוכל לרשום זאת כך:</p>
+
+<pre class="brush: js">var shoppingDone = false;
+
+if (shoppingDone) { // don't need to explicitly specify '=== true'
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}</pre>
+
+<h3 id="שרשור_של_if_..._else">שרשור של if ... else</h3>
+
+<p>זה בסדר גמור לשים משפט <code>if...else</code> אחד בתוך השני - כלומר לשרשר אותם. לדוגמא, אנחנו יכולים לעדכן את היישום מזג אוויר שלנו להראות רשימה נוספת של אפשרויות בהתבסס על הטמפרטורה:</p>
+
+<pre class="brush: js">if (choice === 'sunny') {
+  if (temperature &lt; 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+  } else if (temperature &gt;= 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+  }
+}</pre>
+
+<p>למרות שכל הקוד עובד יחד, כל משפט <code>if...else</code> עובד לחלוטין באופן עצמאי מהאחר.</p>
+
+<h3 id="AND_OR_או_NOT_אופרטוריים_לוגיים_-_Logical_operators">AND, OR או NOT :אופרטוריים לוגיים - Logical operators</h3>
+
+<p>אם נרצה לבדוק מספר תנאים מבלי לשרשר משפטי <code>if...else</code> שונים, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">logical operators אופרטוריים לוגיים -</a> יכולים לעזור לנו. כשנעשה בהם שימוש בתנאים, השניים ראשונים עושים את הדברים הבאים:</p>
+
+<ul>
+ <li><code>&amp;&amp;</code> — AND; מאפשר לנו לשרשר ביחד מס׳ תנאים אשר כולם חייבים להתקיים ועל כולם להחזיר <code>true</code> על מנת שכל הביטוי יהיה <code>true</code>.</li>
+ <li><code>||</code> — OR; מאפשר לנו לשרשר מס׳ תנאים אשר מספיק שאחד מהם יתקיים ויחזיר ערך של <code>true</code>, על מנת שכל הביטוי יהיה <code>true</code>.</li>
+</ul>
+
+<p> ניתן היה לרשום את הקוד הקודם באמצעות שימוש באופרטור הלוגי AND בצורה הבאה:</p>
+
+<pre class="brush: js">if (choice === 'sunny' &amp;&amp; temperature &lt; 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+} else if (choice === 'sunny' &amp;&amp; temperature &gt;= 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+}</pre>
+
+<p>בדוגמא זו, הבלוק קוד הראשון ירוץ רק אם <code>'choice === 'sunny</code> <em>וגם</em> <code>temperature &lt; 86</code> יחזיר <code>true</code>.</p>
+
+<p>דוגמא לשימוש באופרטור הלוגי OR:</p>
+
+<pre class="brush: js">if (iceCreamVanOutside || houseStatus === 'on fire') {
+  console.log('You should leave the house quickly.');
+} else {
+  console.log('Probably should just stay in then.');
+}</pre>
+
+<p>הסוג האחרון של אופרטור לוגי - NOT, מבוטא על ידי האופרטור <code>!</code> וניתן לשימוש על מנת לשלול ביטוי מסויים. נראה אותו בדוגמא הבאה:</p>
+
+<pre class="brush: js">if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+  console.log('Probably should just stay in then.');
+} else {
+  console.log('You should leave the house quickly.');
+}</pre>
+
+<p>בקוד זה אם ביטוי של OR מסויים מחזיר <code>true</code>, אז האופרטור NOT יהפוך אותו לשלילי על מנת שכל הביטוי יחזור <code>false</code>.</p>
+
+<p>אנחנו יכולים לאחד כמה משפטי התנייה ואופרטורים לוגיים כמה שנרצה, בכל מבנה שנרצה. הדוגמאות הבאות מריצות קוד בפנים רק אם שני משפטי ה-OR מחזירים ערך של אמת. </p>
+
+<pre class="brush: js">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'Steve')) {
+  // run the code
+}</pre>
+
+<p>טעות נפוצה שעושים כאשר משתמשים באופרטור הלוגי OR במשפט תנאי היא לציין את המשתנה שאנחנו נרצה לבדוק את הערך שלו ואז לתת מס׳ ערכים לבדיקה מופרדים על ידי האופרטור<code>||</code> (OR) , זה עלול להחזיר לנו ערך של אמת. לדוגמא:</p>
+
+<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) {
+  // run my code
+}</pre>
+
+<p>במקרה זה, התנאי בתוך הסוגריים <code>()</code> יחזיר לנו תמיד <code>true</code>, כי המספר 7 או כל מספר שאינו 0, תמיד יחזיר ערך של <code>true</code> כי כל ערך שהוא לא <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, או מחרוזת ריקה - (<code>''</code>), יחזיר לנו אמת - <code>true</code> כאשר הוא נבדק כתנאי במשפט תנאי. </p>
+
+<p>על מנת שקוד זה יעבוד לוגית כפי שרצינו, אנחנו צריכים להשתמש<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> אופרטור </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">OR </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">על כל אחד מהם:</span></p>
+
+<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // run my code
+}</pre>
+
+<h2 id="משפטי_switch">משפטי switch</h2>
+
+<p>משפטי <code>if...else</code> עוזרים לנו לממש קוד מותנה שירוץ בהתאם לתנאים שנגדיר לו, אבל לא בלי החסרונות שלהם. הם לרוב יהיו טובים כאשר יש לנו שתי אפשרויות וכל מהן דורשת כמויות הגיונית של קוד, או כאשר התנאים שלנו מורכבים יחסית. למקרים שבה אנחנו נרצה הרבה מקרים לבדיקה, הקוד עלול להיות קצת מעצבן וארוך. </p>
+
+<p>בשביל זה נועדו משפטי <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></code>. משפטים אלו מקבלים ביטוי/ערך בתוך פרמטר ואז בודקים התקיימותו בין מספר אפשרויות שמוגדרות להם. אם הם מוצאים אחת מהאפשרויות שמתאימה לביטוי/ערך שהם קיבלו כפרמטר, הן יריצו את הקוד המתאים. כך זה קורה מבחינה רעיונית<span style="font-size: 1rem; letter-spacing: -0.00278rem;">:</span></p>
+
+<pre>switch (expression) {
+  case choice1:
+    run this code
+    break;
+
+  case choice2:
+    run this code instead
+    break;
+
+  // include as many cases as you like
+
+  default:
+    actually, just run this code
+}</pre>
+
+<p>הסבר:</p>
+
+<ol>
+ <li>המילה השמורה <code>switch</code>, ולאחריה סט של סוגריים רגילות <code>()</code>.</li>
+ <li>ביטוי או ערך בתוך הסוגריים.</li>
+ <li>המילה השמורה <code>case</code>, ולאחריה מקרה אפשרי שהביטוי או הערך יכול להיות, לאחריו <code>:</code>.</li>
+ <li>קוד שירוץ אם המקרה מתאים לביטוי/ערך.</li>
+ <li>המילי השמורה <code>break</code>, ולאחריה <code>;</code> אם האפשרות הקודמת תואמת לערך/ביטוי, הדפדפן יפסיק להריץ את הקוד במשפט ה-<code>switch</code> וימשיך לקוד שמתחת למשפט ה-<code>switch</code>.</li>
+ <li>ניתן להוסיף <code>case</code> כמה שרק נרצה. </li>
+ <li>לבסוף, המילה השמורה <code>default</code>, ולאחריה <code>:</code> וקוד שירוץ. <code>default</code> תרוץ אם הערך/ביטוי שהוכנס לא תואם לאף אחד מאפשרויות ה-<code>case</code> שרשמנו. במקרה של <code>default</code> - אין צורך להתשמש במילה השמורה <code>break</code>, מכיוון שאין מה להפסיק/לעצור לאחר התקיימותו של מקרה זה. </li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>:  החלק של <code>default</code> הוא אופציונלי - אנחנו יכולים להשמיט אותו אם אין סיכוי כשהביטוי יחזיר לנו ערך לא ידוע או לא תואם לאף אחד מהמקרים. אם יש סיכוי  כזה - אנחנו צריכים לכלול <code>default</code> במשפט ה-<code>switch</code> על מנת להתמודד עם אותם מקרים לא ידועים. </p>
+</div>
+
+<h3 id="דוגמא_למשפט_switch">דוגמא למשפט switch</h3>
+
+<p>נסתכל על דוגמא אמיתית - נכתוב את יישום מזג האוויר שלנו מחדש באמצעות שימוש במשפט <code>switch</code>:</p>
+
+<pre class="brush: html">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
+  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
+  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
+  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
+  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  var choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>לתשומת לבכם</strong>: אפשר למצוא את הדוגמא ב-​​​​​<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">GitHub</a> או להריץ אותה <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">פה</a>.</p>
+</div>
+
+<h2 id="Ternary_operator_-_אופרטור_טרנארי"> Ternary operator - אופרטור טרנארי</h2>
+
+<p>סינטקס נוסף שנרצה להציג בפניכם לפני שנמשיך הוא <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">אופרטור טרנארי</a>. </p>
+
+<p>אופרטור טרנארי הוא סינטקס קצר אשר בודק התקיימותו של תנאי מסויים ומבצע פעולה מסויימת אם התנאי מתקיים - <code>true</code>, ופעולה אחרת אם התנאי לא מתקיים - <code>false</code>. אופרטור זה שימושי בסיטואציות מסוימות ויכול לקחת הרבה פחות קוד מאשר <code>if...else</code>, במידה ויש שתי אפשרויות, אשר נבחרות לפי מבחן/תנאי <code>true</code>/<code>false</code>.</p>
+
+<p>על מנת להפשיט את הנושא, הקוד בצורה רעיונית נראה כך:</p>
+
+<pre>( condition ) ? run this code : run this code instead</pre>
+
+<p>נסתכל על דוגמא פשוטה:</p>
+
+<pre class="brush: js">var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';</pre>
+
+<p>יש לנו פה משתנה בשם <code>isBirthday</code> - אם הוא <code>true</code>, אנחנו נתן הודעת יומולדת שמח, ואם הוא <code>false</code>, אנחנו נתן ברכה רגילה.</p>
+
+<h3 id="דוגמא_לאופרטור_טרנארי">דוגמא לאופרטור טרנארי</h3>
+
+<p>שימו לב כי אנחנו לא חייבים לקבוע ערכים בפרמטרים של האופרטור הטרנארי - אנחנו יכולים גם לתת לו כפרמטרים שורות קוד או פונקציות - כל דבר שנרצה. הדוגמא הבאה מראה לנו אפשרות לבחירת עיצוב לאתר על בסיס אופרטור טרנארי.</p>
+
+<pre class="brush: html">&lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+&lt;select id="theme"&gt;
+  &lt;option value="white"&gt;White&lt;/option&gt;
+  &lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;h1&gt;This is my website&lt;/h1&gt;</pre>
+
+<pre class="brush: js">var select = document.querySelector('select');
+var html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>כאן יש לנו אלמנט {{htmlelement('select')}} המאפשר לנו לבחור את הסגנון (שחור או לבן) ובנוסף כותרת פשוטה של {{htmlelement('h1')}} על מנת להציג את הכותרת של האתר. לאחר מכן יש לנו פונקציה שנקראת <code>()update</code> שמקבלת שני צבעים כארגומנטים. הרקע של האתר נקבע על ידי הצבע הראשון שאנחנו בוחרים, והצבע של הטקסט ניתן כפרמטר השני.</p>
+
+<p>לבסוף ישלנו ״מאזין אירוע״ - event listener בשם <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a>. מאזין אירוע זה מכיל ״מטפל אירוע״ - event handler מסוג מסוג אופרטור טרנארי. הוא מתחיל עם מבחן התנאי - <code>select.value === 'black'</code>. אם התנאי מחזיר <code>true</code>, אנחנו נריץ את פונקציית <code>true</code> עם האפרמטרי ׳black׳ ו-׳white׳ - כלומר אנחנו נקבל רקע שחור עם כיתוב טקסט לבן. אם זה תוצאת התקיימות התנאי היא <code>false</code> - פונקציית <code>()update</code> תרוץ עם פרמטרים לבן ושחור, כלומר הצבעים יהיו הפוכים.</p>
+
+<div class="note">
+<p><strong>לתשומת לבכם</strong>:  אירועים אלו בעצם פעולות או התרחשויות אשר קורים במערכת, אשר אנחנו יכולים ״להאזין״ להם באמצעות ״מאזין אירוע״ - <strong>event listener</strong> כך שנוכל להגיב בדרך מסויימת, ברגע שהם יתרחשו באמצעות ״מטפל אירוע״ - <strong>event handler</strong>. אנו נגע בהם בהמשך.</p>
+</div>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ראו גם <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">דוגמא זו ב- GitHub</a> או בדוגמא <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">כדף אינטרנט</a>. </p>
+</div>
+
+<h2 id="למידה_עצמאית_לוח_שנה_פשוט">למידה עצמאית: לוח שנה פשוט</h2>
+
+<p>בדוגמא הבאה, אנחנו הולכים לכתוב דוגמא ללוח שנה. בקוד שלנו יש:</p>
+
+<ul>
+ <li>אלמנט {{htmlelement("select")}} המאפשר לנו לתת למשתמש לבחור בין חודשים שונים בשנה.</li>
+ <li>מאזין אירוע מסוג <code>onchange</code> על מנת ״להאזין״ להתרחשות של שינוי ערך בתפריט ה- <code>&lt;select&gt;</code>.</li>
+ <li>פונקציה שנקאת <code>()createCalendar</code> יוצרת לנו ללוח שנה ומציגה את החודש הנכון באלמנט {{htmlelement("h1")}}.</li>
+</ul>
+
+<p>אנחנו צריכים משפט תנאי בתוך ה-event handler שלנו - כלומר בתוך פונקציית <code>onchange</code> שלנו, מתחת להערה <code>ADD CONDITIONAL HERE //</code>. משפט תנאי זה אמור:</p>
+
+<ol>
+ <li>להסתכל על החודש שנבחר ואוכסן במשתנה <code>choice</code>. זה יהיה הערך של האלמנט <code>&lt;select&gt;</code> לאחר שהערך שלו השתנה. בדוגמא שלנו זה יהיה January.</li>
+ <li>להגדיר משתנה בשם <code>days</code> שיהיה שווה למספר הימים בחודש הנבחר. על מנת לעשות זאת אנחנו נצטרך להסתכל על מספר הימים בכל חודש בשנה. אנחנו יכולים להתעלם משנים מעוברות לצרכי דוגמא זו.</li>
+</ol>
+
+<p><u>רמזים</u>:</p>
+
+<ul>
+ <li>אנו ממליצים להשתמש באופרטור הלוגי OR (<code>||</code>) על מנת לאחד מספר חודשים ביחד לתנאי אחד. מרביתם הרי חולקים את אותו מספר הימים.</li>
+ <li>חשבו מהו מספר הימים הנפוץ ביותר בחודשים השונים והשתמשו בו כערך ברירת מחדל.</li>
+</ul>
+
+<p>אם אתם עושים טעות - תמיד ניתן לאתחל את הקוד למצבו הראשוני באמצעות כפתור ה-״Reset״. אם ממש נתקעתם - הסתכלו על הפתרון.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
+  &lt;label for="month"&gt;Select month: &lt;/label&gt;
+  &lt;select id="month"&gt;
+    &lt;option value="January"&gt;January&lt;/option&gt;
+    &lt;option value="February"&gt;February&lt;/option&gt;
+    &lt;option value="March"&gt;March&lt;/option&gt;
+    &lt;option value="April"&gt;April&lt;/option&gt;
+    &lt;option value="May"&gt;May&lt;/option&gt;
+    &lt;option value="June"&gt;June&lt;/option&gt;
+    &lt;option value="July"&gt;July&lt;/option&gt;
+    &lt;option value="August"&gt;August&lt;/option&gt;
+    &lt;option value="September"&gt;September&lt;/option&gt;
+    &lt;option value="October"&gt;October&lt;/option&gt;
+    &lt;option value="November"&gt;November&lt;/option&gt;
+    &lt;option value="December"&gt;December&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;&lt;/h1&gt;
+
+  &lt;ul&gt;&lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+var select = document.querySelector('select');
+var list = document.querySelector('ul');
+var h1 = document.querySelector('h1');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // ADD CONDITIONAL HERE
+
+  createCalendar(days, choice);
+}
+
+function createCalendar(days, choice) {
+  list.innerHTML = '';
+  h1.textContent = choice;
+  for (var i = 1; i &lt;= days; i++) {
+    var listItem = document.createElement('li');
+    listItem.textContent = i;
+    list.appendChild(listItem);
+  }
+}
+
+createCalendar(31,'January');
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.output * {
+  box-sizing: border-box;
+}
+
+.output ul {
+  padding-left: 0;
+}
+
+.output li {
+  display: block;
+  float: left;
+  width: 25%;
+  border: 2px solid white;
+  padding: 5px;
+  height: 40px;
+  background-color: #4A2DB6;
+  color: white;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i &lt;= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="למידה_עצמאית_יותר_אפשרויות_צבעים!">למידה עצמאית: יותר אפשרויות צבעים!</h2>
+
+<p>בתרגול זה, אנחנו הולכים לקחת את האופרטור הטרנארי שראינו קודם, ולהפוך אותו למשפט <code>switch</code> שיאפשר לנו לבחור מבין אפשרות אחת מבין אפשרויות רבות יותר עבור האתר הפשוט שלנו. הסתכלו על {{htmlelement("select")}} - הפעם אתם תראו שיש לו חמש אופציות ולא שתיים. אתם נדרשים להוסיף משפט <code>switch</code> ישר מתחת להערת <code>ADD SWITCH STATEMENT //</code>אשר יבצע את הפעולות הבאות:</p>
+
+<ul>
+ <li>הוא אמור לקבל את המשתנה <code>choice</code> כפרמטר שלו.</li>
+ <li>עבור כל מקרה, <code>choice</code> אמור להיות שווה לאחד מהערכים היכולים להיבחר - לדוגמא, לבן, שחור, סגול, צהוב או פסיכודלי. שימו לב שערכים אלו הם case sensitive וזה צריך להיות שווה לערכים של האלמנט <code>&lt;option&gt;</code>.</li>
+ <li>עבור כל מקרה, הפונקציה <code>()update</code> אמורה לרוץ ולקבל אליה כארגומנטים 2 ערכים של צבעים - הראשון עבור הרקע והשני עבור הטקסט. זכרו שערכי הצבעים אלו מחרוזות, אז צריך לעטוף אותם במרכאות. </li>
+</ul>
+
+<p>אם אתם עושים טעות - תמיד ניתן לאתחל את הקוד למצבו הראשוני באמצעות כפתור ה-״Reset״. אם ממש נתקעתם - הסתכלו על הפתרון.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 300px;"&gt;
+  &lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+  &lt;select id="theme"&gt;
+    &lt;option value="white"&gt;White&lt;/option&gt;
+    &lt;option value="black"&gt;Black&lt;/option&gt;
+    &lt;option value="purple"&gt;Purple&lt;/option&gt;
+    &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
+    &lt;option value="psychedelic"&gt;Psychedelic&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;This is my website&lt;/h1&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 450px;width: 95%"&gt;
+var select = document.querySelector('select');
+var html = document.querySelector('.output');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // ADD SWITCH STATEMENT
+}
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n var choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>אלו הדברם העיקריים והמרכזיים שאנחנו צריכים לדעת על משפטי תנאי ומבניהם ב-JavaScript. אם לא הבנתם את הרעיונות שעברנו עליהם בתרגולים למעלה, חזרו על השיעור שוב. ואם משהו לא ברור, <a href="/en-US/Learn#Contact_us">צרו עמנו קשר</a> לשם קבלת עזרה.</p>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<ul>
+ <li><a href="/he/Learn/JavaScript/First_steps/Math#Comparison_operators">Comparison operators - אופרטורים להשוואה</a></li>
+ <li><a href="/he/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">משפטי תנאי בהרחבה</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional (ternary) operator reference</a></li>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/a_first_splash/index.html b/files/he/learn/javascript/first_steps/a_first_splash/index.html
new file mode 100644
index 0000000000..76a5d40f9b
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/a_first_splash/index.html
@@ -0,0 +1,634 @@
+---
+title: מבט ראשון ל-JavaScript
+slug: Learn/JavaScript/First_steps/A_first_splash
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">עכשיו כשלמדתם קצת על התיאוריה של JavaScript, אנחנו יכולים להיכנס לעומק יותר ולצדדים הפרקטיים. אנחנו נבנה יחד משחק ״נחש את המספר״, צעד אחד צעד. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>להתנסות בכתיבת קוד JavaScript ולהבין כיצד לנסות לעשות זאת.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>אנו לא מצפים שתבינו את כל הקוד לפרטי פרטים ישר על ההתחלה. אנחנו רק רוצים להציג לכם בצורה עקרונית את הרעיון כיצד השפה עובדת. בהמשך המאמרים ניכנס יותר לעומק. </p>
+
+<div class="note">
+<p>הרבה מהמאפיינים והאפשרויות ב-JavaScript זהים לשפות תכנות אחרות - כמו לדוגמא לולאות, פונקציות וכד׳. הסינטקס אולי שונה, אבל הרעיונות בגדול דומים.</p>
+</div>
+
+<h2 id="לחשוב_כמו_מתכנת_או_מתכנתת">לחשוב כמו מתכנת או מתכנתת</h2>
+
+<p>אחד מהדברים הקשים ללמידה בפיתוח תוכנה אינו למידת השפה או הסינטקס, אלא איך אנחנו מחילים את השפה לפתרון בעיות אמיתיות. אנחנו צריכים להתחיל לחשוב כמו מתכנתים - זה בעצם כולל בתוכו התבוננות על התיאור של מה התוכנית שלנו צריכה לעשות, להבין מה מאפייני הקוד שאנחנו צריכים כדי להשיג את אותם דברים ואיך אנחנו גורמים להם לעבוד יחד. </p>
+
+<p>זה דורש מאיתנו שילוב של עבודה קשה, ניסיון עם סינטקס השפה, תרגול, וכן מעט יצירותיות. ככל שנכתוב קוד יותר, ככה נשתפר בכך. אנחנו לא יכולים להבטיח שנגרום לך לפתח ״מוח של מתכנת״ בחמש דקות, אבל אנחנו נתן לך את מירב ההזדמניות לתרגל חשיבה של מתכנת בקורס זה.</p>
+
+<h2 id="דוגמא_—_משחק_״נחש_את_המספר״">דוגמא — משחק ״נחש את המספר״</h2>
+
+<p>במאמר זה אנחנו נראה לך כיצד ליצור משחק פשוט:</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Number guessing game&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;Number guessing game&lt;/h1&gt;
+    &lt;p&gt;We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Submit guess" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;script&gt;
+    // Your JavaScript goes here
+    let randomNumber = Math.floor(Math.random() * 100) + 1;
+    const guesses = document.querySelector('.guesses');
+    const lastResult = document.querySelector('.lastResult');
+    const lowOrHi = document.querySelector('.lowOrHi');
+    const guessSubmit = document.querySelector('.guessSubmit');
+    const guessField = document.querySelector('.guessField');
+    let guessCount = 1;
+    let resetButton;
+
+    function checkGuess() {
+      let userGuess = Number(guessField.value);
+      if (guessCount === 1) {
+        guesses.textContent = 'Previous guesses: ';
+      }
+
+      guesses.textContent += userGuess + ' ';
+
+      if (userGuess === randomNumber) {
+        lastResult.textContent = 'Congratulations! You got it right!';
+        lastResult.style.backgroundColor = 'green';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else if (guessCount === 10) {
+        lastResult.textContent = '!!!GAME OVER!!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = 'Wrong!';
+        lastResult.style.backgroundColor = 'red';
+        if(userGuess &lt; randomNumber) {
+          lowOrHi.textContent = 'Last guess was too low!' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = 'Last guess was too high!';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    function setGameOver() {
+      guessField.disabled = true;
+      guessSubmit.disabled = true;
+      resetButton = document.createElement('button');
+      resetButton.textContent = 'Start new game';
+      document.body.appendChild(resetButton);
+      resetButton.addEventListener('click', resetGame);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      const resetParas = document.querySelectorAll('.resultParas p');
+      for(let i = 0 ; i &lt; resetParas.length ; i++) {
+        resetParas[i].textContent = '';
+      }
+
+      resetButton.parentNode.removeChild(resetButton);
+      guessField.disabled = false;
+      guessSubmit.disabled = false;
+      guessField.value = '';
+      guessField.focus();
+      lastResult.style.backgroundColor = 'white';
+      randomNumber = Math.floor(Math.random() * 100) + 1;
+    }
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>נסו לשחק עם הקוד קצת, הכירו את המשחק לפני שאתם ממשיכים הלאה.</p>
+
+<p>תדמיינו שהבוס שלכם נתן את התיאור הקצר ליצירת המשחק הזה:</p>
+
+<blockquote>
+<p>הבוס: ״אני רוצה שתצרו משחק פשוט של ״נחש את המספר״. </p>
+
+<p>הוא אמור ליצור מספר בין 1 ל-100, כאשר המשתתף צריך לנחש את המספר בכפולות של 10. </p>
+
+<p>אחרי כל פעם שהמשתתף ניחש את המספר, המשחק יגיד לו אם הוא טעה או צדק, אם הוא טעה, הוא יגיד לו האם הניחוש היה גבוה מדי או נמוך מדיץ בנוסף, המשחק צריך להגיד למשתתף כמה ניחושים הוא ביצע כבר. המשחק יסתיים ברגע שהמשתתף ינחש נכונה את המספר האקראי או ברגע שנגמרו לו הנסיונות. כשהמשחק הסתיים, המשתמש צריך לקבל אפשרות להתחיל את המשחק מחדש. </p>
+</blockquote>
+
+<p>עכשיו, ננסה להפוך את למשימות פשוטות, בצורה מתוכננת כמה שאפשר: </p>
+
+<ol>
+ <li>צור מספר בין 1 ל-100.</li>
+ <li>שמור את הניסיון של המשתתף. תתחיל במספר 1 שכן זהו הניסיון הראשון.</li>
+ <li>ספק למשתמש דרך לנחש את המספר האקראי.</li>
+ <li>ברגע שהמתשמש ניחש, שמור את הניחוש שלו כדי שתוכל להציג לו את הניחושים הקודמים.</li>
+ <li>בדוק האם המשתמש ניחש את המספר האקראי.</li>
+ <li>אם ניחש נכונה:
+  <ol>
+   <li>הצג הודעת זכייה. </li>
+   <li>תמנע מהמשתמש להזין ניחושים נוספים.</li>
+   <li>תציג למשתמש אפשרות לאתחל את המשחק.</li>
+  </ol>
+ </li>
+ <li>אם המשתמש לא ניחש נכונה ונותרו לו הנסיונות :
+  <ol>
+   <li>תציג למשתמש שהוא טעה.</li>
+   <li>תאפשר לו לנחש שוב.</li>
+   <li>תעלה את מספר הנסיונות שלו ב-1.</li>
+  </ol>
+ </li>
+ <li>אם המשתמש לא ניחש נכונה ונגמרו לו הנסיונות:
+  <ol>
+   <li>תציג למשתמש שהמשחק נגמר.</li>
+   <li>תמנע מהמשתמש להזין ניחושים נוספים.</li>
+   <li>תציג למשתמש אפשרות לאתחל את המשחק.</li>
+  </ol>
+ </li>
+ <li>ברגע שהמשחק אותחל מחדש, תוודא שהלוגיקה והנראות של המשחק מאותחלים לחלוטין וחזור לצעד מספר 1.</li>
+</ol>
+
+<p>כעת נראה כיצד ניתן להפוך את רשימת המשימות הזו לקוד של JavaScript.</p>
+
+<h3 id="הגדרות_ראשונות">הגדרות ראשונות</h3>
+
+<p>על מנת להתחיל את המדריך, צרו עותק מקומי של הקובץ <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> או ראו <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">כדף אינטרנט</a>.</p>
+
+<p>פתחו אותו גם בעורך הקוד וגם בדפדפן. בנקודה זו אתם תראו כותרת, פסקת הוראות וטופס להכניס ניחוש, אבל הטופס לא עובד כראוי. </p>
+
+<p>אנחנו נכניס את הקוד שלנו בתוך האלמנט {{htmlelement("script")}} בתחתית קובץ ה-HTML:</p>
+
+<pre class="brush: html">&lt;script&gt;
+
+  // Your JavaScript goes here
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="הוספת_משתנים_לשם_אחסון_המידע">הוספת משתנים לשם אחסון המידע</h3>
+
+<p>ראשית, הכניסו את השורות הבאות תוך האלמנט {{htmlelement("script")}} :</p>
+
+<pre class="brush: js">let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+const guesses = document.querySelector('.guesses');
+const lastResult = document.querySelector('.lastResult');
+const lowOrHi = document.querySelector('.lowOrHi');
+
+const guessSubmit = document.querySelector('.guessSubmit');
+const guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;</pre>
+
+<p>חלק זה של הקוד מגדיר משתנים וקבועים שאנחנו צריכים על מנת לאחסן את המידע שהתוכנית שלנו תצטרך. <strong>משתנים הם בעצם כמו קופסאות אחסון עבור ערכים מסוגים שונים אשר יכולים להיות מספרים, טקסט, אובייקטים, מערכים וכד</strong>׳. </p>
+
+<p>אנו יוצרים משתנה באמצעות שימוש במילה שמורה של JavaScript בשם <code>let</code>או <code>var</code> ולאחר מכן בשם שאנחנו רוצים להעניק למשתנה שלנו. (אנחנו נלמד על ההבדלים ביניהם ב<a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">מאמר בהמשך</a>).</p>
+
+<p><strong>קבועים</strong> לעומת זאת, אלו מעין קופסאות אחסון שנועדו לאחסן ערכים שאנחנו לא נרצה לשנות, ואותם אנחנו יוצרים באמצעות מילה שמורה בשם  <code>const</code>. במקרה שלנו אנחנו משתמשים בקבועים על מנת לאחסן את ההפניות לאלמנטים בדף ה-html, כלומר לממשק המשתמש. אמנם יכול להיות שהתוכן שלהם ישתנה, אבל ההפניה לאותו אלמנט תישאר קבועה לאורך התוכנית.</p>
+
+<p>על מנת לשים ערך מסויים במשתנה או בקבוע מסויים, אנחנו משתמשים בסימן ״שווה״ (<code>=</code>), ולאחר מכן הערך שאנחנו רוצים להשים באותו משתנה או קבוע.</p>
+
+<p>בדוגמא שלנו :</p>
+
+<ul>
+ <li>המשתנה הראשון — <code>randomNumber</code> — הושם לו ערך אקראי בין  1 ל- 100, באמצעות שימוש במתודה אשר נמצאת ב-JavaScript.</li>
+ <li>שלושת הקבועים הראשונים נועדו על מנת לאחסן או להשים את ההפנייה לפסקאות הרלוונטיות ב-html אליהם אשר התוכן שלהם ימולא בערכים שיינתו להם בהמשך:
+  <pre class="brush: html">&lt;p class="guesses"&gt;&lt;/p&gt;
+&lt;p class="lastResult"&gt;&lt;/p&gt;
+&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>שני הקבועים הבאים נועדו לאחסן הפנייה לקלט של הטופס ולכפתור השליחה ונועדו לשם שליטה בניחוש שביצע המשתמש.</li>
+ <li>
+  <pre class="brush: html">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>שני המשתנים האחרונים שלנו נועדו לאחסן את מס׳ הניחושים וכן להוות הפנייה לכפתור הריסט, שאינו קיים לבינתיים.</li>
+</ul>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אתם תלמדו עוד על משתנים וקבועים בהמשך הקורס, החל מה<a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">מאמר הבא</a>.</p>
+</div>
+
+<h3 id="פונקציות">פונקציות</h3>
+
+<p>הוסיפו את הקוד הבא, מתחת לקוד הקיים שלכם:</p>
+
+<pre class="brush: js">function checkGuess() {
+  alert('I am a placeholder');
+}</pre>
+
+<p>פונקציות הם בעצם חלקי קוד הניתנים לשימוש חוזר, אותם ניתן לרשום פעם אחת, ולהריץ שוב ושוב. זה מאוד שימושי. יש כמה דרכים להגדיר פונקציה אבל כעת אנחנו נתמקד בצורה פשוטה אחת. </p>
+
+<p>כאן אנחנו הגדרנו את הפונקציה באמצעות שימוש במילה שמורה <code>function</code> ולאחר מכן שם הפונקציה וסוגריים <code>()</code>. לאחר מכן, הוספנו סוגריים מסולסלים <code>{}</code>. כל מה שנמצא בתוך הסוגריים המסולסלים זה הקוד שנרצה שירוץ בכל פעם שנקרא לפונקציה. </p>
+
+<p>כשנרצה להריץ את הקוד, אנחנו פשוט נקליד את שם הפונקציה ובצמוד לה נשים סוגריים <code>()</code>. שמרו את הקובץ ורענן את הדף בדפדפן. לאחר מכן, הזן<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"> בקונסולה</a>, את השורה הבאה:  </p>
+
+<pre class="brush: js">checkGuess();</pre>
+
+<p>לאחר שנלחץ על  <kbd>Return</kbd>/<kbd>Enter</kbd>, אנחנו אמורים לראות שקפצה הודעה שרשמה "<samp>I am a placeholder</samp>".</p>
+
+<p>הגדרנו פונקציה שמקפיצה הודעה למשתמש בכל פעם שנקרא לה.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אתם תלמדו עוד על פונקציות <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">בהמשך הקורס</a>.</p>
+</div>
+
+<h3 id="אופרטורים_(Operators)">אופרטורים (Operators)</h3>
+
+<p>אופרטורים של JavaScript מאפשרים לנו לבצע מבחנים מסויימים, חישובים מתמטיים, חיבור מחרוזות ודברים נוספים רבים. </p>
+
+<p>אם לא עשיתם זאת עד עכשיו, שמרו את הקוד, ורעננו את הדף. לאחר מכן, פתחו את הקונסולה. נסו להזין את הדוגמאות המפורטות למטה בעמודת ״דוגמא״, בדיוק בצורה שבה הן מופיעות ולאחר מכן לחצו <kbd>Return</kbd>/<kbd>Enter</kbd>  וראו את התוצאות. </p>
+
+<p>נתחיל עם אופרטורים מתמטיים:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">אופרטור</th>
+   <th scope="col">שם</th>
+   <th scope="col">דוגמא</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>חיבור</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>חיסור</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>כפל</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>חילוק</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>ניתן להשתמש בסימן החיבור + על מנת לחבר מחרוזות ביחד (בתכנות, בשפה האנגלית זה נקרא: <em>concatenation).</em></p>
+
+<p>נסו להזין את השורות הבאות בקונסולה, אחת בכל פעם:</p>
+
+<pre class="brush: js">let name = 'Bingo';
+name;
+let hello = ' says hello!';
+hello;
+let greeting = name + hello;
+greeting;</pre>
+
+<p>יש גם כמה קיצורים לאופרטורים מתמטיים, לדוגמא, אם אנחנו פשוט רוצים להוסיף מחרוזת טקסט חדשה למחרוזת טקסט קיימת ולהחזיר את המחרוזת המחוברת של שתיהן, נוכל לבצע את הדבר הבא: </p>
+
+<pre class="brush: js">name += ' says hello!';</pre>
+
+<p>זה זהה בתוצאה לדבר הבא:</p>
+
+<pre class="brush: js">name = name + ' says hello!';</pre>
+
+<p>כשאנחנו מריצים מבחני אמת/שקר (לדוגמא, בתוך תנאים), אנחנו משתמשים ב<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">אופרטורים השוואתיים</a>: </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">אופרטור</th>
+   <th scope="col">שם</th>
+   <th scope="col">דוגמא</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>האם זהה לחלוטין?</td>
+   <td>
+    <pre class="brush: js">
+5 === 2 + 4 // false
+'Chris' === 'Bob' // false
+5 === 2 + 3 // true
+2 === '2' // false; number versus string
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>האם לא זהה?</td>
+   <td>
+    <pre class="brush: js">
+5 !== 2 + 4 // true
+'Chris' !== 'Bob' // true
+5 !== 2 + 3 // false
+2 !== '2' // true; number versus string
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>קטן מ-</td>
+   <td>
+    <pre class="brush: js">
+6 &lt; 10 // true
+20 &lt; 10 // false</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>גדול מ-</td>
+   <td>
+    <pre class="brush: js">
+6 &gt; 10 // false
+20 &gt; 10  // true</pre>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="משפטי_תנאי">משפטי תנאי</h3>
+
+<p>נחזור לפונקציית  <code>()checkGuess</code> שלנו. אנחנו נרצה שהיא תעשה יותר מאשר להוציא הודעה פשוטה למשתמש. אנחנו רוצים לבדוק האם הניחוש של המשתמש היה נכון או לא  ולהגיב ובהתאם. </p>
+
+<p> בנקודה זו, החלף את הפונקציה <code>()checkGuess</code> עם הקוד הבא: </p>
+
+<pre class="brush: js">function checkGuess() {
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess &lt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>נעבור על כל חלק בקוד על מנת להסביר אותו: </p>
+
+<ul>
+ <li>בשורה 2 אנחנו מצהירים על משתנה בשם <code>userGuess </code>ומשימים לו את הערך שיהיה הערך אשר מוכנס על ידי המשתמש לתוך תיבת הקלט. אנחנו מריצים את הערך שהוכנס על ידי המשתמש במתודה מובנית בשפה בשם <code>()Number</code>  מנת לוודא שאכן המספר שהמשתמש הזין, הוא מספר ולא טקסט.</li>
+ <li>בשורות 3-5, אנחנו מזינים לראשונה את משפט התנאי שלנו. משפט תנאי מאפשר לנו להריץ קוד באופן סלקטיבי, כאשר הקוד ירוץ בהתבסס על התקיימות תנאי כלשהו או היעדר התקיימותו. הצורה הפשוטה ביותר של משפט תנאי תתחיל במילה השמורה <code>if</code> ולאחר מכן סוגריים רגילים <code>()</code> ואז סוגריים מסולסלות <code>{}</code>. בתוך הסוגריים הרגילים אנחנו נזין את התנאי/מבחן. אם התנאי יתקיים, כלומר תוצאת המבחן היא אמת, אז הקוד בתוך הסוגריים המסולסלות ירוץ. אם לא, אנחנו לא נריץ את הקוד בסוגריים המסולסלים והתוכנית תמשיך הלאה. </li>
+ <li>במקרה הזה, התנאי/המבחן בודק האם המשתנה <code>userGuess</code> שווה באופן מוחלט ל-1, כלומר האם זה התור הראשון של המשתתף במשחק:
+  <pre class="brush: js">guessCount === 1</pre>
+  אם כן, אנחנו נציג לו הודעה כזו באמצעות שינוי הטקסט בתוכן של הפסקה למלל הבא:   "<samp>Previous guesses:</samp>"   ואם לא, לא. </li>
+ <li>שורה 6 מוסיפה את התוכן הנוכחי של ניחוש המשתמש (<code>userGuess</code> ) לסוף הפסקה <code>guesses</code> בצירוף רווח מסויים בין הניחושים.</li>
+ <li>שורות 8-24 מבצעות מספר בדיקות:
+  <ul>
+   <li>התנאי הראשון <code>{ }</code><code>()if</code>בודק האם הניחוש של המשתמש (<code>userGuess)</code> הוא שווה למספר האקראי (<code>randomNumber)</code> שהוגדר בתחילת הקוד שלנו.
+    <ul>
+     <li>אם כן, המשתתף ניחש נכונה את המספר, וניצח במשחק. </li>
+     <li>נציג לו הודעת זכייה בצבע ירוק.</li>
+     <li>נמחק את התוכן של הפסקה שמציינת האם הניחוש היה גדול/קטן. </li>
+     <li>נריץ פונקציה שנקראת <code>()setGameOver</code> אשר נדון בה מאוחר יותר. </li>
+    </ul>
+   </li>
+   <li>אם התנאי הראשון לא התקיים, נריץ מבחן נוסף באמצעות שימוש בביטוי <code> { } () else if</code>. מבחן זה בודק האם זהו התור האחרון של המשתתף ואם כן, ירוץ קוד זהה לקוד שנמצא בבלוק הקודם, למעט כך שתוקפץ הודעה שהמשחק נגמר ולא הודעת זכייה. </li>
+   <li>התנאי האחרון בשרשרת, אותו הגדרנו באמצעות הביטוי <code>{} else</code> מתפקד כמו ברירת מחדל. הוא מכיל קוד שירוץ רק אם אף אחד מהתנאים לעיל לא התקיים, כלומר לא החזיר ערך אמת <code>true</code>. במקרה כזה, נודיע למשתמש שהוא טעה, ונבצע בדיקת תנאי נוספת (שורות 19-23) לבדוק האם הניחוש של המשתתף במשחק היה גבוה או נמוך מהמספר האקראי, וכן נודיע לו בהתאם. </li>
+  </ul>
+ </li>
+ <li>שורות 26-28 של הפונקציה מבצעות הכנה לניחוש הבא של המשתתף - אנו מגדילים את המשתנה <code>guessCount</code> ב-1 על מנת לעדכן את כמות הניחושים של המשתתף, ומרוקנים את הערך של הקלט, על מנת שהמשתמש יזין את הניחוש החדש. לבסוף אנו מריצים מתודה על האובייקט המכיל את אלמנט הקלט מהמשתמש שמאפשרת לנו לגרום לכך שהפוקוס של המסך יהיה באלמנט הקלט. </li>
+</ul>
+
+<h3 id="אירועים">אירועים</h3>
+
+<p>בשלב זה הגדרנו את פונקציית <code>()checkGuess</code> אבל היא לא תעשה כלום כי לא קראנו לה עדיין. באופן אידיאלי, אנחנו רוצים ״<strong>לקרוא</strong>״ (<strong>Invoke</strong>) לפונקציה כאשר המשתמש ילחץ על לחצן ״Submit guess" ועל מנת לבצע זאת אנחנו צריכים לעשות שימוש באירוע (Event). אירועים אלו דברים המתרחשים בתוך הדפדפן - כפתור נלחץ, דף נטען, וידאו מתנגן וכד׳ - ובהתאם, אנחנו יכולים להריץ בלוקים של קוד. הקונסטרקטור (בעברית: הבנאי), שמאזין לאותו אירוע שמתרחש בדפדפן נקרא מאזין אירוע (<strong>event listeners</strong>), ואילו בלוק הקוד שרץ בתגובה לאותו אירוע נקרא מטפל אירוע (<strong>event handlers</strong>).</p>
+
+<p>הוסף את הקוד הבא מתחת לפונקציית<code> ()checkGuess</code> :</p>
+
+<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p>כאן אנו מוסיפים event listener<strong> </strong>לכפתור <code>guessSubmit</code>. מתודה זו מקבלת 2 ערכים (שנקראים ״ארגומנטים״) - הראשון הוא סוג האירוע שאנחנו רוצים להאזין לו (במקרה, אירוע מסוג  <code>click</code>), ואותו נזין כמחרוזת, עטוף בגרשיים, לאחר מכן פסיק, ואז את event handlers, שהוא בעצם הקוד שנרצה שירוץ ברגע שהתרחש האירוע (במקרה זה, פונקציית <code>()checkGuess</code> ). תשומת לב כי אנחנו לא צריכים להכניס סוגריים כאשר אנחנו רושמים את הפונקציה <code>checkGuess </code>בתוך המתודה {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p>
+
+<p>נסו לשמור ולרען את הדף כעת - הדוגמא אמורה לעבוד, עד נקודה מסויימת. הבעיה היחידה היא שכאשר המשתתף ינחש נכון או המשחק הסתיים כי נגמרו לו הנסיונות, המשחק יסתיים בצורה לא רצויה, מכיוון שלא הגדרנו את הפונקציה <code>()setGameOver</code> שאמורה לרוץ ברגע שהמשחק יסתיים (הן אם המשתתף ניחש נכון והן אם למשתתף נגמרו הנסיונות).</p>
+
+<p>כעת נוסיף את הקוד החסר ונשלים את הפונקציונליות של המשחק.  </p>
+
+<h3 id="השלמת_הפונקציונליות_של_המשחק">השלמת הפונקציונליות של המשחק</h3>
+
+<p>כעת נוסיף את הפונקציה <code>()setGameOver</code> מתחת לקוד הנוכחי: </p>
+
+<pre class="brush: js">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li>שתי השורות הראשונות משנות את <code>guessField</code> ושל <code>guessSubmit</code> לבלתי זמין - זאת באמצעות שינוי המאפיין של אובייקטים אלו ל-<code>disabled</code>. זה הכרחי על מנת למנוע מהמשתמש להזין ניחושים נוספים. </li>
+ <li>שלושת השורות הבאות מייצרות לנו אלמנט {{htmlelement("button")}} חדש, ומוסיפות אותו בתחתית ה-html הנוכחי שלנו. </li>
+ <li>השורה האחרונה מוסיפה event listner לכפתור החדש, ש-״מאזין״ לאירוע של הקלקה על הכפתור, וכשזה קורה, מריץ את הפונקציה שנקראת <code>()resetGame</code>.</li>
+</ul>
+
+<p>עת אנחנו צריכים להגדיר את הפונקציה הזו. הוסף את הקוד הבא מתחת לקוד הנוכחי: </p>
+
+<pre class="brush: js">function resetGame() {
+  guessCount = 1;
+
+  const resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i &lt; resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p>קוד זה מאתחל הכל לאיך שהוא היה בתחילת המשחק: </p>
+
+<ul>
+ <li>משים ערך של 1 במשתנה <code>guessCount</code>. (שורה 2)</li>
+ <li>מרוקן את כל תוכן הטקסט בפסקאות. (שורות 4-7)</li>
+ <li>מוחק את כפתור האתחול. (שורה 9)</li>
+ <li>הופך את <code>guessField</code> ו- <code>guessSubmit</code> לזמינים שוב. (שורות 11-12)</li>
+ <li>מרוקן מתוך<code>guessField</code> כל טקסט שנמצא בתוכו. (שורה 13) </li>
+ <li>מזיז את הפוקוס במסך ל-<code>guessField</code>. (שורה 14) </li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">משנה את הרקע של פסקת </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">lastResult</code>. (שורה 16)</li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">לבסוף, יוצר שוב מספר אקראי, חדש, על מנת שלא ננחש שוב את אותו מספר. </span></li>
+</ul>
+
+<p><strong>בשלב זה - יש לנו משחק שעובד במלואו. פשוט יחסית, אך עובד.  </strong></p>
+
+<p>כעת נדבר על אפשרויות נוספות שראינו, ואולי לא שמנו לב. </p>
+
+<h3 id="לולאות">לולאות</h3>
+
+<p>חלק מתוך הקוד למעלה שנרצה להתעמק בו הוא לולאת מסוג <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a>.</p>
+
+<p>לולאות הן עקרון מאוד חשוב בתכנות, ומאפשרות לנו להריץ קוד שוב ושוב, עד שתנאי מסויים יתרחש. </p>
+
+<p>על מנת להתחיל, פתח את ה<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה </a>שוב, והכנס את הקוד הבא: </p>
+
+<pre class="brush: js">for (let i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>מה קרה?</p>
+
+<p>המספרים 1 עד 20 הודפסו לקונסולה. זה מכיוון שהשתמשנו בלולאה מסוג <code>for</code>. לולאה מסוג <code>for</code> מקבלת 3 ערכים (ארגומנטים):</p>
+
+<ol>
+ <li><strong>ערך ראשון (Starting Value) -</strong> במקרה זה אתחלנו את המונה ל-1, אך אנו יכולים להתחיל בכל מספר שנרצה. כמו כן, את שם המשתנה <code>i</code> ניתן להחליף בכל שם שנרצה. אנו מבצעים שימוש ב-<code>i</code> כי זה קצר ונוח לזכור. </li>
+ <li><strong>תנאי יציאה (An exit condition) - </strong>כאן הגדרנו שתנאי היציאה מהלולאה, כלומר מתי הלולאה תפסיק לרוץ יהיה כל עוד <code>i &lt; 21</code>. כלומר הלולאה תרוץ כל זמן ש-<code>i</code> יהיה קטן מ-21. ברגע ש-<code>i</code> יהיה שווה ל-21, הלולאה תפסיק לרוץ.</li>
+ <li>המוסיף (<strong>An incrementor</strong>) - כאן הגדרנו <code>i++</code> כלומר נעלה את הערך של <code>i</code>  ב-1 בכל פעם שהקוד שנמצא בתוך הסוגריים המסולסלות <code>{}</code> מסיים לרוץ (כל איטרציה-iteration), עד אשר <code>i</code> יגיע לערך 21. במקרה הזה אנחנו פשוט מדפיסים לקונסולה את הערך של <code>i</code> בכל איטרציה (iteration), באמצעות {{domxref("Console.log", "console.log()")}}.</li>
+</ol>
+
+<p>בוא נסתכל כעת על הלולאה במשחק הניחוש שבנינו בתוך פונקציית <code>()resetGame</code>:</p>
+
+<pre class="brush: js">let resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>קוד זה יוצר משתנה מסוג מערך (נדבר עליו בהמשך) בשם <code>resetParas</code> המכיל רשימה של כל האלמנטים מסוג p הנמצאים בתוך אלמנט עם <code>class</code> בשם <code>resultParas</code> (במקרה שלנו זה האלמנט הבא: <code>&lt;div class="resultParas"&gt;</code>). </p>
+
+<p><code>resetParas</code> נוצר באמצעות שימוש במתודה {{domxref("Document.querySelectorAll", "querySelectorAll()")}}. </p>
+
+<p>לאחר מכן, הוא עובר באמצעות לולאה על כל איבר במערך, ומסיר את התוכן טקסט של כל איבר. </p>
+
+<h3 id="דיון_קצר_על_אובייקטים">דיון קצר על אובייקטים</h3>
+
+<p>נוסיף שיפור נוסף לפני שנמשיך בדיון : הוסיפו את הקוד הבא, מתחת לקוד זה: <code>let resetButton;</code> הנמצא בראש הדף, ולאחר מכן שמרו את הקובץ: </p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>קוד זה עושה שימוש במתודה בשם {{domxref("HTMLElement.focus", "focus()")}} על מנת לשים את סמן העבר בתוך הטקסט של תיבת הקלט {{htmlelement("input")}} ברגע שהדף נטען, כך שהמשתמש יוכל הזין את הניחוש הראשון שלו ישר כשהדף נטען, ללא צורך ללחוץ על תיבת הקלט. זוהי אמנם תוספת קטנה, אך היא משפרת השימוש של המשתמש ומאפשרת לו להבין באופן ויזואלי איך לשחק את המשחק.</p>
+
+<p>נכנס לזה קצת יותר לעומק. ב-JavaScript, כל דבר הוא אובייקט. אובייקט הוא אוסף של מס׳ פונקציונליות וערכים אשר קובצו יחד לקבוצה אחת. אנו יכולים ליצור אובייקט בעצמו, אך נגע בנושא זה בהמשך. לצורך העניין במאמר הנוכחי, אנחנו נדון בקצרה באובייקטים המובנים בדפדפן, אשר מאפשרים לנו לעשות הרבה דברים שימושיים. </p>
+
+<p>במקרה הנוכחי, יצרנו תחילה קבוע בשם <code>guessField</code> אשר אחסן בתוכן הפנייה לתיבת קלט הטקסט ב-html - השורה הבאה יכולה להימצא באזור שבו הצרנו על המשתנים/קבועים בתחילת הקוד שלנו: </p>
+
+<pre class="brush: js">const guessField = document.querySelector('.guessField');</pre>
+
+<p>על מנת לקבל את ההפניה הזו, השתמשנו במתודה  {{domxref("document.querySelector", "querySelector()")}} של האובייקט {{domxref("document")}}. דוגמא נוספת היא למתודה של אובייקט זה היא  <code>()querySelector</code> אשר מקבלת מידע אחד מסוג <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">סלקטור של CSS</a> - ואותו סלקטור בוחר את האלמנט שאנחנו רוצים להפנות אליו. </p>
+
+<p>מכיוון ש-<code>guessField</code> מכיל כעת הפנייה לאלמנט {{htmlelement("input")}}, הוא יכול כעת לגשת למספר מאפיינים (properties) ומתודות (methods). באופן עקרוני, properties אלו משתנים המאוחסנים בתוך אובייקט, וחלקם לא יכולים לשנות את ערכם, ואילו methods אלו פונקציות המאוחסנות בתוך אובייקט. מתודה אחת אשר זמינה לאלמנט {{htmlelement("input")}}, היא <code>()focus</code>, כך שאנחנו יכולים להשתמש בקוד למטה, על מנת לבצע פוקוס לתיבת קלט הטקסט: </p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>משתנים שאינם כוללים הפנייה לאלמנטים של טפסים, אינם יכולים לגשת למתודה הזו והיא לא תהיה זמינה עבורם. לדוגמא, הקבוע <code>guesses</code> מכיל הפנייה לאלמנט  {{htmlelement("p")}} ו-המשתנה <code>guessCount</code> מכיל מספר. </p>
+
+<h3 id="לשחק_ולנסות_את_האובייקטים_של_הדפדפן">לשחק ולנסות את האובייקטים של הדפדפן</h3>
+
+<p>בואו נשחק טיפה עם האובייקטים של הדפדפן.</p>
+
+<ol>
+ <li>פתחו תוכנית בדפדפן.</li>
+ <li>פתחו את <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> ווודאו שהקונסולה מופיעה. </li>
+ <li>רשמו <code>guessField</code> והקונסולה תציג לכם את המשתנה המכיל את האלמנט {{htmlelement("input")}}. אתם תבחינו שהקונסולה גם משלימה את השמות של האובייקטים שקיימים בסביבת ההרצה, כולל משתנה. </li>
+ <li>כעת הזינו את הקוד הבא: </li>
+ <li>
+  <pre class="brush: js">guessField.value = 'Hello';</pre>
+  המאפיין (property) בשם <code>value</code> מייצג את הערך שהוזן לתוך שדה הטקסט. ניתן לראות שעם הזנת הקוד לעיל, אנחנו משנים את הטקסט בשדה הטקסט. </li>
+ <li>נסו לרשום בקונסולה <code>guesses</code>. הקונסולה תראה לכם שהוא מכיל אלמנט מסוג{{htmlelement("p")}}.</li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">כעת הזן את הקוד הבא:</span></li>
+ <li>
+  <pre class="brush: js">guesses.value</pre>
+  הקונסולה תחזיר את הערך <code>undefined</code> מכיוון שאלמנט מסוג {{htmlelement("p")}} לא מקבל מאפיין מסוג <code>value</code>.</li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">על מנת לשנות את הטקסט בתוך</span> {{htmlelement("p")}} , אנחנו צריכים להשתמש במאפיין בשם <span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{domxref("Node.textContent", "textContent")}}</span></li>
+ <li>כעת הזינו את הקוד הבא<span style="font-size: 1rem; letter-spacing: -0.00278rem;">:</span></li>
+ <li>
+  <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre>
+ </li>
+ <li>כעת ננסה לשנות עיצוב באמצעות גישה ל-properties של האובייקט:
+  <pre class="brush: js">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  כל אלמנט שנמצא בדף מכיל מאפיין בשם <code>style</code> אשר הוא בעצמו אובייקט המכיל את כללי ה-CSS ה-inline שהוחלו על אותו אובייקט (ואף ניתן להחיל עליו כללי CSS או למחוק את הכללים הנוכחיים או להחליפם באחרים) . זה מאפשר לנו לשנות באופן דינמי את העיצוב של האובייקט באמצעות JavaScript.</li>
+</ol>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>סיימנו לבנות את הדוגמא. בדקו את הקוד הסופי שלכם וודאו שהוא עובד כראוי, או שתוכלו <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">לשחק עם הגרסה הסופית פה</a> אם אתם לא מצליחים לגרום לקוד שלכם לעבוד, נסו להשוות אותו אל מול <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">קוד המקור</a>. </p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/arrays/index.html b/files/he/learn/javascript/first_steps/arrays/index.html
new file mode 100644
index 0000000000..44675349fa
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/arrays/index.html
@@ -0,0 +1,564 @@
+---
+title: Arrays - מערכים
+slug: Learn/JavaScript/First_steps/Arrays
+translation_of: Learn/JavaScript/First_steps/Arrays
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">במאמר האחרון במודול זה, אנחנו נדע במערכים - דרך מסודרת וקלה לאחסן רשימה פריטי מידע תחת משתנה אחד. אנחנו נבין מדוע שמוש במערך הוא שימושי כל כך ונבין כיצד ליצור מערך, לשנות את האיברים שלו, למחוק או להוסיף לו איברים ועוד.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הבנה בסיסית של מחשב, הבנה בסיסית של HTML, CSS ו - JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>הבנה של מערכים וביצוע פעולות שונות עליהם</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="מה_זה_בעצם_מערך_-_Array">מה זה בעצם מערך - Array?</h2>
+
+<p>מערכים לרוב מתוארים כאובייקט של מעין רשימה (״list-like objects״). בעיקרון, אלו אובייקטים המכילים מספר ערכים שמאוחסנים יחד.</p>
+
+<p>אובייקטים מסוג מערך יכולים להיות מאוחסנים בתוך משתנה ונוכל לטפל בהם בדיוק כמו שאנחנו מטפלים במשתנים אחרים.</p>
+
+<p>אנו יכולים לטפל בכל ערך בודד באותו במערך או במערך בכללותו. אנחנו יכולים לעבור על כל איברי המערך אחד אחרי השני ולבצע בהם פעולות שונות. כך לדוגמא, אם יש לנו סדרה של מוצרים והמחירים שלהם מאוחסנים במערך, אנחנו רוצים לעבור על כל המחירים ולהדפיס אותם בחשבונית, ובמקביל לחשב את הסכום הכולל של המוצרים יחד עם המחירים שלהם.</p>
+
+<p>אם לא היו לנו מערכים, היינו צריכים לשמור כל פריט במשתנה אחר, ואז לכתוב קוד שידפיס את המחיר בנפרד עבור כל משתנה. זה היה הופך את הקוד שלנו להרבה יותר מורכב וארוך ופחות יעיל. אם היו לנו 10 פריטי להדפיס לחשבונית זה עוד נשמע הגיוני, אך מה נעשה במצב שיש לנו 100 פריטים או 1,000 פריטים? נחזור לדוגמא זו בהמשך המאמר על מנת להבין כיצד ניתן לעשות זאת.</p>
+
+<p>כמו במאמרים קודמים, אנחנו נלמד על הבסיס של מערכים באמצעות שימוש ב<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה</a>.</p>
+
+<h3 id="יצירת_מערכים">יצירת מערכים</h3>
+
+<p>מערכים כוללים סוגריים מרובעות <code>[]</code> וכל איבר (אלמנט) במערך מופרד מאיבר אחר על ידי פסיק <code>,</code>.</p>
+
+<ol>
+ <li>נניח ואנחנו רוצים לאחסן רשימת פריטים בתוך מערך. הכניסו את הקוד הבא לקונסולה:
+  <pre class="brush: js">let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;</pre>
+ </li>
+ <li>בדוגמא למעלה, כל איבר הוא מחרוזת, אך ניתן לאחסן כל מיני סוגי ערכים בתוך מערכים - מחרוזות, מספרים, אובייקטים ואפילו מערכים נוספים. לדוגמא:
+  <pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
+let random = ['tree', 795, [0, 1, 2]];</pre>
+ </li>
+ <li>לפני שתמשיכו, נסו ליצור מספר מערכים וחקרו את האפשרויות השונות.</li>
+</ol>
+
+<h3 id="גישה_לאיברי_המערך_ושינוי_שלהם">גישה לאיברי המערך ושינוי שלהם</h3>
+
+<p>אנחנו יכולים לגשת לכל איבר במערך על ידי שימוש בסוגריים המרובעות <code>[]</code> בדיוק כפי שאנו <a href="/he/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">ניגשים לתווים במחרוזת</a>.</p>
+
+<ol>
+ <li>הכניסו את הקוד הבא לקונסולה:
+  <pre class="brush: js">shopping[0];
+// returns "bread"</pre>
+ </li>
+ <li>אנחנו גם יכולים לשנות איבר במערך באמצעות מתן ערך חדש לאותו איבר במערך. ראו לדוגמא:
+  <pre class="brush: js">shopping[0] = 'tahini';
+shopping;
+// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre>
+
+  <div class="note"><strong>להזכירכם</strong>: מחשבים מתחילים לספור מ-0 ולא מ-1. בדיוק כמו במחרוזות, כך גם במערכים.</div>
+ </li>
+ <li>שימו לב שמערך בתוך מערך נקרא <strong>מערך רב מימדי</strong>. אנחנו יכולים לגשת לאיבר שנמצא בתוך מערך מסויים, כאשר המערך הזה נמצא בתוך מערך באמצעות <strong>שרשור</strong> של שתי סוגריים מרובעות ביחד. לדוגמא, על מנת לגשת לאיבר במערך שהוא האיבר השלישי במערך המשורשר והמערך המשורשר הוא האיבר השלישי במערך הראשי בשם <code>random</code>, אנו נצטרך לרשום זאת בצורה הבאה:
+  <pre class="brush: js">random[2][2];</pre>
+ </li>
+ <li>נסו לעשות כמה פעולות ושינויים בעצמכם על מנת להבין את הדרך שבה אנו ניגשים לאיברים במערך.</li>
+</ol>
+
+<h3 id="מציאת_האורך_של_מערך">מציאת האורך של מערך</h3>
+
+<p>מציאת האורך של מערך - כלומר כמה איברים יש לו - מתבצעת בדיוק באותה דרך שבה אנחנו מוצאים את מספר התווים במחרוזת - באמצעות המאפיין {{jsxref("Array.prototype.length","length")}}.</p>
+
+<p>נסו להזין את הקוד הבא:</p>
+
+<pre class="brush: js">sequence.length;
+// should return 7</pre>
+
+<p>מאפיין <code>length</code>  גם ישמש אותנו לצורך מעבר על איברי המערך באמצעות לולאת <code>for</code> וביצוע פעולות כלשהן שנבחר על כל איבר ואיבר, כך שהלולאה תעבור על כל איברי המערך. לדוגמא:</p>
+
+<pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
+for (let i = 0; i &lt; sequence.length; i++) {
+  console.log(sequence[i]);
+}</pre>
+
+<p>אנחנו נלמד יותר לעומק על לולאות במאמרים הבאים, אך בהסבר פשוט, הקוד הנוכחי אומר את הדברים הבאים:</p>
+
+<ol>
+ <li>הרצת הקוד שנמצא בין הסוגריים המסולסלות <code>{}</code> על כל איבר במערך החל מהאיבר הראשון במערך (אשר נמצא במיקום 0 כמובן). את מספר המיקום של האיבר במערך אותו אנו מייצגים באמצעות המשתנה <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">i</span></font>.</li>
+ <li>הרצת הלולאה מסוג <code>for</code> כל עוד מיקומו של האיבר במערך (שכאמור מיוצג בכל ריצה על ידי המשתנה <code>i</code>) קטן מסך כל האיברים במערך. כלומר, במקרה זה הקוד בתוך הסוגריים המסולסלות <code>{}</code> לא ירוץ כאשר המשתנה <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">i</span></font> יהיה שווה ל-7. (להזכירכם - אמנם יש שבעה איברים במערך, אך הספירה שלהם מתחילה ב-0, ולכן האיבר השביעי במערך, יהיה במיקום/אינדקס השישי וזו הסיבה שהשתמשנו בסימן קטן מאורך המערך (<code>&gt;</code>) ולא שווה לאורך המערך (<code>=</code>) שכן אז היינו מקבלים במיקום השביעי את הערך undefiened.</li>
+ <li>בתוך הסוגריים המסולסלות, רשמנו את הקוד שאנחנו רוצים שיבוצע במסגרת כל ריצה של הלולאה. במקרה הזה, הדפסנו לקונסולה את הערך הנוכחי של האיבר שעליו רצה הלולאה באותה ריצה. לצורך הדפסה לקונסולה עשינו שימוש ב-<code><a href="/en-US/docs/Web/API/Console/log">()console.log</a></code>.</li>
+</ol>
+
+<h2 id="מס׳_מתודות_שימושיות_של_מערכים">מס׳ מתודות שימושיות של מערכים</h2>
+
+<p>בחלק זה אנחנו נסתכל על מתודות שימושיות של מערכים או מתודות שימושיות הקשורות למערכים, המאפשרות לנו להפוך מחרוזת למערך ומערך למחרוזת ונלמד כיצד להכניס איברים נוספים לתוך מערכים או להסיר איברים ממערך. </p>
+
+<h3 id="המרה_בין_מחרוזות_ומערכים">המרה בין מחרוזות ומערכים</h3>
+
+<p>הרבה פעמים אנחנו נקבל מידע גולמי אשר נמצא במחרוזת ארוכה ונרצה להפריד אותו לפריטי מידע אשר עמם נוכל לעשות שימוש באמצעות המרתה של המחרוזת למבנה אחר.</p>
+
+<p>על מנת לעשות זאת, אנחנו נעשה שימוש במתודה {{jsxref("String.prototype.split()","split()")}}. מתודה זו ממירה מחרוזת למערך ומקבלת פרמטר אחד - התו שהמתודה תחפש בתוך המחרוזת שנרצה להמיר למערך וכאשר היא תמצא את אותו תו בכל פעם, היא תפריד בין החלק במחרוזת שנמצא לפני תו זה לבין החלק במחרוזת שנמצא אחריו, וכך היא בעצם מחלקת את המחרוזת לאיברים במערך. התוצאה של מתודה זו מערך שהאיברים שלו הם המחרוזות משנה שהופרדו.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: מבחינה טכנית זוהי מתודה של מחרוזות ולא מתודה של מערכים.</p>
+</div>
+
+<ol>
+ <li>בואו ננסה להבין כיצד מתודה הזו עובדת: צרו מחרוזת בקונסולה כגון זו:
+  <pre class="brush: js">let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
+ </li>
+ <li>עכשיו הפרידו בין התווים במחרוזת באמצעות המתודה {{jsxref("String.prototype.split()","split()")}} כך שכל פעם שיופיע התו <code>,</code> תבוצע העברה של התווים שלפניו לאיבר חדש במערך שנקרא <code>myArray</code>:
+  <pre class="brush: js">let myArray = myData.split(',');
+myArray;</pre>
+ </li>
+ <li>נסו למצוא את האורך של המערך החדש וכן לקבל את הערך של חלק מהאיברים שלו:
+  <pre class="brush: js">myArray.length;
+myArray[0]; // the first item in the array
+myArray[1]; // the second item in the array
+myArray[myArray.length-1]; // the last item in the array</pre>
+ </li>
+ <li>ניתן כמובן גם <strong>להמיר מערך למחרוזת</strong> באמצעות שימוש במתודה {{jsxref("Array.prototype.join()","join()")}}. נסו את הקוד הבא:
+  <pre class="brush: js">let myNewString = myArray.join(',');
+myNewString;</pre>
+ </li>
+ <li>דרך נוספת של <strong>המרת</strong> <strong>מערך למחרוזת</strong> נוכל לעשות באמצעות שימוש במתודה {{jsxref("Array.prototype.toString()","toString()")}}.</li>
+ <li>המתודה <code>()toString</code> הרבה יותר פשוטה מאשר <code>()join</code> שכן היא לא מקבלת שום פרמטר/ארגומנט, אך יש לה מספר הגבלות. עם המתודה <code>()join</code> אנחנו יכולים להגדיר איזה תו אנחנו נרצה שיפריד בין התווים במחרוזת. נסו לדוגמא להריץ שוב את שורה מספר 4, אך עם תו מפריד אחד כמו <code>/</code> או <code>-</code>.
+  <pre class="brush: js">let dogNames = ['Rocket','Flash','Bella','Slugger'];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
+ </li>
+</ol>
+
+<h3 id="הוספה_והסרה_של_איברים_במערך">הוספה והסרה של איברים במערך</h3>
+
+<p>בחלק זה נלמד כיצד להוסיף ולהסיר איברים במערך. אנו נעשה שימוש במערך <code>myArray</code> שהוגדר למעלה. לנוחיותכם, הנה הוא שוב:</p>
+
+<pre class="brush: js">let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>
+
+<p>על מנת להוסיף איבר לסוף של מערך אנחנו משתמשים במתודות {{jsxref("Array.prototype.push()","push()")}} ובמתודה {{jsxref("Array.prototype.pop()","pop()")}} להסיר איבר מסוף המערך.</p>
+
+<ol>
+ <li>ננסה תחילה את המתודה <code>()push</code> — שימו לב שאנחנו צריכים לכלול איבר אחד או יותר כארגומנט/פרמטר למתודה זו, אשר אותו נרצה להכניס לסוף המערך:
+
+  <pre class="brush: js">myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+</pre>
+ </li>
+ <li>כשאנו מבצעים את המתודה הזו, אנו מקבלים כערך מוחזר את ה-<code>length</code> החדש של המערך, לאחר ההוספה. אם נרצה לשמור את ה-<code>length</code> החדש, אנחנו נצטרך לשמור אותו במשתנה חדש:
+  <pre class="brush: js">let newLength = myArray.push('Bristol');
+myArray;
+newLength;</pre>
+ </li>
+ <li>הסרה של האיבר האחרון במערך מתבצע באמצעות המתודה <code>()pop</code> על המערך. נסו את הקוד הבא:
+  <pre class="brush: js">myArray.pop();</pre>
+ </li>
+ <li>האיבר האחרון במערך הוסר, ו<strong>הערך המוחזר של המתודה זו היא האיבר האחרון שהוסר</strong>. על מנת לשמור את האיבר הזה במשתנה חדש, ניתן לרשום את הקוד הבא:
+  <pre class="brush: js">let removedItem = myArray.pop();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<p>{{jsxref("Array.prototype.unshift()","unshift()")}} וכן {{jsxref("Array.prototype.shift()","shift()")}} עובדות בדיוק אותו הדבר כמו ש-<code>()push</code> ו- <code>()pop</code>, בהתאמה, למעט העבודה שהן מוסיפות/מסירות איברים מ<strong>תחילת המערך ולא מסופו</strong>.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>:{{jsxref("Array.prototype.push()","push()")}} ו- {{jsxref("Array.prototype.pop()","pop()")}} המתודות <strong>משנות</strong> את מערך המקור.</p>
+</div>
+
+<ol>
+ <li>מתודת <code>()unshift</code> — הזינו את הקוד הבא לקונסולה:
+
+  <pre class="brush: js">myArray.unshift('Edinburgh');
+myArray;</pre>
+ </li>
+ <li>מתודת <code>()shift</code>— הזינו את הקוד הבא לקונסולה:
+  <pre class="brush: js">let removedItem = myArray.shift();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<h2 id="תרגול_עצמאי_הדפסת_המוצרים">תרגול עצמאי : הדפסת המוצרים</h2>
+
+<p>נחזור לדוגמא שנתנו בתחילת המאמר - הדפסת שמות המוצרים והמחירים שלהם על חשבונית, וכן חישוב של המחירים שלהם בתחתית החשבונית. בדוגמא הבאה יש שורות עם הערות המכילות מספרים (לדוגמא: <code>number 1</code>). כל שורה שכזו נועדה לציין בפניכם את המיקום שבו תצטרכו להוסיף קוד לקוד הקיים:</p>
+
+<ol>
+ <li>מתחת להערה <code>number 1 //</code> יש מספר של מחרוזות, כאשר כל אחת כוללת שם של מוצר והמחיר שלו, מופרדים על ידי הסימן <code>;</code>. אנו נרצה שתהפכו את המחרוזות הללו למערך ותאחסנו אותו במשתנה שנקרא <code>products</code>.</li>
+ <li>בשורה שבה נמצאת העקב <code>number 2 //</code> נמצאת לולאת ה-for שלנו. בשורה זו יש כרגע <code>i &lt;= 0</code>, שזהו מבחן תנאי אשר גורם ל-<a href="/he/Learn/JavaScript/First_steps/A_first_splash#Loops">for loop</a> לרוץ רק פעם אחת, מכיוון שבפועל הוא ״תפסיק לרוץ כאשר <code>i</code> לא קטן יותר או שווה ל-0״, ו-<code>i</code> מתחיל ב-0. אנו נרצה שתחליפו את התנאי זה בקוד אחר כך שהלולאה תפסיק לרוץ כאשר <code>i</code> לא יהיה קטן יותר מהאורך של <code>products</code>.</li>
+ <li>מתחת להערה <code>number 3 //</code> אנו רוצים שתכתבו קוד שמפצל את האיבר הנוכחי במערך (<code>name:price</code>) ל-2 איברים נפרדים - אחד כולל את שם הפריט ואחד הכולל את מחירו. אם אתם לא בטוחים איך לבצע זאת, ראו <a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות של מחרוזות</a> והעמיקו בחלק {{anch("המרה בין מחרוזות ומערכים")}} של מאמר זה.</li>
+ <li>כחלק מהקוד למעלה, אולי גם נרצה להמיר את המחירים ממחרוזת למספר. אם אתם לא זוכרים כיצד לבצע זאת, קיראו את המאמר הבא, בחלק של <a href="/he/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">״מספרים מול מחרוזות״</a>.</li>
+ <li>בראשית הקוד הנוכחי קיים משתנה שנקרא <code>total</code> אשר הוצהר והושם לו ערך של 0. בתוך הלולאה (מתחת <code>number 4 //</code>) אנו נרצה שתוסיפו שורת קוד שמוסיפה את האיבר שמייצג את המחיר הנוכחי למשתנה <code>total</code> בכל ריצה של הלולאה, כך שבסוף, המחיר הכולל (<code>total</code>)יודפס לחשבונית. אולי תרצו לחזור ולעיין ב-<a href="/he/Learn/JavaScript/First_steps/Math#Assignment_operators">אופרטורים להשמה</a> על מנת לעשות זאת.</li>
+ <li>בנוסף, נרצה שתשנו את השורה שמתחת להערה <code>// number 5</code><code>//</code> כך שהמשתנה <code>itemText</code> יהיה בצורת כתיבה הזו לכל איבר ל-"<em>current item name — $current item price</em>", לדוגמא: "Shoes — $23.99" , כך שהמידע יוצג בתצורה הזו על גבי החשבונית. שימו לב שמדובר באיחוד של מחרוזות, לא משהו מורכב מדי שלא למדנו כבר.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;p&gt;&lt;/p&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 410px;width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var totalBox = document.querySelector('.output p');
+var total = 0;
+list.innerHTML = '';
+totalBox.textContent = '';
+// number 1
+                'Underpants:6.99'
+                'Socks:5.99'
+                'T-shirt:14.99'
+                'Trousers:31.99'
+                'Shoes:23.99';
+
+for (var i = 0; i &lt;= 0; i++) { // number 2
+  // number 3
+
+  // number 4
+
+  // number 5
+  itemText = 0;
+
+  var listItem = document.createElement('li');
+  listItem.textContent = itemText;
+  list.appendChild(listItem);
+}
+
+totalBox.textContent = 'Total: $' + total.toFixed(2);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background-color: #f5f9fa;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="למידה_עצמאית_5_החיפושים_האחרונים">למידה עצמאית: 5 החיפושים האחרונים</h2>
+
+<p>שימוש נפוץ שאנחנו עושים במתודות של מערכים כמו {{jsxref("Array.prototype.push()","push()")}} ו- {{jsxref("Array.prototype.pop()","pop()")}} הוא כאשר אנחנו שומרים רישום של מספר פריטים מסויימים כגון עשרת החיפושים האחרונים שביצע המשתמש או כאשר אנחנו משתמשים באנימציה המציגה כמות מסויימת של פריטים המוצגים על גבי המסך המתחלפים ביניהם, כך שכל פעם יהיה רק מספר מסויים של פריטים. בדוגמאות אלו אובייקטים חדשים נוצרים ומתווספים למערך ואילו ישנים נמחקים על מנת לשמור על המספר שרצינו.</p>
+
+<p>בדוגמאות הבאות אנחנו הולכים לעשות שימוש פשוט יחסית במתודות אלו - יש לנו אתר עם תיבת חיפוש. הרעיון הוא שכאשר ערכים מוכנסים לתיבת החיפוש, חמשת החיפושים הקודמים מוצגים ברשימה. כאשר כמות החיפושים הקודמים עולה על חמש, החיפוש הקודם ביותר נמחק מהרשימה ובמקומו נכנס החיפוש האחרון ביותר בתחילת הרשימה, כך שתמיד יוצגו לנו חמשת החיפושים האחרונים.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ביישום חיפוש אמיתי, יתאפשר לנו רוב הסיכויים ללחוץ על החיפושים הקודמים ולחזור לאותם חיפושים. בדוגמא הבא נרצה להשאיר את הנושא פשוט.</p>
+</div>
+
+<p>על מנת להשלים את המשימה, הנכם נדרשים:</p>
+
+<ol>
+ <li>להוסיף שורת מתחת להערה <code>number 1//</code> שמוסיפה את הערך הנוכחי שהוזן לתיבת החיפוש לתוך תחילת המערך. ניתן למצוא את הערך שהוזן לתיבת החיפוש באמצעות <code>searchInput.value</code>.</li>
+ <li>הוסיפו מתחת להערה <code>number 2</code><code>//</code> שורת קוד שמסירה את הערך שנמצא כרגע בסוף המערך.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+
+&lt;textarea id="code" class="playable-code" style="height: 370px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var searchInput = document.querySelector('.output input');
+var searchBtn = document.querySelector('.output button');
+
+list.innerHTML = '';
+
+var myHistory = [];
+
+searchBtn.onclick = function() {
+  // we will only allow a term to be entered if the search input isn't empty
+  if (searchInput.value !== '') {
+    // number 1
+
+    // empty the list so that we don't display duplicate entries
+    // the display is regenerated every time a search term is entered.
+    list.innerHTML = '';
+
+    // loop through the array, and display all the search terms in the list
+    for (var i = 0; i &lt; myHistory.length; i++) {
+      itemText = myHistory[i];
+      var listItem = document.createElement('li');
+      listItem.textContent = itemText;
+      list.appendChild(listItem);
+    }
+
+    // If the array length is 5 or more, remove the oldest search term
+    if (myHistory.length &gt;= 5) {
+      // number 2
+
+    }
+
+    // empty the search input and focus it, ready for the next term to be entered
+    searchInput.value = '';
+    searchInput.focus();
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i &lt; myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length &gt;= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>לאחר קריאה של מאמר זה, אתם ככל הנראה מבינים כמה מערכים הם שימושים עבורנו. אנחנו נראה אותם לאורך כל הדרך, בדרך כלל בצירוף לולאת <code>for</code> על מנת לבצע פעולה כלשהו על כל איבר במערך. אנחנו נלמד במודול הבא את הדברים השימושיים והבסיסיים שניתן לבצע עם לולאות מסוגים שונים, וביניהן לולאות <code>for</code>.</p>
+
+<p>כעת, בצעו את התרגול הנמצא במאמר הבא, המרכז את מרבית הנושאים שלמדנו במודול זה.</p>
+
+<h2 id="ראו_גם">ראו גם</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — מדריך מתקדם למערכים ודומיהם - כמו מערכים (typed arrays).</li>
+ <li>{{jsxref("Array")}} — דף ההסבר המורחב באתר זה בנושא <code>Array</code> — להעמקה נוספת ולהסברים נוספים בנושא המאפיינים של מערכים.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/index.html b/files/he/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..1cccf0cf39
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/index.html
@@ -0,0 +1,64 @@
+---
+title: צעדים ראשונים ב - JavaScript
+slug: Learn/JavaScript/First_steps
+tags:
+  - JavaScript
+  - אופרטורים
+  - מאמר
+  - מדריך
+  - מודול
+  - מחרוזות
+  - מספרים
+  - מערכים
+  - משימה
+  - משתנים
+  - מתחילים
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">במודול JavaScript הראשון שלנו, אנחנו קודם כל נענה על כמה שאלות בסיסיות כמו "מהי JavaScript?", "איך היא ניראת?", ו"מה היא יכולה לעשות?", לפני שנתקדם לניסיון הפרקטי הראשון בכתיבת JavaScript. לאחר מכן נדון בכמה תכונות מפתח של JavaScript בפירוט, כגון משתנים, מחרוזות, מספרים ומערכים.</p>
+
+<h2 id="דרישות_מוקדמות">דרישות מוקדמות</h2>
+
+<p>לפני שנתחיל מודול זה, אינכם צריכים כל ידע מוקדם בJavaScript, אבל יש לכם צורך בהיכרות עם  HTML ו-CSS. מומלץ לעבור על המודולים הבאים לפני תחילת הלימוד אודות JavaScript:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/he/docs/Learn/Getting_started_with_the_web">הכרות ראשונית עם הרשת</a> (שכולל בתוכו בצורה מינימלית <a href="/he/docs/Learn/Getting_started_with_the_web/JavaScript_basics">מבוא בסיסי לJavaScript</a>).</li>
+ <li><a href="/he/docs/Learn/HTML/Introduction_to_HTML">מבוא -HTML</a>.</li>
+ <li><a href="https://developer.mozilla.org/יק/docs/Learn/CSS/Introduction_to_CSS">מבוא ל-CSS</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>הערה</strong>: אם אתם עובדים על מחשב\טבלט\מכשיר אחר שאין לכם אפשרות ליצור עליו קבצים אישיים, אתם יכולים לנסות את (רוב) דוגמאות הקוד על תוכנות קוד אינטרנטיות כמו <a href="http://jsbin.com/">JSBin</a> או <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="מדריכים">מדריכים</h2>
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></dt>
+ <dd>ברוכים הבאים לקורס JavaScript למתחילים של MDN! במאמר ראשון זה אנו נסתכל על  JavaScript מלמעלה, ונענה על שאלות כמו "מה זה?", ו-"מה זה עושה?", ונדאג שתרגישו בנוח עם המטרה של JavaScript.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">צלילה ראשונית לתוך JavaScript</a></dt>
+ <dd>לאחר שלמדתם משהו על התאוריה של JavaScript, ומה אתם יכולים לעשות איתה, נמשיך לקורס מזורז על הפיצ'רים הבסיסיים של JavaScript באמצעות הדרכה מעשית בלבד. כאן נבנה משחק "נחש את המספר" פשוט, צעד אחר צעד.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></dt>
+ <dd>כשבניתם את משחק ״נחש את המספר״ במאמר הקודם, בטח שמתם לב שהוא לא עבד. אל חשש - המאמר הנוכחי נועד לחסוך לך זמן בפתרון הבעיה ולהעניק לך כמה טיפים פשוטים איך למצוא ולתקן שגיאות בתוכניות JavaScript.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון האינפורמציה שאתם צריכים — משתנים</a></dt>
+ <dd>לאחר קריאת המאמרים הקודמים אתם אמורים לדעת מה היא JavaScript, מהם היכולות שלה, איך להשתמש בה לצד טכנולוגיות אינטרנט אחרות, ואיך ניראים הפיצ'רים הראשיים שלה במבט מלמעלה. במאמר זה נקבל את הבסיס האמיתי, בהתבוננות על איך לעבוד עם אבני הבנין הבסיסיות ביותר של JavaScript — המשתנים.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-JavaScript - מספרים ואופרטורים</a></dt>
+ <dd>בחלק הזה של הקורס, נדון במתמתיקה של JavaScript - כיצד אנו יכולים לצרף אופרטורים שונים ואפשרויות נוספות על מנת לבצע מניפולציות שונות על מספרים לצרכים שלנו.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט - מחרוזות ב-JavaScript.</a></dt>
+ <dd>במאמר זה נתמקד במחרוזות - כך טקסט נקרא בתכנות. נסכתל על הדברים הבסיסיים שצריך לדעת על מחרוזות כשלומדים תכנות בשפת JavaScript, כמו יצירת מחרוזות, חיבור מחרוזות וכיוצ״ב.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות של מחרוזות</a></dt>
+ <dd>לאחר שלמדנו את הבסיס של מחרוזות, נלמד מס׳ פעולות שימושיות שאנחנו יכולים לבצע על המחרוזות באמצעות מתודות מובנות, כגון מציאת האורך של מחרוזת טקס, חיבור ופיצול של מחרוזות, הוצאת תו אחד מתוך מחרוזת ועוד.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים</a></dt>
+ <dd>במאמר האחרון של מודול זה, נסתכל על מערכים - דרך מסודרת לאחסכן רשימה של פריטי מידע, תחת משתנה אחד. נבין מדוע שימוש במערך הוא שימושי מאוד, ולאחר מכן נבין כיצד ליצור מערך, לאחזר מערך, להוסיף או להסיר איברים ממערך ועוד. </dd>
+</dl>
+
+<h2 id="בוחנים">בוחנים</h2>
+
+<p>הבחנים הבאים יבדקו את ההבנה שלכם בבסיס של JavaScript כפי שנלמד במדריך.</p>
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">יישום אינטרנט ליצירת סיפורים טיפשיים</a></dt>
+ <dd>במשימה זו אתם תתבקשו לקחת את הידע שלמדתם במאמרים של המודול הזה, ולממש אותם בכך שתיצרו יישום שמייצר סיפורים טיפשיים באופן אקראי. בהצלחה!.</dd>
+</dl>
diff --git a/files/he/learn/javascript/first_steps/math/index.html b/files/he/learn/javascript/first_steps/math/index.html
new file mode 100644
index 0000000000..e5c22c141f
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/math/index.html
@@ -0,0 +1,427 @@
+---
+title: מתמתיקה בסיסית ב-JavaScript - מספרים ואופרטורים
+slug: Learn/JavaScript/First_steps/Math
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">בשלב זה של הקורס, נדון קצת במתמתיקה שבשפת JavaScript - איך אנחנו יכולים להשתמש ב - {{Glossary("Operator","operators")}} ועוד אפשרויות על מנת להצליח לבצע מניפולציות וחישובים שונים על מספרים לצרכים שלנו</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>הכרות עם שימוש במתמתיקה באופן בסיסי ב-JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="כולנו_אוהבים_מתמטיקה">כולנו אוהבים מתמטיקה</h2>
+
+<p>האמת לא ממש. חלקנו כן וחלקנו ממש לא. אך לא ניתן להכחיש את העובדה שמתמטיקה היא נדבך חשוב בחיים ובתכנות בפרט. הרבה ממה שאנחנו עושים מתבסס על עיבוד מידע מספרי, חישוב ערכים חדשים וכד׳ ולכן לא נופתע לדעת של-JavaScript יש סט מלא של פונקציות מתמתיטקיות מובנה בה.</p>
+
+<p>מאמר זה ידון רק בחלקים הבסיסים שאנחנו צריכים לדעת כרגע.</p>
+
+<h3 id="סוגי_מספרים">סוגי מספרים</h3>
+
+<p>בתכנות, אפילו המספר העשרוני שאנחנו מכירים, הוא יותר מורכב ממה שנאחנו חושבים. אנחנו מתשמשים במושגים שונים על מנת לתאר סוגים שונים של מספרים עשרוניים. לדוגמא:</p>
+
+<ul>
+ <li><strong>Integers- מספרים שלמים - </strong>10, 400,5.</li>
+ <li><strong>Floating point numbers - מספרים עשרוניים - </strong>12.5, 56.7786543.</li>
+ <li><strong>Doubles - </strong>אלו מספרים עשרוניים בעלי רמת דיוק גבוהה יותר ממספרים עשרוניים רגילים. </li>
+</ul>
+
+<p>יש לנו אפילו כמה מערכות של מספרים! לדוגמא, מערכת מספרים דצימלית היא מבוססת על בסיס 10, כלומר, היא עושה שימוש בספרות 0-9 בכל עמודה. אבל יש עוד. לדוגמא:</p>
+
+<ul>
+ <li><strong>Binary</strong> — השפה הנמוכה של מחשבים; 0 ו- 1.</li>
+ <li><strong>Octal</strong> — בסיס 8, משתמש ב- 0–7 בכל עמודה.</li>
+ <li><strong>Hexadecimal</strong> — בסיס 16, משתמש ב- 0–9 ואז ב- a–f בכל עמודה. נתקלנו בזה ב-<a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">צבעים ב-CSS</a>.</li>
+</ul>
+
+<p><strong>לפני שאתם מתחילים לחשוש ולהתבלבל, תנשמו. נדיר שנשתמש במספרים שאינם מספרים דצימליים.</strong></p>
+
+<p>חדשות טובות נוספות הן שלא כמו בשפות תכנות אחרות, לשפת JavaScript יש רק סוג מידע אחד עבודה מספרים - {{jsxref("Number")}}. כלומר, לא משנה איזה סוג מספרים אנחנו נקבל/נזין בקוד, אנחנו נטפל בו בדיוק באותה צורה.</p>
+
+<h3 id="זה_הכל_מספרים">זה הכל מספרים</h3>
+
+<p>בוא נשחק קצת עם המספרים ונבין את הסינטקס הבסיסי שנצטרך. הכניסו את הקוד הבא לקונסולה:</p>
+
+<ol>
+ <li>קודם כל, נצהיר על שני משתנים ונשים בהם ערכים. לאחר מכן נזין את שמות המשתנים בקונסולה לוודא שהערכים הושמו כראוי:
+  <pre class="brush: js">let myInt = 5;
+let myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>מספרים אלו בעצם ערכים שנרשמים ללא גרשיים - נסו להזין מספרים עטופים בגרשיים וראו מה קורה.</li>
+ <li>בוא נבדוק האם הערכים השונים שהזנו הם מאותו סוג. האופרטור שבודק את זה הוא {{jsxref("Operators/typeof", "typeof")}}. רשמו את הקוד הבא מתחת לקוד הנוכחי:
+  <pre class="brush: js">typeof myInt;
+typeof myFloat;</pre>
+  אתם אמורים לקבל <code>"number"</code> בשני המקרים. ברור לנו שעיסוק בסוג מספר אחד הרבה יותר קל מאשר עם כמה סוגים.</li>
+</ol>
+
+<h2 id="Arithmetic_operators_-_אופרטורים_מתמתטיים">Arithmetic operators - אופרטורים מתמתטיים</h2>
+
+<p>אופרטורים מתמטיים הם האופרטורים הבסיסים שאנחנו משתמשים בהם על מנת לבצע חישובים:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">אופרטור</th>
+   <th scope="col">שם</th>
+   <th scope="col">מטרה</th>
+   <th scope="col">דוגמא</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>חיבור</td>
+   <td>חיבור</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>חיסור</td>
+   <td>חיסור</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>כפל</td>
+   <td>כפל</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>חילוק</td>
+   <td>חילוק</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>שארית</td>
+   <td>
+    <p>השארית מחלוקת שני מספרים</p>
+   </td>
+   <td>
+    <p><code>8 % 3</code> (מחזיר 2, שכן 3 נכנס ב- 8 פעמיים, והשארית היא 2,).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>**</code></td>
+   <td>חזקה</td>
+   <td>מכפיל את ה-<code>base</code> ב-<code>מעריך</code> , לדוגמא, המספר שיהיה נקוב ב- <code>base</code> עם המספר שיהיה נקוב ב- <code>מעריך</code> יגרום להכפלה של המספר שבבסיס כפול המספר שבמעריך. הוצג לראשונה ב- EcmaScript 2016.</td>
+   <td><code>5 ** 5</code> (מחזיר <code>3125</code>, שזה זהה ל- <code>5 * 5 * 5 * 5 * 5</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: לפעמים ניתקל במספרים המעורבים בחישובים כ- {{Glossary("Operand", "operands")}}.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>לתשומת לבד</strong>: לפעמים אנחנו נראה שמשתמשים במתודה הישנה {{jsxref("Math.pow()")}} אשר פועלת בדרך דומה. לדוגמא, בקוד <code>Math.pow(7, 3)</code>, <code>7</code> הבסיס הוא 7 ו-3 הוא המעריך בחזקה, והתוצאה תהיה <code>343</code>. <code>Math.pow(7, 3)</code> is שזה שווה ל- <code>7**3</code>.</p>
+</div>
+
+<p>כנראה לא צריך ללמד אתכם מתמתיקה בסיסית, אבל אנו רוצים לוודא את ההבנה שלכם לגבי הסינטקס. נסו להכניס את הדוגמאות הבאות לקונסולה על מנת להכיר את הסינטקס.</p>
+
+<ol>
+ <li>הכניסו דומאות פשוטות כמו:
+  <pre class="brush: js">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>אתם גם יכולים לנסות להצהיר על משתנים להשים להם מספרים כערכים, ונסו לעשות עליהם חישובים - המשתנים יתנהגו בדיוק כמו שיתנהגו הערכים שהם מחזיקים בהם. כך לדוגמא:
+  <pre class="brush: js">let num1 = 10;
+let num2 = 50;
+9 * num1;
+num1 ** 3;
+num2 / num1;</pre>
+ </li>
+ <li>נסו להזין קצת ביטויים יותר מורכבים, כמו:
+  <pre class="brush: js">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>כפי ששמתם לב, חלק מהחישובים שביצענו מחזירים לנו תוצאה בהתאם לכללי הקדימות המתמטיים:</p>
+
+<h3 id="סדר_עדיפות_אופרטורים">סדר עדיפות אופרטורים</h3>
+
+<p>אם נסתכל על הדוגמא למעלה, נניח ש- <code>num2</code> הוא 50 ו- <code>num1</code> הוא 10 :</p>
+
+<pre class="brush: js">num2 + num1 / 8 + 2;</pre>
+
+<p>בני אדם רגילים עלולים להניח ש- <em>"50 ועוד 10 שווה 60"</em>, ואז <em>"8 ועוד 2 שווה 10"</em>, ואז <em>"60 חלקי 10 שווה 6"</em>.</p>
+
+<p>אבל הדפדפן הולך לפי כללי החישוב המתמטים <em>"10 חלקי 8 שווה 1.25"</em>, ואז <em>"50 עוד 1.25 ועוד 2 שווה 53.25"</em>.</p>
+
+<p>זהו מה שנקרא <strong>סדר עדיפות בין אופרטורים</strong> — חלק מהאופרטורים יבוצעו או יחולו לפני אופרטורים אחרים כשהדפדפן ינסה לחשב את התוצאה של החישוב. סדר עדיפות בין אופרטורים בשפה הוא בהתאם למה שלמנו בשיעורי מתמתיקה - כפל וחילוק תמיד ראשונים, ואז חיבור וחיסור, כאשר החישוב מתבצע מצד שמאל לימין.</p>
+
+<p>אם נרצה לעקוף זאת, נצטרך לעשות שימוש בסוגריים רגילות סביב לחלקים שנרצה לבצע קודם. כך, על נת לקבל את התוצאה של 6, נצטרף לרשום את הקוד בצורה כזאת:</p>
+
+<pre class="brush: js">(num2 + num1) / (8 + 2);</pre>
+
+<p>נסו כדי לראות.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: רשימה מלאה של האופטורים ב- JavaScript וסדר העדיפות שלהם ניתן למצוא ב<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">ביטויים ואופרטורים</a>.</p>
+</div>
+
+<h2 id="אופרטים_להעלאההורדה_-_Increment_and_decrement_operators">אופרטים להעלאה/הורדה - Increment and decrement operators</h2>
+
+<p>לפעמים אנחנו רוצים להוסיף לערך או להוריד ממנו מספר אחד. ניתן לבצע זאת בקלות באמצעות שימוש באופרטור (<code>++</code>) לצורך העלאה ב-1 ובאופרטור (<code>--</code>) לצורך הורדה ב-1. השתמשנו באופרטור <code>++</code> במשחק שלנו  "Guess the number" ב-<a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">מבט ראשוני ל- JavaScript</a> כאשר הוספנו אחד למשתנה <code>guessCount</code> על מנת לעקוב אחר מספר הניחושים שביצע המשתשמש.</p>
+
+<pre class="brush: js">guessCount++;</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אופרטורים אלו נמצאים בדרך כלל ב<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">לולאות</a>, עליהן נלמד בהמשך הקורס. לדוגמא, אם אנחנו רוצים לעבור על רשימה של מחירים, ולהוסיף מס על כל אחד מהם, אנחנו יכולים להשתמש בלולאה על מנת לעבור על כל ערך ברשימה, ולעשות את החישוב המתאים של הוספת מס. האופטרטור הוספה ישמש להעביר אותנו לערך הבא כשנצטרך. ראה לדוגמא כיצד זה מבוצע <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/loop.html">בדף האינטרנט </a>וגם ב<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/maths/loop.html">קוד המקור</a>. בדקו האם אתם מזהים את האופרטורים שמשמשים להוספה/הורדה בתוך הלולאה, נדון בהם בהמשך.</p>
+</div>
+
+<p>ננסה לשחק קצת בקונסולה. על מנת להתחיל, שימו לב שאתם לא יכול החיל אותם ישר על מספר כלשהו, למרות שזה נראה מוזר, אבל בפועל, כשאנחנו מעלים את הערך, אנחנו לא מבצעים חישוב כלשהו, אלא אנחנו משימים את החדש, לאחר החישוב, בתוך המשתנה. הפעולה הבאה תחזיר לדוגמא שגיאה:</p>
+
+<pre class="brush: js">3++;</pre>
+
+<p>כלומר, אנחנו יכולים רק להעלות משתנה קיים ב-1. נסו להזין את הקוד הבא:</p>
+
+<pre class="brush: js">let num1 = 4;
+num1++;</pre>
+
+<p>משהו מוזר נוסף. כשאנחנו עושים זאת, הערך 4 מוחזר לנו בקונסולה. זה מכיוון שהדפדפן מחזיר את הערך הנוכחי ורק אז מעלה את הערך של המשתנה. ניתן לראות שהערך של המשתנה הועלה ב-1 אם נזין שוב את השם של המשתנה בקונסולה.</p>
+
+<pre class="brush: js">num1;</pre>
+
+<p>אותו הדבר לגבי <code>--</code>  נסו את הקוד הבא:</p>
+
+<pre class="brush: js">let num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אנו יכולים לגרום לדפדפן לבצע זאת בצורה אחרת - כלומר, להעלות את המשתנה ב-1 ורק אז להחזיר לנו את הערך החדש של המשתנה באמצעות הוספת האופרטור <em> לפני</em> המשתנה ולא בסופו. נסו להזין את הקוד הבא <code>++num1</code> ואז <code>--num2</code>.</p>
+</div>
+
+<h2 id="Assignment_operators_-_אופרטורים_להשמה">Assignment operators - אופרטורים להשמה</h2>
+
+<p>אופרטורים להשמה אלו אופרטים שמשימים ערך לתוך משתנה. ראינו זאת עם הבסיסי שבה: <code>=</code>- הוא פשוט משים את הערך מצד שמאל, למשתנה שמצויין מצד ימין.</p>
+
+<pre class="brush: js">let x = 3; // x contains the value 3
+let y = 4; // y contains the value 4
+x = y; // x now contains the same value y contains, 4</pre>
+
+<p>אך יש כאלה מורכבים יותר, שיכולים לתת לנו קיצורי דרך על מנת לרשום את הקוד שלנו נקי ויעיל יותר. הנפוצים הם:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">אופרטור</th>
+   <th scope="col">שם</th>
+   <th scope="col">מטרה</th>
+   <th scope="col">דגומא</th>
+   <th scope="col">קיצור עבור</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>חיבור והשמה</td>
+   <td>מוסיף את הערך מצד ימין לערך שבמשתנה מצד שמאל, ואז מחזיר את הערך של המשתנה החדש</td>
+   <td><code>x = 3;<br>
+    x += 4;</code></td>
+   <td><code>x = 3;<br>
+    x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>חיסור והשמה</td>
+   <td>מחסיר את הערך מצד ימין מתוך הערך שנמצא בתוך המשתנה מצד שמאל, ואז מחזיר את הערך של המשתנה החדש</td>
+   <td><code>x = 6;<br>
+    x -= 3;</code></td>
+   <td><code>x = 6;<br>
+    x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>כפל והשמה</td>
+   <td>מכפיל את הערך מצד ימין עם הערך שנמצא במשתנה מצד שמאל, ואז מחזיר את הערך של המשתנה החדש</td>
+   <td><code>x = 2;<br>
+    x *= 3;</code></td>
+   <td><code>x = 2;<br>
+    x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>חילוק והשמה</td>
+   <td>מחלק את הערך מצד ימין בערך שנמצא במשתנה מצד שמאל, ואז מחזיר את הערך של המשתנה החדש</td>
+   <td><code>x = 10;<br>
+    x /= 5;</code></td>
+   <td><code>x = 10;<br>
+    x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>נסו להזין חלק מהדוגמאות הרשומות למעלה לתוך הקונסולה, על מנת להבין את הרעיון. בכל מקרה, נסו לראות אם אתם מצליחים לדעת מה הערך שיוחזר לפני החישוב וההשמה.</p>
+
+<p>כמובן שגם ניתן לבצע את החישובים וההשמות גם כאשר נמצאים משתנים משני צידי הסימן. לדוגמא:</p>
+
+<pre class="brush: js">let x = 3; // x contains the value 3
+let y = 4; // y contains the value 4
+x *= y; // x now contains the value 12</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: יש הרבה <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">אופרטורים להשמה נוספים</a>, אבל אלו הבסיסיים שאתם צריכים לדעת לעת עתה.</p>
+</div>
+
+<h2 id="למידה_אקטיבית_שינוי_גודל_של_canvas_box">למידה אקטיבית: שינוי גודל של canvas box</h2>
+
+<p>בתרגיל זה נלמד כיצד לבצע מניפולציות על מספרים ואופרטורים, על מנת לשנות גודל של קופסא. הקופסא מצויירת באמצעות browser API אשר נקרא {{domxref("Canvas API", "", "", "true")}}. אין מה לדאוג לגבי איך הוא עובד, רק התרכזו בחישובים עצמם. הגובה והרוחב של הקופסא בפיקסלים יוגדרו על ידי המשתנים <code>x</code> ו- <code>y</code>, אשר קיבלו ערך התחלתי של 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 620)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Open in new window</a></strong></p>
+
+<p>בבריבוע למעלה יש שתי שורות שמסומנות עם הערה - אלו השורות שאתם צריכים לעדכן על מנת להגדיל/להקטין את הקופסא, באמצעות שימוש באופרטורים השונים ו/או ערכים שונים. נסו את הדברים הבאים:</p>
+
+<ul>
+ <li>Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.</li>
+ <li>Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.</li>
+ <li>Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.</li>
+ <li>Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.</li>
+ <li>Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.</li>
+ <li>Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.</li>
+</ul>
+
+<p>אל תדאגו אם אתם הורסים את הקוד לחלוטין. פשוט לחצו על הכפתור לאתחל את הכל.</p>
+
+<h2 id="Comparison_operators_-_אופרטורים_להשוואה">Comparison operators - אופרטורים להשוואה</h2>
+
+<p>לפעמים נרצה לבצע מבחני אמת/שקר, ואז להריץ פעולות מסוימות בהתאם לתוצאת המבחן - בשביל זה נועדו <strong>אופרטורים להשוואה</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">אופרטור</th>
+   <th scope="col">שם</th>
+   <th scope="col">מטרה</th>
+   <th scope="col">דוגמא</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>השוואה מוחלטת</td>
+   <td>אופרטור זה בודק הא הערכים מצד ימין וצד שמאל זהים לחלוטין</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>שונים לחלוטין</td>
+   <td>בודק האם הערך מצד ימין<strong>לא זהה</strong> לערך מצד שמאל</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>קטן מ-</td>
+   <td>בודק האם הערך בצד שמאל קטן מהערך בצד ימין.</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>גדול מ-</td>
+   <td>בודק האם הערך בצד שמאל גדול מהערך בצד ימין.</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;=</code></td>
+   <td>קטן מ- או שווה ל-</td>
+   <td>בודק האם הערך בצד שמאל קטן מהערך בצד ימין או שווה לו.</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;=</code></td>
+   <td>גדול מ- או שווה ל-</td>
+   <td>בודק האם הערך בצד שמאל גדול מהערך בצד ימין או שווה לו.</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: לפעמים תראו אנשים שמשתמשים באופרטור <code>==</code> או <code>!=</code> במבחני בדיקת זהות/שונות שלהם. אלו אופרטורים תקינים לחלוטין בשפה, אבל הם שונים מ - <code>===</code>/<code>!==</code>. הראשונים מבצעים בדיקה האם הערכים בצד ימין ובצד שמאל זהים מבחינת הערך עצמו, אך ״אדישים״ לגבי הזהות מבחינת סוג הערך. ואילו האחרונים מבצעים בדיקה של זהות/שונות מוחלטת - גם ערכים וגם סוג הערך. שימוש בבדיקת זהות/שונות מוחלטת נוטה להציג פחות שגיאות, אז המלצתנו היא להשתמש בהם.</p>
+</div>
+
+<p>אם תנסו להכניס כמה מהערכים הללו לקונסולה את תראה בחזרה ערכי <code>true</code>/<code>false</code> - אלו ערכים בולאינים, כפי שהזכרנו במאמר קודם. ערכים אלו מאוד שימושיים מכיוון שהם מאפשרים לבצע החלטות בקוד שלנו, ואנחנו משתמשים בהם בכל פעם שאנרצה לקבל החלטה מסוג כלשהו. בוליאנים יכולים לשמש עבור:</p>
+
+<ul>
+ <li>הצגת תיבת הטקסט הנכונה על גבי כפתור בהתאם לאפשרויות השונות.</li>
+ <li>הצגת הודעה אם המשחק נגמר או שהמשתמש ניצח במשחק.</li>
+ <li>הצגת הברכה המתאימה בהתאם לחג בתאריך מסויים.</li>
+ <li>להתמקד במפה או להתרחק ממנה בהתאם לקוארדיניטות שהזין המשתמש.</li>
+</ul>
+
+<p>אנו נסתכל על דרך לכתוב קוד באמצעות שימוש בלוגיקה כשנלמד על משפטי תנאי במאמרים הבאים. לבינתיים, ראו דוגמא:</p>
+
+<pre class="brush: html">&lt;button&gt;Start machine&lt;/button&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+const txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Start machine') {
+    btn.textContent = 'Stop machine';
+    txt.textContent = 'The machine has started!';
+  } else {
+    btn.textContent = 'Start machine';
+    txt.textContent = 'The machine is stopped.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">פתח בחלון חדש</a></strong></p>
+
+<p>אתם יכולים לראות את האופרטור להשוואה מתקיים בתוך פונקציית <code>()updateBtn</code> . במקרה זה, אנחנו לא בודקים האם שני ביטויים מתמידים הם בעלי ערך זהה, אלא אנחנו בודקים האם תוכן הטקסט של הכפתור כולל בתוכו מחרוזת מסויימת - אבל עדיין מדובר באותו עקרון שלמדנו עליו. אם הכפתור כולל בתוכו מחרוזת "Start machine" כשלוחצים עליו, אזי נשנה את השם שלו בהתאם. אם הוא כולל מחרוזת "Stop machine" אזי נבצע החלפה שוב.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אפשרות כזו להחליף בין שני מצבים נקראת <strong>toggle</strong>. הוא מחליף פשוט בין מצב אחד למצב שני.</p>
+</div>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>במאמר זה כיסינו את הידע החשוב והכרחי שאתם צריכים לדעת על מספרים בשפה. לבינתיים. אתם תראו מספרים דיי הרבה פעמים, לכל אורך הלימוד, אז זה רעיון טוב שתתחילו להתרגל אליהם ולהבין אותם. אל תפחדו מהם.</p>
+
+<p>במאמר הבא נבין איך השפה מאפשרת לנו לבצע מניפולציות שונות על מחרוזות וטקסטים ויצד נוכל לבצע בהם שימוש.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם אתם מעוניינים להרחיב את הידיעות בנושא, ראו את הדפים שלנו בנושא  <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a> ו-<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a>.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/silly_story_generator/index.html b/files/he/learn/javascript/first_steps/silly_story_generator/index.html
new file mode 100644
index 0000000000..8c4ca6772a
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/silly_story_generator/index.html
@@ -0,0 +1,139 @@
+---
+title: Silly story generator
+slug: Learn/JavaScript/First_steps/Silly_story_generator
+translation_of: Learn/JavaScript/First_steps/Silly_story_generator
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">בתרגול זה, תתבקשו ליישם את מה שלמדתם בכל המאמרים האחרונים במודול הנוכחי על מנת ליצור יישום קטן שמייצר סיפורים טיפשיים באופן רנדומלי. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>אנא וודאו כי עברתם על כל המאמרים במודול זה בטרם ביצוע התרגול.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>לוודא הבנה של יסודות שפת JavaScript ושימוש במשתנים, מספרים,אופרטורים, מחרוזות ומערכים. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="נקודת_התחלה">נקודת התחלה</h2>
+
+<p>על מנת להתחיל:</p>
+
+<ul>
+ <li>הורידו את <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">הקובץ זה</a> לצורך התרגול ושמרו אותו בשם <code>index.html</code> בתיקיה במחשב שלכם. קובץ זה מכיר גם CSS על מנת לעצב את הדוגמא שנמצאת בתוכו.</li>
+ <li>גשו ל <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">דף המכיל מידע גולמי</a> והשאירו אותו פתוח בלשונית חדשה בדפדפן שלכם. אתם תצטרכו אותו אחר כך.</li>
+</ul>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: לחילופין, אתם יכולים לעשות שימוש ב- <a class="external external-icon" href="http://jsbin.com/">JSBin</a> או <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> על מנת להשלים את התרול. אתם יכולים להדביק לתוכם את ה HTML, CSS ואת JavaScript.</p>
+</div>
+
+<h2 id="תקציר_הפרוייקט">תקציר הפרוייקט</h2>
+
+<p>קיבלתם לידיכם HTML/CSS גולמי ומס׳ מחרווזת טקסט וכן מס׳ פונקציות של JavaScript. הנכם נדרשים לכתוב את הקוד הרלוונטי על מנת להפוך אותם לתוכנית שעושה את הדברים הבאים:</p>
+
+<ul>
+ <li>יוצרת סיפור חדש כאשר הכפתור "Generate random story" נלחץ.</li>
+ <li>מחליפה את שם ברירת המחדל "Bob" אשר נמצא בסיפור, בשם אחר, רק אם השם האחר הוכנס לתוך תיבת הטקסט "Enter custom name" לפני שכפתור יצירת הסיפור נלחץ.</li>
+ <li>ממירה את שיטת המשקלים והטמפרטורות משיטה אמריקאית לשיטה בריטית אם הכפתור uk מסומן לפני שנלחץ על כפתור יצירת הסיפור.</li>
+ <li>נייצר סיפור אקראי בכל פעם אם תלחץ על הכפתור שוב (ושוב...)</li>
+</ul>
+
+<p>צילום המסך הבא יסייע לכם להבין כיצד זה אמור להיראות:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16178/Screen_Shot_2018-09-19_at_10.01.38_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 404px; margin: 0px auto; width: 500px;"></p>
+
+<p>לתת לכם קצת יותר הכוונה, <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">הסתכלו בפתרון העובד</a> (אך אל תסתכלו על קוד המקור, אלא אם ממש נתקעתם)</p>
+
+<h2 id="פעולות_נדרשות">פעולות נדרשות</h2>
+
+<p>אלו הפעולות שתידשו לבצע על מנת להשלים את התרגול בהצלחה</p>
+
+<p>התקנה בסיסית:</p>
+
+<ol>
+ <li>צרו קובץ חדש שנקרא בשם <code>main.js</code>, באותה תיקיה שבה נמצא קובץ <code>index.html</code> שלכם</li>
+ <li>החילו את קובץ ה-JavaScript לתוך קובץ ה-HTML כפי שלמדנו באמצעות {{htmlelement("script")}} עם קישור ל-<code>main.js</code>. שימו אותו לפני תגית הסיום של <code>&lt;/body&gt;</code>.</li>
+</ol>
+
+<p>אתחול משתנים ופונקציות:</p>
+
+<ol>
+ <li>בקובץ הטקסט הגולמי העתיקו את כל הקוד שמופיע תחת הכותרת "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" והדביקו אותו בחלקו העליון של הקובץ <code>main.js</code>.זה נותן שלשה משתנים שמכילים הפניות לשדה הטקסט "Enter custom name" (המשתנה: <code>customName</code>) ולכפתור "Generate random story" (המשתנה:<code>randomize</code>) ולאלמנט {{htmlelement("p")}} (המשתנה:<code>story</code>) שבתחתית חלק ה HTML שאליו יועתק הסיפור בהתאמה. בנוסף יש לך פונקציה שנקראת <code>randomValueFromArray()</code> שלוקחת מערך, ומחזירה אחד מהפריטים המאוחסנים בתוך המערך באופן אקראי</li>
+ <li>כעת התבוננו בקטע השני שבקובץ הטקסט הגולמי "2. RAW TEXT STRINGS" זה מכיל מחרוזות טקסט   that will act as input into our program. We'd like you to contain these inside variables inside <code>main.js</code>:
+  <ol>
+   <li>Store the third set of three strings inside an array called <code>insertZ</code>.</li>
+   <li>Store the second set of three strings inside an array called <code>insertY</code>.</li>
+   <li>Store the first set of three strings inside an array called <code>insertX</code>.</li>
+   <li>Store the first, big long, string of text inside a variable called <code>storyText</code>.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Placing the event handler and incomplete function:</p>
+
+<ol>
+ <li>Now return to the raw text file.</li>
+ <li>Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your <code>main.js</code> file. This:
+  <ul>
+   <li>Adds a click event listener to the <code>randomize</code> variable so that when the button it represents is clicked, the <code>result()</code> function is run.</li>
+   <li>Adds a partially-completed <code>result()</code> function definiton to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Completing the <code>result()</code> function:</p>
+
+<ol>
+ <li>Create a new variable called <code>newStory</code>, and set it's value to equal <code>storyText</code>. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to <code>storyText</code>, we'd only be able to generate a new story once.</li>
+ <li>Create three new variables called <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>, and make them equal to the result of calling <code>randomValueFromArray()</code> on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of <code>insertX</code> by writing <code>randomValueFromArray(insertX)</code>.</li>
+ <li>Next we want to replace the three placeholders in the <code>newStory</code> string — <code>:insertx:</code>, <code>:inserty:</code>, and <code>:insertz:</code> — with the strings stored in <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>. There is a particular string method that will help you here — in each case, make the call to the method equal to <code>newStory</code>, so each time it is called, <code>newStory</code> is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.</li>
+ <li>Inside the first <code>if</code> block, add another string replacement method call to replace the name 'Bob' found in the <code>newStory</code> string with the <code>name</code> variable. In this block we are saying "If a value has been entered into the <code>customName</code> text input, replace Bob in the story with that custom name."</li>
+ <li>Inside the second <code>if</code> block, we are checking to see if the <code>uk</code> radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and Fahrenheit into stones and centigrade. What you need to do is as follows:
+  <ol>
+   <li>Look up the formulae for converting pounds to stone, and Fahrenheit to centigrade.</li>
+   <li>Inside the line that defines the <code>weight</code> variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate <code>' stone'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li>
+   <li>Inside the line that defines the <code>temperature</code> variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate <code>' centigrade'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li>
+   <li>Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the <code>temperature</code> variable, and '300 pounds' with the contents of the <code>weight</code> variable.</li>
+  </ol>
+ </li>
+ <li>Finally, in the second-to-last line of the function, make the <code>textContent</code> property of the <code>story</code> variable (which references the paragraph) equal to <code>newStory</code>.</li>
+</ol>
+
+<h2 id="רמזים_וטיפים">רמזים וטיפים</h2>
+
+<ul>
+ <li>You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.</li>
+ <li>If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the {{htmlelement("html")}} element red — so the entire browser window should go red if the JavaScript is applied properly:
+  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.</li>
+ <li>There are three instances of strings that need to be replaced. You may repeat the <code>replace()</code> method multiple times, or you can use regular expressions. For instance, <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> will replace all instances of 'love' to 'like'. Remember, Strings are immutable!</li>
+</ul>
+
+<h2 id="Assessment">Assessment</h2>
+
+<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">discussion thread for this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/strings/index.html b/files/he/learn/javascript/first_steps/strings/index.html
new file mode 100644
index 0000000000..8523f144ac
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/strings/index.html
@@ -0,0 +1,172 @@
+---
+title: "התמודדות עם טקסט\_— מחרוזות (Strings) ב-JavaScript"
+slug: Learn/JavaScript/First_steps/Strings
+translation_of: Learn/JavaScript/First_steps/Strings
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">כעת, אנו נשים את הפוקוס על מחרוזות - כך נקראים חלקים של טקסט בתכנות. במאמר זה אנחנו נסתכל על הדברים המשותפים שאנחנו חייבים לדעת על מחרוזות כשלומדים JavaScript, כמו יצירת מחרוזות, חיבור מחרוזות וכד׳.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>הכרות עם הבסיס של מחרוזות וטקסט ב-JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="כוחן_של_מילים">כוחן של מילים</h2>
+
+<p>מילים הן אחד הדברים החשובים לבני אדם - זוהי הדרך שמרבית מאיתנו מתקשרים אחד עם השני. מאחר ורשת האינטרנט היא בעיקרה מדיה המבוססת על טקסט המאפשרת לבני אדם להחליף ביניהם מידע, זה מאוד שימוש עבורנו לקבל שליטה על הדרך שבה מילים מוצגות ברשת האינטרנט. {{glossary("HTML")}} מעניק לנו את המבנה ואת המשמעות מאחורי הטקסט שלנו, {{glossary("CSS")}} מאפשר לנו לעצב אותו ואילו JavaScript מכילה מספר אפשרויות וכללים לבצע מניפולציות שונות על מחרוזות, ליצור הודעות/התראות שונות, להראות את הטקסט הנכון כשצריך ועוד.</p>
+
+<p>כמעט כל התוכניות שעברנו עליהם בקורס עד כה כללו מניפולציה כלשהי על מחרוזות.</p>
+
+<h2 id="Strings_—_מחרוזות_-_הבסיס">Strings — מחרוזות - הבסיס</h2>
+
+<p>אנו נעבוד עם מחרוזות בדיוק כמו שעבדנו עם מספרים, אך עם מספר הבדלים: נתחיל בכך שנפתח את הקונסולה ונזין מספר שורות קוד:</p>
+
+<h3 id="יצירת_מחרוזת">יצירת מחרוזת</h3>
+
+<ol>
+ <li>על מנת להתחיל, הזן את השורות הבאות בקונסולה:
+  <pre class="brush: js">let string = 'The revolution will not be televised.';
+string;</pre>
+  בדיוק כמו שעשינו עם מספרים, אנחנו מכריזים פה על משתנה ומשימים לו ערך של מחרוזת ואז מקבלים את הערך של המשתנה. ההבדל היחיד הוא שכאשר אנחנו כותבים מחרוזת, אנחנו צריכים להשתמש במרכאות כפולות <code>""</code> או במרכאות בודדות - גרש מכל צד - <code>''</code>.</li>
+ <li>אם לא נעשה זאת, או שנחסיר אותן בצד ימין או שמאל, אנחנו נקבל שגיאה. נסו להזין את השורות הבאות:
+  <pre class="brush: js example-bad">let badString = This is a test;
+let badString = 'This is a test;
+let badString = This is a test';</pre>
+  שורות קוד אלו לא יעבדו מכיוון שכל טקסט שאינו מוקף במלואו במרכאות נחשב כשם של משתנה או שם של מאפיין או מילה שמורה וכד׳. אם הדפדפן לא מוצא את אותה מילה, הוא מחזיר שגיאה. לדוגמא: "missing; before statement". אם הדפדפן יכול לראות מתי מתחילה מחרוזת, אבל לא מתי היא מסתיימת, מכיוון שחסר מרכאות בצד כלשהו, הוא יחזיר שגיאה כגון: "unterminated string literal". אם התוכנית שלנו מעלה שגיאות כאלו, צריך לחזור ולבדוק את כל המחרוזות ולוודא שלא שכחנו מרכאות.</li>
+ <li>הקוד הבא יעבוד אם הגדרנו לפני את המשתנה <code>string</code>:
+  <pre class="brush: js">let badString = string;
+badString;</pre>
+  <code>badString</code> כעת הוגדר לקבל את אותו ערך כמו של <code>string</code>.</li>
+</ol>
+
+<h3 id="מרכאות_כפולות_או_בודדות">מרכאות כפולות או בודדות</h3>
+
+<ol>
+ <li>ב-JavaScript, אנחנו יכולים לבחור האם להשתמש במרכאות כפולות או במרכאות בודדות לשם עטיפת המחרוזת שלנו. שניהם יעבדו מצויין ובדיוק אותו דבר:
+  <pre class="brush: js">let sgl = 'Single quotes.';
+let dbl = "Double quotes";
+sgl;
+dbl;</pre>
+ </li>
+ <li>יש מעט מאוד הבדלים ביניהם, וזה תלוי בכם במה להתשמש. אתם צריכים לבחור סוג אחד ואיתו להמשיך. צריך לזכור שלא ניתן להשתמש בשניהם במקביל כך שמצד אחד של מחרוזת יהיו מרכאות כפולות ומצד שני יהיו מרכאות בודדות, שכן זה יחזיר לנו שגיאה:
+  <pre class="brush: js example-bad">let badQuotes = 'What on earth?";</pre>
+ </li>
+ <li>הדפדפן יחשוב שהמחרוזת לא נסגרה מכיוון שכשאנחנו משתמשים בסוג אחד של מרכאות על מנת לעטוף טקסט, אנחנו יכולים להשתמש בסוג השני של המרכאות בתוך הטקסט עצמו. לדוגמא, השורות הקוד הבאות הן תקינות לחלוטין:
+  <pre class="brush: js">let sglDbl = 'Would you eat a "fish supper"?';
+let dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>יחד עם זאת, צריך לזכור שאנחנו לא יכולים לכלול בתוך הטקסט את סוג המרכאות שאיתו אנחנו משתמשים על מנת לעטוף את אותו הטקסט. הדוגמא הבאה תציג לנו שגיאה, שכן הדפדפן לא יודע מתי המחרוזת מסתיימת:
+  <pre class="brush: js example-bad">let bigmouth = 'I've got no right to take my place...';</pre>
+  וזה מה שמוביל אותנו לנושא הבא. תווים לבריחה ממחרוזות.</li>
+</ol>
+
+<h3 id="תווים_לבריחה_ממחרוזת">תווים לבריחה ממחרוזת</h3>
+
+<p>על מנת לתקן את הבעיה בקוד הקודם, אנחנו צריכים לברוח מסימן המרכאות אשר עוטף את הטקסט. תווי בריחה שכאלו משמעותם שאנחנו עושים משהו על מנת לוודא שהם ייקראו כטקסט רגיל ולא כחלק מהקוד שלנו. ב-JavaScript, אנחנו עושים את זה באמצעות שימוש בסימן <code>\</code>נסו את זה:</p>
+
+<pre class="brush: js">let bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;</pre>
+
+<p>זה עובד מצוין. אנחנו יכולים גם לברוח מתווים אחרים באותה צורה. לדוגמא: <code>"\</code>,  ויש עוד. ראו <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Escape notation</a> לפרטים נוספים.</p>
+
+<h2 id="Concatenating_strings_-_שרשור_מחרוזות">Concatenating strings - שרשור מחרוזות</h2>
+
+<ol>
+ <li>שרשור נשמעת כמו מילה מורכבת שמשמעותה הפשוטה הוא חיבור ביחד. חיבור מחרוזות יחד ב-JavaScript מתבצע באמצעות האופרטור (+), באותה צורה כשהשתמשנו בו לביצוע חיבור בין מספרים, אבל בהקשר שלנו הוא מבצע משהו אחר. נסו את הקוד הבא בקונסולה:
+  <pre class="brush: js">let one = 'Hello, ';
+let two = 'how are you?';
+let joined = one + two;
+joined;</pre>
+  התוצאה של המשתנה שנקרא <code>joined</code> תכיל את הערך של "Hello, how are you?"</li>
+ <li>במשתנה השלישי, פשוט חיברנו שתי מחרוזות יחד, אך אנחנו יכולים לחבר כמה מחרוזות שנרצה, כל עוד אנחנו כוללים את סימן <code>+</code> בין כל אחת מהמחרוזות. נסו לדוגמא:
+  <pre class="brush: js">let multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>אתם גם יכולים לערבב בין משתנים לבין מחרוזות בפועל. נסו את הבא:
+  <pre class="brush: js">let response = one + 'I am fine — ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: כשאנחנו מכניסים מחרוזת טקסט ממשית לתוך הקוד שלנו, כשהיא עטופה במרכאות (כפולות או בודדות), זה נקרא <strong>string literal</strong>.</p>
+</div>
+
+<h3 id="Concatenation_in_context_-_שרשור_בתוכן">Concatenation in context - שרשור בתוכן</h3>
+
+<p>בוא נסתכל על שרשור בפועל - הנה דוגמא ממאמרים קודמים בקורס:</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>כאן אנחנו משתמשים ב- {{domxref("window.prompt()", "window.prompt()")}} פונקציה בשורה 4, אשר מבקשת מהמשתמש לענות לשאלה באמצעות חלון קופץ, ולאחר מכן מאחסנת את הטקסט שהמשתמש הכניס לתוך משתנה נתון - במקרה הזה - המשתנה <code>name</code>.</p>
+
+<p>לאחר מכן אנחנו משתמשים ב-{{domxref("window.alert()", "window.alert()")}} בשורה 5, על מנת להציג למשתמש חלון קופץ נוסף המיכל מחרוזת שהרכבנו משתי מחרוזות בנויות ומהמשתנה <code>name</code>, באמצעות שרשור של המחרוזות.</p>
+
+<h3 id="מספרים_vs._מחרוזות">מספרים vs. מחרוזות</h3>
+
+<ol>
+ <li>מה יקרה כאשר אנחנו ננסה לחבר (לשרשר) בין מחרוזת לבין מספר? נזין את הקוד הבא בקונסולה:
+  <pre class="brush: js">'Front ' + 242;
+</pre>
+  היינו מצפים שניסיון כזה יחזיר לנו שגיאה, אך זה עובד בצורה מצויינת. נסיון להציג מחרוזת כמספר לא עושה הגיון, אבל הצגת מספר כמחרוזת כן, ולכן הדפדפן ממיר את המספר למחרוזת ומאחד בין שתי המחרוזות.</li>
+ <li>ניתן אפילו לעשות זאת עם שני מספרים - אנחנו יכולים להכריח מספר להפוך למחרוזת על ידי עטיפה שלו במרכאות. נסו את הקוד הבא. שימו לב שאנחנו משתמשים באופרטור <code>typeof</code> על מנת לבדוק האם הערך של המשתנה הוא מספר או מחרוזת:
+  <pre class="brush: js">let myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>אם יש לנו משתנה שיש לו ערך של מספר ואנחנו רוצים להמירו למחרוזת ללא ביצוע שינוי נוסף בו, או יש לנו משתנה שיש לו ערך שהוא מחרוזת ואנחנו רוצים להמירו למספר ולא לעשות בו שינוי נוסף, אנחנו יכולים להשתמש במתודות הבאות:
+  <ul>
+   <li>האובייקט {{jsxref("Number")}} יהפוך כל דבר שמועבר אליו למספר, אם הוא יכול. נסו את הקוד הבא:
+    <pre class="brush: js">let myString = '123';
+let myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>מצד שני, לכל מספר יש מתודה שנקראת <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">()toString</a></code> שתמיר כל מספר למחרוזת תואמת. נסו לדוגמא את הקוד הבא:
+    <pre class="brush: js">let myNum = 123;
+let myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  אלו יכולים להיות מאוד שימושיים בסיטואציות שונות. לדומא, אם משתמש מכניס מספר לתוך שדה טקסט בטופס, זה תמיד יהיה מחרוזת, גם אם הוא הזין מספרים. לעומת זאת, אם אנחנו רוצים להוסיף את המספר שהמשתמש הזין למשהו, זה חייב להיות מספר, ולכן אנחנו נצטרך להעביר את הקלט הזה דרך <code>()Number</code>. עשינו זאת בדיוק, בדוגמא שלנו ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L54">משחק ״נחש את הזיכרון״, בשורה 54</a>.</li>
+</ol>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>זה היה הבסיס של מחרוזת ב-JavaScript. במאמר הבא אנחנו נסתכל על מתודות מובנות הזמינות למחרוזות בשפה זו ונלמד כיצד אנחנו יכולים להשתמש בהם על מנת לבצע מניפולציות למחרוזות שלנו או לשנות את המבנה שלהן.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/useful_string_methods/index.html b/files/he/learn/javascript/first_steps/useful_string_methods/index.html
new file mode 100644
index 0000000000..8315262c35
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/useful_string_methods/index.html
@@ -0,0 +1,673 @@
+---
+title: מתודות שימושיות של מחרוזות
+slug: Learn/JavaScript/First_steps/Useful_string_methods
+tags:
+  - JavaScript
+  - אובייקט
+  - חילוץ וחיבור מחרוזות
+  - מחרוזות
+  - מחרוזות ב-JavaScript
+  - מציאת האורך של מחרוזת
+  - מציאת חלק ממחרוזת
+translation_of: Learn/JavaScript/First_steps/Useful_string_methods
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">לאחר שלמדנו את הבסיס של מחרוזות, נתקדם הלאה ונלמד אילו פעולות אנחנו יכולים לבצע על מחרוזות תוך שימוש במתודות מובנות, כגון מציאת אורך המחרוזת, חיבור ופיצול של מחרוזות, הפרדת תו בודד במחרוזת ועוד.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>
+    <p>הבנה כי מחרוזות הן בעצם סוג של אובייקט, ולמידה כיצד להשתמש במתודות בסיסיות הזמינות עבור אובייקט מסוג שכזה וכיצד לבצע מניפלוציות במחרוזות.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="מחרוזות_הן_בעצם_סוג_של_אובייקט">מחרוזות הן בעצם סוג של אובייקט</h2>
+
+<p id="Useful_string_methods">רוב הדברים ב-JavaScript הן בעצם אובייקט. כאשר אנחנו יוצרים מחרוזת כזו לדוגמא:</p>
+
+<pre class="brush: js">let string = 'This is my string';</pre>
+
+<p>המשתנה שלנו בעצם הופך למעין מופע של אובייקט מחרוזת (a string object instance), וכתוצאה מכך לא מעט מתודות ומאפיינים הופכים לזמינים עבור המשתנה. </p>
+
+<p>ניתן לראות את רשימת המתודות ומאפיינים אלו בדף בנושא  {{jsxref("String")}} - ראו את הכמות הלא מבוטלת הזו של מתודות ומאפיינים. </p>
+
+<p><strong>לפני שאתם נלחצים - אנחנו לא באמת צריכים לזכור את כל המתודות והמאפיינים הללו, לפחות לא בתחילת דרכנו. </strong>אך יש כאלו שנרצה לזכור ולתרגל שכן אנחנו נשתמש בהן לעיתים תכופות. </p>
+
+<p>נתחיל בתרגול על ידי הכנסת הדוגמאות הבאות ל<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה</a>:</p>
+
+<h3 id="מציאת_האורך_של_מחרוזת">מציאת האורך של מחרוזת</h3>
+
+<p>זהו מאפיין המאפשר לנו למצוא את האורך של המחרוזת - אנחנו פשוט משתמשים במאפיין {{jsxref("String.prototype.length", "length")}}. נסו להכניס את הקוד הבא בקונסולה:</p>
+
+<pre class="brush: js">let browserType = 'mozilla';
+browserType.length;</pre>
+
+<p>זה אמור להחזיר לכם את המספר 7, מכיוון שהמחרוזת ״mozilla״ מורכבת מ-7 תווים. זה מאוד שימושי מסיבות רבות: לדוגמא, לפעמים נרצה למצוא את האורך של כל שם ברשימה של שמות ואז להציג אותם לפי האורך שלהם, או לתת למשתמש הודעה ששם המשתמש שהוא הכניס הוא ארוך מדי אם הוא עבר אורך מסויים.</p>
+
+<h3 id="אחזור_של_תו_ספציפי_במחרוזת">אחזור של תו ספציפי במחרוזת</h3>
+
+<p>בהקשר זה, אנחנו יכולים לקבל תו ספציפי במחרוזת, על ידי שימוש ב - <strong>סוגריים מרובעות</strong> בסוף המחרוזת שלנו - כלומר, אנחנו צריכים לכלול (<code>[]</code>) בסוף שם המשתנה שלנו.</p>
+
+<p>בתוך הסוגריים המרובעות אנחנו צריכים להכניס את מס׳ התו שאנחנו רוצים לקבל בחזרה, כך שאם נרצה את התו הראשון במחרוזת, נזין את הקוד הבא:</p>
+
+<pre class="brush: js">browserType[0];</pre>
+
+<p>שימו לב שמחשבים מתחילים לספור מ-0 ולא מ-1. על מנת לקבל את התו האחרון של <em>כל</em> מחרוזת, אנחנו יכולים להשתמש בקוד הבא המבצע שימוש גם במאפיין <code>length</code> שלמדנו למעלה.</p>
+
+<pre class="brush: js">browserType[browserType.length-1];</pre>
+
+<p>האורך של "mozilla" הוא 7 תווים, אך מכיוון שהמונה (או יותר נכון - אינדקס) מתחיל לספור מ-0, אז המיקום של התו 6 בעצם הוא המיקום של התו האחרון במחרוזת, ולכן אנחנו צריכים את הקוד <code>length-1</code>. אנחנו יכולים להשתמש בזה לדוגמא על מנת למצוא את האות הראשון בסדרה של מחרוזות ולסדר המחרוזות לפי סדר האלפבית.</p>
+
+<h3 id="מציאת_חלק_ממחרוזת_וחילוצו">מציאת חלק ממחרוזת וחילוצו</h3>
+
+<ol>
+ <li>לפעמים נרצה לבדוק האם מחרוזת מסויימת בת מספר תווים נמצאת בתוך מחרוזת גדולה יותר. (באופן כללי אנחנו בודקים <em>האם מחרוזת המשנה קיימת בתוך המחרוזת</em>). ניתן לבצע זאת באמצעות מתודת {{jsxref("String.prototype.indexOf()", "indexOf()")}} אשר מקבלת {{glossary("parameter")}} אחד — את מחרוזת המשנה שאנחנו נרצה לחפש בתוך המחרוזת הגדולה יותר. נסו להזין את הקוד הבא:
+
+  <pre class="brush: js">browserType.indexOf('zilla');</pre>
+  קיבלנו בחזרה את הערך 2 שמציין שמחרוזת-המשנה "zilla" מתחילה במיקום 2 בתוך המחרוזת "mozilla". קוד שכזה יכול לעזור לנו לסנן מחרוזות. לדוגמא, אם יש לנו רשימה של כתובות אינטרנט, ונרצה לסנן רק את אלו המכילים את המחרוזת "zilla".</li>
+</ol>
+
+<ol start="2">
+ <li>שימו לב שניתן לבצע סינון זאת גם על דרך השלילה אשר תהיה כמובן יעילה יותר. נסו את הקוד הבא:
+  <pre class="brush: js">browserType.indexOf('vanilla');</pre>
+  קוד זה יחזיר  לנו את התוצאה <code>1-</code> אשר משמעותה היא כי מחרוזת המשנה שהזנו למתודה לא קיימת במחרוזת הראשית. כאן לדוגמא, המחרוזת 'vanilla' לא נמצאה במחרוזת הראשית.<br>
+  <br>
+  אנו יכולים לעשות בזה שימוש למצוא את כל המופעים של מחרוזות <strong>שכן</strong> מכילים את מחרוזת המשנה 'mozilla' או <strong>שאינם מכילים,</strong> אם אנחנו משתמשים באופרטור שלילה כפי שמצויין למטה.
+
+  <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string
+}</pre>
+ </li>
+ <li>כשאנחנו יודעים היכן מחרוזת המשנה שלנו מתחילה בתוך מחרוזת ראשית, ואנחנו יודעים באיזה תו אנחנו רוצים שמחרוזת המשנה תסתיים, אנחנו יכולים להשתמש ב - {{jsxref("String.prototype.slice()", "slice()")}} נסו להזין את הקוד הבא:
+  <pre class="brush: js">browserType.slice(0,3);</pre>
+  קוד זה יחזיר לנו כתוצאה "moz" - הארגומנט הראשון שהזנו - 0 - הוא המיקום של התו הראשון במחרוזת המשנה שנרצה לחלץ, והארגומנט השני שהזנו - 3 - יהיה התו שאחרי התו האחרון במחרוזת שנרצה לחלץ. זאת אומרת, החיתוך של המחרוזת מתרחש החל מהתו הראשון ועד, אך לא כולל, התו הרביעי. להזכירכם - מחשבים מתחילים לספור מ-0 ולא מ-1.<br>
+   </li>
+ <li>בנוסף, אם נרצה לחלץ את כל התווים אחרי תו מסויים, אנחנו יכולים להשמיט את הארגומנט השני. כלומר אנחנו ניתן למתודה רק את מיקום התו שאיתו נתחיל את החילוץ. ראו את הקוד הבא:
+  <pre class="brush: js">browserType.slice(2);</pre>
+  קוד זה מחזיר את הערך "zilla" - מכיוון שהאות שבמיקום 2 היא האות z ומכיוון שהשמטנו את הארגומנט השני, המתודה חילצה את כל התווים עד סוף המחרוזת <code>browserType</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>להזכירכם</strong>: הפרמטר השני של <code>()slice</code> הוא אופציונלי: אם נשמיט אותו, החיתוך יסתיים בסוף המחרוזת המקורית. יש גם אופציות נוספות. ראו בדף בנושא {{jsxref("String.prototype.slice()", "slice()")}} ללמוד על הנושא יותר.</p>
+</div>
+
+<div class="note">
+<p><strong>להזכירכם</strong>: מתודות ומאפיינים אלו לא שומרות את התוצאה של המניפולציה או החישוב שהן ביצעו. על מנת לשמור את התוצאה, אנחנו צריכים לשמור אותה במשתנה חדש. כמו כן, שימו לב שמתודות ומאפיינים אלו לא שינו את מחרוזת המקור שעליה ביצענו את החישובים/מניפולציות השונות.</p>
+</div>
+
+<h3 id="שינוי_אות_גדולה_לאות_קטנה_וההיפך">שינוי אות גדולה לאות קטנה, וההיפך</h3>
+
+<p>המתודות של מחרוזת {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} ו- {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} מאפשרות להמיר מחרוזת <strong>בשלמותה</strong> לאותיות גדולות או לאותיות קטנות, בהתאמה. זה יכול להיות מאוד שימוש כשנרצה לנרמל את כל הערכים שהמשתמש מכניס לפני שנעביר לשרת. להזכירכם - JavaScript היא case sensitive.</p>
+
+<p>נסו להכניס את הקוד הבא וראו מה התוצאה:</p>
+
+<pre class="brush: js">let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<p>נסו לבדוק מה הערך של המשתנה <code>radData</code> והאם מתודות אלו שמרו בו את התוצאה של הפעלתן.</p>
+
+<h3 id="עדכון_חלקים_של_מחרוזת">עדכון חלקים של מחרוזת</h3>
+
+<p>אנחנו יכולים להחליף מחרוזת אחת במחרוזת אחרת באמצעות המתודה {{jsxref("String.prototype.replace()", "replace()")}}. מתודה זו עובדת בצורה פשוטה וברורה, למרות שניתן לבצע איתה דברים מורכבים יותר, אך לא ניכנס אליהם במדריך זה.</p>
+
+<p>מתודה זו מקבלת 2 ארגומנטים/פרמטרים - הראשון הוא המחרוזת שאנחנו רוצים להחליף והשני הוא המחרוזת שתיכנס במקום. נסו את הדוגמא הבאה:</p>
+
+<pre class="brush: js">browserType.replace('moz','van');</pre>
+
+<p>שימו לב שגם הפעם הערך שמוחזר לנו הוא המחרוזת החדשה שבוצעה בה ההחלפה, אך הערך הזה לא נשמר במחרוזת שעליה עשינו את ההחלפה. על מנת לקבל את המחרוזת החדשה במשתנה שלנו <code>browserType</code> אנחנו נצטרך לקבוע שהערך שלו יהיה התוצאה של ההפעלה של מתודה זו. כלומר - <code>browserType = browserType.replace('moz','van');</code></p>
+
+<h2 id="דוגמאות_ללמידה_עצמאית">דוגמאות ללמידה עצמאית</h2>
+
+<p>בחלק זה אנחנו נדריך אתכם לבצע כמה מניפוליות וחישובים על מחרוזות. בכל תרגיל המפורט למטה, יש לנו כמה מערכים של מחרוזות, ולולאה שמחשבת את הערך של כל איבר במערך ומציגה אותו ברשימה. אתם לא צריכים להבין כרגע מערכים או לולאות - אלו יוסברו בהמשך המדריך. אתם צריכים לכתוב בכל תרגיל קוד שיציג את התוצאה של המחרוזות הללו, בהתאם לתרגיל.</p>
+
+<p>כל דוגמא מגיע עם כפתור "Reset" על מנת לאתחל את הקוד במידה והוא השתבש וכן כפתור "Show solution" על מנת להציג את פתרון אפשרי במקרה ונתקעתם.</p>
+
+<h3 id="סינון_של_הודעות">סינון של הודעות</h3>
+
+<p>בתרגיל זה אנחנו מתחיל בתרגיל פשוט - יש לנו מערך של הודעה ברכה, אבל אנחנו רוצים למיין ולסנן רק את אלו שמכילות הודעה ברכה בהקשר של כריסמס. אנחנו רוצים שתכתוב משפט תנאי בתוך הקוד <code>( ... )if</code> אשר יבדוק כל מחרוזת וידפיס אותה לרשימה רק אם היא מכילה ברכה של כריסמס.</p>
+
+<ol>
+ <li>חשבו תחילה איך אנחנו יכולים לבדוק האם ההודעה בכל פעם היא הודעה הקשורה לכריסמס. איזה מחרוזת מוצגת בכל ההודעות האלו ואיזו מתודה יכולה לבדוק האם המחרוזת נמצאת בתוך ההודעה הזו (אשר גם היא מחרוזת).</li>
+ <li>אנחנו נלמד לכתוב משפט תנאי בתצורת <em>operand1 operator operand2</em>. האם הערך הנמצא מצד שמאל שווה לערך הנמצא מצד ימין? האם תוצאת הפעלת המתודה מצד שמאל, תהא שווה לערך בצד ימין לצד ימין? רמז - במקרה הנוכחי יהיה עדיף לבדוק האם תוצאת הפעלת המתודה בצד שמאל שונה מהערך בצד ימין.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="קוד_לתרגול">קוד לתרגול</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 290px; width: 95%"&gt;
+const list = document.querySelector('.output ul');
+list.innerHTML = '';
+let greetings = ['Happy Birthday!',
+                 'Merry Christmas my love',
+                 'A happy Christmas to all the family',
+                 'You\'re all I want for Christmas',
+                 'Get well soon'];
+
+for (let i = 0; i &lt; greetings.length; i++) {
+  let input = greetings[i];
+  // Your conditional test needs to go inside the parentheses - הכניסו את הקוד שלכם כאן - בין הסוגריים המסולסלות של הלולאה
+  // in the line below, replacing what's currently there - בשורה מתחת - החליפו את מה שנמצא שם כרגע
+  if (greetings[i]) {
+    let listItem = document.createElement('li');
+    listItem.textContent = input;
+    list.appendChild(listItem);
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'const list = document.querySelector(\'.output ul\');' +
+'\nlist.innerHTML = \'\';' +
+'\nlet greetings = [\'Happy Birthday!\',' +
+'\n                 \'Merry Christmas my love\',' +
+'\n                 \'A happy Christmas to all the family\',' +
+'\n                 \'You\\\'re all I want for Christmas\',' +
+'\n                 \'Get well soon\'];' +
+'\n' +
+'\nfor (let i = 0; i &lt; greetings.length; i++) {' +
+'\n  let input = greetings[i];' +
+'\n  if (greetings[i].indexOf(\'Christmas\') !== -1) {' +
+'\n    let result = input;' +
+'\n    let listItem = document.createElement(\'li\');' +
+'\n    listItem.textContent = result;' +
+'\n    list.appendChild(listItem);' +
+'\n  }' +
+'\n}';
+
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="שינוי_אותיות_גדולות_וקטנות">שינוי אותיות גדולות וקטנות</h3>
+
+<p>בתרגיל זה יש לנו שמות של ערים בבריטניה, אך יש ערבוב של אותיות גדולות וקטנות בשמות הערים. אנחנו רוצים שתשנו את המחרוזות כך שכולן יהיו עם אותיות קטנות, למעט האות הראשונה שתהיה אות גדולה. דרך מומלצת לעשות זאת:</p>
+
+<ol>
+ <li>החליפו את כל המחרוזת שנמצאת משתנה <code>input</code> למחרוזת עם אותיות קטנות ואחסנו את התוצאה במשתנה חדש.</li>
+ <li>נסו לקבל את האות הראשונה של המחרוזת המאוחסנת במשתנה החדש שיצרתם ואחסנו את האות הראשונה במשתנה חדש נוסף.</li>
+ <li>השתמשו במשתנה זה כמשתנה המכיל את מחרוזת המשנה והחליפו את האות הראשונה לאות גדולה. אחסנו את התוצאה של ההחלפה במשתנה חדש.</li>
+ <li>שנו את הערך של המשתנה <code>result</code> כך שייה שווה לתוצאה הסופית ולא <code>input</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>רמז</strong>: הפרמטרים של מתודות של מחרוזות לא חייבים להיות מחרוזות מפורשות אלא הם יכולים להיות גם משתנים וגם משתנים שמופעלים עליהן מתודות נוספות.</p>
+</div>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 250px; width: 95%"&gt;
+const list = document.querySelector('.output ul');
+list.innerHTML = '';
+let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
+
+for (let i = 0; i &lt; cities.length; i++) {
+  let input = cities[i];
+  // write your code just below here
+
+  let result = input;
+  let listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'const list = document.querySelector(\'.output ul\');' +
+'\nlist.innerHTML = \'\';' +
+'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' +
+'\n' +
+'\nfor (let i = 0; i &lt; cities.length; i++) {' +
+'\n  let input = cities[i];' +
+'\n  let lower = input.toLowerCase();' +
+'\n  let firstLetter = lower.slice(0,1);' +
+'\n  let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' +
+'\n  let result = capitalized;' +
+'\n  let listItem = document.createElement(\'li\');' +
+'\n  listItem.textContent = result;' +
+'\n  list.appendChild(listItem);' +
+'\n' +
+'\n}';
+
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="חילוץ_וחיבור_מחרוזות">חילוץ וחיבור מחרוזות</h3>
+
+<p>בתרגיל זה, יש לנו מערך שכולל מס׳ מחרוזות המכילות מידע על תחנות רכבת באנגליה. המחרוזות הן פריטי מידע המכילים 3 אותיות עם קוד התחנה, לאחר מכן מידע ממוחשב כלשהו ולאחריו הסימן <code>;</code> ולאחר מכן שם התחנה. לדוגמא:</p>
+
+<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p>אנו רוצים שתחלצו את קוד התחנה ואת שם התחנה, ותאחסנו אותה במחרוזת חדשה במבנה הבא:</p>
+
+<pre>MAN: Manchester Piccadilly</pre>
+
+<p>אנו ממליצים לכם לבצע זאת בצורה הבאה:</p>
+
+<ol>
+ <li>חלצו את שלושת האותיות שהן קוד התחנה ואחסנו אותן במשתנה חדש.</li>
+ <li>מצאו את האינדקס (מיקום) של התו <code>;</code>.</li>
+ <li>חלצו את שם התחנה באמצעות האינדקס של תו <code>;</code> כנקודת התחלה ואחסנו את התוצאה במשתנה חדש.</li>
+ <li>אחדו בין שני המשתנים ביחד עם מחרוזת רגילה למחרוזת אחת שלמה.</li>
+ <li>שנו את הערך של משתנה  <code>result</code> שיהיה שווה לערך של המחרוזת החדשה ולא של <code>input</code>.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="קוד_נוסף_לתרגול">קוד נוסף לתרגול</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 285px; width: 95%"&gt;
+const list = document.querySelector('.output ul');
+list.innerHTML = '';
+let stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
+                'GNF576746573fhdg4737dh4;Greenfield',
+                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
+                'SYB4f65hf75f736463;Stalybridge',
+                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
+
+for (let i = 0; i &lt; stations.length; i++) {
+  let input = stations[i];
+  // write your code just below here
+
+  let result = input;
+  let listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'const list = document.querySelector(\'.output ul\');' +
+'\nlist.innerHTML = \'\';' +
+'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' +
+'\n                \'GNF576746573fhdg4737dh4;Greenfield\',' +
+'\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' +
+'\n                \'SYB4f65hf75f736463;Stalybridge\',' +
+'\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' +
+'\n' +
+'\nfor (let i = 0; i &lt; stations.length; i++) {' +
+'\n  let input = stations[i];' +
+'\n  let code = input.slice(0,3);' +
+'\n  let semiC = input.indexOf(\';\');' +
+'\n  let name = input.slice(semiC + 1);' +
+'\n  let result = code + \': \' + name;' +
+'\n  let listItem = document.createElement(\'li\');' +
+'\n  listItem.textContent = result;' +
+'\n  list.appendChild(listItem);' +
+'\n}';
+
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>היכולת שלנו לטפל בטקסט בדרכים שונות במהלך כתיבת הקוד שלנו היא חשובה מאוד וחשוב לשלוט בה - במיוחד ב - JavaScript שכן אתרי האינטרנט ויישומי האינטרנט נועדו לתקשורת בין אנשים. מאמר זה נועד להעניק לכם את הבסיס שאתם צריכים לדעת על מניפולציות של מחרוזת לעת עתה ויסייע לכם כשניכנס לדברים קצת יותר מורכבים. המאמר הבא יעסוק בסוג האחרון מבין סוגי המידע שנעבור עליהם כרגע - מערכים.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/variables/index.html b/files/he/learn/javascript/first_steps/variables/index.html
new file mode 100644
index 0000000000..3bed3e5bb3
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/variables/index.html
@@ -0,0 +1,333 @@
+---
+title: אחסון המידע שאנחנו צריכים - משתנים וקבועים
+slug: Learn/JavaScript/First_steps/Variables
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">לאחר קריאת המאמרים הקודמים, אתם אמורים לדעת כבה מהי JavaScript ומה היא יכולה לעשות עבורנו, כיצד אנו משתמשים ביחד עם טכנולוגיות web אחרות ומה המאפיינים העיקריים שלה ממעוף הציפור. במאמר זה אנחנו ניכנס לעומק של הבסיס של השפה ונסתכל על אחד מאבני הבניין של השפה - משתנים.</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>לקבל הכרות עם הבסיס של המשתנים.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="כלים_נדרשים">כלים נדרשים</h2>
+
+<p>לאורך מאמר זה, תתבקשו להזין מספר שורות קוד בקונסולה על מנת לבדוק את ההבנה שלכם. אם אתם משתמשים בדפדפן במחשב, הדרך הכי טובה לבדוק את הקוד היא באמצעות הקונסולה של JavaScript. לפרטים נוספים אודות הקונסולה ראה <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a>.</p>
+
+<h2 id="מהו_משתנה">מהו משתנה?</h2>
+
+<p>משתנה הוא קופסאת אחסון או קונטיינר, לערך מסויים. כמו שאנחנו עשויים להשתמש במספר על מנת לסכום, או במחרוזת על מנת להציג טקסט. משהו מיוחד בנוגע למשתנים הוא שהערכים שלהם יכולים להשתנות. נסתכל על הדוגמא הבאה:</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>בדוגמא זו, לחיצה על הכפתור תריץ מספר שורות קוד. הקוד בשורה 4 מקפיץ הודעה על גבי המסך של המשתמש ומבקש ממנו להכניס את שמו ומאחסן את הערך שהוזן במשתנה שעונה לשם <code>name</code>. הקוד בשורה 5 מקפיץ לנו הודעה נוספת עם שמו של המשתמש, שנלקח מהערך של המשתנה <code>name</code>.</p>
+
+<p>על מנת להבין מדוע זה שימושי כל כך, נסו לחשוב על דרך לרשום את הדוגמא הזו, מבלי להשתמש במשתנה. זה עלול להיראות כמו הקוד הבא:</p>
+
+<pre class="example-bad">let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...</pre>
+
+<p>אתם אולי לא מבינים עדיין את הסינטקס להצהרה על משתנה, אבל אתם מבינים את הרעיון - אם לא היו לנו משתנים, היינו צריכים לרשום כמויות עצומות של קוד, על מנת לבדוק האם השם אשר הוכנס על ידי המשתמש תואם למה שהגדרנו ואז להציג את ההודעה המתאימה. ברור ששימוש באופציה זו אינו יעיל בשום צורה ופשוט לא יעבוד שכן לא ניתן להכניס את האפשרויות בעולם.</p>
+
+<p>קיומם של משתנים הוא הגיוני ונדרש, וככל שנלמד יותר לעומק JavaScript אנחנו נתרגל לשימוש בהם באופן טבעי.</p>
+
+<p>דבר מיוחד נוסף לגבי משתנים הוא העובדה שהם יכולים להכיל כל דבר - לא רק מחרוזת או מספרים. משתנים יכולים להכיל גם מידע מורכב ואפילו פונקציות שלמות. נלמד על כך בהמשך.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אנחנו אומרים שמשתנים מכילים ערכים. זוהי אבחנה שחשוב לשים אליה. משתנים אינם ערכים בעצמם; הם רק קופסאות אחסון - קונטיינרים, בעבור ערכים. ניתן לדמיין זאת באמצעות התמונה הבאה:</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="Declaring_a_variable_-_הצהרה_על_משתנה">Declaring a variable - הצהרה על משתנה</h2>
+
+<p>על מנת לעשות שימוש במשתנה, אנחנו קודם כל צריכים ליצור אותו, או יותר מדוייק, אנחנו צריכים להצהיר עליו. על מנת להצהיר על משתנה אנחנו צריכים להשתמש במילה השמורה <code>var</code> <strong>או</strong> במילה השמורה <code>let</code> ולאחריהן השם שנרצה לתת למשתנה:</p>
+
+<pre class="brush: js">let myName;
+let myAge;</pre>
+
+<p>כאן הצהרנו על שני משתנים שנקראים <code>myName</code> ו- <code>myAge</code>. נסו להזין את השורות האלו בקונסולה. לאחר מכן, נסו ליצור משתנה אחד או שניים בעצמכם.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ב- JavaScript, כל הוראת קוד (לא כל שורת קוד) צריכה להסתיים עם הסימן <code>;</code> - אם לא נכניס סימן זה, הקוד רוב הסיכויים יעבוד, אבל אם נכניס מספר שורות קוד ביחד, כנראה שלא. אנא התרגלו להוסיף <code>;</code> בעת שאתם כותבים את הקוד שלכם.</p>
+</div>
+
+<p>אתם יכולים לבדוק האם הערכים האלו קיימים בסביבת ההרצה על ידי הדפסה של שמות המשתנים לקונסולה כפי שמתואר להלן:</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>כרגע למשתנים אלו אין כל ערך. אנחנו רק הצהרנו עליהם ובכך הם נוצרו, אך הם כרגע מעין ״קופסאות ריקות״. כשאנחנו מזינים את שמות המשתנים בקונסולה, קיבלנו בקונסולה <code>undefined</code>. אם לא היינו מצהירים עליהם, היינו מקבלים הודעת שגיאה אחרת. נסו להבין מה ההבדל ביניהם.</p>
+
+<pre class="brush: js">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אל תבלבלו בין משתנה שקיים אך לא מכיל ערך לבין משתנה שלא קיים כלל. אם נחשוב עליהם כקופסאות אחסון, משתנה שהוצהר אך לא נתנו לו ערך יצר לנו קופסא לאחסון, אך לא אחסנו בו כלום. כלומר הקופסא קיימת אך ריקה. במקרה כזה נקבל את הערך <code>undefined</code>.</p>
+
+<p>לעומת זאת, משתנה שלא הוצהר, זה כאילו לא יצרנו את קופסת האחסון מלכתחילה ולכן הודעת השגיאה שנקבל היא שהדפדפן לא מוצא את המשתנה, כלומר, הוא לא מוצא את קופסאת האחסון (כי לא יצרנו אותה).</p>
+</div>
+
+<h2 id="השמת_ערך_למשתנה">השמת ערך למשתנה</h2>
+
+<p>ברגע שהצהרנו על משתנה, אנחנו יכולים לאתחל אותו עם ערך שנשים לו. אנחנו עושים זאת על ידי סימן ה-״שווה״ - <code>=</code>, ולאחריו הערך שאנחנו נרצה לשים במשתנה. לדוגמא:</p>
+
+<pre class="brush: js">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>נסו להזין בקונסולה את הקוד הבא. אתם אמורים להראות שהערכים שהשמנו למשתנים מוחזרים לנו בקונסולה. שוב, אנחנו יכולים לקבל את הערך של משתנה על ידי הזנת שמו לקונסולה. ננסה זאת שוב:</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>ניתן להצהיר על משתנה וכן להשים לו ערך באותו זמן:</p>
+
+<pre class="brush: js">let myDog = 'Rover';</pre>
+
+<p>זו ככל הנראה תהיה הדרך שבה נרשום משתנים - הצהרה והשמה באותה שורה שכן זוהי דרך מהירה יותר מאשר לרשום הצהרה בשורה אחת והשמה של ערך בשורה אחרת.</p>
+
+<h2 id="ההבדלים_בין_var_לבין_let">ההבדלים בין var לבין let</h2>
+
+<p>בשלב זה אתם בטח שואלים ״מדוע צריכים שתי מילים שמורות על מנת להגדיר משתנים?״ או ״למה יש לנו גם את <code>let</code> וגם את <code>var</code>?״</p>
+
+<p>הסיבות הן בעיקר היסטוריות. כאשר JavaScript רק נוצרה, היה קיים רק <code>var</code>. זה עבד במרבית המקרים, אבל היו לו סוגיות שונות בצורה ובדרך שבה הוא עבד. ההתנהגות שלו הייתה יכולה להיות מבלבלת וקצת מעצבנת. לכן, <code>let</code> נוצר בגרסאות מודרניות יותר של JavaScript, והציג מילה שמורה חדשה ליצירת משתנים, אשר פועלת בצורה אחרת מהמילה השמורה <code>var</code> ומתקנת את הסוגיות שהיו עם דרך ההגדרה הקודמת. סתם לידיעה - דרך זו של שימוש במילה השמורה <code>let</code> החלה בגרסת העדכון החשובה של JavaScript שנקראת ES2015 (ES6).</p>
+
+<p>אנו נגע במספר הבדלים פשוטים ביניהם, אך לא ניגע בכולם כרגע. אנו נבין את ההבדלים ביניהם בהמשך ככל שניכנס יותר לעומק של השפה. אם תרצו להרחיב בנושא - היכנסו לקישור <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let reference page</a>.</p>
+
+<p>נתחיל בכך שאם נרשום מספר שורות קוד שבהן נצהיר על משתנה ונשים בו ערך. אנחנו יכולים להצהיר על משתנה באמצעות שימוש במילה <code>var</code> גם לאחר שהשמנו בו ערך והתוכנית עדיין תעבוד. כלומר, המשתנה יהיה מוכר לדפדפן. לדוגמא:</p>
+
+<pre class="brush: js">myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: קוד זה לא יעבוד כשננסה להכניס אותו שורה אחר שורה בקונסולה אלא רק כשנכניס את כל שורות קוד באמצעות JavaScript.</p>
+</div>
+
+<p>זה עובד בגלל מנגנון שנקרא <strong>Hoisting. </strong>אם תרצו להרחיב על כך, ראו <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">קישור</a> לפרטים נוספים על הנושא. בקצרה המשמעות שלו היא שב-JavaScript הצהרות על משתנים (והצהרות בכללי) מבוצעות לפני שיתר הקוד רץ, כלומר, הצהרה על משתנה במקום מסויים בקוד תהיה זהה להצהרה שלו בתחילת הקוד. יחד עם זאת, חשוב לשים לב שמנגנון זה משפיע רק על הצהרה של משתנים ולא על השמה של ערכים אליהם. הערכים שלהם יושמו אליהם בהתאם לסדר ריצת הקוד. </p>
+
+<p>Hoisting לא מתבצע יותר עם המילה השמורה <code>let</code>. אם נשנה את <code>var</code> ל- <code>let</code> בדוגמא למעלה, זה יציג לנו שגיאה. זה דבר טוב כמובן - הצהרה על משתנה לאחר שאנחנו משימים לו ערך גורמת לבלבול ולקושי בקריאה והבנה של הקוד.</p>
+
+<p>בנוסף, כשאנחנו משתמשים ב- <code>var</code>, אנחנו יכולים להצהיר על המשתנה שיצרנו באמצעותו כמה פעמים שנרצה ואילו בעת שימוש ב- <code>let</code> אנחנו לא יכולים. הקוד הבא לדוגמא, יעבוד:</p>
+
+<pre class="brush: js">var myName = 'Chris';
+var myName = 'Bob';</pre>
+
+<p>אבל הקוד הבא יקפיץ לנו שגיאה בשורה השנייה:</p>
+
+<pre class="brush: js">let myName = 'Chris';
+let myName = 'Bob';</pre>
+
+<p>ולכן נצטרך לרשום אותו בצורה הבאה:</p>
+
+<pre class="brush: js">let myName = 'Chris';
+myName = 'Bob';</pre>
+
+<p>שוב, מדובר בכלל חשוב אשר נועד למנוע הצהרה חוזרת של משתנה. אנו ממליצים לבצע שימוש כמה שיותר ב- <code>let</code> מאשר ב-<code>var</code> . אין שום סיבה שנרצה להשתמש ב- <code>var</code>, אלא אם אנחנו צריכים לתמוך בגרסאות ישנות של אינטרנט אקספלורר (גרסאות ישנות אלו לא תומכות ב- <code>let</code> אלא רק החל מגרסה 11; הדפדפן אדג׳ לעומת זאת תומך במלואו ב-<code>let</code>).</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אנחנו בשלבים של עדכון הדוגמאות בקורס זה לשימוש ב- <code>let</code> במקום <code>var</code>.</p>
+</div>
+
+<h2 id="עדכון_משתנה">עדכון משתנה</h2>
+
+<p>ברגע שמשתנה הוצהר והושם לו ערך, אנחנו יכולים לשנות (או לעדכן) את הערך שנמצא באותו משתנה, פשוט על ידי השמה של ערך אחר. נסו להזין את הקוד הבא בקונסולה:</p>
+
+<pre class="brush: js">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="מס׳_כללים_בנוגע_לשמות_משתנים">מס׳ כללים בנוגע לשמות משתנים</h3>
+
+<p>אנחנו יכולים לקרוא למשתנים שלנו כמעט בכל שם שנרצה, אבל ישנן מס׳ הגבלות. באופן כללי, היצמדו לשימוש באותיות לועזיות (0-9, a-z, A-Z) ולתו מסוג קו תחתון.</p>
+
+<ul>
+ <li>אל תשתמשו בתווים אחרים מכיוון שהם עלולים לגרום לשגיאות או שיהיה קשה להבין אותם - דמיינו שמתכנת צרפתי קורא למשתנים בשפה הצרפתית ומתכנת בריטי מנסה להבין מה פשר המשתנה.</li>
+ <li>אל תשימו קו תחתון בתחילת שמו של המשתנה - קו תחתון זה משמש במספר מבנים של JavaScript על מנת להצביע על דברים ספציפיים וזה עשוי לגרום לבלבול.</li>
+ <li>אל תשתמשו במספרים בתחילת השם של המשתנה. זה יגרום לשגיאה.</li>
+ <li>מוסכמה מקובלת היא להשתמש ב-<a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">״lower camel case"</a> - כאשר אנו קוראים למשתנה בשם המכיל מס׳ מילים, המילה הראשונה תתחיל באות קטנה, ואילו יתר המילים לאחר יתחילו באות גדולה.</li>
+ <li>אנא תנו למשתנים שלכם שמות הגיוניים ואינטואטיביים, על מנת לנסות לתאר כמה שניתן איזה מידע הם מכילים. אל תשתמשו באותיות או במספרים לבד. מצד שני, אל תקראו למשתנים בשמות ארוכים מדי.</li>
+ <li>משתנים הם case sensitive — כך לדוגמא המשתנה <code>myage</code> הוא משתנה שונה מהמשתנה <code>myAge</code>.</li>
+ <li>נסו להימנע משימוש במילים השמורים של JavaScript בתור שמות למשתנים. מילים שמורות אלו אותן מילים שמרכיבות את הסינטקס של השפה. כלומר, אנחנו לא יכולים להשתמש במילים כגון: <code>var</code>, <code>function</code>, <code>let</code>, וכן גם <code>for</code> כשמות למשתנים שלנו. הדפדפן יזהה אותם כרכיבי קוד אחרים, מה שעלול לגרום רוב הסיכויים לשגיאה.</li>
+</ul>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ניתן למצוא את רשימת המילים השמורות של השפה ב- <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p>
+</div>
+
+<p>דוגמא למתן שמות למשתני בצורה נכונה:</p>
+
+<pre class="example-good">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>דוגמא למתן שמות למשתני בצורה לא נכונה:</p>
+
+<pre class="example-bad">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>מילים שמורות:</p>
+
+<pre class="example-invalid">var
+Document
+</pre>
+
+<p>נסו ליצור מספר משתנים חדשים בהתאם לכללים שציינו למעלה.</p>
+
+<h2 id="סוגי_משתנים">סוגי משתנים</h2>
+
+<p>ישנם מס׳ סוגים של מידע שנוכל לאחסן במשתנים. בחלק הזה אנחנו נתאר אותם בקצרה. במאמרים הבאים אנו נלמד אותם לעומק.</p>
+
+<h3 id="Numbers_-_מספרים">Numbers - מספרים</h3>
+
+<p>אנחנו יכולים לאחסן מספרים כמשתנים, בין אם הם מספר שלם, כמו 30, או בין אם הם מספר עשרוני, כמו 2.456. ב- JavaScript אנחנו לא צריכים להצהיר על סוג המשתנה, בשונה מכמה שפות תכנות אחרות. כשאנחנו נותנים למשתנה ערך מסוג מספר, אנחנו <strong>לא</strong> משימים את הערך בין גרשיים. לדוגמא:</p>
+
+<pre class="brush: js">let myAge = 17;</pre>
+
+<h3 id="Strings_-_מחרוזות">Strings - מחרוזות</h3>
+
+<p>מחרוזות אלו חלקים של טקסט. כאשר אנחנו נותנים למשתנה ערך של מחרוזת, אנחנו צריכים לעטוף את המחרוזת בגרשיים כפולות <code>" "</code> או בגרש בודד <code>' '</code> אחרת JavaScript עלולה לנסות לפרש את הקוד כשם נוסף למשתנה. לדוגמא:</p>
+
+<pre class="brush: js">let dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="Booleans_-_בוליאנים">Booleans - בוליאנים</h3>
+
+<p>בוליאנים אלו ערכי אמת או שקר. משתנים שמכילים ערך בוליאני יכולים לקבל 2 ערכים: או ערך אמת <code>true</code> או ערך שקר <code>false</code>. לדוגמא:</p>
+
+<pre class="brush: js">let iAmAlive = true;</pre>
+
+<p>בפועל, אנחנו נשתמש במשתנה מסוג בוליאני בדרך הבאה:</p>
+
+<pre class="brush: js">let test = 6 &lt; 3;</pre>
+
+<p>כאן ביצענו שימוש באופרטור ״קטן מ-״ (<code>&lt;</code>) על מנת לבדוק האם 6 קטן מ-3. כפי שניתן לצפות, זה יחזיר לנו <code>false</code> מכיוון ש-6 לא קטן מ-3. נלמד יותר לעומק על אופרטורים אלו בהמשך הקורס.</p>
+
+<h3 id="Arrays_-_מערכים">Arrays - מערכים</h3>
+
+<p>מערך הוא בעצם אובייקט יחיד, המכיל מספר ערכים המתוחמים בתוך סוגריים מרובעות. נסו להכניס את הקוד הבא לתוך הקונסולה:</p>
+
+<pre class="brush: js">let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];</pre>
+
+<p>ברגע שהמערכים האלו מוצהרים, אנחנו יכולים לגשת לכל איבר במערך באמצעות ציון המיקום שלו במערך. נסו את הקוד הבא:</p>
+
+<pre class="brush: js">myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40</pre>
+
+<p>הסוגרים המרובעות מצביעות על האינדקס המתאים למיקום של האיבר שאנחנו רוצים שיוחזר. שימו לב שהמיקומים במערך מתחילים מ-0. כלומר, האיבר הראשון במערך הוא באינדקס 0.</p>
+
+<p>נרחיב על מערכים ב<a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">מאמר בהמשך הקורס</a>.</p>
+
+<h3 id="Objects_-_אובייקטים">Objects - אובייקטים</h3>
+
+<p>בתכנות, אובייקט הוא מבנה של קוד שמדמה אובייקט בעולם האמיתי. הוא מייצג מעין קופסא המכילה מידע על הגובה שלו, הרוחב שלו, האורך שלו או מאפיינים נוספים. אנחנו יכולים לדוגמא לייצר אובייקט שידמה אדם, ואובייקט זה יכיל מידע על שמו, גובה, משקל, שפה מדוברת וכד׳.</p>
+
+<p>הכניסו את הקוד הבא בקונסולה:</p>
+
+<pre class="brush: js">let dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>על מנת לאחזר מידע המאוחסן באובייקט, השתמשו בקוד הבא:</p>
+
+<pre class="brush: js">dog.name</pre>
+
+<p>אנו לא נעמיק בנושא אובייקטים כעת - אנו נלמד לעומק את הנושא ב<a href="/en-US/docs/Learn/JavaScript/Objects">מאמר</a> בהמשך.</p>
+
+<h2 id="השמת_משתנים_דינאמית">השמת משתנים דינאמית</h2>
+
+<p>JavaScript היא שפה דינאמית. שלא כמו שפות אחרת, ב- JavaScript אנחנו לא צריכים לציין איזה סוג של מידע יאוסן בתוך המשתנה (מספרים, מחרוזות, מערכים וכד׳).</p>
+
+<p>לדוגמא, אם אנחנו מצהירים על משתנה ונותנים לו ערך שעטוף בגרשיים, הדפדפן יתייחס אליו כמחרוזת:</p>
+
+<pre class="brush: js">let myString = 'Hello';</pre>
+
+<p>אם נכניס מספרים בתוך הגרשיים, הוא עדיין יהיה מחרוזת!</p>
+
+<pre class="brush: js">let myNumber = '500'; // oops, this is still a string
+typeof myNumber;
+myNumber = 500; // much better — now this is a number
+typeof myNumber;</pre>
+
+<p>נסו להכניס את הקוד שלמעלה לקונסולה שורה אחר שורה, וראו התוצאות. אתם תשימו לב שאתם משתמשים באופטור מיוחד שנקרא <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> - אופרטור זה מחזיר לנו את סוג הערך המאוחסן במשתנה שהעברנו לו. הפעם הראשונה שהרצנו את האופרטור הזה, הוא החזיר <code>string</code>, שכן באותה נקודה, המשתנה <code>myNumber</code> מכיל מחרוזת, <code>'500'</code>. בדקו מה הקונסולה תחזיר כשנזין את שתי השורות האחרונות.</p>
+
+<h2 id="Constants_-_קבועים">Constants - קבועים</h2>
+
+<p>להרבה שפות תכנות יש את הקונספט של <em>constant</em> או <em>קבוע</em> — משתנה שברגע שהכנסו לו ערך, אותו ערך לא משתנה. ישנן הרבה סיבות מדוע נרצה להשתמש בהם, מסיבות אבטחה - (אם סקריפט של אתר אחר מנסה לשנות את הערכים זה עלול ליצור בעיות) עד לפתרון שגיאות של הקוד והבנה שלו (קשה יותר לשנות בטעות ערכים שלא אמורים להשתנות).</p>
+
+<p>בשלביה המוקדים של השפה, קבועים לא היו קיימים. כעת יש בשפה קבועים ואנו משתמשים במילה השמורה <code>const</code>, על מנת להצהיר עליהם ולהשים בערך ערך שלא ישתנה:</p>
+
+<pre class="brush: js">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">;
+const hoursInDay = 24;</span></span></span></span></pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number"><code>const</code> עובד בדיוק כמו <code>let</code>, למעט העובדה שאנחנו לא יכולים לתת ל- <code>const</code> ערך חדש. בדוגמא הבאה, השורה השנייה תציג לנו שגיאה בקונסולה:</span></span></span></span></p>
+
+<pre class="brush: js">const daysInWeek = 7<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">;
+daysInWeek = 8;</span></span></span></span></pre>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>במאמר זה למדנו אודות משתנים - מהם, כיצד ליצור אותם ומה ההבדל בינם לקבועים. במאמר הבא אנחנו נלמד אודות מתמתיקה בסיסית ב-JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/what_is_javascript/index.html b/files/he/learn/javascript/first_steps/what_is_javascript/index.html
new file mode 100644
index 0000000000..4ad34985e7
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/what_is_javascript/index.html
@@ -0,0 +1,447 @@
+---
+title: מה זה JavaScript?
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
+tags:
+  - API
+  - JavaScript
+  - דרכים להוסיף JavaScript לדף
+  - הסבר על JavaScript
+  - מדריך
+  - מה זה JavaScript?
+  - מתחילים
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}} </div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">ברוך הבא לקורס JavaScript למתחילים של MDN. במאמר זה נסתכל על JavaScript ממעוף הציפור, ונענה על שאלות כגון ״מה זה JavaScript?״ ״מה ניתן לבצע איתה?״ ונוודא שאתם מרגישים בנוח עם מטרתה. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>ידע בסיסי בשימוש במחשב וכן הבנה בסיסית של HTML ו-CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>להכיר מעט את JavaScript, מה היא יכולה לעשות, ואיך היא קשורה לאתר אינטרנט.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="הגדרה_ממבט_על">הגדרה ממבט על</h2>
+
+<p>JavaScript היא שפת תכנות (שפת סקריפט) אשר מאפשרת לכם ליישם דברים מורכבים על גבי דפי האינטרנט - בכל פעם שדף אינטרנט מבצע משהו דינאמי כגון עדכון תכנים באופן עיתי, הצגת מפה אינטרקאטיבית, אנימציות שונות דו ותלת מימדיות וכד׳ (בניגוד לדף אינטרנט סטטי שרק מציג תוכן ללא שינוי כלשהו בדף), ניתן להיות בטוח ש JavaScript לוקחת בכך חלק. JavaScript היא החלק השלישי ב-״עוגת״ טכנולוגיות ה-web כאשר את שתי הטכנולוגיות האחרות למדנו בחלקים אחרים של איזור הלמידה (<a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>).   </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}} היא שפת סימון תגיות (ואינה שפת תכנות) שאנו משתמשים בה על מנת לבנות את תוכן הדף ולהעניק לו משמעות, לדוגמא, הגדרת פסקאות, כותרות, טבלאות מידע, סרגל ניווט וכן הטמעת תמונות ווידאו באתר.</li>
+ <li>{{glossary("CSS")}} היא בעצם סט של כללים המאפשר לנו להחיל כללי עיצוב שונים על תוכן דף ה-HTML בדרכים שונות כגון: רקע, גופן, צורת הפריסה של התוכן על גבי הדף, וכד׳. </li>
+ <li>{{glossary("JavaScript")}} היא שפת התכנות אשר מאפשרת לנו ליצור באופן דינאמי תוכן, לעדכן תוכן באופן דינאמי, לשלוט במולטימדיה, להנפיש תמונות, ועוד ועוד. </li>
+</ul>
+
+<p>שלושת השפות בנויות כשכבות אחת על גבי השנייה, כפי שניתן לראות באיור למעלה. ננסה להבין זאת באמצעות טקסט פשוט. נסמן את הטקסט באמצעות HTML, על מנת לתת לו מבנה ומטרה. בדוגמא הנוכחית למטה, סימנו את הטקסט באלמנט מסוג פסקה <code>&lt;p&gt;</code>.</p>
+
+<pre class="brush: html">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>לאחר מכן, נוסיף כמה כללי CSS  על מנת לעצב את האלמנט בצורה מסויימת:</p>
+
+<pre class="brush: css">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>לבסוף, נוסיף קוד JavaScript על מנת להעניק דינאמיות והתנהגות מסוימת:</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>נסו ללחוץ על הגרסה האחרונה של הטקסט וראו מה קורה.אתם יכולים למצוא את קוד המקור <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">כאן</a>, או <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">דף אינטרנט</a>.</p>
+
+<p>JavaScript יכולה לבצע הרבה יותר - נעמיק בכך בהמשך הלמידה.</p>
+
+<h2 id="אז_מה_ניתן_לבצע_עם_JavaScript">אז מה ניתן לבצע עם JavaScript?</h2>
+
+<p>הבסיס של JavaScipt מכיל כמה ממאפייני התכנות הנפוצים, אשר מאפשרים לנו לבצע פעולות כגון: </p>
+
+<ul>
+ <li><strong>אחסון ערכים במשתנים</strong> - בדוגמא לעיל, ביקשנו מהמשתמש שיכניס את שמו ולאחר מכן, אחסנו את השם שהמשתמש הזין במשתנה בשם <code>name</code>.</li>
+ <li><strong>ביצוע פעולות שונות על טקסט (ובתכנות ״מחרוזת״) </strong>- בדוגמא לעיל, לקנו את המחרוזת ״:Player 1״ ועליה וחיברנו אותה (שורה 8) למשתנה  <code>name</code>.</li>
+ <li><strong>הרצת קוד כתגובה לאירועים מסויימים המתרחשים על גבי דף האינטרנט </strong>- השתמשו באירוע (Event) מסוג  {{Event("click")}} על מנת לאתר התרחשות של לחיצת עכבר, ובתגובה להתרחשות אירוע זה, הרצנו קוד אשר מעדכן את תוכן הטקסט.</li>
+ <li><strong>ועוד הרבה יותר. </strong></li>
+</ul>
+
+<p>דבר מעניין נוסף הוא הפונקציונליות אשר בנויה על גבי הבסיס של שפת JavaScript. אותם API (<strong>Application Programming Interfaces</strong> ) מעניקים לנו אפשרויות משמעותיות אשר נוכל להשתמש בהם כאשר אנו כותבים את קוד ה-JavaScript שלנו. API בתרגום לעברית זה ״ממשק תכנות יישומים״.  </p>
+
+<p>API אלו חלקי קוד מוכנים אשר מאפשרים לנו כמפתחים להטמיע תוכניות אשר בצורה אחרת היה קשה מאוד להטמיע או אף בלתי אפשרי. הם מאפשרים לנו את הנוחות בתכנות, כפי שרהיטים מוכנים להרכבה (לדוגמא: איקאה) מאפשרים את הנוחות (המסויימת) בעיצוב דירה. הרבה יותר נוח לקחת סט מוכן להרכבה של מדף המכיל פלטת עץ מוכנה, עם ברגים ומעמד על מנת ליצור מדף קיר, מאשר להתחיל מהבסיס: למצוא את העץ המתאים, לחתוך אותו לגודל המתאים, למצוא את הברגים המתאימים ועוד. </p>
+
+<p>באופן כללי, API מחולקים לשתי קטגוריות:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>API של הדפדפן</strong> (<strong>Browser APIs</strong>) - אלו API מובנים בתוך דפדפן האינטרנט, ומאפשרים לקבל מידע/נתונים מסביבת העבודה של המשתמש או לבצע דברים שימושים מורכבים. לדוגמא: </p>
+
+<ul>
+ <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} מאפשר לנו לבצע מניפולציות ופעולות שונות על HTML ו-CSS כגון יצירה, שינוי, מחיקה, עיצוב של דף האינטרנט באופן דינאמי וכד׳. כך, בכל פעם שאנו רואים חלונית קופצת על גבי דף, או תוכן חדש שמוצג בדף האינטרנט, זו פעולה של ה-DOM.</li>
+ <li>The {{domxref("Geolocation","Geolocation API")}}מאפשר לנו לקבל מידע גיאוגרפי. כך בעצם  <a href="https://www.google.com/maps">Google Maps</a> מאתר את המיקום שלנו ומציג אותו על גבי המפה.</li>
+ <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs מאפשרים לנו ליצור גרפיקות מונפשות ואנימציות, דו מימדיות ותלת מימדיות. ניתן לראות דוגמאות מדהימות שאנשים יצרו באמצעותו.  technologies —see <a href="https://www.chromeexperiments.com">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> כמו {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}}  מאפשרים לנו לבצע דברים מעניינים עם מולטימדיה, כגון להפעיל וידאו ואודיו בדף עצמו, או ליצור וידאו באמצעות שימוש במצלמה של המשתמש (או של משתמש אחר) ועוד.  ראו דוגמא פשוטה על מנת להבין את הרעיון ב-<a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: הרבה מהדוגמאות אשר הובאו למעלה, לא יעבדו בדפדפנים ישנים - במהלך הניסוי והטעיה במהלך הקורס, אנו נצטרך לעשות שימוש בדפדפנים מתקדמים על מנת לעשות שימוש בדוגמאות אלו. דפדפנים אלו יכולים להיות כרום, פיירפוקס, אדג׳, אופרה.</p>
+
+<p>כמו כן, ככל ונתקדם בשלבי הפיתוח של הקוד, נצטרך לקחת בחשבון <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">בדיקת תאימות לדפדפנים השונים</a> יותר לעומק, על מנת שנוכל לאפשר ללקוח להשתמש בכל הפונקציונליות שהגדרנו. </p>
+</div>
+
+<p><strong>API של צד שלישי</strong> לא בנויים בתוך הדפדפן כברירת מחדל, ובעיקרון אנחנו נצטרך לקבל את הקוד והמידע שלהם ממקום אחר באינטרט. לדוגמא:</p>
+
+<ul>
+ <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> מאפשר לנו לדוגמא להציג את הציוצים האחרונים שלנו באתר שלנו.</li>
+ <li><a href="https://developers.google.com/maps/">Google Maps API</a> וכן <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> מאפשרים לנו להטמיע מפות באתר שלנו וכן מתן הגדרות מסויימות למפות אלו.</li>
+</ul>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: APIs אלו הם נושאים מתקדמים יחסית, ואנחנו לא נגע בהם במודול זה. ניתן למצוא מידע נוסף ב- <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>.</p>
+</div>
+
+<p>כמובן שיש עוד המון אפשרויות!, יחד עם זאת, כנראה שלאחר למידה כה קצרה של JavaScript, עדיין לא ניצור את פייסבוק או גוגל הבאים, אך ככל שנתקדם במדריך ונבין לעומק הבסיס, נתקדם בדרך הנכונה. </p>
+
+<h2 id="מה_JavaScript_עושה_על_גבי_דף_האינטרנט">מה JavaScript עושה על גבי דף האינטרנט?</h2>
+
+<p>כאן אנו נתחיל להסתכל על קוד, ובזמן שנעשה זאת, ננסה להבין מה קורה בפועל, כאשר JavaScript רצה בדף האינטרנט.</p>
+
+<p>בוא נחזור בקצרה על מה בפועל קורה כשאנו מעלים דף אינטרנט בדפדפן. (דיברנו על כך במאמר <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">כיצד CSS עובד</a>).  </p>
+
+<p>כאשר אנו מעלים דף אינטרנט בדפדפן, אנו מריצים את הקוד (HTML, CSS ו-JavaScript) בתוך סביבת הריצה (לשונית הדפדפן). ניתן לדמות את זה למפעל אשר מקבל אליו את חומרי הגלם (הקוד) ומייצר מכך מוצר מסויים (דף האינטרנט).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>JavaScript מורצת על ידי מנוע JavaScript של הדפדפן עצמו, <u><strong>לאחר</strong></u> שה-HTML וה-CSS הורכבו והושמו בדף האינטרנט שלנו. דבר זה מאפשר לנו להבטיח שהמבנה והעיצוב של דף האינטרנט הושלם ונמצא במקומו בזמן ש-JavaScript תחל לרוץ. </p>
+
+<p>מכיוון ששימוש נפוץ ועיקרי ב-JavaScript הוא האפשרות להעניק דינאמיות ולשנות HTML ו-CSS באמצעות Document Object Model API, מדובר בדבר הכרחי על מנת לאפשר זאת, שכן אם JavaScript תרוץ לפני שרכיבי ה-HTML וכללי העיצוב של CSS נטענו במלואם, עלולים להתרחש שגיאות באותה דינאמיות שביקשנו להעניק באמצעות JavaScript.</p>
+
+<h3 id="אבטחה_בדפדפן">אבטחה בדפדפן</h3>
+
+<p>לכל לשונית בדפדפן יש מעין ״סל״ או מתחם נפרד להרצת הקוד - בשפה מקצועית סלים או מתחמים אלו נקראים ״סביבות הרצה״ - זאת אומרת, שברוב המקרים, קוד בכל לשונית ירוץ באופן נפרד לחלוטין מלשוניות אחרות בדפדפן, ולא יוכל לגשת או להשפיע על הקוד בלשונית אחרת. דבר זה הינו דבר חשוב בהיבטי אבטחה - שכן אחרת, זה היה פותח אפשרות נוספות להאקרים לפרוץ לאתרים או לגנוב מידע. </p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: יש דרכים להעביר קוד ומידע בין אתרים/לשוניות שונות בצורה בטוחה, אך נושאים אלו הינם מתקדמים ולא נדון בהם בקורס זה.</p>
+</div>
+
+<h3 id="סדר_הריצה_של_JavaScript">סדר הריצה של JavaScript </h3>
+
+<p>כאשר הדפדפן נתקל בבלוק של קוד JavaScript, באופן כללי הוא יריץ את הקוד מלמעלה למטה. המשמעות היא שצריך לשים לב לסדר שבו אנו רושמים את הקוד. לדוגמא, בוא נחזור לבלוק הקוד שראינו בדוגמא הקודמת:</p>
+
+<pre class="brush: js">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p><u>שורה 1</u>: בקוד זה אנחנו בעצם מגדירים משתנה מסוג <code>const</code> (נרחיב עליו בהמשך) וקוראים לו בשם <code>para</code>, ובאמצעות ה-DOM אנחנו בוחרים את האלמנט HTML הראשון מסוג <code>p</code>.</p>
+
+<p><u>שורה 2:</u> אנו מצמידים למשתנה שהגדרנו מתודה בשם <code>event listener</code> (נרחיב על כך בהמשך) שבעצם ״תקשיב״ כאשר יתרחש אירוע מסוג לחיצה על ה-<code>para</code>, כלומר, על האלמנט <code>p</code>, קוד בלוק שנקרא <code>updateName</code> ירוץ. בלוק קוד זה הניתן לשימוש חוזר נקרא ״פונקציה״ והוא מוגדר בשורות 5-8. </p>
+
+<p>שורות 5-8: הגדרה של הפונקציה<code>updateName.</code> פונקציה זו מבקשת מהמשתמש להכניס את שמו ומשנה את התוכן של <code>para</code> לשמו של המשתמש ביחד עם המחרוזת ״:Player 1״. </p>
+
+<p>אם נשנה את הסדר של שורות הקוד, לדוגמא, נחליף בין שורות 1 ו-3, אנו נקבל שגיאה ב<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה של הדפדפן</a> מסוג:  <code>TypeError: para is undefined</code>. זה אומר שכאשר אנו מבצעים להוסיף את  <code>event listener</code>- האובייקט <code>para</code> עדין לא קיים ולכן לא נוכל להוסיף לו <code>event listener</code>.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: זוהי שגיאה מאוד נפוצה - חשוב לשים לב שהאובייקטים שאנו מנסים לגשת אליהם קיימים בטרם אנו מנסים לעשות איתם פעולות כלשהן. </p>
+</div>
+
+<h3 id="קוד_מהודר_מול_קוד_מפורש">קוד מהודר מול קוד מפורש</h3>
+
+<p>יכול להיות שנתקלתם במושגים כגון <strong>שפה מפורשת</strong> או <strong>שפה מקומפלת/מהודרת</strong> בהקשר של תכנות ופיתוח תוכנה.</p>
+
+<p>בשפות שהינן שפות ״<strong>מפורשות</strong>״, הקוד רץ מלמעלה למטה, והתוצאה של הרצת הקוד תוחזר במיידי, אנו לא צריכים לעשות טרנספורמציה כלשהי לקוד או שינוי שלו לתבנית אחרת לפני שהדפדפן יריץ אותו. </p>
+
+<p>לעומת זאת, שפות ״<strong>מקומפלות</strong>״ או שפות ״<strong>מהודרות״</strong> נדרשות לבצע שינוי כלשהו לתבנית אחרת לפני שהן יוכלו לרוץ על ידי המחשב. לדוגמא,  C/C++ מקומפלות לשפת assembly לפני הרצה על ידי המחשב. </p>
+
+<p>JavaScript היא שפה קלת-משקל ומעין מפורשת (בפועל, כן מבוצע קימפול, אך לא נרחיב על הנושא). לשני סוגי השפות יש יתרונות, אך לא נדון בהם כרגע. </p>
+
+<h3 id="קוד_צד-לקוח_מול_קוד_צד-שרת">קוד צד-לקוח מול קוד צד-שרת</h3>
+
+<p>ככל הנראה נתקלת במושגים קוד צד-לקוח (<strong>client-side</strong>) וקוד צד-שרת (<strong>server-side</strong>), במיוחד בהקשר של פיתוח Web. קוד צד-לקוח הוא קוד שרץ על גבי המחשב של המשתמש - כאשר צופים בדף אינטרנט, קוד צד-לקוח של דף האינטרנט יורד, מורץ ומוצג על ידי הדפדפן. במודול זה אנו נגע בעיקר ב- <strong>JavaScript של צד-לקוח.</strong></p>
+
+<p><strong>קוד צד-שרת</strong> מצד שני, ​​רץ על גבי השרת, והתוצאה שלו מורדת ומוצגת בדפדפן. דוגמאות לשפות פיתוח קוד צד-שרת כוללות בין היתר את PHP, Python, Ruby, ASP.NET וגם...JavaScript. כן, JavaScript יכולה לשמש גם כשפת פיתוח עבור צד-שרת. לדוגמא, בסביבת הפיתוח הפופולרית Node.js. ניתן להרחיב את הלמידה על JavaScript כשפת קוד-שרת בנושא הייעודי שלנו <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>. </p>
+
+<h3 id="קוד_דינאמי_מול_קוד_סטאטי">קוד דינאמי מול קוד סטאטי</h3>
+
+<p>המושג <strong>דינאמיות</strong> (<strong>dynamic</strong>) משמש הן לתיאור קוד צד-לקוח והן לתיאור קוד צד-שרת והוא מתייחס לאפשרות לעדכן את התצוגה של דף אינטרנט או יישום אינטרנט כך שיוצגו דברים אחרים בנסיבות אחרות ויווצר תוכן חדש ככל שנדרש. </p>
+
+<p>קוד צד-שרת יוצר באופן דינאמי תוכן חדש על גבי השרת, לדוגמא, מייצא מידע מתוך מאגר הנתונים, ואילו קוד צד-לקוח מייצר תוכן חדש בתוך הדפדפן של המשתמש, לדוגמא, יוצר טבלת HTML חדשה וממלא אותה בנתונים שביקשנו מהשרת, ואז מציג למשתמש את הטבלה על גבי דף האינטרנט.</p>
+
+<p>המשמעות של דינאמיות היא מעט שונה בין צד לקוח לצד שרת, אך הן קשורות אחת לשנייה, ובדרך כלל, הן עובדות יחד. </p>
+
+<p>דף אינטרנט שאין לו שום דינאמיות או עדכוני תוכן מכונה כדף <strong>סטאטי</strong> - הוא מציג למשתמש את אותו תוכן כל הזמן.  </p>
+
+<h2 id="כיצד_נוסיף_JavaScript_לדף_האינטרנט_שלנו">כיצד נוסיף JavaScript לדף האינטרנט שלנו?</h2>
+
+<p>JavaScript מוחלת על דף ה-HTML בדרך דומה לדרך שבה אנו מחילים את כללי ה-CSS.</p>
+
+<p>בעוד ש-CSS משתמש באלמנט {{htmlelement("link")}} על מנת להחיל גיליונות עיצוב חיצוניים ובאלמנט {{htmlelement("style")}} על מנת להחיל גיליונות עיצוב פנימיים, JavaScript צריכה אלמנט אחד - {{htmlelement("script")}}. נבין לעומק כיצד זה עובד: </p>
+
+<h3 id="Internal_JavaScript_(כאלמנט_בתוך_קובץ_ה-HTML)">Internal JavaScript (כאלמנט בתוך קובץ ה-HTML)</h3>
+
+<ol>
+ <li>אנא צרו העתק על גבי המחשב שלך של קובץ הדוגמא שלנו:  <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>.</li>
+ <li>פתחו את הקובץ בדפדפן ובעורך הקוד. אתם תראו ש-HTML יצר דף אינטרנט פשוט המכיל כפתור שניתן ללחוץ עליו.</li>
+ <li>בעורך הקוד - הוסיפו את הקוד הבא בתוך ה-head, לפני התגית <code>&lt;/head&gt;</code>:</li>
+ <li>
+  <pre class="brush: html">&lt;script&gt;
+
+  // JavaScript goes here
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>כעת, נוסיף קצת קוד JavaScript בתוך האלמנט {{htmlelement("script")}} על מנת שהדף יבצע משהו מעניין. לשם כך, הוסיפו את הקוד הבא מתחת לכיתוב:  " :JavaScript goes here line //״</li>
+ <li>
+  <pre class="brush: js">document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+ </li>
+ <li>שמרו את הקובץ ורעננו את הדפדפן - כעת אתם אמורים להבחין שכאשר אתם לוחצים על הכפתור, נוצרת כל פעם פסקה חדשה מתחת לפסקה הקודמת. </li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: אם הדוגמא לעיל לא עובדת לכם, בדקו האם שמרתם את הקובץ בשם הנכון, האם יש לו סיומת <code>html</code>? האם הוספתם את האלמנט  {{htmlelement("script")}}  ישר לפני תגית הסגירה <code>&lt;/head&gt;</code> ? להזכירכם, <strong>JavaScript היא case sensitive, וזה יכול להיות מאוד מסתכל. שימו לב לדקויות</strong><strong>.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: תוכלו לראות את הגרסה הזו גם ב- GitHub בקישור  <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a>  או <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">כדף אינטרנט</a>.</p>
+</div>
+
+<h3 id="External_JavaScript_(קישור_קובץ_JavaScript_חיצוני)">External JavaScript (קישור קובץ JavaScript חיצוני)</h3>
+
+<p>הכנסת JavaScript בתוך קובץ ה-HTML עובד בסדר גמור, אך מה אם נרצה לשים את קוד ה-JavaScript בקובץ אחר? נראה כיצד עושים זאת. </p>
+
+<ol>
+ <li>ראשית, צרו קובץ חדש באותה תיקיה שבו נמצא ה-HTML בשם <code>script.js</code> - וודאו שיש לו את סיומת הקובץ js על מנת שהוא יזוהה כ-JavaScript.</li>
+ <li>החליפו את האלמנט {{htmlelement("script")}}  עם האלמנט  {{htmlelement("script")}} :
+  <pre class="brush: html">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>בתוך קובץ <code>script.js</code>, הוסיפו את הקוד הבא:
+  <pre class="brush: js">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+ </li>
+ <li>שמרו ורעננו את הדפדפן. זה עובד בדיוק אותו דבר כמו JavaScript פנימי, רק שכעת JavaScript נמצאת בקובץ חיצוני. באופן כללי, שמירת קוד JavaScript בקובץ חיצוני עדיפה בהיבט ארגון הקוד ושימוש חוזר שלו בכמה קבצי HTML. בנוסף, זה מאפשר לנו לקרוא את ה-HTML בצורה ברורה יותר.</li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ניתן לראות את הגרסה הזו של הקוד בקישור  <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> וכ-<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">דף אינטרנט</a>.</p>
+</div>
+
+<h3 id="Inline_JavaScript_handlers_(בתוך_אלמנט_ספציפי_בקובץ_ה-HTML)">Inline JavaScript handlers (בתוך אלמנט ספציפי בקובץ ה-HTML)</h3>
+
+<p>תשומת לב כי לפעמים אנחנו ניתקל בקוד JavaScript שכתוב בתוך אלמנט ספציפי בקובץ ה-HTML.  זה נראה כך: </p>
+
+<div id="inline_js_example">
+<pre class="brush: js example-bad">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+</div>
+
+<p>ניתן את את הקוד הבא:</p>
+
+<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>לקוד זה יש את פונקציונליות זהה לקוד בשני החלקים הקודמים, כלומר, הוא מבצע בדיוק את אותו דבר, רק שאלמנט הכפתור - {{htmlelement("button")}}  מכיל בתוכו <code>onclick</code>  על מנת לאפשר לפונקציה לרוץ כשהכפתור נלחץ.</p>
+
+<p><strong>בבקשה לא לבצע שימוש בשיטה זו. </strong>זה נחשב ל-bad practice ״לזהם״ את קובץ HTML יחד עם JavaScript ולא יעיל, שכן בשיטה זו צריך להוסיף <code>()onclick=״createParagraph״ </code>לכל אחד מהכפתורים שיהיו בדף. </p>
+
+<p>לעומת זאת, שימוש ב-JavaScript בלבד, מאפשר לנו לבחור את כל הכפתורים באמצעות קוד פשוט וקצר. לדוגמא: </p>
+
+<pre class="brush: js">const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>ממבט ראשון זה אומנם נראה ארוך יותר מהאפשרות הראשונה, אך זה יעבוד לכל הכפתורים בדף, בכל כמות שהיא.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: נסו לשנות קצת את הגרסה של  <code>apply-javascript.html</code> והוסיפו עוד כפתורים לקובץ. כשתרעננו את הדף, תראו שכל כפתור שנלחץ, יוצר פסקה. </p>
+</div>
+
+<h3 id="שיטות_לטעינת_סקירפטים_(Script)">שיטות לטעינת סקירפטים (Script)</h3>
+
+<p>ישנן כמה סוגיות עם טעינה של סקריפטים באותו זמן. </p>
+
+<p>בעיה נפוצה היא שכל אלמנטי ה-HTML בדף מועלים בסדר שבה הם מוצגים/רשומים, מלמעלה למטה. אם אנחנו משתמשים ב-JavaScript על מנת לבצע מניפולציות באלמנטים על הדף (או יותר מדוייק, ב-DOM) הקוד שלנו לא יעבוד אם ה- JavaScript תיטען לפני שה-HTML שבו אנחנו מנסים לבצע מניפולציה ייטען בעצמו.</p>
+
+<p>בדוגמאות למעלה, ה-JavaScript הפנימי וקובץ ה-JavaScript החיצוני נטענו ורצו בראש המסמך, לפני שה-HTML הועבר. זה יכול ליצור שגיאה. על מנת למנוע זאת כאשר אנחנו מוסיפים JavaScript בתור אלמנט <code>script</code>, הוספנו את הקוד הבא: </p>
+
+<pre class="brush: js">document.addEventListener("DOMContentLoaded", function() {
+  ...
+});</pre>
+
+<p>זהו ״<strong>מאזין לאירוע</strong>״  - <strong>event listener</strong>, אשר ״מקשיב״ לאירוע של הדפדפן בשם ״DOMContentLoaded״. אירוע זה מעיד על כך שגוף ה-HTML, כל תוכן שנמצא בתוך תגית <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">&lt;body&gt;</span></font>  הועלה בשלמותו. כך, קוד JavaScript בתוך אותו בלוק לא ירוץ עד אשר האירוע יחל, ולכן השגיאה נמנעה. בהמשך הקורס, נרחיב על אירועים ומאזינים לאירועים. </p>
+
+<p>על מנת למנוע זאת כאשר אנחנו מוסיפים JavaScript באמצעות קובץ חיצוני, אנחנו משתמשים באפשרות יחסית חדשה של JavaScript, שהיא תכונה (attribute) בשם <code>defer</code>. שבעצם אומרת לדפדפן להמשיך לטעון את ה-HTML ברגע שהוא הגיע לתגית האלמנט <code>&lt;script&gt;</code>:</p>
+
+<pre class="brush: js">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+
+<p>בשני המקרים, ה-HTML ייטען במקביל והקוד יעבוד. </p>
+
+<div class="note">
+<p><strong>תשומת לב</strong>: במקרה של JavaScript הנטען מקובץ חיצוני, אנחנו לא השתמשנו באירוע <code>DOMContentLoaded</code>  מכיוון שתכונת ה-<code>defer </code>פתרה את הבעיה. יחד עם זאת, ניתן להשתמש ב-<code>defer</code> ב-JavaScript חיצוני בלבד. </p>
+</div>
+
+<p>דרך מקובלת (ואינה נדרשת יותר) לפתור את הבעיה הזו, הייתה לשים את אלמנט ה-<code>script</code> שלנו ישר מתחת לתגית הסגירה של body. כלומר ישר מתחת לתגית <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">&lt;body</span><span style="background-color: rgba(220, 220, 220, 0.498039);">/</span><span style="background-color: rgba(220, 220, 220, 0.498039);">&gt;</span></font>כך שראשית ייטען כל ה-<code>body</code>. הבעיה עם פתרון זה הוא שטעינה/העברה של הסקריפט חסום לחלוטין עד אשר ה-HTML DOM נטען באופן מלא. באתרים גדולים עם כמות גדולה של JavaScript, זה יכול ליצור בעית ביצועים אשר גורמת להאטת האתר.</p>
+
+<h4 id="async_and_defer">async and defer</h4>
+
+<p>בעיקרון יש  דרכים נוספות לעקוף את סוגיית חסימת הסקריפט - באמצעות — <code>async</code> and <code>defer</code>.</p>
+
+<p>סקריפטים בעלי תכונה של <code>async</code> יורדו מבלי לחסום את הדף ויורצו ברגע שהסקריפט יסיים לרדת. אין בטחון שהסקריפטים ירוצו בסדר מסויים, אלא שהם פשוט לא יעצרו מיתר הדף מלהיות מוצג. דרך טובה להשתמש ב-<code>async</code> היא כאשר הסקריפטים בדף רצים באופן עצמאי אחד מהשני ולא תלויים בסקריפטים אחרים בדף.</p>
+
+<p>לדוגמא:</p>
+
+<pre class="brush: html">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>לא ניתן להסתמך על כך שהסקריפטים ירוצו בסדר שבה הם הועלו. הראשון עלול להיטען אחרי השני או השלישי, ובמקרה הזה, כל פונקציה לדוגמא אשר מוגדרת באותם סקריפטים ותלויה בקובץ הראשון, תציג שגיאה כי הקובץ הראשון לא מוגדר בזמן שהסקריפט השני או השלישי רץ.</p>
+
+<p><code>defer</code> לעומת זאת, גורמת לכך שהסקריפטים ירוצו בסדר שבה הם מוצגים על גבי הדף ותריץ אותם ברגע שהסקריפט והתוכן יורדו:</p>
+
+<pre class="brush: html">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</pre>
+
+<p>פה מה שיקרה הוא שכל הסקריפטים עם התכונה של <code>defer</code> ייטענו בסדר שבו הם מופיעים בדף. כך, אנחנו יכולים להיות בטוחים שהקובץ הראשון ייטען במלואו לפני שהקובץ השני יתחיל לרוץ וכך הלאה. </p>
+
+<p>לסיכום:</p>
+
+<ul>
+ <li>אם הסקריפטים שלנו לא צריכים לחכות לקבצי סקריפטים אחרים והם יכולים לרוץ עצמאית, נשתמש ב-<code>async</code>.</li>
+ <li>אם הסקריפטים צריכים לחכות לקבצי סקריפטים אחרים ותלויים בה, נשתמש ב-<code>defer</code> ונסדר את הסקריפטים בדף בסדר שבו אנו רוצים להריץ אותם. </li>
+</ul>
+
+<h2 id="הערות_ב-JavaScript">הערות ב-JavaScript</h2>
+
+<p>כמו בשפות HTML ו-CSS, גם ב-JavaScript  ניתן להוסיף הערות בקוד, אשר הדפדפן יתעלם מהן ונועדו על מנת לספק הוראות למפתחים אחרי כיצד הקוד עובד, וגם לכם, אפשרות לרענן את זכרונכם. <strong>הערות הן מאוד שימושיות</strong>, אנא בצעו בהם שימוש לעיתים קרובות, במיוחד עבור יישומים גדולים. </p>
+
+<p>יש שני סוגי הערות:</p>
+
+<ul>
+ <li><strong>הערת בת שורה אחת</strong>, ונכתבת באמצעות הוספת התווים<code> // </code>:
+
+  <pre class="brush: js">// I am a comment</pre>
+ </li>
+ <li><strong>הערת רבת שורות,</strong> הנכתבת בין התווים <code>*/</code>  לתווים  <code>/*</code> :
+  <pre class="brush: js">/*
+  I am also
+  a comment
+*/</pre>
+ </li>
+</ul>
+
+<p>לדוגמא: </p>
+
+<pre class="brush: js">// Function: creates a new paragraph and appends it to the bottom of the HTML body.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page in an array format.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: באופן כללי - יותר הערות בדרך כלל עדיף מקצת מדי הערות, אבל צריך לשים לב לא למצוא את עצמנו מוסיפים יותר מדי הערות שמסבירות מהן המשתנים שהגדרנו (במקרה כזה יהיה עדיף כבר להשתמש בשם הגיוני) או הערות שמסבירים פעולות פשוטות ומובנות בקלות. </p>
+</div>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>כעת עשינו את הצעד הראשון לתוך עולמה של JavaScript. התחלנו עם קצת תיאוריה על מנת להתחיל להתרגל להשתמש בה ולהבין מה הדברים שאנחנו יכולים לבצע איתה. בהמשך הדרך ראינו מספר דוגמאות קוד ולמדנו כיצד JavaScript משתלבת באתר האינטרנט שלנו, יחד עם רכיבים נוספים. </p>
+
+<p>JavaScript עלולה להיראות לנו קצת מלחיצה או לא ברורה בשלב זה, אבל אל דאגה, בקורס הזה אנחנו הולכים בצעדים קטנים אשר נבנים בצורה הגיונית. במאמר הבא אנחנו נעבור ליישום פרקטי ונתחיל בבניית דוגמאות JavaScript שלכם באופן עצמאי.</p>
+
+<ul>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/first_steps/what_went_wrong/index.html b/files/he/learn/javascript/first_steps/what_went_wrong/index.html
new file mode 100644
index 0000000000..87d85d786c
--- /dev/null
+++ b/files/he/learn/javascript/first_steps/what_went_wrong/index.html
@@ -0,0 +1,251 @@
+---
+title: מה השתבש? - פתרון שגיאות ב-JavaScript
+slug: Learn/JavaScript/First_steps/What_went_wrong
+translation_of: Learn/JavaScript/First_steps/What_went_wrong
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">כשבנינו את המשחק ״שחק את המספר״ במאמר הקודם, בטח שמתם לב שהוא לא עבד. מאמר זה לספק לכם הבנה כיצד למצוא שגיאות ב-JavaScript ולתקן אותן.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">ידע מוקדם:</th>
+   <td>הבנה בסיסית של מחשב, הבנה בסיסית של  HTML, CSS ו - JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>
+    <p>הכרת חלק מהאפשרויות ללתיקון שגיאות בקוד שלנו.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="סוגי_שגיאות">סוגי שגיאות</h2>
+
+<p>באופן כללי, כשאנחנו מבצעים משהו שגוי בקוד, יש שתי סוגי שגיאות עיקריות שאנחנו ניתקל בהן:</p>
+
+<ul>
+ <li><strong>Syntax errors - שגיאות סינטקס</strong>: אלו בעיקרון שגיאות כתיב בקוד שכתבנו שגורמות לתוכנית לא לרוץ בכלל, או להפסיק לעבוד בשלב מסוים. בדרך כלל גם נקבל הודעת שגיאה מסויימת. שגיאות אלו בדר״כ קלות לתיקון, ככל ואנחנו מכירים את הכלים שעומדים לרשותנו ומה הודעת השגיאה אומרת.</li>
+ <li><strong>Logic errors - טעויות לוגיות</strong>: אלו שגיאות שבהן הסינטקס היה נכון, כלומר כתבנו ללא שגיאות כתיב, אבל הקוד לא מבצע את מה שרצינו שיבצע. אלו שגיאות שקצת יותר מורכב לתקן אותן מאשר שגיאות סינטקס, שכן הן לרוב לא יקפיצו הודעת שגיאה.</li>
+</ul>
+
+<p>אוקיי, זה לא <em>כזה</em> פשוט — יש חלוקות נוספות של סוגי השגיאות, וככל ונעמיק בחומר ננחקור אותן לעומק. לצרוך הלימוד כרגע, החלוקה הזו תספיק בהתחלה. </p>
+
+<h2 id="דוגמא_לשגיאה">דוגמא לשגיאה</h2>
+
+<p>לשם התחלה, חזרו למשחק ״נחש את המספר״ שלנו - רק שהפעם, השתמשו בקובץ שלנו שהוכנסו בו מכלתחילה מספר שגיאות. כנסו ל-Github והכינו לעצמכם עותק מקומי של <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (ראו זאת בדף אינטרנט<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html"> כאן</a>).</p>
+
+<ol>
+ <li>לשם התחלה, פתחו את הקובץ המקומי בעורך הקוד ובדפדפן.</li>
+ <li>נסו לשחק עם המשחק, אתם תשימו לב כשאתם לוחצים על כפתור - "Submit guess", הכפתור לא עושה כלום.</li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: יכול להיות שהגרסה שאתם עבדתם עליה לא עובדת בעצמה, ואולי אותה תרצו לתקן. בכל מקרה, אנא השתמשו בגרסה שלנו לאורך המאמר הנוכחי, על מנת שתוכלו ללמוד את הטכניקות שאנחנו נלמד כאן. לאחר מכן, חזרו לדוגמא שלכם ונסו לתקן אותה אם היא אינה עובדת.</p>
+</div>
+
+<p>בשלב זה, ניעזר בקונסולה בדפדפן על מנת לראות את שגיאות הסינטקס, וננסה לתקן אותם. </p>
+
+<h2 id="תיקון_שגיאות_סינטקס">תיקון שגיאות סינטקס</h2>
+
+<p>בתחילת הקורס, הזנו מס׳ פקודות של JavaScript לתוך ה<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">קונסולה</a>. יתרון נוסף של שימוש בקונסולה הוא העובדה שהקונסולה מחזירה לכם הודעות בדבר שגיאות כתיב כאשר אלו קיימות בקוד ה-JavaScript אשר נטען על ידי מנוע ה- JavaScript של הדפדפן. בוא נבדוק זאת:</p>
+
+<ol>
+ <li>לך ללשונית שבה יש את הקובץ <code>number-game-errors.html</code> פתוח ופתחו את הקונסולה. אתם אמורים לראות שגיאה שמכילה את המלל הבאה:<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>זו שגיאה דיי קלה לאיתור, והדפדפן מספק לם מס׳ נתונים על מנת לעזור לכם - צילום המסך לעיל לקוח מדפדפן Firefox אבל גם דפדפנים אחרים מספקים את אותו מידע. משמאל לימין, זו השגיאה:
+  <ul>
+   <li>״x״ אדום אשר יעיד על כל שקיימת שגיאה.</li>
+   <li>הודעת שגיאה על מנת להראות שמשהו השתבש: "TypeError: guessSubmit.addeventListener is not a function".</li>
+   <li>טקסט וקישור "Learn More" אשר יוביל לדף MDN שמסביר מהי השגיאה - שימו לב שקישור זה קיים רק בפיירפוקס ולא בכרום.</li>
+   <li>השם של קובץ JavaScript אשר מקושר ללשונית ה-Debugger. אם נעקוב אחרי הקישור נראה את השורה המדויקת שבה התרחשה השגיאה.</li>
+   <li>מספר השורה שבה התרחשה השגיאה, ומספרו של התו באותה השורה שבו השגיאה נראתה לראשונה. במקרה שלנו, השגיאה התרחשה בשורה 86, ובתו מספר 3.</li>
+  </ul>
+ </li>
+ <li>אם נסתכל על שורה 86 בעורך הקוד שלנו, אנחנו נמצא את השורה הבאה:
+  <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre>
+ </li>
+ <li>הודעת שגיאה זו אומרת ש-"guessSubmit.addeventListener is not a function", אז אנחנו כנראה אייתנו משהו בצורה לא נכונה. אם אנחנו לא בטוחים לגבי האיות הנכון של כתיב/סינטקס מסויים, הפתרון הכי טוב זה להסתכל על המאפיינים של הסינטקס באתר של MDN. הדרך הכי טובה לעשות זאת היא לחפש "mdn <em>name-of-feature</em>" במנוע החיפוש האהוב עליכם. הנה קישור לדוגמא לחסוך לכם זמן <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code>.</li>
+ <li>אז, אם אנחנו מסתכלים על הדף, השגיאה הופיעה ככל הנראה מכיוון שאייתנו את שם המתודה לא נכון. זכרו ש- JavaScript היא case sensitive, וכל שינוי קטן באיות, או שימוש באותיות גדולות/קטנות לא בצורה נכונה, יגרום לשגיאה. שינוי של <code>add<strong>e</strong>ventListener</code> לכתיב הנכון: <code>add<strong>E</strong>ventListener</code> אמור לתקן את הבעיה.</li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לבכם</strong> ראו גם: <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a>. זהו דף שלנו שמסביר בפרטים על השגיאה הזו.</p>
+</div>
+
+<h3 id="שגיאות_סינטקס_-_דוגמאות_נוספות">שגיאות סינטקס - דוגמאות נוספות</h3>
+
+<ol>
+ <li>שמרו את הדף ורעננו אותו, אתם אמורים לראות שהשגיאה נעלמה.</li>
+ <li>כעת, אם המשתמש ינסה להכניס ניחוש וללחוץ על הכפתור של Submit, תתקבל שגיאה נוספת:<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>הפעם, השגיאה מדווחת עם ההודעה הבאה: "TypeError: lowOrHi is null", בשורה 78.
+  <div class="note"><strong>לתשומת לבכם</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> הוא ערך מיוחד שמשמעותו הוא ״כלום״ או ״ללא ערך״. כך <code>lowOrHi</code> אמנם הוצהר ואותחל, אבל הוא ללא כל ערך, אין לו סוג ואין ערך שהוזן לתוכו.</div>
+
+  <div class="note"><strong>לתשומת לבכם</strong>: שגיאה זו לא הופיעה ברגע שהדף נטען שכן שגיאה זו נמצאת בתוך פונקציה - בתוך <code>() { ... }checkGuess</code>. אנו נלמד על פונקציות במאמרים הבאים, ואנו נלמד שקוד אשר נמצא בתוך פונקציה רץ בסקופ (מתחם) אחר ונפרד מהסקופ שרץ בו קוד מחוץ לפונקציה. במקרה הנוכחי - הקוד שבתוך הפונקציה אשר גרם לשגיאה לא רץ עד אשר הפונקציה <code>()checkGuess</code> לא הופעלה בשורה 26.</div>
+ </li>
+ <li>:הסתכלו על הקוד בשורה 78
+  <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre>
+ </li>
+ <li>שורה זו מנסה לקבוע את ה-property - מאפיין:  <code>textContent</code> של המשתנה <code>lowOrHi</code> למחרוזת טקסט, אך זה לא יעבוד מכיוון ש-<code>lowOrHi</code> לא מכיל את הערך שהוא אמור להכיל. בו ננסה לחפש מופעים נוספים של <code>lowOrHi</code> בקוד שלנו. הפעם הראשונה שנמצא אותו תהיה בשורה 48:
+  <pre class="brush: js">var lowOrHi = document.querySelector('lowOrHi');</pre>
+ </li>
+ <li>בשלב זה אנחנו מנסים להפוך את המשתנה שלנו להפנייה לאלמנט בדף ה-html, בוא ננסה לראות האם הוא מקבל את הערך <code>null</code> אחרי ההרצה של השורה הזו. הוסיפו את הקוד הבא לאחר שורה 49:
+  <pre class="brush: js">console.log(lowOrHi);</pre>
+
+  <div class="note">
+  <p><strong>לתשומת לבכם</strong>: <code><a href="/en-US/docs/Web/API/Console/log">()console.log</a></code> מקבלת ארגומנט כלשהו ומדפיסה אותו לקונסולה. זוהי פונקציה מאוד שימושית לשם איתור שגיאות.</p>
+  </div>
+ </li>
+ <li>שמור ורענן, ואתה אמור לראות ש-<code>()console.log</code> החזירו את התשובה הבאה בקונסולה:<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> אנו רואים שהערך של <code>lowOrHi</code>הוא בעצם <code>null</code> בנקודה זו ולכן הבעיה היא עם שורה 48.</li>
+ <li>ננסה לחשוב מהי הבעיה. שורה 28 משתמשת במתודה <code><a href="/en-US/docs/Web/API/Document/querySelector">()document.querySelector</a></code> על מנת לקבל הפניה לאלמנט באמצעות בחירת סלקטור ה-CSS שלו. אם נסתכל בדף, אנחנו יכולים למצוא את האלמנט הרלוונטי:
+  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>כאן אנחנו רואים שאנחנו צריכים סלקטור של קלאס, אשר מתחיל עם (<code>.</code>), אבל הסלקטור שמועבר במתודה <code>()querySelector</code> בשורה 48 אינו מכיל נקודה. זו יכולה להיות הבעיה, נסו לשנות את <code>lowOrHi</code> ל- <code>.lowOrHi</code> וראו מה קורה.</li>
+ <li>שמרו ורעננו את הדף ו-<code>()console.log</code> אמור להחזיר את האלמנט <code>&lt;p&gt;</code> שרצינו. </li>
+</ol>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ראו גם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> -  דף ההסבר שלנו לפרטים נוספים על שגיאה זו.</p>
+</div>
+
+<h3 id="שגיאות_סינטקס_נוספות">שגיאות סינטקס נוספות</h3>
+
+<ol>
+ <li>אם תנסו לשחק עכשיו במשחק, אתם אמורים להצליח להתקדם יותר - אך עד שהמשחק יסתיים, בין אם ניחשתם את המספר האקראי הנכון ובין אם נגמרו לך הנסיונות.</li>
+ <li>כשהמשחק נגמר, אנחנו מקבלים שגיאה מסוג - "TypeError: resetButton.addeventListener is not a function"! אשר מופיעה בשורה 94.</li>
+ <li>אם נסתכל על שורה 94, נראה כי עשינו טעות באיות המתודה <code>addEventListener</code> ולכן נדרש לשנות את הקוד. להזכירכם, מתודות הן case senitive.</li>
+</ol>
+
+<h2 id="טעות_לוגית">טעות לוגית</h2>
+
+<p>בשלב זה, המשחק אמור לעבוד טוב, אך עם זאת, אחרי כמה משחקים, אתם תשימו לב שהמספר האקראי שלנו הוא תמיד 0 או 1. זה לא ממש מה שהתכוונו.</p>
+
+<p>יש בוודאות שגיאה לוגית במשחק איפשהו, אך אנחנו לא מקבלים הודעת שגיאה, המשחק עובד, אך לא כמו רצינו.</p>
+
+<ol>
+ <li>נסו לחפש את המשתנה <code>randomNumber</code> ואת השורות בקוד שבהן אנחנו מגדירים אותו. הוא נמצא בשורה 44:
+
+  <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;</pre>
+  והשורה שבה אנחנו מייצרים מספר אקראי חדש לאחר כל משחק היא בשורה 113:</li>
+ <li>
+  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre>
+ </li>
+ <li>על מנת לבדוק האם השורות האלו הן הבעיתיות, אנחנו ניעזר ב- <code>()console.log</code> ונכניס את הקוד הבא מתחת לשתי שורות לעיל:
+  <pre class="brush: js">console.log(randomNumber);</pre>
+ </li>
+ <li>שמרו ורעננו את הדף ותנסו לשחק מספר משחקים. אתם תראו ש- <code>randomNumber</code> שווה ל-1 בכל פעם שאנחנו מדפיסים אותו לקונסולה:</li>
+</ol>
+
+<h3 id="מעבר_על_הלוגיקה_של_המשחק">מעבר על הלוגיקה של המשחק</h3>
+
+<p>על מנת לתקן זאת, בואו נחשוב כיצד שורה זו עובדת. קודם כל, אנחנו קוראים ל-<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">()Math.random</a></code>, אשר מייצרת מספר עשרוני בין 0 ל-1, לדוגמא: 0.5676665434:</p>
+
+<pre class="brush: js">Math.random()</pre>
+
+<p>לאחר מכן אנחנו מעבירים את התוצאה של הפעלת פונקציית <code>()Math.random</code> דרך הפונקציה <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">()Math.floor</a></code>, אשר בתורה, מעגלת את המספר ולאחר מכן מוסיפים <code>1</code>. אם לא נוסיף <code>1</code>, פונקציה זו יכולה לעגל כלפי מטה ואז נקבל <code>0</code>.</p>
+
+<pre>Math.floor(Math.random()) + 1</pre>
+
+<p>1.  אנחנו צריכים להכפיל את המספר האקראי שלנו ב-<code>100</code> לפני שנעביר אותו הלאה. זה ייתן לנו מספר אקראי בין 0 ל-99:</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100);</pre>
+
+<p>הוספת של <code>1</code>, תאפשר לנו לקבל ערך בין 1 ל-100:</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre>
+
+<p>נסו לשמור ולרענן את הדף ואתם תראו שהמשחק עושה מה שהוא צריך לבצע - מייצר מספר אקראי בין 0 ל-100.</p>
+
+<h2 id="שגיאות_נפוצות_נוספות">שגיאות נפוצות נוספות</h2>
+
+<p>ישנן שגיאות נפוצות נוספות שאנחנו ניתקל בהן: </p>
+
+<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3>
+
+<p>שגיאה זו לרוב אומרת ששכחנו לשים <code>;</code> בסוף שורות הקוד, אבל היא יכולה להיות גם מסיבה אחרת. אם נשנה את השורה שנמצאת בתוך הפונקציה <code>()checkGuess</code> :</p>
+
+<pre class="brush: js">var userGuess = Number(guessField.value);</pre>
+
+<p>לקוד הבא:</p>
+
+<pre class="brush: js">var userGuess === Number(guessField.value);</pre>
+
+<p>זה יקפיץ לנו הודעת שגיאה מכיוון ש- JavaScript חושבת שאתה מנסה לבצע משהו אחר. צריך תמיד לוודא שאנחנו לא מערבבים בין סימן השווה שנועד להשים ערך (<code>=</code>) לבין שלושת סימני השווה שנועדו לבדוק האם ערך אחד שווה לשני, ולהחזיר <code>true</code>/<code>false:</code></p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ראה גם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> דף ההסבר שלנו לפרטים נוספים על שגיאה זו.</p>
+</div>
+
+<h3 id="המשחק_תמיד_נותן_למשתמש_לנצח_לא_משנה_מה_הניחוש_שהמשתמש_הכניס">המשחק תמיד נותן למשתמש לנצח, לא משנה מה הניחוש שהמשתמש הכניס</h3>
+
+<p>זה יכול להיות עוד סימן לכך שעירבבנו בין סימן ההשמה לבין סימן הבדיקה. לדוגמא, אם אנחנו את השורה הבאה שנמצא בתוך<code>()checkGuess</code>:</p>
+
+<pre class="brush: js">if (userGuess === randomNumber) {</pre>
+
+<p>לקוד הבא:</p>
+
+<pre class="brush: js">if (userGuess = randomNumber) {</pre>
+
+<p>תוצאת המבחן תהיה תמיד <code>true</code>, מה שגורם לכך שתמיד הניחוש של המשתמש נכון.</p>
+
+<h3 id="SyntaxError_missing_)_after_argument_list">SyntaxError: missing ) after argument list</h3>
+
+<p>זוהי שגיאה פשוטה יחסית - היא אומרת באופן כללי ששכחנו לשים סוגריים בסוף קריאה לפונקציה או מתודה:</p>
+
+<div class="note">
+<p><strong>לתשומת לבד</strong>: ראה גם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a>  - דף ההסבר שלנו לפרטים נוספים על שגיאה זו.</p>
+</div>
+
+<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>
+
+<p>שגיאה זו בדרך כלל מתייחסת לכך שלא יצרנו אובייקט ל JavaScript בצורה נכונה. נסה לשנות את הקוד הבא:</p>
+
+<pre class="brush: js">function checkGuess() {</pre>
+
+<p>לקוד הבא:</p>
+
+<pre class="brush: js">function checkGuess( {</pre>
+
+<p>זה גרם לדפדפן לחשוב שאנחנו מנסים להעביר את התוכן של הפונקציה כארגומנט של הפונקציה.</p>
+
+<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>
+
+<p>זו גם שגיאה פשוטה יחסית - היא אומרת בעיקרון ששכחנו אחת מהסוגריים המסולסלות במשפט תנאי שרשמנו. </p>
+
+<h3 id="SyntaxError_expected_expression_got_'string'_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3>
+
+<p>שגיאות אלו אומרות באופן כללי ששכחנו להוסיף סימן של <code>'</code> או <code>"</code>. בשגיאה הראשונה <em>string</em> יוחלף עם תו לא ידוע שהדפדפן ימצא במקום המרכאות או הגרש. השגיאה השניה אומרת שהמחרוזת לא הסתיימה עם גרש או מרכאות.</p>
+
+<div class="note">
+<p><strong>לתשומת לב</strong>: ראה גם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> וגם <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a>  - דפי ההסבר שלנו לפרטים נוספים על שגיאות אלו.</p>
+</div>
+
+<h2 id="לסיכום">לסיכום</h2>
+
+<p>כעת אנו יודעים את הבסיס להבין שגיאות בתוכניות JavaScript הפשוטות שלנו. רק צריך לזכור שזה לא יהיה תמיד קל להבין מה השתבש לנו בקוד. כאשר שגיאה מתרחשת, הסתכלו על מספר השורה שאתם מקבלים, ולכו לאותה שורה על מנת לנסות לאתר מה השתבש. זכרו תמיד שהשגיאה לא תמיד תהיה בשורה זו, ושאולי היא לא תהיה אחת מאלו שעברנו עליהם במאמר זה.</p>
+
+<h2 id="ראה_גם">ראה גם</h2>
+
+<div>
+<ul>
+ <li>יש עוד הרבה סוגי שגיאות שלא פירטנו עליהן כאן. להרחבה, ראו <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li>
+ <li>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</li>
+</ul>
+</div>
+
+<h2 id="במודול_זה">במודול זה</h2>
+
+<ul>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_is_JavaScript">מה זה JavaScript?</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/A_first_splash">מבט ראשון ל- JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/What_went_wrong">מה השתבש? פתרון בעיות ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Variables">אחסון המידע שאנחנו צריכים - משתנים — Variables</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Math">מתמתיקה בסיסית ב-  JavaScript — מספרים ואופרטורים</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Strings">התמודדות עם טקסט — מחרוזות (Strings) ב-JavaScript</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Useful_string_methods">מתודות שימושיות למחרוזות</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Arrays">מערכים - Arrays</a></li>
+ <li><a href="/he/docs/Learn/JavaScript/First_steps/Silly_story_generator">תרגיל: Silly story generator</a></li>
+</ul>
diff --git a/files/he/learn/javascript/index.html b/files/he/learn/javascript/index.html
new file mode 100644
index 0000000000..e606644330
--- /dev/null
+++ b/files/he/learn/javascript/index.html
@@ -0,0 +1,83 @@
+---
+title: JavaScript
+slug: Learn/JavaScript
+tags:
+  - JavaScript
+  - "JavaScript\_למתחילים"
+  - מדריך
+  - מדריך JavaScript
+  - מדריך javascript למתחילים
+  - מודול
+  - מתחיל
+  - נושא
+  - קידוד
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("JavaScript")}} הינה שפת תכנות אשר מאפשרת ליישם דברים מורכבים על גבי דפי האינטרנט. ברגע שדף האינטרנט עושה יותר מסתם להציג אינפורמציה סטטית — להציג עידכוני תוכן משתנים, מפות אינטרקטיביות או גרפים 2D/3D מונפשים, וכן הלאה — כנראה שJavaScript מעורב מאחורי הקלעים.</p>
+
+<h2 id="מסלול_למידה">מסלול למידה</h2>
+
+<p>ניתן לטעון שJavaScript הינה מסובכת יותר ללימוד מאשר טכנולוגיות קשורות כמו <a href="/he/docs/Learn/HTML">HTML</a> ו<a href="/he/docs/Learn/CSS">CSS</a>. לפני הניסיון ללמוד JavaScript, מומלץ מאוד לעשות היכרות לפחות עם שתי הטכנולוגיות המוזכרות, ואולי גם עם עוד טכנולוגיות. ניתן להתחיל בלעבוד על המודולים הבאים:</p>
+
+<ul>
+ <li><a href="/he/docs/Learn/Getting_started_with_the_web">תחילת הדרך עם  ה-Web</a></li>
+ <li><a href="/he/docs/Web/Guide/HTML/Introduction">הקדמה ל-HTML</a></li>
+ <li><a href="/he/docs/Learn/CSS/Introduction_to_CSS">הקדמה ל-CSS</a></li>
+</ul>
+
+<p>ניסיון קודם עם שפות תכנות אחרות יכול לעזור גם כן.</p>
+
+<p>אחרי היכרות עם הבסיס של  JavaScript, הרמה שלכם אמורה להיות מספיק גבוהה בשביל לעבור ללמוד על נושאים מתקדמים, לדוגמא:</p>
+
+<ul>
+ <li>JavaScript לעומק, כפי שנלמד ב<a href="/he/docs/Web/JavaScript/Guide">מדריך הJavaScript</a> שלנו.</li>
+ <li><a href="/he/docs/Web/API">Web APIs</a>.</li>
+ <li>ועוד.</li>
+</ul>
+
+<h2 id="מודולים">מודולים</h2>
+
+<p>נושא זה מכיל את המודולים הבאים, כאשר כל מודול מורכב ממספר מאמרים, מומלץ לעבור עליהם לפי הסדר המוצג.</p>
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/First_steps">צעדים ראשונים ב-JavaScript</a></dt>
+ <dd>במודול JavaScript הראשון שלנו, אנחנו קודם כל נענה על כמה שאלות בסיסיות כמו "מהי JavaScript?", "איך היא ניראת?" ו-"מה היא יכולה לעשות?", לפני שנתקדם לניסיון הפרקטי הראשון בכתיבת JavaScript. לאחר מכן נדון בכמה תכונות מפתח של JavaScript בפירוט, כגון משתנים, מחרוזות, מספרים ומערכים.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Building_blocks">אבני הבניין של JavaScript</a></dt>
+ <dd>במודול זה, נגע באבני הבניין והמאפיינים הבסיסיים של JavaScript, נפנה את תשומת ליבנו לטיפוסים הנפוצים של בלוקי הקוד כמו משפטי תנאי, לולאות, פונקציות, ואירועים (Events). כבר ניתקלנו בדברים אלו בקורס, אך לא הרחבנו עליהם — במודול זה אנו נדון בכולם לעומק.</dd>
+ <dt><a href="/he/docs/Learn/JavaScript/Objects">הכרות עם אובייקטים של JavaScript</a></dt>
+ <dd>ב-JavaScript, רוב הדברים הינם אובייקטים, מפיצ'רי הליבה של JavaScript כמו מחרוזות ומערכים עד לAPIים של הדפדפן הבנויים על גבי JavaScript. אתם יכולים אפילו לבנות אובייקטים בעצמכם כדי לעטוף פונקציות ומשתנים קשורים לחבילות אפקטיביות. חשוב להבין את העקרון של תכנות מונחה-העצמים של JavaScript אם אנחנו רוצים להתקדם עם הידע שלנו בשפה ולכתוב קוד יותר אפקטיבי, לכן סיפקנו את המודול הזה לעזור לכם. כאן נלמד את התאוריה והתחביר של אובייקט בפירוט, נראה איך יוצרים אובייקטים משלכם, ונסביר מה זה מידע בפורט JSON ואיך עובדים איתו ועם אובייקטים בכללי.</dd>
+</dl>
+
+
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></dt>
+ <dd>
+ <p>במודול זה אנחנו נסתכל על asynchronous JavaScript ונסביר את החשיבות של עקרון זה. כיצד אנחנו יכולים לבצע בכך שימוש על מנת לטפל באירועים מסויימים כמו קבלת מידע ומקורות משרת.</p>
+ </dd>
+</dl>
+
+
+
+<dl>
+ <dt><a href="/he/docs/Learn/JavaScript/Client-side_web_APIs"> Web API - צד לקוח</a></dt>
+ <dd>כאשר כותבים JavaScript עבור צד-לקוח לדפי אינטרנט או יישומי אינטרנט, כמעט מיד תתקלו בצורך להשתמש ב - API - אלו ממשקים עבור ביצוע מניפולציות של היבטים שונים של הדפדפן ומערכות ההפעלה שהאתר רץ עליהם, או אפילו מניפולציה לנתונים מאתרים או שירותים אחרים. במודול הזה אנו נחקור מהם API ואיך להשתמש בכמה מה-API הנפוצים שתפגשו בהם לעיתים קרובות במהלך עבודת הפיתוח. </dd>
+</dl>
+
+<h2 id="פתרון_בעיות_נפוצות_ב_-_JavaScript">פתרון בעיות נפוצות ב - JavaScript</h2>
+
+<p>המאמר בנושא <a href="/he/docs/Learn/JavaScript/Howto">שימוש ב-JavaScript לפתרון בעיות נפוצות</a> מספק קישורים לקטעי תוכן המסבירים איך להשתמש ב-JavaScript על מנת לפתור בעיות מאוד נפוצות בתהליך הפיתוח.</p>
+
+<h2 id="ראה_בנוסף">ראה בנוסף</h2>
+
+<ul>
+</ul>
+
+<dl>
+ <dt><a href="/he/docs/Web/JavaScript">JavaScript on MDN</a></dt>
+ <dd>נקודת הפתיחה הראשית לליבת התיעוד של JavaScript ב-MDN — כאן תמצאו תיעוד נרחב על כל ההיבטים של שפת JavaScript, וכמה הדרכות מתקדמות המכוונות למפתחי JavaScript מנוסים.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt>
+ <dd>סדרות של הדרכות וידאו מצויינות ללימוד המתמטיקה הנצרכת להפיכתכם למתכנתים אפקטיביים, מועבר על ידי <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
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>
diff --git a/files/he/learn/server-side/express_nodejs/index.html b/files/he/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..a8212504ce
--- /dev/null
+++ b/files/he/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,64 @@
+---
+title: Express web framework (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express is a popular unopinionated web framework, written in JavaScript and hosted within the Node.js runtime environment. This module explains some of the key benefits of the framework, how to set up your development environment and how to perform common web development and deployment tasks.</p>
+
+<h2 id="תנאים_מוקדמים">תנאים מוקדמים</h2>
+
+<p>לפני שתתחיל את המודל עליך להבין מה זה תכנות צד שרת ומה זה מסגרות אינטרנט (frameworks), מומלץ לקרוא על הנושא במדריך שלנו <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">צעדים ראשונים לתכנות האתר בצד שרת</a>. ידע כללי על מושגי תכנות ו- <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> מומלץ מאוד, אך אינו חיוני להבנת מושגי הליבה.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This website has many useful resources for learning JavaScript<em> in the context of client-side development</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (learning). The core JavaScript language and concepts are the same for server-side development on Node.js and this material will be relevant. Node.js offers <a href="https://nodejs.org/dist/latest-v10.x/docs/api/">additional APIs</a> for supporting functionality that is useful in browserless environments (e.g., to create HTTP servers and access the file system), but does not support JavaScript APIs for working with the browser and DOM.</p>
+
+<p>This guide will provide some information about working with Node.js and Express, and there are numerous other excellent resources on the Internet and in books — some of these linked from <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) and <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
+</div>
+
+<h2 id="מדריכים">מדריכים</h2>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">מבוא-Node.js/Express</a></dt>
+ <dd>In this first Express article we answer the questions "What is Node?" and "What is Express?" and give you an overview of what makes the Express web framework special. We'll outline the main features and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></dt>
+ <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt>
+ <dd>The first article in our practical tutorial series explains what you'll learn and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt>
+ <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt>
+ <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt>
+ <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt>
+ <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type and list and detail pages for all of our models. Along the way, we'll gain practical experience in getting records from the database and using templates.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt>
+ <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt>
+ <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd>
+</dl>
+
+<h2 id="ראה_עוד">ראה עוד</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt>
+ <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different. </dd>
+</dl>
+
+<h2 id="Adding_more_tutorials">Adding more tutorials</h2>
+
+<div>
+<p>All existing tutorials are listed above, but if you would like to extend this module, some other interesting topics to cover include:</p>
+
+<ul>
+ <li>Using sessions.</li>
+ <li>User authentication.</li>
+ <li>User authorization and permissions.</li>
+ <li>Testing an Express web application.</li>
+ <li>Web security for Express web applications.</li>
+</ul>
+
+<p>An assessment for the module would also make a wonderful addition!</p>
+</div>
diff --git a/files/he/learn/server-side/express_nodejs/introduction/index.html b/files/he/learn/server-side/express_nodejs/introduction/index.html
new file mode 100644
index 0000000000..31be2705c0
--- /dev/null
+++ b/files/he/learn/server-side/express_nodejs/introduction/index.html
@@ -0,0 +1,542 @@
+---
+title: Express/Node introduction
+slug: Learn/Server-side/Express_Nodejs/Introduction
+translation_of: Learn/Server-side/Express_Nodejs/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">In this first Express article we answer the questions "What is Node?" and "What is Express?", and give you an overview of what makes the Express web framework special. We'll outline the main features, and show you some of the main building blocks of an Express application (although at this point you won't yet have a development environment in which to test it).</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">תנאים מוקדמים:</th>
+   <td>Basic computer literacy. A general understanding of <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">server-side website programming</a>, and in particular the mechanics of <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">מטרה:</th>
+   <td>To gain familiarity with what Express is and how it fits in with Node, what functionality it provides, and the main building blocks of an Express application.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="הכירו_את_Node">הכירו את Node</h2>
+
+<p><a href="https://nodejs.org/">Node</a> (or more formally <em>Node.js</em>) is an open-source, cross-platform runtime environment that allows developers to create all kinds of server-side tools and applications in <a href="/en-US/docs/Glossary/JavaScript">JavaScript</a>. The runtime is intended for use outside of a browser context (i.e. running directly on a computer or server OS). As such, the environment omits browser-specific JavaScript APIs and adds support for more traditional OS APIs including HTTP and file system libraries.</p>
+
+<p>From a web server development perspective Node has a number of benefits:</p>
+
+<ul>
+ <li>Great performance! Node was designed to optimize throughput and scalability in web applications and is a good solution for many common web-development problems (e.g. real-time web applications).</li>
+ <li>Code is written in "plain old JavaScript", which means that less time is spent dealing with "context shift" between languages when you're writing both client-side and server-side code.</li>
+ <li>JavaScript is a relatively new programming language and benefits from improvements in language design when compared to other traditional web-server languages (e.g. Python, PHP, etc.) Many other new and popular languages compile/convert into JavaScript so you can also use TypeScript, CoffeeScript, ClojureScript, Scala, LiveScript, etc.</li>
+ <li>The node package manager (NPM) provides access to hundreds of thousands of reusable packages. It also has best-in-class dependency resolution and can also be used to automate most of the build toolchain.</li>
+ <li>Node.js is portable. It is available on Microsoft Windows, macOS, Linux, Solaris, FreeBSD, OpenBSD, WebOS, and NonStop OS. Furthermore, it is well-supported by many web hosting providers, that often provide specific infrastructure and documentation for hosting Node sites.</li>
+ <li>It has a very active third party ecosystem and developer community, with lots of people who are willing to help.</li>
+</ul>
+
+<p>You can use Node.js to create a simple web server using the Node HTTP package.</p>
+
+<h3 id="Hello_Node.js">Hello Node.js</h3>
+
+<p>The following example creates a web server that listens for any kind of HTTP request on the URL <code>http://127.0.0.1:8000/</code> — when a request is received, the script will respond with the string: "Hello World". If you have already installed node, you can follow these steps to try out the example:</p>
+
+<ol>
+ <li>Open Terminal (on Windows, open the command line utility)</li>
+ <li>Create the folder where you want to save the program, for example, <code>test-node</code> and then enter it by entering the following command into your terminal:</li>
+</ol>
+
+<pre class="notranslate">cd test-node</pre>
+
+<ol start="3">
+ <li>Using your favorite text editor, create a file called <code>hello.js</code> and paste the following code into it:</li>
+</ol>
+
+<pre class="brush: js notranslate">// Load HTTP module
+const http = require("http");
+
+const hostname = "127.0.0.1";
+const port = 8000;
+
+// Create HTTP server
+const server = http.createServer((req, res) =&gt; {
+
+   // Set the response HTTP header with HTTP status and Content type
+   res.writeHead(200, {'Content-Type': 'text/plain'});
+
+   // Send the response body "Hello World"
+   res.end('Hello World\n');
+});
+
+// Prints a log once the server starts listening
+server.listen(port, hostname, () =&gt; {
+   console.log(`Server running at http://${hostname}:${port}/`);
+})
+</pre>
+
+<ol start="4">
+ <li>Save the file in the folder you created above.</li>
+ <li>Go back to the terminal and type the following command:</li>
+</ol>
+
+<pre class="brush: bash notranslate">node hello.js</pre>
+
+<p>Finally, navigate to <code>http://localhost:8000</code> in your web browser; you should see the text "<strong>Hello World</strong>" in the upper left of an otherwise empty web page.</p>
+
+<h2 id="Web_Frameworks">Web Frameworks</h2>
+
+<p>Other common web-development tasks are not directly supported by Node itself. If you want to add specific handling for different HTTP verbs (e.g. <code>GET</code>, <code>POST</code>, <code>DELETE</code>, etc.), separately handle requests at different URL paths ("routes"), serve static files, or use templates to dynamically create the response, Node won't be of much use on its own. You will either need to write the code yourself, or you can avoid reinventing the wheel and use a web framework!</p>
+
+<h2 id="Introducing_Express">Introducing Express</h2>
+
+<p><a href="https://expressjs.com/">Express</a> is the most popular <em>Node</em> web framework, and is the underlying library for a number of other popular <a href="https://expressjs.com/en/resources/frameworks.html">Node web frameworks</a>. It provides mechanisms to:</p>
+
+<ul>
+ <li>Write handlers for requests with different HTTP verbs at different URL paths (routes).</li>
+ <li>Integrate with "view" rendering engines in order to generate responses by inserting data into templates.</li>
+ <li>Set common web application settings like the port to use for connecting, and the location of templates that are used for rendering the response.</li>
+ <li>Add additional request processing "middleware" at any point within the request handling pipeline.</li>
+</ul>
+
+<p>While <em>Express</em> itself is fairly minimalist, developers have created compatible middleware packages to address almost any web development problem. There are libraries to work with cookies, sessions, user logins, URL parameters, <code>POST</code> data, security headers, and <em>many </em>more. You can find a list of middleware packages maintained by the Express team at <a href="http://expressjs.com/en/resources/middleware.html">Express Middleware</a> (along with a list of some popular 3rd party packages).</p>
+
+<div class="note">
+<p><strong>Note:</strong> This flexibility is a double edged sword. There are middleware packages to address almost any problem or requirement, but working out the right packages to use can sometimes be a challenge. There is also no "right way" to structure an application, and many examples you might find on the Internet are not optimal, or only show a small part of what you need to do in order to develop a web application.</p>
+</div>
+
+<h2 id="Where_did_Node_and_Express_come_from">Where did Node and Express come from?</h2>
+
+<p>Node was initially released, for Linux only, in 2009. The NPM package manager was released in 2010, and native Windows support was added in 2012. The current LTS release is Node v12.16.1 while the latest release is Node 13.11.0. This is a tiny snapshot of a rich history; delve into <a href="https://en.wikipedia.org/wiki/Node.js#History">Wikipedia</a> if you want to know more.</p>
+
+<p>Express was initially released in November 2010 and is currently on version 4.17.1 of the API. You can check out the <a href="https://expressjs.com/en/changelog/4x.html">changelog</a> for information about changes in the current release, and <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a> for more detailed historical release notes.</p>
+
+<h2 id="כמה_פופלרי_Node_ו_Express">כמה פופלרי Node ו Express?</h2>
+
+<p>The popularity of a web framework is important because it is an indicator of whether it will continue to be maintained, and what resources are likely to be available in terms of documentation, add-on libraries, and technical support.</p>
+
+<p>There isn't any readily-available and definitive measure of the popularity of server-side frameworks (although sites like <a href="http://hotframeworks.com/">Hot Frameworks</a> attempt to assess popularity using mechanisms like counting the number of GitHub projects and StackOverflow questions for each platform). A better question is whether Node and Express are "popular enough" to avoid the problems of unpopular platforms. Are they continuing to evolve? Can you get help if you need it? Is there an opportunity for you to get paid work if you learn Express?</p>
+
+<p>Based on the number of <a href="https://expressjs.com/en/resources/companies-using-express.html">high profile companies</a> that use Express, the number of people contributing to the codebase, and the number of people providing both free and paid for support, then yes, <em>Express</em> is a popular framework!</p>
+
+<h2 id="Is_Express_opinionated">Is Express opinionated?</h2>
+
+<p>Web frameworks often refer to themselves as "opinionated" or "unopinionated".</p>
+
+<p>Opinionated frameworks are those with opinions about the "right way" to handle any particular task. They often support rapid development <em>in a particular domain </em>(solving problems of a particular type) because the right way to do anything is usually well-understood and well-documented. However they can be less flexible at solving problems outside their main domain, and tend to offer fewer choices for what components and approaches they can use.</p>
+
+<p>Unopinionated frameworks, by contrast, have far fewer restrictions on the best way to glue components together to achieve a goal, or even what components should be used. They make it easier for developers to use the most suitable tools to complete a particular task, albeit at the cost that you need to find those components yourself.<br>
+ <br>
+ Express is unopinionated. You can insert almost any compatible middleware you like into the request handling chain, in almost any order you like. You can structure the app in one file or multiple files, and using any directory structure. You may sometimes feel that you have too many choices!</p>
+
+<h2 id="What_does_Express_code_look_like">What does Express code look like?</h2>
+
+<p>In a traditional data-driven website, a web application waits for HTTP requests from the web browser (or other client). When a request is received the application works out what action is needed based on the URL pattern and possibly associated information contained in <code>POST</code> data or <code>GET</code> data. Depending on what is required it may then read or write information from a database or perform other tasks required to satisfy the request. The application will then return a response to the web browser, often dynamically creating an HTML page for the browser to display by inserting the retrieved data into placeholders in an HTML template.</p>
+
+<p>Express provides methods to specify what function is called for a particular HTTP verb (<code>GET</code>, <code>POST</code>, <code>SET</code>, etc.) and URL pattern ("Route"), and methods to specify what template ("view") engine is used, where template files are located, and what template to use to render a response. You can use Express middleware to add support for cookies, sessions, and users, getting <code>POST</code>/<code>GET</code> parameters, etc. You can use any database mechanism supported by Node (Express does not define any database-related behaviour).</p>
+
+<p>The following sections explain some of the common things you'll see when working with <em>Express</em> and <em>Node</em> code.</p>
+
+<h3 id="דוגמה_Hello_world">דוגמה Hello world</h3>
+
+<p>ראשית בואו נבחן דוגמה סטנדרטית של Express <a href="https://expressjs.com/en/starter/hello-world.html">Hello World</a> (בהמשך נסביר כל חלק בקוד כאן ובהמשך)</p>
+
+<div class="note">
+<p><strong>Tip:</strong> If you have Node and Express already installed (or if you install them as shown in the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">next article</a>), you can save this code in a text file called <strong>app.js</strong> and run it in a bash command prompt by calling:   </p>
+
+<p><strong><code>node ./app.js</code></strong></p>
+</div>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+
+<strong>app.get('/', function(req, res) {
+  res.send('Hello World!');
+});</strong>
+
+app.listen(3000, function() {
+  console.log('Example app listening on port 3000!');
+});
+</pre>
+
+<p>שתי השורות הראשונות <code>require()</code> (מיבא) את מודול express ויוצר <a href="https://expressjs.com/en/4x/api.html#app">Express application</a>, אובייקט זה נקרא באופן מסורתי <code>app</code> זה מכיל מתודות לניתוב בקשות HTTP,</p>
+
+<p> configuring middleware, rendering HTML views, registering a template engine, and modifying <a href="https://expressjs.com/en/4x/api.html#app.settings.table">application settings</a> that control how the application behaves (e.g. the environment mode, whether route definitions are case sensitive, etc.)</p>
+
+<p>The middle part of the code (the three lines starting with <code>app.get</code>) shows a <em>route definition</em>. The <code>app.get()</code> method specifies a callback function that will be invoked whenever there is an HTTP <code>GET</code> request with a path (<code>'/'</code>) relative to the site root. The callback function takes a request and a response object as arguments, and simply calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "Hello World!"</p>
+
+<p>The final block starts up the server on port '3000' and prints a log comment to the console. With the server running, you could go to <code>localhost:3000</code> in your browser to see the example response returned.</p>
+
+<h3 id="ייבוא_ויצירת_מודלים">ייבוא ויצירת מודלים</h3>
+
+<p>A module is a JavaScript library/file that you can import into other code using Node's <code>require()</code> function. <em>Express</em> itself is a module, as are the middleware and database libraries that we use in our <em>Express</em> applications.</p>
+
+<p>The code below shows how we import a module by name, using the <em>Express</em> framework as an example. First we invoke the <code style="font-style: normal; font-weight: normal;">require()</code> function, specifying the name of the module as a string (<code>'express'</code>), and calling the returned object to create an <a href="https://expressjs.com/en/4x/api.html#app">Express application</a>. We can then access the properties and functions of the application object.</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+</pre>
+
+<p>You can also create your own modules that can be imported in the same way.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> You will <em>want </em>to create your own modules, because this allows you to organise your code into managable parts — a monolithic single-file application is hard to understand and maintain. Using modules also helps you manage your namespace, because only the variables you explicitly export are imported when you use a module.</p>
+</div>
+
+<p>To make objects available outside of a module you just need to expose them as additional properties on the <code>exports</code> object. For example, the <strong>square.js</strong> module below is a file that exports <code>area()</code> and <code>perimeter()</code> methods:</p>
+
+<pre class="brush: js notranslate">exports.area = function(width) { return width * width; };
+exports.perimeter = function(width) { return 4 * width; };
+</pre>
+
+<p>We can import this module using <code>require()</code>, and then call the exported method(s) as shown:</p>
+
+<pre class="brush: js notranslate">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension
+console.log('The area of a square with a width of 4 is ' + square.area(4));</pre>
+
+<div class="note">
+<p><strong>Note:</strong> You can also specify an absolute path to the module (or a name, as we did initially).</p>
+</div>
+
+<p>If you want to export a complete object in one assignment instead of building it one property at a time, assign it to <code>module.exports</code> as shown below (you can also do this to make the root of the exports object a constructor or other function):</p>
+
+<pre class="brush: js notranslate">module.exports = {
+  area: function(width) {
+    return width * width;
+  },
+
+  perimeter: function(width) {
+    return 4 * width;
+  }
+};
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> You can think of <code>exports</code> as a <a href="https://nodejs.org/api/modules.html#modules_exports_shortcut">shortcut</a> to <code>module.exports</code> within a given module. In fact, <code>exports</code> is just a variable that gets initialized to the value of <code>module.exports</code> before the module is evaluated. That value is a reference to an object (empty object in this case). This means that <code>exports</code> holds a reference to the same object referenced by <code>module.exports</code>. It also means that by assigning another value to <code>exports</code> it's no longer bound to <code>module.exports</code>.</p>
+</div>
+
+<p>For a lot more information about modules see <a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs).</p>
+
+<h3 id="Using_asynchronous_APIs">Using asynchronous APIs</h3>
+
+<p>JavaScript code frequently uses asynchronous rather than synchronous APIs for operations that may take some time to complete. A synchronous API is one in which each operation must complete before the next operation can start. For example, the following log functions are synchronous, and will print the text to the console in order (First, Second).</p>
+
+<pre class="brush: js notranslate">console.log('First');
+console.log('Second');
+</pre>
+
+<p>By contrast, an asynchronous API is one in which the API will start an operation and immediately return (before the operation is complete). Once the operation finishes, the API will use some mechanism to perform additional operations. For example, the code below will print out "Second, First" because even though <code>setTimeout()</code> method is called first, and returns immediately, the operation doesn't complete for several seconds.</p>
+
+<pre class="brush: js notranslate">setTimeout(function() {
+   console.log('First');
+   }, 3000);
+console.log('Second');
+</pre>
+
+<p>Using non-blocking asynchronous APIs is even more important on Node than in the browser because <em>Node</em> is a single-threaded event-driven execution environment. "Single threaded" means that all requests to the server are run on the same thread (rather than being spawned off into separate processes). This model is extremely efficient in terms of speed and server resources, but it does mean that if any of your functions call synchronous methods that take a long time to complete, they will block not just the current request, but every other request being handled by your web application.</p>
+
+<p>There are a number of ways for an asynchronous API to notify your application that it has completed. The most common way is to register a callback function when you invoke the asynchronous API, that will be called back when the operation completes. This is the approach used above.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Using callbacks can be quite "messy" if you have a sequence of dependent asynchronous operations that must be performed in order because this results in multiple levels of nested callbacks. This problem is commonly known as "callback hell". This problem can be reduced by good coding practices (see <a href="http://callbackhell.com/">http://callbackhell.com/</a>), using a module like <a href="https://www.npmjs.com/package/async">async</a>, or even moving to ES6 features like <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> A common convention for Node and Express is to use error-first callbacks. In this convention, the first value in your <em>callback functions</em> is an error value, while subsequent arguments contain success data. There is a good explanation of why this approach is useful in this blog: <a href="http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js">The Node.js Way - Understanding Error-First Callbacks</a> (fredkschott.com).</p>
+</div>
+
+<h3 id="Creating_route_handlers">Creating route handlers</h3>
+
+<p>In our <em>Hello World</em> Express example (see above), we defined a (callback) route handler function for HTTP <code>GET</code> requests to the site root (<code>'/'</code>).</p>
+
+<pre class="brush: js notranslate">app.<strong>get</strong>('/', function(req, res) {
+  res.send('Hello World!');
+});
+</pre>
+
+<p>The callback function takes a request and a response object as arguments. In this case, the method simply calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "Hello World!" There are a <a href="https://expressjs.com/en/guide/routing.html#response-methods">number of other response methods</a> for ending the request/response cycle, for example, you could call <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> to send a JSON response or <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> to send a file.</p>
+
+<div class="note">
+<p><strong>JavaScript tip:</strong> You can use any argument names you like in the callback functions; when the callback is invoked the first argument will always be the request and the second will always be the response. It makes sense to name them such that you can identify the object you're working with in the body of the callback.</p>
+</div>
+
+<p>The <em>Express application</em> object also provides methods to define route handlers for all the other HTTP verbs, which are mostly used in exactly the same way:</p>
+
+<p><code>checkout()</code>, <code>copy()</code>, <strong><code>delete()</code></strong>, <strong><code>get()</code></strong>, <code>head()</code>, <code>lock()</code>, <code>merge()</code>, <code>mkactivity()</code>, <code>mkcol()</code>, <code>move()</code>, <code>m-search()</code>, <code>notify()</code>, <code>options()</code>, <code>patch()</code>, <strong><code>post()</code></strong>, <code>purge()</code>, <strong><code>put()</code></strong>, <code>report()</code>, <code>search()</code>, <code>subscribe()</code>, <code>trace()</code>, <code>unlock()</code>, <code>unsubscribe()</code>.</p>
+
+<p>There is a special routing method, <code>app.all()</code>, which will be called in response to any HTTP method. This is used for loading middleware functions at a particular path for all request methods. The following example (from the Express documentation) shows a handler that will be executed for requests to <code>/secret</code> irrespective of the HTTP verb used (provided it is supported by the <a href="https://nodejs.org/api/http.html#http_http_methods">http module</a>).</p>
+
+<pre class="brush: js notranslate">app.all('/secret', function(req, res, next) {
+  console.log('Accessing the secret section ...');
+  next(); // pass control to the next handler
+});</pre>
+
+<p>Routes allow you to match particular patterns of characters in a URL, and extract some values from the URL and pass them as parameters to the route handler (as attributes of the request object passed as a parameter).</p>
+
+<p>Often it is useful to group route handlers for a particular part of a site together and access them using a common route-prefix (e.g. a site with a Wiki might have all wiki-related routes in one file and have them accessed with a route prefix of <em>/wiki/</em>). In <em>Express</em> this is achieved by using the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> object. For example, we can create our wiki route in a module named <strong>wiki.js</strong>, and then export the <code>Router</code> object, as shown below:</p>
+
+<pre class="brush: js notranslate">// wiki.js - Wiki route module
+
+var express = require('express');
+var router = express.Router();
+
+// Home page route
+router.get('/', function(req, res) {
+  res.send('Wiki home page');
+});
+
+// About page route
+router.get('/about', function(req, res) {
+  res.send('About this wiki');
+});
+
+module.exports = router;
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Adding routes to the <code>Router</code> object is just like adding routes to the <code>app</code> object (as shown previously).</p>
+</div>
+
+<p>To use the router in our main app file we would then <code>require()</code> the route module (<strong>wiki.js</strong>), then call <code>use()</code> on the <em>Express</em> application to add the Router to the middleware handling path. The two routes will then be accessible from <code style="font-style: normal; font-weight: normal;">/wiki/</code> and <code style="font-style: normal; font-weight: normal;">/wiki/about/</code>.</p>
+
+<pre class="brush: js notranslate">var wiki = require('./wiki.js');
+// ...
+app.use('/wiki', wiki);</pre>
+
+<p>We'll show you a lot more about working with routes, and in particular about using the <code>Router</code>, later on in the linked section<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes"> Routes and controllers .</a></p>
+
+<h3 id="Using_middleware">Using middleware</h3>
+
+<p>Middleware is used extensively in Express apps, for tasks from serving static files to error handling, to compressing HTTP responses. Whereas route functions end the HTTP request-response cycle by returning some response to the HTTP client, middleware functions <em>typically</em> perform some operation on the request or response and then call the next function in the "stack", which might be more middleware or a route handler. The order in which middleware is called is up to the app developer.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The middleware can perform any operation, execute any code, make changes to the request and response object, and it can<em> also end the request-response cycle</em>. If it does not end the cycle then it must call <code>next()</code> to pass control to the next middleware function (or the request will be left hanging).</p>
+</div>
+
+<p>Most apps will use <em>third-party</em> middleware in order to simplify common web development tasks like working with cookies, sessions, user authentication, accessing request <code>POST</code> and JSON data, logging, etc. You can find a <a href="http://expressjs.com/en/resources/middleware.html">list of middleware packages maintained by the Express team</a> (which also includes other popular 3rd party packages). Other Express packages are available on the NPM package manager.</p>
+
+<p>To use third party middleware you first need to install it into your app using NPM. For example, to install the <a href="http://expressjs.com/en/resources/middleware/morgan.html">morgan</a> HTTP request logger middleware, you'd do this:</p>
+
+<pre class="brush: bash notranslate"><code>$ npm install morgan
+</code></pre>
+
+<p>You could then call <code>use()</code> on the <em>Express application object</em> to add the middleware to the stack:</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+<strong>var logger = require('morgan');</strong>
+var app = express();
+<strong>app.use(logger('dev'));</strong>
+...</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Middleware and routing functions are called in the order that they are declared. For some middleware the order is important (for example if session middleware depends on cookie middleware, then the cookie handler must be added first). It is almost always the case that middleware is called before setting routes, or your route handlers will not have access to functionality added by your middleware.</p>
+</div>
+
+<p>You can write your own middleware functions, and you are likely to have to do so (if only to create error handling code). The <strong>only</strong> difference between a middleware function and a route handler callback is that middleware functions have a third argument <code>next</code>, which middleware functions are expected to call if they are not that which completes the request cycle (when the middleware function is called, this contains the <em>next</em> function that must be called).</p>
+
+<p>You can add a middleware function to the processing chain with either <code>app.use()</code> or <code>app.add()</code>, depending on whether you want to apply the middleware to all responses or to responses with a particular HTTP verb (<code>GET</code>, <code>POST</code>, etc). You specify routes the same in both cases, though the route is optional when calling <code>app.use()</code>.</p>
+
+<p>The example below shows how you can add the middleware function using both methods, and with/without a route.</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+
+// An example middleware function
+var a_middleware_function = function(req, res, <em>next</em>) {
+  // ... perform some operations
+  next(); // Call next() so Express will call the next middleware function in the chain.
+}
+
+// Function added with use() for all routes and verbs
+app.use(a_middleware_function);
+
+// Function added with use() for a specific route
+app.use('/someroute', a_middleware_function);
+
+// A middleware function added for a specific HTTP verb and route
+app.get('/', a_middleware_function);
+
+app.listen(3000);</pre>
+
+<div class="note">
+<p><strong>JavaScript Tip:</strong> Above we declare the middleware function separately and then set it as the callback. In our previous route handler function we declared the callback function when it was used. In JavaScript, either approach is valid.</p>
+</div>
+
+<p>The Express documentation has a lot more excellent documentation about <a href="https://expressjs.com/en/guide/using-middleware.html">using</a> and <a href="http://expressjs.com/en/guide/writing-middleware.html">writing</a> Express middleware.</p>
+
+<h3 id="Serving_static_files">Serving static files</h3>
+
+<p>You can use the <a href="http://expressjs.com/en/4x/api.html#express.static">express.static</a> middleware to serve static files, including your images, CSS and JavaScript (<code>static()</code> is the only middleware function that is actually <strong>part</strong> of <em>Express</em>). For example, you would use the line below to serve images, CSS files, and JavaScript files from a directory named '<strong>public'</strong> at the same level as where you call node:</p>
+
+<pre class="brush: js notranslate">app.use(express.static('public'));
+</pre>
+
+<p>Any files in the public directory are served by adding their filename (<em>relative</em> to the base "public" directory) to the base URL. So for example:</p>
+
+<pre class="notranslate"><code>http://localhost:3000/images/dog.jpg
+http://localhost:3000/css/style.css
+http://localhost:3000/js/app.js
+http://localhost:3000/about.html
+</code></pre>
+
+<p>You can call <code>static()</code> multiple times to serve multiple directories. If a file cannot be found by one middleware function then it will simply be passed on to the subsequent middleware (the order that middleware is called is based on your declaration order).</p>
+
+<pre class="brush: js notranslate">app.use(express.static('public'));
+app.use(express.static('media'));
+</pre>
+
+<p>You can also create a virtual prefix for your static URLs, rather than having the files added to the base URL. For example, here we <a href="http://expressjs.com/en/4x/api.html#app.use">specify a mount path</a> so that the files are loaded with the prefix "/media":</p>
+
+<pre class="brush: js notranslate">app.use('/media', express.static('public'));
+</pre>
+
+<p>Now, you can load the files that are in the <code>public</code> directory from the <code>/media</code> path prefix.</p>
+
+<pre class="notranslate"><code>http://localhost:3000/media/images/dog.jpg
+http://localhost:3000/media/video/cat.mp4
+http://localhost:3000/media/cry.mp3</code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: See also <a href="https://expressjs.com/en/starter/static-files.html">Serving static files in Express</a>.</p>
+</div>
+
+<h3 id="Handling_errors">Handling errors</h3>
+
+<p>Errors are handled by one or more special middleware functions that have four arguments, instead of the usual three: <code>(err, req, res, next)</code>. For example:</p>
+
+<pre class="brush: js notranslate">app.use(function(err, req, res, next) {
+  console.error(err.stack);
+  res.status(500).send('Something broke!');
+});
+</pre>
+
+<p>These can return any content required, but must be called after all other <code>app.use()</code> and routes calls so that they are the last middleware in the request handling process!</p>
+
+<p>Express comes with a built-in error handler, which takes care of any remaining errors that might be encountered in the app. This default error-handling middleware function is added at the end of the middleware function stack. If you pass an error to <code>next()</code> and you do not handle it in an error handler, it will be handled by the built-in error handler; the error will be written to the client with the stack trace.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The stack trace is not included in the production environment. To run it in production mode you need to set the environment variable <code>NODE_ENV</code> to '<code>production'</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> HTTP404 and other "error" status codes are not treated as errors. If you want to handle these, you can add a middleware function to do so. For more information see the <a href="http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses">FAQ</a>.</p>
+</div>
+
+<p>For more information see <a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs).</p>
+
+<h3 id="Using_databases">Using databases</h3>
+
+<p><em>Express</em> apps can use any database mechanism supported by <em>Node</em> (<em>Express</em> itself doesn't define any specific additional behaviour/requirements for database management). There are many options, including PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.</p>
+
+<p>In order to use these you have to first install the database driver using NPM. For example, to install the driver for the popular NoSQL MongoDB you would use the command:</p>
+
+<pre class="brush: bash notranslate"><code>$ npm install mongodb
+</code></pre>
+
+<p>The database itself can be installed locally or on a cloud server. In your Express code you require the driver, connect to the database, and then perform create, read, update, and delete (CRUD) operations. The example below (from the Express documentation) shows how you can find "mammal" records using MongoDB.</p>
+
+<pre class="brush: js notranslate">//this works with older versions of  mongodb version ~ 2.2.33
+var MongoClient = require('mongodb').MongoClient;
+
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
+  if (err) throw err;
+
+  db.collection('mammals').find().toArray(function (err, result) {
+    if (err) throw err;
+
+    console.log(result);
+  });
+});
+
+
+//for mongodb version 3.0 and up
+let MongoClient = require('mongodb').MongoClient;
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, client){
+   if(err) throw err;
+
+   let db = client.db('animals');
+   db.collection('mammals').find().toArray(function(err, result){
+     if(err) throw err;
+     console.log(result);
+     client.close();
+   });
+});
+</pre>
+
+<p>Another popular approach is to access your database indirectly, via an Object Relational Mapper ("ORM"). In this approach you define your data as "objects" or "models" and the ORM maps these through to the underlying database format. This approach has the benefit that as a developer you can continue to think in terms of JavaScript objects rather than database semantics, and that there is an obvious place to perform validation and checking of incoming data. We'll talk more about databases in a later article.</p>
+
+<p>For more information see <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p>
+
+<h3 id="Rendering_data_views">Rendering data (views)</h3>
+
+<p>Template engines (referred to as "view engines" by <em>Express</em>) allow you to specify the <em>structure</em> of an output document in a template, using placeholders for data that will be filled in when a page is generated. Templates are often used to create HTML, but can also create other types of documents. Express has support for <a href="https://github.com/expressjs/express/wiki#template-engines">a number of template engines</a>, and there is a useful comparison of the more popular engines here: <a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More</a>.</p>
+
+<p>In your application settings code you set the template engine to use and the location where Express should look for templates using the 'views' and 'view engines' settings, as shown below (you will also have to install the package containing your template library too!)</p>
+
+<pre class="brush: js notranslate">const express = require('express');
+const path = require('path');
+const app = express();
+
+// Set directory to contain the templates ('views')
+app.set('views', path.join(__dirname, 'views'));
+
+// Set view engine to use, in this case 'some_template_engine_name'
+app.set('view engine', 'some_template_engine_name');
+</pre>
+
+<p>The appearance of the template will depend on what engine you use. Assuming that you have a template file named "index.&lt;template_extension&gt;" that contains placeholders for data variables named 'title' and "message", you would call <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> in a route handler function to create and send the HTML response:</p>
+
+<pre class="brush: js notranslate">app.get('/', function(req, res) {
+  res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
+});</pre>
+
+<p>For more information see <a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs).</p>
+
+<h3 id="File_structure">File structure</h3>
+
+<p>Express makes no assumptions in terms of structure or what components you use. Routes, views, static files, and other application-specific logic can live in any number of files with any directory structure. While it is perfectly possible to have the whole <em>Express</em> application in one file, typically it makes sense to split your application into files based on function (e.g. account management, blogs, discussion boards) and architectural problem domain (e.g. model, view or controller if you happen to be using an <a href="/en-US/docs/Glossary/MVC">MVC architecture</a>).</p>
+
+<p>In a later topic we'll use the <em>Express Application Generator</em>, which creates a modular app skeleton that we can easily extend for creating web applications.</p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Congratulations, you've completed the first step in your Express/Node journey! You should now understand Express and Node's main benefits, and roughly what the main parts of an Express app might look like (routes, middleware, error handling, and template code). You should also understand that with Express being an unopinionated framework, the way you pull these parts together and the libraries that you use are largely up to you!</p>
+
+<p>Of course Express is deliberately a very lightweight web application framework, so much of its benefit and potential comes from third party libraries and features. We'll look at those in more detail in the following articles. In our next article we're going to look at setting up a Node development environment, so that you can start seeing some Express code in action.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44">Venkat.R - Manage Multiple Node versions</a></li>
+ <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li>
+ <li><a href="https://expressjs.com/">Express</a> (home page)</li>
+ <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/using-middleware.html">Using middleware</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/starter/static-files.html">Serving static files in Express</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs)</li>
+</ul>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/he/learn/server-side/index.html b/files/he/learn/server-side/index.html
new file mode 100644
index 0000000000..9816a95427
--- /dev/null
+++ b/files/he/learn/server-side/index.html
@@ -0,0 +1,50 @@
+---
+title: תכנות אתרים בצד שרת
+slug: Learn/Server-side
+translation_of: Learn/Server-side
+---
+<div>ת{{LearnSidebar}}</div>
+
+<p class="summary">The <strong><em>Dynamic Websites </em></strong>–<em><strong> Server-side programming</strong></em> topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.</p>
+
+<p>Most major websites use some kind of server-side technology to dynamically display data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook. Displaying all of these using different static pages would be extremely inefficient, so instead such sites display static templates (built using <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on Amazon.</p>
+
+<p>In the modern world of web development, learning about server-side development is highly recommended.</p>
+
+<h2 id="מסלול_למידה">מסלול למידה</h2>
+
+<p>תחילת הדרך עם תכנות בצד שרת זה בדרך כלל קל יותר מאשר תכנות בצד לקוח. בגלל שאתרים דינמיים לרוב מבצעים הרבה פעולות דומות מאוד (אחזור מידע ממסד נתונים והצגתם בעמוד, אימות נתונים שהוזנו ע"י משתמש ושמירתם במסד נתונים, בדיקת הרשאות משתמש וכניסת משתמש וכו') ונבנים באמצעות מסגרות אינטרנט (frameworks) המקלות על פעולות אלה ושאר שרתי האינטרנט הנפוצים.</p>
+
+<p>Basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".</p>
+
+<p>תצטרך להבין "כיצד הרשת עובדת". אנו ממליצים שקודם תקרא את הנושאים הבאים: </p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server">מה זה שרת אינטרנט?</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_software_do_I_need">באיזה תוכנה אני צריך להשתמש על מנת לבנות אתר?</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">איך להעלות קובץ לשרת?</a></li>
+</ul>
+
+<p>With that basic understanding, you'll be ready to work your way through the modules in this section. </p>
+
+<h2 id="מודולים">מודולים</h2>
+
+<p>This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks. </p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt>
+ <dd>This module provides technology-agnostic information about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?". This module also outlines some of the more popular server-side web frameworks and gives guidance on how to select the best one for your site. Lastly, an introduction to web server security is provided.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt>
+ <dd>Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
+ <dd>Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.</dd>
+</dl>
+
+<h2 id="ראה_עוד">ראה עוד</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt>
+ <dd>This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Configuring_server_MIME_types">Properly configuring server MIME types</a></dt>
+ <dd>Configuring your server to send the correct {{Glossary("MIME types")}} (also known as media types or content types) to browsers is important for browsers to be able to properly process and display the content. It is also important to prevent malicious content from masquerading as benign content.</dd>
+</dl>