٢٥ مارس ٢٠٢١

خواصّ جافا سكريبت

يلخص هذا الفصل بإيجاز ميزات جافا سكريبت التي تعلمناها حتى الآن، مع التركيز بشكل دقيق على مواضيع معيّنة.

هيكل الكود البرمجي

يتم الفصل بين التعابير بفاصلة منقوطة:

alert('Hello'); alert('World');

كما يمكن اعتبار السطر الجديد كفاصل أيضاً بين التعابير:

alert('Hello')
alert('World')

وهذا ما ندعوه بـِ “الإدراج التلقائي للفاصلة المنقوطة”، ولكنه لا يعمل بشكل صحيح في بعض الأحيان، فعلى سبيل المثال:

alert("There will be an error after this message")

[1, 2].forEach(alert)

وهنا يجب التنويه أن معظم الأدلة والبرامج التعليمية تشير إلى أنه من الأفضل أن نضع الفواصل المنقوطة عند نهاية التعابير.

إلا أنه ليس مطلوبٌ وضع هذه الفواصل المنقوطة عند نهاية أقواس الكتل البرمجية {...} والتعليمات الخاصة كالحلقات على سبيل المثال:

function f() {
  // ليس من المطلوب وضع الفاصلة المنقوطة بعد تعريف التابع
}

for(;;) {
  // ليس من المطلوب وضع الفاصلة المنقوطة بعد الحلقة التكرارية
}

ولكن حتى لو قمنا بوضع فاصلة منقوطة إضافية في مكان ما، فهذا ليس بخطأ، حيث سيتمّ تجاهلها.

للمزيد من التفاصيل: بنية الشيفرة البرمجية.

الوضع الدقيق (الصارم) (Strict mode)

لتمكين وتفعيل جميع ميزات الإصدار الحديث من جافا سكريبت، يجب علينا بدء أي ملف لبرنامج معين بـِ "use strict".

'use strict';

...

يجب وضع هذه التعليمة أو التوجيه في أعلى النص البرمجي أو في بداية جسم التابع.

وبدون وضع التعليمة "use strict"، سيعمل كل شيء على ما يرام، ولكن ستعمل بعض الميزات بأسلوبها القديم المتوافق مع السلوك الحديث. لذلك يُفضل عموماً استخدام هذا الأسلوب الأحدث.

جديرٌ بالذكر، أن بعضاً من هذه الميزات (كالصفوف التي سندرسها في المستقبل) تقوم بتفعيل هذا الوضع الحديث (الدقيق) بشكل ضمني حتى لو لم يتم كتابة التعليمة بشكل صريح.

للمزيد من المعلومات: الوضع الصارم: النمط الحديث لكتابة الشيفرات.

المتحولات (المتغيرات)

يُمكن تعريفها كالتالي:

  • let
  • const (ثابت، لا يمكن تغيير قيمته)
  • var (باستخدام الأسلوب القديم، كما سنراه لاحقاً)

يمكن أن يحتوي اسم المتحول على:

  • الحروف والأرقام، ولكن بشرط ألا يكون المحرف الأول رقماً.
  • تعتبر المحارف $ و _ طبيعية، وتعامل مثلها كمثل الحروف.
  • يُسمح أيضاً بالأبجدية الهيروغليفية غير اللاتينية، ولكن عادةً لا يتم استخدامها.

المتغيرات هي ديناميكية النمط. أي يمكن تخزين أي قيمة فيها:

let x = 5;
x = "John";

وهناك 8 أنواع من أنماط البيانات:

  • number لكل من الأرقام العشرية والأرقام الصحيحة،
  • bigint للأرقام الصحيحة غير محددة الطول،
  • string لسلاسل المحارف,
  • boolean للقيم المنطقية: true/false,
  • null – وهو نوع بقيمة واحدة وهي null, وتعني “فارغ” أو “غير موجود”,
  • undefined – وهو نوع بقيمة واحدة وهي undefined, وتعني “غير مُسند”,
  • object و symbol – وتستخدم لبُنى المعطيات المعقدة والمُعرّفات الفريدة أو غير المتكررة، ولم نتطرق لذكر هذه الأنماط بعد.

يُعيد العامل typeof النمط الخاص بقيمة معيّنة، باستثناء الحالتين التالييتين:

typeof null == "object" // خطأ في اللغة
typeof function(){} == "function" // يتم معالجة التوابع بشكل خاص

للمزيد من التفاصيل: المتغيرات وَ أنماط البيانات.

التفاعل مع المتصفح

نحن نستخدم المتصفح كبيئة عمل، لذا تكون واجهات المستخدم الأساسية للتفاعل معه هي:

prompt(question, [default])
عن طريق هذه التعليمة يتم طرح سؤال على المستخدم، مع حقل نصّي لإدخال الجواب المناسب، فيتم إرجاع القيمة التي أدخلها المستخدم أو null إذا نقر على زر الإلغاء (cancel).
confirm(question)
تقوم هذه التعليمة بطرح سؤال مع إمكانية الجواب بموافق (Ok) أو إلغاء (Cancel). وبحسب الاختيار يتم إرجاع قيمة false/true.
alert(message)
تقوم هذه التعليمة بإظهار رسالة معيّنة message.

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

على سبيل المثال:

let userName = prompt("Your name?", "Alice");
let isTeaWanted = confirm("Do you want some tea?");

alert( "Visitor: " + userName ); // Alice
alert( "Tea wanted: " + isTeaWanted ); // true

للمزيد من التفاصيل: التفاعل: alert ، prompt ، confirm.

العوامل

تدعم جافا سكريبت العوامل التالية:

العوامل الرياضية

العوامل النظامية المعروفة كـَ * + - /، بالإضافة لـِ % لحساب باقي القسمة و ** لحساب قوى أو أسّ عدد معين.

يقوم العامل الرياضي + بضم سلاسل المحارف أيضاً (strings). وفي حال كان أي من المعاملات (طرفي العامل) من نمط سلسلة محارف، يتم تحويل نمط الطرف الآخر لسلسلة محارف أيضاً في حال لم يكن كذلك:

alert( '1' + 2 ); // '12', string
alert( 1 + '2' ); // '12', string
الإسناد

الإسناد البسيط هو من الشكل: a = b أما الإسناد المركّب فهو من الشكل a *= 2.

عوامل البِتّات (Bitwise)

تقوم عوامل الـ Bitwise بالعمل مع الأعداد الصحيحة من فئة 32-بِت على الأقل، فهي تعمل على مستوى البِت، وللاطلاع عليها يمكن مراجعة التوثيق عند الحاجة.

العوامل الشرطية

والعامل الشرطي هو العامل الوحيد الذي يأخذ ثلاث معاملات: cond ? resultA : resultB. فإذا كان الشرط cond صحيحاً، سيتمّ إرجاع resultA وإلا سيتم إرجاع resultB.

العوامل المنطقية

تقوم العوامل المنطقية AND && وَ OR || باختصار عملية تقييم الكود البرمجي وإرجاع تلك القيمة حيث توقفت (وليس بالضرورة أن تكون تلك القيمة true/false). أما النفي المنطقي NOT ! فيقوم بتحويل المعامل المُمرّر إلى نمط boolean ويرد القيمة المعاكسة له (نفي الشرط أو عكسه).

عامل دمج القيم الفارغة (غير الموجودة)

يقدّم العامل ?? طريقة لاختيار قيمة محدّدة بين قائمة من المتحولات (المتغيرات). فنتيجة التعبير التالي a ?? b هي قيمة a ما لم تكن قيمته null/undefined، وإلا قيمة b.

المقارنات

يقوم عامل التحقق من المساواة == للأنماط المختلفة بتحويل المعاملات لنمط رقم (number) (مالم تكن null أو undefined والتي تتساوى مع بعضها البعض ولا شي آخر يتساوى معها)، وبناءً عليه تعتبر التعابير التالية متساوية:

alert( 0 == false ); // true
alert( 0 == '' ); // true

والمقارنات الأخرى تتحوّل لرقم أيضاً.

في حين لا يقوم عامل المقارنة الدقيق === بالتحويل: أي أن الأنماط المختلفة تعني وجود قيم مختلفة دائماً.

أما القيم null و undefined فلها وضعٌ خاص: حيث تتساوى مع بعضها البعض عن طريق عامل المقارنة == ولا تتساوى مع أي شيء آخر.

تقوم مقارنات الـ أكبر/أصغر بمقارنة سلسلة المحارف محرف محرف، في حين باقي الأنماط يتم تحويلها لنمط الرقم (number).

عوامل أخرى

هناك عوامل أخرى كذلك، كعامل الفاصلة.

للمزيد من التفاصيل: العاملات الأساسية والرياضيات, المقارنات, العوامل المنطقية, عامل التحقق من الفراغ '??'.

الحلقات التكرارية

  • كنا قد قمنا سابقاً بتغطية ثلاثة أنواعٍ للحلقات:

    // 1
    while (condition) {
      ...
    }
    
    // 2
    do {
      ...
    } while (condition);
    
    // 3
    for(let i = 0; i < 10; i++) {
      ...
    }
  • يكون المتحول المعرف ضمن for(let...) مرئياً فقط داخل الحلقة. ولكن بإمكاننا حذف let وإعادة استخدام متحول معرّف قبل ذلك.

  • تسمح التعمليات break/continue بالخروج من الحلقة بشكل كامل أو من التكرار الحالي فقط. يمكنك استخدامها لكسر الحلقات التكرارية المتداخلة.

للمزيد من التفاصيل: الحلقات التكرارية: while و for.

سنقوم لاحقاً بدراسة المزيد من أنواع الحلقات التكرارية والتي تتعامل مع الأغراض (الكائنات).

جملة “switch”

يمكن أن تحلّ البنية البرمجية “switch” محلّ العديد من التحققات المبنية باستخدام if. حيث تستخدم عامل المقارنة الدقيق === للتحقق من القيم الممررة.

على سبيل المثال:

let age = prompt('Your age?', 18);

switch (age) {
  case 18:
    alert("Won't work"); // نتيجة أو خرج التابع السابق هو من نمط سلسلة من المحارف وليس برقم
    break;

  case "18":
    alert("This works!");
    break;

  default:
    alert("Any value not equal to one above");
}

للمزيد من التفاصيل: جملة "switch".

الدوال (التوابع)

كنا قد قمنا بتغطية ثلاثة أنواع لإنشاء الدوال في جافا سكريبت:

  1. تعريف الدالة: حيث تكون الدالة موجودة ضمن نطاق التنفيذ الأساسي

    function sum(a, b) {
      let result = a + b;
    
      return result;
    }
  2. الدوال كتعابير: حيث تكون الدوال موجودة ضمن سياق تعبير عادي وليس كتعريف كما سبق

    let sum = function(a, b) {
      let result = a + b;
    
      return result;
    };
  3. الدوال كأسهم: (حيث تُرسم الدوال بطريقة تشبه شكل السهم)

    // توضع التعابير في الطرف اليميني
    let sum = (a, b) => a + b;
    
    // أو يمكن استخدام أكثر من سطر مع أقواس الكتل {...}
    // ولكن سنحتاج لتعليمة return هنا:
    let sum = (a, b) => {
      // ...
      return a + b;
    }
    
    // بلا معاملات
    let sayHi = () => alert("Hello");
    
    // مع معامل وحيد
    let double = n => n * 2;
  • يمكن أن تتضمن الدالة على متغيرات محلية: وهي المتغيرات التي يتم تعريفها ضمن جسم الدالة. وهذه المتغيرات تكون مرئية فقط ضمن الدالة نفسها.
  • يمكن أن تحتوي المعاملات على قيم افتراضية: {...} function sum(a = 1, b = 2).
  • تقوم الدوال بإرجاع قيمة دائماً. وإذا لم يكن هنالك تعليمة return، ستكون النتيجة هي undefined.

للمزيد من التفاصيل: الدوال, أساسيات Arrow functions.

المزيد قادم

كانت تلك قائمة مختصر بميزات جافا سكريبت، وحتى الآن قمنا بدراسة الأساسيات فقط. علاوةً على ذلك وفي البرنامج التعليمي، ستجد المزيد من الميزات الخاصة والمتقدمة لجافا سكريبت.

خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)