diff --git a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md index e2989306f..fef4007df 100644 --- a/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md +++ b/1-js/02-first-steps/10-ifelse/5-rewrite-if-question/task.md @@ -4,14 +4,14 @@ # قم بتحويل 'if' إلى '?' -قم بإعادة كتابة `if` باستخدام معامل الشرط `'?'`: +قم بإعادة كتابة `if` باستخدام عامل الشرط `'?'`: ```js let result; if (a + b < 4) { - result = 'تحت'; + result = "تحت"; } else { - result = 'فوق'; + result = "فوق"; } ``` diff --git a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md index 6cee7a9c0..6506b28c3 100644 --- a/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md +++ b/1-js/02-first-steps/10-ifelse/6-rewrite-if-else-question/task.md @@ -4,20 +4,20 @@ # قم بتحويل 'if..else' إلى '?' -قم بإعادة كتابة `if..else` باستخدام العديد من معامل الشرط `'?'`. +قم بإعادة كتابة `if..else` باستخدام العديد من عامل الشرط `'?'`. ينصح بتقسيم الكود إلى أكثر من سطر ليكون مقروء. ```js let message; -if (login == 'Employee') { - message = 'مرحبًا'; -} else if (login == 'Director') { - message = 'تحياتي'; -} else if (login == '') { - message = 'لا دخول'; +if (login == "Employee") { + message = "مرحبًا"; +} else if (login == "Director") { + message = "تحياتي"; +} else if (login == "") { + message = "لا دخول"; } else { - message = ''; + message = ""; } ``` diff --git a/1-js/02-first-steps/10-ifelse/article.md b/1-js/02-first-steps/10-ifelse/article.md index 528e98a10..ebc0e5209 100644 --- a/1-js/02-first-steps/10-ifelse/article.md +++ b/1-js/02-first-steps/10-ifelse/article.md @@ -1,8 +1,8 @@ -# المعامل الشرطي: if, '?' +# العامل الشرطي: if, '?' أحيانًا نريد تنفيذ أوامر مختلفة إعتمادًا على حالات مختلفة. -لعمل هذا يمكننا استخدام عبارة `if` والمعامل الشرطي `?`, الذي يسمى أيضًا معامل "علامة الاستفهام". +لعمل هذا يمكننا استخدام عبارة `if` والالعامل الشرطي `?`, الذي يسمى أيضًا العامل "علامة الاستفهام". ## عبارة "if" @@ -24,8 +24,8 @@ if (year == 2015) alert( 'إجابة صحيحة!' ); ```js if (year == 2015) { - alert( "هذه صحيح!" ); - alert( "أنت ذكي!" ); + alert("هذه صحيح!"); + alert("أنت ذكي!"); } ``` @@ -37,8 +37,8 @@ if (year == 2015) { دعنا نراجع على قواعد التحويل من هذا الدرس : -- الرقم `0`, النص الفارغ `""`, `null`, `undefined`, و `NaN` يصبحون `false`. ولهذا السبب يسمون "falsy" قيم. -- القيم الأخرى تصبح `true`, ولهذا يسمون "truthy". +- الرقم `0`, النص الفارغ `""`, `null`, `undefined`, و `NaN` يصبحون `false`. ولهذا السبب يسمون "falsy" قيم. +- القيم الأخرى تصبح `true`, ولهذا يسمون "truthy". لذلك فإن الأوامر المكتوبة تحت هذا الشرط لن تنفذ أبدًا: @@ -59,7 +59,7 @@ if (1) { // 1 يكون truthy يمكننا أيضًا تمرير قيمة منطقية مسبقة التنفيذ إلى `if`, مثل: ```js -let cond = (year == 2015); // معامل التساوي ينتج true أو false +let cond = (year == 2015); // عامل التساوي ينتج true أو false if (cond) { ... @@ -71,13 +71,14 @@ if (cond) { عبارة `if` قد تحتوي على جزء "else" إختياري. يتم تنفيذها عندما يكون الشرط false. على سبيل المثال: + ```js run -let year = prompt('في أي عام تم نشر تخصيصات ECMAScript-2015?', ''); +let year = prompt("في أي عام تم نشر تخصيصات ECMAScript-2015?", ""); if (year == 2015) { - alert( 'تخمينك صحيح!' ); + alert("تخمينك صحيح!"); } else { - alert( 'كيف يمكنك أن تخطئ ؟' ); // any value except 2015 + alert("كيف يمكنك أن تخطئ ؟"); // any value except 2015 } ``` @@ -88,14 +89,14 @@ if (year == 2015) { على سبيل المثال: ```js run -let year = prompt('في أي عام تم نشر تخصيصات ECMAScript-2015?', ''); +let year = prompt("في أي عام تم نشر تخصيصات ECMAScript-2015?", ""); if (year < 2015) { - alert( 'مبكر جدًا' ); + alert("مبكر جدًا"); } else if (year > 2015) { - alert( 'متأخر جدًا' ); + alert("متأخر جدًا"); } else { - alert( 'تمامًا' ); + alert("تمامًا"); } ``` @@ -103,7 +104,7 @@ if (year < 2015) { يمكن أن يوجد العديد من `else if` . آخر `else` إختيارية. -## المعامل الشرطي '?' +## العامل الشرطي '?' أحيانا نريد تخصيص قيمة متغير بناءًا على شرط معين. @@ -124,11 +125,12 @@ if (age > 18) { alert(accessAllowed); ``` -المعامل الشرطي أو معامل علامة الاستفهام يمكننا من فعل هذا في سطر بسيط. +العامل الشرطي أو عامل علامة الاستفهام يمكننا من فعل هذا في سطر بسيط. -يتم تمثيله بعلامة استفهام `?`. أحيانا يسمى "ternary" لأن له 3 معاملات. وهو المعامل الوحيد في الجافاسكربت الذي له هذا العدد من المعاملات. +يتم تمثيله بعلامة استفهام `?`. أحيانا يسمى "ternary" لأن له 3 معاملات. وهو العامل الوحيد في الجافاسكربت الذي له هذا العدد من المعاملات. طريقة كتابته كالتالي: + ```js let result = condition ? value1 : value2; ``` @@ -138,15 +140,15 @@ let result = condition ? value1 : value2; على سبيل المثال: ```js -let accessAllowed = (age > 18) ? true : false; +let accessAllowed = age > 18 ? true : false; ``` -يمكننا تجاهل الأقواس حول `age > 18`. هذا المعامل لديه أولوية أقل ولهذا يتم تنفيذه بعد عملية المقارنة `>`. +يمكننا تجاهل الأقواس حول `age > 18`. هذا العامل لديه أولوية أقل ولهذا يتم تنفيذه بعد عملية المقارنة `>`. هذا المثال مطابق للمثال السابق: ```js -// معامل المقارنة "age > 18" ينفذ أولًا +// عامل المقارنة "age > 18" ينفذ أولًا // (لا حاجة لوضعة داخل أقواس) let accessAllowed = age > 18 ? true : false; ``` @@ -154,7 +156,7 @@ let accessAllowed = age > 18 ? true : false; لكن الأقواس تجعل الكود مقروء أكثر ولذلك ننصح باستخدامها ````smart -في المثال السابق يمكننا عدم استخدام المعامل الشرطي لأن عملية المقارنة ترجع `true/false`: +في المثال السابق يمكننا عدم استخدام العامل الشرطي لأن عملية المقارنة ترجع `true/false`: ```js // مثل @@ -167,15 +169,20 @@ let accessAllowed = age > 18; تتابع `?` يمكنه إرجاع قيمة تعتمد على أكثر من شرط. على سبيل المثال: + ```js run -let age = prompt('العمر؟', 18); +let age = prompt("العمر؟", 18); -let message = (age < 3) ? 'مرحبًا يا صغيري!' : - (age < 18) ? 'أهلا!' : - (age < 100) ? 'تحياتي!' : - 'يا له من عمر غير عادي!'; +let message = + age < 3 + ? "مرحبًا يا صغيري!" + : age < 18 + ? "أهلا!" + : age < 100 + ? "تحياتي!" + : "يا له من عمر غير عادي!"; -alert( message ); +alert(message); ``` ربما يكون من الصعب معرفة ما يحدث ولكن إذا نظرنا عن قرب سنجد أنه مجرد تتابع لمجموعة إختبارات: @@ -189,13 +196,13 @@ alert( message ); ```js if (age < 3) { - message = 'مرحبًا يا صغيري!'; + message = "مرحبًا يا صغيري!"; } else if (age < 18) { - message = 'أهلا!'; + message = "أهلا!"; } else if (age < 100) { - message = 'تحياتي!'; + message = "تحياتي!"; } else { - message = 'يا له من عمر غير عادي!'; + message = "يا له من عمر غير عادي!"; } ``` @@ -216,7 +223,7 @@ let company = prompt('أي شركة أنشأت الجافاسكربت ؟', ''); هنا لم نقم بتخصيص قيم مختلفة لمتغير بل قمنا بتنفيذ أوامر مختلفة اعتمادًا على الشرط -**لا ينصح باستخدام المعامل بهذه الطريقة.** +**لا ينصح باستخدام العامل بهذه الطريقة.** هذا التعبير مختصر عن عبارة `if` ولكنه أقل قراءة. diff --git a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md index 64938f003..71e9463f4 100644 --- a/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md +++ b/1-js/02-first-steps/11-logical-operators/8-if-question/solution.md @@ -5,16 +5,15 @@ ```js run // ينفذ // نتيجة -1 || 0 = -1 هي truthy -if (-1 || 0) alert( 'first' ); +if (-1 || 0) alert("first"); // لا ينفذ // -1 && 0 = 0, falsy -if (-1 && 0) alert( 'second' ); +if (-1 && 0) alert("second"); // ينفذ -// المعامل && له أولوية أعلى من || +// العامل && له أولوية أعلى من || // لذلك يتم تنفيذ -1 && 1 أولا وينتج التالي: // null || -1 && 1 -> null || 1 -> 1 -if (null || -1 && 1) alert( 'third' ); +if (null || (-1 && 1)) alert("third"); ``` - diff --git a/1-js/02-first-steps/11-logical-operators/article.md b/1-js/02-first-steps/11-logical-operators/article.md index 5d947da1f..56cc1c8a4 100644 --- a/1-js/02-first-steps/11-logical-operators/article.md +++ b/1-js/02-first-steps/11-logical-operators/article.md @@ -1,14 +1,14 @@ -# المعاملات المنطقية +# العوامل المنطقية -يوجد ثلاثة معاملات منطقية في الجافاسكربت: `||` (OR), `&&` (AND), `!` (NOT). +يوجد ثلاثة عوامل منطقية في الجافاسكربت: `||` (OR), `&&` (AND), `!` (NOT). -بالرغم من أن اسمهم معاملات منطقية إلا أنه يمكنك تطبيقهم على أي نوع من البيانات وليس فقط البيانات المنطقية. كما أنه يمكنهم إنتاج أي قيمة. +بالرغم من أن اسمهم عوامل منطقية إلا أنه يمكنك تطبيقهم على أي نوع من البيانات وليس فقط البيانات المنطقية. كما أنه يمكنهم إنتاج أي قيمة. لنرى ذلك بالتفصيل. ## || (OR) -معامل "OR" رمزه هو خطين أفقيين: +عامل "OR" رمزه هو خطين أفقيين: ```js result = a || b; @@ -21,10 +21,10 @@ result = a || b; هناك أربع إحتمالات: ```js run -alert( true || true ); // true -alert( false || true ); // true -alert( true || false ); // true -alert( false || false ); // false +alert(true || true); // true +alert(false || true); // true +alert(true || false); // true +alert(false || false); // false ``` يمكننا أن نرى أن النتيجة دائما `true` ما عدا في حالة عندما تكون كلتا القيمتين `false`. @@ -34,12 +34,13 @@ alert( false || false ); // false مثلًا الرقم `1` يعامل مثل `true`, الرقم `0` مثل `false`: ```js run -if (1 || 0) { // تعمل مثل ( true || false ) - alert( 'truthy!' ); +if (1 || 0) { + // تعمل مثل ( true || false ) + alert("truthy!"); } ``` -في معظم الأوقات يتم استخدام OR `||` مع `if` لإختبار إذا كان *أي* من الشروط المكتوبة تحقق `true`. +في معظم الأوقات يتم استخدام OR `||` مع `if` لإختبار إذا كان _أي_ من الشروط المكتوبة تحقق `true`. على سبيل المثال: @@ -60,7 +61,7 @@ let hour = 12; let isWeekend = true; if (hour < 10 || hour > 18 || isWeekend) { - alert( 'المكتب مغلق.' ); // إنها عطلة + alert("المكتب مغلق."); // إنها عطلة } ``` @@ -76,11 +77,11 @@ if (hour < 10 || hour > 18 || isWeekend) { result = value1 || value2 || value3; ``` -المعامل OR `||` يفعل الآتي: +العامل OR `||` يفعل الآتي: -- تنفيذ العمليات من اليسار لليمين. -- تحويل كل عملية إلى قيمة منطقية وإذا كان الناتج `true` يتوقف وينتج القيمة الأصلية لهذه العملية. -- إذا تم تنفيذ كل العمليات (مثلًا كلهم `false`) يرجع آخر عملية. +- تنفيذ العمليات من اليسار لليمين. +- تحويل كل عملية إلى قيمة منطقية وإذا كان الناتج `true` يتوقف وينتج القيمة الأصلية لهذه العملية. +- إذا تم تنفيذ كل العمليات (مثلًا كلهم `false`) يرجع آخر عملية. يتم إرجاع القيمة بصيغتها الأصلية دون تحويل. @@ -89,12 +90,12 @@ result = value1 || value2 || value3; مثلًا: ```js run -alert( 1 || 0 ); // 1 (1 is truthy) +alert(1 || 0); // 1 (1 is truthy) -alert( null || 1 ); // 1 (1 هو أول قيمة truthy) -alert( null || 0 || 1 ); // 1 (أول قيمة truthy) +alert(null || 1); // 1 (1 هو أول قيمة truthy) +alert(null || 0 || 1); // 1 (أول قيمة truthy) -alert( undefined || null || 0 ); // 0 (الكل falsy, ترجع آخر قيمة) +alert(undefined || null || 0); // 0 (الكل falsy, ترجع آخر قيمة) ``` هذا يوصل إلى بعض الاستخدامات الشيقة مقارنةً بالاستخدام التقليدي. @@ -119,7 +120,7 @@ alert( undefined || null || 0 ); // 0 (الكل falsy, ترجع آخر قيمة) 2. **Short-circuit evaluation.** - ميزة أخرى للمعامل OR `||` تسمى "short-circuit" evaluation. + ميزة أخرى للعامل OR `||` تسمى "short-circuit" evaluation. ويعني أن `||` ينفذ العمليات الممررة له حتى أول قيمة truthy وبعد ذلك يتم إرجاع القيمة مباشرة بدون لمس باقي العمليات. @@ -132,25 +133,25 @@ alert( undefined || null || 0 ); // 0 (الكل falsy, ترجع آخر قيمة) *!*true*/!* || alert("not printed"); ``` - في السطر الثاني يتوقف المعامل OR `||` مباشرة عند الوصول إلى `true` لذلك فإن `alert` لا ينفذ. + في السطر الثاني يتوقف العامل OR `||` مباشرة عند الوصول إلى `true` لذلك فإن `alert` لا ينفذ. أحيانًا يستخدم الناس هذه الخاصية لتنفيذ أوامر فقط إذا كان الجزء الأيسر truthy. ## && (AND) -المعامل AND يكتب بعلامتين عطف `&&`: +العامل AND يكتب بعلامتين عطف `&&`: ```js result = a && b; ``` -في البرمجة التقليدية فإن المعامل AND ينتج `true` إذا كان كلتا القيمتان truthy وغير ذلك يرجع `false`: +في البرمجة التقليدية فإن العامل AND ينتج `true` إذا كان كلتا القيمتان truthy وغير ذلك يرجع `false`: ```js run -alert( true && true ); // true -alert( false && true ); // false -alert( true && false ); // false -alert( false && false ); // false +alert(true && true); // true +alert(false && true); // false +alert(true && false); // false +alert(false && false); // false ``` مثال باستخدام `if`: @@ -160,19 +161,19 @@ let hour = 12; let minute = 30; if (hour == 12 && minute == 30) { - alert( 'The time is 12:30' ); + alert("The time is 12:30"); } ``` يمكن استخدام أي قيمة مع AND: ```js run -if (1 && 0) { // تنفذ مثل true && false - alert( "لن يعمل لأن النتيجة falsy" ); +if (1 && 0) { + // تنفذ مثل true && false + alert("لن يعمل لأن النتيجة falsy"); } ``` - ## AND "&&" إيجاد أول قيمة falsy يعطى العديد من القيم بينهم AND: @@ -181,47 +182,48 @@ if (1 && 0) { // تنفذ مثل true && false result = value1 && value2 && value3; ``` -المعامل AND `&&` يفعل الآتي: +العامل AND `&&` يفعل الآتي: -- تنفيذ العمليات من اليسار إلى اليمين. -- كل عملية تحول إلى قيمة منطقية. إذا كانت النتيجة `false` يتوقف ويرجع القيمة الأصلية لهذه العملية. -- إذا تم تنفيذ كل العمليات (يعنى أن كلهم were truthy) يرجع آخر قيمة +- تنفيذ العمليات من اليسار إلى اليمين. +- كل عملية تحول إلى قيمة منطقية. إذا كانت النتيجة `false` يتوقف ويرجع القيمة الأصلية لهذه العملية. +- إذا تم تنفيذ كل العمليات (يعنى أن كلهم were truthy) يرجع آخر قيمة بكلمات أخرى فإن AND ترجع أول قيمة falsy أو آخر قيمة. -هذا مشابه ل OR. الاختلاف هو أن AND ترجع أول قيمة *falsy* بينما OR ترجع أول قيمة *truthy*. +هذا مشابه ل OR. الاختلاف هو أن AND ترجع أول قيمة _falsy_ بينما OR ترجع أول قيمة _truthy_. Examples: ```js run // إذا كانت أول قيمة truthy, // AND ترجع ثاني قيمة: -alert( 1 && 0 ); // 0 -alert( 1 && 5 ); // 5 +alert(1 && 0); // 0 +alert(1 && 5); // 5 // إذا كانت أول قيمة falsy, // AND ترجعها وتتجاهل القيمة الثانية -alert( null && 5 ); // null -alert( 0 && "no matter what" ); // 0 +alert(null && 5); // null +alert(0 && "no matter what"); // 0 ``` يمكننا أيضًا تمرير العديد من القيم وسيتم إرجاع أول قيمة falsy: ```js run -alert( 1 && 2 && null && 3 ); // null +alert(1 && 2 && null && 3); // null ``` إذا كانت كل القيم truthy يتم إرجاع آخر قيمة: ```js run -alert( 1 && 2 && 3 ); // 3, آخر قيمة +alert(1 && 2 && 3); // 3, آخر قيمة ``` -````smart header="أولوية المعامل AND `&&` أعلى من OR `||`" -أولوية المعامل AND `&&` أعلى من OR `||`. +``smart header="أولوية العامل AND `&&` أعلى من OR `||`" +أولوية العامل AND `&&` أعلى من OR `||`. لذلك فإن `a && b || c && d` كأنك وضعت `&&` بين أقواس: `(a && b) || (c && d)`. -```` + +````` ````warn header="لا تستبدل `if` ب || أو &&" بعض الناس يستخدمون AND `&&` كإختصار ل `if`. @@ -245,12 +247,11 @@ if (x > 0) alert( 'Greater than zero!' ); ``` بالرغم من أن `&&` يبدو مختصرًا إلا أن `if` أفذل ومقروءة أكثر. لذلك ننصح باستخدام كل تعبير في مكانه: نستخدم `if` إذا أردنا if ونستخدم `&&` إذا أردنا AND. -```` - +````` ## ! (NOT) -المعامل NOT يتم تمثيله بعلامة تعجب `!`. +العامل NOT يتم تمثيله بعلامة تعجب `!`. طريقة الكتابة بسيطة: @@ -266,15 +267,15 @@ result = !value; مثلًا: ```js run -alert( !true ); // false -alert( !0 ); // true +alert(!true); // false +alert(!0); // true ``` أحيانًا يتم استخدام علامتين NOT `!!` للتحويل إلى قيمة منطقية: ```js run -alert( !!"non-empty string" ); // true -alert( !!null ); // false +alert(!!"non-empty string"); // true +alert(!!null); // false ``` أول NOT تحول إلى قيمة منطقية وترجع القيمة العكسية والثانية تعكسها مجددًا وفي النهاية نحصل على تحويل القيمة إلى قيمة منطقية. @@ -282,8 +283,8 @@ alert( !!null ); // false وهناك طرق أخرى لعمل نفس الشئ -- مثل دالة `Boolean` المدمجة في اللغة: ```js run -alert( Boolean("non-empty string") ); // true -alert( Boolean(null) ); // false +alert(Boolean("non-empty string")); // true +alert(Boolean(null)); // false ``` -أولوية NOT `!` هي الأعلى في كل المعاملات المنطقية لذلك تنفذ أولًا دائمًا قبل `&&` أو `||`. +أولوية NOT `!` هي الأعلى في كل العوامل المنطقية لذلك تنفذ أولًا دائمًا قبل `&&` أو `||`. diff --git a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md index eaf976c97..afd72c601 100644 --- a/1-js/02-first-steps/12-nullish-coalescing-operator/article.md +++ b/1-js/02-first-steps/12-nullish-coalescing-operator/article.md @@ -2,16 +2,17 @@ [recent browser="new"] - Nullish Coalescing Operator `??` يقدم طريقة مختصرة لإختيار أول قيمة معرفة من قائمة متغيرات. +Nullish Coalescing Operator `??` يقدم طريقة مختصرة لإختيار أول قيمة معرفة من قائمة متغيرات. نتيجة `a ?? b` تكون: -- `a` إذا لم تكن `null` أو `undefined`, -- `b`, غير ذلك. + +- `a` إذا لم تكن `null` أو `undefined`, +- `b`, غير ذلك. لذلك فإن `x = a ?? b` طريقة مختصرة للتالي: ```js -x = (a !== null && a !== undefined) ? a : b; +x = a !== null && a !== undefined ? a : b; ``` هذا مثال أطول. @@ -31,11 +32,12 @@ alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder ## المقارنة مع || -هذا مشابه جدًا للمعامل `||`. في الحقيقة يمكننا استبدال `??` ب `||` في المثال السابق وسنحصل على نفس النتيجة. +هذا مشابه جدًا للعامل `||`. في الحقيقة يمكننا استبدال `??` ب `||` في المثال السابق وسنحصل على نفس النتيجة. الفرق الجوهري بينهما أن: -- `||` يرجع أول قيمة *truthy*. -- `??` يرجع أول قيمة *defined*. + +- `||` يرجع أول قيمة _truthy_. +- `??` يرجع أول قيمة _defined_. هذا مهم جدًا عندما نريد معاملة `null/undefined` بطريقة مختلفة عن `0`. @@ -62,9 +64,9 @@ alert(height ?? 100); // 0 ## الأولوية -أولوية المعامل `??` هي قليلة: `7` وتساوي [MDN جدول](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table). +أولوية العامل `??` هي قليلة: `7` وتساوي [MDN جدول](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table). -هذا أقل من معظم المعاملات وأكبر بقليل من `=` و `?`. +هذا أقل من معظم العوامل وأكبر بقليل من `=` و `?`. لذلك إذا أردنا استخدام `??` في تعبيرات معقدة نقوم بإضافة أقواس: @@ -82,7 +84,7 @@ alert(area); // 5000 ```js // غير صحيح -let area = height ?? (100 * width) ?? 50; +let area = height ?? 100 * width ?? 50; ``` هناك أيضًا قيود لغوية. لأسباب أمنية لا يمكن استخدام `??` مع `&&` أو `||`. @@ -104,7 +106,7 @@ alert(x); // 2 ## ملخص -- معامل حذف null `??` يقدم طريقة مختصرة لإختيار أول قيمة معرفة من قائمة قيم. +- عامل حذف null `??` يقدم طريقة مختصرة لإختيار أول قيمة معرفة من قائمة قيم. يستخدم لوضع قيم افتراضية للمتغيرات: @@ -113,5 +115,5 @@ alert(x); // 2 height = height ?? 100; ``` -- المعامل `??` لديه أولوية قليلة جدًا لكن أعلة قليلًا من `?` و `=`. -- يمنع استخدامه مع `||` أو `&&` بدون أقواس. +- العامل `??` لديه أولوية قليلة جدًا لكن أعلة قليلًا من `?` و `=`. +- يمنع استخدامه مع `||` أو `&&` بدون أقواس. diff --git a/1-js/02-first-steps/13-while-for/4-for-even/solution.md b/1-js/02-first-steps/13-while-for/4-for-even/solution.md index bef5d9bac..e5abc0521 100644 --- a/1-js/02-first-steps/13-while-for/4-for-even/solution.md +++ b/1-js/02-first-steps/13-while-for/4-for-even/solution.md @@ -1,11 +1,9 @@ - - ```js run demo for (let i = 2; i <= 10; i++) { - if (i % 2 == 0) { - alert( i ); - } + if (i % 2 == 0) { + alert(i); + } } ``` -نستخدم معامل باقي القسمة `%` لإيجاد باقي القسمة وفحص إذا كان الرقم زوجي. +نستخدم عامل باقي القسمة `%` لإيجاد باقي القسمة وفحص إذا كان الرقم زوجي. diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md index c6f76e9bf..752f373f4 100644 --- a/1-js/02-first-steps/13-while-for/article.md +++ b/1-js/02-first-steps/13-while-for/article.md @@ -4,7 +4,7 @@ مثل عرض منتجات من قائمة واحدًا تلو الآخر أو تكرار نفس الأمر عشر مرات. -*الحلقات التكرارية* هي طريقة لتكرار الأوامر. +_الحلقات التكرارية_ هي طريقة لتكرار الأوامر. ## حلقة "while" @@ -12,8 +12,8 @@ ```js while (condition) { - // code - // so-called "loop body" + // code + // so-called "loop body" } ``` @@ -23,13 +23,14 @@ while (condition) { ```js run let i = 0; -while (i < 3) { // يعرض 0 ثم 1 ثم 2 - alert( i ); - i++; +while (i < 3) { + // يعرض 0 ثم 1 ثم 2 + alert(i); + i++; } ``` -تنفيذ الأوامر لمرة واحدة *تكرار*. المثال السابق يقوم بثلاثة عمليات تكرار. +تنفيذ الأوامر لمرة واحدة _تكرار_. المثال السابق يقوم بثلاثة عمليات تكرار. إذا حذفت `i++` سيتم تنفيذ الأوامر (نظريًا) إلى الأبد. ولكن في الحقيقة يقوم المتصفح بمنع حدوث هذا وعند استخدام الجافاسكربت في جانب Server يمكننا لإنهاء العملية. @@ -64,7 +65,7 @@ while (i) alert(i--); ```js do { - // loop body + // loop body } while (condition); ``` @@ -75,8 +76,8 @@ do { ```js run let i = 0; do { - alert( i ); - i++; + alert(i); + i++; } while (i < 3); ``` @@ -90,26 +91,27 @@ do { ```js for (begin; condition; step) { - // ... loop body ... + // ... loop body ... } ``` لنتعرف على معاني هذه الأجزاء باستخدام مثال. الحلقة التالية تنفذ الأمر `alert(i)` ابتداءًا من `i` تساوي `0` حتى (لكن لا تشمل) `3`: ```js run -for (let i = 0; i < 3; i++) { // تعرض 0 ثم 1 ثم 2 - alert(i); +for (let i = 0; i < 3; i++) { + // تعرض 0 ثم 1 ثم 2 + alert(i); } ``` لنشرح `for` جزء بجزء: -| الجزء | | | -|-------|----------|----------------------------------------------------------------------------| -| begin | `i = 0` | ينفذ مرة واحدة فقط في البداية. | -| condition | `i < 3`| يتم اختباره قبل كل عملية تكرار وإذا لم يتحقق يتوقف التكرار. | -| body | `alert(i)`| تنفذ طالما الشرط محقق. | -| step| `i++` | ينفذ بعد body في كل عملية تكرار. | +| الجزء | | | +| --------- | ---------- | ----------------------------------------------------------- | +| begin | `i = 0` | ينفذ مرة واحدة فقط في البداية. | +| condition | `i < 3` | يتم اختباره قبل كل عملية تكرار وإذا لم يتحقق يتوقف التكرار. | +| body | `alert(i)` | تنفذ طالما الشرط محقق. | +| step | `i++` | ينفذ بعد body في كل عملية تكرار. | الخوارزمية العامة للتكرار تعمل كالتالي: @@ -131,13 +133,22 @@ for (let i = 0; i < 3; i++) { // تعرض 0 ثم 1 ثم 2 // for (let i = 0; i < 3; i++) alert(i) // نفذ begin -let i = 0 +let i = 0; // if condition → نفذ body ثم نفذ step -if (i < 3) { alert(i); i++ } +if (i < 3) { + alert(i); + i++; +} // if condition → نفذ body ثم نفذ step -if (i < 3) { alert(i); i++ } +if (i < 3) { + alert(i); + i++; +} // if condition → نفذ body ثم نفذ step -if (i < 3) { alert(i); i++ } +if (i < 3) { + alert(i); + i++; +} // ...finish, because now i == 3 ``` @@ -165,7 +176,6 @@ alert(i); // 3, يمكن التعامل معه لأنه معرف خارج الح ```` - ### أجزاء يمكن تخطيها أي جزء من `for` يمكن الاستغناء عنه. @@ -177,8 +187,9 @@ alert(i); // 3, يمكن التعامل معه لأنه معرف خارج الح ```js run let i = 0; // تم تعريف وتخصيص قيمة المتغير -for (; i < 3; i++) { // لا نحتاج "begin" - alert( i ); // 0, 1, 2 +for (; i < 3; i++) { + // لا نحتاج "begin" + alert(i); // 0, 1, 2 } ``` @@ -187,8 +198,8 @@ for (; i < 3; i++) { // لا نحتاج "begin" ```js run let i = 0; -for (; i < 3;) { - alert( i++ ); +for (; i < 3; ) { + alert(i++); } ``` @@ -198,11 +209,11 @@ for (; i < 3;) { ```js for (;;) { - // تتكرر دائمًا + // تتكرر دائمًا } ``` -لاحظ أن كلتا الفاصلتين المنقوطتين `;` داخل `for` يجب أن يوضعا وإلا سيظهر خطأ لغوي. +لاحظ أن كلتا الفاصلتين المنقوطتين `;` داخل `for` يجب أن يوضعا وإلا سيظهر خطأ لغوي. ## إيقاف الحلقة @@ -253,26 +264,25 @@ for (let i = 0; i < 10; i++) { في القيم الزوجية من `i` تقوم `continue` بإيقاف التكرار الحالى وتنتقل لتكرار جديد من `for` (بالرقم التالي). ولهذا فإن `alert` ينفذ فقط مع القيم الفردية. -````smart header="تساعد `continue` على تقليل التداخل" +``smart header="تساعد `continue` على تقليل التداخل" يمكن عرض الأرقام الفردية بالطريقة التالية: ```js run for (let i = 0; i < 10; i++) { - - if (i % 2) { - alert( i ); - } - + if (i % 2) { + alert(i); + } } ``` هذا الكود مطابق تمامًا للسابق. يمكننا فقط وضع الكود داخل `if` بدلًا من استخدام `continue`. ولكن هذا ينتج مستوى آخر من التداخل (استدعاء `alert` داخل أقواس معقوفة). إذا كان ما بداخل `if` سطور كثيرة فهذا سيقلل من إمكانية قراءة الكود بوضوح. -```` + +````` ````warn header="لا يمكن استخدام `break/continue` في الجانب الأيمن من '?'" -لا يمكن استخدام هذه التعبيرات `break/continue` مع المعامل الشرطي `?`. +لا يمكن استخدام هذه التعبيرات `break/continue` مع العامل الشرطي `?`. على سبيل المثال إذا أخذنا هذا الكود: @@ -294,7 +304,7 @@ if (i > 5) { ...يتوقف عن العمل مع خطأ لغوي. وهذا سبب آخر لعدم استخدام `?` بدلًا من `if`. -```` +````` ## عنونة break/continue @@ -304,23 +314,22 @@ if (i > 5) { ```js run no-beautify for (let i = 0; i < 3; i++) { + for (let j = 0; j < 3; j++) { + let input = prompt(`Value at coords (${i},${j})`, ""); - for (let j = 0; j < 3; j++) { - - let input = prompt(`Value at coords (${i},${j})`, ''); - - // إذا أردنا الخروج من هنا إلى Done (بالأسفل)? - } + // إذا أردنا الخروج من هنا إلى Done (بالأسفل)? + } } -alert('Done!'); +alert("Done!"); ``` نحتاج إلى طريقة لإيقاف العملية إذا قام المستخدم بإلغاء الإدخال. وضع `break` بعد `input` سيوقف فقط الحلقة الداخلية. وهذا غير مجدي--جاءت العنونة لإنقاذ الموقف! -إن *label* يقوم بتعريف الحلقة باستخدام نقطتين قبلها: +إن _label_ يقوم بتعريف الحلقة باستخدام نقطتين قبلها: + ```js labelName: for (...) { ... @@ -375,9 +384,9 @@ label: for (...) تحدثنا عن 3 أنواع من الحلقات: -- `while` -- يتم فحص الشرط قبل التكرار. -- `do..while` -- يتم فحص الشرط بعد التكرار. -- `for (;;)` -- يتم فحص الشرط قبل التكرار, بعض المتغيرات الأخرى للإعداد. +- `while` -- يتم فحص الشرط قبل التكرار. +- `do..while` -- يتم فحص الشرط بعد التكرار. +- `for (;;)` -- يتم فحص الشرط قبل التكرار, بعض المتغيرات الأخرى للإعداد. لعمل حلقة لانهائية غالبا يتم استخدام `while(true)`. ويمكن إيقافها مثل أي حلقة أخرى باستخدام `break`. diff --git a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md index 02b3c3dc3..ff5c8a6ea 100644 --- a/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md +++ b/1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/solution.md @@ -1,17 +1,19 @@ -للوصول إلى وظيفة `switch` باستخدام `if` يجب استخدام معامل التساوي الثلاثي `'==='`. +للوصول إلى وظيفة `switch` باستخدام `if` يجب استخدام عامل التساوي الثلاثي `'==='`. بالنسبة للنصوص فإن `'=='` ستعمل أيضًا. ```js no-beautify -if(browser == 'Edge') { - alert( "لديك Edge!" ); -} else if (browser == 'Chrome' - || browser == 'Firefox' - || browser == 'Safari' - || browser == 'Opera') { - alert( 'حسنا نحن ندعم هذه المتصفحات أيضًا' ); +if (browser == "Edge") { + alert("لديك Edge!"); +} else if ( + browser == "Chrome" || + browser == "Firefox" || + browser == "Safari" || + browser == "Opera" +) { + alert("حسنا نحن ندعم هذه المتصفحات أيضًا"); } else { - alert( 'نتمنى أن تكون هذه الصفحة معروضة بشكل جيد' ); + alert("نتمنى أن تكون هذه الصفحة معروضة بشكل جيد"); } ``` diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md index 6531fa0af..191d03c97 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/solution.md @@ -1,8 +1,8 @@ -استخدام معامل علامة الاستفهام `'?'`: +استخدام عامل علامة الاستفهام `'?'`: ```js function checkAge(age) { - return (age > 18) ? true : confirm('Did parents allow you?'); + return age > 18 ? true : confirm("Did parents allow you?"); } ``` @@ -10,7 +10,7 @@ Using OR `||` (the shortest variant): ```js function checkAge(age) { - return (age > 18) || confirm('Did parents allow you?'); + return age > 18 || confirm("Did parents allow you?"); } ``` diff --git a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md index e6dcbd293..368ccaecb 100644 --- a/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md +++ b/1-js/02-first-steps/15-function-basics/2-rewrite-function-question-or/task.md @@ -10,11 +10,11 @@ ```js function checkAge(age) { - if (age > 18) { - return true; - } else { - return confirm('Did parents allow you?'); - } + if (age > 18) { + return true; + } else { + return confirm("Did parents allow you?"); + } } ``` @@ -22,5 +22,5 @@ function checkAge(age) { اعد كتابة `checkAge`: -1. باستخدام معامل علامة الاستفهام `?` +1. باستخدام عامل علامة الاستفهام `?` 2. باستخدام OR `||` diff --git a/1-js/02-first-steps/15-function-basics/3-min/solution.md b/1-js/02-first-steps/15-function-basics/3-min/solution.md index aa8f09bc7..deef9e1ac 100644 --- a/1-js/02-first-steps/15-function-basics/3-min/solution.md +++ b/1-js/02-first-steps/15-function-basics/3-min/solution.md @@ -2,20 +2,20 @@ ```js function min(a, b) { - if (a < b) { - return a; - } else { - return b; - } + if (a < b) { + return a; + } else { + return b; + } } ``` -الحل باستخدام معامل علامة الاستفهام `'?'`: +الحل باستخدام عامل علامة الاستفهام `'?'`: ```js function min(a, b) { - return a < b ? a : b; + return a < b ? a : b; } ``` -لاحظ أن في حالة إذا كان `a == b` لا يهم أي قيمة نرجع. \ No newline at end of file +لاحظ أن في حالة إذا كان `a == b` لا يهم أي قيمة نرجع. diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index 7c25c943a..03811a5b8 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -10,17 +10,17 @@ ## Function Declaration -لإنشاء دالة نستخدم *function declaration*. +لإنشاء دالة نستخدم _function declaration_. مثل هذا: ```js function showMessage() { - alert( 'مرحبًا بالجميع' ); + alert("مرحبًا بالجميع"); } ``` -كلمة `function` تكتب أولا ثم يكتب *اسم الدالة* ثم قائمة *parameters* بين القوسين (يفصل بينهم بفاصلة وهي فارغة في المثال السابق) وأخيرا الكود الذي ينفذ ويسمى "the function body" بين القوسين المعقوفين. +كلمة `function` تكتب أولا ثم يكتب _اسم الدالة_ ثم قائمة _parameters_ بين القوسين (يفصل بينهم بفاصلة وهي فارغة في المثال السابق) وأخيرا الكود الذي ينفذ ويسمى "the function body" بين القوسين المعقوفين. ```js function name(parameters) { @@ -137,7 +137,7 @@ alert( userName ); // *!*John*/!*, لم يتغير, الدالة لن تصل ل ## Parameters -يمكننا تمرير أي قيم إلى الدالة باستخدام parameters (أيضًا تسمى *function arguments*) . +يمكننا تمرير أي قيم إلى الدالة باستخدام parameters (أيضًا تسمى _function arguments_) . في هذا المثال الدالة لديها معاملين: `from` و `text`. @@ -156,7 +156,6 @@ showMessage('Ann', "What's up?"); // Ann: What's up? (**) هنا مثال آخر حيث لدينا المتغير `from` وقمنا بتمريره إلى الدالة. لاحظ أن الدالة قامت بتغيير قيمة `from` ولكن التغيير لا يؤثر في المتغير الممرر لأن الدالة تحصل على نسخة من القيمة: - ```js run function showMessage(from, text) { @@ -203,8 +202,8 @@ showMessage("Ann"); // Ann: no text given ```js run function showMessage(from, text = anotherFunction()) { - // anotherFunction() سيتم تنفيذها فقط إذا لم يحدد قيمة - // وناتجها سيوضع كقيمة للمتغير text + // anotherFunction() سيتم تنفيذها فقط إذا لم يحدد قيمة + // وناتجها سيوضع كقيمة للمتغير text } ``` @@ -234,7 +233,7 @@ function showMessage(text) { showMessage(); // empty message ``` -...أو نستخدم المعامل `||`: +...أو نستخدم العامل `||`: ```js // إذا لم يتم تمرير قيمة text أو تم تمرير "" يجعل قيمته 'empty' @@ -249,7 +248,7 @@ function showMessage(text) { ```js run // إذا لم يوجد قيمة "count" يعرض "unknown" function showCount(count) { - alert(count ?? "unknown"); + alert(count ?? "unknown"); } showCount(0); // 0 @@ -317,25 +316,28 @@ function showMovie(age) { في المثال بالأعلى إذا كانت `checkAge(age)` ترجع `false` عندها `showMovie` لن تكمل إلى `alert`. -````smart header="الدالة التي لديها `return` فارغة أو ليس لديها ترجع `undefined`" +``smart header="الدالة التي لديها `return` فارغة أو ليس لديها ترجع `undefined`" إذا كانت الدالة لا ترجع قيمة فكأنها ترجع `undefined`: ```js run -function doNothing() { /* empty */ } +function doNothing() { + /* empty */ +} -alert( doNothing() === undefined ); // true +alert(doNothing() === undefined); // true ``` استخدام `return` فارغة هو أيضًا مثل `return undefined`: ```js run function doNothing() { - return; + return; } -alert( doNothing() === undefined ); // true +alert(doNothing() === undefined); // true ``` -```` + +````` ````warn header="لا تضع سطر جديد بين `return` والقيمة" إذا اردنا استخدام تعبير طويل مع `return` سيكون من الأفضل وضعه في سطر جديد: @@ -363,7 +365,7 @@ return ( ) ``` وسيعمل كما هو متوقع. -```` +````` ## تسمية الدالة [#function-naming] @@ -375,10 +377,10 @@ return ( Function starting with... -- `"get…"` -- ترجع قيمة, -- `"calc…"` -- تحسب شئ ما, -- `"create…"` -- تنشئ شئ ما, -- `"check…"` -- تختبر قيمة ما وترجع قيمة منطقية. +- `"get…"` -- ترجع قيمة, +- `"calc…"` -- تحسب شئ ما, +- `"create…"` -- تنشئ شئ ما, +- `"check…"` -- تختبر قيمة ما وترجع قيمة منطقية. أمثلة: @@ -426,14 +428,13 @@ checkPermission(..) // checks a permission, returns true/false ```js function showPrimes(n) { - nextPrime: for (let i = 2; i < n; i++) { + nextPrime: for (let i = 2; i < n; i++) { + for (let j = 2; j < i; j++) { + if (i % j == 0) continue nextPrime; + } - for (let j = 2; j < i; j++) { - if (i % j == 0) continue nextPrime; + alert(i); // a prime } - - alert( i ); // a prime - } } ``` @@ -457,7 +458,7 @@ function isPrime(n) { } ``` -الثانية هي الأسهل في الفهم أليس كذلك ؟ فبدلًا من الأوامر نحن نرى اسم الحدثث (`isPrime`). بعض الناس يسمون هذا الكود *self-describing*. +الثانية هي الأسهل في الفهم أليس كذلك ؟ فبدلًا من الأوامر نحن نرى اسم الحدثث (`isPrime`). بعض الناس يسمون هذا الكود _self-describing_. إذا يمكن عمل الدوال حتى لو لم نكن سنستخدمها مرات عديدة فهي تجعل الكود مقروء أكثر. @@ -467,13 +468,13 @@ function isPrime(n) { ```js function name(parameters, delimited, by, comma) { - /* code */ + /* code */ } ``` -- القيم الممرة إلى الدالة يتم نسخها إلى متغيراتها المحلية. -- يمكن للدالة الوصول للمتغيرات خارجها ولكن لا يمكن للكود بالخارج أن يصل إلى المتغيرات المحلية داخل دالة. -- يمكن للدالة إرجاع قيمة وإذا لم تفعل فيكون ناتجها `undefined`. +- القيم الممرة إلى الدالة يتم نسخها إلى متغيراتها المحلية. +- يمكن للدالة الوصول للمتغيرات خارجها ولكن لا يمكن للكود بالخارج أن يصل إلى المتغيرات المحلية داخل دالة. +- يمكن للدالة إرجاع قيمة وإذا لم تفعل فيكون ناتجها `undefined`. لجعل الكود أفضل وأسهل ينصح باستخدام المتغيرات المحلية وتجبن استخدام المتغيرات الخارجية. @@ -481,8 +482,8 @@ function name(parameters, delimited, by, comma) { تسمية الدوال: -- يجب أن يكون اسم الدالةواضح ويعبر عن عملها بحيث عندما نرى استدعاء الدالة نعرف ما تقوم به وما نتيجتها. -- الدالة هي فعل لذا ففي الغالب اسمها يكون فعل. -- هناك كلمات تستخدم قبل اسم الدالة `create…`, `show…`, `get…`, `check…` وغيرها لتعطي تلميح عن ما تفعل الدالة. +- يجب أن يكون اسم الدالةواضح ويعبر عن عملها بحيث عندما نرى استدعاء الدالة نعرف ما تقوم به وما نتيجتها. +- الدالة هي فعل لذا ففي الغالب اسمها يكون فعل. +- هناك كلمات تستخدم قبل اسم الدالة `create…`, `show…`, `get…`, `check…` وغيرها لتعطي تلميح عن ما تفعل الدالة. الدوال هي وحدة البناء الأساسية للبرنامج. الآن عرفنا الاساسيات ويمكننا البدء بصنعها واستخدامها. ولكن هذه فقط البداية وسنرجع لها مرات العديدة غائصين في اعماقها. diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index a8ccd6c6c..cd881b1bc 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -1,30 +1,30 @@ -# Function expressions +# تعبيرات الدوال -In JavaScript, a function is not a "magical language structure", but a special kind of value. +في الجافاسكربت فإن الدوال ليست بنية سحرية للغة ولكنها نوع خاص من القيم. -The syntax that we used before is called a *Function Declaration*: +الطريقة التي استخدمناها سابقًا تسمى _Function Declaration_: ```js function sayHi() { - alert( "Hello" ); + alert("Hello"); } ``` -There is another syntax for creating a function that is called a *Function Expression*. +هناك طريقة أخرى لعمل دالة وتسمى _Function Expression_. -It looks like this: +كالتالي: ```js -let sayHi = function() { - alert( "Hello" ); +let sayHi = function () { + alert("Hello"); }; ``` -Here, the function is created and assigned to the variable explicitly, like any other value. No matter how the function is defined, it's just a value stored in the variable `sayHi`. +هنا تم عمل الدالة وتخزينها في متغير مثل أي قيمة أخرى ولا يهم كيف تم تعريفها. هي فقط تخزن في متغير اسمه `sayHi`. -The meaning of these code samples is the same: "create a function and put it into the variable `sayHi`". +معنى هذا الكود كالآتي: "إنشئ دالةوضعها في المتغير `sayHi`". -We can even print out that value using `alert`: +يمكننا حتى طباعة هذه القيمة باستخدام `alert`: ```js run function sayHi() { @@ -32,53 +32,53 @@ function sayHi() { } *!* -alert( sayHi ); // shows the function code +alert( sayHi ); // يعرض كود الدالة */!* ``` -Please note that the last line does not run the function, because there are no parentheses after `sayHi`. There are programming languages where any mention of a function name causes its execution, but JavaScript is not like that. +لاحظ أن آخر سطر لا يقوم بتنفيذ الدالة لعدم وجود قوسين بعد `sayHi`. هناك لغات برمجة حيث يمكنك استدعاء الدالة بمجرد ذكر اسمها ولكن الجافاسكربت ليست منهم. -In JavaScript, a function is a value, so we can deal with it as a value. The code above shows its string representation, which is the source code. +في الجافاسكربت الدالة هي قيمة لذلك يمكننا معاملتها مثل أي قيمة والكود بالأعلى يعرض نص به الكود الخاص بها -Surely, a function is a special value, in the sense that we can call it like `sayHi()`. +بالتأكيد هي قيمة من نوع خاص حيث يمكن استدعائها `sayHi()`. -But it's still a value. So we can work with it like with other kinds of values. +لكنها لا تزال قيمة يمكننا التعامل معها كأي قيمة أخرى. -We can copy a function to another variable: +يمكننا نسخ الدالة لمتغير آخر: ```js run no-beautify -function sayHi() { // (1) create - alert( "Hello" ); +function sayHi() { + // (1) create + alert("Hello"); } -let func = sayHi; // (2) copy +let func = sayHi; // (2) copy func(); // Hello // (3) run the copy (it works)! sayHi(); // Hello // this still works too (why wouldn't it) ``` -Here's what happens above in detail: +هذه تفاصيل ما حدث: -1. The Function Declaration `(1)` creates the function and puts it into the variable named `sayHi`. -2. Line `(2)` copies it into the variable `func`. Please note again: there are no parentheses after `sayHi`. If there were, then `func = sayHi()` would write *the result of the call* `sayHi()` into `func`, not *the function* `sayHi` itself. -3. Now the function can be called as both `sayHi()` and `func()`. +1. تعريف الدالة `(1)` ينشئ دالة ويضعها في متغير اسمه `sayHi`. +2. السطر `(2)` ينسخها إلى متغير اسمه `func`. لاحظ عدم وجود أقواس بعد `sayHi`. إذا وجدت الأقواس `func = sayHi()` سيتم وضع نتيجة تنفيذ `sayHi()` داخل `func` وليس الدالة `sayHi` نفسها. +3. الآن يمكننا استدعاء الدالة عن طريق `sayHi()` أو `func()`. -Note that we could also have used a Function Expression to declare `sayHi`, in the first line: +لاحظ أنه يمكننا استخدام Function Expression لتعريف `sayHi` في السطر الأول: ```js -let sayHi = function() { - alert( "Hello" ); +let sayHi = function () { + alert("Hello"); }; let func = sayHi; // ... ``` -Everything would work the same. - +كل شئ يعمل بنفس الطريقة. -````smart header="Why is there a semicolon at the end?" -You might wonder, why does Function Expression have a semicolon `;` at the end, but Function Declaration does not: +````smart header="لماذا يوجد فاصلة منقوطة في النهاية ?" +ربما تتسائل لماذا يوجد فاصلة منقوطة في نهاية Function Expression ولا يوجد مع Function Declaration: ```js function sayHi() { @@ -90,27 +90,27 @@ let sayHi = function() { }*!*;*/!* ``` -The answer is simple: -- There's no need for `;` at the end of code blocks and syntax structures that use them like `if { ... }`, `for { }`, `function f { }` etc. -- A Function Expression is used inside the statement: `let sayHi = ...;`, as a value. It's not a code block, but rather an assignment. The semicolon `;` is recommended at the end of statements, no matter what the value is. So the semicolon here is not related to the Function Expression itself, it just terminates the statement. +الإجابة بسيطة: +- لا حاجة للفاصلة المنقوطة `;` في نهاية code blocks والهياكل المشابهة مثل `if { ... }`, `for { }`, `function f { }` الخ. +- يتم استخدام Function Expression داخل التعبير: `let sayHi = ...;` كقيمة وليس code block. يفضل استخدام الفاصلة المنقوطة `;` في نهاية التعبيرات مهما كانت القيمة. لذلك فالفاصلة المنقوطة هنا لا تخص Function Expression نفسه ولكنها فقط تنهي التعبير. ```` ## Callback functions -Let's look at more examples of passing functions as values and using function expressions. +دعنا نرى مثال على تمرير الدالة كقيمة. -We'll write a function `ask(question, yes, no)` with three parameters: +سنقوم بكتابة الدالة `ask(question, yes, no)` بثلاثة معاملات: `question` -: Text of the question +: نص السؤال `yes` -: Function to run if the answer is "Yes" +: دالة يتم تنفيذها إذا كانت الإجابة "Yes" `no` -: Function to run if the answer is "No" +: دالة يتم تنفيذها إذا كانت الإجابة "No" -The function should ask the `question` and, depending on the user's answer, call `yes()` or `no()`: +الدالة ستسأل سؤال `question` وبناءًا على جواب المستخدم ستنفذ `yes()` أو `no()`: ```js run *!* @@ -128,17 +128,17 @@ function showCancel() { alert( "You canceled the execution." ); } -// usage: functions showOk, showCancel are passed as arguments to ask +// الاستخدام: الدوال showOk, showCancel يتم تمريرهم كمعاملات للدالة ask ask("Do you agree?", showOk, showCancel); ``` -In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such function usually draws a nice-looking question window. But that's another story. +هذه الدوال مفيدة إلى حد ما. الفرق الأساسي بين `ask` في الواقع والمثال السابق هو أن في الواقع يتم استخدام طرق أكثر تعقيدًا للتعامل مع المستخدم بدلًا من مجرد `confirm`. ربما يتم رسم نافذة سؤال بشكل لطيف ولكن هذه قصة أخرى. -**The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.** +**المعاملات `showOk` و `showCancel` الخاصين ب `ask` يسمون _callback functions_ أو فقط _callbacks_.** -The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for "yes" answer, and `showCancel` for "no" answer. +الفكرة هي أننا نقوم بتمرير دالة ونتوقع أن يتم استدعائها لاحقًا إذا لزم الأمر. وفي حالتنا فإن `showOk` تصبح رد على الإجابة "yes" answer و `showCancel` للإجابة "no". -We can use Function Expressions to write the same function much shorter: +يمكن استخدام Function Expressions لكتابة نفس الدالة بشكل أقصر: ```js run no-beautify function ask(question, yes, no) { @@ -155,59 +155,59 @@ ask( */!* ``` -Here, functions are declared right inside the `ask(...)` call. They have no name, and so are called *anonymous*. Such functions are not accessible outside of `ask` (because they are not assigned to variables), but that's just what we want here. +هنا تم تعريف الدوال داخل استدعاء `ask(...)`. ليس لديهم أسماء ويسمون _anonymous_. وهذه الدوال لا يمكن الوصول إليها خارج `ask` (لأنه لم يتم تخزينهم في متغيرات) ولكن هذا كل ما نحتاجه هنا. -Such code appears in our scripts very naturally, it's in the spirit of JavaScript. +كود مثل هذا يظهر في برامجنا بشكل طبيعي. إنه في روح الجافاسكربت. -```smart header="A function is a value representing an \"action\"" -Regular values like strings or numbers represent the *data*. +```smart header="الدالة هي قيمة تمثل حدث" +القيم العادية مثل الأرقام والنصوص تمثل بيانات. -A function can be perceived as an *action*. +لكن يمكن اعتبار الدالة أنها تمثل حدث. -We can pass it between variables and run when we want. +يمكننا تمريرها بين المتغيرات وتنفيذها حيثما نشاء. ``` - ## Function Expression vs Function Declaration -Let's formulate the key differences between Function Declarations and Expressions. +دعنا نوضح الفرق بين Function Declarations و Expressions. -First, the syntax: how to differentiate between them in the code. +أولا طريقة الكتابة: كيف تفرق بينهم في الكود. -- *Function Declaration:* a function, declared as a separate statement, in the main code flow. +- _Function Declaration:_ يتم تعريف الدالة كجزء منفصل في سريان البرنامج. ```js // Function Declaration function sum(a, b) { - return a + b; + return a + b; } ``` -- *Function Expression:* a function, created inside an expression or inside another syntax construct. Here, the function is created at the right side of the "assignment expression" `=`: + +- _Function Expression:_ يتم إنشاء الدالة داخل تعبير أو جزء آخر. هنا تم إنشاء الدالة في الجزء الأيمن من "assignment expression" `=`: ```js // Function Expression - let sum = function(a, b) { - return a + b; + let sum = function (a, b) { + return a + b; }; ``` -The more subtle difference is *when* a function is created by the JavaScript engine. +الفرق الأكثر أهمية هو متي يقوم JavaScript engine بإنشاء كل منهما. -**A Function Expression is created when the execution reaches it and is usable only from that moment.** +**يتم إنشاء Function Expression عندما يصل لها التنفيذ.** -Once the execution flow passes to the right side of the assignment `let sum = function…` -- here we go, the function is created and can be used (assigned, called, etc. ) from now on. +عندما يصل التنفيذ إلى الجزء الأيمن من عملية التخصيص `let sum = function…` -- فمن هنا يمكننا استخدام الدالة (assigned, called, etc. ) . -Function Declarations are different. +Function Declarations تكون مختلفة. -**A Function Declaration can be called earlier than it is defined.** +**يمكن استدعاء Function Declaration قبل تعريفها.** -For example, a global Function Declaration is visible in the whole script, no matter where it is. +على سبيل المثال فإن تعريف Function Declaration على المستوى العالمي يجعلها مرئية في كل البرنامج ولا يهم من أين نستخدمها. -That's due to internal algorithms. When JavaScript prepares to run the script, it first looks for global Function Declarations in it and creates the functions. We can think of it as an "initialization stage". +وفقًا لخوارزميات داخلية فعندما تقوم الجافاسكربت بالتجهيز لتنفيذ البرنامج فهي تبحث عن Function Declarations العالمية وتقوم بإنشاء هذه الدوال كخطوة في مرحلة التهيئة initialization stage. -And after all Function Declarations are processed, the code is executed. So it has access to these functions. +وبعد الإنتهاء من إنشاء كل الدوال يبدأ تنفيذ البرنامج ولهذا يمكننا استخدام الدوال. -For example, this works: +هذا المثال سيعمل جيدًا: ```js run refresh untrusted *!* @@ -219,9 +219,9 @@ function sayHi(name) { } ``` -The Function Declaration `sayHi` is created when JavaScript is preparing to start the script and is visible everywhere in it. +تعريف الدالة `sayHi` يتم عندما تقوم الجافاسكربت بالتجهيز لتنفيذ البرنامج ويكون متاح في أي مكان. -...If it were a Function Expression, then it wouldn't work: +...ولكن لو كانت Function Expression فلن تعمل: ```js run refresh untrusted *!* @@ -233,15 +233,15 @@ let sayHi = function(name) { // (*) no magic any more }; ``` -Function Expressions are created when the execution reaches them. That would happen only in the line `(*)`. Too late. +يتم إنشاء Function Expressions عندما يصل لها التنفيذ أي في السطر `(*)`. وهذا متأخر دًا. -Another special feature of Function Declarations is their block scope. +ميزة أخرى ل Function Declarations هي مجالهم الخاص. -**In strict mode, when a Function Declaration is within a code block, it's visible everywhere inside that block. But not outside of it.** +**في strict mode عندما يتم وضع Function Declaration داخل جزء من الكود فتكون متاحة فقط بداخله وغير متاحة خارجه.** -For instance, let's imagine that we need to declare a function `welcome()` depending on the `age` variable that we get during runtime. And then we plan to use it some time later. +دعنا نفترض أننا نريد عمل الدالة `welcome()` بناءًا على قيمة المتغير `age` التي نحصل عليها وقت التنفيذ. ونخطط لاستخدامها في وقت لاحق. -If we use Function Declaration, it won't work as intended: +إذا استخدمنا Function Declaration لن تعمل كما هو متوقع: ```js run let age = prompt("What is your age?", 18); @@ -267,9 +267,9 @@ welcome(); // Error: welcome is not defined */!* ``` -That's because a Function Declaration is only visible inside the code block in which it resides. +هذا لأن Function Declaration متاحة فقط في code block الذي تم تعريفها بداخله. -Here's another example: +مثال آخر: ```js run let age = 16; // take 16 as an example @@ -279,7 +279,7 @@ if (age < 18) { welcome(); // \ (runs) */!* // | - function welcome() { // | + function welcome() { // | alert("Hello!"); // | Function Declaration is available } // | everywhere in the block where it's declared // | @@ -289,24 +289,24 @@ if (age < 18) { } else { - function welcome() { + function welcome() { alert("Greetings!"); } } -// Here we're out of curly braces, -// so we can not see Function Declarations made inside of them. +// هنا خارج الأقواس المعقوفة +// لذا لا يمكننا استخدام الدوال المعرفة بداخلها. *!* welcome(); // Error: welcome is not defined */!* ``` -What can we do to make `welcome` visible outside of `if`? +ماذا يمكن أن نفعل لجعل `welcome` متاحة خارج `if`? -The correct approach would be to use a Function Expression and assign `welcome` to the variable that is declared outside of `if` and has the proper visibility. +الطريقة الصحيحة ستكون استخدام Function Expression ووضع `welcome` داخل متغير خارج `if` يمكن الوصول إليه. -This code works as intended: +كما فعلنا هنا: ```js run let age = prompt("What is your age?", 18); @@ -332,7 +332,7 @@ welcome(); // ok now */!* ``` -Or we could simplify it even further using a question mark operator `?`: +يمكننا تبسيطها باستخدام العامل الشرطي `?`: ```js run let age = prompt("What is your age?", 18); @@ -346,23 +346,22 @@ welcome(); // ok now */!* ``` +```smart header="متى نستخدم Function Declaration أو Function Expression?" +عندما نريد عمل دالة فأول ما يجب أن نفكر فيه هو Function Declaration فهو يعطينا حرية أكثر لتنظيم الكود لأن يمكننا استخدام الدالة قبل تعريفها. -```smart header="When to choose Function Declaration versus Function Expression?" -As a rule of thumb, when we need to declare a function, the first to consider is Function Declaration syntax. It gives more freedom in how to organize our code, because we can call such functions before they are declared. - -That's also better for readability, as it's easier to look up `function f(…) {…}` in the code than `let f = function(…) {…};`. Function Declarations are more "eye-catching". +وهذا أفضل من ناحية قراءة الكود فمن الأسهل ملاحظة `function f(…) {…}` عن `let f = function(…) {…};`.. -...But if a Function Declaration does not suit us for some reason, or we need a conditional declaration (we've just seen an example), then Function Expression should be used. +...ولكن إذا كان Function Declaration غير مناسب لسبب ما أو نريد تعريف دالة بناءًا على شرط معين كما رأينا سابقًا فعندها يجب استخدام Function Expression. ``` -## Summary +## ملخص -- Functions are values. They can be assigned, copied or declared in any place of the code. -- If the function is declared as a separate statement in the main code flow, that's called a "Function Declaration". -- If the function is created as a part of an expression, it's called a "Function Expression". -- Function Declarations are processed before the code block is executed. They are visible everywhere in the block. -- Function Expressions are created when the execution flow reaches them. +- الدوال هي قيم يمكن تخزينها ونسخها وتعريفها في أي مكان. +- إذا تم تعريف الدالة كجزء منفصل في البرنامج فتسمى "Function Declaration". +- وإذا تم تعريفها كجزء من تعبير معين فتسمى "Function Expression". +- Function Declarations يتم عملها قبل تنفيذ الكود فتكون متاحة في أي مكان بداخله. +- Function Expressions يتم إنشاءها عندما يصل التنفيذ إليها. -In most cases when we need to declare a function, a Function Declaration is preferable, because it is visible prior to the declaration itself. That gives us more flexibility in code organization, and is usually more readable. +في معظم الحالات عندما نريد عمل دالة يفضل استخدام Function Declaration لأنه يكون متاح قبل التعريف نفسه. وهذا يعطينا مرونة أكثر في البرنامج. -So we should use a Function Expression only when a Function Declaration is not fit for the task. We've seen a couple of examples of that in this chapter, and will see more in the future. +يجب استخدام Function Expression فقط عندما يكون Function Declaration غير مناسب. ولقد رأينا أمثلة عديدة هنا وسنرى أكثر في المستقبل. diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md index 3ea112473..935ed23f8 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/solution.md @@ -1,4 +1,3 @@ - ```js run function ask(question, yes, no) { if (confirm(question)) yes() @@ -14,4 +13,4 @@ ask( ); ``` -Looks short and clean, right? +تبدو أقصر. أليس كذلك ؟ diff --git a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md index 2f44db27e..ef8576c11 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/1-rewrite-arrow/task.md @@ -1,17 +1,20 @@ +# اعد الكتابة باستخدام arrow functions -# Rewrite with arrow functions - -Replace Function Expressions with arrow functions in the code below: +استبدل Function Expressions ب arrow functions في الكود التالي: ```js run function ask(question, yes, no) { - if (confirm(question)) yes() - else no(); + if (confirm(question)) yes(); + else no(); } ask( - "Do you agree?", - function() { alert("You agreed."); }, - function() { alert("You canceled the execution."); } + "Do you agree?", + function () { + alert("You agreed."); + }, + function () { + alert("You canceled the execution."); + } ); ``` diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index e0fb5bda5..c5cd2cbc1 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -1,54 +1,54 @@ -# Arrow functions, the basics +# أساسيات Arrow functions -There's another very simple and concise syntax for creating functions, that's often better than Function Expressions. +هناك طريقة أبسط لتعريف الدالة وغالبًا تكون أفضل من Function Expressions. -It's called "arrow functions", because it looks like this: +تسمى "arrow functions" لأنها تشبه السهم: ```js -let func = (arg1, arg2, ...argN) => expression +let func = (arg1, arg2, ...argN) => expression; ``` -...This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result. +...هذا ينشئ دالة `func` تأخذ قيم `arg1..argN` وتنفذ `expression` الطرف الأيمن باستخدامهم وترجع النتيجة. -In other words, it's the shorter version of: +بصيغة أخرى فهي إختصار ل: ```js -let func = function(arg1, arg2, ...argN) { - return expression; +let func = function (arg1, arg2, ...argN) { + return expression; }; ``` -Let's see a concrete example: +لنرى أمثلة: ```js run let sum = (a, b) => a + b; -/* This arrow function is a shorter form of: +/* هذه arrow function إختصار ل: let sum = function(a, b) { return a + b; }; */ -alert( sum(1, 2) ); // 3 +alert(sum(1, 2)); // 3 ``` -As you can, see `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result. +كما ترى فإن `(a, b) => a + b` تعني أن الدالة تستقبل قيمتين `a` و `b`. وتنفذ التعبير `a + b` وترجع نتيجته. -- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter. +- إذا كان لديك معامل واحد فقط فيمكن حذف الأقواس الدائرية من حوله لجعل التعبير أقصر. - For example: + مثل: ```js run *!* let double = n => n * 2; - // roughly the same as: let double = function(n) { return n * 2 } + // تمامًا مثل: let double = function(n) { return n * 2 } */!* alert( double(3) ); // 6 ``` -- If there are no arguments, parentheses will be empty (but they should be present): +- إذا لم يوجد معاملات يتم ترك الأقواس فارغة (ولكن يجب كتابتها): ```js run let sayHi = () => alert("Hello!"); @@ -56,29 +56,27 @@ As you can, see `(a, b) => a + b` means a function that accepts two arguments na sayHi(); ``` -Arrow functions can be used in the same way as Function Expressions. +يمكن استخدام Arrow functions بنفس طريقة Function Expressions. -For instance, to dynamically create a function: +على سبيل المثال إذا أردنا إنشاء دالة بطريقة ديناميكية: ```js run let age = prompt("What is your age?", 18); -let welcome = (age < 18) ? - () => alert('Hello') : - () => alert("Greetings!"); +let welcome = age < 18 ? () => alert("Hello") : () => alert("Greetings!"); welcome(); ``` -Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure. +ربما تكون Arrow functions غير معروفة وذات بنية غريبة لا يمكن التعرف عليها في البداية ولكن مع كثرة الاستخدام ستعتاد عينك عليها. -They are very convenient for simple one-line actions, when we're just too lazy to write many words. +هي مناسبة جدًا للأحداث التي تتطلب سطر واحد ولكننا كسالى لنكتب كلمات كثيرة. ## Multiline arrow functions -The examples above took arguments from the left of `=>` and evaluated the right-side expression with them. +المثال بالأعلى يأخذ القيم على يسار `=>` وينفذ التعبير على اليمين باستخدامهم. -Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them. +أحيانًا نريد شئ أكثر تعقيدًا كتنفيذ عدة أوامر. عندها يمكن وصعهم داخل أقواس معقوفة ولكن يجب استخدام `return` الطبيعية معهم. Like this: @@ -86,26 +84,26 @@ Like this: let sum = (a, b) => { // the curly brace opens a multiline function let result = a + b; *!* - return result; // if we use curly braces, then we need an explicit "return" + return result; // if we use curly braces, then we need an explicit "return" */!* }; alert( sum(1, 2) ); // 3 ``` -```smart header="More to come" -Here we praised arrow functions for brevity. But that's not all! +```smart header="الكثير آتٍ" +تعرفنا على arrow functions بإيجاز ولكن هذا ليس كل شئ -Arrow functions have other interesting features. +Arrow functions لديها العديد من المميزات الشيقة. -To study them in-depth, we first need to get to know some other aspects of JavaScript, so we'll return to arrow functions later in the chapter . +لدراستها بعمق سنحتاج معرفة بأشياء أكثر في الجافاسكربت لذلك سنرجع إليها مرة أخرى في فصل . -For now, we can already use arrow functions for one-line actions and callbacks. +للآن يمكننا استخدامها لأحداث السطر الواحد و callbacks. ``` -## Summary +## ملخص -Arrow functions are handy for one-liners. They come in two flavors: +Arrow functions تأتي بصيغتين: -1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. -2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something. +1. بدون أقواس معقوفة: `(...args) => expression` -- تقوم الدالة بتنفيذ التعبير الموجود بالجزء الأيمن وترجع نتيحته. +2. مع أقواس معقوفة: `(...args) => { body }` -- تسمح لنا بتنفيذ أكثر من أمر ولكن يجب وضع `return` لكي نرجع قيمة ما.