Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
To precisely match the functionality of `switch`, the `if` must use a strict comparison `'==='`.
للوصول إلى وظيفة `switch` باستخدام `if` يجب استخدام معامل التساوي الثلاثي `'==='`.

For given strings though, a simple `'=='` works too.
بالنسبة للنصوص فإن `'=='` ستعمل أيضًا.

```js no-beautify
if(browser == 'Edge') {
alert("You've got the Edge!");
alert( "لديك Edge!" );
} else if (browser == 'Chrome'
|| browser == 'Firefox'
|| browser == 'Safari'
|| browser == 'Opera') {
alert( 'Okay we support these browsers too' );
alert( 'حسنا نحن ندعم هذه المتصفحات أيضًا' );
} else {
alert( 'We hope that this page looks ok!' );
alert( 'نتمنى أن تكون هذه الصفحة معروضة بشكل جيد' );
}
```

Please note: the construct `browser == 'Chrome' || browser == 'Firefox' …` is split into multiple lines for better readability.
تم فصل `browser == 'Chrome' || browser == 'Firefox' …` إلى عدة سطور لسهولة القراءة.

But the `switch` construct is still cleaner and more descriptive.
لكن استخدام `switch` ما زال أفضل.
12 changes: 6 additions & 6 deletions 1-js/02-first-steps/14-switch/1-rewrite-switch-if-else/task.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
importance: 5
الأهمية: 5

---

# Rewrite the "switch" into an "if"
# أعد كتابة "switch" باستخدام "if"

Write the code using `if..else` which would correspond to the following `switch`:
أكتب برنامج باستخدام `if..else` يطابق جملة `switch` التالية:

```js
switch (browser) {
case 'Edge':
alert( "You've got the Edge!" );
alert( "لديك Edge!" );
break;

case 'Chrome':
case 'Firefox':
case 'Safari':
case 'Opera':
alert( 'Okay we support these browsers too' );
alert( 'حسنا نحن ندعم هذه المتصفحات أيضًا' );
break;

default:
alert( 'We hope that this page looks ok!' );
alert( 'نتمنى أن تكون هذه الصفحة معروضة بشكل جيد' );
}
```

6 changes: 3 additions & 3 deletions 1-js/02-first-steps/14-switch/2-rewrite-if-switch/solution.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
The first two checks turn into two `case`. The third check is split into two cases:
أول شرطين يتحولان إلى أثنان `case`. الشرط الثالث يتحول إلى حالتين:

```js run
let a = +prompt('a?', '');
Expand All @@ -21,6 +21,6 @@ switch (a) {
}
```

Please note: the `break` at the bottom is not required. But we put it to make the code future-proof.
لاحظ أن `break` في النهاية ليست مطلوبة ولكن تم وضعها تحسبًا للمستقبل.

In the future, there is a chance that we'd want to add one more `case`, for example `case 4`. And if we forget to add a break before it, at the end of `case 3`, there will be an error. So that's a kind of self-insurance.
ربما نريد لاحقًا إضافة المزيد من `case` على سبيل المثال `case 4`. وإذا نسينا وضع break في نهاية `case 3` سيكون هناك خطأ.
6 changes: 3 additions & 3 deletions 1-js/02-first-steps/14-switch/2-rewrite-if-switch/task.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
importance: 4
الأهمية: 4

---

# Rewrite "if" into "switch"
# حول "if" إلى "switch"

Rewrite the code below using a single `switch` statement:
أعد كتابة البرنامج التالي باستخدام `switch`:

```js run
let a = +prompt('a?', '');
Expand Down
108 changes: 54 additions & 54 deletions 1-js/02-first-steps/14-switch/article.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# The "switch" statement
# جملة "switch"

A `switch` statement can replace multiple `if` checks.
جملة `switch` يمكنها استبدال العديد من جمل `if.

It gives a more descriptive way to compare a value with multiple variants.
تعطي طريقة أفضل لمقارنة متغير مقابل مجموعة من القيم.

## The syntax
## طريقة الكتابة

The `switch` has one or more `case` blocks and an optional default.
جملة `switch` تحتوي على `case` واحدة أو أكثر وحالة إفتراضية إختيارية.

It looks like this:
مثل هذا:

```js no-beautify
switch(x) {
Expand All @@ -26,71 +26,71 @@ switch(x) {
}
```

- The value of `x` is checked for a strict equality to the value from the first `case` (that is, `value1`) then to the second (`value2`) and so on.
- If the equality is found, `switch` starts to execute the code starting from the corresponding `case`, until the nearest `break` (or until the end of `switch`).
- If no case is matched then the `default` code is executed (if it exists).
- قيمة `x` يتم إختبار تساويها مع أول `case` (`value1`) ثم تتنتقل إلى (`value2`) وهكذا.
- إذا وجد تساوي تبدأ `switch` بتنفيذ الكود ابتداءًا من هذه ال `case` حتى أقرب `break` (أو نهاية `switch`).
- إذا لم تطابق أي حالة يتم تنفيذ الكود بداخل `default` إذا وجدت.

## An example
## مثال

An example of `switch` (the executed code is highlighted):
مثال على `switch` (تم نحديد الكود الذي سينفذ):

```js run
let a = 2 + 2;

switch (a) {
case 3:
alert( 'Too small' );
alert( 'قليل جدًا' );
break;
*!*
case 4:
alert( 'Exactly!' );
alert( 'تمامًا!' );
break;
*/!*
case 5:
alert( 'Too large' );
alert( 'كثير جدًا' );
break;
default:
alert( "I don't know such values" );
alert( "لا أعرف هذه القيمة" );
}
```

Here the `switch` starts to compare `a` from the first `case` variant that is `3`. The match fails.
تبدأ `switch` بمقارنة قيمة `a` بدايةً من أول `case` التي هي `3`. لا تطابق.

Then `4`. That's a match, so the execution starts from `case 4` until the nearest `break`.
ثم `4`. وهنا يحدث تطابق ويبدأ التنفيذ من `case 4` حتى أقرب `break`.

**If there is no `break` then the execution continues with the next `case` without any checks.**
**إذا لم يوجد `break` يستمر تنفيذ `case` التالية بدون فحص الشرط.**

An example without `break`:
مثال بدون `break`:

```js run
let a = 2 + 2;

switch (a) {
case 3:
alert( 'Too small' );
alert( 'قليل جدًا' );
*!*
case 4:
alert( 'Exactly!' );
alert( 'تمامًا!' );
case 5:
alert( 'Too big' );
alert( 'كثير جدًا' );
default:
alert( "I don't know such values" );
alert( "لا أعرف هذه القيمة" );
*/!*
}
```

In the example above we'll see sequential execution of three `alert`s:
في هذا المثال سيتم تنفيذ ثلاثة أوامر `alert`:

```js
alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );
alert( 'تمامًا!' );
alert( 'كثير جدًا' );
alert( "لا أعرف هذه القيمة" );
```

````smart header="Any expression can be a `switch/case` argument"
Both `switch` and `case` allow arbitrary expressions.
````smart header="يمكن استخدام أي تعبير بداخل `switch/case`"
إن `switch` و `case` يسمحان باستخدام التعبيرات.

For example:
مثال:

```js run
let a = "1";
Expand All @@ -99,74 +99,74 @@ let b = 0;
switch (+a) {
*!*
case b + 1:
alert("this runs, because +a is 1, exactly equals b+1");
alert("سيتم تنفيذ هذا لأن +a هو 1 ويساوي تمامًا b+1");
break;
*/!*

default:
alert("this doesn't run");
alert("لن يتم تنفيذ هذا");
}
```
Here `+a` gives `1`, that's compared with `b + 1` in `case`, and the corresponding code is executed.
هنا `+a` تعطي `1` ويتم مقارنتها مع `b + 1` في `case` وينفذ الكود.
````

## Grouping of "case"
## تجميع "case"

Several variants of `case` which share the same code can be grouped.
يمكن تجميع العديد من `case` التي تتشارك في نفس الأوامر.

For example, if we want the same code to run for `case 3` and `case 5`:
مثلًا إذا أردنا تنفيذ نفس الأوامر في `case 3` و `case 5`:

```js run no-beautify
let a = 3;

switch (a) {
case 4:
alert('Right!');
alert('صحيح!');
break;

*!*
case 3: // (*) grouped two cases
case 3: // (*) تجميع حالتين
case 5:
alert('Wrong!');
alert("Why don't you take a math class?");
alert('خطأ!');
alert("لماذا لا تأخذ روس في الرياضيات ؟");
break;
*/!*

default:
alert('The result is strange. Really.');
alert('النتيجة غريبة حقًا.');
}
```

Now both `3` and `5` show the same message.
الآن كل من `3` و `5` يظهرون الرسالة.

The ability to "group" cases is a side-effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`.
إمكانية تجميع الحالات هي تأثير جانبي لطريقة عمل `switch/case` بدون `break`. هنا يبدأ التنفيذ من `case 3` في السطر `(*)` وينتقل إلى `case 5` لعدم وجود `break`.

## Type matters
## الأنواع مهمة

Let's emphasize that the equality check is always strict. The values must be of the same type to match.
عملية التساوي هي عملية حادة فيجب أن تكون القيم من نفس النوع ليتم التطابق.

For example, let's consider the code:
على سبيل المثال لنأخذ البرنامج التالي:

```js run
let arg = prompt("Enter a value?");
let arg = prompt("أكتب قيمة ؟");
switch (arg) {
case '0':
case '1':
alert( 'One or zero' );
alert( 'صفر أو واحد' );
break;

case '2':
alert( 'Two' );
alert( 'أثنان' );
break;

case 3:
alert( 'Never executes!' );
alert( 'لن ينفذ أبدًا!' );
break;
default:
alert( 'An unknown value' );
alert( 'قيمة غير معروفة' );
}
```

1. For `0`, `1`, the first `alert` runs.
2. For `2` the second `alert` runs.
3. But for `3`, the result of the `prompt` is a string `"3"`, which is not strictly equal `===` to the number `3`. So we've got a dead code in `case 3`! The `default` variant will execute.
1. إذا أدخلنا `0`, `1` يتم تنفيذ أول `alert`.
2. إذا أدخلنا `2` يتم تنفيذ ثاني `alert`.
3. ولكن إذا أدخلنا `3` تكون نتيجة `prompt` هي النص `"3"` الذي لا يطابق `===` الرقم `3`. لذلك لن يتم تنفيذ الأوامر في هذه `case 3`! وسيتم تنفيذ `default`.