Syntax_Tr -

🎯 ما ستتعلمه في هذا التدريب

هذا التدريب التفاعلي سيساعدك على إتقان قواعد اللغة (Syntax) في JavaScript من خلال:

✅ 50 سؤال تفاعلي تغطي جميع قواعد كتابة الكود
✅ فهم قواعد تسمية المتغيرات الصحيحة
✅ إتقان كتابة التعليقات والتعليقات متعددة الأسطر
✅ تطبيق مبدأ DRY (Don't Repeat Yourself) في البرمجة
✅ استخدام القوالب النصية (Template Literals) الحديثة
✅ فهم حساسية حالة الأحرف وتأثيرها على المتغيرات
✅ كتابة الجمل والتعابير بشكل صحيح
✅ إضافة ملفات JavaScript إلى صفحات HTML
✅ استخدام الأحرف الخاصة بشكل صحيح
✅ إمكانية إعادة التدريب لتحسين مستواك وتعزيز المفاهيم

🏗️ ما هي قواعد اللغة (Syntax) في JavaScript؟

قواعد اللغة (Syntax) هي مجموعة القواعد والمبادئ التي تحدد كيفية كتابة برامج JavaScript. مثلما تحتوي اللغة العربية على قواعد نحوية تحدد كيفية تكوين الجمل، تحتوي JavaScript على قواعد تحدد كيفية كتابة الأوامر والتعليمات البرمجية بشكل صحيح حتى يفهمها المتصفح.

✅ بناء الجمل (Statements): كيفية كتابة الأوامر والتعليمات
✅ التعليقات (Comments): كيفية إضافة شروح توضيحية للكود
✅ تسمية المتغيرات (Naming): قواعد اختيار أسماء المتغيرات والدوال
✅ الأحرف الخاصة (Escape Characters): كيفية كتابة الرموز الخاصة
✅ الكتل البرمجية (Code Blocks): تنظيم الكود داخل أقواس {}
✅ النصوص (Strings): طرق كتابة النصوص بشكل صحيح

📝 الجمل (Statements) في JavaScript

الجملة (Statement) هي وحدة تنفيذية في JavaScript. كل جملة تخبر المتصفح بتنفيذ أمر معين. يمكن أن تكون الجملة بسيطة مثل تعيين قيمة لمتغير، أو معقدة مثل حلقة تكرار.

                // أمثلة على الجمل في JavaScript

                let name = "أحمد"; // جملة تعيين

                console.log("مرحباً"); // جملة استدعاء دالة

                if (age > 18) { // جملة شرطية

                  console.log("بالغ");

                }

                for (let i = 0; i < 5; i++) { // جملة حلقة

                  console.log(i);

                }

ملاحظة: الفاصلة المنقوطة (;) في نهاية الجملة ليست إلزامية في JavaScript ولكنها موصى بها بشدة لتجنب الأخطاء.

💬 التعليقات (Comments) في JavaScript

التعليقات هي ملاحظات توضيحية للمبرمجين وتُهمل عند تنفيذ الكود. تساعد في فهم الكود وتوثيقه.

                // هذا تعليق على سطر واحد - يستخدم //

                /*

                  هذا تعليق متعدد الأسطر

                  يمكن أن يمتد على عدة أسطر

                  يستخدم /* في البداية و */ في النهاية

                */

                // التعليقات تستخدم ل:

                // 1. شرح منطق الكود المعقد

                // 2. تعطيل أجزاء من الكود مؤقتاً للتصحيح

                // 3. توثيق الدوال والمتغيرات

                // 4. تذكير المبرمجين بمهام مستقبلية

مبدأ DRY: Don't Repeat Yourself - لا تكرر نفسك. استخدم الدوال وإعادة الاستخدام بدلاً من كتابة نفس الكود مراراً.

🏷️ تسمية المتغيرات (Naming Conventions)

JavaScript تتبع قواعد محددة لتسمية المتغيرات والدوال (المعرفات - Identifiers):

تبدأ بحرف أو $ أو _
لا يمكن أن تبدأ برقم
يمكن أن تحتوي على حروف، أرقام، $، _
JavaScript لغة حساسة لحالة الأحرف (Case Sensitive)
لا يمكن استخدام الكلمات المحجوزة (Reserved Words)

                // أسماء متغيرات صحيحة

                let name = "أحمد";

                let _private = "خاص";

                let $element = document.getElementById("id");

                let firstName = "محمد"; // camelCase

                let user_age = 25; // snake_case (ليس شائعاً في JS)

                // أسماء متغيرات خاطئة

                // let 1stName = "أحمد"; // ❌ يبدأ برقم

                // let user-name = "محمد"; // ❌ يحتوي على شرطة

                // let let = "كلمة محجوزة"; // ❌ كلمة محجوزة

الأسلوب المفضل في JavaScript: استخدم camelCase للمتغيرات والدوال، و PascalCase للكلاسات.

🔤 النصوص (Strings) في JavaScript

يمكن كتابة النصوص (Strings) في JavaScript بثلاث طرق:

                // 1. باستخدام 

علامات التنصيص المزدوجة

                let str1 = "مرحباً بالعالم";

                // 2. باستخدام علامات التنصيص المفردة

                let str2 = 'مرحباً بالعالم';

                // 3. باستخدام القوالب النصية (Template Literals) - ES6+

                let name = "أحمد";

                let str3 = `مرحباً ${name}!`; // دمج متغيرات

                let multiLine = `هذا نص

                على عدة

                أسطر`; // نصوص متعددة الأسطر

                // الأحرف الخاصة (Escape Characters)

                let quote = "قال: \"مرحباً\""; // \" لكتابة "

                let path = "C:\\Users\\Ahmad"; // \\ لكتابة \

                let newLine = "سطر أول\nسطر ثاني"; // \n لسطر جديد

⚡ الخصائص المهمة لـ Syntax في JavaScript

حساسية حالة الأحرف (Case Sensitive): myVar و MyVar و MYVAR ثلاثة متغيرات مختلفة
تجاهل المسافات البيضاء: JavaScript تتجاهل المسافات الإضافية والسطور الفارغة (لكنها مهمة للقراءة)
الكتل البرمجية (Code Blocks): تستخدم الأقواس المعقوفة {} لتجميع مجموعة من الجمل
الكلمات المحجوزة (Reserved Words): لا يمكن استخدامها كأسماء متغيرات مثل: if, for, function, class, etc.
التعبيرات (Expressions): أي كود ينتج قيمة، مثل: 5 + 3 أو x = 10

                // مثال يوضح الخصائص المختلفة

                let age = 25; // camelCase

                let Age = 30; // متغير مختلف (Case Sensitive)

                // JavaScript تتجاهل المسافات البيضاء

                let x=5; // نفس let x = 5;

                function greet() { // كتلة برمجية

                  console.log("مرحباً");

                  console.log("بالعالم");

                }

                // تعبيرات (Expressions)

                let sum = 5 + 3; // تعبير حسابي

                let isAdult = age >= 18; // تعبير منطقي

✨ مبادئ كتابة الكود الجيد في JavaScript

كتابة الكود بشكل صحيح لا يعني فقط أن يعمل الكود، بل أن يكون سهل القراءة والصيانة. إليك أهم المبادئ:

الوضوح قبل الذكاء: كود واضح أفضل من كود ذكي لكن معقد
التعليقات الذكية: اشرح لماذا كتبت الكود، وليس ماذا يفعل (ما يفعله يجب أن يكون واضحاً من الكود نفسه)
وظيفة واحدة لكل دالة: كل دالة يجب أن تؤدي مهمة واحدة فقط
أسماء ذات معنى: استخدم أسماء متغيرات ودوال تعبر عن وظيفتها
التنسيق المتسق: استخدم تنسيقاً موحداً للفواصل والأقواس والمسافات
تجنب التكرار: إذا وجدت نفس الكود مكتوباً في أكثر من مكان، حوله إلى دالة
كود بسيط: الحل البسيط غالباً ما يكون الأفضل

                // ❌ كود معقد وغير واضح

                function p(a,b,c){r=0;f=1;i=0;while(i<c){r+=a*f;f*=b;i++;}return r;}

                // ✅ كود واضح وذو معنى

                function calculateSeriesSum(firstTerm, ratio, termsCount) {

                  let sum = 0;

                  let currentTerm = firstTerm;

                  for (let i = 0; i < termsCount; i++) {

                    sum += currentTerm;

                    currentTerm *= ratio;

                  }

                  return sum;

                }

🚨 أخطاء شائعة في كتابة Syntax وكيفية تجنبها

إليك بعض الأخطاء الشائعة التي يرتكبها المبتدئون في JavaScript وكيفية تجنبها:

                // 1. نسيان الفاصلة المنقوطة في نهاية الجمل

                let x = 5 // ❌ يفضل إضافة ;

                let y = 10; // ✅

                // 2. استخدام علامات تنصيص غير متطابقة

                let name = 'أحمد"; // ❌ علامات غير متطابقة

                let name = 'أحمد'; // ✅ علامات متطابقة

                let name = "أحمد"; // ✅ علامات متطابقة

                // 3. أسماء متغيرات غير صالحة

                let user-name = "أحمد"; // ❌ يحتوي على شرطة

                let userName = "أحمد"; // ✅ camelCase

                let user_name = "أحمد"; // ✅ snake_case (نادر)

                // 4. نسيان الأقواس في الشروط

                if age > 18 // ❌ نسيان الأقواس

                if (age > 18) { // ✅ أقواس موجودة

                  // ...

                }

                // 5. الخلط بين = و == و ===

                if (x = 5) { // ❌ تعيين بدلاً من مقارنة

                if (x == 5) { // ✅ مقارنة بقيمة

                if (x === 5) { // ✅ مقارنة بقيمة ونوع

نصيحة: استخدم محرر كود مثل VS Code الذي يظهر الأخطاء النحوية (Syntax errors) تلقائياً.

📚 قائمة التدريبات

✏️ قواعد اللغة (Syntax) في JavaScript