initial commit

3 files changed, 1372 insertions, 0 deletions

diff --git a/files/ar/learn/javascript/first_steps/a_first_splash/index.html b/files/ar/learn/javascript/first_steps/a_first_splash/index.html
new file mode 100644
index 0000000000..2a6a1c4860
--- /dev/null
+++ b/files/ar/learn/javascript/first_steps/a_first_splash/index.html
@@ -0,0 +1,618 @@
+---
+title: البداية في الجافا سكربت
+slug: Learn/JavaScript/First_steps/A_first_splash
+tags:
+  - أحداث
+  - تعلم
+  - جافا سكربت
+  - حالات شرطية
+  - دالة
+  - سكربت
+  - عمليات
+  - كائنات
+  - مبتديء
+  - متغيرات
+  - مقال
+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">بما أنك الآن قد تعرفت على المفهوم العام للغةْ جافاسكريبت, و ما الذي يمكن أن تعمله بها, سنقوم الآن بإعطائك كورس مكثف في أساسيات جافاسكريبت من خلال دروس تعتمد تماما على التجربة العملية. ستقوم الآن و خطوة بخطوة بعمل لعبةْإحزر الرقم .</p>
+
+<p class="summary"></p>
+
+<table class="learn-box standard-table" dir="rtl">
+ <tbody>
+  <tr>
+   <th scope="row">المتطلبات اﻷساسية:</th>
+   <td>فهم أساسيات الحاسوب، فهم أساسيات HTML و CSS, وفهم ما هي الجافا سكربت.</td>
+  </tr>
+  <tr>
+   <th scope="row">الهدف:</th>
+   <td>أخذ قليل من الخبرة في كتابة بعض الجافا سكربت، وفهم القليل من اﻷساسيات لفهم كتابة برنامج بالجافا سكربت  .</td>
+  </tr>
+ </tbody>
+</table>
+
+<p dir="rtl">لا تتوقع أن تفهم كل تفاصيل الكود في الوقت الحالي __ نحن نريد أن نقدم لك المباديء العليا اﻵن، وإعطاؤك فكرة عن كيفية عمل الجافاسكربت ( وأي لغة برمجة أخرى ). في المقالات اللاحقة ، سوف نرى كل هذه الميزات بكثير من التفصيل!</p>
+
+<div class="note" dir="rtl">
+<p>ملحوظة: العديد من ملامح الكود سوف تراها في الجافا سكربت كما في اللغات البرمجية اﻵخرى __ الدوال ، الحلقات التكرارية، إلخ. بنية الكود تبدو مختلفة ، ولكن المبدأ واحد ﻻ يتغير .</p>
+</div>
+
+<h2 dir="rtl" id="فكر_مثل_المُبَرْمِج">فكر مثل المُبَرْمِج</h2>
+
+<p dir="rtl">واحد من اﻷشياء الصعبة في تعلم البرمجة ليس بنية الكود، ولكن كيف تطبق هذا الكود لحل المشاكل في العالم الحقيقي. أنت تحتاج للبدء في التفكير مثل المُبَرْمِج__ عمومًا هذا يتضمن النظر في وصف ماذا يحتاج برنامجك لكي يعمل, وعلى ماذا يعمل. ملامح الكود تحتاج ﻷن تحقق هذه اﻷشياء، وكيفية جعلهم يعملون معًا.</p>
+
+<p dir="rtl">المتطلبات مزيج من العمل الجاد ، الخبرة في تركيب الجملة البرمجية ، و التدريب بجانب قليل من اﻹبداع. كلما قمت بكتابة الكود ، كلما كان ذلك أفضل . ﻻ نعدك أن تطور " عقل المبرمج " في خمسة دقائق، ولكن سوف نعطيك الكثير من الفرص للتدريب على التفكير مثل المُبَرْمِج خلال هذه الدورة .</p>
+
+<p dir="rtl">مع أخذ ذلك في الاعتبار ، دعنا نأخذ مثال سوف ننشأه في هذا المقال، ومراجعة العملية العامة لتقسيمها إلى مهام ملموسة . </p>
+
+<h2 dir="rtl" id="مثال____لعبة_تخمين_الرقم">مثال __ لعبة تخمين الرقم</h2>
+
+<p dir="rtl">في هذا المقال سنعرض لك كيفية بناء لعبة بسيطة كما في هذا المثال :</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html notranslate">&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;/body&gt;
+&lt;script&gt;
+    // Your JavaScript goes here
+    var randomNumber = Math.floor(Math.random() * 100) + 1;
+    var guesses = document.querySelector('.guesses');
+    var lastResult = document.querySelector('.lastResult');
+    var lowOrHi = document.querySelector('.lowOrHi');
+    var guessSubmit = document.querySelector('.guessSubmit');
+    var guessField = document.querySelector('.guessField');
+    var guessCount = 1;
+    var resetButton;
+
+    function checkGuess() {
+      var 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;
+      var resetParas = document.querySelectorAll('.resultParas p');
+      for(var 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;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p dir="rtl">جرب اللعب __ تعرف بنفسك على اللعبة قبل أن تمضي قُدُمًا .</p>
+
+<p dir="rtl">دعنا نتخيل رئيسك في العمل أعطاك المختصر التالي ﻹنشاء هذه اللعبة :</p>
+
+<blockquote>
+<p>أريد منك أن تنشيء لعبة بسيطة وهي لعبة تخمين الرقم. يجب اختيار رقم عشوائي بين 1 و 100 ،  ثم تحدي اللاعب لتخمين الرقم في 10 مرات. بعد كل مرة يجب إخبار اللاعب هل الرقم صحيح أم خطأ  — و إذا كانت اﻷرقام المخمنة خطأ ، فهل كان التخمين قريب جدًا أم بعيد جدًا . يجب أن يخبر اللاعب أيضًا ما اﻷرقام التي خمنها سابقًا . اللعبة تنتهي عندما يخمن اللاعب الرقم الصحيح، أو تستمر اللعبة حتي نهاية عدد المرات. عندما تنتهي اللعبة يجب إعطاء اللاعب خيار بدء اللعبة مرة أخرى .</p>
+</blockquote>
+
+<p dir="rtl">بناءًا على النظر في هذا المختصر ، أول شيء يمكننا فعله هو البدء في تقسيمها إلى مهام بسيطة قابلة للتنفيذ، مثل عقلية المبرمج :</p>
+
+<ol dir="rtl">
+ <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 dir="rtl">دعنا نبدأ اﻵن ، لنرى كيف نستطيع أن نحول هذه الخطوات إلى كود، وننشيء هذا المثال ، ونستكشف ميزات الجافا سكربت في طريقنا :</p>
+
+<h3 dir="rtl" id="اﻹعداد_اﻷولي">اﻹعداد اﻷولي</h3>
+
+<p dir="rtl">للبدء في الحل ، نفضل أن تأخذ نسخة من ملف , <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 dir="rtl">المكان حيث سنضيف الكود الخاص بنا بداخله  {{htmlelement("script")}} يوجد في آخر ملف HTML :</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+
+  // Your JavaScript goes here
+
+&lt;/script&gt;
+</pre>
+
+<h3 dir="rtl" id="إضافة_المتغيرات_لتخزين_البيانات_الخاصة_بنا">إضافة المتغيرات لتخزين البيانات الخاصة بنا</h3>
+
+<p dir="rtl">دعونا نبدأ. قبل كل شيء ، أضف اﻷسطر التالية بداخل عنصر{{htmlelement("script")}} :</p>
+
+<pre class="brush: js notranslate">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 dir="rtl">في هذا القسم من الكود فقد هيئنا المتغيرات والثوابت التي سنحتاجها لتخزين بيانات برنامجنا. المتغيرات تحتوي بشكل أساسي على قيم ( مثل الأرقام، النصوص). ﻹنشاء متغير نكتب الكلمة <code>let</code>  ( أو <code>var</code> ) متبوعة باسم المتغير ( للمزيد عن الاختلاف بين الكلمات المفتاحية في <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">هذه المقالة</a> ). الثوابت تستخدم لتخزين قيم غير قابلة للتغيير أو ﻻ تتغير وتكتب الثوابت بعد الكلمة المفتاحية <code>const</code>. في هذه الحالة ، نستخدم الثوابت لتخزين مراجع ﻷجزاء من واجهة المستخدم ; النص بداخل بعض هذه الثوابت ممكن أن يتغير ، ولكن عنصر HTML  يبقى كما هو .</p>
+
+<p dir="rtl">تستطيع تعيين قيمة للمتغير أو الثابت بعد علامة يساوي (<code>=</code>) متبوعة بالقيمة التي تريدها .</p>
+
+<p dir="rtl">في مثالنا :</p>
+
+<ul>
+ <li dir="rtl">المتغير اﻷول — <code>randomNumber</code> — يحدد رقم عشوائي بين 1 و 100 ، حيث تم حسابه باستخدام خوارزمية رياضية .</li>
+ <li dir="rtl">أول ثلاثة ثوابت هي لتخزين مرجع للفقرات في HTML ، وتستخدم ﻹدخال قيم في عنصر الفقرات في الكود ( ﻻحظ أنهم بداخل عنصر <code>&lt;div&gt;</code> ، الذي يستخدم لتحديد الثلاثة لتهيئتهم في وقت ﻻحق ، عندما نعيد تشغيل اللعبة)
+  <pre class="brush: html notranslate">&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;</pre>
+ </li>
+ <li dir="rtl">الثابتين التاليين يخزنان مراجع لنص حقل اﻹدخال و زر اﻹرسال حيث يستخدم للتحكم في إرسال الرقم الذي تم تخمينه .</li>
+ <li>
+  <pre class="brush: html notranslate" dir="rtl">&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 dir="rtl">آخر متغيرين لدينا يخزنان عدد مرات التخمين بداية من المرة 1 ( يستخدم لحفظ كم مرة قام اللاعب بالتخمين )، ومرجع لزر التهيئة (حيث سيكون موجود فيما بعد ) .</li>
+</ul>
+
+<div class="note" dir="rtl">
+<p><strong>ملحوظة</strong>: سوف تتعمل المزيد عن المتغيرات / الثوابت فيما بعد في هذه الدورة ، بداية من <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">المقال التالي</a> .</p>
+</div>
+
+<h3 dir="rtl" id="الدوال">الدوال</h3>
+
+<p dir="rtl">ثم ، أضف التالي أسفل كود الجافا سكربت الذي كتبناه باﻷعلى :</p>
+
+<pre class="brush: js notranslate">function checkGuess() {
+  alert('I am a placeholder');
+}</pre>
+
+<p dir="rtl">الدوال هي جزء من الكود يمكن إعادة استخدامه حيث تستطيع كتابة مرة واحدة واستدعاؤه مرة أخرى ومرة أخرى، وحفظ الكود الذي نحتاج لتكراره دائمًا .هذا حقًا مفيد.هناك عدة طرق لتعريف الدوال، ولكن اﻵن سنركز على نوع بسيط. هنا عرَّفنا الدالة باستخدام الكلمة المفتاحية  <code>function</code>, متبوعة بالاسم, مع اﻷقواس بعدها . بعد ذلك وضعنا اﻷقواس المعقوفة (<code>{ }</code>). بداخل اﻷقواس المعقوفة نكتب الكود الذي نريده لكي يعمل عندما نستدعي هذه الدالة.</p>
+
+<p dir="rtl">عندما نريد تشغير الكود ، نكتب اسم الدالة متبوعًا باﻷقواس.</p>
+
+<p dir="rtl">دعنا نحاول اﻵن. احفظ الكود و أعد تحميل الصفحة في المتصفح. ثم اذهب إلى   <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>, وأدخل السطر التالي :</p>
+
+<pre class="brush: js notranslate">checkGuess();</pre>
+
+<p dir="rtl">بعد الضغط على <kbd>Return</kbd>/<kbd>Enter</kbd>, يجب أن ترى تحذير يقول لك "<samp>I am a placeholder</samp>" لقد عرَّفنا الدالة في الكود الخاص بنا حيث تنشيء تحذير عند استدعائها.</p>
+
+<div class="note" dir="rtl">
+<p><strong>ملحوظة</strong>: سوف تتعلم المزيد عن الدوال في هذه الدورة .</p>
+</div>
+
+<h3 dir="rtl" id="العمليات_الرياضية">العمليات الرياضية</h3>
+
+<p dir="rtl">العمليات الرياضية في الجافا سكربت تسمح لنا أن نجري اختبارات، حل الرياضيات، ربط مجموعة كلمات ونصوص مع بعضهم البعض، وأشياء أخرى.</p>
+
+<p dir="rtl">إذا لم تقم بذلك بالفعل ، احفظ الكود الخاص بك، أعد تحميل الصفحة في المتصفح الخاص بك، وافتح <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console </a>.بعد ذلك نستطيع الكتابة كما في المثال التالي __ اكتب كل واحد من أعمدة "المثال" كما هو موضح تمامًا، اضغط <kbd>Return</kbd>/<kbd>Enter</kbd> بعد كل واحد، وانظر ما هي النتائج التي ظهرت :</p>
+
+<p dir="rtl">أوﻻً دعنا نلقى نظرة على العمليات الحسابية ، على سبيل المثال :</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 dir="rtl">أيضًا تستطيع استخدام علامة <code>+</code> لربط النصوص معًا ( في البرمجة، هذا يسمى التسلسل). جرب إدخال السطور التالية ، واحدًا تلو الآخر :</p>
+
+<pre class="brush: js notranslate">let name = 'Bingo';
+name;
+let hello = ' says hello!';
+hello;
+let greeting = name + hello;
+greeting;</pre>
+
+<p dir="rtl">هناك أيضًا بعض العمليات الحسابية المختصرة ، تسمى زيادة <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">عوامل التخصيص</a>. على سبيل المثال ، إذا أردت إضافة نص جديد لنص موجود بالفعل وترى النتيجة ، تستطيع كتابة هذا :</p>
+
+<pre class="brush: js notranslate">name += ' says hello!';</pre>
+
+<p dir="rtl">هذا يعادل :</p>
+
+<pre class="brush: js notranslate">name = name + ' says hello!';</pre>
+
+<p dir="rtl">عند استخدام حالة صح/ خطأ ( على سبيل المثال بداخل الحاﻻت الشرطية __ انظر {{anch("Conditionals", "below")}} ) نستخدم <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 notranslate">
+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 notranslate">
+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 notranslate">
+6 &lt; 10 // true
+20 &lt; 10 // false</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>أكبر من</td>
+   <td>
+    <pre class="brush: js notranslate">
+6 &gt; 10 // false
+20 &gt; 10  // true</pre>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<h3 dir="rtl" id="الحاﻻت_الشرطية">الحاﻻت الشرطية</h3>
+
+<p dir="rtl">بالعودة إلى دالة <code>checkGuess()</code> ، أعتقد أنه من المكن قول أننا ﻻ نريدها ﻹظهار رسالة placeholder . نحن نريدها لفحص هل تخمين اللاعب صحيح أم غير صحيح،  واﻹستجابة بشكل مناسب.</p>
+
+<p dir="rtl">في هذه النقطة، استبدل دالة <code>checkGuess()</code> بهذا بدلًا من ذلك :</p>
+
+<pre class="brush: js notranslate">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 dir="rtl">هذا كثير من التعليمات البرمجية __ حسنًا ! دعنا ننتقل إلى كل قسم وشرح ما يفعله.</p>
+
+<ul>
+ <li dir="rtl">السطر اﻷول (سطر رقم 2 في اﻷعلى) يعلن عن متغير يسمى <code>userGuess</code> ويهييء قيمته إلى القيمة المدخلة في حقل النصوص. أيضًا نستطيع أخذ هذه القيمة بواسطة دالة <code>Number()</code> ، فقط للتأكد من أن القيمة بالفعل رقم .</li>
+ <li dir="rtl">في السطر التالي، سنقابل أول كود من الحالات الشرطية (سطر 3-5 في اﻷعلى). كود الحالة الشرطية يسمح لك بتشغيل الكود بشكل انتقائي، بالاعتماد على حالة شرطية مؤكدة صح أو خطأ. يشبه هذا قليلًا الدالة، لكنه ليس بدالة. ببساطة لبدء كود الحالة الشرطية نكتب الكلمة المفتاحية <code>if</code> ، ثم بعض اﻷقواس، ثم اﻷقواس المعقوفة. بداخل اﻷقواس نكتب الشرط. إذا كان الشرط صحيح <code>true</code> ، سوف يشغل الكود بداخل اﻷقواس المعقوفة. وإذا كان غير ذلك ، لن ينفذ شيء وسينتقل لتشغيل باقي الكود. في حالتنا هذه الشرط سوف يتحقق ما إذا كان متغير <code>guessCount</code> يساوي 1 (أي ما إذا كانت هذه هي المرة اﻷولى للاعب أم ﻻ):</li>
+ <li>
+  <pre class="brush: js notranslate" dir="rtl">guessCount === 1</pre>
+ </li>
+</ul>
+
+<p dir="rtl">إذا كان اﻷمر كذلك، فإننا نجعل نص فقرة التخمينات مساويًا لــ "<samp>Previous guesses: </samp>". وإذا كان غير ذلك ، فلن نفعل.</p>
+
+<ul>
+ <li dir="rtl">السطر 6 يضيف قيمة  <code>userGuess</code><span> في نهاية الفقرة </span><code>guesses</code><span> ، باﻹضافة إلى مسافة لذلك ستكون هناك مسافة بين كل تخمين .</span></li>
+ <li dir="rtl">الكود التالي (السطور من 8-24 في اﻷعلى) تقوم بالقليل من المراجعات :
+  <ul>
+   <li>أولًا <code>if(){}</code> تفحص ما إذا كان تخمين المستخدم مساويًا لــ <code>randomNumber</code> الذي عرفناه في أعلى كود الجافاسكربت. إذا صحيحًا إذا اللاعب قام بالتخمين الصحيح وربح في هذه اللعبة، لذلك يتم عرض رسالة التهاني ، ويتم مسح مربع النص الذي يحتوي على تخمين عالي/منخفض، ويتم تشغيل دالة <code>setGameOver()</code> التي سنشرحها فيما بعد.</li>
+   <li>اﻵن لدينا حالة شرطية أخرى باستخدام <code>else if(){}</code>. حيث إنها تفحص ما إذا كانت هذه المرة هي آخر مرة للاعب أم ﻻ. إذا كانت آخر مرة فإن هذا البرنامج يفعل نفس اﻷشياء في الكود السابق، مع عرض رسالة انتهت اللعبة بدلاً من رسالة التهنئة.</li>
+   <li>الجزء اﻷخير يحتوي على ( <code>else { }</code> )الذي يحتوي على الكود الذي يعمل فقط في حالة الحاﻻت الشرطية( مثل أن اللاعب لم يخمن الرقم الصحيح، ولكن تبقى له المزيد من التخمينات). في هذه الحالة سوف نخبره بأن تخمينه خطأ ، ثم نشغل حالة شرطية أخرى حيث تفحص ما إذا كان التخمين عالى أو أقل من اﻹجابة، وعرض رسالة أخرى تخبر اللاعب إذا كان تخمينه أعلى أو أقل .</li>
+  </ul>
+ </li>
+ <li dir="rtl">آخر ثلاثة أسطر في هذه الدالة ( السطور من 26-28 في الأعلى)تكون مستعدة ﻹرسال التخمين. لقد أضفنا 1 لمتغير <code>guessCount</code> لحساب استهلاك اللاعب عدد أدواره(<code>++</code> هي عملية زيادة__ أي زيادة بمقدار 1 في المرة)، وتفريغ قيم حقل النصوص ، والاستعداد للدور القادم من التخمين .</li>
+</ul>
+
+<h3 dir="rtl" id="اﻷحداث">اﻷحداث</h3>
+
+<p>At this point we have a nicely implemented <code>checkGuess()</code> function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called <strong>event listeners</strong>, and the blocks of code that run in response to the event firing are called <strong>event handlers</strong>.</p>
+
+<p>Add the following line below your <code>checkGuess()</code> function:</p>
+
+<pre class="brush: js notranslate">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p>Here we are adding an event listener to the <code>guessSubmit</code> button. This is a method that takes two input values (called <em>arguments</em>) — the type of event we are listening out for (in this case <code>click</code>) as a string, and the code we want to run when the event occurs (in this case the <code>checkGuess()</code> function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p>
+
+<p>Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the <code>setGameOver()</code> function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.</p>
+
+<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3>
+
+<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p>
+
+<pre class="brush: js notranslate">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>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li>
+ <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "<samp>Start new game</samp>", and add it to the bottom of our existing HTML.</li>
+ <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li>
+</ul>
+
+<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p>
+
+<pre class="brush: js notranslate">function resetGame() {
+  guessCount = 1;
+
+  var resetParas = document.querySelectorAll('.resultParas p');
+  for (var 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>This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:</p>
+
+<ul>
+ <li>Puts the <code>guessCount</code> back down to 1.</li>
+ <li>Clears all the information paragraphs.</li>
+ <li>Removes the reset button from our code.</li>
+ <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li>
+ <li>Removes the background color from the <code>lastResult</code> paragraph.</li>
+ <li>Generates a new random number so that you are not just guessing the same number again!</li>
+</ul>
+
+<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p>
+
+<p>All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.</p>
+
+<h3 id="Loops">Loops</h3>
+
+<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.</p>
+
+<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p>
+
+<pre class="brush: js notranslate">for (var i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p>
+
+<ol>
+ <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li>
+ <li><strong>An exit condition</strong>: Here we have specified <code>i &lt; 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li>
+ <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li>
+</ol>
+
+<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p>
+
+<pre class="brush: js notranslate">var resetParas = document.querySelectorAll('.resultParas p');
+for (var i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>This code creates a variable containing a list of all the paragraphs inside <code>&lt;div class="resultParas"&gt;</code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p>
+
+<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3>
+
+<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>var resetButton;</code> line near the top of your JavaScript, then save your file:</p>
+
+<pre class="brush: js notranslate">guessField.focus();</pre>
+
+<p>This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.</p>
+
+<p>Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.</p>
+
+<p>In this particular case, we first created a <code>guessField</code> variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:</p>
+
+<pre class="brush: js notranslate">var guessField = document.querySelector('.guessField');</pre>
+
+<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p>
+
+<p>Because <code>guessField</code> now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is <code>focus()</code>, so we can now use this line to focus the text input:</p>
+
+<pre class="brush: js notranslate">guessField.focus();</pre>
+
+<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> variable contains a reference to a {{htmlelement("p")}} element, and <code>guessCount</code> contains a number.</p>
+
+<h3 id="Playing_with_browser_objects">Playing with browser objects</h3>
+
+<p>Let's play with some browser objects a bit.</p>
+
+<ol>
+ <li>First of all, open up your program in a browser.</li>
+ <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li>
+ <li>Type in <code>guessField</code> and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!</li>
+ <li>Now type in the following:
+  <pre class="brush: js notranslate">guessField.value = 'Hello';</pre>
+  The <code>value</code> property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!</li>
+ <li>Now try typing in <code>guesses</code> and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.</li>
+ <li>Now try entering the following line:
+  <pre class="brush: js notranslate">guesses.value</pre>
+  The browser will return <samp>undefined</samp>, because paragraphs don't have the <code>value</code> property.</li>
+ <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this:
+  <pre class="brush: js notranslate">guesses.textContent = 'Where is my paragraph?';</pre>
+ </li>
+ <li>Now for some fun stuff. Try entering the below lines, one by one:
+  <pre class="brush: js notranslate">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  Every element on a page has a <code>style</code> property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.</li>
+</ol>
+
+<h2 id="Finished_for_now...">Finished for now...</h2>
+
+<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 dir="rtl" id="في_هذه_الوحدة">في هذه الوحدة</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">البداية في الجافا سكربت</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/ar/learn/javascript/first_steps/index.html b/files/ar/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..66c8c8c2f8
--- /dev/null
+++ b/files/ar/learn/javascript/first_steps/index.html
@@ -0,0 +1,70 @@
+---
+title: الخطوات الأولى مع الجافاسكربت
+slug: Learn/JavaScript/First_steps
+tags:
+  - Landing
+  - Module
+  - NeedsTranslation
+  - TopicStub
+  - 'l10n:priority'
+  - أرقام
+  - برمجةسكربتات
+  - جافاسكربت
+  - دروس
+  - رياضيات
+  - عمليات حسابية
+  - مبتدئ
+  - متغيرات
+  - مصفوفات
+  - مقالة
+  - نصوص
+  - واجب
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary" dir="rtl">في اول دروس تعلم الجافاسكربت. ينبغي ان نجاوب عن اسئلة أساسية مثل "ماهي الجافاسكربت؟", "ماهي شكلها؟" و "مالذي تستطيع لغة الجافاسكربت عمله؟",  قبل ما نبدأ الأمثلة العملية لكتابة اكواد الجافاسكربت.  بعد ذلك سنناقش الأركان الأساسية بالتفصيل. مثل المتغيرات, النصوص, الأرقام و المصفوفات.</p>
+
+<h2 dir="rtl" id="متطلبات_مسبقة">متطلبات مسبقة</h2>
+
+<p dir="rtl">قبل ان تبدأ بهذه الدروس. لا تحتاج الى اي معرفة بالجافاسكربت, لكنك تحتاج خبرة بسيطة بكتابة اكواد HTML و CSS. ننصحك بهذه الدروس قبل البدء بتعلم الجافاسكربت:</p>
+
+<ul dir="rtl">
+ <li><a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web">البدء مع الويب</a> (الذي يحتوي على <a href="https://developer.mozilla.org/ar/docs/Learn/Getting_started_with_the_web/JavaScript_basics">مقدمة بسيطة بالجافاسكربت</a>).</li>
+ <li><a href="https://developer.mozilla.org/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة للغة الترميز الفائق</a>.</li>
+ <li><a href="https://developer.mozilla.org/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة لـ CSS</a>.</li>
+</ul>
+
+<div class="note" dir="rtl">
+<p><strong>ملاحظة:</strong></p>
+اذا كنت لا تستخدم كمبيوتر, لابتوب او اي جهاز لا يسمح لك بإنشاء ملفات جديدة يمكنك تجربة (اغلب) الاكواد بإستخدام احد الخدمات السحابية لكتابة الاكواد مثل<a href="http://jsbin.com/"> JSBin</a> أو <a href="https://thimble.mozilla.org/">Thimble</a></div>
+
+<h2 dir="rtl" id="دروس">دروس</h2>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">ما هي الجافاسكربت؟</a></dt>
+ <dd dir="rtl">اهلا بك في دورة جافاسكربت للمبتدئين من MDN! في اول درس في هذه الدورة سنلقي نظرة على الجافاسكربت. سنجاوب بعض الاسئلة بشكل بسيط مثل "ماهي جافاسكربت؟", "ماذا تعمل الجافاسكربت؟", لنتأكد بأن تأخذ راحتك مع اللغة.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">نظرة اولية على الجافاسكربت</a></dt>
+ <dd dir="rtl">الآن تعلمت الجافاسكربت من الناحية النظرية, وماذا يمكننا العمل بها. لنلقي نظرة على المميزات الأساسية بالجافاسكربت من الناحية العملية. في هذا الدرس سنبرمج لعبة "توقّع الرقم". خطوة بخطوة.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">مالذي حصل؟ اصلاح اخطاء الجافاسكربت</a></dt>
+ <dd dir="rtl">عندما برمجت لعبة "توقّع الرقم" في الدرس السابق. ربما وجدت انها لا تعمل! لا تخف. في هذا الدرس سنقوم بتعلم كيف تبحث عن الاخطاء في لعبتك وكيفية اصلاحها.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">تخزين المعلومات التي تحتاجها ــ المتغيرات</a></dt>
+ <dd dir="rtl">بعد قراءة الدروس الاخيرة ينبغي ان تعلم الآن ماهي الجافاسكربت و ماذا يمكنها ان تعمل من اجلك وكيف يمكنك استخدامها مع تقنيات الويب الأخرى وما هي مميزاتها الرئيسية بشكل مبسط. في هذا الدرس سنتعلم أحد أهم و أبسط الأشياء، المتغيرات. </dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">الرياضيات بالجافاسكربت ــ الأرقام والعمليات الحسابية</a></dt>
+ <dd dir="rtl">عند هذه المرحلة من الدورة ينبغي أن نناقش الرياضيات في الجافاسكربت, كيف يمكننا إجراء العمليات الحسابية باللغة.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">التعامل مع النصوص ــ النصوص بالجافاسكربت </a></dt>
+ <dd dir="rtl">بعد ذلك سنلقي نظرة على النصوص. في هذا الدرس ستتعلم كيف تتعامل مع النصوص. مثل انشاء النصوص. كتابة بعض الرموز. و جمع اكثر من نص مع بعض.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">دوال للنصوص مفيدة</a></dt>
+ <dd dir="rtl">بما اننا تعلمنا اساسيات التعامل مع النصوص. لننتقل الى المرحلة التالية ولنفكر ماذا يمكننا ان نعمل بالنصوص. مثلا لنجد طول نص, دمج النصوص, استبدال احد الاحرف بحرف اخر. وغيرها.</dd>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">المصفوفات</a></dt>
+ <dd dir="rtl">في آخر درس في هذه الدورة البسيطة، سنلقي نظرة على المصفوفات. طريقة مثالية لجمع بيانات تحت اسم متغير واحد. سنتعلم لماذا هذا مفيد، كيف انشاءها، الحصول على احد البيانات الموجودة، اضافة المزيد من البيانات، حذف بعض البيانات والمزيد</dd>
+</dl>
+
+<h2 dir="rtl" id="الواجبات">الواجبات</h2>
+
+<p dir="rtl">في هذا الواجب ستختبر فهمك للدروس السابقة</p>
+
+<dl>
+ <dt dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">مصنع القصص الظريفة</a></dt>
+ <dd dir="rtl">في هذا الواجب سيطلب منك بإستخدام المعرفة التي اكتسبتها من الدروس السابقة كتابة برنامج يكتب قصة ظريفة عشوائية. استمتع!</dd>
+</dl>
diff --git a/files/ar/learn/javascript/first_steps/useful_string_methods/index.html b/files/ar/learn/javascript/first_steps/useful_string_methods/index.html
new file mode 100644
index 0000000000..fac2541302
--- /dev/null
+++ b/files/ar/learn/javascript/first_steps/useful_string_methods/index.html
@@ -0,0 +1,684 @@
+---
+title: بعض الخصائص المفيدة للسلاسل الحرفية
+slug: Learn/JavaScript/First_steps/Useful_string_methods
+tags:
+  - استبدال
+  - تعلم
+  - تقطيع
+  - جافا سكربت
+  - حالة
+  - حرف صغير
+  - حرف كبير
+  - سلسلة حرفية
+  - مبتديء
+  - مقال
+translation_of: Learn/JavaScript/First_steps/Useful_string_methods
+---
+<div dir="rtl">{{LearnSidebar}}</div>
+
+<div dir="rtl">{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary" dir="rtl">الآن بعدما تعلمنا أساسيات السلاسل، دعنا نبدأ في التفكير وتجربة العمليات التي يمكننا القيام بها على هذه السلاسل، مثل إيجاد طول السلسلة، ربط السلاسل وأيضًا طريقة تقسيمها إلى أجزاء، ومعرفة كيفية استبدال حرف بآخر، وأشياء أخرى.</p>
+
+<table class="learn-box standard-table" dir="rtl">
+ <tbody>
+  <tr>
+   <th scope="row">المتطلبات اﻷساسية:</th>
+   <td>أساسيات استخدام الحاسوب ، فهم أساسيات HTML و CSS ، وفهم ماهية الجافاسكربت.</td>
+  </tr>
+  <tr>
+   <th scope="row">الهدف:</th>
+   <td>فهم أن سلاسل الحروف strings هو عبارة عن كائنات ، وتعلم كيفية استخدام الطرق المتاحة لهذه الكائنات لمعالجة سلاسل الحروف strings .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 dir="rtl" id="السلاسل_ككائنات">السلاسل ككائنات</h2>
+
+<p dir="rtl" id="Useful_string_methods">معظم اﻷشياء في الجافا سكريبت هي كائنات. فعند إنشاء سلسلة، على سبيل المثال بإستخدام :</p>
+
+<pre class="brush: js notranslate" dir="rtl">let string = 'This is my string';</pre>
+
+<p dir="rtl">يصبح المتغير الخاص بك مثل كائن سلسلة، وبناءًا على ذلك يصبح لديه العديد من الخصائص والأساليب المتاحة له والتي يمكن تنفيذها عليه. يمكنك رؤية ذلك إذا انتقلت إلى صفحة الكائن {{jsxref("String")}} وألقيت نظرة على القائمة الموجودة في هذه الصفحة بالأسفل.</p>
+
+<p dir="rtl"><strong>اﻵن وقبل أن يبدأ عقلك في التوهان أو التشتيت، لا تقلق!</strong> أنت لست بحاجة لمعرفة هذه اﻷشياء في وقت مبكر من رحلة تعلمك للجافا سكريبت. وهناك عدد قليل من الاحتمالات لإستخدامك هذا كثيرًا والذي سننظر إليه هنا في هذا المقال.</p>
+
+<p dir="rtl">دعنا نجرب بعض اﻷمثلة داخل <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">الكونسول الخاص بالمتصفح</a>.</p>
+
+<h3 dir="rtl" id="إيجاد_طول_السلسلة">إيجاد طول السلسلة</h3>
+
+<p dir="rtl">هذا سهل للغاية — أنت ببساطة تستخدم هذه الخاصية لإيجاد طول السلسلة {{jsxref("String.prototype.length", "length")}} حاول إتباع الأسطر التالية :</p>
+
+<pre class="brush: js notranslate" dir="rtl">// هنا نقوم بإنشاء متغير يحتوي على سلسلة نصية
+let browserType = 'العربية';
+
+// هنا نقوم بكتابة اسم المتغير متبوعًا بالخاصية لمعرفة طول القيمة الموجودة داخل المتغير
+browserType.length;</pre>
+
+<p dir="rtl">النتيجة ستكون 7, ﻷن كلمة "العربية" تحتوي على 7 أحرف. وهذه الخاصية مفيدة لعدة أسباب؛ على سبيل المثال، قد ترغب في العثور على أطول سلسلة نصية من اﻷسماء حتى تتمكن من عرضها بترتيب الطول، أو إخبار المستخدم أن اسم المستخدم الذي قام بإدخاله في حقل النموذج (حقل الإدخال) هو طويل جدًا. (في حالة تجاوز الاسم طول معين.)</p>
+
+<h3 dir="rtl" id="استرجاع_استدعاء_حرف_سلسلة_معين">استرجاع (استدعاء) حرف سلسلة معين</h3>
+
+<p dir="rtl">في ملاحظة ذات صلة،  يمكن إرجاع أي حرف داخل السلسلة باستخدام <strong>الاقواس المربعة</strong> — هذا يعني إدراج أو تضمين اﻷقواس المربعة (<code>[]</code>) في نهاية اسم المتغيرالخاص بك. وفي داخل اﻷقواس ستقوم بكتابة رقم الحرف الذي تريد إرجاعه،  لذا على سبيل المثال إذا كنت تريد إرجاع الحرف اﻷول فستقوم بإتباع الكود التالي:</p>
+
+<pre class="brush: js notranslate" dir="rtl">browserType[0];</pre>
+
+<p dir="rtl">تذكر: الكمبيوتر يبدأ العد من 0 وليس1! ويمكنك استخدام هذا على سبيل المثال للعثور على الحرف اﻷول من السلسلة وترتيبها أبجديًا.</p>
+
+<p dir="rtl">لكي نستدعي الحرف اﻷخير ﻷي سلسلة حروف ، سوف نستخدم السطر التالي , باﻹضافة إلى استخدام خاصية <code>length</code>  التي ذكرناها في اﻷعلى:</p>
+
+<pre class="brush: js notranslate" dir="rtl">browserType[browserType.length-1];</pre>
+
+<p dir="rtl">إن طول  "mozilla" هو 7 حروف , ولكن ﻷن العد يبدأ من 0 , فإن موقع الحرف هو 6; باستخدام  <code>length-1</code> يعطينا الحرف اﻷخير.</p>
+
+<h3 dir="rtl" id="إيجاد_سلسلة_حروف_فرعية_داخل_السلسلة_الرئيسية_واستخراجها">إيجاد سلسلة حروف فرعية داخل السلسلة الرئيسية واستخراجها</h3>
+
+<p dir="rtl">أحيانًا تريد أن تسدعي بعض الحروف الموجودة داخل السلسلة الكبيرة (<em>نقول بشكل عام إذا كانت سلسلة فرعية موجودة داخل السلسلة اﻷم </em>). نستطيع فعل هذا بواسطة استخدام طريقة {{jsxref("String.prototype.indexOf()", "indexOf()")}} , والتي تحتوي عامل  {{glossary("parameter")}} — السلسلة الفرعية التي نريد أن نستدعيها.</p>
+
+<ol dir="rtl">
+ <li>جرب هذا:
+  <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre>
+  والنتيجة هي 2 , ﻷن سلسلة الحروف الفرعية  "zilla" تبدأ من الموقع 2 (0, 1, 2  — أي 3 حروف) بداخل "mozilla". مثل هذا الكود من الممكن أن يستخدم لفلترة السلاسل الحرفية. على سبيل المثال , لدينا قائمة بالعديد من عنواين الويب ونريد أن نستدعي فقط العنوان الذي يحتوي كلمة "mozilla" .</li>
+</ol>
+
+<ol dir="rtl" start="2">
+ <li>هناك طريقة أخري لذلك , التي من الممكن أن تكون فعالة . جرب المثال التالي:
+  <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre>
+  يجب أن تكون النتيجة هي <code>-1</code> — هذا ﻷن سلسلة الحروف التي نبحث عنها في هذه الحالة ,  'vanilla', غير موجودة في السلسلة الرئيسية.<br>
+  <br>
+  يمكن استخدام هذا ﻹيجاد كل حالات السلسلة  حيث ﻻ تحتوي السلسلة الفرعية  'mozilla',( أو فعل ذلك باستخدام عامل النفي ، <code>!==</code>) :
+
+  <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') === -1) {
+  // do stuff with the string if the 'mozilla'
+  // substring is NOT contained within it
+}
+
+if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string if the 'mozilla'
+  // substring IS contained within it
+}</pre>
+ </li>
+ <li>إذا علمت أين تبدأ السلسلة الفرعية داخل السلسلة الرئيسية , وتعلم الحرف اﻷخير الذي تريده ,فإن {{jsxref("String.prototype.slice()", "slice()")}} تستخدم لاستدعاءه . جرب المثال التالي:
+  <pre class="brush: js notranslate">browserType.slice(0,3);</pre>
+  النتيجة هي "moz" — البرامتر اﻷولparameter يشير إلى موقع الحرف الذي نريد أن نبدأ البحث من عنده , البرامتر الثاني parameterيشير إلى موقع الحرف الذي يوجد بعد آخر حرف تم استدعاءه. لذلك التقطيع slice  يحدث بداية من الحرف اﻷول حتى الحرف اﻷخير لكنه ﻻ يشمل الحرف اﻷخير . في هذا المثال , من البداية 0 ، فإن البرامتر الثاني  يساوي طول السلسلة التي نريد استدعائها.</li>
+ <li>أيضًا ، إذا أردت استدعاء كل الحروف المتبقية بعد حرف معين , فإننا ﻻ نحتاج البرامتر الثاني! بدلًا من ذلك نحتاج فقط موقع الحرف الذي نريد أن نستدعي الحروف المتبقية بعده. جرب المثال التالي:
+  <pre class="brush: js notranslate">browserType.slice(2);</pre>
+  والنتيجة هي "zilla" — وهذا ﻷن الحرف الذي رقمه 2 هو الحرف z ، وﻷننا لم نكتب البرامتر الثاني ، فإن النتيجة هي طباعة كل الحروف بعد هذا الحرف . </li>
+</ol>
+
+<div class="note" dir="rtl">
+<p><strong>ملاحظة </strong>: البرامتر الثاني  parameter للــ <code>slice()</code> هو اختياري : إذا لم نكتبه ، فإن النتيجة تكون حتى نهاية السلسلة الرئيسية.   أيضًا هناك خيار آخر ، راجع صفحة ;  {{jsxref("String.prototype.slice()", "slice()")}}  للاطلاع على المزيد حول slice.</p>
+</div>
+
+<h3 dir="rtl" id="تغيير_حالة_الحروف">تغيير حالة الحروف</h3>
+
+<p dir="rtl">خاصية {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} و {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} تستخدم لتحويل الحروف لحروف صغيرة أو حروف كبيرة, على التوالي. وهذا مفيد حيث على سبيل المثال إذا أردنا تهيئة البيانات التي أدخلها المستخدم قبل حفظها في قاعدة البيانات . </p>
+
+<p dir="rtl">دعونا نجرب المثال التالي ونرى ما سيحدث:</p>
+
+<pre class="brush: js notranslate" dir="rtl">let radData = 'My NaMe Is HeSHam';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<h3 dir="rtl" id="تحديث_أجزاء_من_السلسلة">تحديث أجزاء من السلسلة</h3>
+
+<p dir="rtl">نستطيع استبدال سلسلة حروف بأخرى داخل السلسلة الرئيسية باستخدام خاصية  .{{jsxref("String.prototype.replace()", "replace()")}}  إنها خاصية بسيطة جدًا ، ولكنها تملك خيارات متقدمة سوف نستخدمها ولكن ليس اﻵن .</p>
+
+<p dir="rtl">هذه الخاصية لها 2 بارامتر ( الحروف الذي تريد استبدالها, والحروف الجديدة). جرب هذا المثال:</p>
+
+<pre class="brush: js notranslate" dir="rtl">browserType.replace('moz','van');</pre>
+
+<p dir="rtl">والنتيجة هي طباعة كلمة "vanilla"  في الكونسول. ولكن إذا تفحصنا قيمة . <code>browserType</code>,فإنها ما تزال "mozilla" . لتحديث قيمة المتغير  <code>browserType</code> حقيقة, سوف نحتاج إلى تحديد قيمة المتغير للقيمة التي نتجت لدينا ؛ حيث أن قيمة المتغير ﻻ تتحدث تلقائيًا . لذلك نحن بحاجة لكتابة هذا الكود: </p>
+
+<pre class="brush: js notranslate">browserType = browserType.replace('moz','van');</pre>
+
+<h2 dir="rtl" id="أمثلة_عملية_للتعلم">أمثلة عملية للتعلم</h2>
+
+<p dir="rtl">في هذا القسم سوف نتعلم كتابة كود لمعالجة السلاسل الحرفية. في كل مثال باﻷسفل , لدينا مصفوفة من العبارات ، و حلقات تكرارية لتنفيذ القيم في المصفوفة وعرضها في قائمة نقطية. ﻻ تحتاج إلى معرفة المصفوفات والحلقات التكرارية اﻵن ( سوف تُشرح في مقالات مستقبلية). كل ما تحتاجه في كل مثال هو كتابة الكود الذي سوف يعرض العبارات في الهيئة التي نريدها.</p>
+
+<p dir="rtl">كل مثال يحتوي على زر "reset" حيث يمكن إرجاع الكود إلى حالته اﻷصلية في حالة الخطأ أو أن الحل لم يعمل جيدًا ، وهناك زر "Show solution" يمكن الضغط عليه لترى اﻹجابة المحتملة إذا واجهتك مشكلة بالفعل.</p>
+
+<h3 dir="rtl" id="معالجة_رسائل_التهنئة">معالجة رسائل التهنئة</h3>
+
+<p dir="rtl">في أول تمرين سوف نبدأ بشيء بسيط — حيث لدينا مصفوفة من رسائل التهنئة ، ولكننا نريد أن نرتبها في قائمة مثل رسائل العيد. سوف نستخدم الحاﻻت الشرطية   <code>if( ... )</code>  ، لطباعة الجمل في قائمة إذا كانت رسائل تهنئة.</p>
+
+<ol dir="rtl">
+ <li>نفكر أوﻻً حول كيفية معرفة رسائل التهنئة في كل عبارة. هل هذه العبارة موجودة في الرسائل ، وما هي الطريقة التي نستخدمها لمعرفة ذلك ؟</li>
+ <li>سوف نحتاج إلى كتابة حالة شرطية .</li>
+ <li>تلميح: في هذا المثال من الفيد اختبار الطريقة لمعرفة النتيجة الصحيحة.</li>
+</ol>
+
+<div class="hidden" dir="rtl">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&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!',
+                 'Happy eid Day',
+                 'A happy Eid to all the family',
+                 'You\'re all I want for Eid',
+                 '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 notranslate">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 notranslate">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();
+});
+
+const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
+'\nlist.innerHTML = \'\';' +
+'\nlet greetings = [\'Happy Birthday!\',' +
+'\n                 \'Happy Eid Day\',' +
+'\n                 \'A happy Eid to all the family\',' +
+'\n                 \'You\\\'re all I want for Eid\',' +
+'\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}';
+
+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) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const 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 dir="rtl">{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 dir="rtl" id="إصلاح_الحروف_الكبيرة">إصلاح الحروف الكبيرة</h3>
+
+<p dir="rtl">في هذا التمرين لدينا أسماء المدن في المملكة المتحدة، ولكن الحروف الكبيرة مكتوبة بشكل عبثي . نريد منك تغييرها للحروف الصغيرة، ماعدا الحرف اﻷول يكون كبير . وأفضل طريق لعمل ذلك هو :</p>
+
+<ol dir="rtl">
+ <li>حول كل كلمة في متغير  <code>input</code>  للحروف الصغيرة وخزنها في متغير جديد.</li>
+ <li>اقتنص الحرف اﻷول من كل كلمة في هذا المتغير الجديد وخزنه في متغير آخر.</li>
+ <li>استخدم المتغير اﻷخير لاستبدال الحرف اﻷول من الكلمة بحرف كبير. وخزن نتيجة عملية الاستبدال لمتغير جديد آخر.</li>
+ <li>غيِّر قيمة متغير <code>result</code> لتساوي النتيجة النهائية.</li>
+</ol>
+
+<div class="note" dir="rtl">
+<p><strong>ملحوظة: </strong>البرامتر الخاص بالطريقة المستخدمة ليس فقط الحروف ، بل يمكن أن يكون متغير أيضًا .</p>
+</div>
+
+<div class="hidden" dir="rtl">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&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 notranslate">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 notranslate">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();
+});
+
+const 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}';
+
+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) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const 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 dir="rtl">{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 dir="rtl" id="عمل_عبارة_جديدة_من_العبارة_اﻷصلية">عمل عبارة جديدة من العبارة اﻷصلية</h3>
+
+<p dir="rtl">في هذا التمرين اﻷخير ، المصفوفة تحتوي على مجموعة من العبارات التي تحتوي معلومات عن محطات القطار في شمال انجلترا. هذه الكلمات تحتوي على ثلاثة حروف لكود المحطة ، متبوعًا بكود القطار، متبوعًا بالفاصلة المنقوطة، متبوعًا اسم المحطة. على سبيل المثال:</p>
+
+<pre dir="rtl">MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p dir="rtl">نريد استخراج كود المحطة والاسم ، ووضعهم جميعًا في عبارة واحدة بالهيئة التالية:</p>
+
+<pre dir="rtl">MAN: Manchester Piccadilly</pre>
+
+<p dir="rtl">نقترح أن تتبع هذه الخطوات:</p>
+
+<ol dir="rtl">
+ <li>استخرج الثلاثة أحرف لكود المحطة وخزنه في متغير جديد.</li>
+ <li>أوجد رقم موقع حرف الفاصلة المنقوطة ; .</li>
+ <li>استخرج اسم المحطة باستخدام رقم موقع الفاصلة المنقوطة كنقطة مرجعية ، وخزنه في متغير جديد .</li>
+ <li>اربط المتغيرين الجديدين مع العبارة لعمل عبارة جديدة .</li>
+ <li>غيِّر قيمة المتغير <code>result</code> لتساوي العبارة النهائية، وليست العبارة الأصلية <code>input</code>.</li>
+</ol>
+
+<div class="hidden" dir="rtl">
+<h6 id="Playable_code_3">Playable code 3</h6>
+
+<pre class="brush: html notranslate">&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 notranslate">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 notranslate">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();
+});
+
+const 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}';
+
+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) {
+  const scrollPos = textarea.scrollTop;
+  const caretPos = textarea.selectionStart;
+  const front = (textarea.value).substring(0, caretPos);
+  const 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 dir="rtl">{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 dir="rtl" id="اختبر_مهاراتك!">اختبر مهاراتك!</h2>
+
+<p dir="rtl">لقد وصلنا لنهاية هذا المقال. ولكن هل تستطيع أن تتذكر المعلومات المهمة؟ تستطيع أن تجد بعض الاختبارات لتثبت هذه المعلومات في الذاكرة قبل أن تذهب __   <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings">اختبر مهاراتك : السلاسل الحرفية</a>.</p>
+
+<h2 dir="rtl" id="الخاتمة">الخاتمة</h2>
+
+<p dir="rtl">ﻻ نستطيع الهروب من الحقيقة بأنه القدرة على معالجة الكلمات والجُمَل في البرمجة هو في غاية اﻷهمية __ بخاصة في الجافا سكربت، مثل مواقع التواصل مع الناس. هذا المقال يعطيك اﻷساسيات التي تحتاج معرفتها حول معالجة سلاسل الحروف (العبارات). هذا يجب أن يفيدك جيدًا عند قراءة مواضيع معقدة في المستقبل. اﻵن لنذهب للنظر في النوع الرئيسي من البيانات التي نحتاج للتركيز عليها __ المصفوفات arrays  .</p>
+
+<p dir="rtl">تمت بحمد الله.</p>
+
+<p dir="rtl">{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 dir="rtl" id="في_هذه_الوحدة">في هذه الوحدة</h2>
+
+<ul>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">بعض الخصائص المفيدة للسلاسل الحرفية</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li dir="rtl"><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>