fix(guide): simplify directory structure

guide/arabic/javascript/tutorials/add-new-properties-to-a-javascript-object/index.md

@@ -0,0 +1,23 @@
+---
+title: Add New Properties to a JavaScript Object
+localeTitle: أضف خصائص جديدة إلى كائن JavaScript
+---
+يمكنك إضافة خصائص جديدة إلى كائنات JavaScript الموجودة بالطريقة نفسها التي يمكنك تعديلها بها.
+
+هناك نوعان مختلفان من البُنى التركيبية ، وتدوين النقاط ، وتدوين القوس. يفضل الترميز النقطي بشكل عام لقابلية القراءة ولكن يجب أن تكون الخصائص معرفًا صالحًا.
+
+إليك كيفية استخدام ميزة التدوين النقطي:
+
+ `myDog.bark = "woof-woof"; 
+` 
+
+إليك كيفية استخدام تدرج قوس:
+
+ `myObject['bark'] = "woof-woof"; 
+` 
+
+باستخدام تدرج القوس ، يمكننا استخدام المتغيرات كأسماء للممتلكات:
+
+ `var dynamicProperty = "bark"; 
+ myObject[dynamicProperty] = "woof-woof"; 
+`

guide/arabic/javascript/tutorials/add-two-numbers-with-javascript/index.md

@@ -0,0 +1,8 @@
+---
+title: Add Two Numbers with JavaScript
+localeTitle: أضف رقمين مع JavaScript
+---
+تستخدم JavaScript الرمز `+` للإضافة. ويمكن أيضا أن تستخدم بدلا من `parseInt()` ولكن هذا هو أبعد من هذا.
+
+ `var sum = 10 + 10; 
+`

guide/arabic/javascript/tutorials/build-javascript-objects/index.md

@@ -0,0 +1,28 @@
+---
+title: Build JavaScript Objects
+localeTitle: بناء كائنات جافا سكريبت
+---
+تُعد الكائنات مفيدة لتخزين البيانات بطريقة منظمة ، ويمكن استخدامها لتمثيل كائنات العالم الحقيقي ، مثل السيارات أو الفنادق إلى جهاز الكمبيوتر.
+
+تشبه الكائنات الصفائف ، إلا أنه بدلاً من استخدام الفهارس للوصول إلى بياناتها وتعديلها ، يمكنك الوصول إلى البيانات الموجودة في الكائنات من خلال ما يسمى الخصائص. هناك طريقتان رئيسيتان لإنشاء الكائنات: Object Literal والطريقة Constructor.
+
+باستخدام طريقة الكائن الحرفي ، إليك كيفية إنشاء كائن عينة:
+
+ `var cat = { 
+    name: "Whiskers", 
+    legs: 4, 
+    tails: 1, 
+    enemies: ["Water", "Dogs"] 
+ }; 
+` 
+
+باستخدام طريقة Constructor ، إليك كيفية إنشاء كائن عينة:
+
+ `var cat = new Object(); 
+ cat.name = "Whiskers"; 
+ cat.legs = 4; 
+ cat.tails = 1; 
+ cat.enemies = ["Water", "Dogs"]; 
+` 
+
+في طريقة Constructor ، نستخدم الكلمة الرئيسية `new` مع `Object` (باستخدام رأس المال "O") لإنشاء مثيل كائن جديد. بعد ذلك ، نستخدم الترميز النقطي لتعيين أسماء الخصائص وقيمها.

guide/arabic/javascript/tutorials/comment-your-javascript-code/index.md

@@ -0,0 +1,20 @@
+---
+title: Comment Your JavaScript Code
+localeTitle: تعليق كود جافاسكريبت الخاص بك
+---
+التعليقات هي طريقة رائعة لترك ملاحظاتك لنفسك وللآخرين الذين سيحتاجون لاحقًا إلى معرفة ما يفعلون. سيتم تجاهل أي رمز في ذلك.
+
+لنلقِ نظرة على الطريقتين اللتين يمكنك من خلالهما كتابة التعليقات في جافا سكريبت.
+
+*   سيعلق التعليق المزدوج على باقي النص في السطر الحالي:
+
+`// This is a single line comment.`
+
+*   سيعلق تعليق slash-star-star-slash كل شيء بين `/*` و `*/` characters:
+
+ `/* 
+ This is 
+ a multi-line comment 
+ (comment block) 
+ */ 
+`

guide/arabic/javascript/tutorials/construct-javascript-objects-with-functions/index.md

@@ -0,0 +1,17 @@
+---
+title: Construct JavaScript Objects with Functions
+localeTitle: بناء كائنات جافا سكريبت مع وظائف
+---
+باستخدام أدوات البناء ، من السهل إنشاء كائنات جديدة باستخدام مخطط أو مُنشئ. بناء جملة التصريح مختلف قليلاً ولكن لا يزال من السهل تذكره.
+
+ `// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers. 
+ var Car = function() { 
+  this.wheels = 4; 
+  this.engines = 1; 
+  this.seats = 1; 
+ }; 
+ 
+ var myCar = new Car(); 
+` 
+
+عادةً ما يبدأ اسم دالة المُنشئ بحرف كبير (بخلاف الدالات الأخرى ، التي تميل إلى البدء بحرف صغير). من المفترض أن يساعد الحرف الكبير في تذكير المطورين باستخدام الكلمة الأساسية الجديدة عند قيامهم بإنشاء كائن باستخدام هذه الوظيفة.

guide/arabic/javascript/tutorials/create-a-javascript-slot-machine/index.md

@@ -0,0 +1,10 @@
+---
+title: Create a JavaScript Slot Machine
+localeTitle: قم بإنشاء ماكينة Slot JavaScript
+---
+لهذا علينا أن نولد ثلاثة أرقام عشوائية باستخدام الصيغة التي تعطيناها وليس المعادلة العامة. `Math.floor(Math.random() * (3 - 1 + 1)) + 1;`
+
+ `slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+ slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+ slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+`

guide/arabic/javascript/tutorials/create-decimal-numbers-with-javascript/index.md

@@ -0,0 +1,8 @@
+---
+title: Create Decimal Numbers with JavaScript
+localeTitle: قم بإنشاء أرقام عشرية باستخدام جافا سكريبت
+---
+يمكن أن تحتوي متغيرات رقم جافا سكريبت على أرقام عشرية.
+
+ `var myDecimal = 2.8; 
+`

guide/arabic/javascript/tutorials/debugging-javascript-with-browser-devtools/index.md

@@ -0,0 +1,90 @@
+---
+title: Debugging JavaScript with Browser Devtools
+localeTitle: تصحيح JavaScript باستخدام متصفح Devtools
+---
+كمطور ، ستحتاج غالبًا إلى تصحيح التعليمات البرمجية. ربما تكون قد استخدمت بالفعل `console.log` في بعض التحديات ، وهي أبسط طريقة لتصحيح الأخطاء.
+
+في هذه المقالة سنخبرك ببعض من أروع الحيل ، لتصحيح الأخطاء باستخدام أدوات تصحيح الأخطاء الأصلية للمتصفحات.
+
+## نظرة سريعة على محرر Code FreeCodeCamp:
+
+قبل القفز إلى تصحيح الأخطاء ، يتسنى لنا تسريب بعض الحقائق السرية عن _محرك فحص الشفرة الرائع_ في FCC.
+
+نحن نستخدم [CodeMirror](http://codemirror.net/mode/javascript/index.html) مخصصة ، كمحرر التعليمات البرمجية. يتم استخدام [دالة `eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) لتقييم شفرة جافا سكريبت ممثلة كسلسلة من المحرر. عندما يتم استدعاء `eval()` ، ستنفذ المستعرضات التعليمات البرمجية الخاصة بك. سنتعلم المزيد عن سبب أهمية هذا السر في الأقسام اللاحقة من هذه المقالة.
+
+## الآن ننتقل إلى الحيل:
+
+## جوجل كروم DevTools
+
+يُعد Google Chrome أحد المتصفحات الأكثر شيوعًا باستخدام محرك جافا سكريبت مدمج يُسمى [V8](https://developers.google.com/v8/) ، ويوفر مجموعة أدوات رائعة للمطورين تسمى [Chrome DevTools](https://developer.chrome.com/devtools) . نوصيك بشدة بزيارة [دليل تصحيح أخطاء جافا سكريبت الكامل](https://developer.chrome.com/devtools/docs/javascript-debugging) .
+
+### 1: أساسيات DevTools
+
+#### إطلاق Chrome DevTools
+
+ضرب `F12`
+
+. بدلا من ذلك يمكنك الضغط
+
+`Ctrl` + `Shift` + `I`
+
+على ويندوز ولينكس أو
+
+`Cmd` + `Shift` + `I`
+
+على جهاز Mac أو إذا كنت تحب الماوس فقط ، فانتقل إلى `Menu > More Tools > Developer Tools` .
+
+#### التعرف على `Sources` وعلامات تبويب `console` .
+
+هاتين العلامتين هي ربما ستكون أفضل أصدقائك أثناء تصحيح الأخطاء. يمكن استخدام علامة تبويب `Sources` لتصور جميع النصوص البرمجية الموجودة على صفحة الويب التي تزورها. تحتوي علامة التبويب هذه على أقسام لإطار التعليمات البرمجية ، وشجرة الملفات ، ومكالمات المكالمة ، ونوافذ المراقبة ، إلخ.
+
+علامة تبويب `console` هي المكان الذي ينتقل فيه كل خرج السجل. بالإضافة إلى ذلك ، يمكنك استخدام مطالبة علامة تبويب وحدة التحكم لتنفيذ تعليمات جافا سكريبت. نوعه من المترادفة لموجه الأوامر على ويندوز ، أو محطة على لينكس.
+
+_نصيحة: يمكنك تبديل وحدة التحكم في أي وقت في DevTools باستخدام مفتاح `Esc` ._
+
+### 2: اختصارات وميزات مشتركة
+
+في حين يمكنك زيارة [القائمة الكاملة للاختصارات](https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts) ، وفيما يلي عدد قليل من الاستخدامات الأكثر استخدامًا:
+
+ميزة ويندوز ، لينكس ماك  
+البحث عن كلمة رئيسية ، يتم دعم regex. `Ctrl` + `F``Cmd` + `F`  
+بحث وفتح ملف `Ctrl` + `P``Cmd` + `P`  
+الانتقال إلى الخط `Ctrl` + `G` + `:line_no``Cmd` + `G` + `:line_no`  
+أضف نقطة توقف `Ctrl` + `B` ، أو انقر فوق السطر no. `Cmd` + `B` ، أو انقر فوق السطر no.  
+Pause / استئناف تنفيذ البرنامج النصي `F8` `F8`  
+الخطوة فوق الوظيفة التالية استدعاء `F10` `F10`  
+ادخل إلى الوظيفة التالية اتصل بـ `F11` `F11`
+
+### 3: استخدام خريطة المصدر لقواعدنا
+
+واحدة من أروع الميزات التي ستحبها هي [تصحيح السيناريو الديناميكي](https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript) ، على الطاير ، عبر تطبيق [Source Maps](https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps) .
+
+يمكن تصور كل نص برمجي في علامة التبويب المصدر في DevTools. تحتوي علامة التبويب المصدر على جميع ملفات مصدر JavaScript. ولكن يتم تنفيذ التعليمات البرمجية من محرر التعليمة البرمجية عبر `eval()` في حاوية ببساطة تسمى الجهاز الظاهري (VM) داخل عملية المستعرض.
+
+كما قد تكون قد خمنت الآن ، فإن الكود هو في الواقع برنامج نصي لا يحتوي على اسم ملف. لذلك لا نرى ذلك في علامة التبويب المصدر.
+
+> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": البريق:") **_هنا يأتي الاختراق!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": البريق:")
+
+يجب أن نستخدم `Source Maps` لتعيين اسم لجافا سكريبت من محررنا. انها بسيطة جدا:
+
+دعنا نقول نحن على التحدي [Factorialize](https://www.freecodecamp.com/challenges/factorialize-a-number) ، [وكودنا](https://www.freecodecamp.com/challenges/factorialize-a-number) يشبه هذا:
+
+ `function factorialize(num) { 
+  if(num <= 1){ 
+  ... 
+ } 
+ factorialize(5); 
+` 
+
+كل ما نحتاج إلى فعله هو إضافة `//# sourceURL=factorialize.js` إلى الجزء العلوي من الشفرة ، أي السطر الأول:
+
+ `//# sourceURL=factorialize.js 
+ 
+ function factorialize(num) { 
+  if(num <= 1){ 
+  ... 
+` 
+
+> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": البريق:") **_و Eureka هذا كل شيء!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": البريق:")
+
+الآن افتح DevTools وابحث عن اسم الملف. أضف نقاط كسر ، تصحيح بعيدا والتمتع به!

guide/arabic/javascript/tutorials/debugging-node-files-using-cli-commands/index.md

@@ -0,0 +1,45 @@
+---
+title: Debugging Node files using CLI commands
+localeTitle: تصحيح ملفات عقدة باستخدام أوامر CLI
+---
+## تصحيح ملفات عقدة باستخدام أوامر CLI
+
+ستتعرف في هذا البرنامج التعليمي على كيفية تصحيح رمز Node.js الخاص بك في سطر الأوامر. يمكن تصحيح أخطاء شفرة JavaScript البسيطة بسهولة باستخدام DevTools الخاص بالمتصفح. بالنسبة للعقدة ، يمكنك تصحيح التعليمات البرمجية بدون ترك واجهة سطر الأوامر (CLI).
+
+لنفترض أن لديك ملفًا باسم `contents.js` . يمكنك تشغيل الملف باستخدام أمر `node` .
+
+ `node contents.js 
+` 
+
+يجب أن يكون هذا معروفًا لك منذ كتابة رمز Node.js. والآن يجب تصحيح أي أخطاء تنبثق. لتشغيل الملف في وضع التصحيح إلحاق الكلمة `inspect` أثناء تشغيل الملف.
+
+ `node inspect contents.js 
+` 
+
+الآن سيفتح هذا الأمر ملفك في وضع التصحيح. من الآن فصاعدًا ، يمكنك التنقل خلال سطر واحد من الكود في كل مرة بالضغط على المفتاح **N** في لوحة المفاتيح.
+
+سيبدأ مصحح الأخطاء في السطر الأول. بالضغط على **N** ، يمكنك نقل المصحح إلى السطر التالي. إذا كان هناك خطأ في السطر الأول ، فسيظهر خطأ بدلاً من الانتقال إلى السطر الثاني. هذا مفيد جدا. على سبيل المثال ، إذا حدث خطأ في السطر السابع عشر ، فسوف يظهر لك الخطأ قبل الانتقال إلى الأمام.
+
+يمكن أن يكون هناك خطأ في المنطق الخاص بك ، بمعنى أنك تريد عرض قيمة معينة ولكن بدلاً من ذلك تعرض قيمة مختلفة. في هذه الحالة ، قد تساعدك إضافة `console.log()` s ومع وضع التصحيح ، يصبح من الأسهل التعرف على سبب الخطأ.
+
+* * *
+
+الآن في بعض الأحيان ، يحدث أن شفرة المصدر الخاصة بك ضخمة. تذهب إلى وضع التصحيح لتصحيح الأخطاء الخاصة بك وأنت على يقين من أن الخطأ هو من وظيفة على السطر 52. ولكن منذ وضع التصحيح يبدأ في السطر 1 ، هل لديك أي خيار سوى زيارة السطر 52 واحدا تلو الآخر؟ بالطبع لا!
+
+ما عليك سوى إضافة `debugger` الكلمات الرئيسية قبل الوظيفة.
+
+ `console.log("Outside the function....everything's going smoothly"); 
+ 
+ debugger; 
+ 
+ function doesSomething() { 
+    //some logic 
+    console.log("Something went wrong inside here!"); 
+ } 
+` 
+
+الآن افتح الملف مرةً أخرى في وضع التصحيح ، ثم اضغط **C** على لوحة المفاتيح هذه المرة.
+
+نقل **N** ينقل المصحح إلى السطر التالي ثم الضغط على **C** بإعلام المصحح للانتقال خلال التعليمات البرمجية بالكامل دفعة واحدة. هذا هو نفس تشغيل دون وضع التصحيح. _ولكن_ ، يحتوي كودك على إضافة هذه المرة. كنت تفكر في ذلك - الكلمة الأساسية `debugger` . ضغط **C** عادةً تشغيل التعليمات البرمجية حتى النهاية ولكن بسبب إضافة `debugger` ، فإنه سيتم إيقاف اليمين قبل بدء تشغيل الدالة.
+
+لذلك بعد تشغيل الملف في وضع التصحيح ، سيؤدي الضغط على **C** إلى تخطي التعليمة البرمجية والتوقف تمامًا قبل الوظيفة في الكلمة الرئيسية `debugger` . بعد ذلك ، يمكنك البدء من خلال خطوة واحدة في سطر واحد في كل مرة حتى يتم تحديد الخطأ الخاص بك.

guide/arabic/javascript/tutorials/declare-javascript-objects-as-variables/index.md

@@ -0,0 +1,30 @@
+---
+title: Declare JavaScript Objects as Variables
+localeTitle: قم بتعريف كائنات JavaScript كمتغيرات
+---
+هذا له تنسيق بسيط. تقوم بتعريف المتغير الخاص بك ويكون له مساوٍ لكائن في النموذج `{ key: value}`
+
+ `var car = { 
+  "wheels":4, 
+  "engines":1, 
+  "seats":5 
+ }; 
+` 
+
+يمكنك الوصول إلى خصائص الكائن باستخدام تدوين النقطة أو تدوين قوس.
+
+باستخدام ميزة التدوين النقطي:
+
+ `console.log(car.wheels); // 4 
+` 
+
+باستخدام تدرج قوس:
+
+ `console.log(car["wheels"]); // 1 
+` 
+
+استخدام تدرج قوس ديناميكي:
+
+ `var seatsProperty = "seats"; 
+ console.log(car[seatsProperty]); // 5 
+`

guide/arabic/javascript/tutorials/declare-javascript-variables/index.md

@@ -0,0 +1,88 @@
+---
+title: Declare Variables
+localeTitle: تعلن المتغيرات
+---
+# تعلن المتغيرات
+
+يمكن فرز تعريفات المتغير JavaScript إلى ثلاثة مكونات متميزة: نوع المتغير ، واسم المتغير ، وقيمة المتغير.
+
+ `    var myName = "Rafael"; 
+` 
+
+دعنا نكسر سطر الشفرة الموضح أعلاه في الأجزاء التي تصنعه:
+
+ `    var/const/let 
+` 
+
+يمكن أن تحتوي متغيرات JavaScript على ثلاثة أنواع تعريف: var و const و let. تعتبر متغيرات Var-type عالمية ، إذا تم الإعلان عنها خارج إحدى الوظائف ، فيمكن الوصول إليها بواسطة أي ملف JS (أو وحدة التحكم) ، وفي حالة إنشائها داخل إحدى الوظائف ، يمكن الوصول إليها بغض النظر عن نطاق المنع. تقتصر متغيرات Let-type على نطاقها. انظر المثال أدناه للاختلاف.
+
+ `     function varTest() { 
+      var x = 1; 
+      if (true) { 
+        var x = 2;  // same variable! 
+        console.log(x);  // 2 
+      } 
+      console.log(x);  // 2 
+    } 
+ 
+    function letTest() { 
+      let x = 1; 
+      if (true) { 
+        let x = 2;  // different variable 
+        console.log(x);  // 2 
+      } 
+      console.log(x);  // 1 
+    } 
+` 
+
+يكون للمتغيرات من نوع Const نفس النطاق مثل المتغيرات (نطاق الكتلة) ، لكنها غير قابلة للتغيير. أيا كانت القيمة التي يجب تعيين متغير نوع const ، يجب أن يحدث عندما يتم التصريح عن المتغير ، وستقوم JavaScript بإلقاء خطأ إذا تم تغيير المتغير في وقت لاحق.
+
+ `    const genre = "non-fiction"; 
+    console.log(genre); // "non-fiction"; 
+    genre = "fantasy"; // error 
+` 
+
+الآن يمكننا تحديد نوع المتغير ، دعنا نلقي نظرة على الاسم. تتم كتابة أسماء المتغيرات JavaScript في تنسيق `camel case` . مثال على حالة الإبل هو: `camelCase` . في سياق مثالنا:
+
+ `    myName 
+` 
+
+الاسم أيضًا سنصل إلى المتغير مرة أخرى لاحقًا:
+
+ `    console.log(myName); // "Rafael" 
+` 
+
+أخيرا ، لدينا قيمة:
+
+ `    "Rafael" 
+` 
+
+يتم كتابة JavaScript بشكل حيوي ، مما يعني أن أي متغير معين يمكن أن يمثل أي نوع بيانات معين في أي وقت معين. فمثلا:
+
+ `    var example = "This is an example"; 
+    example = [0, 1, 2, 3] 
+    example = {test: "Result"} 
+    example = 5 
+` 
+
+جميع هذه التصريحات صالحة تمامًا - يمكن أن تقفز متغيرات جافا سكريبت من السلسلة إلى المصفوفة إلى الاعتراض على عدد صحيح.
+
+### قم بتعريف كائن const
+
+كما ذكر أعلاه ، متغير Const هو قيمة غير قابلة للتغير يتم تعيينها لمثل هذا المتغير في وقت الإعلان ، ولكن هناك نقطة يجب ملاحظتها في بيان حالة الحالة مع const. لا يمكن تحديث كائن نوع const أيضًا بعد تعريفه ولكن تكون خصائص كائن الكائن. فمثلا.
+
+ `    const Car1 = { 
+        name: 'BMW', 
+        model: 'X1', 
+        color: 'black' 
+    } 
+` 
+
+هنا ، لا يمكننا تحديث الكائن ولكن يمكننا تحديث الخصائص عن طريق الوصول إلى من خلال نقطة (.) المشغل على النحو التالي.
+
+ `    Car1.color = 'Red'; 
+    console.log(Car1); 
+    O/P - {name: "BMW", model: "X1", color: "Red"} 
+` 
+
+إذا احتجنا إلى جعل كائن enitre غير قابل للتغيير (بما في ذلك الخصائص) ، فعلينا استخدام طريقة التجميد.

guide/arabic/javascript/tutorials/decrement-a-number-with-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Decrement a Number with JavaScript
+localeTitle: إنقاص رقم مع JavaScript
+---
+يمكنك بسهولة إنقاص أو إنقاص متغير بـ `1` مع `--` المشغل.
+
+ `i--; 
+` 
+
+هو ما يعادل
+
+ `i = i - 1; 
+` 
+
+**ملاحظة:** يصبح الخط بأكمله `i--;` ، مما يلغي الحاجة إلى علامة المساواة.

guide/arabic/javascript/tutorials/delete-properties-from-a-javascript-object/index.md

@@ -0,0 +1,40 @@
+---
+title: Delete Properties from a JavaScript Object
+localeTitle: حذف الخصائص من كائن JavaScript
+---
+يمكننا أيضًا حذف الخصائص من كائنات مثل هذه:
+
+ `delete ourDog.bark; 
+` 
+
+يقوم **عامل حذف** بإزالة خاصية من كائن.
+
+## بناء الجملة
+
+`delete expression` حيث يجب تقييم التعبير إلى مرجع خاصية ، على سبيل المثال:
+
+ `delete object.property 
+ delete object['property'] 
+` 
+
+## المعلمات
+
+**موضوع**  
+اسم كائن ، أو تعبير يتم تقييمه لكائن.
+
+**خاصية**  
+الخاصية لحذفها.
+
+## مثال
+
+ `var person = {name:'Jay', age:'52'}; 
+ delete person['age']; 
+ 
+ console.log(person); //{name:'Jay'} 
+` 
+
+## قيمة الإرجاع
+
+يلقي في وضع صارم إذا كانت الخاصية هي خاصية غير قابلة للتكوين (إرجاع false في غير صارمة). يعود صحيح في جميع الحالات الأخرى.
+
+[اقرأ أكثر](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete)

guide/arabic/javascript/tutorials/detect-authentic-click-events/index.md

@@ -0,0 +1,25 @@
+---
+title: Detect authentic click events
+localeTitle: اكتشاف أحداث النقرات الأصلية
+---
+## اكتشاف أحداث النقرات الأصلية
+
+قد يكون هناك موقف حيث تريد القيام ببعض الأشياء المحددة فقط إذا كان حدث النقر قد تم عرضه بشكل حقيقي من قبل مستخدم وليس بواسطة برنامج نصي لمحاكاة حدث نقرة.
+
+هناك حل بسيط جدًا لهذه المشكلة ، حيث يمنحنا كائن الحدث javascript خاصية. `.istrusted` ، والتي يمكن استخدامها لمعرفة الفرق.
+
+#### هنا مثال على استخدام هذه الطريقة
+
+ `// Assume there is a button in the HTML 
+ const button = document.querySelector('button'); 
+ 
+ button.addEventListener('click', (e) => { 
+  if (e.isTrusted) { 
+    console.log('Button clicked by a real user'); 
+  } else { 
+    console.log('Button click simulated by a script'); 
+  } 
+ }); 
+ 
+ button.click() // Outputs "Button click simulated by a script" 
+`

guide/arabic/javascript/tutorials/divide-one-number-by-another-with-javascript/index.md

@@ -0,0 +1,8 @@
+---
+title: Divide One Number by Another with JavaScript
+localeTitle: قسمة رقم واحد على آخر باستخدام JavaScript
+---
+تستخدم جافا سكريبت الرمز `/` للقسمة.
+
+ `var quotient = 66 / 33; 
+`

guide/arabic/javascript/tutorials/finding-a-remainder-in-javascript/index.md

@@ -0,0 +1,23 @@
+---
+title: Finding a Remainder in JavaScript
+localeTitle: العثور على البقية في جافا سكريبت
+---
+يعطي _عامل الباقي_ `%` الباقي من قسم رقمين.
+
+## مثال
+
+ `5 % 2 = 1 because 
+ Math.floor(5 / 2) = 2 (Quotient) 
+ 2 * 2 = 4 
+ 5 - 4 = 1 (Remainder) 
+` 
+
+## استعمال
+
+في الرياضيات ، يمكن التحقق من الرقم حتى أو فردي عن طريق التحقق من الجزء المتبقي من تقسيم الرقم إلى 2.
+
+ `17 % 2 = 1 (17 is Odd) 
+ 48 % 2 = 0 (48 is Even) 
+` 
+
+**ملاحظة** لا تخلط بينه وبين _modulus_ `%` لا يعمل بشكل جيد مع الأرقام السالبة.

guide/arabic/javascript/tutorials/generate-random-fractions-with-javascript/index.md

@@ -0,0 +1,5 @@
+---
+title: Generate Random Fractions with JavaScript
+localeTitle: توليد الكسور العشوائية مع جافا سكريبت
+---
+يحتوي JavaScript على دالة `Math.random()` التي تنشئ رقمًا عشريًا عشوائيًا.

guide/arabic/javascript/tutorials/generate-random-whole-numbers-with-javascript/index.md

@@ -0,0 +1,10 @@
+---
+title: Generate Random Whole Numbers with JavaScript
+localeTitle: توليد أرقام كاملة عشوائية مع جافا سكريبت
+---
+من الرائع أن نتمكن من إنشاء أرقام عشرية عشوائية ، لكن الأمر أكثر فائدة إذا كنا أكثر فائدة لإنشاء رقم صحيح عشوائي.
+
+لتحقيق هذا يمكننا مضاعفة الرقم العشوائي بعشرة واستخدام `Math.floor()` لتحويل الرقم العشري إلى رقم `Math.floor()`
+
+ `Math.floor(Math.random()*10) 
+`

guide/arabic/javascript/tutorials/get-current-url-in-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Get Current Url in JavaScript
+localeTitle: احصل على عنوان URL الحالي في جافا سكريبت
+---
+للحصول على **عنوان URL الحالي** :
+
+ `var url = window.location.href; 
+` 
+
+للحصول على **المسار الحالي** :
+
+ `var path = window.location.path; 
+` 
+
+يمكن العثور على مزيد من المعلومات حول كائن الموقع وخصائصه [هنا](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) .

guide/arabic/javascript/tutorials/give-your-javascript-slot-machine-some-stylish-images/index.md

@@ -0,0 +1,10 @@
+---
+title: Give Your JavaScript Slot Machine Some Stylish Images
+localeTitle: قم بتزويد جهاز Slot بجهاز JavaScript بعض الصور الأنيقة
+---
+لقد قمنا بالفعل بإعداد الصور لك في صف يسمى الصور. يمكننا استخدام فهارس مختلفة للاستيلاء على كل منها.
+
+في ما يلي كيفية تعيين الشريحة الأولى لعرض صورة مختلفة استنادًا إلى العدد الذي ينشئه رقمها العشوائي:
+
+ `$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">'); 
+`

guide/arabic/javascript/tutorials/how-to-create-a-countdown-timer/index.md

@@ -0,0 +1,60 @@
+---
+title: How to Create a Countdown Timer
+localeTitle: كيفية إنشاء مؤقت للعد التنازلي
+---
+## كيفية إنشاء مؤقت للعد التنازلي
+
+### خلق
+
+ابدأ ببناء وظيفة countdownTimer.
+
+ `function startCountdown(seconds){ 
+  var counter = seconds; 
+ 
+  var interval = setInterval(() => { 
+    console.log(counter); 
+    counter--; 
+ 
+ 
+    if(counter < 0 ){ 
+ 
+      // The code here will run when 
+      // the timer has reached zero. 
+ 
+      clearInterval(interval); 
+      console.log('Ding!'); 
+    }; 
+  }, 1000); 
+ }; 
+` 
+
+### إعدام
+
+الآن لبدء تشغيل جهاز ضبط الوقت ، نوفر `startCountdown()` مع قيمة عدد كوسيطة تمثل الثواني للعد التنازلي.
+
+ `  startCountdown(10); 
+  // Console Output // 
+  // 10 
+  // 9 
+  // 8 
+  // 7 
+  // 6 
+  // 5 
+  // 4 
+  // 3 
+  // 2 
+  // 1 
+  // 0 
+  // Ding! 
+` 
+
+### مثال حي
+
+[Codepen - العد التنازلي](https://codepen.io/rdev-rocks/pen/jLogxY?editors=0012)
+
+### المزيد من الموارد
+
+الطرق المستخدمة:
+
+*   [setInterval ()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+*   [clearInterval ()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)

guide/arabic/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md

@@ -0,0 +1,238 @@
+---
+title: How to Create a Dropdown Menu with CSS and JavaScript
+localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS و JavaScript
+---
+## كيفية إنشاء قائمة منسدلة باستخدام CSS و JavaScript
+
+ستتعلم في هذا البرنامج التعليمي كيفية إنشاء قائمة منسدلة بسيطة باستخدام الفانيلا Javascript و HTML و CSS. سنسير عبر شفرة HTML و CSS وجافا سكريبت ، ولكن نولي المزيد من الاهتمام للبرمجة ، نظرًا لأن هذا البرنامج التعليمي تابع لبرنامج JS. سنستخدم فقط JS و CSS بدون أي إطارات أو معالجات مسبقة. الاستثناء الوحيد (نوع) سيتم استيراد ملف [Font Awesome](https://fontawesome.com/) CSS لأننا سنستخدم أحد رموزه.
+
+يستهدف هذا المطورين الذين لديهم فهم متوسط ​​لـ HTML و CSS و JS. حاولت أن أجعله نظيفًا قدر الإمكان ، لكنني لن أركز كثيرًا على التفاصيل هنا. آمل أن تستمتع جميع.
+
+## لقطات
+
+هذه هي الطريقة التي تبدو بها نتيجة الشفرة:
+
+الشاشة الأولي:
+
+![](https://i.imgur.com/jrnu6mE.png)
+
+فتح القائمة المنسدلة:
+
+![](https://i.imgur.com/gszPtRa.png)
+
+المنسدلة مع اختيار الخيار:
+
+![](https://i.imgur.com/TKXxZGF.png)
+
+#### HTML:
+
+في هذا القسم ، سنناقش تنفيذ شفرة HTML للصفحة التجريبية. للبدء ، دعنا نرى الرمز `<head>`
+
+ `
+<!DOCTYPE html> 
+ <html lang="en"> 
+ <head> 
+    <meta charset="UTF-8"> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
+    <title>Dropdown Example</title> 
+ 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css"> 
+    <link rel="stylesheet" href="styles.css"> 
+ </head> 
+` 
+
+هذا هو الأساس الأساسي لنموذج HTML الرئيسي ، باستثناء علامات `link` تحمّل صحيفتي أنماط CSS التي سنستخدمها في هذا البرنامج التعليمي: الأنماط `styles.css` ، وملف `styles.css` ، حيث `styles.css` أنماط هذه الصفحة.
+
+ثم ، ما تبقى من ملف HTML ، الجسم:
+
+ `
+<body> 
+    <div class='dropdown'> 
+        <div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div> 
+ 
+        <div class='menu pointerCursor hide'> 
+            <div class='option' id='option1'>Option 1</div> 
+            <div class='option' id='option2'>Option 2</div> 
+            <div class='option' id='option3'>Option 3</div> 
+            <div class='option' id='option4'>Option 4</div> 
+        </div> 
+ 
+    </div> 
+    <span id='result'>The result is: </span> 
+    <script> 
+      ... 
+    </script> 
+ </body> 
+ </html> 
+` 
+
+يمكن تقسيم هذا القسم إلى 3 أجزاء رئيسية:
+
+*   و `.dropdown` شعبة، حيث سيتم تحديد هيكل العنصر المنسدلة ل.
+*   العنصر `#result` ، الذي سيحتوي على الخيار المحدد بواسطة المستخدم ، من عنصر القائمة المنسدلة.
+*   النص المكتوب في علامة `<script>` . يتم إخفاء تطبيقه هنا ، لأنه سيتم شرح تفاصيله في القسم الأخير من هذا البرنامج التعليمي.
+
+عنصر القائمة المنسدلة عبارة عن عنصر `div` يحتوي على `title` وعناصر `menu` . يحدد السابق فقط النص الذي سيتم عرضه على العنصر قبل تحديد أي خيار وسيحدد الأخير الخيارات التي سيتم اختيارها بواسطة العنصر.
+
+عنصر `result` موجود فقط ليعرض لك ما هو الخيار المحدد حاليًا.
+
+#### أنماط:
+
+أدناه يمكنك التحقق من رمز CSS الكامل للخروج. كما ترون فإنه يجعل استخدام `transition` CSS3 والبنية `transform` .
+
+يرجى الانتباه إلى تعريفات `.dropdown` . يتم استخدام هذه لتحديد تخطيط مكون الحاوية القائمة المنسدلة بالإضافة إلى عناصرها الداخلية ، مثل `.title` و `.option` الخاص به.
+
+ `body{ 
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
+ } 
+ 
+ .hide { 
+    max-height: 0 !important; 
+ } 
+ 
+ .dropdown{ 
+    border: 0.1em solid black; 
+    width: 10em; 
+    margin-bottom: 1em; 
+ } 
+ 
+ .dropdown .title{ 
+    margin: .3em .3em .3em .3em; 
+    width: 100%; 
+ } 
+ 
+ .dropdown .title .fa-angle-right{ 
+    float: right; 
+    margin-right: .7em; 
+    transition: transform .3s; 
+ } 
+ 
+ .dropdown .menu{ 
+    transition: max-height .5s ease-out; 
+    max-height: 20em; 
+    overflow: hidden; 
+ } 
+ 
+ .dropdown .menu .option{ 
+    margin: .3em .3em .3em .3em; 
+    margin-top: 0.3em; 
+ } 
+ 
+ .dropdown .menu .option:hover{ 
+    background: rgba(0,0,0,0.2); 
+ } 
+ 
+ .pointerCursor:hover{ 
+    cursor: pointer; 
+ } 
+ 
+ .rotate-90{ 
+    transform: rotate(90deg); 
+ } 
+` 
+
+#### جافا سكريبت:
+
+الآن سنرى كيف يتم تنفيذ جزء جافا سكريبت. سنبدأ أولاً بتعريفات الدالة ثم التعليمات البرمجية التي تستدعي هذه الوظائف لجعل إجراءات المنسدلة يحدث.
+
+في الأساس ، هناك 3 إجراءات تتم وفقًا لتفاعل المستخدم ، نظرًا لأنه يتم إضافة المستمعين إلى عناصر DOM:
+
+1.  النقر على عنصر القائمة المنسدلة
+2.  اختيار واحد من خيارات القائمة المنسدلة
+3.  تغيير الخيار المحدد حاليًا
+
+أود أن أوضح أننا نستخدم وظائف الأسهم ( `() => {}` ) والكلمة الأساسية `const` ، وهي ميزات ES6. ربما تكون جيدًا إذا كنت تستخدم إصدارًا حديثًا من المتصفح ، ولكن ضع ذلك في اعتبارك.
+
+#### 1\. النقر على عنصر القائمة المنسدلة
+
+ `function toggleClass(elem,className){ 
+    if (elem.className.indexOf(className) !== -1){ 
+        elem.className = elem.className.replace(className,''); 
+    } 
+    else{ 
+        elem.className = elem.className.replace(/\s+/g,' ') +   ' ' + className; 
+    } 
+ 
+    return elem; 
+ } 
+ 
+ function toggleDisplay(elem){ 
+    const curDisplayStyle = elem.style.display; 
+ 
+    if (curDisplayStyle === 'none' || curDisplayStyle === ''){ 
+        elem.style.display = 'block'; 
+    } 
+    else{ 
+        elem.style.display = 'none'; 
+    } 
+ } 
+ 
+ 
+ function toggleMenuDisplay(e){ 
+    const dropdown = e.currentTarget.parentNode; 
+    const menu = dropdown.querySelector('.menu'); 
+    const icon = dropdown.querySelector('.fa-angle-right'); 
+ 
+    toggleClass(menu,'hide'); 
+    toggleClass(icon,'rotate-90'); 
+ } 
+` 
+
+عند النقر فوق عنصر القائمة المنسدلة ، يتم فتحه (إذا كان مغلقًا) أو إغلاق (في حالة فتحه). يحدث ذلك عن طريق ربط `toggleMenuDisplay` الإصغاء على عنصر القائمة المنسدلة. هذه الوظيفة تبديل عرض عنصر `menu` به عن طريق استخدام `toggleDisplay` و `toggleClass` .
+
+#### 2\. اختيار واحد من خيارات القائمة المنسدلة
+
+ `function handleOptionSelected(e){ 
+    toggleClass(e.target.parentNode, 'hide'); 
+ 
+    const id = e.target.id; 
+    const newValue = e.target.textContent + ' '; 
+    const titleElem = document.querySelector('.dropdown .title'); 
+    const icon = document.querySelector('.dropdown .title .fa'); 
+ 
+ 
+    titleElem.textContent = newValue; 
+    titleElem.appendChild(icon); 
+ 
+    //trigger custom event 
+    document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); 
+    //setTimeout is used so transition is properly shown 
+    setTimeout(() => toggleClass(icon,'rotate-90',0)); 
+ } 
+` 
+
+#### 3\. تغيير الخيار المحدد حاليا
+
+ `function handleTitleChange(e){ 
+    const result = document.getElementById('result'); 
+ 
+    result.innerHTML = 'The result is: ' + e.target.textContent; 
+ } 
+` 
+
+يرتبط `handleTitleChange` الدالة `handleTitleChange` بحدث `change` المخصص على عنصر `.title` ، لتغيير محتوى عنصر `#result` كلما تغير عنصر العنوان. يتم إجراء هذا الحدث على القسم السابق.
+
+#### كود الرئيسي
+
+ `//get elements 
+ const dropdownTitle = document.querySelector('.dropdown .title'); 
+ const dropdownOptions = document.querySelectorAll('.dropdown .option'); 
+ 
+ //bind listeners to these elements 
+ dropdownTitle.addEventListener('click', toggleMenuDisplay); 
+ dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); 
+ document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange); 
+` 
+
+في القسم الرئيسي ، هناك بعض الكودات البسيطة للحصول على عنوان القائمة المنسدلة وعناصر الخيارات لربطها بالأحداث التي تمت مناقشتها في القسم الأخير.
+
+## عرض
+
+يمكن العثور على الرمز الكامل لهذا التطبيق والتجريبي [هنا](https://codepen.io/GCrispino/pen/EEXmYd) .
+
+## معلومات اكثر
+
+*   [مقدمة ES6](https://guide.freecodecamp.org/javascript/es6)
+*   [وظائف السهم](https://guide.freecodecamp.org/javascript/es6/arrow_functions/)
+*   [واسمحوا Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/)

guide/arabic/javascript/tutorials/how-to-create-a-lightbox/index.md

@@ -0,0 +1,565 @@
+---
+title: How to Create a Lightbox
+localeTitle: كيفية إنشاء صندوق الضوء
+---
+## كيفية إنشاء صندوق الضوء
+
+### المقدمة
+
+والصندوق المبسط هو مزيج من عنصرين ، أحدهما [مشروط](https://en.wikipedia.org/wiki/Modal_window) وعرض شرائح. هنا سوف تقوم ببناء صندوق خفيف بسيط باستخدام `HTML` و `CSS` و `JavaScript` .
+
+سيتم تضمين صندوق الضوء في الوسائط ، التي سيتم تشغيلها بواسطة بعض `JavaScript` ، من [معالجات الأحداث](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) في ترميز `HTML` . ستقوم ببناء الأنماط التي ستوفر حالة مع `CSS` والسلوك مع `JavaScript` . ستجد أيضًا قائمة مرجعية بالطرق التي تستخدمها وغيرها من وحدات tid المفيدة ذات الصلة بهذا البرنامج التعليمي ، في الجزء السفلي.
+
+#### صورنا
+
+يتم توفير الصور التي [سنستخدمها](https://www.pexels.com/) بواسطة [Pexels](https://www.pexels.com/) ، معرض صور المخزون المجاني الذي يسمح لك بتوفير صور عالية الجودة لمشاريعهم بسرعة ، ومجانًا ، وعادة بدون الحاجة إلى استخدامات.
+
+#### فقط أرني الكود!
+
+يمكن العثور على مثال حي [هنا - CodePen / Lightbox](https://codepen.io/rdev-rocks/pen/KXNzvo) ومسودة كاملة للرمز بالقرب من القاع.
+
+### الخطوة 1. الترميز
+
+يوفر الترميز أو `HTML` ، بنية العلبة الخفيفة.
+
+ `
+<!-- Here is your access point for your user, a preview of the images you wish to display. 
+     You use the onclick="" event handler to execute the methods you will define in the 
+     JavaScript near the bottom --> 
+ 
+ <div class="row"> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." /> 
+  </div> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview" alt="Toy car exploring offroad." /> 
+  </div> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview" alt="Toy car in the city." /> 
+  </div> 
+ </div> 
+ 
+ <!-- This is your lightbox, it is contained in a modal. Here you provide all the images, 
+     controls, and another set of preview images as the dots. Dots show your user which 
+     image is currently active. Note that you use entities (eg &times;), more info on 
+     them at the bottom. --> 
+ 
+ <div id="Lightbox" class="modal"> 
+  <span class="close pointer" onclick="closeLightbox()">&times;</span> 
+  <div class="modal-content"> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." /> 
+    </div> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." /> 
+    </div> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." /> 
+    </div> 
+ 
+    <a class="previous" onclick="changeSlide(-1)">&#10094;</a> 
+    <a class="next" onclick="changeSlide(1)">&#10095;</a> 
+ 
+    <div class="dots"> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="Toy car on the road" /> 
+      </div> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="Toy car exploring offroad." /> 
+      </div> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="Toy car in the city." /> 
+      </div> 
+    </div> 
+  </div> 
+ </div> 
+` 
+
+### الخطوة 2. نمط مع CSS
+
+يوفر لك `CSS` حالات مختلفة لصندوق الضوء الخاص بك. أشياء مثل الرؤية ، وتحديد المواقع ، وتأثيرات التمرير.
+
+يجب أن تبدو ورقة الأنماط الخاصة بك كما يلي:
+
+ `/* Here you provide a best practice's "reset", read more about it at the bottom! :) */ 
+ 
+ html { 
+  box-sizing: border-box; 
+ } 
+ 
+ *, *:before, *:after { 
+  box-sizing: inherit; 
+ } 
+ 
+ body { 
+  margin: 0; 
+ } 
+ 
+ /* You define the style of our previews here, you are using flex to display the images 
+   "responsively". */ 
+ 
+ .preview { 
+  width: 100%; 
+ } 
+ 
+ .row { 
+  display: flex; 
+  flex-direction: row; 
+  justify-content: space-between; 
+ } 
+ 
+ .row > .col { 
+  padding: 0 8px; 
+ } 
+ 
+ .col { 
+  float: left; 
+  width: 25%; 
+ } 
+ 
+ /* Now you want to define what the lightbox will look like. Note that you have the display 
+   as none. You don't want it to show until the user clicks on one of the previews. 
+   You will change this display property with JavaScript below. */ 
+ 
+ .modal { 
+  display: none; 
+  position: fixed; 
+  z-index: 1; 
+  padding: 10px 62px 0px 62px; 
+  left: 0; 
+  top: 0; 
+  width: 100%; 
+  height: 100%; 
+  overflow: auto; 
+  background-color: black; 
+ } 
+ 
+ .modal-content { 
+  position: relative; 
+  display: flex; 
+  flex-direction: column; 
+  justify-content: center; 
+  margin: auto; 
+  padding: 0 0 0 0; 
+  width: 80%; 
+  max-width: 1200px; 
+ } 
+ 
+ /* Same with your slides, you set the display to none, because you want to choose which 
+   one is shown at a time. */ 
+ 
+ .slide { 
+  display: none; 
+ } 
+ 
+ .image-slide { 
+  width: 100%; 
+ } 
+ 
+ .modal-preview { 
+  width: 100%; 
+ } 
+ 
+ .dots { 
+  display: flex; 
+  flex-direction: row; 
+  justify-content: space-between; 
+ } 
+ 
+ /* You want the previews a little transparent to show that they are "inactive". 
+   You then add an .active or :hover class to animate the selections for your user when 
+   they interact with your controls and clickable content. 
+ */ 
+ 
+ img.preview, img.modal-preview { 
+  opacity: 0.6; 
+ } 
+ 
+ img.active, 
+ .preview:hover, 
+ .modal-preview:hover { 
+  opacity: 1; 
+ } 
+ 
+ img.hover-shadow { 
+  transition: 0.3s; 
+ } 
+ 
+ .hover-shadow:hover { 
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
+ } 
+ 
+ .close { 
+  color: white; 
+  position: absolute; 
+  top: 10px; 
+  right: 25px; 
+  font-size: 35px; 
+  font-weight: bold; 
+ } 
+ 
+ .close:hover, 
+ .close:focus { 
+  color: #999; 
+  text-decoration: none; 
+  cursor: pointer; 
+ } 
+ 
+ .previous, 
+ .next { 
+  cursor: pointer; 
+  position: absolute; 
+  top: 50%; 
+  width: auto; 
+  padding: 16px; 
+  margin-top: -50px; 
+  color: white; 
+  font-weight: bold; 
+  font-size: 20px; 
+  transition: 0.6s ease; 
+  border-radius: 0 3px 3px 0; 
+  user-select: none; 
+  -webkit-user-select: none; 
+ } 
+ 
+ .next { 
+  right: 0; 
+  border-radius: 3px 0 0 3px; 
+ } 
+ 
+ .previous:hover, 
+ .next:hover { 
+  background-color: rgba(0, 0, 0, 0.8); 
+ } 
+` 
+
+### الخطوة 3. جافا سكريبت
+
+الآن للعمل! يجب أن تبدو جافا سكريبت مثل هذا:
+
+ `// Initialize here and run showSlide() to give your lightbox a default state. 
+ 
+ let slideIndex = 1; 
+ showSlide(slideIndex); 
+ 
+ // You are providing the functionality for your clickable content, which is 
+ // your previews, dots, controls and the close button. 
+ 
+ function openLightbox() { 
+  document.getElementById('Lightbox').style.display = 'block'; 
+ } 
+ 
+ function closeLightbox() { 
+  document.getElementById('Lightbox').style.display = 'none'; 
+ }; 
+ 
+ // Note that you are assigning new values here to our slidIndex. 
+ 
+ function changeSlide(n) { 
+  showSlide(slideIndex += n); 
+ }; 
+ 
+ function toSlide(n) { 
+  showSlide(slideIndex = n); 
+ }; 
+ 
+ // This is your logic for the light box. It will decide which slide to show 
+ // and which dot is active. 
+ 
+ function showSlide(n) { 
+  const slides = document.getElementsByClassName('slide'); 
+  let modalPreviews = document.getElementsByClassName('modal-preview'); 
+ 
+  if (n > slides.length) { 
+    slideIndex = 1; 
+  }; 
+ 
+  if (n < 1) { 
+    slideIndex = slides.length; 
+  }; 
+ 
+  for (let i = 0; i < slides.length; i++) { 
+    slides[i].style.display = "none"; 
+  }; 
+ 
+  for (let i = 0; i < modalPreviews.length; i++) { 
+    modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); 
+  }; 
+ 
+  slides[slideIndex - 1].style.display = 'block'; 
+  modalPreviews[slideIndex - 1].className += ' active'; 
+ }; 
+` 
+
+وهذا كل شيء! الآن ضع كل الكود معا. يجب أن يكون لديك الآن lightbox وظيفية.
+
+### كل المدونة
+
+ `
+<body> 
+  <style> 
+    html { 
+      box-sizing: border-box; 
+    } 
+ 
+    *, *:before, *:after { 
+      box-sizing: inherit; 
+    } 
+ 
+    body { 
+      margin: 0; 
+    } 
+ 
+    .preview { 
+      width: 100%; 
+    } 
+ 
+    .row { 
+      display: flex; 
+      flex-direction: row; 
+      justify-content: space-between; 
+    } 
+ 
+    .row > .col { 
+      padding: 0 8px; 
+    } 
+ 
+    .col { 
+      float: left; 
+      width: 25%; 
+    } 
+ 
+    .modal { 
+      display: none; 
+      position: fixed; 
+      z-index: 1; 
+      padding: 10px 62px 0px 62px; 
+      left: 0; 
+      top: 0; 
+      width: 100%; 
+      height: 100%; 
+      overflow: auto; 
+      background-color: black; 
+    } 
+ 
+    .modal-content { 
+      position: relative; 
+      display: flex; 
+      flex-direction: column; 
+      justify-content: center; 
+      margin: auto; 
+      padding: 0 0 0 0; 
+      width: 80%; 
+      max-width: 1200px; 
+    } 
+ 
+    .slide { 
+      display: none; 
+    } 
+ 
+    .image-slide { 
+        width: 100%; 
+    } 
+ 
+    .modal-preview { 
+        width: 100%; 
+    } 
+ 
+    .dots { 
+        display: flex; 
+        flex-direction: row; 
+        justify-content: space-between; 
+    } 
+ 
+    img.preview, img.modal-preview { 
+      opacity: 0.6; 
+    } 
+ 
+    img.active, 
+    .preview:hover, 
+    .modal-preview:hover { 
+      opacity: 1; 
+    } 
+ 
+    img.hover-shadow { 
+      transition: 0.3s; 
+    } 
+ 
+    .hover-shadow:hover { 
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
+    } 
+ 
+    .close { 
+      color: white; 
+      position: absolute; 
+      top: 10px; 
+      right: 25px; 
+      font-size: 35px; 
+      font-weight: bold; 
+    } 
+ 
+    .close:hover, 
+    .close:focus { 
+      color: #999; 
+      text-decoration: none; 
+      cursor: pointer; 
+    } 
+ 
+    .previous, 
+    .next { 
+      cursor: pointer; 
+      position: absolute; 
+      top: 50%; 
+      width: auto; 
+      padding: 16px; 
+      margin-top: -50px; 
+      color: white; 
+      font-weight: bold; 
+      font-size: 20px; 
+      transition: 0.6s ease; 
+      border-radius: 0 3px 3px 0; 
+      user-select: none; 
+      -webkit-user-select: none; 
+    } 
+ 
+    .next { 
+      right: 0; 
+      border-radius: 3px 0 0 3px; 
+    } 
+ 
+    .previous:hover, 
+    .next:hover { 
+      background-color: rgba(0, 0, 0, 0.8); 
+    } 
+  </style> 
+  <div class="row"> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." /> 
+    </div> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview" alt="Toy car exploring offroad." /> 
+    </div> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview" alt="Toy car in the city" /> 
+    </div> 
+  </div> 
+ 
+  <div id="Lightbox" class="modal"> 
+ 
+    <span class="close pointer" onclick="closeLightbox()">&times;</span> 
+    <div class="modal-content"> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." /> 
+      </div> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." /> 
+      </div> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." /> 
+      </div> 
+ 
+      <a class="previous" onclick="changeSlide(-1)">&#10094;</a> 
+      <a class="next" onclick="changeSlide(1)">&#10095;</a> 
+ 
+      <div class="dots"> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="Toy car on the road." /> 
+        </div> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="Toy car exploring offroad." /> 
+        </div> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="Toy car in the city" /> 
+        </div> 
+      </div> 
+    </div> 
+  </div> 
+ 
+  <script> 
+    let slideIndex = 1; 
+    showSlide(slideIndex); 
+ 
+    function openLightbox() { 
+      document.getElementById('Lightbox').style.display = 'block'; 
+    }; 
+ 
+    function closeLightbox() { 
+      document.getElementById('Lightbox').style.display = 'none'; 
+    }; 
+ 
+    function changeSlide(n) { 
+      showSlide(slideIndex += n); 
+    }; 
+ 
+    function toSlide(n) { 
+      showSlide(slideIndex = n); 
+    }; 
+ 
+    function showSlide(n) { 
+      const slides = document.getElementsByClassName('slide'); 
+      let modalPreviews = document.getElementsByClassName('modal-preview'); 
+ 
+      if (n > slides.length) { 
+        slideIndex = 1; 
+      }; 
+ 
+      if (n < 1) { 
+        slideIndex = slides.length; 
+      }; 
+ 
+      for (let i = 0; i < slides.length; i++) { 
+        slides[i].style.display = "none"; 
+      }; 
+ 
+      for (let i = 0; i < modalPreviews.length; i++) { 
+        modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); 
+      }; 
+ 
+      slides[slideIndex - 1].style.display = 'block'; 
+      modalPreviews[slideIndex - 1].className += ' active'; 
+    }; 
+  </script> 
+ </body> 
+` 
+
+## \### معلومات اكثر:
+
+#### HTML
+
+[مشروط](https://en.wikipedia.org/wiki/Modal_window) - نافذة منبثقة
+
+[معالجات الأحداث](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) - خصائص HTML التي تستمع لأحداث المستخدم.
+
+[Entity](https://developer.mozilla.org/en-US/docs/Glossary/Entity) - سلسلة تمثل عارضًا محجوزًا في HTML.
+
+#### CSS
+
+[تحجيم المربعات:](https://css-tricks.com/box-sizing/) - خاصية CSS3 تتحكم في طريقة عرض المستعرض للمحتوى بناءً على الطول والعرض.
+
+[Flex-box](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - تقنية جديدة تساعد في تحديد موقع محتوى HTML في mannor سريع الاستجابة.
+
+[: hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) - A pseudo-selector الذي يتم تشغيله عندما يمرر المستخدم عنصرًا عندما يتم تعيين هذه الفئة إليه.
+
+#### جافا سكريبت
+
+[السماح](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) لمتغير نطاق الكتلة.
+
+[const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) ثابت نطاق الكتلة.
+
+[getElementById ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) - أسلوب مستند يقوم بإرجاع مرجع إلى عنصر HTML.
+
+[getElementsByClassName ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) - أسلوب مستند يقوم بإرجاع مصفوفة من المراجع إلى html التي تحتوي على فئات متطابقة.
+
+[\+ =](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators) - عامل تخصيص والذي سيضيف أرقامًا أو يسلسل سلاسل.
+
+#### مصادر:
+
+[مثال حي](https://codepen.io/rdev-rocks/pen/KXNzvo?editors=1111) - CodePen الذي يقدم التعليمة البرمجية المذكورة أعلاه.
+
+[صندوق Flex-Interactive](https://codepen.io/enxaneta/full/adLPwv) - برنامج CodePen تفاعلي يوضح سلوك صندوق المرونة.
+
+[Pexels](https://www.pexels.com/) - معرض للصور المجانية للأوراق المالية.
+
+[MDN](https://developer.mozilla.org/en-US/) - مكان رائع للحصول على معلومات حول عناصر الويب.
+
+[W3School - Lightbox](https://www.w3schools.com/howto/howto_js_lightbox.asp) - استلهم هذا الرمز من هنا. شكرا W3Schools!

guide/arabic/javascript/tutorials/how-to-create-a-slideshow/index.md

@@ -0,0 +1,60 @@
+---
+title: How to Create a Slideshow
+localeTitle: كيف تصنع عرض الشرائح
+---
+## كيف تصنع عرض الشرائح
+
+عرض الشرائح على الويب عبارة عن سلسلة من الصور أو النصوص التي تظهر في عنصر واحد من هذا التسلسل في فترة زمنية.
+
+بالنسبة إلى هذا البرنامج التعليمي ، يمكنك إنشاء عرض شرائح باتباع الخطوات التالية:
+
+### اكتب ترميز.
+
+\`\` \`أتش تي أم أل   عرض الشرائح  
+
+ `### Write styles to hide slides and show only one slide. 
+ 
+ For hide the slides you have to give them a default style and only show one slide if this is active or you want to show it. 
+` 
+
+المغلق \[data-component = "slideshow"\] .slide { عرض لا شيء؛ }
+
+\[data-component = "slideshow"\] .slide.active { العرض محجوب؛ }
+
+ `### Change the slides in a time interval. 
+ 
+ The first step to change the slides to show, is select the slide wrapper(s) and then its slides. 
+ 
+ When you selected the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show, and then just repeat the process in a time interval. 
+ 
+ Keep it in mind when you remove a active class to a slide, you are hidden it because the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style ``display:none to display:block`` , so the slide will show to the users. 
+` 
+
+شبيبة var slideshows = document.querySelectorAll ('\[data-component = "slideshow"\] ")؛
+
+// تطبيق على جميع عروض الشرائح التي تحددها مع كتابة العلامات slideshows.forEach (initSlideShow)؛
+
+وظيفة initSlideShow (عرض الشرائح) {
+
+ ``var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides 
+ 
+ var index = 0, time = 5000; 
+ slides[index].classList.add('active'); 
+ 
+ setInterval( () => { 
+  slides[index].classList.remove('active'); 
+ 
+  //Go over each slide incrementing the index 
+  index++; 
+ 
+  // If you go over all slides, restart the index to show the first slide and start again 
+  if (index === slides.length) index = 0; 
+ 
+  slides[index].classList.add('active'); 
+ 
+ }, time); 
+`` 
+
+} \`\` \`
+
+#### [مثال Codepen بعد هذا البرنامج التعليمي](https://codepen.io/AndresUris/pen/rGXpvE)

guide/arabic/javascript/tutorials/how-to-create-a-top-navigation-bar/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create a Top Navigation Bar
+localeTitle: كيفية إنشاء شريط التنقل العلوي
+---
+## كيفية إنشاء شريط التنقل العلوي
+
+هذا هو كعب. [ساعد مجتمعنا على توسيعه](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-a-top-navigation-bar/index.md) .
+
+[سيساعدك دليل النمط السريع هذا على ضمان قبول طلب السحب](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### معلومات اكثر:

guide/arabic/javascript/tutorials/how-to-create-an-accordion/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create an Accordion
+localeTitle: كيف تصنع الأكورديون
+---
+## كيف تصنع الأكورديون
+
+هذا هو كعب. [ساعد مجتمعنا على توسيعه](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-an-accordion/index.md) .
+
+[سيساعدك دليل النمط السريع هذا على ضمان قبول طلب السحب](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### معلومات اكثر:

guide/arabic/javascript/tutorials/how-to-create-popups/index.md

@@ -0,0 +1,46 @@
+---
+title: How to Create Popups
+localeTitle: كيفية إنشاء النوافذ المنبثقة
+---
+## كيفية إنشاء النوافذ المنبثقة
+
+النافذة المنبثقة هي نافذة تنبثق (تظهر) عندما تحدد خيارًا باستخدام ماوس أو تضغط على مفتاح وظيفة خاصة.
+
+في هذا المثال ، ستظهر النافذة المنبثقة عندما تضغط على زر وستبقى على الشاشة حتى تضغط على خيار X.
+
+سنقوم بإنشاء النافذة المنبثقة باستخدام `HTML` و `CSS` و `JavaScript`
+
+### الخطوة 1 HTML
+
+يوفر HTML بنية الإطار المنبثق
+
+\`\` \`أتش تي أم أل
+
+افتح The PopUp
+
+منبثق مع JavaScript
+
+X
+
+ `### Step 2 CSS 
+ We will choose our own style for the popup window. Notice: the popup div should be hidden at first, so in the style I will select display: none; 
+` 
+
+المغلق .popup _main_ div { الموقع: ثابت العرض: 800 بكسل ؛ الارتفاع: 400 بكسل ؛ border: 2px solid black؛ border-radius: 5px؛ لون الخلفية: #fff؛ اليسار: 50 ٪. الهامش الأيسر: -400 بكسل ؛ أعلى: 50 ٪ ؛ الهامش العلوي: - 250 بكسل ؛ عرض لا شيء؛
+
+} .close _popup { الموقع: مطلقة العرض: 25 بكسل الارتفاع: 25 بكسل border-radius: 25px؛ border: 2px solid black؛ محاذاة النص: مركز؛ right: 5px؛ العلوي: 5 بكسل ؛ المؤشر: المؤشر. } .close_ popup p { الهامش العلوي: 5 بكسل ؛ الخط الوزن: 400 ؛
+
+} .نص{ محاذاة النص: مركز؛ حجم الخط: 30 بكسل الخط الوزن: 400 ؛ أعلى الهامش: 22٪ ؛ } #Btn { الموقع: مطلقة اليسار: 50 ٪. أفضل 20٪؛
+
+}
+
+ `### Step 3 JavaScript 
+` 
+
+شبيبة // بادئ ذي بدء ، سوف أقوم بتهيئة متغيراتي // اختر العناصر التي سنستخدمها من DOM // أقوم بإضافة حدث en في الزر الذي سيؤدي إلى تشغيل وظيفة من شأنها تغيير نمط العرض المنبثق من لا شيء إلى حظر
+
+const Btn = document.getElementById ("Btn") const PopupDiv = document.querySelector (". divup _main_ div") const ClosePopup = document.querySelector (". close\_popup") Btn.addEventListener ( "فوق"، وظيفة () { PopupDiv.style.display = "كتلة" }) ClosePopup.addEventListener ( "فوق"، وظيفة () { PopupDiv.style.display = "لا شيء" })
+
+\`\` \`
+
+كود العيش في: [Codepen.io](https://codepen.io/voula12/pen/qyyNeK)

guide/arabic/javascript/tutorials/how-to-create-tabs/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create Tabs
+localeTitle: كيفية إنشاء علامات التبويب
+---
+## كيفية إنشاء علامات التبويب
+
+هذا هو كعب. [ساعد مجتمعنا على توسيعه](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-tabs/index.md) .
+
+[سيساعدك دليل النمط السريع هذا على ضمان قبول طلب السحب](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### معلومات اكثر:

guide/arabic/javascript/tutorials/how-to-install-node-js-and-npm-on-windows/index.md

@@ -0,0 +1,32 @@
+---
+title: How to Install Node Js and Npm on Windows
+localeTitle: كيفية تثبيت عقدة شبيبة و NPM على ويندوز
+---
+## كيفية تثبيت عقدة شبيبة و NPM على ويندوز
+
+تثبيت Node.js و Npm على Windows بسيط جدًا.
+
+أولاً ، قم بتنزيل مثبت Windows من [موقع ويب Node.js.](https://nodejs.org/) سيكون لديك الاختيار بين **LTS** (دعم المدى الطويل) أو الإصدار **الحالي** .
+
+*   يتلقى الإصدار **الحالي** أحدث الميزات والتحديثات بسرعة أكبر
+*   تتميز ميزة **LTS** foregos إصدار التغييرات لتحسين الاستقرار ، ولكنها تتلقى تصحيحات مثل إصلاحات الأخطاء والتحديثات الأمنية
+
+بمجرد اختيار نسخة تلبي احتياجاتك ، قم بتشغيل المثبت. اتبع المطالبات لتحديد مسار التثبيت **وتأكد من** تضمين ميزة **مدير حزم npm** مع **وقت التشغيل Node.js.** يجب أن يكون هذا هو التكوين الافتراضي.
+
+أعد تشغيل الكمبيوتر بعد اكتمال التثبيت.
+
+إذا قمت بتثبيت تحت التكوين الافتراضي ، يجب الآن إضافة Node.js إلى PATH الخاص بك. قم بتشغيل موجه الأوامر أو PowerHell وقم بإدخال ما يلي لاختباره:
+
+ `> node -v 
+` 
+
+يجب أن تستجيب وحدة التحكم مع سلسلة إصدار. كرر العملية لـ Npm:
+
+ `> npm -v 
+` 
+
+إذا كان كلا الأمرين يعملان ، كان التثبيت ناجحًا ، ويمكنك البدء في استخدام Node.js!
+
+#### معلومات اكثر:
+
+لمزيد من المعلومات والأدلة ، يرجى زيارة [صفحة مستندات Node.js.](https://nodejs.org/en/docs/)

guide/arabic/javascript/tutorials/increment-a-number-with-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Increment a Number with JavaScript
+localeTitle: زيادة رقم باستخدام JavaScript
+---
+يمكنك بسهولة زيادة أو إضافة `1` إلى متغير مع عامل التشغيل `++` .
+
+ `i++; 
+` 
+
+هو ما يعادل
+
+ `i = i + 1; 
+` 
+
+**ملاحظة** يصبح السطر بالكامل `i++;` ، مما يلغي الحاجة إلى علامة المساواة.

guide/arabic/javascript/tutorials/index.md

@@ -0,0 +1,11 @@
+---
+title: Tutorials
+localeTitle: دروس
+---
+## دروس
+
+هذا هو كعب. [ساعد مجتمعنا على توسيعه](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/index.md) .
+
+[سيساعدك دليل النمط السريع هذا على ضمان قبول طلب السحب](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### معلومات اكثر:

guide/arabic/javascript/tutorials/invert-regular-expression-matches-with-javascript/index.md

@@ -0,0 +1,7 @@
+---
+title: Invert Regular Expression Matches with JavaScript
+localeTitle: عكس التعبير العادي مباريات مع جافا سكريبت
+---
+استخدم `/\S/gi` ؛ لمطابقة كل شيء ليس مساحة في السلسلة.
+
+يمكنك عكس أي تطابق باستخدام الإصدار الكبير من selector `\s` مقابل `\S` على سبيل المثال.

guide/arabic/javascript/tutorials/iterate-with-javascript-for-loops/index.md

@@ -0,0 +1,26 @@
+---
+title: Iterate with JavaScript for Loops
+localeTitle: تكرّر مع JavaScript لـ Loops
+---
+ويسمى النوع الأكثر شيوعا من جافا سكريبت حلقة ل `for loop` لأنه يعمل `for` عدد معين من المرات.
+
+ `var ourArray = []; 
+ for(var i = 0; i < 5; i++) { 
+  ourArray.push(i); 
+ } 
+` 
+
+سيحتوي ourArray الآن \[0،1،2،3،4\]
+
+## المزيد عن الحلقات
+
+ `for(var i = 0; i < 5; i++) {  // There are 3 parts here 
+` 
+
+هناك ثلاثة أجزاء للحلقة. يتم فصلها بواسطة فواصل منقوطة.
+
+1.  التهيئة: `var i = 0;` - يعمل هذا الرمز مرة واحدة فقط في بداية الحلقة. عادة ما يتم استخدامه لتعريف متغير العداد (مع `var` ) وتهيئة العداد (في هذه الحالة يتم تعيينه إلى 0).
+    
+2.  الشرط: `i < 5;` - سيتم تشغيل الحلقة طالما أن هذا `true` . وهذا يعني أنه بمجرد `i` يساوي 5، وحلقة تتوقف حلقات. لاحظ أن داخل حلقة لن ترى `i` الى 5 لأنها سوف تتوقف قبل ذلك الحين. إذا كان هذا الشرط `false` البداية ، فلن يتم تنفيذ الحلقة أبدًا.
+    
+3.  الزيادة: `i++` - يتم تشغيل هذا الرمز في نهاية كل حلقة. عادة ما تكون الزيادة البسيطة ( `++` operator) ، ولكن يمكن أن يكون أي تحول رياضي. يتم استخدامه لنقل العداد ( `i` ) إلى الأمام (أو إلى الوراء ، أو أيا كان.

guide/arabic/javascript/tutorials/iterate-with-javascript-while-loops/index.md

@@ -0,0 +1,13 @@
+---
+title: Iterate with JavaScript While Loops
+localeTitle: تكررت مع جافا سكريبت في حين الحلقات
+---
+هناك نوع آخر من حلقات جافا سكريبت يسمى `while loop` تشغيلها `while` يكون هناك شيء حقيقي ، ويتوقف بمجرد أن يصبح شيء ما غير صحيح.
+
+ `var ourArray = []; 
+ var i = 0; 
+ while(i < 5) { 
+  ourArray.push(i); 
+  i++; 
+ } 
+`

guide/arabic/javascript/tutorials/javascript-for-loops-explained/index.md

@@ -0,0 +1,43 @@
+---
+title: JavaScript for Loops Explained
+localeTitle: جافا سكريبت لحلقات شرحها
+---
+يقوم البيان for بإنشاء حلقة تتكون من ثلاثة تعبيرات اختيارية ، محاطة بأقواس و مفصولة بفواصل منقوطة ، متبوعة ببيان أو مجموعة من العبارات المنفذة في الحلقة.
+
+يحتوي الحلقة for على الصيغة التالية:
+
+ `for (<a href='http://forum.freecodecamp.com/t/javascript-while-loop/14668' target='_blank' rel='nofollow'>initialization]; [condition]; [final-expression]) { 
+    code block to be executed 
+ } 
+` 
+
+يتم تنفيذ \[التهيئة\] قبل بدء الحلقة (كتلة الكود).
+
+يحدد \[الشرط\] شرط تشغيل الحلقة (كتلة التعليمات البرمجية).
+
+يتم تنفيذ \[final-expression\] في كل مرة بعد تنفيذ الحلقة (كتلة الكود).
+
+## مثال في JavaScript:
+
+ `var ourArray = []; 
+ for (var i = 0; i < 5; i++) { 
+    ourArray.push(i); 
+ } 
+` 
+
+من المثال أعلاه ، يمكنك قراءة:
+
+يعيّن \[initialization\] متغيرًا قبل بدء الحلقة (var i = 0).
+
+يحدد \[الشرط\] الشرط لتشغيل العروة (يجب أن أكون أقل من 5).
+
+\[تعبير نهائي\] يزيد قيمة (i ++) في كل مرة يتم فيها تنفيذ كتلة التعليمات البرمجية في الحلقة.
+
+## لماذا نحتاج "للحلقات"؟
+
+للحلقات يتم استخدامها للتكرار خلال كتلة من الكود عددًا معروفًا من المرات. في بعض الأحيان يكون الكمبيوتر هو الذي يعرف عدد المرات ، وليس أنت ، لكنه لا يزال معروفًا.
+
+الخروج بعض المقالات الأخرى لدينا على حلقات:
+
+*   \[حائط اللوب
+*   [لفي حلقة](http://forum.freecodecamp.com/t/javascript-for-in-loop/14665)

guide/arabic/javascript/tutorials/page-redirects-using-javascript/index.md

@@ -0,0 +1,55 @@
+---
+title: Page Redirects Using JavaScript
+localeTitle: صفحة يعيد التوجيه باستخدام جافا سكريبت
+---
+## صفحة يعيد التوجيه باستخدام جافا سكريبت
+
+إذا كنت تحاول إعادة توجيه مستخدم إلى صفحة أخرى ، فيمكنك بسهولة استخدام JavaScript لإنجاز هذه المهمة. من المهم ملاحظة ما يلي:
+
+حتى إذا كانت لديك مكتبة jQuery محملة في نصوصك البرمجية ، فقد ترغب في استخدام حل جافا سكريبت الخالص لعمليات إعادة توجيه الصفحات لأغراض الكفاءة.
+
+هناك عدة طرق مختلفة للقيام بذلك ، ولكن أبسط طريقة هي استخدام الكائن `window.location` لإرسال المستخدم إلى الصفحة التي ترغب في إعادة توجيههم إليها. يمكن أن يستخدم كائن `window.location` أي قيمة URL صالحة مثل `http://www.yoururl.com` ، `somepage.html` ، إلخ.
+
+ `window.location = 'http://www.yoururl.com'; 
+ // window.location = 'somepage.html'; 
+ // etc. 
+` 
+
+### حالة خاصة إعادة توجيه
+
+يمكنك استخدام طريقة خاصة لإعادة التوجيه ، بشكل افتراضي ، تعلق على كائن `window.location` في كل المستعرض الرئيسي المسمى `replace()` . تقبل هذه الطريقة نفس قيم عنوان URL الصالحة بمجرد استخدام `window.location` .
+
+فيما يلي مثال على استخدام هذه الطريقة (ستظل تعمل بنفس طريقة استخدام `window.location` في المتصفحات الأخرى):
+
+ `window.location.replace('http://www.yoururl.com'); 
+ // window.location.replace('somepage.html'); 
+ // etc. 
+` 
+
+### A إعادة توجيه توقيت بسيط باستخدام JS
+
+هنا مثال على إعادة توجيه بسيطة موقوتة باستخدام وظيفة `setTimeout()` . تُعد عمليات إعادة التوجيه المحددة التوقيت مفيدة حتى يمكنك شرحها للمستخدم ، عبر المحتوى الموجود على صفحة إعادة التوجيه ، والسبب في إعادة توجيهها إلى صفحة أخرى.
+
+ `// the 5000 below is 5000 milliseconds which equals 5 seconds until the redirect happens 
+ // keep in mind that 1 second = 1000 milliseconds 
+ setTimeout(function () { 
+    window.location = 'http://www.yoururl.com'; 
+    // window.location = 'somepage.html'; 
+    // etc. 
+ }, 5000); 
+` 
+
+### تراجع
+
+في بعض الأحيان ، يتصفح المستخدمون الإنترنت مع تعطيل جافا سكريبت ، ومن الواضح أن هذا سيسبب مشاكل في حل إعادة التوجيه المعتمد على JS. أوصي بتعيين عنصر `<meta>` الذي سيعمل على تحديث المتصفح بالموقع الجديد. أود تعيين الوقت لهذا العنصر الفوقي ليكون الثاني بعد المفترض أن تتم إعادة توجيه JS. لذلك ، إذا كان لديك إعادة توجيه يحدث في JS بعد 5 ثوانٍ ، `<meta>` إعادة توجيه العنصر `<meta>` على 6 ثوانٍ.
+
+ضع عنصر `<meta>` داخل `<head>` للمستند الخاص بك مثل:
+
+ `
+<head> 
+    <!-- Change the 6 below to however many seconds you wish to wait until redirection to the new page.  Change the portion after "URL=" to the URL of your choice.  This can be a local page: URL=somepage.html, a web address: URL=http://www.yoururl.com, or any other valid URL. It is important to note the semicolon between the number of seconds to refresh and the URL. --> 
+    <meta http-equiv="refresh" content="6;URL=http://www.yoururl.com"> 
+ </head> 
+` 
+
+ضع في اعتبارك أنه ليس كل المتصفحات تدعم العنصر `<meta>` (أنا أبحث عنك ، والإصدارات الأقدم من IE ، و Safari) ، ولكن معظم المتصفحات الحديثة تفعل (Microsoft Edge ، Google Chrome ، Mozilla Firefox ، Opera).

guide/arabic/javascript/tutorials/perform-arithmetic-operations-on-decimals-with-javascript/index.md

@@ -0,0 +1,8 @@
+---
+title: Perform Arithmetic Operations on Decimals with JavaScript
+localeTitle: تنفيذ العمليات الحسابية على الكسور العشرية مع JavaScript
+---
+في JavaScript ، يمكنك إجراء عمليات حسابية بأرقام عشرية ، تمامًا مثل الأرقام الصحيحة.
+
+ `var quotient = 4.4 / 2.0; // equals 2.2 
+`

guide/arabic/javascript/tutorials/store-multiple-values-in-one-variable-using-javascript-arrays/index.md

@@ -0,0 +1,12 @@
+---
+title: Store Multiple Values in One Variable Using JavaScript Arrays
+localeTitle: تخزين قيم متعددة في متغير واحد باستخدام صفائف JavaScript
+---
+باستخدام متغيرات مجموعة جافا سكريبت ، يمكننا تخزين عدة أجزاء من البيانات في مكان واحد.
+
+يمكنك بدء تعريف مصفوفة مع قوس فتح ، ووضع حد لها مع قوس إغلاق ، ووضع فاصلة بين كل إدخال ، مثل:
+
+ `var sandwich = ["peanut butter", "jelly", "bread"] 
+` 
+
+`myArray = [2,'j'];`

guide/arabic/javascript/tutorials/subtract-one-number-from-another-with-javascript/index.md

@@ -0,0 +1,10 @@
+---
+title: Subtract One Number from Another with JavaScript
+localeTitle: اطرح رقم واحد من آخر باستخدام JavaScript
+---
+يمكننا أيضًا طرح رقم واحد من آخر.
+
+تستخدم جافا سكريبت - رمز الطرح.
+
+ `var difference = 45 - 33; 
+`

guide/arabic/javascript/tutorials/the-javascript-version-of-jquerygetjson/index.md

@@ -0,0 +1,69 @@
+---
+title: JavaScript Version of Jquerygetjson
+localeTitle: جافا سكريبت نسخة من Jquerygetjson
+---
+إذا كنت تريد العمل مع ملفات json باستخدام JavaScript فقط.
+
+## IE8 +
+
+ `var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onreadystatechange = function() { 
+  if (this.readyState === 4) { 
+    if (this.status >= 200 && this.status < 400) { 
+      // Success! 
+      var data = JSON.parse(this.responseText); 
+    } else { 
+      // Error :( 
+    } 
+  } 
+ }; 
+ 
+ request.send(); 
+ request = null; 
+` 
+
+## IE9 +
+
+ `var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onload = function() { 
+  if (request.status >= 200 && request.status < 400) { 
+    // Success! 
+    var data = JSON.parse(request.responseText); 
+  } else { 
+    // We reached our target server, but it returned an error 
+ 
+  } 
+ }; 
+ 
+ request.onerror = function() { 
+  // There was a connection error of some sort 
+ }; 
+ 
+ request.send(); 
+` 
+
+## IE10 +
+
+ `var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onload = function() { 
+  if (this.status >= 200 && this.status < 400) { 
+    // Success! 
+    var data = JSON.parse(this.response); 
+  } else { 
+    // We reached our target server, but it returned an error 
+ 
+  } 
+ }; 
+ 
+ request.onerror = function() { 
+  // There was a connection error of some sort 
+ }; 
+ 
+ request.send(); 
+`

guide/arabic/javascript/tutorials/use-the-javascript-console/index.md

@@ -0,0 +1,19 @@
+---
+title: Use the JavaScript Console
+localeTitle: استخدم وحدة تحكم JavaScript
+---
+يحتوي كل من Chrome و Firefox على وحدات تحكم جافا سكريبت ممتازة ، تُعرف أيضًا باسم DevTools ، لتصحيح أخطاء جافا سكريبت.
+
+يمكنك العثور على أدوات مطوري البرامج في قائمة Chrome أو وحدة تحكم الويب في قائمة FireFox. إذا كنت تستخدم متصفحًا مختلفًا أو هاتفًا جوالًا ، فنحن نوصي بشدة بالتبديل إلى مكتبي Firefox أو Chrome.
+
+يمكنك أيضًا استخدام [https://repl.it/](https://repl.it/) لتشغيل التعليمات البرمجية عبر الإنترنت.
+
+هذه هي طريقة الطباعة إلى وحدة التحكم:
+
+ `console.log('Hello world!') 
+` 
+
+كما يمكنك طباعة سجل خطأ في وحدة التحكم باستخدام هذا الرمز:
+
+ `console.error('I am an error!') 
+`

guide/arabic/javascript/tutorials/using-anonymous-functions-for-private-namespacing-in-your-javascript-apps/index.md

@@ -0,0 +1,80 @@
+---
+title: Using Anonymous Functions for Private Namespacing in Your JavaScript Apps
+localeTitle: استخدام وظائف مجهول ل Namespacing الخاصة في تطبيقات جافا سكريبت
+---
+دعونا نلقي نظرة على ما هي مساحة الاسم عندما يتعلق الأمر ببناء تطبيقات JavaScript وبعض الفوائد من استخدام مساحة اسم خاصة عند بناء تطبيقاتك.
+
+**الرجاء ملاحظة تشير هذه المقالة دالات self-executing مجهول. إذا لم تكن على دراية بما هو موجود ، فالرجاء قراءة هذا المقال الممتاز من تأليف نوح ستوكس: [تنفيذ المهام المجهولة ذاتيا أو كيفية كتابة جافا سكريبت نظيفة](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) . هذه المادة سوف تذهب في التفاصيل حول وظائف ذاتية المجهول.**
+
+## ما هو مساحة الاسم؟
+
+وبعبارة بسيطة ، تعد مساحة الاسم مجرد جزء من الكود يحتوي على مساحة خاصة به. عندما تبدأ في كتابة تطبيقات JS لأول مرة ، فإنك تقوم فقط بكتابة التعليمة البرمجية وتشغيلها. هذا يضع جميع التعليمات البرمجية في ما يعرف باسم **مساحة الاسم العام** ، والتي تحتوي على جميع التعليمات البرمجية للنوافذ التي تعمل فيها.
+
+إذا احتفظت بكافة التعليمات البرمجية الخاصة بك في **مساحة الاسم العامة** ، فيمكنك تشغيل مشاكل في حالات الاصطدام ، أو تسمية اصطلاحات ، إلخ ، خاصة في تطبيقات / ألعاب JS الكبيرة.
+
+دعونا نلقي نظرة على مثال على كيفية استخدام **مساحة الاسم العالمية** لتطوير اللعبة هي فكرة سيئة.
+
+لنفترض أن لدينا لعبة تتعقب النقاط التي يملكها اللاعب:
+
+ `var points = 0; 
+` 
+
+وهناك الكثير من الألعاب تتبع النقاط لإضافة ميزة تنافسية للعبة. ببساطة عن طريق كتابة هذا السطر في برنامج نصي ، قمنا بإنشاء _نقاط_ مسمى متغيرة يمكنها تتبع النقاط التي اكتسبها المستخدم.
+
+وهذا كل شيء على ما يرام ، ولكن دعنا نقول أن لدينا مستخدم أكثر تطوراً يلعب اللعبة. يعرف هذا المستخدم كيفية النظر إلى مصدر صفحة الويب ، وبالتالي يأخذ هذا الشخص نظرة خاطفة على المصدر وراء لعبة JS ويدرك أن متغير _النقاط_ موجود فقط في **مساحة الاسم العامة** . تنكمش الشمات الشريرة على وجوههم وهم يتأملون النقاط التي يمكنهم تحقيقها! يقررون أنهم لا يرغبون في الانتظار للفوز على بعض الأشرار ، أو تحطيم بعض الفطر ، أو ما لديك ، لجمع بعض النقاط. انهم يريدون نقاطهم الآن! حسنًا ، كيف يبدو _مليارًا مليار مليار_ ؟ لذلك ، يقومون بتحميل وحدة التحكم على المتصفح المفضل لديهم ، ويكتبون ببساطة في وحدة التحكم:
+
+ `points = 34750925489459203859095480917458059034; 
+` 
+
+بمجرد دخول المستخدم ، يتم تحديث متغير _النقاط_ في اللعبة. الآن ، لدى المستخدم كمية كبيرة من النقاط في اللعبة ، ومن المحتمل أنها غير واقعية ، ويمكنه أن يتباهى بأصدقائه بأنه لا يمكن لأحد أن يفوز على مجموعته الرائعة.
+
+لذا ، كيف نمنع حدوث ذلك؟ هذا هو المكان الذي توجد به **مساحات الأسماء الخاصة** .
+
+## مساحات الأسماء الخاصة
+
+تسمح **مساحات الأسماء الخاصة** للمطورين بوضع التعليمات البرمجية الخاصة بهم في أقسام (أو **مساحات الأسماء** ). تعمل هذه الأقسام بشكل مستقل عن بعضها البعض ولكن لا يزال بإمكانها القراءة والكتابة من **مساحة الاسم العامة** .
+
+لكسر هذا الأمر بعبارات أبسط من سيناريو واقعي ، لنفترض أنك تعمل في مبنى مكتبي. لديك مكتب خاص بك ، وترى الآخرين مع مكاتبهم الخاصة. يتم إغلاق كل مكتب ، ولا يملك سوى الشخص الذي يملك المكتب مفتاحًا لهذا المكتب. لنفترض أيضًا أن لديك نوعًا من القفل الفائق الجديد الذي يجعل مكتبك غير قابل للاختراق من قِبل أي شخص آخر في المبنى. لنأخذ بعين الاعتبار مبنى المكتب نفسه **كمساحة اسمية عالمية** وكل مكتب **كمساحة خاصة** . ليس لديك حق الوصول إلى مكتب أي شخص آخر ولا يستطيعون الوصول إلى مكتبك. ولكن ، كل واحد منكم لديه إمكانية الوصول إلى بقية مبنى المكاتب ، سواء كان ذلك في الحصول على القهوة ، أو تناول وجبة خفيفة ، وما إلى ذلك. يستطيع كل واحد منكم انتزاع شيء من **مساحة الاسم العالمية** (أو إنشاء / تعديل شيء ما هناك) ، ولكن يمكنك إنشاء / تعديل / الاستيلاء على أي شيء من مكاتب بعضها البعض ؛ يمكنك فقط إنشاء / تعديل / انتزاع من **مساحة الاسم** / المكتب الخاص بك.
+
+## تحقيق مساحة الاسم الخاصة
+
+إذن ، كيف نحقق **مساحة الاسم الخاصة** هذه في JavaScript؟ استخدام وظيفة ذاتية المجهول! إذا لم تقرأ المقالة من قبل نوح ستوكس ، [أو المهام المجهولة ذاتياً](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) التي تنفذ من تلقاء [نفسه أو كيف تكتب جافاسكريبت نظيفة](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) ، فالرجاء القيام بذلك الآن. هذه المادة سوف تذهب في التفاصيل حول وظائف ذاتية المجهول.
+
+لنلقِ نظرة على استخدام متغير _النقاط_ هذا من قبل ، ولكن دعنا نفصله إلى **مساحة اسمية خاصة** :
+
+ `//The most common way you'll see an anonymous self-executing function 
+ (function () { 
+    var points = 0; 
+ })(); 
+ 
+ //This is just one of many more alternative ways to use an anonymous self-executing function 
+ /* 
+ !function () { 
+    var points = 0; 
+ }(); 
+ */ 
+` 
+
+الآن ، عندما يصل المستخدم إلى الصفحة ، لن يتمكن من فتح وحدة التحكم في المتصفح وتغيير قيمة متغير النقاط كما يحلو لهم! رائع!
+
+## مساحة الاسم وتفاعل المستند
+
+لم يكن التعليمة البرمجية المذكورة أعلاه سوى استخدام واحد لاستخدام وظيفة تنفيذ ذاتي مجهول لإعطاء رمز **مساحة الاسم** الخاصة به. ضع في اعتبارك أن مساحات الأسماء تؤثر فقط على شفرة JS (المتغيرات / المصفوفات / الكائنات / الخ.) ، وليس الكود الذي يتعلق بالوثيقة نفسها.
+
+لا يزال أي رمز داخل مساحة الاسم له نفس الوصول إلى مستند HTML ، و CSS ، كما تفعل عادة في **مساحة الاسم العامة** . إلقاء نظرة على نماذج التعليمات البرمجية جهازي التالية. كلاهما يؤديان نفس الوظيفة ، وليس أي منهما أكثر فائدة ، أو أكثر كفاءة ، من الآخر.
+
+ `<script type="text/javascript"> 
+    (function () { 
+        document.querySelector('body').style.background = 'blue'; 
+    })(); 
+ </script> 
+` 
+
+بالضبط مثل:
+
+ `<script type="text/javascript"> 
+    document.querySelector('body').style.background = 'blue'; 
+ </script> 
+` 
+
+ضع في اعتبارك أن هذه طريقة واحدة فقط لاستخدام مساحات الأسماء في تطبيقات JavaScript. تكييف الكود الخاص بك إلى ما يناسب الوضع في متناول اليد.

guide/arabic/javascript/tutorials/what-does-javascript-void-0-mean/index.md

@@ -0,0 +1,86 @@
+---
+title: What Does JavaScript Void 0 Mean
+localeTitle: ماذا يفعل جافا سكريبت Void 0 Mean
+---
+## ماذا يفعل جافا سكريبت Void 0 Mean
+
+**يقوم عامل تشغيل void في JavaScript بتقييم تعبير وإرجاع غير محدد** .
+
+استخدام وحدة التحكم للتحقق من نفسه: -
+
+![ConsoleOutput](https://github.com/srawat19/-Guide_Images/blob/master/VoidConsole.PNG?raw=true)
+
+**_ملاحظة:_** - **الفراغ** بغض النظر عن أي قيمة تم تمريرها على طول، _ويعود دائما **غير معروف** كما هو مبين أعلاه._ لكن ، **الفراغ مع المعامل 0 المفضل** .
+
+**طريقتان لاستخدام المعامل 0 -> void (0) أو void 0.** كلاهما على ما يرام.
+
+#### متى تستخدم جافا سكريبت باطلة (0)؟
+
+عند النقر فوق الارتباط ، لا تريد أن يقوم المتصفح بتحميل صفحة جديدة أو تحديث الصفحة نفسها (حسب عنوان URL المحدد). بدلاً من ذلك ، قم بإرفاق جافا سكريبت بالرابط.
+
+#### مثال 1 نموذج مع void Javascript (0):
+
+ `
+<html> 
+ <body> 
+ <a href="javascript:void(0);alert('Hello ! I am here')">Click Me</a> 
+ </body> 
+ </html> 
+` 
+
+#### انتاج :
+
+عند النقر فوق ارتباط ClickMe ، يظهر تنبيه على النحو التالي:
+
+![Output1](https://github.com/srawat19/-Guide_Images/blob/master/voidOutput1.PNG?raw=true)
+
+#### مثال 2 نموذج مع void Javascript (0):
+
+ `
+<html> 
+ <body> 
+ <a href="javascript:void(0)" ondblclick="alert('Hi,i didnt refresh the page')" )>Click Me</a> 
+ </body> 
+ </html> 
+` 
+
+#### انتاج :
+
+عندما تنقر نقرًا مزدوجًا على الرابط ، سينبثق تنبيه دون أي تحديث للصفحة.
+
+#### مثال 3 نموذج مع void Javascript (0):
+
+ `
+<html> 
+ <body> 
+ <a href="javascript:void(0);https://www.google.co.in/" 
+ ondblclick="alert('Hello !! You will see me and not get redirected to google.com ')">Click Me</a> 
+ </body> 
+ </html> 
+` 
+
+#### انتاج :
+
+عندما تنقر نقرًا مزدوجًا على الرابط ، سينبثق تنبيه ، ولن يؤدي إغلاقه أيضًا إلى إعادة التوجيه إلى google.com.
+
+#### مثال نموذج دون void Javascript (0):
+
+ `
+<html> 
+ <body> 
+ <a href="https://www.google.co.in/" ondblclick="alert('Hello !! You will see me and then get redirected to google.com even if not needed')">Click Me</a> 
+ </body> 
+ </html> 
+` 
+
+#### انتاج :
+
+عندما تنقر نقرًا مزدوجًا على الرابط ، سينبثق تنبيه ، وسيؤدي غلقه إلى إعادة التوجيه إلى google.com.
+
+#### استنتاج :
+
+عامل **الفراغ** مفيد عندما تحتاج إلى منع أي تحديث أو إعادة توجيه غير مرغوب فيه للصفحة. بدلاً من ذلك ، قم بتنفيذ بعض عملية javascript.
+
+#### معلومات اكثر:
+
+1) [مستندات Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) 2) [فهم الفراغ 0](https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm)

guide/arabic/javascript/tutorials/write-reusable-javascript-with-functions/index.md

@@ -0,0 +1,33 @@
+---
+title: Write Reusable JavaScript with Functions
+localeTitle: اكتب Reusable JavaScript مع الوظائف
+---
+في JavaScript ، يمكننا تقسيم الشفرة إلى أجزاء قابلة لإعادة الاستخدام تسمى الوظائف.
+
+فيما يلي مثال على وظيفة:
+
+ `function functionName() { 
+  console.log("Hello World"); 
+ } 
+` 
+
+يمكنك `call` أو `invoke` هذه الدالة باستخدام اسمها متبوعًا بأقواس ، مثل:
+
+ `functionName(); 
+` 
+
+في كل مرة يتم استدعاء الدالة فإنه سيتم طباعة الرسالة "Hello World" على وحدة تحكم dev. سيتم تنفيذ جميع التعليمات البرمجية بين الأقواس المتعرجة في كل مرة يتم استدعاء الدالة.
+
+هنا مثال آخر:
+
+ `function otherFunctionName (a, b) { 
+    return(a + b); 
+ } 
+` 
+
+يمكننا `call` أو `invoke` مثل هذا:
+
+ `otherFunctionName(1,2); 
+` 
+
+وسوف يتم تشغيلها وإرجاع قيمتها المرتجعة لنا.