انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 04
دورة جافا سكريبت

قواعد كتابة كود جافا سكريبتJavaScript Syntax

ستتعلم في هذا الدرس قواعد وشروط بناء العبارات في لغة جافا سكريبت ومتي تستخدم الفواصل المنقوطة semicolons والقواعد الاساسية مثل استخدام علامات التنصيص Quotations مع النصوص.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
9
الأمثلة
24
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,315
محتوى الدرس
في هذا الدرس 9تصفّح المواضيع

JavaScript Semicolons الفواصل المنقوطة في لغة جافا سكريبت

الفاصلة المنقوطة (;) في JavaScript تُستخدم لإنهاء التعليمات البرمجية (Statements)، وهي تشبه النقطة في نهاية الجملة في اللغة الإنجليزية. لكنها ليست إلزامية دائمًا في JavaScript، حيث يمكن للمترجم (JavaScript Engine) أن يضيفها تلقائيًا في بعض الحالات، وهي ميزة تُعرف بـ ASI - Automatic Semicolon Insertion (إدراج الفاصلة المنقوطة تلقائيًا).


هل يجب استخدام الفاصلة المنقوطة؟ هناك مدرستان برمجيتان بخصوص استخدام الفاصلة المنقوطة في JavaScript:

المدرسة التي تؤيد استخدام الفاصلة المنقوطة دائمًا:

  • توفر وضوحًا للكود.
  • تقلل من احتمالية الأخطاء الناتجة عن ASI.
  • تسهّل التعاون مع المطورين الذين يستخدمون لغات أخرى تتطلب الفاصلة المنقوطة (مثل Java أو C++).

المدرسة التي تعتمد على ASI وتتجنب الفاصلة المنقوطة:

  • تجعل الكود أنظف وأبسط.
  • تعتمد على محرك JavaScript لإدراجها عند الحاجة.
  • تستخدم فقط في الحالات التي تكون فيها ضرورية لتجنب الأخطاء.

Semicolons

يُنصح بإنهاء كل عبارة في JavaScript بفاصلة منقوطة (Semicolon).

HTML 
console.log("This text is written using JavaScript semicolons.");
console.log("Every statement in JavaScript should end with a semicolon (;).");
جرّب بنفسك

Without semicolons

يمكن أن تنتهي بعض العبارات في JavaScript بدون فاصلة منقوطة (Semicolon).

HTML 
console.log("This text is written using JavaScript semicolons")
console.log("Every statement in JavaScript does not always require a semicolon")
جرّب بنفسك

Single Quotes and Double Quotes in JavaScript علامات الاقتباس المفردة والمزدوجة في جافا سكريبت

الفرق بين علامات الاقتباس المفردة (') والمزدوجة ("):

في JavaScript، يمكنك استخدام أيٍ من علامات الاقتباس لإنشاء سلاسل نصية (Strings)، وكلاهما يؤدي نفس الوظيفة. الفرق الأساسي يكون في الأسلوب والتفضيل الشخصي.


متى تستخدم المفردة (') أو المزدوجة ("):

  • لا فرق وظيفي بينهما، ويعتمد الاختيار على أسلوب الكتابة أو معايير الفريق.
  • يفضل بعض المطورين استخدام علامات الاقتباس المفردة (') في JavaScript لأنها أقل شيوعًا في HTML، مما يقلل من الحاجة إلى الهروب (escaping) عند العمل مع HTML داخل JavaScript.
  • في المقابل، يفضل البعض الاقتباس المزدوج (") لجعل الكود متناسقًا مع لغات أخرى مثل JSON التي تعتمد على علامات الاقتباس المزدوجة.


متى يجب اختيار نوع معين؟

  • إذا كان النص يحتوي على علامة اقتباس داخلية من نفس النوع، تحتاج إلى الهروب (\) أو استخدام النوع الآخر.

(') using single quotes

مثال على استخدام علامات الاقتباس المفردة ('):

HTML 
console.log('Hello, World!');

(") using double quotes

مثال على استخدام علامات الاقتباس المزدوجة ("):

HTML 
console.log("Hello, World!");

(") using single quotes (') when the text contains double quotes

مثال باستخدام علامات الاقتباس المفردة (') عندما يحتوي النص على علامات مزدوجة ("):

HTML 
console.log('He said, "JavaScript is awesome!"');

Use \ to escape the quote inside the text

يمكنك استخدام \ للهروب من العلامة داخل النص:

HTML 
console.log('It\'s a beautiful day!');

✅ Escape Character

لأن النص محاط بعلامات اقتباس مزدوجة (")، فلا يوجد تعارض مع علامة الاقتباس المفردة (') داخل النص، وبالتالي لا تحتاج إلى الهروب (\).

HTML 
console.log("It's a beautiful day!"); // Output: It's a beautiful day!

✅ Escape Character

لأن النص محاط بعلامات اقتباس مزدوجة (")، فلا يوجد تعارض مع علامة الاقتباس المفردة (') داخل النص، وبالتالي لا تحتاج إلى الهروب (\).

HTML 
console.log("It's a 'beautiful' day!"); // Output: It's a 'beautiful' day!

✅ Escape Character

لأن النص محاط بعلامات اقتباس المفردة (')، فلا يوجد تعارض مع علامة الاقتباس المزدوجة (") داخل النص، وبالتالي لا تحتاج إلى الهروب (\).

HTML 
console.log('Close"Tag"!'); // Output: Close"Tag"!
  • إذا كنت تستخدم علامات اقتباس مفردة (')، فالهروب (\) ضروري داخل النص عند وجود ' فيه.
  • إذا كنت تستخدم علامات اقتباس مزدوجة (")، فلا حاجة للهروب (\) عند وجود ' داخل النص.

?When to Use Values Without Quotes in JavaScript متى تستخدم القيم بدون علامات اقتباس في جافا سكريبت؟

في JavaScript، ليست كل القيم بحاجة إلى أن تكون محاطة بعلامات اقتباس (' أو "). بعض القيم تُكتب مباشرة بدون أي اقتباسات لأن JavaScript يفهمها كأنواع بيانات أخرى غير النصوص (Strings).

  • الأرقام (Numbers).
  • القيم المنطقية (Boolean Values).
  • الكائنات والمصفوفات (Objects & Arrays).
  • الكلمات المحجوزة (Reserved Keywords).

Numbers

عند التعامل مع الأرقام، لا تحتاج إلى استخدام علامات اقتباس، لأن JavaScript يتعرف عليها مباشرة كقيم رقمية.

HTML 
console.log(5 + 5 ); // Output: 10 (عملية حسابية)

Numbers with Quotes

مثال خاطئ (باستخدام علامات اقتباس، مما يحول الرقم إلى نص): لأن JavaScript سيعتبر القيم بين علامات الاقتباس نصوصًا (String) وليس أرقامًا (Number)، مما قد يؤدي إلى أخطاء عند إجراء العمليات الحسابية.

HTML 
console.log("5 + 5"); // Output: 5 + 5  (عملية دمج نصوص)

Boolean Values Without Quotes in JavaScript القيم المنطقية بدون علامات اقتباس في جافا سكريبت

القيم المنطقية (true و false) في JavaScript تُستخدم بدون علامات اقتباس، لأنها ليست نصوصًا، بل تمثل حالة منطقية (Boolean values).


لماذا لا نستخدم علامات اقتباس مع true و false؟

لأن JavaScript يتعامل معها كقيم منطقية (Boolean)، وعند وضعها بين علامات اقتباس، تصبح مجرد نصوص (String) لا يمكن استخدامها في العمليات المنطقية بشكل صحيح.

Boolean Values Without Quotes

مثال صحيح (بدون علامات اقتباس) مع القيم المنطقية (Boolean Values):

HTML 
console.log(true); // Output: true -> Boolean

Boolean Values With Quotes

مثال غير صحيح (بعلامات اقتباس) مع القيم المنطقية (Boolean Values):

HTML 
console.log("true"); // "true";  -> String

Objects and Arrays Without Quotes in JavaScript الكائنات والمصفوفات بدون علامات اقتباس في جافا سكريبت

الكائنات (Objects) والمصفوفات (Arrays) لا تحتاج إلى علامات اقتباس، لكن المفاتيح داخل الكائنات قد تحتاج إلى اقتباس في بعض الحالات.

في JavaScript، المفاتيح (Keys) يمكن أن تكتب بدون علامات اقتباس طالما أنها لا تحتوي على مسافات أو رموز خاصة.


متى تحتاج إلى علامات اقتباس في أسماء المفاتيح؟

عند استخدام أسماء تحتوي على مسافات أو رموز خاصة مثل (- أو @).

Objects Values Without Quotes

مثال صحيح بدون علامات اقتباس في الكائنات:

HTML 
let person = {
    name: "Mohamed",
    age: 30,
    isStudent: false
};
console.log(person.name); // Output: Mohamed

Objects Values With Quotes

مثال خاطئ باستخدام علامات اقتباس حول المفتاح بدون داعٍ:

HTML 
let person = {
    "name": "Mohamed",
    "age": 30,
    "isStudent": false
};

متى تحتاج إلى علامات اقتباس في أسماء المفاتيح في الكائنات؟

عند استخدام أسماء تحتوي على مسافات أو رموز خاصة مثل (- أو @) في أسماء المفاتيح في الكائنات.

HTML 
let person = {
    "full name": "Mohamed Ahmed",
    "email-address": "[email protected]"
};

console.log(person["full name"]); // Output: Mohamed Ahmed

Arrays Values Without Quotes

مثال صحيح (بدون علامات اقتباس حول عناصر المصفوفة غير النصية):

HTML 
let numbers = [1, 2, 3, 4, 5];
console.log(numbers); // Output: [1, 2, 3, 4, 5]

let mixedArray = [true, false, null, undefined, 42];
console.log(mixedArray); // Output: [true, false, null, undefined, 42]

Arrays Values With Quotes

مثال خاطئ (باستخدام علامات اقتباس مع المصفوفات غير ضرورية حول القيم غير النصية):

HTML 
let numbers = ["1", "2", "3", "4", "5"];
console.log(numbers); // Output: ["1", "2", "3", "4", "5"] (Strings, not numbers)

let mixedArray = ["true", "false", "null", "undefined", "42"];
console.log(mixedArray); // Output: ["true", "false", "null", "undefined", "42"] (All are strings)

Reserved Keywords Without Quotes in JavaScript الكلمات المحجوزة بدون علامات اقتباس في جافا سكريبت

بعض القيم في JavaScript تمثل كلمات محجوزة ولا تحتاج إلى علامات اقتباس، مثل:

  • null
  • undefined
  • NaN


 لماذا لا نستخدم علامات اقتباس مع null و undefined؟

لأنها ليست نصوصًا، بل تمثل حالات خاصة داخل JavaScript.

Reserved Keywords Without Quotes

مثال على القيم المحجوزة بدون اقتباس:

HTML 
console.log(null);  // Output: null

Reserved Keywords With Quotes

مثال خاطئ باستخدام علامات اقتباس:

HTML 
console.log("null"); // Output: "null" (String, تطبع كنص)

When to Use Each Type of Quotation Marks in JavaScript? متى تستخدم كل نوع من أنواع علامات الاقتباس في جافا سكريبت؟

في JavaScript، يمكنك استخدام علامات الاقتباس المفردة (') والمزدوجة (") والـ Backticks (``) لإنشاء النصوص، لكن لكل نوع استخدامه الأمثل. الجدول التالي يوضح متى يجب استخدام كل نوع منها:

النوع متى تستخدمه؟

علامات الاقتباس المزدوجة (")

عند الحاجة إلى تضمين نصوص تحتوي على علامات اقتباس مفردة (').

علامات الاقتباس المفردة (')

عند الحاجة إلى تضمين نصوص تحتوي على علامات اقتباس مزدوجة (").

بدون علامات اقتباس

عند استخدام المتغيرات أو القيم المنطقية (true / false) أو الأرقام.

الـ Backticks (``)

عند الحاجة إلى تضمين متغيرات داخل النصوص أو عند كتابة نصوص متعددة الأسطر.



String Concatenation in JavaScript دمج النصوص في جافا سكريبت

دمج النصوص (Concatenation) هو عملية ربط النصوص (Strings) معًا لإنشاء نص جديد. في JavaScript، هناك عدة طرق لدمج النصوص، وأكثرها شيوعًا استخدام عامل الجمع (+) و Template Literals (Backticks).


كيف يعمل؟

  • يتم جمع (+) النصوص معًا لإنشاء نص جديد.
  • تمت إضافة مسافة (" ") بين الاسمين لضمان أن الناتج يبدو طبيعيًا.


String Concatenation

يمكنك استخدام علامة + لدمج نصوص متعددة في JavaScript.

JavaScript 
let firstName = "Ahmed";
let lastName = "Ali";
let fullName = firstName + " " + lastName;

console.log(fullName); // Output: Ahmed Ali
جرّب بنفسك

String Concatenation

مثال باستخدام Template Literals (Backticks) بدلًا من عامل الجمع (+):

HTML 
let firstName = "Ahmed";
let lastName = "Ali";
let fullName = `${firstName} ${lastName}`;

console.log(fullName); // Output: Ahmed Ali

ما الذي تغير؟

  • استخدمنا Backticks (``) بدلاً من علامات الاقتباس العادية.
  • استخدمنا ${} لإدراج المتغيرات داخل النص بدون الحاجة إلى +.

Template Literal القوالب النصية

هي طريقة متقدمة للتعامل مع النصوص في JavaScript باستخدام العلامات المائلة (Backticks) بدلاً من علامات الاقتباس العادية (' أو "). تتيح هذه الطريقة إدراج المتغيرات والتعبيرات البرمجية داخل النصوص باستخدام ${}.


لماذا نستخدمها؟

  • تسمح بإدراج المتغيرات مباشرة داخل النص بدون الحاجة إلى استخدام علامة + للربط.
  • تدعم النصوص متعددة الأسطر بدون الحاجة إلى \n.


لماذا تعتبر هذه الطريقة أفضل؟

  • أكثر وضوحًا وسهولة في القراءة.
  • لا تحتاج إلى علامات +، بل يتم إدراج المتغيرات مباشرة داخل ${}.
  • تدعم النصوص متعددة الأسطر بدون الحاجة إلى \n.

Template Literals: javascript

✅ مثال على استخدام القوالب النصية في جافا سكريبت.

HTML 
console.log(`Hello, ${"mohamed"}!`); // Output: Hello, mohamed!

Template Literals with variable

✅ مثال على استخدام القوالب النصية في جافا سكريبت مع المتغيرات.

HTML 
let name = "Mohamed";
console.log(`Hello, ${name}!`); // Output: Hello, Mohamed!

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…