diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md index d03f03def..8b332bd07 100644 --- a/1-js/01-getting-started/3-code-editors/article.md +++ b/1-js/01-getting-started/3-code-editors/article.md @@ -1,46 +1,46 @@ -# Code editors +# محررات الأكواد -A code editor is the place where programmers spend most of their time. +محرر الأكواد هو المكان الذي يقضي فيه المبرمجون معظم وقتهم. -There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type. +يوجد نوعين من محررات الأكواد: IDEs ( بيئة التطوير الكاملة)و المحررات البسيطة. العديد من الناس يستخدمون أداة واحدة لكل نوع. ## IDE -The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment." +مصطلح [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) يشير إلى محرر بإمكانات هائلة، مع العديد من المميزات التي تعمل عادة على " مشروع كامل". كما يوحي الاسم، فهو ليس مجرد محرر أكواد، ولكنه "بيئة تطوير" واسعة النطاق. -An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff. + IDE تقوم بتحميل المشروع ) الذي يمكن أن يتكون من العديد من الملفات)، ويسمح بالتنقل بين الملفات، ويوفر خاصة الإكمال التلقائي المعتمدة على المشروع ككل ( وليس الملف المفتوح فقط) , كما أنه يمكن أن يرتبط مع أنظمة إدارة الإصدار (مثل [git](https://git-scm.com/)), وبيئة الاختبار, وغيرها من الأشياء على مستوى المشروع. -If you haven't selected an IDE yet, consider the following options: +إذا لم تقم باختيار IDE بعد ، ففكر في الخيارات التالية: -- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free). -- [WebStorm](http://www.jetbrains.com/webstorm/) (cross-platform, paid). +- [فيجوال ستديو كود](https://code.visualstudio.com/) (يعمل على أكثر من نظام تشغيل, مجاني). +- [ويب ستورم](http://www.jetbrains.com/webstorm/) (يعمل على أكثر من نظام تشغيل, مدفوع). -For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/). +بالنسبة للويندوز، يمكن استخدام برنامج فيجوال ستديو، لايجب الخلط بينه وبين الفيجوال ستديو كود، فيجوال ستديو هو محرر مدفوع يعمل على نظام ويندوز فقك، ومناسب تماماً لبيئة الدوت نت. أنه أيضاً جيد للجافاسكريبت. كما يوجد إصدار مجاني منه [Visual Studio Community](https://www.visualstudio.com/vs/community/). -Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you. +.عادة ما تكون تكلفتها ضئيلة للغاية مقارنة براتب المطور المؤهل ، لذلك فقط اختر الأفضل بالنسبة لك.العديد من بيئات التطوير مدفوعة، لكن لها فترة سماحية -## Lightweight editors +## المحررات البسيطة -"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple. +المحررات البسيطة" ليست بقوة ال" IDEs لكنها سريعة, وأنيقة وبسيطة -They are mainly used to open and edit a file instantly. +يتم استخدامها بشكل رئيسي لفتح وتحرير ملف على الفور. -The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file. +الفارق الرئيسي بين المحررات البسيطة و "بيئة التطوير" هو أن بيئة التطوير تعمل على مستوى المشروع، لذلك فإنها تقوم بتحميل المزيد من البيانات عند البدء، وتحليل هيكل المشروع إذا لزم ذلك. أما المحررات البسيطة فإنها أسرع في حال نريد ملف واحد فقط. -In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE. +من الناحية العملية ، قد تحتوي المحررات البسيطة على الكثير من المكونات الإضافية بما في ذلك محللات بناء الجملة على مستوى الدليل وأجهزة الإكمال التلقائي ، لذلك لا توجد حدود صارمة بين المحرر البسيط و IDE. -The following options deserve your attention: +الخيارات التالية تستحق انتباهك: -- [Atom](https://atom.io/) (cross-platform, free). -- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free). -- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware). -- [Notepad++](https://notepad-plus-plus.org/) (Windows, free). -- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them. +- [Atom](https://atom.io/) (يعمل على العديد من أنظمة التشغيل, مجاني). +- [Visual Studio Code](https://code.visualstudio.com/) (يعمل على العديد من أنظمة التشغيل, مجاني). +- [Sublime Text](http://www.sublimetext.com) (يعمل على العديد من أنظمة التشغيل, برنامج مشاركة). +- [Notepad++](https://notepad-plus-plus.org/) (الويندوز, مجاني). +- [Vim](http://www.vim.org/) و [Emacs](https://www.gnu.org/software/emacs/) رائعة إذا كنت تعرف كيفية استخدامها. -## Let's not argue +## دعونا لانتشاجر -The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with. +المحررات التي بالقائمة الأعلى هي التي نقوم باستخدامها أنا وأصدقائي، والذين أعتقد أنهم مطورون جيدون يستخدمونها منذ وقت طويل وتسعدهم. -There are other great editors in our big world. Please choose the one you like the most. +يوجد أيضاً محررات رائعة في عالمنا الكبير، الرجاء اختيار المحرر الذي تفضله. -The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences. +اختيار المحرر، مثل أي أداة أخرى، هو اختيار فردي ويعتمد على مشروعاتك، وعاداتك، وتفضيلاتك الشخصية. diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index b3149f112..053535a46 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,17 +1,17 @@ -# Hello, world! +# أهلاً, بالعالم! -This part of the tutorial is about core JavaScript, the language itself. +هذا الجزء من البرنامج التعليمي عن أساسيات لغة الجافا سكريبت، اللغة نفسها. -But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum so that you don't spend time on them if you plan to concentrate on another environment (like Node.js). We'll focus on JavaScript in the browser in the [next part](/ui) of the tutorial. +لكن نحتاج إلى بيئة عمل من أجل تشغيل النصوص الخاصة بنا، وبما أن هذا الكتاب عبر الانترنت، لذافإن المتصفح خيار جيد.سوف نقوم بالاحتفاظ بالأوامر الخاصة بالمتصفح (مثل `alert`) للحد الأدنى بحيث لا تقضي وقتًا عليها إذا كنت تخطط للتركيز على بيئة أخرى (مثل Node.js). سوف نركز على الجافا سكريبت في المتصفح [الجزء التالي](/ui) من البرنامج التعليمي. -So first, let's see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like `"node my.js"`. +لذا أولاً, دعونا نرفق نص برمجي في صفحة الويب. بالنسبة للبيئات التي تعمل على الخوادم (مثل Node.js), يمكنك تنفيذها من خلال استخدام أمر مثل `"node my.js"`. -## The "script" tag +## الوسم "script" -JavaScript programs can be inserted into any part of an HTML document with the help of the ` */!* @@ -35,24 +35,24 @@ For instance: ``` ```online -You can run the example by clicking the "Play" button in the right-top corner of the box above. +يمكن أن تقوم بتشغيل المثال بالضغط على زر "تشغيل" في الجانب الأيمن العلوي بالمربع الأعلى. ``` -The ` ``` - This trick isn't used in modern JavaScript. These comments hide JavaScript code from old browsers that didn't know how to process the ` ``` -Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"` would mean a file `"script.js"` in the current folder. +هنا, `/path/to/script.js` هو مسار منفرد للنص البرمجي من جذر الموقع. يمكن أيضاً توفير مسار نسبي من خلال الصفحة الحالية.. على سبيل المثال، `src="script.js"` تعني أن الملف `"script.js"` في نفس المجلد. -We can give a full URL as well. For instance: +يمكن أن نعطي المسار الكامل أيضاً. على سبيل المثال : ```html ``` -To attach several scripts, use multiple tags: +لكي نرفق العديد من النصوص البرمجية، استخدم To attach several scripts, use الوسوم بصورة مضاعفة: ```html @@ -90,19 +90,19 @@ To attach several scripts, use multiple tags: ``` ```smart -As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. +كقاعدة، يتم وضع النصوص البرمجية البسيطة داخل HTML. والنصوص المعقدة يتم وضعها في ملفات منفصلة. -The benefit of a separate file is that the browser will download it and store it in its [cache](https://en.wikipedia.org/wiki/Web_cache). +فائدة الملفات المنفصلة هي أن المتصفح يقوم بتحميلهاوتخزينها في[ذاكرة التخزين المؤقتة](https://en.wikipedia.org/wiki/Web_cache). -Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once. +الصفحات الأخرى التي تشير إلى نفس النص البرمجي سوف تحصل عليه من ذاكرة التخزين المؤقتة بدلاً من تنزيله، لذا فإن الملف يتم تحميله مرة واحدة. -That reduces traffic and makes pages faster. +هذا يقلل من الحركة ويجعل الصفحات تكون أسرع. ``` -````warn header="If `src` is set, the script content is ignored." -A single ` ``` -We must choose either an external ` @@ -122,11 +122,11 @@ The example above can be split into two scripts to work: ``` ```` -## Summary +## ملخص -- We can use a ``. +- يمكن استخدام وسم ``. -There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many. +هناك الكثير لتتعلمه عن نصوص المتصفح البرمجية وتفاعلها مع صفحة الويب. ولكن دعنا نضع في اعتبارنا أن هذا الجزء من البرنامج التعليمي مخصص للغة جافا سكريبت ، لذلك لا ينبغي أن نشتت انتباهنا بالتطبيقات الخاصة بالمتصفح. سنستخدم المتصفح كوسيلة لتشغيل جافا سكريبت ، وهو مناسب جدًا للقراءة عبر الإنترنت ، ولكن واحدًا فقط من بين العديد. diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index cf1dd53d2..aac3c6a57 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -1,44 +1,44 @@ -# Code structure +# هيكل الكود -The first thing we'll study is the building blocks of code. +أول شئ سنقوم بدراسته هو البنايات الأساسية للكود. -## Statements +## الجمل -Statements are syntax constructs and commands that perform actions. +الجمل هي عبارة عن تراكيب وأوامر تؤدي إجراءات. -We've already seen a statement, `alert('Hello, world!')`, which shows the message "Hello, world!". +لقد رأينا بالفعل جملة, `alert('Hello, world!')`, والتي أظهرت رسالة "Hello, world!". -We can have as many statements in our code as we want. Statements can be separated with a semicolon. +يمكننا الحصول على عدد أكبر من الجمل في الكود الخاص بنا كما نريد. الجمل يمكن أن بينها بفاصلة منقوطة. -For example, here we split "Hello World" into two alerts: +على سبيل المثال، هنا نحن فصلنا "Hello World" إلى تنبيهين: ```js run no-beautify alert('Hello'); alert('World'); ``` -Usually, statements are written on separate lines to make the code more readable: +عادة, الجمل تٌكتب في سطور منفصلة من أجل أن تجعل الكود أسهل في القراءة: ```js run no-beautify alert('Hello'); alert('World'); ``` -## Semicolons [#semicolon] +## الفاصلة المنقوطة [#semicolon] -A semicolon may be omitted in most cases when a line break exists. +ممن الممكن حذف الفاصلة المنقوطة في معظم الحالات عند وجود سطور فاصلة. -This would also work: +هذا سيعمل أيضاً: ```js run no-beautify alert('Hello') alert('World') ``` -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). +هنا, تقوم مفسرات الجافاسكريبت على أن فواصل الأسطر تعتبر فاصلة منقوطة "ضمنية". وهذا ما يطلق عليه [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). -**In most cases, a newline implies a semicolon. But "in most cases" does not mean "always"!** +**في معظم الحالات ، يشير الخط الجديد إلى فاصلة منقوطة. لكن "في معظم الحالات" لا تعني "دائمًا"!** -There are cases when a newline does not mean a semicolon. For example: +هناك بعض الحالات التي فيها الأسطر الجديدة لاتعني فاصلة منقوطة. مثال: ```js run no-beautify alert(3 + @@ -46,22 +46,22 @@ alert(3 + + 2); ``` -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. +هذا الكود سيقوم بإخراج `6` لأن الجافا سكريبت لاتقم بوضع الفواصل المنقوطة هنا. من الواضح أنه إذا انتهي السطر بعلامة الجمع`"+"`، فإن "التعبير غير كامل"، لأن الفاصلة المنقوعة ليست مطلوبة. وفي هذه الحالة يعمل على النحو المنشود. -**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.** +**ولكن هناك حالات "تفشل فيها" الجافا سكريبت في افتراض فاصلة منقوطة حيث تكون هناك حاجة إليها حقًا.** -Errors which occur in such cases are quite hard to find and fix. +الأخطاء التي تظهر ومن الصعب الحصول عليها وحلها. -````smart header="An example of an error" -If you're curious to see a concrete example of such an error, check this code out: +````smart header="مثال على الخطأ" +إذا كنت مهتمًا برؤية مثال ملموس لمثل هذا الخطأ ، فراجع هذا الكود: ```js run [1, 2].forEach(alert) ``` -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`. +لا حاجة للتفكير في معنى الأقواس `[]` و `forEach` بعد. سندرسها لاحقًا. في الوقت الحالي ، ما عليك سوى تذكر نتيجة الرمز: حيث تُظهر `1` ثم `2`. -Now, let's add an `alert` before the code and *not* finish it with a semicolon: +الآن ، دعنا نضيف `تنبيهًا 'قبل الرمز و * لا * نكمله بفاصلة منقوطة: ```js run no-beautify alert("There will be an error") @@ -69,40 +69,40 @@ alert("There will be an error") [1, 2].forEach(alert) ``` -Now if we run the code, only the first `alert` is shown and then we have an error! +الآن لو قمت بعمل تشغيل للكود، فقط أول `تنبيه` سيظهر وبعد ذلك سنحصل على خطأ! -But everything is fine again if we add a semicolon after `alert`: +لكن كل شئ سيكون جيداً في حالة أننا قمنا بإضافة فاصلة منقوطة بعد `التنبيه`: ```js run alert("All fine now"); [1, 2].forEach(alert) ``` -Now we have the "All fine now" message followed by `1` and `2`. +الآن تظر الرسالة "All fine now" متبوعة ب `1` و `2`. -The error in the no-semicolon variant occurs because JavaScript does not assume a semicolon before square brackets `[...]`. +الخطأ في عدم وجود فاصلة منقوطة يحدث بسبب أن الجافاسكريبت لاتفترض وضع فاصلة منقوطة قبل الأقواس المربعة `[...]`. -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: +لذا ، لأن الفاصلة المنقوطة لا يتم إدراجها تلقائيًا ، يتم التعامل مع الرمز في المثال الأول على أنه عبارة واحدة. إليك كيف يراه المحرك: ```js run no-beautify alert("There will be an error")[1, 2].forEach(alert) ``` -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. +ولكن يجب أن يكون هناك جملتان منفصلتان، وليست جملة واحدة. مثل هذا الدمج في هذه الحالة هو خطأ فقط، وبالتالي الخطأ. يمكن أن يحدث في حالات أخرى. ```` -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. +نوصي بوضع الفاصلات المنقوطة بين الجمل حتى إذا كانت مفصولة بسطور جديدة. يتم إعتماد هذا من قبل المجتمع. دعونا نلاحظ مرة أخرى -- *من الممكن * ترك استخدام الفاصلات المنقوطة في أغلب الوقت. لكن الأكثر أماناً -- خصوصاً للمبتدئين -- القيام باستخدامها. -## Comments [#code-comments] +## التعليقات [#code-comments] -As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why. +مع مرور الوقت ، تصبح البرامج أكثر تعقيدًا. يصبح من الضروري إضافة * تعليقات * تصف ما يفعله الكود ولماذا. -Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them. +يمكن وضع التعليقات في أي مكان من البرنامج النصي. لا تؤثر على تنفيذه لأن المحرك يتجاهلها ببساطة. -**One-line comments start with two forward slash characters `//`.** +**التعليقات المكونة من سطر واحد تبدأ باستخدام برمزين`//`.** -The rest of the line is a comment. It may occupy a full line of its own or follow a statement. +ما تبقى من السطر هو تعليق. قد تحتل مجموعة متكاملة من تلقاء نفسها أو تتبع الجملة. Like here: ```js run @@ -112,9 +112,9 @@ alert('Hello'); alert('World'); // This comment follows the statement ``` -**Multiline comments start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */.** +**تبدأ التعليقات المكونة من أكثر من سطر بشرطة مائلة للأمام مع نجمة /* وتنتهي بنجمة مع شرطة مائلة للأمام */.** -Like this: +مثل هذا: ```js run /* An example with two messages. @@ -124,9 +124,9 @@ alert('Hello'); alert('World'); ``` -The content of comments is ignored, so if we put code inside /* ... */, it won't execute. +محتوى التعليقات يتم تجاهله، لذا إذا قمت بوضع كود داخل /* ... */, لن يعمل. -Sometimes it can be handy to temporarily disable a part of code: +في بعض الأحيان قد يكون من السهل إيقاف جزء من الكود بشكل مؤقت: ```js run /* Commenting out the code @@ -135,14 +135,14 @@ alert('Hello'); alert('World'); ``` -```smart header="Use hotkeys!" -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`. +```smart header="استخدام مفاتيح الاختصار!" +في معظم المحررات، سطر الكود يمكن أن يتم تحويله إلى تعليق بالضغط على `key:Ctrl+/` مفتاح الاختصار لتعليق سطر واحد وبعد الوقت مثل `key:Ctrl+Shift+/` -- for multiline comments (اختيار جزء من الكود والضغط على مفتاح الاختصار). بالنسبة لنظام تشغيل ماك، جرب `key:Cmd` يدلاً من `key:Ctrl` و `key:Option` بدلاً من `key:Shift`. ``` -````warn header="Nested comments are not supported!" -There may not be `/*...*/` inside another `/*...*/`. +````warn header="التعليقات المتداخلة غير مدعومة!" +قد لايكون هناك `/*...*/` داخل أخرى `/*...*/`. -Such code will die with an error: +مثل هذا الكود سيموت مع الخطأ: ```js run no-beautify /* @@ -152,8 +152,8 @@ alert( 'World' ); ``` ```` -Please, don't hesitate to comment your code. +من فضلك, لاتتردد في كتابة تعليق على الكود الخاص بك. -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. +التعليقات تزيد من البصمة الإجمالية للكود,لكن هذا ليس مشكلة على الإطلاق.هناك العديد من الأدوات التي تقوم بعمل ضغط للكود قبل نشره على خادم الإنتاج. وهم يحذفون التعليقات لذت فهي لاتظهر في نصوص العمل البرمجية. وبالتالي, التعليقات ليس لها تأثير سلبي على الإنتاج مطلقاً.. -Later in the tutorial there will be a chapter that also explains how to write better comments. +لاحقاً في البرنامج التعليمي سيكون هناك فصلاً عن والذي يشرح كيف تكب تعليقات جيدة.