unslug fa: move

1 files changed, 420 insertions, 0 deletions

diff --git a/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..85c20598af
--- /dev/null
+++ b/files/fa/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,420 @@
+---
+title: مقدمات جاوااسکریپت
+slug: Learn/Getting_started_with_the_web/مقدمات_جاوااسکریپت
+tags:
+  - آموزش
+  - جاوا‌ اسکریپت
+  - مقدماتی
+  - وب
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p>
+
+<div class="summary" dir="rtl">
+<p>جاوااسکریپت یک زبان برنامه نویسی است که تعاملات را به وبسایت شما می آورد (مانند بازی ها، پاسخ به کلیک شدن یک دکمه یا پر شدن فرم ها، طرح های پویا و پویانمایی). این مقاله به شما کمک میکند، کار با این زبان هیجان انگیز را شروع کنید و درکی از کارهای ممکن توسط آن را به شما میدهد.</p>
+</div>
+
+<h2 dir="rtl" id="جاوااسکریپت_واقعا_چیست؟">جاوااسکریپت واقعا چیست؟ </h2>
+
+<p dir="rtl">{{Glossary("جاوااسکریپت")}} یک زبان برنامه نویسی کاملا داینامیک است که زمانیکه به اسناد {{Glossary("HTML")}} اعمال میشود، تعامل پویا با وبسایت را ممکن میکند. جاوااسکریپت توسط برندان ایخ یکی از موسسین پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا، ساخته شد.</p>
+
+<p dir="rtl">با جاوااسکریپت انجام هر چیزی امکان پذیر است. ابتدا شما با خصوصیات ساده و کاربردی این زبان مانند کار با حلقه ها، گالری تصاویر، تغییر قالب بندی و واکنش به کلیک دکمه ها شروع خواهید نمود. به مرور زمان و با کسب مهارت در جاوااسکریپت شما قادر به ساخت بازی ها، انیمشن های دو بعدی و سه بعدی، برنامه ها و... خواهید شد.</p>
+
+<p dir="rtl">جاوااسکریپت ذاتا خیلی فشرده اما در عین حال انعطاف پذیر است و توسعه دهندگان با استفاده از همین خصوصیت انعطاف پذیری جاوااسکریپت ابزارهای بسیاری را نوشته اند که برروی هسته زبان جاوااسکریپت قرار می گیرند و به کمک آنها می توان با تلاش کم به قابلیت های بیشتر دست یافت. این قابلیت ها شامل موارد زیر می گردد:</p>
+
+<p dir="rtl">واسط‌ های برنامه نویسی کاربردی  ({{Glossary("API","APIs")}}) — APIs ،  در داخل مرورگر تعبیه شده اند تا کارهایی مانند ایجاد پویایه HTML  و تنظیم استایل های CSS ، یا گرفتن و دستکاری یک استریم ویدئو از وب کم کاربر، یا ایجاد گرافیک های سه بعدی و نمونه های صوتی را فراهم کنند.</p>
+
+<ul>
+ <li dir="rtl">API های مختلف به توسعه دهندگان اجازه میدهند که کارایی های مختلف را به نرم افزار هایشان با اضافه کردن قابلیت سایت های دیگر مانند توییتر یا فیسبوک بیفزاییند.</li>
+ <li dir="rtl">فریمورک های مختلف و کتابخانه ها را می توانید به html تان اضافه کنید تا به شما اجازه ساخت سریع سایت و اپلیکیشنتان را بدهد.</li>
+</ul>
+
+<h2 dir="rtl" id="یک_مثال_ساده">یک مثال ساده</h2>
+
+<p dir="rtl">قسمت بالا واقعا هیجان انگیز به نظر میرسد و باید هم اینطور باشد -جاوا اسکریپت یکی از مهیجترین تکنولوژی های شبکه اینترنت است وقتی شما شروع به پیدا کردن مهارت در آن میکنید وب سایت شما وارد یک بعد جدید از قدرت و خلاقیت میگردد.</p>
+
+<p dir="rtl">اما راحت بودن با جاوا اسکریپت از راحت بودن با HTML  و CSS مقداری سخت تر است. شاید شما مجبور باشید که با قدم های استوار از کارهای کوچک شروع کنید. برای شروع، ما به شما نشان میدهیم چطور کدهای جاوا اسکریپت ساده و ابتدایی به صفحه تان اضافه کنید. ساختن مثال "hello world!"(<a href="http://en.wikipedia.org/wiki/%22Hello,_world!%22_program">the standard in basic programming examples</a>.)</p>
+
+<div class="warning" dir="rtl">
+<p><strong>نکته مهم : اگر تازه به مجموعه آموزش ما پیوسته اید برای شروع<a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip"> کدهای مثال را از اینجا دانلود</a> کنید</strong></p>
+</div>
+
+<ol>
+ <li dir="rtl">ابتدا, به صفحه وب آزمایشی خود بروید و یک فایل جدید با نام main.js بسازید و آن را در فولدر scripts خود ذخیره کنید.</li>
+ <li dir="rtl">سپس به فایل index.htm رفته و عناصر زیر را در یک خط جدید و پیش از  <code>&lt;/body&gt;</code> بنویسید.</li>
+</ol>
+
+<pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
+
+<p dir="rtl">3. این دقیقا همان کاری است که با عنصر {{htmlelement("link")}} برای وارد کردن CSS میکنیم.— با این کار دستوزات جاوااسکریپت را به سند HTML خود اضافه می کنید بنابراین روی HTML,CSS و سایر عناصر صفحه تاثیر خواهد گذاشت.</p>
+
+<p dir="rtl">4. اکنون کد زیر را به فایل main.js اضافه کنید: </p>
+
+<pre class="brush: js">var myHeading = document.querySelector('h1');
+myHeading.innerHTML = 'Hello world!';</pre>
+
+<p dir="rtl">5. حالا مطمئن شوید فایل های HTML و Javadcript ذخیره شده اند. سپس index.html را در مرورگر باز کنید. باید چیزی مشابه تصویر زیر مشاهده کنید. 7</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></p>
+
+<div class="note" dir="rtl">
+<p><strong>توجه </strong>: دلیل اینکه ما از تگ {{htmlelement("script")}} در پایان محتوا فایل HTML استفاده می کنیم این است که کد جاوا‌‌‌‌‌‌‍‌اسکریپت مستقیم از درون فایل HTML توسط مرورگر لود شود . اگر کد جاوااسکریپت را در بالای محتوای موجود در فایل HTML قرار دهیم  در اینصورت  محتوای زیرین HTML تحت تاثیر عملکرد کد جاوااسکریپت خواهند بود و به همین دلیل کد جاوااسکریپت را در پایینترین بخش محتوا صفحه  HTML می گذاریم .</p>
+</div>
+
+<h3 dir="rtl" id="قدم_بعدی_چیست_؟">قدم بعدی چیست ؟</h3>
+
+<p dir="rtl">خوب همانطور که امتحان کردید شما با کمک جاوااسکریپت متن موجود در سرتیتر (تگ H1) را به متن "Hello World"   تغییر دادید.  این عمل را با صدا زدن تابع {{domxref("Document.querySelector", "querySelector()")}} بمنظور ارجاع دادن به سرتیتر H1 و ذخیره آن در متغییر <code>myHeading</code>  انجام داده اید. این عمل بسیار به شبیه کاری است که ما selectors در CSS انجام می دهیم. زمانی که می خواهید روی یک تگ یا المان عملی را انجام دهید احتیاج است اول آن را انتخاب کنید.</p>
+
+<p dir="rtl">بعد از آن متن یا محتوا مورد نظر را  به متغییر <code>myHeading</code>   که توسط تابع {{domxref("Element.innerHTML", "innerHTML")}} تعریف شده است ٫ به ویژگی محتوای متن  تگ H1  محتوای "Hello World" مقدار دهی می شود.</p>
+
+<h2 dir="rtl" id="توضیح_پایه_ای_زبان">توضیح پایه ای زبان</h2>
+
+<p dir="rtl">برویم سراغ اصول و ویژگی پایه ای و اصلی زبان برنامه نویسی جاوااسکریپت,  بررسی ویژگی های عمومی در تمام زبان های برنامه نویسی بويژه این ویژگی ها در زبان جاوا اسکریپت باعث درک بهتر از روش کار کرد آن خواهد شد. اگر شما اصول پایه  را بدانید می توانید برنامه نویسی را  شروع کنید</p>
+
+<div class="warning" dir="rtl">
+<p><strong>نکته مهم</strong>: سعی کنید در زمان مطالعه‌ی این مقاله کدهای مثال را در کنسول مرورگر خود اجرا کنید تا نتیجه‌ی کار را بهتر درک کنید . برای جزئیات بیشتر برای کار کردن با کنسول مرورگر اینجا <a href="https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools">&lt;&lt; بررسی ابزارهای توسعه مرورگر&gt;&gt; کلیک کنید</a> .</p>
+</div>
+
+<h3 dir="rtl" id="متغییرها">متغییرها</h3>
+
+<p dir="rtl">{{Glossary("Variable", "Variables")}} نگهدارنده هایی هستند که شما میتوانید مقادیر را درون آن ها نگهداری کنید. با تعریف یک متغیر با استفاده از کلمه کلیدی <code>var</code> شروع کنید، سپس با یک نام دلخواه کار را ادامه دهید:</p>
+
+<pre class="brush: js">var myVariable;</pre>
+
+<div class="note" dir="rtl">
+<p><strong>توجه</strong>:  نقطه ویرگول  ( ; )  در پایان هر خط نشان‌دهنده‌ی پایان عبارت است و تنها در صورتی لزوما باید استفاده شود که بخواهید عبارت‌های مختلف در یک سطر را از هم جدا کنید. هرچند برخی اعتقاد دارند که گذاشتن آن در پایان هر سطر، شیوه‌ی مناسبی است. قوانین دیگری برای لزوم استفاده و لزوم عدم استفاده‌ی آن وجود دارد (برای جزییات بیشتر <a href="https://news.codecademy.com/your-guide-to-semicolons-in-javascript/">راهنمای نقطه‌ویرگول در جاوااسکریپت</a> را مشاهده کنید).</p>
+</div>
+
+<div class="note">
+<p dir="rtl"><strong>توجه</strong>: شما می توانید تقریبا هر نامی به یک متغییر بدهید اما محدودیت هایی برای تعریف نام وجود دارد (<a href="http://www.codelifter.com/main/tips/tip_020.shtml">برای آشنای بیشتر با قوانین نام گذاری متغیرها اینجا را کلیک کنید </a>)</p>
+</div>
+
+<div class="note">
+<p dir="rtl"><strong>نکته</strong>: جاوااسکریپت به حروف کوچک و بزرگ حساس است و نام متغییر<code>myVariable</code>  با نام <code>myvariable</code>  از نظر جاوااسکریپت متفاوت است. اگر مشکلی در فراخوانی و بدست آوردن مقدار از یک متغییر تعریف شده دارید بزرگ یا کوچک بودن حروف نام متغییر را چک کنید !</p>
+</div>
+
+<p dir="rtl">پس از تعریف یک متغیر شما می توانید به آن یک مقدار بدهید:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p dir="rtl">شما میتوانید مقداررا تنها با فراخوانی نام متغیر بدست آورید:</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p dir="rtl">شما میتوانید اگر بخواهید هر دوی این عملیات ها را روی یک خط انجام دهید:</p>
+
+<pre class="brush: js">var myVariable = 'Bob';</pre>
+
+<p dir="rtl">پس از دادن یک مقدار به متغیر شما میتوانید آن را تغییر دهید:</p>
+
+<pre>var myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p dir="rtl">دقت کنید که متغیرها<a href="/en-US/docs/Web/JavaScript/Data_structures"> انواع مختلفی از داده ها را </a> میتوانند داشته باشند:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">متغییر</th>
+   <th scope="col">توضیح</th>
+   <th scope="col">مثال</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>
+    <p dir="rtl">متغییر رشته ای برای نگهداری مقدار متن استفاده می شود. حتمی برای مقدار دهی به متغییر متنی باید  متن یا محتوا در کوتیشن قرار دهید.</p>
+   </td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>
+    <p dir="rtl">متغییر عددی . برای مقدار دهی به  متغییر عددی احتیاج به استفاده از کوتیشن نیست.</p>
+   </td>
+   <td><code>var myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>
+    <p dir="rtl">متغییر درست یا غلط . کلمات <code>true</code>/<code>false</code> بعنوان کلیداصلی در JS تعریف شده اند و در زمان مقدار دهی نیاز به استفاده از کوتیشن ندارند</p>
+   </td>
+   <td><code>var myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>
+    <p dir="rtl">این ساختار(آرایه) اجازه می دهد چندین مقدار را با یک نام ذخیره کنید.</p>
+   </td>
+   <td>
+    <p><code>var myVariable = [1,'Bob','Steve',10];</code><br>
+     هر عضو از متغییر(آرایه) مانند زیر می توان صدا زد:</p>
+
+    <p><code>myVariable[0]</code>, <code>myVariable[1]</code>, ... .</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>
+    <p dir="rtl">اساسا در جاوا اسکریپت همه چیز یک آبجکت است و شما می توانید آن را دریک متغییر ذخیره کنید. این نکته را در ذهن داشته باشید تا در آینده با آن بیشتر آشنا خواهید شد.</p>
+
+    <p>n.</p>
+   </td>
+   <td><code>var myVariable = document.querySelector('h1');</code><br>
+    مثال های بالای در این مقاله.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p dir="rtl">اگر شما تازه برنامه نویسی را شروع کرده باشید حتمی از خودتان می پرسید چرا به متغییرها نیاز داریم ؟ خوب٫ ما به متغییرها نیاز داریم تا همه کارهای جالب را انجام بدیم.  اگر نتوانیم مقدار را تغییر دهیم پس نمی توانیم هیچ چیز داینامیک یا  پویایی را بسازیم مانند یک پیام تبریک خصوصی یا نمایش یک عکس از مجموعه گالری عکس ها . در هر عمل پویایی نیاز به متغییر داریم.</p>
+
+<h3 dir="rtl" id="نظر_ها_یادداشت_ها">نظر ها  (یادداشت ها)</h3>
+
+<p dir="rtl">در کد جاوااسکریپت مانند سی اس اس می توانید نظر (یادداشت) بگذارید :</p>
+
+<pre class="brush: js">/*
+Everything in between is a comment.
+*/</pre>
+
+<p dir="rtl">اگر نظر یا یادداشت شما فقط یک خط است می توانید از ساختار دو اسلش مانند مثال زیر استفاده کنید:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// This is a comment
+</pre>
+
+<h3 dir="rtl" id="عملیات_ها">عملیات ها</h3>
+
+<p dir="rtl">{{Glossary("operator")}} نماد یک عمل  ریاضی است که نتیجه را بر اساس دو مقدار (یا متغییر) تولید می کند. در جدول زیر بعضی از عملیات های ساده لیست شده اسند که می توانید در کنسول مرورگر آنها را امتحان کنید.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">عمل</th>
+   <th scope="col">توضیح</th>
+   <th scope="col">نماد(ها)</th>
+   <th scope="col">مثال</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">بعلاوه / جمع</th>
+   <td>
+    <p dir="rtl">زمان جمع دو مقدار عددی و یا برای بعلاوه ( پیوست دادن) دو رشته استفاده می شود.</p>
+   </td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">تفریق, ضرب, تقسیم</th>
+   <td>
+    <p dir="rtl">عمل های پایه ریاضی را انجام می دهند و فقط روی مقدار عدد قابل استفاده هستند.</p>
+   </td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // multiply in JS is an asterisk<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">مقدار دهی</th>
+   <td dir="rtl">در مثال می بینید با کمک مساوی مقدار به متغییر داده شده است.</td>
+   <td><code>=</code></td>
+   <td><code>var myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">عمل تطابق</th>
+   <td>
+    <p dir="rtl">در یک آزمایش خواهید دید وقتی دو مقدار باهم برابر نباشند مقدار بازگشت داده شده از عمل مقایسه مقدار صحیح یا غلط (<code>true</code>/<code>false</code>) خواهد بود. </p>
+   </td>
+   <td><code>===</code></td>
+   <td><code>var myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">عدم تساوی / نه منطقی</th>
+   <td>
+    <p dir="rtl"> (<code>true</code> )عدم تساوی یا نه منطقی (نات منطقی) زمانی مقدار صحیح برمی گردادند که دو طرف تساوی باهم مساوی نباشند. اگر دو طرف تساویی مساوی باشند مقدار غلط (<code>false) </code> بر می گرداند</p>
+   </td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>The basic expression is <code>true</code>, but the comparison returns <code>false</code> because we've negated it:</p>
+
+    <p><code>var myVariable = 3;<br>
+     !myVariable === 3;</code></p>
+
+    <p>Here we are testing "is <code>myVariable</code> NOT equal to 3". This returns <code>false</code>, because it IS equal to 3.</p>
+
+    <p><code><code>var myVariable = 3;</code><br>
+     myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p dir="rtl">عمل های زیادی وجود دارد اما برای شروع تا همین جا کافی است اما اگر می خواهید <a href="/fa/docs/Web/JavaScript/Reference/Operators">لیست تمامی عمل و عبارت ها را مشاهده کنید اینجا را کلیک</a> کنید.</p>
+
+<div class="note">
+<p dir="rtl"><strong>نکته مهم</strong>: ترکیب چند نوع  متفاوت از متغییرها در زمان محاسبه باعث ایجاد نتایج عجیبی می شود ٫ پس مراقب باشید متغییرها را به درستی استفاده کنید تا نتیجه صحیح بگیرید. برای مثال در کنسول خود عبارت  <code>"35" + "25"</code> وارد کنید. چرا نتیجه ای که فکر می کنید را نخواهید ؟ زیرا اعداد بین دوتا نماد نقل قول است پس کامپایلر مثل جمع رشته با آن برخورد می کند نه بعلاوه عدد صحیح. اگر شما <code>35 + 25</code> در کنسول وارد کنید نتیجه صحیح را خواهید دید.</p>
+</div>
+
+<h3 id="شرط_ها">شرط ها</h3>
+
+<p dir="rtl">شرط ها در ساختار کد به شما اجازه می دهند در صورت صحیح یا غلط بودن یک عبارت مقدار یا فرمانی اجرا شود و اجرای  ٫ بستگی به خروجی شرط دارد .  رایج ترین  ساختار شرطی :  <code>if ... else</code>  است بصورت نمونه :</p>
+
+<pre class="brush: js">var iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p dir="rtl">عبارت درون  <code>if ( ... )</code> یک شرط است  - این شرط  می گوید  اگر مقدار متغیر <code>iceCream</code>  برابر با مقدار رشته یی <code>chocolate</code>  بود پس نتیجه شرط <code>true</code> (صحیح) است در نتیجه تکه کد درون  {} اجرا می شود و اگر شرط برقرار نبود یا به عبارتی غلط بود از تکه کد اول می گذرد و تکه کد بعد از <code>else</code>  اجرا خواهد شد. </p>
+
+<h3 dir="rtl" id="توابع">توابع </h3>
+
+<p dir="rtl">{{Glossary("Function", "Functions")}} یک روش برای بسته بندی دستورات است که می خواهید برای چند بار از آن استفاده کنید ٫ فارغ از اینکه چه زمان می خواهید از این مجموعه دستورات استفاده کنید با صدا زدن نام تابعی که این دستورات در درون آن قرار دارند می توانید آنها را بارها بدون تکرار اجرا کنید.  شما نمونه ای از توابع را در مثال های قبل دیدید. بصورت نمونه:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p dir="rtl">توابع بالا در درون بروزر وجود دارند و هر زمان بخواهید می توانید آنها را صدا بزنید.</p>
+
+<p dir="rtl">اگر شما چیزی شبیه نام متغییر دیدید که جلوی آن پرانتز های باز و بسته <code>()</code> وجود دارد آن چیز حتمی تابع است.  توابع معمولا پارامترهایی ({{Glossary("Argument", "arguments")}} ) را به عنوان ورودی می گیرند و این اطلاعات را لازم دارند تا بتواند کار خود را انجام دهند. پارامترهای ورودی در در بین علامت های پرانتز قرار می گیرند و در صورتی که بیشتر از یک پارامتر ورودی وجود داشته باشد با علامت کاما از یک دیگر جدا می شوند.</p>
+
+<p dir="rtl">برای نمونه تابع <code>alert()</code> باعث می شود که  باکس پاپ آپ در پنجره مرورگر نمایش داده شود ولی  برای نمایش دادن باکس پاپ آپ نیاز هست مقداری به عنوان پارمتر ورودی توسط تابع دریافت ٫ تا عمل انجام گردد.</p>
+
+<p dir="rtl">خبر خوب این است شما هم می توانید توابع خود را بسازید. در مثال بعدی ما یک تابع ساده با دو پارامتر ورودی نوشته ایم که در درون تابع عمل ضرب را بر روی دو متغییر ورودی انجام و نتیجه را به عنوان خروجی بر می گرداند :</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}</pre>
+
+<p dir="rtl">بهتر است برای یاد گیری تابع بالا را در کنسول مرورگر اجرا کنید و بعد از آن کدهای زیر را برای دیدن نتیجه خروجی تابع در کنسول در ادامه وارد کنید :</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p dir="rtl"><strong>توجه</strong>: عبارت <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> به مرورگر می گوید مقدار درون متغییر <code>result</code> به عنوان خروجی یا نتیجه محاسبه تابع در نظر بگیر. این عمل اجباری است زیرا متغییرهای تعریف شده در درون تابع فقط در دسترس داخل همان تابع خواهد بود . به موضوع تعیین قوانین و شرایط دسترسی به متغییرهای درون تابع {{Glossary("Scope", "scoping")}} می گویند. برای اطلاعات بیشتر در مورد<a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope"> اسکوپینگ متغییرها ( محدود دسترسی به متغییر) به اینجا</a> مراجعه کنید.</p>
+</div>
+
+<h3 dir="rtl" id="رویداد_ها">رویداد ها</h3>
+
+<p dir="rtl">بدون رویدادها نمی توان یک وبسایت تعاملی ساخت . این ساختار از کد گوش بزنگ می مانند تا عکس العمل یا اتفاقی در مرورگر پیش آید و بعد کدی تحت پاسخ به آن عکس العمل تعریف شده اجرا می شود. مشهود ترین مثال <a href="/en-US/docs/Web/Events/click">رویداد کلیک</a>  در زمانی که  روی چیزی در مرورگر انجام می شود. برای امتحان کد زیر را در کنسول وارد کنید و در صفحه وبی که در همان  پنجره کنسول وجود دارد کلیک کنید تا نتیجه را ببنید:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p dir="rtl">روش های زیادی وجود دارد که برای المان یا تگ یک رویداد تعریف کرد. در کد زیری ما المان (تگ) HTML را توسط یک رویداد با نام <code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> بدون تعریف یک نام  به بصورت مستقیم تابعی بدون نام به آن نسبت داده ایم ٫ محتوا تابع همان کدهای خواهند بود که زمان عمل کلیک می خواهیم اجرا شوند.</p>
+
+<p dir="rtl">به این کد توجه کنید:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p dir="rtl">نتیجه اجرای کد بالا با پایین یکی است:</p>
+
+<pre class="brush: js">var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p dir="rtl">این بهینه تر است!</p>
+
+<h2 dir="rtl" id="یک_مثال_فوق_العاده_از_وبسایت">یک مثال فوق العاده از وبسایت</h2>
+
+<p dir="rtl">تا الان با مقدمات جاوااسکریپت آشنا شدیم٫ زمان آن رسیده به سراغ  مثال های جالب برویم تا دید مناسبی به شما بدهد که چه چیزهای را می توانید  بعد از یادگیری زبان جاوااسکریپت پیاده سازی کنید.</p>
+
+<p dir="rtl"></p>
+
+<h3 dir="rtl" id="تعویض_کننده_تصویر">تعویض کننده تصویر</h3>
+
+<p dir="rtl">در این بخش شما خواهید دید که در وبسایت مثالی ما چگونه می تواند با یک تکه کد ساده جاوااسکریپت یک تعویض کننده تصویر با قابلیت تعویض عکس بعد از هر کلیک روی عکس ساخت.</p>
+
+<ol dir="rtl">
+ <li> اول از همه عکس مورد علاقه خود را که می خواهید در سایت شما نمایش داده شود پیدا کنید فقط در نظر بگیرید با عکس اول هم اندازه باشد یا در حد امکان سایز آن نزدیک به تصویر قبلی باشد .</li>
+ <li>تصویر را در فولدر <code>images</code>  ذخیره کنید.</li>
+ <li>فایل <code>main.js</code>  باز کنید و کد زیر را وارد کنید (اگر کد سلام دنیا شما در فایل وجود دارد آن را پاک کنید):</li>
+</ol>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+
+<p dir="rtl">تمام تغییرات را در فایل ها باز را ذخیره کنید و فایل <code>index.html</code> را توسط مرورگر اجرا کنید. حالا زمانی که روی تصویر کلیک می کنید باید تصویر بعدی را به شما نمایش دهد.</p>
+
+<p dir="rtl">کاری که در کد بالا کردیم ٫ المان <span style="">image </span> را در متغییر <code style="">myImage</code> بعنوان منبع ذخیره کردیم . در مرحله بعد توسط رویداد <code style="">onclick</code><span style=""> به ویژگی مربوط به گرفتن محل یک تابع نوشتم که بعد از هر کلیک اتفاقات زیر برای المان تصویر پیش می آید:</span></p>
+
+<ol dir="rtl">
+ <li>مقدار ویژگی <code>src</code> را در درون متغییر ریختیم.</li>
+ <li>مقدار درون متغییر را با شرط مقایسه کردیم و اگر مقدار برابر با <code>src</code> بود کد درون شرط اجرا می شود .</li>
+ <li> اگر شرط صحیح بود مقدار ویژگی  <code>src</code>  به تصویر دوم تغییر داده می شود و تصویر در درون المان {{htmlelement("image")}}  نمایش در می آید.</li>
+ <li>اگر شرط صحیح نبود  یعنی تصویر به تازگی تغییر کرده است و مقدار ويژگی <code>src</code>  به محل ذخیره سازی تصویر اول(اصلی) می بایست تغییر نشانی دهد .</li>
+</ol>
+
+<h3 id="اضافه_کردن_یک_پیام_خوش_آمد_گویی">اضافه  کردن یک پیام خوش آمد گویی</h3>
+
+<p dir="rtl">در ادامه تعدادی کد اضافه خواهیم کرد که باعث می شود عنوان سایت بعد از دیدن(مرور) سایت توسط کاربر به یک پیام خوش آمدید تغییر کند. این پیام زمانی که کاربر برای بار دوم به سایت مراجعه می کند به او نمایش داده خواهد شد همچنین این اختیار را به کاربر می دهیم تا هر زمان مجددا به صحفه مراجعه کرد پیام خوش آمدگوئی خود را ببنید</p>
+
+<ol>
+ <li dir="rtl"> در فایل <code>index.html</code> را بعد از المان (تگ)   {{htmlelement("script")}} وارد کنید </li>
+ <li>
+  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li dir="rtl">در فایل <code>main.js</code> در پایین ترین بخش فایل دقیقا تک کد زیر را وارد کنید .در کد زیر یک رونوشت مانند از المان های button  (دکمه) و heading (عنوان)  در متغییر ها ریخته شده .</li>
+ <li>
+  <pre class="brush: js">var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li dir="rtl">تابع زیر را در فایل اضافه کنید . در حال حاضر کاری انجام نمی دهد اما بعدا خواهید دید</li>
+ <li dir="rtl">
+  <pre class="brush: js">function setUserName() {
+  var myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+}</pre>
+  تابع <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a> یک جعبه دریافت متن نمایش می دهد مانند  <code>alert()</code> با این تفاوت  در <code>prompt()</code> از کاربر اطلاعاتی را به عنوان ورودی می گیرد و در ادامه در متغییری بعد از زدن دکمه اوکی ذخیره می کند. ما در اینجا از کاربر خواسته ایم نام خود را وارد کند و در ادامه با کمک API  و صدا زدن تابع <code>localStorage</code> اطلاعات وارد شده (نام) را در حافظه داخلی مرورگر ذخیره می کنیم . ما  از حافظه محلی (حافظه محلی مرورگر)  بوسیله تابع <code>setItem()</code>  و اختصاص دادن اسم <code>'name'</code>  به اطلاعاتی که در درون متغیر <code>myName</code>  می باشدرا  ذخیره کردیم و این اطلاعات ذخیره شده همان نامی است که توسط کاربر وارد شده است.</li>
+ <li dir="rtl">کد <code>if ... else</code> را اضافه کنید بهتر ایست این قسمت از کد را بخش مقدار دهی اولیه نام گذاری کنیم زیرا در اینجا مشخص می شود چه زمان باید چه اتفاقی پیش آید</li>
+ <li dir="rtl">
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
+}</pre>
+  کد درون شرط نه منطقی زمانی اجرا می شود که اطلاعاتی برای  <code>name</code> در ذخیره سازی محلی وجود نداشته باشد و در نتیجه تابع <code>setUserName()</code> فراخوانی می شود( نامی که کاربر در بازدید قبلی داده است ست می شود) این نام از طریق استفاده از تابع <code>getItem()</code>  و مقدار دریافت مقدار  بازگشتی از تابع  و دادن این مقدار برای تنظیم (ست کردن) بوسیله <code>innerHTML</code> صورت می گیرد.</li>
+ <li dir="rtl">در پایان رویداد <code>onclick</code>  که برای دکمه تعیین شده است تابع <code>setUserName()</code> فراخوانی می کند . این عمل به کاربر اجازه می دهد هر زمان که بخواهد با کلیک روی این دکمه بتواند هر نام جدیدی که می خواهد وارد کند</li>
+ <li>
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p dir="rtl">حالا اگر برای اولین بار از صحفه وبسایت دیدار(ویزیت) کنید ٫ از شما می خواهد نام خود را برای دریافت پیام شخصی وارد کنید و شما می توانید هر زمان که تمایل داشته باشید با کلیک کردن روی دکمه درون صحفه این نام را تغییر دهید . این ویژگی به کمک ذخیره سازی محلی در درون مرورگر انجام می شود و بعد از بستن صفحه و مجددا باز کردن آن پیام به شما نمایش داده خواهد شد.</p>
+
+<h2 dir="rtl" id="نتیجه_گیری">نتیجه گیری</h2>
+
+<p dir="rtl">اگر تمام دستورالعمل های مقاله را دنبال کرده باشید باید چیزی مشابه صفحه زیر مشاهده کنید  ( شما می توانید <a href="http://mdn.github.io/beginner-html-site-scripted/">خروجی کار ما را از اینجا مشاهده </a>ببینید )</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p dir="rtl">اگر به مشکلی بر خوردید می توانید کار خود را با نسخه نهایی مثال ما که<a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js"> کد آن روی گیت‌هاب موجود است</a> مقایسه کنید.</p>
+
+<p dir="rtl">در این مقاله فقط مثال ساده ای از عملکرد جاوا اسکریپت آورده شد اگر از این آموزش لذت بردید و می خواهید بصورت دقیق تر و حرفه ای تر به یاد گیری ادامه دهید به راهنمای <a href="/fa/docs/Web/JavaScript/راهنما">جاوا‌اسکریپت</a> ما مراجعه کنید.</p>
+
+<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p>