Skip to content

Commit f485ec3

Browse files
authored
Merge pull request #97 from Salah856/newbranch
Newbranch function prototype
2 parents f4be3ad + 0f0ebe6 commit f485ec3

9 files changed

Lines changed: 1392 additions & 792 deletions

File tree

Lines changed: 25 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,40 @@
1-
# Developer console
1+
# أدوات المطور
2+
أبقِ في بالك أن الشيفرة البرمجية عرضةً لاحتواء الكثير من الأخطاء، إذ احتمال ارتكابك الأخطاء كبير أثناء كتابة الشيفرة البرمجية، لا بل وقوعك فيها هو أمر حتمي طالما أنك إنسان ولست رجلًا آليًا. هل تصدق أنه حتى المبرمجين المتمرسين وذوي الخبرة الطويلة يرتكبون الكثير من الأخطاء في الشيفرة التي يكتبونها! لا تقلق فهذا أمر طبيعي.
3+
على أي حال، لا تُظهِر المتصفِّحات الأخطاء البرمجية تلقائيًا للمستخدمين. وعند وجود مشكلة ما في السكربت، ولا يمكنك آنذاك تحديد مكانها، وبالتالي لا يمكن إصلاحها. لذلك، أُضيفت «أدوات المطوّر» (developer tools) إلى المتصفِّحات لاسكتشاف الأخطاء وتوفير معلومات مفيدة عن السكربت لتحسينه.
24

3-
Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
5+
يفضل معظم المطورون العمل على متصفِّحي Chrome أو FireFox لاحتوائهما على أفضل أدوات المطوّر. توفر المتصفِّحات الأخرى أيضًا مجموعة أدوات للمطوّر والتي من الممكن أن تحتوي على مزايا خاصة. لكن عادةً ما تحاول اللحاق بمتصفِّحي Chrome و FireFox الأفضل من هذه الناحية. يفضل المطوّرون بشكل عام العمل على متصفِّح واحد وينتقلون إلى متصفِّح آخر عندما تكون المشكلة التي يعملون عليها محدَّدة بهذا المتصفِّح.
46

5-
But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
7+
بناءً على ذلك، نجد أنَّ أدوات المطور مهمة للغاية لما تمتلكه من مزايا تساعدك أثناء مسيرتك في تطوير الويب عبر JavaScript. سنتعلم في البداية طريقة فتحها، واستخدامها لاستكشاف الأخطاء، وتشغيل تعليمات JavaScript ضمنها.
68

7-
To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers.
9+
## أدوات المطور في متصفح Google Chrome
10+
قم بفتح الصفحة [bug.html](https://javascript.info/article/devtools/bug.html). يوجد خطأ في الشيفرة المكتوبة بلغة JavaScript غير ظاهر للزائر العادي، لذا سنستخدم أدوات المطوّر لاكتشافه.
811

9-
Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific.
12+
اضغط على F12 (أو الاختصار Cmd+Opt+J إذا كنت تستخدم نظام التشغيل «ماك») وسيفتح ذلك تلقائيًا أدوات المطوّر على لسان «الطرفية» (Console). وتظهر أدوات المطوّر تقريبًا بهذا الشكل:
1013

11-
Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
14+
يعتمد شكل أدوات المطوّر على إصدار متصفِّح Chrome الذي تستخدمه، إذ يختلف بشكل بسيط من إصدار إلى آخر.
15+
- بإمكانك رؤية رسالة الخطأ باللون الأحمر. معنى الرسالة أن السكربت يحتوي على أمر غير معروف هو "lalala".
16+
- لاحظ في أقصى اليمين وجود رابط إلى المصدر bug.html:12 مع رقم سطر الخطأ في الشيفرة.
1217

13-
## Google Chrome
18+
يظهر تحت رسالة الخطأ الرمز `<` باللون الأزرق، ويحدد «سطر الأوامر» (command line) الذي سنكتب عنده أوامر وتعليمات JavaScript. اضغط زر الإدخال Enter لتنفيذ الأمر بعد كتابته (أو Shift+Enter للانتقال إلى السطر التالي عند إدخال أمر متعدد الأسطر).
1419

15-
Open the page [bug.html](bug.html).
20+
الآن أصبح بإمكانك استكشاف الأخطاء، وهذا يكفي بداية وسنعود لاحقًا إلى أدوات المطوَر لندرس استكشاف الأخطاء وإصلاحها أو ما يعرف debugging في فصل تنقيح الأخطاء في المتصفِّح Chrome.
1621

17-
There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
22+
## أدوات المطور في متصفحي FireFox و Safari وغيرهما
23+
تَستخدِم معظم المتصفِّحات الاختصار F12 لفتح أدوات المطوَر. بشكل عام تتشابه هذه الأدوات في الشكل والمضمون. وبمجرد تعلمك العمل على إحدى هذه الأدوات (بإمكانك البدء مع Chrome)، يمكنك بسهولة الانتقال للعمل على الأدوات الأخرى.
1824

19-
Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
25+
### أدوات المطور في متصفح Safari
26+
يختلف المتصفِّح Safari (متصفِّح خاص بنظام التشغيل «ماك» وغير مدعوم من قبل «ويندوز» أو «لينكس») في طريقة فتح أدوات المطور. نحتاج في البداية لتفعيل «قائمة المطوّر» (Develop menu). لفعل ذلك، افتح «التفضيلات» (Preferences) ثم اختر قائمة «متقدم» (Advanced). يوجد في الأسفل مربع اختيار لإظهار قائمة المطوَر في شريط القائمة. حدده لتفعيل القائمة:
2027

21-
The developer tools will open on the Console tab by default.
28+
بإمكانك استعمال الاختصار Cmd+opt+C لإظهار وإخفاء الطرفية من أدوات المطور. ويمكنك ملاحظة ظهور قائمة جديدة في الأعلى اسمها «Develop». تملك هذه القائمة العديد من الخيارات والأوامر الخاصة بالمطور.
2229

23-
It looks somewhat like this:
30+
### الإدخال متعدد الأسطر
31+
عادةً يتم تنفيذ الشيفرة البرمجية في نافذة الأوامر سطرًا تلو الآخر عند الضغط على زر الإدخال Enter. ولكتابة أمر متعدد الأسطر، اضغط على Shift+Enter (يُمكِّنك ذلك من الانتقال إلى السطر التالي دون تنفيذ السطر الحالي، وعند الانتهاء من إدخال كامل الأمر، اضغط على Enter فقط لتنفيذ هذا الأمر المتعدد الأسطر).
2432

25-
![chrome](chrome.png)
33+
## الخلاصة
34+
- توفِّر لك أدوات المطوّر عدة أدوات متطورة تساعدك على تنقيح الأخطاء، وتنفيذ الأوامر، وفحص المتغيرات، وغيرها من المهام.
35+
- يمكن الوصول إليها باستخدام الاختصار F12 في معظم متصفِّحات نظام Windows. أمَا في نظام Mac، استخدم الاختصار Cmd+Opt+J لمتصفِّح Chrome، واستخدم Cmd+Opt+C لمتصفِّح Safari (ولكن عليك أن تفعَل قائمة المطوّر في البداية).
2636

27-
The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar.
37+
الآن أصبحت البيئة جاهزة لديك. استعد للتعمق في لغة JavaScript في الفصل التالي.
2838

29-
- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command.
30-
- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred.
39+
ترجمة -وبتصرف- للفصل [Developer Console](https://javascript.info/devtools) من كتاب [The JavaScript Language](https://javascript.info/js)
3140

32-
Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them.
33-
34-
Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
35-
36-
```smart header="Multi-line input"
37-
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
38-
39-
To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
40-
```
41-
42-
## Firefox, Edge, and others
43-
44-
Most other browsers use `key:F12` to open developer tools.
45-
46-
The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another.
47-
48-
## Safari
49-
50-
Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
51-
52-
Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom:
53-
54-
![safari](safari.png)
55-
56-
Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options.
57-
58-
## Summary
59-
60-
- Developer tools allow us to see errors, run commands, examine variables, and much more.
61-
- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
62-
63-
Now we have the environment ready. In the next section, we'll get down to JavaScript.
Lines changed: 48 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,56 @@
1-
# The modern mode, "use strict"
2-
3-
For a long time, JavaScript evolved without compatibility issues. New features were added to the language while old functionality didn't change.
4-
5-
That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript's creators got stuck in the language forever.
6-
7-
This was the case until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most such modifications are off by default. You need to explicitly enable them with a special directive: `"use strict"`.
8-
9-
## "use strict"
10-
11-
The directive looks like a string: `"use strict"` or `'use strict'`. When it is located at the top of a script, the whole script works the "modern" way.
12-
13-
For example:
14-
15-
```js
16-
"use strict";
17-
18-
// this code works the modern way
19-
...
1+
# الوضع الصارم: النمط الحديث لكتابة الشيفرات
2+
تطورت لغة JavaScript خلال فترة طويلة دون أي مشاكل في التوافق. وجرى التحقق من استمرار عمل جميع وظائفها في كل مرة تضاف إليها خصائص جديدة.
3+
4+
وكان لذلك فائدة كبيرة في استمرار عمل الشيفرات البرمجية الموجودة دون تعطلها. ولكن كان له ناحية سلبية أيضًا، هي أنّ الأخطاء والخصائص التي أضافها مطورو اللغة بقيت مع اللغة إلى الأبد.
5+
6+
واستمرت هذا الحال حتى ظهور ECMAScript 5 (اختصارًا ES5) في عام 2009. التي أضافت خصائص جديدة إلى اللغة وعدّلت على بعض الخصائص الموجودة سابقًا. ولضمان استمرار عمل الشيفرات البرمجية السابقة، فإنّ معظم هذه التعديلات كانت غير فعّالة بشكل افتراضي؛ ولاستخدامها، عليك تفعيلها بشكل صريح باستخدام الموجه الخاص: `"use strict"`.
7+
8+
## الموجه `"use strict"`
9+
يبدو الموجه كسلسلة نصية: `"use-strict"` أو `'use strict'`. وعندما يوضع في بداية السكربت، يعمل السكربت حسب النمط والطريقة الحالية.
10+
11+
إليك المثال التالي:
12+
2013
```
21-
22-
Quite soon we're going to learn functions (a way to group commands), so let's note in advance that `"use strict"` can be put at the beginning of a function. Doing that enables strict mode in that function only. But usually people use it for the whole script.
23-
24-
````warn header="Ensure that \"use strict\" is at the top"
25-
Please make sure that `"use strict"` is at the top of your scripts, otherwise strict mode may not be enabled.
26-
27-
Strict mode isn't enabled here:
28-
29-
```js no-strict
30-
alert("some code");
31-
// "use strict" below is ignored--it must be at the top
32-
3314
"use strict";
34-
35-
// strict mode is not activated
15+
//هذه الشيفرة البرمجية تعمل في الوضع الصارم
16+
3617
```
37-
38-
Only comments may appear above `"use strict"`.
39-
````
40-
41-
```warn header="There's no way to cancel `use strict`"
42-
There is no directive like `"no use strict"` that reverts the engine to old behavior.
43-
44-
Once we enter strict mode, there's no going back.
18+
19+
قريبًا، سندرس الدوال (طريقة لجمع الأوامر). ولكن في نطرة استباقية للموضوع، لاحظ أنه بالإمكان وضع `"use strict"` في بداية معظم أنواع الدوال عوضًا عن كامل السكربت. وبذلك يتم تفعيل الوضع الصارم (strict mode) ضمن الدوال فقط. لكن عادةً يستخدم المبرمجون هذا الوضع لكامل السكربت.
20+
21+
تأكد من وضع `"use script"` في بداية السكربتات، وإلا فإنه من الممكن ألا يُفعَّل الوضع الصارم.
22+
فمثلًا، الوضع الصارم غير مفعّل في المثال التالي:
23+
4524
```
46-
47-
## Browser console
48-
49-
When you use a [developer console](info:devtools) to run code, please note that it doesn't `use strict` by default.
50-
51-
Sometimes, when `use strict` makes a difference, you'll get incorrect results.
52-
53-
So, how to actually `use strict` in the console?
54-
55-
First, you can try to press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, like this:
56-
57-
```js
58-
'use strict'; <Shift+Enter for a newline>
59-
// ...your code
60-
<Enter to run>
25+
alert("some code");
26+
// إن لم يُستعمَل في أول سطر "use strict" سيجري تجاهل الموجه
27+
"use strict"
28+
// الوضع الصارم غير مُفعَّل
29+
```
30+
31+
بإمكانك كتابة التعليقات فقط قبل استخدام الموجه `"use strict"`.
32+
لاحظ أيضًا أنه ليس هناك طريقة لإلغاء `"use strict"`، أي لا يوجد موجه آخر مثل `"no use strict"` والذي يثني المحرك عن عمله ويلغي تفعيل الوضع الصارم. لذلك عند بدء استخدام الوضع الصارم، لا توجد طريقة لإلغائه والعودة إلى الوضع الافتراضي.
33+
34+
## طرفية المتصفح
35+
أبقِ في ذهنك أن طرفية المتصفح (console) لا تستخدم الوضع الصارم لاختبار وتنفيذ الشيفرات المكتوبة فيها؛ أي أنها لا تستخدم `"use strict"` افتراضيًا.
36+
37+
عندما يوجد هناك اختلاف بين `"use strict"` والنمط الافتراضي في بعض الأحيان، قد تحصل على ناتج خطأ. ولن تنجح محاولتك في تفعيل الوضع الصارم (strict) بالضغط على الاختصار Shift+Enter لإدخال عدة أسطر، ثم استخدام `"use strict"` في البداية وذلك بسبب طريقة معالجة الطرفية للشيفرة البرمجية داخليًا.
38+
39+
الطريقة الأفضل للتأكد من عمل `"use strict"` هو كتابة الشيفرة البرمجية ضمن الطرفية كما يلي:
40+
6141
```
62-
63-
It works in most browsers, namely Firefox and Chrome.
64-
65-
If it doesn't, e.g. in an old browser, there's an ugly, but reliable way to ensure `use strict`. Put it inside this kind of wrapper:
66-
67-
```js
6842
(function() {
69-
'use strict';
70-
71-
// ...your code here...
43+
'use strict';
44+
// … ضع شيفرتك هنا …
7245
})()
7346
```
74-
75-
## Should we "use strict"?
76-
77-
The question may sound obvious, but it's not so.
78-
79-
One could recommend to start scripts with `"use strict"`... But you know what's cool?
80-
81-
Modern JavaScript supports "classes" and "modules" - advanced language structures (we'll surely get to them), that enable `use strict` automatically. So we don't need to add the `"use strict"` directive, if we use them.
82-
83-
**So, for now `"use strict";` is a welcome guest at the top of your scripts. Later, when your code is all in classes and modules, you may omit it.**
84-
85-
As of now, we've got to know about `use strict` in general.
86-
87-
In the next chapters, as we learn language features, we'll see the differences between the strict and old modes. Luckily, there aren't many and they actually make our lives better.
88-
89-
All examples in this tutorial assume strict mode unless (very rarely) specified otherwise.
47+
48+
## استخدم "use strict" دومًا
49+
سنتعلم لاحقًا الاختلافات بين الوضع الصارم والوضع الافتراضي الذي تعمل ضمنه الشيفرات. ففي الفصل القادم، ستلاحظ الاختلافات بين هذين الوضعين أثناء تعلمك للخصائص الجديدة. من الجيد أنه لا يوجد الكثير من هذه الاختلافات، وفي حال وجودها فهي لتحسين عمل الشيفرة البرمجية. ولكن في الوقت الحالي تكفي معرفتك بهذه الأمور العامة:
50+
51+
1. الموجه `"use strict"` يحول المحرك إلى النمط الحديث (modern)، مما يغير من طريقة تعامله مع بعض الخصائص الموجودة سابقًا. سندرس ذلك بالتفصيل في الأجزاء القادمة من هذه السلسلة التعليمية.
52+
2. يتم تفعيل الوضع الصارم بوضع الموجه `"use strict"` في بداية السكربت أو الدالة. العديد من خصائص اللغة، مثل الأصناف (classes) والوحدات (modules)، ُتفعِّل الوضع الصارم (strict) تلقائيًا.
53+
3. الوضع الصارم (strict) مدعوم من قبل جميع المتصفحات الحالية.
54+
4. أنصحك دائمًا بوضع `"use strict"` في بداية السكربت. جميع الأمثلة في هذه السلسلة التعليمية تفترض العمل ضمن الوضع الصارم إلا إذا ذُكر غير ذلك وهذا في بعض الحالات النادرة.
55+
56+
ترجمة -وبتصرف- للفصل [Modern mode, "use strict"](https://javascript.info/use-strict) من كتاب [The JavaScript Language](https://javascript.info/js)

0 commit comments

Comments
 (0)