1 files changed, 254 insertions, 0 deletions
diff --git a/files/fa/learn/javascript/objects/basics/index.html b/files/fa/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..47ee37c7a2
--- /dev/null
+++ b/files/fa/learn/javascript/objects/basics/index.html
@@ -0,0 +1,254 @@
+---
+title: مقدمات اشیا در جاوااسکریپت
+slug: Learn/JavaScript/Objects/مقدمات
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary" dir="rtl"><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">در اولین مقاله به اشیاء در جاوااسکریپت نگاهی خواهیم انداخت، به اصول رسم الخط اشیاء در جاوااسکریپت نگاهی خواهیم انداخت و برخی از ویژگی‌های جاوااسکریپت را که تا کنون با آن کار کرده‌ایم را بازنگری می‌کنیم و این حقیقت را که بسیاری از ویژگی‌هایی که تا کنون با آن‌ها سروکار داشته‌ایم در واقع شی بوده‌اند را بازگو می‌کنیم.</span></p>
+
+<table class="learn-box standard-table" style="height: 239px; width: 575px;">
+ <tbody>
+  <tr>
+   <th dir="rtl" scope="row">پیش‌نیازها:</th>
+   <td dir="rtl">ادبیات اولیه کامپیوتر، فهم مقدماتی HTML و CSS، آشنایی با مقدمات جاوااسکریپت ( <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">قدم‌های اول در جاوااسکریپت</a> و <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">بلوک‌های سازنده جاوااسکریپت</a> را ببینید).</td>
+  </tr>
+  <tr>
+   <th dir="rtl" scope="row">اهداف:</th>
+   <td dir="rtl">یادگیری اصول اولیه برنامه نویسی شی-گرا، ارتباط آن با جاوااسکریپت ("تقریبا همه چیز یک شی است") و چگونگی کار با اشیاء در جاوااسکریپت.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="مقدمات_اشیاء">مقدمات اشیاء</h2>
+
+<p dir="rtl">یک شی مجموعه از داده‌ها و یا عملکردهای مرتبط است (که معمولا شامل تعدادی متغییر و تابع است — در داخل اشیاء به متغییرها خاصیت و به توابع، متد گویند). بیایید با یک نمونه بفهمیم آن‌ها چگونه هستند.</p>
+
+<p dir="rtl">برای شروع، یک کپی از فالی <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> ما را دانلود کنید.این فایل یک  {{HTMLElement("script")}}  برای نوشتن کد ما را فراهم می‌آورد.</p>
+
+<p dir="rtl">مشابه بسیاری چیزهای دیگر در جاوااسکریپت، ساخت یک شی با تعریف و مقداردهی یک متغییر آغاز می‌شود. متن زیر را در کد جاوااسکریپتی که اکنون دارید وارد نموده، ذخیره و رفرش کنید:</p>
+
+<pre class="brush: js">var person = {};</pre>
+
+<p dir="rtl">اگر در کنسول جاوااسکریپت <code>person</code> را وارد نمایید و دکه اینتر را بزنید، خروجی زیر را خواهید داشت:</p>
+
+<pre class="brush: js">[object Object]</pre>
+
+<p dir="rtl">تبریک! شما اولین شی خود را ساختید. کار انجام شد! اما این شی هنوز خالی است، نمیتواند کار خاصی را انجام دهد، پس بیایید شی‌مان را آپدیت کنیم تا به شکل زیر در بیاید:</p>
+
+<pre class="brush: js">var 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 dir="rtl">بعد از ذخیره و رفرش، مقادیر زیر را در کنسول جاوااسکریپت مرورگر خود در بخش ابزار توسعه وارد کنید:</p>
+
+<pre class="brush: js">person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p dir="rtl">شما حالا مقداری داده و عملکرد داخل شی خود دارید و میتوناید با نشان‌گذاری ساده‌ای به آن دسترسی داشته باشید.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are having trouble getting this to work, try comparing your code against our version — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). The live version will give you a blank screen, but that's OK — again, open your devtools and try typing in the above commands to see the object structure.</p>
+</div>
+
+<p>So what is going on here? Well, an object is made up of multiple members, each of which has a name (e.g. <code>name</code> and <code>age</code> above), and a value (e.g. <code>['Bob', 'Smith']</code> and <code>32</code>). Each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax always follows this pattern:</p>
+
+<pre class="brush: js">var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};</pre>
+
+<p>The value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions. The first four items are data items, and are referred to as the object's <strong>properties</strong>. The last two items are functions that allow the object to do something with that data, and are referred to as the object's <strong>methods</strong>.</p>
+
+<p>An object like this is referred to as an <strong>object literal</strong> — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes, which we'll look at later on.</p>
+
+<p>It is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database. Sending a single object is much more efficient than sending several items individually, and it is easier to work with than an array, when you want to identify individual items by name.</p>
+
+<h2 id="Dot_notation">Dot notation</h2>
+
+<p>Above, you accessed the object's properties and methods using <strong>dot notation</strong>. The object name (person) acts as the <strong>namespace</strong> — it must be entered first to access anything <strong>encapsulated</strong> inside the object. Next you write a dot, then the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object's methods, for example:</p>
+
+<pre class="brush: js">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="Sub-namespaces">Sub-namespaces</h3>
+
+<p>It is even possible to make the value of an object member another object. For example, try changing the name member from</p>
+
+<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+
+<p>to</p>
+
+<pre class="brush: js">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>Here we are effectively creating a <strong>sub-namespace</strong>. This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:</p>
+
+<pre class="brush: js">person.name.first
+person.name.last</pre>
+
+<p><strong>Important</strong>: At this point you'll also need to go through your method code and change any instances of</p>
+
+<pre class="brush: js">name[0]
+name[1]</pre>
+
+<p>to</p>
+
+<pre class="brush: js">name.first
+name.last</pre>
+
+<p>Otherwise your methods will no longer work.</p>
+
+<h2 id="Bracket_notation">Bracket notation</h2>
+
+<p>There is another way to access object properties — using bracket notation. Instead of using these:</p>
+
+<pre class="brush: js">person.age
+person.name.first</pre>
+
+<p>You can use</p>
+
+<pre class="brush: js">person['age']
+person['name']['first']</pre>
+
+<p>This looks very similar to how you access the items in an array, and it is basically the same thing — instead of using an index number to select an item, you are using the name associated with each member's value. It is no wonder that objects are sometimes called <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p>
+
+<h2 id="Setting_object_members">Setting object members</h2>
+
+<p>So far we've only looked at retrieving (or <strong>getting</strong>) object members — you can also <strong>set</strong> (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this:</p>
+
+<pre class="brush: js">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>Try entering the above lines, and then getting the members again to see how they've changed, like so:</p>
+
+<pre class="brush: js">person.age
+person['name']['last']</pre>
+
+<p>Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these in the JS console:</p>
+
+<pre class="brush: js">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>You can now test out your new members:</p>
+
+<pre class="brush: js">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">var myDataName = nameInput.value;
+var 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">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">var myDataName = 'height';
+var 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">person.height</pre>
+
+<p>Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.</p>
+
+<h2 id="What_is_this">What is "this"?</h2>
+
+<p>You may have noticed something slightly strange in our methods. Look at this one for example:</p>
+
+<pre class="brush: js">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>You are probably wondering what "this" is. The <code>this</code> keyword refers to the current object the code is being written inside — so in this case <code>this</code> is equivalent to <code>person</code>. So why not just write <code>person</code> instead? As you'll see in the <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> article when we start creating constructors, etc., <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>Let's illustrate what we mean with a simplified pair of person objects:</p>
+
+<pre class="brush: js">var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>In this case, <code>person1.greeting()</code> will output "Hi! I'm Chris."; <code>person2.greeting()</code> on the other hand will output "Hi! I'm Brian.", even though the method's code is exactly the same in each case. As we said earlier, <code>this</code> is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.</p>
+
+<h2 id="You've_been_using_objects_all_along">You've been using objects all along</h2>
+
+<p>As you've been going through these examples, you have probably been thinking that the dot notation you've been using is very familiar. That's because you've been using it throughout the course! Every time we've been working through an example that uses a built-in browser API or JavaScript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than our own basic custom examples.</p>
+
+<p>So when you used string methods like:</p>
+
+<pre class="brush: js">myString.split(',');</pre>
+
+<p>You were using a method available on an instance of the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> class. Every time you create a string in your code, that string is automatically created as an instance of <code>String</code>, and therefore has several common methods/properties available on it.</p>
+
+<p>When you accessed the document object model using lines like this:</p>
+
+<pre class="brush: js">var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');</pre>
+
+<p>You were using methods available on an instance of the <code><a href="/en-US/docs/Web/API/Document">Document</a></code> class. For each webpage loaded, an instance of <code>Document</code> is created, called <code>document</code>, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods/properties available on it.</p>
+
+<p>The same is true of pretty much any other built-in object/API you've been using — <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>, etc.</p>
+
+<p>Note that built in Objects/APIs don't always create object instances automatically. As an example, the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — which allows modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire. Try entering the following into your JavaScript console:</p>
+
+<pre class="brush: js">var myNotification = new Notification('Hello!');</pre>
+
+<p>Again, we'll look at constructors in a later article.</p>
+
+<div class="note">
+<p><strong>Note</strong>: It is useful to think about the way objects communicate as <strong>message passing</strong> — when an object needs another object to perform some kind of action often it will send a message to another object via one of its methods, and wait for a response, which we know as a return value.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Congratulations, you've reached the end of our first JS objects article — you should now have a good idea of how to work with objects in JavaScript — including creating your own simple objects. You should also appreciate that objects are very useful as structures for storing related data and functionality — if you tried to keep track of all the properties and methods in our <code>person</code> object as separate variables and functions, it would be inefficient and frustrating, and we'd run the risk of clashing with other variables and functions that have the same names. Objects let us keep the information safely locked away in their own package, out of harm's way.</p>
+
+<p>In the next article we'll start to look at object-oriented programming (OOP) theory, and how such techniques can be used in JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "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>