|
1 | | -# Code structure |
| 1 | +# بنية الشيفرة البرمجية |
| 2 | +في هذا المقال، سنبدأ بتعلم أساسيات كتابة الشيفرة البرمجية في لغة JavaScript. هل أنت مستعد؟ لننطلق! |
2 | 3 |
|
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" إلى تنبيهين منفصلين بالشكل التالي: |
4 | 10 |
|
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 | +``` |
16 | 12 | alert('Hello'); alert('World'); |
17 | 13 | ``` |
18 | 14 |
|
19 | | -Usually, statements are written on separate lines to make the code more readable: |
| 15 | +تُكتب التعابير البرمجية عادةً على أسطر منفصلة لتسهيل قراءة الشيفرة البرمجية: |
20 | 16 |
|
21 | | -```js run no-beautify |
| 17 | +``` |
22 | 18 | alert('Hello'); |
23 | 19 | alert('World'); |
24 | 20 | ``` |
25 | 21 |
|
26 | | -## Semicolons [#semicolon] |
| 22 | +## الفاصلة المنقوطة |
| 23 | +يمكن حذف الفاصلة المنقوطة من آخر التعابير البرمجية في معظم الحالات عند الانتقال إلى سطر جديد. أي أن الشيفرة |
| 24 | +البرمجية التالية ستعمل أيضًا بشكل صحيح: |
27 | 25 |
|
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 | +``` |
33 | 27 | alert('Hello') |
34 | 28 | alert('World') |
35 | 29 | ``` |
| 30 | +تُفسِّر لغة JavaScript الانتقال إلى سطر جديد بفاصلة منقوطة (ضمنيًا). وهذا ما يُسمى (الاضافة التلقائية للفاصلة |
| 31 | +المنقوطة [Automatic semicolon insertion]). |
36 | 32 |
|
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 | +حالات لا يحوي فيها السطر الجديد بالضرورة فاصلةً منقوطةً افتراضية. إليك مثلًا: |
38 | 35 |
|
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+ |
45 | 38 | 1 |
46 | | -+ 2); |
| 39 | ++2); |
47 | 40 | ``` |
| 41 | +خرج الشيفرة البرمجية السابقة هو 6 لأنَّ لغة JavaScript لا تضيف الفاصلة المنقوطة في هذه الحالة. فمن البديهي أنه عند |
| 42 | +انتهاء السطر بإشارة '+' يكون التعبير ناقصًا (incomplete expression)، وبالتالي لا يتطلب وجود فاصلة منقوطة. |
| 43 | +لذلك، تعمل الشيفرة البرمجية كما هو مطلوب. |
| 44 | +لا تعتمد دائمًا على javaScript لإضافة الفاصلة المنقوطة لأنه **توجد حالات تفشل فيها لغة JavaScript بإضافة |
| 45 | +الفاصلة المنقوطة عندما تكون مطلوبة**. والأخطاء التي تحدث نتيجة هذه الحالات صعبة الإيجاد والإصلاح (ستكتشف ذلك |
| 46 | +قريبًا خلال الشيفرات التي ستكتبها). |
| 47 | +إذا كنت ترغب في الاطلاع على مثال واقعي عن هذه الحالة، إليك الشيفرة البرمجية التالية: |
48 | 48 |
|
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) |
60 | 49 | ``` |
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 | +``` |
67 | 56 | alert("There will be an error") |
68 | | -
|
69 | | -[1, 2].forEach(alert) |
| 57 | +[1 ,2].forEach(alert) |
70 | 58 | ``` |
| 59 | +عند تنفيذ الشيفرة البرمجية آنذاك، سيتم إظهار التنبيه الأول فقط ثم سنحصل على خطأ. تعود الشيفرة البرمجية للعمل بشكل |
| 60 | +صحيح مرة أخرى عند إضافة الفاصلة المنقوطة بعد التنبيه الأول: |
71 | 61 |
|
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 | +``` |
76 | 63 | alert("All fine now"); |
77 | | -
|
78 | | -[1, 2].forEach(alert) |
| 64 | +[1 ,2].forEach(alert) |
79 | 65 | ``` |
80 | 66 |
|
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 | +بالشكل التالي: |
85 | 72 |
|
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 | +``` |
89 | 74 | alert("There will be an error")[1, 2].forEach(alert) |
90 | 75 | ``` |
| 76 | +ولكنهما عبارتين برمجيتين منفصلتين وليستا عبارة واحدة، وبالتالي عملية الدمج في هذه الحالة خطأ. من الممكن أن تتكرر |
| 77 | +هذه الحالة ضمن شروط أخرى. |
| 78 | +بناءً على ما سبق، ننصحك بإضافة الفاصلة المنقوطة بين التعابير البرمجيَّة حتى لو قمت بفصلها بأسطر جديدة. وهذه هي |
| 79 | +القاعدة الأكثر اتباعًا بين مستخدمي JavaScript. لنراجع سويةً ما ذُكر سابقًا، من الممكن الاستغناء عن الفاصلة المنقوطة |
| 80 | +في معظم الحالات، ولكن من الأفضل إضافتها في آخر العبارة البرمجية - وخاصةً بالنسبة للمبتدئين - تجنبًا للوقوع في أخطاء |
| 81 | +عصية التنقيح والتصحيح أنت بغنًى عنها. |
| 82 | + |
| 83 | +## التعليقات |
| 84 | +تصبح البرامج أكثر تعقيدًا مع مرور الوقت. ويكون ضروريًا إضافة التعليقات لشرح عمل الشيفرة البرمجية. يمكن وضع |
| 85 | +التعليقات في أي مكان ضمن السكربت دون أن تؤثر على تنفيذه، لأنَّ المحرك ببساطة يتجاهل جميع التعليقات. |
| 86 | +**التعليقات المكتوبة على سطر واحد تبدأ بخطين مائلين (forward slash) بالشكل `//`**. ويكون الجزء التالي للخطين |
| 87 | +المائلين على نفس السطر تعليقًا. ومن الممكن أن يشغل التعليق سطرًا كاملًا أو يأتي التعليق بعد العبارة البرمجية. |
| 88 | +إليك المثال التالي الذي يشرح ما سبق: |
91 | 89 |
|
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 | +``` |
104 | 91 |
|
105 | | -The rest of the line is a comment. It may occupy a full line of its own or follow a statement. |
| 92 | +// يمتد هذا التعليق على كامل السطر فقط |
106 | 93 |
|
107 | | -Like here: |
108 | | -```js run |
109 | | -// This comment occupies a line of its own |
110 | 94 | alert('Hello'); |
111 | | - |
112 | | -alert('World'); // This comment follows the statement |
| 95 | +alert('World'); // هذا تعليق يلي تعبيرًا برمجيًّا |
113 | 96 | ``` |
| 97 | +**وإن أردت كتابة تعليقات تمتد على عدَّة أسطر، فابدأ التعليق متعدد الأسطر بخط مائل يليه رمز النجمة (أي `/*`) ، وأنهِ |
| 98 | +التعليق برمز النجمة ثم الخط المائل (أي `*/`) **. إليك المثال التالي: |
114 | 99 |
|
115 | | -**Multiline comments start with a forward slash and an asterisk <code>/*</code> and end with an asterisk and a forward slash <code>*/</code>.** |
116 | | - |
117 | | -Like this: |
| 100 | +``` |
| 101 | +/* يُظهر هذا المثال تنبيهين |
118 | 102 |
|
119 | | -```js run |
120 | | -/* An example with two messages. |
121 | | -This is a multiline comment. |
| 103 | +وهذا التعليق متعدد |
| 104 | +الأسطر |
122 | 105 | */ |
123 | 106 | alert('Hello'); |
124 | 107 | alert('World'); |
125 | 108 | ``` |
| 109 | +يجري تجاهل كل ما يقع داخل التعليق متعدد الأسطر، وبالتالي لا تُنفَّذ أية شيفرة برمجية موجودة داخل `/*…*/`. |
| 110 | +أحيانًا، يكون من المفيد إلغاء تفعيل جزء من الشيفرة البرمجية مؤقتًا أثناء تنقيح الأخطاء: |
126 | 111 |
|
127 | | -The content of comments is ignored, so if we put code inside <code>/* ... */</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 | +/* تعليق جزء من الشيفرة |
133 | 114 | alert('Hello'); |
134 | 115 | */ |
135 | 116 | alert('World'); |
136 | 117 | ``` |
137 | 118 |
|
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. |
144 | 123 |
|
145 | | -Such code will die with an error: |
| 124 | +**تحذير:** التعليقات المتداخلة متعددة الأسطر غير مدعومة. أي لا يمكنك وضع `/*…*/` داخل |
| 125 | +`/*…*/` آخر، إذ ستنتهي هذه الشيفرة البرمجية بخطأ: |
146 | 126 |
|
147 | | -```js run no-beautify |
| 127 | +``` |
148 | 128 | /* |
149 | | - /* nested comment ?!? */ |
| 129 | +/*تعليق متشعب*/ |
150 | 130 | */ |
151 | | -alert( 'World' ); |
| 131 | +alert('World'); |
152 | 132 | ``` |
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