Skip to content

Commit 38cb963

Browse files
authored
Merge pull request #107 from AhmedIbrahimGalal/constructor
structure
2 parents b0a9694 + 12c9cbb commit 38cb963

1 file changed

Lines changed: 93 additions & 108 deletions

File tree

Lines changed: 93 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,144 @@
1-
# Code structure
1+
# بنية الشيفرة البرمجية
2+
في هذا المقال، سنبدأ بتعلم أساسيات كتابة الشيفرة البرمجية في لغة JavaScript. هل أنت مستعد؟ لننطلق!
23

3-
The first thing we'll study is the building blocks of code.
4+
## التعابير البرمجية
5+
التعابير البرمجية هي صياغة التراكيب والأوامر التي تنفذ الأعمال في السكربت. رأيت سابقًا التعبير البرمجي،
6+
`alert('Hello, world!')‎`، الذي يُظهر الرسالة "Hello, world!‎".
7+
بإمكانك استخدام تعابير بقدر ما تريد في شيفرتك البرمجية. ويمكن فصل التعابير البرمجية عن بعضها بالفاصلة المنقوطة
8+
(`;`).
9+
مثلًا، بإمكاننا فصل "Hello World" إلى تنبيهين منفصلين بالشكل التالي:
410

5-
## Statements
6-
7-
Statements are syntax constructs and commands that perform actions.
8-
9-
We've already seen a statement, `alert('Hello, world!')`, which shows the message "Hello, world!".
10-
11-
We can have as many statements in our code as we want. Statements can be separated with a semicolon.
12-
13-
For example, here we split "Hello World" into two alerts:
14-
15-
```js run no-beautify
11+
```
1612
alert('Hello'); alert('World');
1713
```
1814

19-
Usually, statements are written on separate lines to make the code more readable:
15+
تُكتب التعابير البرمجية عادةً على أسطر منفصلة لتسهيل قراءة الشيفرة البرمجية:
2016

21-
```js run no-beautify
17+
```
2218
alert('Hello');
2319
alert('World');
2420
```
2521

26-
## Semicolons [#semicolon]
22+
## الفاصلة المنقوطة
23+
يمكن حذف الفاصلة المنقوطة من آخر التعابير البرمجية في معظم الحالات عند الانتقال إلى سطر جديد. أي أن الشيفرة
24+
البرمجية التالية ستعمل أيضًا بشكل صحيح:
2725

28-
A semicolon may be omitted in most cases when a line break exists.
29-
30-
This would also work:
31-
32-
```js run no-beautify
26+
```
3327
alert('Hello')
3428
alert('World')
3529
```
30+
تُفسِّر لغة JavaScript الانتقال إلى سطر جديد بفاصلة منقوطة (ضمنيًا). وهذا ما يُسمى (الاضافة التلقائية للفاصلة
31+
المنقوطة [Automatic semicolon insertion]).
3632

37-
Here, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).
33+
**في معظم الحالات، يتضمن السطر جديد فاصلةً منقوطةً افتراضية في آخره. ولكن هذا لا يشمل جميع الحالات.** هناك
34+
حالات لا يحوي فيها السطر الجديد بالضرورة فاصلةً منقوطةً افتراضية. إليك مثلًا:
3835

39-
**In most cases, a newline implies a semicolon. But "in most cases" does not mean "always"!**
40-
41-
There are cases when a newline does not mean a semicolon. For example:
42-
43-
```js run no-beautify
44-
alert(3 +
36+
```
37+
alert(3+
4538
1
46-
+ 2);
39+
+2);
4740
```
41+
خرج الشيفرة البرمجية السابقة هو 6 لأنَّ لغة JavaScript لا تضيف الفاصلة المنقوطة في هذه الحالة. فمن البديهي أنه عند
42+
انتهاء السطر بإشارة '+' يكون التعبير ناقصًا (incomplete expression)، وبالتالي لا يتطلب وجود فاصلة منقوطة.
43+
لذلك، تعمل الشيفرة البرمجية كما هو مطلوب.
44+
لا تعتمد دائمًا على javaScript لإضافة الفاصلة المنقوطة لأنه **توجد حالات تفشل فيها لغة JavaScript بإضافة
45+
الفاصلة المنقوطة عندما تكون مطلوبة**. والأخطاء التي تحدث نتيجة هذه الحالات صعبة الإيجاد والإصلاح (ستكتشف ذلك
46+
قريبًا خلال الشيفرات التي ستكتبها).
47+
إذا كنت ترغب في الاطلاع على مثال واقعي عن هذه الحالة، إليك الشيفرة البرمجية التالية:
4848

49-
The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so the semicolon is not required. And in this case that works as intended.
50-
51-
**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.**
52-
53-
Errors which occur in such cases are quite hard to find and fix.
54-
55-
````smart header="An example of an error"
56-
If you're curious to see a concrete example of such an error, check this code out:
57-
58-
```js run
59-
[1, 2].forEach(alert)
6049
```
61-
62-
No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of the code: it shows `1` then `2`.
63-
64-
Now, let's add an `alert` before the code and *not* finish it with a semicolon:
65-
66-
```js run no-beautify
50+
[1, 2].foreach(alert)
51+
```
52+
لا تقلق إن كانت هذه الشيفرة صعبة الفهم عليك، فليس هناك حاجة الآن لفهم معنى الأقواس المعقوفة `[]` أو التعبير البرمجي
53+
`forEach`، فسندرسهم لاحقًا. ولكن أبقِ في ذهنك أن خرج هذه الشيفرة البرمجية هو إظهار 1 ثم 2.
54+
سنضيف الآن تنبيهًا (alert) قبل الشيفرة البرمجية السابقة دون وضع الفاصلة المنقوطة في نهاية العبارة البرمجية:
55+
```
6756
alert("There will be an error")
68-
69-
[1, 2].forEach(alert)
57+
[1 ,2].forEach(alert)
7058
```
59+
عند تنفيذ الشيفرة البرمجية آنذاك، سيتم إظهار التنبيه الأول فقط ثم سنحصل على خطأ. تعود الشيفرة البرمجية للعمل بشكل
60+
صحيح مرة أخرى عند إضافة الفاصلة المنقوطة بعد التنبيه الأول:
7161

72-
Now if we run the code, only the first `alert` is shown and then we have an error!
73-
74-
But everything is fine again if we add a semicolon after `alert`:
75-
```js run
62+
```
7663
alert("All fine now");
77-
78-
[1, 2].forEach(alert)
64+
[1 ,2].forEach(alert)
7965
```
8066

81-
Now we have the "All fine now" message followed by `1` and `2`.
82-
83-
84-
The error in the no-semicolon variant occurs because JavaScript does not assume a semicolon before square brackets `[...]`.
67+
تظهر لدينا الآن الرسالة "All fine now"، ثم 1 و 2.
68+
الخطأ الذي حدث في الحالة الأولى (حالة عدم إضافة الفاصلة المنقوطة)، سببه أنَّ لغة JavaScript لا تضيف الفاصلة
69+
المنقوطة تلقائيًا عند الانتقال إلى سطر جديد في حال وجود الأقواس المعقوفة `[…]` في بداية هذا السطر. وبالتالي لن تُضاف
70+
الفاصلة المنقوطة تلقائيًا في الحالة الأولى وسيتم التعامل مع الشيفرة البرمجية كعبارة برمجية واحدة. أي سيراها المحرك
71+
بالشكل التالي:
8572

86-
So, because the semicolon is not auto-inserted, the code in the first example is treated as a single statement. Here's how the engine sees it:
87-
88-
```js run no-beautify
73+
```
8974
alert("There will be an error")[1, 2].forEach(alert)
9075
```
76+
ولكنهما عبارتين برمجيتين منفصلتين وليستا عبارة واحدة، وبالتالي عملية الدمج في هذه الحالة خطأ. من الممكن أن تتكرر
77+
هذه الحالة ضمن شروط أخرى.
78+
بناءً على ما سبق، ننصحك بإضافة الفاصلة المنقوطة بين التعابير البرمجيَّة حتى لو قمت بفصلها بأسطر جديدة. وهذه هي
79+
القاعدة الأكثر اتباعًا بين مستخدمي JavaScript. لنراجع سويةً ما ذُكر سابقًا، من الممكن الاستغناء عن الفاصلة المنقوطة
80+
في معظم الحالات، ولكن من الأفضل إضافتها في آخر العبارة البرمجية - وخاصةً بالنسبة للمبتدئين - تجنبًا للوقوع في أخطاء
81+
عصية التنقيح والتصحيح أنت بغنًى عنها.
82+
83+
## التعليقات
84+
تصبح البرامج أكثر تعقيدًا مع مرور الوقت. ويكون ضروريًا إضافة التعليقات لشرح عمل الشيفرة البرمجية. يمكن وضع
85+
التعليقات في أي مكان ضمن السكربت دون أن تؤثر على تنفيذه، لأنَّ المحرك ببساطة يتجاهل جميع التعليقات.
86+
**التعليقات المكتوبة على سطر واحد تبدأ بخطين مائلين (forward slash) بالشكل `//`**. ويكون الجزء التالي للخطين
87+
المائلين على نفس السطر تعليقًا. ومن الممكن أن يشغل التعليق سطرًا كاملًا أو يأتي التعليق بعد العبارة البرمجية.
88+
إليك المثال التالي الذي يشرح ما سبق:
9189

92-
But it should be two separate statements, not one. Such a merging in this case is just wrong, hence the error. This can happen in other situations.
93-
````
94-
95-
We recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them.
96-
97-
## Comments [#code-comments]
98-
99-
As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why.
100-
101-
Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them.
102-
103-
**One-line comments start with two forward slash characters `//`.**
90+
```
10491
105-
The rest of the line is a comment. It may occupy a full line of its own or follow a statement.
92+
// يمتد هذا التعليق على كامل السطر فقط
10693
107-
Like here:
108-
```js run
109-
// This comment occupies a line of its own
11094
alert('Hello');
111-
112-
alert('World'); // This comment follows the statement
95+
alert('World'); // هذا تعليق يلي تعبيرًا برمجيًّا
11396
```
97+
**وإن أردت كتابة تعليقات تمتد على عدَّة أسطر، فابدأ التعليق متعدد الأسطر بخط مائل يليه رمز النجمة (أي `‎/*‎`) ، وأنهِ
98+
التعليق برمز النجمة ثم الخط المائل (أي `‎*/‎`) **. إليك المثال التالي:
11499

115-
**Multiline comments start with a forward slash and an asterisk <code>/&#42;</code> and end with an asterisk and a forward slash <code>&#42;/</code>.**
116-
117-
Like this:
100+
```
101+
/* يُظهر هذا المثال تنبيهين
118102
119-
```js run
120-
/* An example with two messages.
121-
This is a multiline comment.
103+
وهذا التعليق متعدد
104+
الأسطر
122105
*/
123106
alert('Hello');
124107
alert('World');
125108
```
109+
يجري تجاهل كل ما يقع داخل التعليق متعدد الأسطر، وبالتالي لا تُنفَّذ أية شيفرة برمجية موجودة داخل `/*…*/`.
110+
أحيانًا، يكون من المفيد إلغاء تفعيل جزء من الشيفرة البرمجية مؤقتًا أثناء تنقيح الأخطاء:
126111

127-
The content of comments is ignored, so if we put code inside <code>/&#42; ... &#42;/</code>, it won't execute.
128-
129-
Sometimes it can be handy to temporarily disable a part of code:
130-
131-
```js run
132-
/* Commenting out the code
112+
```
113+
/* تعليق جزء من الشيفرة
133114
alert('Hello');
134115
*/
135116
alert('World');
136117
```
137118

138-
```smart header="Use hotkeys!"
139-
In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`.
140-
```
141-
142-
````warn header="Nested comments are not supported!"
143-
There may not be `/*...*/` inside another `/*...*/`.
119+
### استخدام الاختصارات
120+
من الممكن تعليق سطر واحد من الشيفرة البرمجية بالضغط على الاختصار Ctrl+/‎ في معظم المُحرِّرات وبيئات التطوير.
121+
ومن أجل التعليقات متعددة الأسطر من الممكن استخدام الاختصار Ctrl+Shift+/، (عليك أن تحدد جزءًا من الشيفرة
122+
البرمجية ثم الضغط على الاختصار). في الأجهزة التي تعمل على الماك، جرّب Cmd عوضًا عن Ctrl.
144123

145-
Such code will die with an error:
124+
**تحذير:** التعليقات المتداخلة متعددة الأسطر غير مدعومة. أي لا يمكنك وضع `/*…*/` داخل
125+
`/*…*/` آخر، إذ ستنتهي هذه الشيفرة البرمجية بخطأ:
146126

147-
```js run no-beautify
127+
```
148128
/*
149-
/* nested comment ?!? */
129+
/*تعليق متشعب*/
150130
*/
151-
alert( 'World' );
131+
alert('World');
152132
```
153-
````
154-
155-
Please, don't hesitate to comment your code.
156-
157-
Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don't appear in the working scripts. Therefore, comments do not have negative effects on production at all.
158-
159-
Later in the tutorial there will be a chapter <info:code-quality> that also explains how to write better comments.
133+
لا تتردد أبدًا في وضع التعليقات ضمن شيفرتك البرمجية وشرح ما الذي يجري فيها لأنك عندما تعود إليها لاحقًا، ستجد غالبًا
134+
أنك نسيت وظيفة كل جزء من شيفرتك.
135+
136+
قد تزيد التعليقات من حجم الشيفرة ولكن هذه ليست بمشكلة. هناك العديد من الأدوات التي تُقلِّص الشيفرة البرمجية قبل نشرها
137+
على خادم الإنتاج، إذ تَحذِف التعليقات من السكربت نهائيًّا ولا يبقَ لها بذلك أي أثر. في تلك الحالة، لا يكون للتعليقات أي آثار
138+
سلبية عند الإنتاج. لا تقلق مرة أخرى إن لم تتضح لك الصورة ولم تفهم بعض المصطلحات (مثل ما الذي يقصد بالإنتاج) فكل
139+
شيء سيتضح تدريجيًّا.
140+
لاحقًا في هذه السلسلة التعليمية، سيكون هناك فصل عن جودة الشيفرة البرمجية والذي يشرح طريقة كتابة التعليقات بشكل
141+
أفضل.
142+
143+
ترجمة -وبتصرف- للفصل [Code structure](https://javascript.info/structure) من كتاب [The
144+
JavaScript Language](https://javascript.info/js)

0 commit comments

Comments
 (0)