لا شك أنَّك تعرَّفت مسبقًا على معاملات الموازنة من أحد دروس الرياضيات في المدرسة وهي:

• أكبر/أصغر من: a < b - a > b.
• أكبر/أصغر من أو يساوي: a <= b - a >= b.
• المساواة: a == b (يرجى ملاحظة أنَّ هذا المعامل عبارة عن علامة يساوي مزدوجة =. العلامة المنفردة a = b خاصة بمعامل الإسناد الذي تحدثنا عنه في المقال السابق).
• عدم المساواة: يُعبر عنه في الرياضيات بالرمز≠، ولكن يُعبِّر عنه برمجيًّا في JavaScript بإشارة يساوي منفردة مع إشارة تعجب قبلها بالشكل: a != b.

النتيجة عبارة عن قيمة منطقية

مثل كل المعاملات الأخرى، تُرجِع معاملات الموازنة قيمة منطقية دومًا.

• true - تعني «نعم» أو «صواب» أو «الموازنة مُحقَّقة».
• false - تعني «لا» أو «خطأ» أو «الموازنة غير مُحقَّقة».

إليك أمثلة عن هذه المعاملات:

alert( 2 > 1 );  // true (الموازنة صحيحة)
alert( 2 == 1 ); // false (الموازنة خطأ)
alert( 2 != 1 ); // true (الموازنة صحيحة)

يمكن إسناد نتيجة معامل الموازنة لمتغير تمامًا مثل أي قيمة:

let result = 5 > 4; // إسناد الناتج من عملية الموازنة لمتغير
alert( result ); // true

موازنة السلاسل النصية

لمعرفة ما إذا كانت السلسلة النصية أكبر من الأخرى، تستخدم JavaScript ما يسمى بترتيب القاموس (dictionary) أو ترتيب المعجم (lexicographical). بمعنى آخر، تتم موازنة السلاسل النصية حرفًا تلو الآخر. على سبيل المثال:

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

خوارزمية موازنة سلسلتين نصيتين بسيطة:

1. موازنة الحرف الأول من كلا السلسلتين.
2. إذا كان الحرف الأول من السلسلة النصية الأولى أكبر (أو أقل) من السلسلة النصية الأخرى، حينها تكون الأولى أكبر (أو أقل) من الثانية وبذلك تنتهي عملية الموازنة.
3. لكن إذا كانت الأحرف الأولى في كلا السلسلتين متماثلة، وازن الأحرف الثانية بالطريقة نفسها.
4. كرر حتى نهاية أي سلسلة.
5. إذا انتهت كلا السلسلتين بالطول نفسه، فهما متساويتان. خلاف ذلك يكون السلسلة النصية الأطول هو الأكبر.

في الأمثلة أعلاه، تحصل الموازنة 'Z' > 'A' على النتيجة في الخطوة الأولى بينما تُوازن السلسلتين النصيتين "Glow" و "Glee" حرفًا تلو الآخر حتى الحرف الأخير بالتسلسل التالي:

1. G هو نفسه G.
2. l هو نفسه l.
3. o أكبر من e. توقف هنا، السلسلة الأولى أكبر.

ليس قاموس حقيقي، ولكنه ترتيب ترميز اليونيكود

إنَّ خوارزمية الموازنة المذكورة أعلاه تعادل تقريبًا تلك المستخدمة في القواميس ودفاتر الهاتف، ولكن مع اختلاف بسيط يتعلق بحالة الحرف. فالحرف الكبير "A" لا يساوي الحرف الصغير "a" كما تعتقد فأيهما أكبر برأيك؟ الحرف الصغير "a" طبعًا. أسمعك تسأل لماذا؟ لأنَّ الحرف الصغير له رقم تسلسلي أكبر في جدول الترميز المقابل له في جدول اليونيكود المستخدم في JavaScript، حسنًا، سكفي إلى هنا وسنعاود الحديث عن هذا الموضوع والنتائج المترتبة عليه في فصل السلاسل النصية.

موازنة بين أنواع البيانات المختلفة

عند موازنة أنواع بيانات مختلفة، تحوّل JavaScript القيم إلى أعداد. على سبيل المثال:

alert( '2' > 1 ); // true, تُحوَّل السلسلة النصية '2' إلى العدد 2
alert( '01' == 1 ); // true, تُحوَّل السلسلة النصية '01' إلى العدد 1

بالنسبة للقيم المنطقية، true تصبح 1 و false تصبح 0. على سبيل المثال:

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

نتيجة مضحكة أليس كذلك؟!

من الممكن في الوقت نفسه أن تكون القيمتان:

• متساويتين.
• واحدة منهما true والأخرى false.

إليك مثال عن حالة مماثلة:

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

من وجهة نظر JavaScript، هذه النتيجة طبيعية تمامًا. تُحوّل عملية التحقق من المساواة القيم باستخدام التحويل العددي (وبالتالي السلسلة النصية "0" تساوي القيمة 0)، بينما يستخدم التحويل الصريح Boolean مجموعة أخرى من القواعد.

معامل المساواة الصارمة

معامل المساواة العادية == لديه مشكلة، وهي عدم قدرته على التمييز بين 0 و false:

alert( 0 == false ); // true

يحدث الشيء نفسه مع السلسلة النصية الفارغة:

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

يحدث هذا لأنَّ الأنواع المختلفة من العاملات تُحول إلى أعداد بواسطة معامل المساواة ==. السلسلة النصية الفارغة مثل false، تصبح صفرًا.

ماذا نفعل إذا كنا نرغب في التمييز بين 0 و false؟ معامل المساواة الصارمة === يتحقق من المساواة دون تحويل القيم. بمعنى آخر، إذا كان a وb قيمتين من نوعين مختلفين، فسوف تُرجع المعادلة a === b على الفور false دون محاولة تحويلها، وبذلك يتحقق المعامل === من تساوي النوع أولًا ثم تساوي القيمة.

دعنا نجرب:

alert( 0 === false ); // false, لأن القيمتين من نوعين مختلفين

هناك أيضًا معامل عدم مساواة صارم ‎!==‎ مماثل للمعامل ‎!=‎.

يعد معامل المساواة الصارمة أطول قليلاً في الكتابة، ولكنه أكثر وضوحًا ويترك مساحة أقل للأخطاء.

الموازنة مع قيمة فارغة null وغير مُعرّفة undefined

دعنا نرى المزيد من الحالات الخاصة. تسلك عملية الموازنة سلوكًا غير منطقي عند موازنة قيمة فارغة null أو غير مُعرّفة undefined مع قيم أخرى، إذ هاتان القيمتان من نوعين مختلفين.

تذكر أنَّه للتحقق من المساواة بصرامة، استعمل المعامل === دومًا:

alert( null === undefined ); // false

للتحقق من المساواة دون أخذ النوع بالحسبان، استعمل المعامل ==. بمعنى أنَّ القيمتين null و undefined متساويتان فقط مع بعضهما ولكن ليستا متساويتان مع أي قيمة أخرى.

alert( null == undefined ); // true

الرياضيات ومعاملات الموازنة الأخرى ‎< > <= >=‎

القيمة الفارغة وغير المُعرّفة null و undefined يتم تحويلها إلى عدد: null تصبح 0، بينما undefined تصبح NaN.

الآن دعنا نرى بعض الأشياء المضحكة التي تحدث عندما نطبق هذه القواعد، والأهم من ذلك هو كيفية تجنب هذا الفخ.

نتيجة غريبة: null مقابل 0

دعنا نوازن null مع 0:

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

رياضيًّا، هذا غريب، إذ تشير النتيجة الأخيرة إلى أنَّ «null أكبر من أو تساوي 0»، لذلك يجب في إحدى الموازنات أعلاه أن تكون صحيحة true، لكن كلاهما خطأ.

السبب هو أنَّ التحقق من المساواة == ومعاملات الموازنة ‎> < >= <=‎ تعمل بشكل مختلف. تحول الموازنات القيمة الفارغة null إلى عدد، وتعاملها على أنها 0 ولهذا السبب، نتيجة الموازنة في المثال السابق في السطر (3) null >= 0 مُحقَّقة أي true وفي السطر (1) خطأ null > 0.

من ناحية أخرى، يتم التحقق من المساواة == على undefinedوnull بدون أي تحويل، حيث أنه يساوي كل منهما الآخر ولا يساويها أي قيمة أخرى. لهذا السبب، نتيجة الموازنة في المثال السابق في السطر (2) null == 0 غير محقَّقة.

القيمة غير المُعرّفة undefined غير قابلة للموازنة أي لا ينبغي موازنتها undefined مع القيم الأخرى:

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

لماذا يُكره الصفر كثيرًا؟ دائما خطأ! حصلنا على هذه النتائج لأن:

• معاملات الموازنة في السطر (1) و(2) في المثال السابق تُرجع false، لأن القيمة undefined تُحوّل إلى NaN وهي عبارة عن قيمة رقمية خاصة تعيد false لكافة الموازنات.
• تُرجع عملية التحقق من المساواة في السطر(3) القيمة false، لأن القيمة غير المُعرّفة undefined تساوي فقط القيمة null و undefined، ولا تساوي قيم أخرى.

تجنب المشاكل

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

• تعامل بالصورة المألوفة مع أي موازنة بها undefined/null، باستثناء المساواة الصارمة === فهي تحتاج معاملة استثنائية.
• لا تستخدم معاملات الموازنة ‎>= > < <=‎ مع متغير قد يأخذ إحدى القيمتين null/undefined، إلا إذا كنت متأكدًا حقًا مما تفعله. إذا كان المتغير عبارة عن هاتين القيمتين، فتحقق منها بشكل منفصل.

الخلاصة

• تُرجع معاملات الموازنة قيمة منطقية.
• تُوازن السلاسل النصية حرفًا تلو الآخر حسب ترتيب القاموس (dictionary).
• عند موازنة قيم من أنواع بيانات مختلفة، يتم تحويلها إلى أرقام (باستثناء التحقق من المساواة الصارمة).
• القيم الفارغة null وغير المعرّفة undefined تساوي == بعضها بعضًا، ولا تساوي أي قيمة أخرى.
• كن حذرًا عند استخدام معاملات موازنة مثل> أو < مع متغيرات يمكن أن تكون فارغة null أو غير معرّفة undefined ويفضل التحقق من ذلك بشكل منفصل.

تمارين

الموازنات

الأهمية: 5

ماذا ستكون نتيجة هذه الموازنات

5 > 4
"apple" > "pineapple"
"2" > "12"
undefined == null
undefined === null
null == "\n0\n"
null === +"\n0\n"

الحل

ترجمة -وبتصرف- للفصل comparisons من كتاب The JavaScript Language

اقرأ أيضًا

• المقال التالي: الدوال التفاعلية: alert ،prompt ،confirm
• المقال السابق: المعاملات في JavaScript
• كامل مقالات دليل تعلم جافاسكربت

تعرَّفنا على العديد من المعاملات الحسابية في المدرسة، مثل الجمع +، الضرب *، الطرح – وما إلى ذلك. في هذا المقال، سنشرح معاملات أخرى لم نتعرف عليها في المدرسة بالإضافة إلى تلك المعاملات.

مصطلحات جديدة: أحادي، ثنائي، عامل

قبل أن نمضي قدمًا في هذا المقال، دعنا نتعرَّف على بعض المصطلحات الجديدة.

• العوامل (operands): هي العناصر (القيمة) التي تُنفَّذ عملية المعاملات (operators) عليها. على سبيل المثال، في عملية الضرب 5 * 2، يوجد عاملان؛ العامل الأيسر هو 2 والأيمن هو 5. يطلق عليها البعض أحيانًا الاسم «وسائط» (arguments) بدلًا من «عوامل» (operands).

• المعامل الأحادي: يكون المعامل أحاديًّا (unary) إذا كان لديه عامل (operand) واحد فقط. على سبيل المثال، عملية النفي هي عملية أحادية، إذ تعكس اشارة العدد، فيصبح سالبًا - إذا كان موجبًا + والعكس صحيح:

let x = 1;

x = -x;
alert( x ); // -1, تم تطبيق النفي الأحادي

• المعامل الثنائي: يكون المعامل ثنائيًّا (binary) إذا كان لديه عاملان (operands). يوضح المثال التالي إشارة السالب التي في المثال السابق عندما تكون في المعامل الثنائي:

let x = 1, y = 3;
alert( y - x ); // 2, معامل الطرح الثنائي يطرح القيم

تقنيًّا، نتحدث هنا عن نوعين من المعاملات لإشارة واحدة - هما: النفي الأحادي (العامل الفردي: عكس الإشارة) والطرح الثنائي (عاملان: عملية طرح)، لذا يجب التفريق بينهما.

وصل سلاسل نصية عبر المعامل +

الآن، سنتعرَّف على ميِّزات خاصة بمعاملات JavaScript تتجاوز تلك التي تعلمناها في المدرسة.

المتعارف عليه أنَّ معامل الجمع + يجمع الأرقام. لكن إذا تم تطبيق معامل الجمع + على سلاسل نصية، فإنه يُوصل هذه السلاسل النصية مع بعضها بعضًا ويضعها في سلسلة نصية واحدة.

let s = "my" + "string";
alert(s); // mystring

لاحظ أنه يتم تحويل العدد إلى سلسلة نصية عن طريق وضعه داخل علامات الاقتباس ("") ويعامل آنذاك معاملة السلسلة النصية. ولاحظ أيضًا إذا كان أحد العاملين (operands) عبارة عن سلسلة نصية، فسيُحوَّل الآخر تلقائيًا إلى سلسلة نصية. إليك المثال التالي:

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

كما رأيت، لا يهم ما إذا كان العامل الأول عبارة عن سلسلة نصية أم الثاني. القاعدة بسيطة: إذا كان أحد العاملين عبارة عن سلسلة نصية، فسيُحوَّل الآخر إلى سلسلة نصية أيضًا.

لكن انتبه! المعاملات تبدأ من اليسار إلى اليمين. فإذا كان هناك عددان متبوعان بسلسلة نصية، فستُجمَع الأعداد قبل تحويلها إلى سلسلة نصية:

alert(2 + 2 + '1' ); // "أي أن الناتج "41" وليس "221

خاصية وصل السلاسل النصية وجمعها في سلسلة واحدة (String concatenation) ميزة خاصة بمعامل الجمع +، بينما تعمل المعاملات الحسابية الأخرى مع الأعداد فقط. فعلى سبيل المثال، الطرح والقسمة:

alert( 2 - '1' ); // 1
alert( '6' / '2' ); // 3

خاصية التحويل العددي

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

معامل الجمع الأحادي أو بمعنى آخر، معامل الجمع + المطبق على قيمة واحدة، لا يُحدث تغييرًا على الأعداد. ولكن إذا لم يكن العامل عددًا، فإن عملية الجمع الأحادي تحوّله إلى عدد. اطلع على المثال التالي:

// لا تأثير على الأعداد
let x = 1;
alert( +x ); // 1

let y = -2;
alert( +y ); // -2

// تحويل غير الأعداد
alert( +true ); // 1
alert( +"" );   // 0

يقوم هذا المعامل هنا مقام الدالة Number‎، لكنه أقصر وأبسط.

تنشأ الحاجة لتحويل السلاسل النصية إلى أعداد في كثير من الأحيان. على سبيل المثال، إذا كنا نحصل على القيم من قالب HTML، فهي غالبًا ما تكون عبارة عن سلاسل نصية. ماذا لو أردنا دمجها؟ معامل الجمع الثنائي سيضيفها كسلاسل نصية:

let apples = "2";
let oranges = "3";

alert( apples + oranges ); // "23", معامل الجمع الثنائي يدمج السلاسل النصية

إذا كنا نريد أن نعاملها كأعداد، نحتاج إلى تحويلها ثم دمجها:

let apples = "2";
let oranges = "3";

// كلا القيمتين حُولتا إلى أعداد قبل تطبيق معامل الجمع الثنائي
alert( +apples + +oranges ); // 5

// بصيغة أطول
// alert( Number(apples) + Number(oranges) ); // 5

من وجهة نظر عالم رياضيات، تبدو كثرة معاملات الجمع غريبة. ولكن من وجهة نظر المبرمج، لا يوجد شيء مميز: يتم تطبيق معاملات الجمع الأحادي أولاً لتحويل السلسلة النصية إلى عدد، ثم يجمع معامل الجمع الثنائي العددين الناتجين.

لماذا يتم تطبيق معاملات الجمع الأحادية على القيم قبل الثنائية؟ هذا يعود للأولوية الأعلى في التنفيذ كما سنرى بعد قليل.

ترتيب أولوية المعاملات

إذا كان في المعادلة أكثر من معامل واحد، يتم تحديد ترتيب التنفيذ حسب أولوية هذه المعاملات. في المدرسة، تعلمنا جميعًا أنه يجب حساب الضرب في المعادلة1 + 2 * 2 قبل الجمع، هذا تحديدًا ما يسمى أولوية العملية الرياضية. أي أن عملية الضرب لها أولوية أعلى من الجمع.

تتخطى الأقواس أولوية أي معامل، لذلك إذا لم نكن راضين عن أولوية المعاملات (operations) في المعادلة، يمكننا استخدام الأقواس لتغييرها. على سبيل المثال: (1 + 2) * 2.

هناك العديد من المعاملات في JavaScript. كل معامل لديه رقم في ترتيب الأولوية، والمعامل صاحب الأولوية الأعلى يُنفَّذ أولًا. إذا كانت الأولوية لمجموعة معاملات في نفس الترتيب، يكون التنفيذ من اليسار إلى اليمين.

إليك مقتطف من جدول الأولوية (لست بحاجة إلى حفظ ذلك، لكن لاحظ أن المعاملات الأحادية أعلى أولوية من المعاملات الثنائية المقابلة).

كما ترى، معامل الجمع الأحادي له الأولوية 16 وهي أعلى من 13 لمعامل الجمع الثنائي. لهذا السبب، يُنفَّذ معامل الجمع الأحادي أولًا في المعادلة +apples + +oranges الذي يمثِّل عملية التحويل قبل عملية الجمع وهذا هو المطلوب.

معامل الإسناد =

لاحظ أنَّ معامل الإسناد = مدرجٌ في جدول الأولوية الخاص بالمعاملات مع أولوية منخفضة للغاية وهي 3. لهذا السبب، عندما نسند قيمة لمتغير، مثل x = 2 * 2 + 1، تُنفَّذ العمليات الحسابية حسب أولويتها ثمَّ تُسنَد القيمة الناتجة (5) إلى المتغيِّر x وتُخزَّن فيه.

let x = 2 * 2 + 1;

alert( x ); // 5

من الممكن سَلسَلة معاملات الإسناد:

let a, b, c;

a = b = c = 2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

يتم تنفيذ سَلسَلة معاملات الإسناد من اليمين إلى اليسار. أولاً، يُقيَّم التعبير 2 + 2 الموجود في أقصى اليمين ثم تُسنَد القيمة الناتجة عنه إلى المتغيرات الموجودة على اليسار:c، وb و a. في النهاية، تشترك جميع تلك المتغيرات في القيمة النهائية الناتجة.

معامل الإسناد = يُرجع قيمة

المعامل دائما يرجع قيمة. هذا واضح في معامل الجمع + أو الضرب *، ويتبع معامل الإسناد = أيضًا هذه القاعدة. فالاستدعاء x = Value يُخزِّن القيمة في x ثم يرجعها.

يوضح المثال التالي كيفية الاستفادة من هذه الميزة باستخدام القيمة الناتجة عن عملية الإسناد في معادلة أخرى أكثر تعقيدًا، وبذلك نضرب عصفورين بحجر واحد:

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

alert( a ); // 3
alert( c ); // 0

في المثال أعلاه، تكون نتيجة a = b + 1 هي القيمة التي جرى إسنادها إلىa أي 3، ثم يتم طرح من هذه القيمة 3.

شيفرة مضحكة، أليس كذلك؟! لكن يجب أن نفهم كيف تعمل لأنه في بعض الأحيان نراها في مكتبات خارجية كتبها آخرون، ولا يُفضل إطلاقًا أن نكتب مثل هذه الشيفرات، لأنَّ هذه الحيل لا تجعل من الشيفرة أكثر وضوحًا أو أكثر قابلية للقراءة.

معامل باقي القسمة %

معامل باقي القسمة %، لا يرتبط بالنسب المئوية. الناتج من هذه المعادلة a % b هو العدد المتبقي من قسمة العدد الصحيح a على العدد الصحيحb. إليك مثال عنه:

alert( 5 % 2 ); // 1 (هو الباقي من قسمة 5 على 2)
alert( 8 % 3 ); // 2 (هو الباقي من قسمة 8 على 3)
alert( 6 % 3 ); // 0 (هو الباقي من قسمة 6 على 3)

معامل القوة **

معامل القوة ** هو إضافة حديثة لـ JavaScript. ليكن لدينا الرقم الطبيعي b، فيكون ناتج العملية a ** b هو الرقم a مضروبًا في نفسه عدد b من المرات:

alert( 2 ** 2 ); // 4  (2 * 2)
alert( 2 ** 3 ); // 8  (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)

يعمل معامل القوة مع الأعداد غير الصحيحة أيضًا مثل:

alert( 4 ** (1/2) ); // 2 (معامل القوة ½ هو نفس الجذر التربيعي)
alert( 8 ** (1/3) ); // 2 (معامل القوة ⅓ هو نفس الجذر التكعيبي)

معاملات الزيادة ++ والنقصان --

تُعدُّ الزيادة على العدد أو إنقاصه بمقدار 1 من أكثر العمليات العددية شيوعًا. لذلك، هناك معاملات خاصة لهذا الغرض:

• معامل الزيادة ++ يزيد على قيمة المتغير مقدار 1:

let counter = 2;
counter++; // ببساطة counter = counter + 1 هو اختصار للعملية
alert( counter ); // 3

• معامل النقصان -- ينقص من قيمة المتغير مقدار 1:

let counter = 2;
counter--;      // counter = counter - 1 هو اختصار للعملية
alert( counter ); // 1

تنبيه: معاملات الزيادة / النقصان خاصة بالمتغيرات فقط، ومحاولة تطبيقها على قيم عددية مثل ‎5++‎ سيعطي خطأ.

يمكن وضع هذين المعاملين ++، -- قبل المتغير أو بعده.

• عندما يتبع المعامل المتغير، هذا ما يسمى «النموذج اللاحق» (postfix form) مثل counter++.
• وبالمثل، «النموذج السابق» (prefix form)، عندما يأتي المعامل قبل المتغير مثل ++counter.

كلا النموذجين يقومان بالعمل نفسه وهو الزيادة على قيمة المتغير counter بمقدار 1. إذن، هل هناك فرق؟ نعم، ولكن لا يمكننا رؤيته إلا إذا استخدمنا القيمة المعادة من العملية تلك.

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

إليك مثال على ذلك ليتضح كل الفرق وضوح الشمس:

let counter = 1;
let a = ++counter; // (*)

alert(a); // 2

في السطر المُميّز بالنجمة (*)، يزيد النموذج السابق ++counter قيمة المتغير counter ويعيد القيمة الجديدة الناتجة وهي 2. لذا، تُظهر الدالة alert القيمة 2.

الآن، دعني استخدم النموذج اللاحق بدلًا من النموذج السابق لمعرفة الفرق:

let counter = 1;
let a = counter++; // (*)
alert(a); // 1

في السطر المُميّز بالنجمة (*)، يزيد النموذج اللاحق counter++ قيمة المتغير counter لكنه يعيد القيمة القديمة (قبل الزيادة). لذا، تُظهِر الدالة alert القيمة 1.

مختصر القول:

• إذا لم يتم استخدام القيمة الناتجة من معاملي الزيادة والانقاص، فلا يوجد فرق في النموذج الذي يتم استخدامه سواءً سابق أو لاحق:

let counter = 0;
counter++;
++counter;
alert( counter ); // 2, كلا السطرين يؤديان نفس الغرض

• أمَّا إذا كنت ترغب في زيادة قيمة المتغير واستخدامها مباشرةً، فأنت بحاجة إلى استعمال النموذج السابق:

let counter = 0;
alert( ++counter ); // 1

• وإذا كنت ترغب في زيادة قيمة المتغير ولكنك تريد استخدام قيمته السابقة، فاستعمل النموذج اللاحق:

let counter = 0;
alert( counter++ ); // 0

معاملات زيادة / نقصان داخل معاملات اخرى:

يمكن استخدام معاملات زيادة / نقصان (++ / --) داخل المعادلات أيضًا، وأولويتها في التنفيذ أعلى من معظم المعاملات الحسابية الأخرى. إليك المثال التالي:

let counter = 1;
alert( 2 * ++counter ); // 4

وازنه مع المثال التالي:

let counter = 1;
alert( 2 * counter++ ); // 2, لأن counter++ يرجع القيمة القديمة

رغم أنَّه مقبول من الناحية التقنية، إلا أنَّ هذه الشيفرة عادة ما تجعل الشيفرة الكلية صعبة القراءة. اتباع نموذج «سطر واحد يفعل أشياء متعددة» ليس جيدًا ويولد شيفرة صعبة القراءة والتنقيح.

أثناء تَصفُّح الشيفرة سريعًا يمكن أن لا تنتبه على شيء مثل counter++، أي لن تلاحظ أنَّ قيمة المتغير قد زادت. فتخيل ما سيحصل إن حدث خطأ ما مع وجود مئات مثل تلك الأسطر التي تنجز عدة أشياء سويةً! أنصحك باستخدام أسلوب «سطر واحد - إجراء واحد» (one line – one action):

let counter = 1;
alert( 2 * counter );
counter++;

المعاملات الثنائية

تتعامل المعاملات الثنائية (Bitwise operators) مع العوامل كأعداد صحيحة بحجم 32 بت وتعمل على مستوى تمثيلها الثنائي (binary representation). هذه العوامل ليست خاصة بـ JavaScript، وهي مدعومة في معظم لغات البرمجة.

إليك قائمة بالمعاملات الثنائية (Bitwise operators):

• المعامل AND (&)
• المعامل OR (|)
• المعامل XOR (^)
• المعامل NOT (~)
• معامل الإزاحة نحو اليسار LEFT SHIFT (>>)
• معامل الإزاحة نحو اليمين RIGHT SHIFT (<<)
• معامل الإزاحة نحو اليمين مع إدخال أصفار ZERO-FILL RIGHT SHIFT (<<<)

نادرًا ما تحتاج إلى استخدام مثل هذه المعاملات. وتحتاج لفهمها إلى الخوض في التمثيل الثنائي للأعداد (الصيغة الثنائية المقابلة للصيغة العشرية المفهومة للبشر) وليس من الجيد القيام بذلك الآن، خاصة أننا لسنا بحاجة إلى ذلك في هذا الوقت. إذا كنت فضولي يمكنك قراءة توثيق المعاملات الثنائية في JavaScript في موسوعة حسوب، وهذا كافيًّا الآن. وسنشرحها عمليًّا عندما تنشأ حاجة حقيقية لها في مراحل متقدمة.

معاملات التعديل المباشر على المتغير (Modify-in-place)

غالبًا ما نحتاج إلى تطبيق معامل على متغير ما وتخزين القيمة الجديدة في المتغير نفسه. انظر مثلًا إلى المثال التالي:

let n = 2;
n = n + 5;
n = n * 2;

يمكن اختصار الشيفرة السابقة باستخدام ‎+=‎ و ‎*=‎:

let n = 2;
n += 5; // (n = n + 5 وهذا يماثل) n = 7 أي تصبح
n *= 2; // (n = n * 2 وهذا يماثل) n = 14 تصبح الآن
alert( n ); // 14

معاملات التعديل والإسناد (modify-and-assign) متاحة لجميع المعاملات الحسابية والثنائية مثل: ‎/=‎ و ‎-=‎ وتملك هذه المعاملات الأولوية نفسها التي لدى معامل الإسناد العادي =، لذا فهي تُنفَّذ بعد معظم المعاملات الأخرى:

let n = 2;
n *= 3 + 5;
alert( n ); // 16  (n *= 8 القسم الأيمن يُقيَّم أولًا وهذا يماثل)

معامل الفاصلة ,

معامل فاصلة (Comma) , هو واحد من أندر المعاملات وأكثرها غرابة. في بعض الأحيان يتم استخدامه لكتابة شيفرة أقصر، لذلك نحن بحاجة إلى التعرف عليه لفهم ذلك.

يتيح لنا معامل الفاصلة تقييم العديد من المعادلات عند فصلها بفاصلة ,. يجري تقييم كل قسم منها ولكن يتم إرجاع نتيجة آخر واحد فقط. تفحَّص المثال التالي:

let a = (1 + 2, 3 + 4);
alert( a ); // 7 (الناتج من جمع 3+4)

هنا، يُقيَّم القسم الأول من المعادلة 1+2 ويُتجاهَل قيمته ثم بعد ذلك يُقيَّم القسم الثاني 3+4 وتعاد قيمته كنتيجة نهائية.

معامل الفاصلة له أولوية منخفضة جدًا

يرجى ملاحظة أن معامل الفاصلة له أولوية منخفضة للغاية، أقل من معامل الإسناد =، لذلك الأقواس مهمة في المثال أعلاه. بدون الأقواس: a = 1 + 2 ، 3 + 4 يُنفَّذ معامل الجمع + أولاً، فتصبح المعادلة a= 3,7، ثم يُنفَّذ معامل الإسناد = فتصبح a=3، وأخيرًا لا يُطبَّق أي معامل على العدد الموجود بعد الفاصلة، أي يُتجاهَل العدد7.

لماذا نحتاج إلى معامل يتجاهل كل القيم باستثناء قيمة الجزء الأخير؟ في بعض الأحيان، يستخدمه المبرمجون في بنيات أكثر تعقيدًا لوضع العديد من الإجراءات في سطر واحد. قد تكون أبسط تلك البنيات المعقدة هي بنية الحلقية التكرارية التالية:

// ثلاث معاملات في سطر واحد
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

تُستخدَم هذه الحيل في العديد من أطر JavaScript. لكنها في العادة لا تحسّن قابلية القراءة للشيفرة، لذلك يجب عليك التفكير جيدًا قبل استخدامها.

تمارين

النموذج السابق والنموذج اللاحق

الأهمية: 5

ما هي القيم النهائية للمتغيرات a ،b ،c ،d بعد تنفيذ الشيفرة التالية؟

let a = 1, b = 1;
let c = ++a; // ?
let d = b++; // ?

الحل:

let a = 1, b = 1;

alert( ++a ); // 2, النموذج السابق يُرجع القيمة الجديدة
alert( b++ ); // 1, النموذج اللاحق يُرجع القيمة القديمة

alert( a ); // 2, تتم الزيادة مرة واحدة
alert( b ); // 2, تتم الزيادة مرة واحدة

نتيجة عملية الإسناد

الأهمية: 3

ما هي قيم المتغيرين a و x بعد تنفيذ الشيفرة التالية؟

let a = 2;
let x = 1 + (a *= 2);

الحل

ترجمة -وبتصرف- للفصل operators من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: معاملات الموازنة
• المقال السابق: التحويل بين الأنواع
• كامل مقالات دليل تعلم جافاسكربت

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

بإمكاننا إجراء أي تغيير على شجرة DOM حتى هذه اللحظة، من وجهة نظر المستخدم فإنّه ليسَ مفيدًا للغاية لأننا قمنا بتنفيذ التغييرات يدويًّا فقط. سنتعرَّف الآن على الأحداث وربط كل شيء معها لإنشاء مواقع تفاعلية.

ما هي الأحداث؟

الأحداث (event) هي الإجراءات التي تحدث في المتصفّح والتي يبدأها المستخدم أو المتصفّح. فيما يلي عدّة أمثلة عن الأحداث الشائعة التي يمكن أن تحدث على موقع الويب:

• انتهاء الصفحة من التحميل
• نقر المستخدم على زر
• تحويم المستخدم سهم الفأرة فوق قائمة منسدلة
• إرسال المستخدم بياناته
• ضغط المستخدم على أحد مفاتيح لوحة مفاتيحه.

بإمكان المطورين إظهار رسائل للمستخدم للتحقق من صحة بيانات، والاستجابة إلى ضغط زرٍّ، والعديد من الإجراءات الأخرى وذلك عبر برمجة استجابات جافاسكربت على حدث معيّن.

سنتطرق إلى مُعَالِجَاتَ الأحداث ومُسْتمعي الأحداث وكائنات الأحداث. كما سنعرّج لثلاث طرقٍ مختلفة لكتابة التعليمات البرمجيّة للتعامل مع الأحداث، وبعض الأحداث الأكثر شيوعًا. ستتمكّن من تقديم تجربة ويب أكثر تفاعلية للمستخدمين النهائيين، من خلال التعرف على الأحداث.

معالجات الأحداث ومستمعي الأحداث

عندما ينقر المستخدم على زر أو يضغط المفتاح، يتم قدحُ الحدث، ويُسمّى آنذاك حدث النقر click أو حدث الضغط keypress على التوالي.

معالج الأحداث (event handler) هو دالَة جافاسكربت تعمل عند وقوع حدثٍ ما.

يقوم مستمع الحدث (event listener) بإرفاق واجهة استجابة لعنصر، ممَّا يسمح لهذا العنصر بالانتظار لإطلاق الحدث المحدّد أو ويكأنه يتنصَّت ويستمع إلى صوت إطلاق ذلك الحدث المتمثِّل بعيار ناري.

هناك ثلاث طرق لإسناد الأحداث إلى العناصر:

• مُعَالِجَات الأحداث المضمّنة (Inline event handlers).
• خاصيات معالج الحدث (Event handler properties).
• مستمعو الأحداث (Event listeners).

سنتعرف على ثلاث الطرق جَمِيعِها للتأكّد من أنك على دراية كاملة بكلِّ طريقة لإطلاق الحدث، ومناقشة إيجابيات وسلبيات كل طريقة.

الخصيّات المضمّنة لمعالج الأحدث

لبدء التعرف على معالجات الأحداث، سننظر أولاً في معالج الحدث المضمَّن (inline event handler9). لنبدأ بمثالٍ بسيط للغاية، يتكون من العنصرين زرٍّ button وفقرة p. ونريد من المستخدم أن يضغط على الزر لتغيير محتوى النص في الفقرة.

لنبدأ بصفحة HTML تحتوي على زرٍ. سنشير إلى ملف جافاسكربت وسنضيف الشيفرة البرمجية فيما بعد:

• الملف events.html:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Events</title>
</head>

<body>

  <!-- إضافة زر -->
  <button>Click me</button>

  <p>Try to change me.</p>

</body>

<!-- ملف جافاسكربت -->
<script src="js/events.js"></script>

</html>

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

• الملف events.html:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Events</title>
</head>

<body>

    <button onclick="changeText()">Click me</button>

    <p>Try to change me.</p>

</body>

<script src="js/events.js"></script>

</html>

لننشئ الملف events.js ضمن المسار ‎‎js/‎‎. سننشئ الدالة changeText()‎ التي ستعدّل محتوى النص المتمثِّل بقيمة الخاصية textContent على عنصر الفقرة p.

• الملف js/events.js:

// تعديل نصِّ الفقرة عبر هذه الدالّة
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an inline event handler.";
}

عند تحميلك الصفحة events.html لأول مرة ستبدو كما يلي:

حينما يتمُّ النقر على الزر من قبل المستخدم أو غيره، فإن محتوى نصّ الفقرة سيتغيّير من Try to change me. إلى I changed because of an inline event handler.

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

يمكنك مقارنة معالجات الأحداث المضمَّنة بأنماط CSS المضمَّنة في عنصر HTML. من العمليّ للغاية الحفاظ على ورقة أنماط منفصلة للأصناف بدلًا من إنشاء أنماط مضمّنة في كل عنصر، تمامًا كما هو أكثر جدوى للحفاظ على شيفرات جافاسكربت التي تتم معالجتها بالكامل من خلال ملف منفصل بدلًا من إضافتها إلى كل عنصر.

خاصيات معالج الأحداث

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

سيكون الإعداد هو نفسه هنا، باستثناء أننا لم نعد ندرج onclick="changeText()‎"‎ في شيفرة العنصر:

• الملف events.html:

...
<body>

    <button>Click me</button>

    <p>I will change.</p>

</body>
...

ستظلُّ وظيفتنا متشابهة أيضًا، إلا أننا نحتاج الآن إلى الوصول إلى العنصر button في جافاسكربت. يمكننا ببساطة الوصول إلى الخاصية onclick مثلما نصل إلى الخاصية style أو id أو أي خاصية عنصر أخرى، ثم نقوم بتعيين مرجع للدالة المراد تنفيذها.

• الملف js/events.js:

// الدالة المراد تنفيذها عند وقوع الحدث والتي تعدِّل محتوى الفقرة
const changeText = () => {
    const p = document.querySelector('p');
    p.textContent = "I changed because of an event handler property.";
}

// button إضافة معالج حدث كخاصية للعنصر 
const button = document.querySelector('button');
button.onclick = changeText;

ملاحظة: لا تتبع معالجات الأحداث عُرْفَ سنام الجمل (camelCase) التي تلتزم بها معظم تعليمات جافاسكربت البرمجية. لاحظ أن الرمز هو onclick، وليس onClick.

عند تحميل الصفحة لأول مرة ، سيعرض المتصفح ما يلي:

الآن عند النقر فوق الزر، سيكون له تأثير مماثل كما كان من قبل:

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

button.onclick = changeText;

تعدُّ خاصيَّة معالج الأحداث أكثرَ قابليَّةٍ للصيانة من المعالج المضمَّن، إلَّا أنها تعاني عقباتً مماثلة. فمثلاً، محاولةُ تعييِّن عدّة خصائص onclick منفصلة سيطبق التأثير على آخر محاولة. كما هو موضَّح أدناه.

• الملف js/events.js:

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// يمكن تعديل الأحداث
button.onclick = changeText;
button.onclick = alertText;

في المثال أعلاه، لن تعرض النقرة على الـ button سوى تنبيه، ولن تغيّر النصّ p، لأن alert()‎ هو آخر تعليمة برمجية أضيفت إلى الخاصية.

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

مستمعي الأحداث

أحدث إضافة إلى معالجات الأحداث في جافاسكربت هي مستمعي الحدث. يراقب مستمع الحدث حدثًا على عنصر. بدلاً من إسناد الحدث مباشرةً إلى خاصيّة في العنصر، سنستخدم التابع addEventListener()‎ للاستماع للحدث.

يأخذ addEventListener()‎ معاملين إلزاميين - الحدث الذي يجب الاستماع إليه، ودالَّة ردِّ نداء لتنفيذها عند اطلاق الحدث.

ملف الـ HTML لمستمع الأحداث الخاص بنا هو نفسه في المثال السابق.

• الملف events.html:

...
    <button>Click me</button>
    <p>I will change.</p>
...

سنظلّ نستخدم نفس الدالّة changeText()‎ كما سابقًا ولكن سنربطها مع التابع addEventListener()‎ على الزر.

• الملف js/events.js:

// الدالة المراد تنفيذها عند وقوع الحدث والتي تعدِّل محتوى الفقرة
const changeText = () => {
    const p = document.querySelector('p');
    p.textContent = "I changed because of an event listener.";
}
// الاستماع لحدث النقر
const button = document.querySelector('button');
button.addEventListener('click', changeText);

لاحظ أنه مع أوّل طريقتين، تمّت الإشارة إلى حدث النقر باسم onclick، ولكن مع مستمعي الأحداث يشار إليه باسم click. تُسْقَطُ on من الكلمة لكل مُسْتَمِع حدث. في القسم التالي، سنأخذ المزيد من الأمثلة على أنواع الأحداث الأخرى.

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

للوهلة الأولى، يبدو مستمعو الأحداث متشابهين جدًا مع خصائص معالج الأحداث، لكن لديهم بعض المزايا. يمكننا تعيين عدّة مستمعين على نفس العنصر، كما هو موضَّح في المثال أدناه.

• الملف js/events.js:

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// يمكن إضافة عدة مستمعات إلى الحدث نفسه والعنصر نفسه أيضًا
button.addEventListener('click', changeText);
button.addEventListener('click', alertText);

سيتمُّ إطلاق الحدثين في المثال أعلاه، ممّا يوفِّر للمستخدم كلًّ من التنبيه والنصِّ المعدّل بعد النقر فوق التنبيه. ستستخدام غالباً دالّات مجهولة (Anonymous functions) بدلاً من مرجع دالّة على مُسْتَمع الحدث. الدالّات المجهولة هي دالّات غير مُسَمَّاة.

// دالة مجهولة يراد تنفيذها عند إطلاق الحدث
button.addEventListener('click', () => {
    p.textContent = "Will I change?";
});

من المُمْكِن أيضًا استخدام دالّة removeEventListener()‎ لإزالة حدث واحد أو جميع الأحداث من عنصر.

// button من العنصر alert حذف الدالة
button.removeEventListener('click', alertText);

يمكنك استخدام addEventListener()‎على الكائنين document و window.

يُعَدُّ مُسْتَمِعُو الأحداث حاليًا الطريقةَ الأكثرَ شيوعًا والمفضَّلة للتعامل مع الأحداث في جافاسكربت.

الأحداث المشتركة

تعلمّنا عن معالجات الأحداث المضمّنة، وخصائص معالج الأحداث، ومستمعي الأحداث باستخدام حدث النقرات، ولكن هناك العديد من الأحداث في جافاسكربت. سنتطرق لأكثر الأحداث شيوعًا أدناه.

أحداث الفأرة

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

إن حدث النقر click هو حدثٌ مركَّب يتألف من الجمع بين حدثين هما mousedown و mouseup، ويُطلَق حينَ الضغط على زر الفأرة لأسفل أو رفعه، على التوالي. يؤدي استخدام الحدثين mouseenter و mouseleave بالترادف إلى إعادة إنشاء تأثير التحويم الذي يستمر ما دام مؤشر الفأرة على العنصر.

أحداث النموذج

أحداث النموذج form هي إجراءات تتعلق بالنماذج، مثل عناصر الإدخال input التي يتم تحديدها أو غير المحددة، والنماذج التي يتم إرسالها.

يتحقق التركيزfoucus عند تحديد عنصر، على سبيل المثال، من خلال النقر بالفأرة أو الانتقال إليه عبر المفتاح TAB غالبًا ما تستخدم جافاسكربت لإرسال النماذج وإرسال القيم إلى لغة الواجهة الخلفية. تتمثّلُ ميزة استخدام جافاسكربت لإرسال النماذج بأنه لا يتطلب إعادة تحميل الصفحة لإرسال النموذج، ويمكن استخدام جافاسكربت للتحقق من حقول الإدخال المطلوبة.

أحداث لوحة المفاتيح

تُستخدم أحداث لوحة المفاتيح لمعالجة إجراءات لوحة المفاتيح، مثل الضغط على مفتاح ما، ورفع الضغط عن مفتاح، واستمرار ضغط مفتاح.

قد يبدو الحدثين keydown و keypress متشابهين إلا أنهما لا يتيحان الوصول إلى جميع المفاتيح بالضبط. في حين أنَّ keydown يقرّ بكل ضغطَة (أي الضغط على أي مفتاح)، يستثني الحدث keypress المفاتيح التي لا يولد الضغط عليها حرفًا، مثل المفاتيح SHIFT و DELETE و ALT وغيرها.

أحداث لوحة المفاتيح لها خصائص محددة للوصول إلى المفاتيح الفردية.

إذا مُرِّرَ المعامل الأول (الكائن event) عبر مستمع الحدث، فيمكننا الوصول إلى مزيد من المعلومات حول الإجراء الذي حدث أهمها ثلاثة خصائص تتعلق بكائنات لوحة المفاتيح هي: keycode و key و code.

إذا ضغط المستخدم على المفتاح a على لوحة المفاتيح، فستظهر الخصائص التالية المتعلقة بهذا المفتاح:

لإظهار كيفية جمع هذه المعلومات عبر وحدة التحكم جافاسكربت، يمكننا كتابة سطور التعليمات البرمجيّة التالية:

// keyCode و key و code التحقق من الخاصيات
document.addEventListener('keydown', event => {
    console.log('key: ' + event.keyCode);
    console.log('key: ' + event.key);
    console.log('code: ' + event.code);
});

بمجرد ضغط ENTER في الطرفية، يمكننا آنذاك الضغط على أي مفتاح من لوحة المفاتيح، في هذا المثال، سنضغط a.

Output
keyCode: 65
key: a
`code: KeyA`

إنَّ الخاصيَّةَ keyCode هي عدد يمثلُّ قيمة المفتاح الذي ضُغِطَ بينما تمثِّل خاصيَّةَ key اسم الحرف، التي يمكن أن تتغيّر - على سبيل المثال، ضغط المفتاح a مع SHIFT سيؤدي A. وتمثِّلُ الخاصيِّةُ code المفتاح الفيزيائي على لوحة المفاتيح.

لاحظ أنَّ keyCode في طريقها إلى الزوال ويفضل استخدام code في مشاريع جديدة.

لمعرفة المزيد، يمكنك عرض القائمة الكاملة للأحداث على شبكة مطوري Mozilla.

كائنات الحدث

يتكون الكائن Event من الخاصيّات والتوابع التي يمكن لجميع الأحداث الوصول إليها. بالإضافة إلى Event الكائن العام، كل نوع من أنواع الأحداث له امتدادات خاصة به، مثل KeyboardEvent و MouseEvent. سيمرَّر الكائن Event من خلال دالّة المستمع كمعامل. وعادة ما يكتب باسم event أو e. يمكننا الوصول إلى الخاصية code التابعة للـحدث keydown لتكرار عناصر تحكم لوحة المفاتيح في لعبة مثلًا.

قم بإنشاء ملف HTML يحوي العنصر <p> وحملّه في المتصفح.

• الملف event-test-p.html:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Events</title>
</head>
<body>
  <p></p>
</body>
</html>

ثم اكتب شفرة جافاسكربت التالية في طرفية أدوات المطور .

// تمرير حدث إلى مستمع
document.addEventListener('keydown', event => {
    var element = document.querySelector('p');

    // إسناد قيمة رموز المفاتيح المراد الضغط عليها إلى متغيرات
    var a = 'KeyA';
    var s = 'KeyS';
    var d = 'KeyD';
    var w = 'KeyW';

    // تحديد الاتجاه لكل مفتاح
    switch (event.code) {
        case a:
            element.textContent = 'Left';
            break;
        case s:
            element.textContent = 'Down';
            break;
        case d:
            element.textContent = 'Right';
            break;
        case w:
            element.textContent = 'Up';
            break;
    }
});

عند الضغط على أحد المفاتيح - a، أو s، أو d، أو w سترى خرجًا مشابهًا لما يلي:

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

سنتطرق إلى إحدى خصائص الأحداث الأكثر استخدامًا: الخاصيِّةُ target. في المثال التالي ، لدينا ثلاثة عناصر div ضمن قسم واحد section.

• الملف event-test-div.html:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Events</title>
</head>
<body>
  <section>
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
  </section>
</body>
</html>

باستخدام event.target في جافاسكربت ضمن طرفيّة أدوات المطور (Developer Console)، يمكننا وضع مستمع حدث واحد على العنصر section الخارجي والحصول على العنصر الأكثر تداخلًا.

const section = document.querySelector('section');
// طباعة الهدف المحدَّد
section.addEventListener('click', event => {
  console.log(event.target);
});

يؤدي النقر فوق أي عنصر من هذه العناصر إلى إعادة إخراج العنصر المحدد ذي الصلة إلى الطرفية باسـتخدام event.target. إتاحة وضع مُسْتَمع حَدَث واحد فقط، يُمَكِّنُ من الوصول إلى العديد من العناصر المتداخلة، وهذا في غاية الأهمية.

باستخدام الكائن Event، يمكننا إعداد استجابات متعلقة بجميع الأحداث، بما في ذلك الأحداث العامة والإضافات الأكثر تحديدًا.

الخلاصة

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

تعلمنا -في هذا الدليل ما هي الأحداث، وأمثلة عن الأحداث الشائعة، والفرق بين معالجات الأحداث ومستمعي الأحداث، وكيفية الوصول إلى الكائن Event. ستتمكن من إنشاء مواقع وتطبيقات ديناميكية، باستخدام هذه المعلومات. ترجمة - وبتصرف- للمقال Understanding Events in JavaScript لصاحبته Tania Rascia

تعلمنا فيما سبق في هذه السلسلة "كيف تجري تغيرات على شجرة DOM" والتعامل مع شجرة DOM من إنشاء، وإدراج، واستبدال وإزالة عناصر من المستند بتوابع مضمنة. أصبحت الآن مؤهلًا لاستخدام قدرات JavaScript التفاعلية وتعديل عناصر الويب لبزيادة كفاءتك في التعامل مع شجرة DOM.

سنكمل في هذا المقال موضوع إجراء التعديل على شجرة DOM بتعديل الأنماط والأصناف والخاصيات الأخرى لعقد عناصر HTML. وهذا سيعطيك فهمًا أكبر للتعامل مع العناصر الأساسية لشجرة DOM.

استعراض تحديد العناصر

استخدمت مكتبة شائعة ضمن الجافاسكربت تسمى jQuery لتحديد وتعديل عناصر شجرة DOM. سهَّلت هذه المكتبة من اختيار عنصر أو أكثر ضمن المستند وتعديلها وتغييرها في آن معًا. راجعنا في مقال "الوصول إلى العناصر في شجرة DOM" التوابع الخاصة بـ DOM التي تحدد العقد وتعدل عليها عبر جافاسكربت الصرفة فقط.

لنتذكر أن التابعين document.querySelector()‎ و document.getElementById()‎ يستخدمان للوصول إلى عنصر واحد. نستطيع الوصول العنصر باستخدام العنصر div أو عبر الخاصية id.

<div id="demo-id">Demo ID</div>
 

بالإمكان اختيار أي عنصر في الصفحة بأي نوع من المحدِّدات باستخدام التابع querySelector()‎.

// كلا التابعين سيعيد عنصرًا واحدًا
const demoId = document.querySelector('#demo-id');

بإمكاننا تحديث جزء من العنصر كالنص داخله بسهولة، حينما نصل إلى العنصر.

// تغيير النصّ لعنصر واحد
demoId.textContent = 'Demo ID text updated.';

حينما نصل إلى عدة عناصر باستخدام محدد مشترك، مثل صنف محدد، يمكننا إجراء تعديل على جميع العناصر داخل حلقة تكرارية. لدينا عنصرين من div ذوي صنف مشترك.

<div class="demo-class">Demo Class 1</div>
<div class="demo-class">Demo Class 2</div>

للإمساك بجميع العناصر ذات الصنف demo-class مثلًا، سنستخدم querySelectorAll()‎، وسنستخدم forEach()‎ للوصول إلى العنصر وتطبيق التغيير. كما بالإمكان الوصول إلى عنصر محدد بـ querySelectorAll()‎ بنفس الطريقة التي تستخدمها مع مصفوفة، باستخدام الأقواس المربعة.

// demo الحصول على قائمة بجميع العناصر ذات الصنف 
const demoClasses = document.querySelectorAll('.demo-class');

// تغيير النصّ لعدّة عناصر باستخدام حلقة تكراريّة
demoClasses.forEach(element => {
  element.textContent = 'All demo classes updated.';
});

// الوصول للعنصر الأول ضمن القائمة
demoClasses[0];

هذا هو أحد أهم الاختلافات التي يجب معرفتها عند الانتقال من jQuery إلى JavaScript الصرفة. لن تشرح العديد من الأمثلة على تعديل العناصرعملية تطبيق هذه التوابع والخصائص على عناصر متعددة.

غالبًا ما يتم إرفاق الخاصيات والتوابع الواردة في هذه المقالة بـ «مسمتعي الأحداث» (event listener) من أجل الاستجابة للنقرات، التحويم (hover)، ومشغلات (triggers) أخرى.

ملاحظة: سيعيد التابعان getElementsByClassName()‎ و getElementsByTagName()‎ مجموعة عناصر HTML لا يمكنها استعمال forEach()‎ على عكس العناصر التي يعيدها التابعquerySelectorAll()‎. في هذه الحالات، ستحتاج إلى استخدام حلقة for الاعتيادية للتكرار عبر مجموعة العناصر تلك.

تعديل الخاصيات

تحتوي الخاصيات (التي هي قيم) على معلومات إضافية عن عناصر HTML. تأتي عادةً في ثنائيات الاسم/القيمة، وقد تكون أساسية اعتمادًا على العنصر.

إن الخاصية src التابعة للعنصرimg، والخاصية href التابعة للعنصر a، وكذلك الخاصيات class و id، و style هي أحد أكثر الخاصيات شيوعًا. للحصول على قائمة كاملة بخاصيات HTML، قم بعرض قائمة الخاصيات على شبكة مطوري Mozilla. ستُسبَق العناصر المخصصة التي ليست جزءًا من معيار HTML بـالبادئة data-.

لدينا أربع توابع لتعديل خاصيات العنصر في جافاسكربت:

لننشئ ملف HTML جديد يحوي العنصر img مع خاصية واحدة. سنربط العنصر بصورة عامة عبر رابط، إلا أنه من الممكن ربط الوسم بصورة محلية في حال عدم توفر اتصال بالإنترنت.

attributes.html
<!DOCTYPE html>
<html lang="en">
<body>

    <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">

</body>

</html>

افتح الملف السابق على متصفح متطور، وافتح الطرفية في وحدة تحكم المطور (Developer Console)، وستشاهد ما يلي:

سنختبر طرق الخاصية (دالات) عبر المثال التالي:

// إسناد عنصر صورة
const img = document.querySelector('img');

img.hasAttribute('src');                // يعيد القيمة المنطقية صح
img.getAttribute('src');                // "...shark.png" يعيد 
img.removeAttribute('src');             // وقيمتها src يحذف الخاصية 

أزلت الخاصية src والقيمة المرتبطة بها الموجودة العنصر img بعد المثال السابق، ولكن بإمكانك إعادة تعيين تلك الخاصية وإسناد القيمة لصورة بديلة باستخدام img.setAttribute()‎:

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png'); 

يمكننا تعديل الخاصية مباشرةً بإسناد قيمة جديدة إليها كخاصية للعنصر، وإعادة تعيين src للصورة shark.png بالشكل التالي:

img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';

يمكن تحرير أي خاصيّة بهذا التابع وكذلك مع التوابع المذكورة أعلاه.

إن التابعينhasAttribute()‎ و getAttribute()‎ عادةً ما يُستخدمان مع عبارات شرطية، بينما تُستخدَم setAttribute()‎ و removeAttribute()‎ مباشرةً لتعديل شجرة DOM.

تعديل الأصناف

تتوافق الخاصية "class" مع محددات الصنف في CSS. لا يجب الخلط مع أصناف ES6، وهو نوع خاص من دالات جافاسكربت.

تُسْتخدمُ أصناف CSS لتطبيق الأنماط على عناصر متعددة، على عكس المعرفات التي لا يمكن أن توجد إلا مرة واحدة في كل صفحة. في جافاسكربت، لدينا الخاصيتين className و classList للعمل مع الخاصية class.

سنقوم بإنشاء ملف HTML آخر يحوي عنصرين بعدة أصناف للعمل مع توابع الصنف.

• الملف classes.html:

 <!DOCTYPE html>
<html lang="en">

<style>
    body {
        max-width: 600px;
        margin: 0 auto;
        font-family: sans-serif;
    }
    .active {
        border: 2px solid blue;
    }

    .warning {
        border: 2px solid red;
    }

    .hidden {
        display: none;
    }
 
    div {
        border: 2px dashed lightgray;
        padding: 15px;
        margin: 5px;
    }
</style>

<body>

    <div>Div 1</div>
    <div class="active">Div 2</div>

</body>
</html>

عند فتح الملف classes.html في متصفح الويب، يجب أن تتلقى عرضًا مماثلاً لما يلي:

عُرِّفت الخاصيِّة className بهذا الاسم لمنع التعارض مع الكلمة المحجوزة class الموجودة في جافاسكربت وغيرها من اللغات التي لديها إمكانية الوصول إلى شجرة DOM. بإمكانك استخدام className لإسناد قيمة مباشرة إلى الصنف.

// div اختيار أول عنصر
const div = document.querySelector('div');

// الأول div للعنصر warning إسناد الصنف 
div.className = 'warning';

أسندنا الصنف warning (تحذير) المعرف في قيم CSS للملف classes.html للعنصر div الأول. ستتلقى المُخْرَجَ التالي:

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

الطريقة الأخرى لتعديل الأصناف هي عن طريق الخاصية classList، والتي تأتي مع بعض الدالات التوابع المفيدة. هذه التوابع مشابهة للتوابع addClass، و removeClass، و toggleClass الموجودة في jQuery.

// الثاني عن طريق اسم الصنف div اختيار العنصر
const activeDiv = document.querySelector('.active');

activeDiv.classList.add('hidden');                // hidden إضافة الصنف
activeDiv.classList.remove('hidden');             // hidden إزالة الصنف
activeDiv.classList.toggle('hidden');             // hidden إضافة أو إزالة الصنف
activeDiv.classList.replace('active', 'warning'); // active مكان الصنف warning تبديل الصنف

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

إن استخدام التابع classList.add()‎ سيضيف صنفًا جديدًا إلى قائمة الأصناف الموجودة، على عكس استخدام className. يمكنك أن تضيف عدة أصناف مفصولة بالفاصلة. من الممكن أيضًا استخدام setAttribute لتعديل صنف العنصر.

تعديل الأنماط

تعتبر الخاصية style من الأنماط المضمنة على عنصر HTML. سيتم تطبيق الأنماط على العناصر عبر ورقة أنماط غالبًا، كما فعلنا سابقًا في هذه المقالة، ولكن في بعض الأحيان يتعين علينا إضافة أو تعديل نمط مضمَّن مباشرة.

سنقدِّمُ مثالًا قصيرًا لشرح كيفية تعديل الأنماط باستخدام جافاسكربت. يوجد ملف HTML جديد أدناه بعنصر div يحتوي على بعض الأنماط المضمَّنة فيه مباشرةً.

• الملف styles.html:

<!DOCTYPE html>
<html lang="en">

<body>

    <div style="height: 100px;
                width: 100px;
                border: 2px solid black;">Div</div>

</body>
 
</html>

عند فتح الملف styles.html في المتصفح، سيبدو على الشكل التالي:

إحدى طرق تعديل الأنماط هي باستعمال التابع setAttribute()‎.

// div إمساك العنصر
const div = document.querySelector('div');
 
// div تطبيق النمط على العنصر 
div.setAttribute('style', 'text-align: center');

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

div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';

تُكْتَبُ خاصيات الـ CSS في حالة أسياخ الشواء (kebab-case)، وهي كلمات بأحرف صغيرة مفصولة بشرطة. لاحظ أنه من المهم معرفة أن حالة أسياخ الشواء لخاصيات الـ CSS لا يمكن استخدامها مع الخاصية style جافاسكربت. بدلاً من ذلك، ستستبدل بمكافئها من حالة سنام الجمل (الحرف الأول صغير وباقي الكلمات متصلة بأحرف كبيرة). بعبارة أخرى، سنستخدم textAlign بدلًا من text-glign في الخاصية style للجافاسكربت.

// إلى دائرة وتوسيط النصِّ عاموديًا div تحويل العنصر
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';

بعد الانتهاء من تعديلات النمط أعلاه، سيظهر الملف styles.html دائرة على الشكل التالي:

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

الخلاصة

تحتوي عناصر HTML غالبًا على معلومات إضافية مسندة إليها عبر الخاصيات. قد تتكون الخاصيات من ثنائية الاسم/القيمة، وعدد قليل من الخاصيات الأكثر شيوعًا هي class و style.

تعلمنا في هذا الدليل كيفية الوصول إلى خاصيات عنصر HTML ضمن شجرة DOM وتعديلها وحذفها باستخدام جافاسكربت. كما تعلمنا إضافة أصناف CSS وإزالتها وتبديلها واستبدالها في عنصر، وكيفية تحرير أنماط CSS.

ترجمة -وبتصرف- للمقال Understanding the DOM — Document Object Model لصاحبته Lisa Tagliaferri

تُحوِّل الدوال والمعاملات، في أغلب الأحيان، القيم التي تصلها إلى النوع الذي يناسبها وهذا ما يسمى «تحويل النوع». تُحوِّل الدالة alert مثلًا أي قيمة إلى سلسلة نصية تلقائيًا لإظهارها، وتُحوِّل والعمليات الرياضية القيم التي تستعملها إلى أعداد. كما توجد العديد من الحالات التي نكون فيها بحاجة لتحويل قيمة بصريح العبارة إلى النوع المطلوب.

لاحظ أنَّ هذا الفصل لا يتحدث عن الكائنات. سندرس الأنواع الأساسية أولًا، وبعدها ننتقل إلى الكائنات، ثم سنتعلم طريقة تحويل الكائن في فصل التحويل من كائن إلى أساسي.

التحويل إلى سلسلة نصية

يحدث التحويل إلى سلسلة نصية عندما نحتاج إلى الشكل النصي لقيمة ما. مثلًا، تُحوِّل الدالة alert(value)‎ القيمة value المُمرَّرة إليها إلى سلسلة نصية لإظهارها. ويمكن أيضًا استدعاء الدالة String(value)‎ لتحويل أي قيمة value إلى سلسلة نصية:

let value=true;
alert(typeof value); // Boolean

value = String(value); // "true" أصبحت الآن سلسلة نصية قيمتها
alert(tyoeof value); // string

يكون ناتج التحويل إلى سلسلة نصية عادةً واضحًا، فالقيمة المنطقية false تصبح "false"، والقيمة الخالية null تصبح "null" وهكذا.

التحويل إلى عدد

يحدث التحويل العددي في الدوال والتعابير الرياضية تلقائيًا. كما في حالة تطبيق عملية القسمة / على قيمتين غير عدديتين:

alert("6"/"2"); // الناتج: 3، إذ تحول السلاسل النصية إلى أعداد

بإمكاننا استخدام الدالة ‎Number(value)‎ لتحويل القيمة value المُمرَّرة إليها بشكل صريح إلى عدد:

let str = "123";
alert(typeof str); // string

let num =  Number(str); // 123 يتحول إلى العدد

alert(typeof num); // number

يكون التحويل الصريح ضروريًّا عندما نقرأ القيمة من مصدر نصي مثل العنصر text في النموذج <form> ويكون المطلوب إدخال عدد.

ويكون ناتج التحويل NaN (اختصارًا للعبارة Not a Number)، إذا كان من غير الممكن تشكيل عدد من السلسلة النصية. إليك مثلًا:

let age = Number("an arbitrary string instead of a number");

alert(age); // NaN, فشلت عملية التحويل

قواعد التحويل العددي:

أمثلة:

alert (Number("    123    ")); // 123
alert(Number("123z")); // NaN (error reading a number at "z")
alert(Number(true)); // 1
alert(Number(false)); //0

لاحظ أنَّ القيمتين null و undefined لهما خرج مختلف هنا: قيمة null تصبح 0، بينما undefined تصبح NaN.

جمع السلاسل النصية عبر المعامل +

تُحوَّل أغلب العمليات الرياضية القيم إلى أعداد. ولكن هناك استثناء وحيد يحدث عن الجمع عبر المعامل "+" وكون إحدى القيم المطلوب جمعها سلسلة نصية. يجري آنذاك تحويل القيمة الأخرى إلى سلسلة نصية أيضًا ثمَّ تُضاف إلى القيمة الآخرى وتُجمعان معًا في سلسلة نصية واحدة. إليك المثال التالي الذي يوضح ما سبق:

alert(1+'2'); // '12' (سلسلة نصية على اليمين)
alert('1'+2); // '12' (سلسلة نصية على اليسار)

يحدث هذا فقط عندما يكون أحد المعاملات على الأقل سلسلة نصية. أمَّا في الحالات الأخرى، تُحوَّل القيم إلى أعداد.

التحويل إلى قيمة منطقية

التحويل المنطقي وهو الأسهل من بين جميع عمليات التحويل. يحدث في العمليات المنطقية (لاحقًا سنتعرف على التحقق من الشروط وغيرها من العمليات المماثلة)، ولكن من الممكن تطبيقه أيضًا بشكل صريح عن طريق استدعاء Boolean(value)‎.

قاعدة التحويل:

• القيم التي تكون فارغة، مثل 0، والسلسلة النصية الفارغة، والقيمة undefined، والقيمة NaN تُحوَّل جميعها إلى false.
• أما ما تبقى، فيُحوَّل إلى القيمة true.

مثلًا:

alert(Boolean(1)); // true
alert(Boolean(0)); // false

alert(Boolean("hello")); // true
alert(Boolean ("")); // false

لاحظ أنَّ السلسلة العددية التي تحتوي على 0 تصبح true. ولكن هناك بعض اللغات البرمجية (مثل PHP) تحول "0" إلى القيمة false. ولكن في لغة JavaScript، تُحوَّل السلسلة النصية الغير فارغة دائمًا إلى القيمة true:

alert(Boolean("0"); // true
alert(Boolean(" "); // true تحول المسافات (وأي سلسلة نصية غير فارغة) إلى

الخلاصة

التحويلات الثلاث الأكثر انتشارًا للأنواع هي التحويل إلى سلسلة نصية، أو عدد، أو قيمة منطقية.

• التحويل إلى سلسلة نصية: يحدث عندما نريد إظهار خرج معين ويمكن تنفيذه عن طريق String(value)‎. ويكون خرج التحويل إلى سلسلة نصية واضحًا بالنسبة للأنواع الأساسية.
• التحويل إلى عدد: يحدث في العمليات الرياضية ومن الممكن تنفيذه باستخدام Number(value)‎. ويتبع هذا التحويل القواعد التالية:

  القيمة	ناتج التحويل
  Undefined	NaN
  null	0
  false و true	0 و 1
  string	يتم قراءة السلسلة النصية كما هي، وتجاهل الفراغات من البداية والنهاية. السلسلة النصية الفارغة تصبح 0. وعند وجود خطأ في نتيجة التحويل تكون النتيجة NaN.

• التحويل إلى قيم منطقية: يحدث في العمليات المنطقية ويمكن تنفيذه باستخدام Boolean(value)‎. ويتبع هذا التحويل القواعد التالية:

  القيمة	ناتج التحويل
  0, null, undefined, NaN, ""	false
  القيم الأخرى	true

معظم هذه القواعد سهلة الفهم والحفظ. ولكن هناك بعض الاستثناءات أو الأخطاء الشائعة مثل:

• القيمة undefined كعدد هي NaN وليست 0.
• "0" والسلاسل النصية المحتوي على فراغات فقط مثل " " تُحوَّل إلى القيمة المنطقية true.

تذكر أننا لم ندرس الكائنات بعد. سنعود إليها لاحقًا في فصل التحويل من الكائنات إلى الأنواع الأساسية المخصص للكائنات ولكن بعد تعلم المزيد من مبادئ JavaScript.

تمارين

1. تحويلات الأنواع

الأهمية: 5

ما هي نتيجة التعابير التالية؟

""+1+0
""-1+0
true+false
6/"3"
"2"*"3"
4+5+"px"
"$"+4+5
"4"-2
"4px"-2
7/0
"   -9   "+5
"   -9   "-5
null+1
undefined+1

فكر جيدًا، ثم اكتب حلك وقارنه مع الإجابة.

الحل:

""+1+0  ="10" // (1)
""-1+0 = -1 //(2)
true+false
6/"3" =2
"2"*"3" = 6
4+5+"px" = "9px"
"$"+4+5 = "$45"
"4"-2 = 2
"4px"-2 = NaN
7/0 = Infinity
"   -9   "+5 = "   -9   5" //(3)
"   -9   "-5 = -14 //(4)
null+1 = 1 //(5)
undefined+1 = NaN //(6)

ترجمة -وبتصرف- للفصل Type conversions من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: المعاملات في JavaScript
• المقال السابق: أنواع البيانات
• كامل مقالات دليل تعلم جافاسكربت

يمكن أن يحتوي المتغير على أي نوع من أنواع البيانات في JavaScript. أي من الممكن أن يكون متغير من نوع سلسلة نصية في وقت ما، ثم يتغير محتواه إلى قيمة عددية وهكذا دواليك.

// لا يوجد أي خطأ
let message = "hello";
message = 123456;

تسمى اللغات البرمجية التي تسمح بتغيير نوع القيم المسندة إلى المتغير بلغات برمجة «ديناميكية النوع» (dynamically typed)، ومعنى ذلك أنه توجد أنواع للبيانات ولكن لا يتم ربط المتغير بنوع معين منها.

هنالك سبعة أنواع أساسية في لغة JavaScript. سنذكرها الآن بشكل عام، وسنتحدث في الفصول القادمة عن كل نوع منها بالتفصيل.

الأعداد

let n=123;
n=12.345;

يمكن تمثيل الأعداد، بما فيها الأعداد الصحيحة (integers) والعشرية (floating point)، في JavaScript عبر النوع number.

هنالك العديد من العمليات التي يمكن تنفيذها على المتغيرات العددية، مثل، الضرب *، والقسمة /، والجمع +، والطرح -، وغيرها من العمليات الرياضية.

كما أن هناك «قيم عددية خاصة»، بالإضافة إلى الأعداد العادية، والتي تنتمي أيضًا إلى هذا النوع من البيانات مثل: Infinity، و ‎-Infinity، و NaN. وهاك شرحها:

• Infinity: وتمثل قيمة اللانهاية الرياضية، وهي قيمة خاصة أكبر من أي عدد موجب آخر. ومن الممكن أن نحصل عليها في عدة حالات منها قسمة عدد على الصفر:

alert (1/0); // Infinity

أو بالإمكان الإشارة إليها بشكل مباشر:

alert (Infinity); // Infinity

• NaN: هذه القيمة ناتجة عن اختصارالعبارة "Not a Number" (ليس عددًا) وتمثل خطأً حسابيًّا، أو حالة عدم تعيين. وهي نتيجة عملية رياضية خاطئة أو غير معروفة. إليك المثال التالي:

alert( "not a number"/2 ); // NaN, لا يمكن إجراء مثل عملية القسمة هذه

وتتصف القيمة NaN بأنها «لاصقة» (sticky)، أي بمعنى عندما ُتنفَّذ أي عملية على NaN، فالقيمة الناتجة هي NaN أيضًا.

alert ("not a number" / 2+5); // NaN

لذلك عند وجود القيمة NaN في أي مكان من التعابير الرياضية، فستطغى على كامل النتيحة.

وتنتمي القيم العددية الخاصة شكليًا فقط إلى نوع القيم العددية، لأنها في واقع الأمر لا تعبر عن أعداد بمفهومها الشائع. سنتكلم لاحقًا عن التعامل مع الأعداد في فصل (الأعداد).

العمليات الرياضية «آمنة»

ممارسة الرياضيات آمنة في JavaScript، وبإمكانك القيام بأي عملية حسابية، مثل: القسمة على صفر، والتعامل مع السلاسل الغير عددية كأعداد، وغيرها من العمليات. ثق تمامًا أن السكربت لن ينتهي بخطأ فادح (أو يتوقف عن العمل). أسوأ ما في الأمر أنك ستحصل على النتيجة NaN.

السلاسل النصية (النصوص)

تمثَّل النصوص (سنطلق عليها «سلاسل نصية» من الآن وصاعدًا) عبر النوع string. يجب أن تُحاط السلسلة النصية في JavaScript بإشارتي تنصيص.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed ${str}`;

يوجد في لغة JavaScript ثلاثة أنواع من إشارات التنصيص وهي:

1. المزدوجة: مثل "Hello".
2. المفردة: مثل 'Hello'.
3. المائلة: مثل Hello (إضافة الإشارة).

إشارتي التنصيص المفرد والمزدوج هما عبارة عن إشارات تنصيص تتصف بأنها «بسيطة» ولا يوجد أي فرق بينها في JavaScript.

أما إشارة التنصيص المائلة، فهي عبارة عن إشارات تنصيص لها «وظيفة إضافية»، إذ تسمح لك بإضافة متغيرات وتعابير إلى السلسلة النصية بعد إحاطتها بـ ‎${...}‎. فمثلًا:

let name = "أحمد";

// تضمين متغير
alert (`مرحبًا، ${name}!`); // مرحبًا، أحمد!

// تضمين تعبير
alert (`the result is ${1+2}`); // النتيجة هي 3

يُحسب التعبير داخل ‎${...}‎ وتصبح نتيجته جزءًا من السلسلة النصية. بإمكاننا وضع أي شيء هناك مثل: المتغير name أو التعبير الرياضي 1 + 2 أو حتى تعابير برمجية أخرى أكثر تعقيدًا.

ولكن أبقِ في ذهنك أن هذا مقتصر فقط على إشارات التنصيص المائلة. ولا تستطيع إشارات التنصيص الأخرى القيام بمثل هذا العمل!

alert (" the result is ${1+2}" ); // ${1+2} النتيجة هي
                              // فلا تفعل إشارات التنصيص المزدوجة أي شيء

إذا كنت تشعر بصعوبة الأمر، لا تقلق. سنتحدث عنه لاحقًا بشكل موسع في فصل السلاسل النصية.

المحارف ليس لها نوع مخصص للأسف

يوجد في بعض اللغات البرمجية نوعًا خاصًّا من البيانات للمحرف المفرد (character) ويسمى char في لغة C و Java مثلًا.

لا يوجد مثل هذا النوع في JavaScript. ويوجد فقط نوع واحد وهو string (سلسلة نصية) الذي من الممكن أن يحتوي على محرف واحد أو أكثر.

النوع المنطقي (البولياني)

يأخذ النوع boolean إحدى القيمتين: true (صح) أو false (خطأ) وتدعى هاتان القيمتان بالقيم المنطقية.

من الشائع استخدام هذا النوع لحفظ البيانات التي لها القيم (نعم / لا): true تعني "نعم، صحيح"، و false تعني "لا، خطأ". إليك المثال التالي:

let nameFieldChecked = true; // name نعم، جرى تحديد الحقل
let ageFieldChecked = false; // غير محدَّد age لا، الحقل

أضف إلى ذلك أن القيم المنطقية تعبِّر عن ناتج عمليات الموازنة:

let isGraeter = 4>1;
alert(isGreater); // true إذ نتيجة الموازنة محقَّقة أي

القيمة الخالية: null

لا تنتمي القيمة الخالية null إلى أي نوع من أنواع البيانات المذكورة سابقًا ولكن لها نوع خاص. يملك هذا النوع الخاص قيمة واحدة هي null:

let age = null;

في لغة JavaScript، لا يعبِّر النوع null عن مرجع لكائن غير موجود أو مؤشر خالي كما في لغات برمجية أخرى. ولكنه عبارة عن قيمة خاصة تمثِّل "لا شيء"، أو "فارغ"، أو "قيمة غير معلومة". فمثلًا، الشيفرة البرمجية السابقة تعدُّ المتغير age غير معلوم أو فارغ لسبب ما.

القيمة الغير معرفة: undefined

يمكن تمييز نوع آخر أيضًا للبيانات وهو «غير مُعرَّف» الذي يمثله النوع undefined. ويشكل هذا النوع نوعًا خاصًّا قائمًا بنفسه تمامًا مثل النوع null. أما معنى «غير معرّف» أي أنه لم تُسنَد أية قيمة للمتغير بعد:

let x;
alert (x); // "undefined" تُعرَض القيمة

تقنيًا، من الممكن إسناد القيمة undefined لأي متغير:

let x=123;
x = undefined;
alert(x); // "undefined"

ولكن لا أنصحك بالقيام بذلك. نستخدم عادةً القيمة null لإسناد القيمة الخالية أو غير المعروفة لمتغير، ونستخدم undefined للتحقق من أن إذا كان للمتغير قيمة أو لا.

الكائنات والرموز

النوع object (كائن) هو نوعٌ خاصٌّ. تسمى جميع الأنواع السابقة بالأنواع «الأساسية» (primitive) لأن قيمها تحتوي على شيء واحد فقط (سلسلة نصية أو عدد أو أي شيء آخر). ولكن تُستخدَم الكائنات لتخزين مجموعة من البيانات والكيانات (entity) الأكثر تعقيدًا. سنتعامل معها في فصل الكائنات بعد الانتهاء من دراسة الأنواع الأساسية.

يستخدم النوع symbol (رمز) لتشكيل معرّف (identifier) مُميَّز للكائنات. يُفضَّل دراسة هذا النوع بعد الانتهاء من الكائنات ولكن ذكره هنا ضروري لاستكمال جميع أنواع البيانات.

المعامل typeof

يُحدِّد المعامل typeof نوع الشيء المُمرَّر إليه. ويكون مفيدًا عندما تحتاج إلى معالجة القيم بطرق مختلفة حسب نوعها، أو فقط القيام بفحص سريع لنوع البيانات. ويمكن كتابة الصياغة بطريقتين:

1. معامل: typeof x.
2. تابع: typeof(x)‎.

بمعنى آخر، من الممكن استخدامه مع أو بدون الأقواس، وتكون النتيجة واحدة. نتيجة استدعاء typeof x هو سلسلة نصية تمثل اسم النوع:

typeof undefined    // "undefined"
typeof 0            // "number"
typeof true         // "boolean"
typeof "foo"        // "string"
typeof Symbol("id") // "symbol"
typeof Math         // "object" (1)
typeof null         // "object" (2)
typeof alert        // "function" (3)

قد تحتاج لتوضيح نتائج الأسطر الثلاث الأخيرة:

1. Math هو كائن مضمّن في JavaScript ويوفر العمليات الرياضية. سنتحدث عنه لاحقًا في فصل الأعداد، وذكرناه هنا فقط كمثال عن نوع الكائن.
2. نتيجة typeof null هي "object" أي كائن. أليس هذا خطأ؟! بالتأكيد. وقد تم الاعتراف بذلك رسميًا، ولكن بقيت هذه النتيجة من أجل المحافظة على التوافقية. القيمة "null" ليست كائنًا بل هي قيمة لنوع منفصل بحد ذاته. لذلك، مرةً أخرى، نؤكد أنّ هذا خطأ من اللغة نفسها.
3. نتيجة typeof alert هي "function" (دالة)، لأن alert هو دالة في لغة JavaScript. سنتحدث لاحقًا عن التوابع في الفصول القادمة وستلاحظ أنه لا يوجد نوع خاص اسمه "function" في لغة JavaScript. تنتمي التوابع إلى نوع الكائنات ولكن لها معاملة خاصة في typeof. شكليًا، هذا خطأ، ولكنه مفيد جدًا عند التطبيق العملي.

الخلاصة

هناك سبعة أنواع أساسية من أنواع البيانات في JavaScript هي:

• number: يمثِّل الأعداد بكل أنوعها: الصحيحة والعشرية.
• string: يمثِّل السلاسل النصية. ويمكن أن تحتوي السلسلة النصية على محرف واحد أو أكثر، ولكن لا يوجد نوع خاص من أجل المحرف الواحد.
• boolean: يمثِّل القيم المنطقية (صح / خطأ).
• null: يمثِّل القيم الخاوية. وهو نوع خاص يملك قيمة وحيدة وهي القيمة null.
• undefined: قيمة غير معرَّفة تكون قيمةً للمتغيرات التي لم تسند قيمة محدَّدة لها بعد. وهو نوع خاص يملك قيمة وحيدة وهي undefined.
• object: كائن من أجل بنى البيانات الأكثر تعقيدًا.
• symbol: رمز للمعرفات الخاصة.

ويسمح المعامل typeof بمعرفة أنوع القيم المخزنة في المتغيرات:

• له شكلين: typeof x أو typeof(x)‎.
• يعيد سلسلة نصية تحوي اسم النوع، مثل "string".
• من أجل null يعطي القيمة "object" وهذا خطأ في اللغة، فالقيمة الخالية ليست من نوع الكائن.

سنركز في الفصل القادم على القيم الأساسية ثم ننتقل إلى الحديث عن الكائنات.

تمارين

1. إشارات تنصيص السلاسل النصية

الأهمية: 5

ما هو خرج هذا السكربت؟

let name " Ilya";
alert (`hello ${1}`); //?
alert (`hello ${"name"}`); //?
alert (`hello ${name}`); //?

الحل

let name " Ilya";
// قيمة التعبير هو 1
alert (`hello ${1}`); // hello1

// "name" قيمة التعبير هي السلسلة النصية
alert (`hello ${"name"}`); // hello name

// name قيمة التعبير هو ما ضُمِّن بالمتغير
alert (`hello ${name}`); // hello Ilya

ترجمة -وبتصرف- للفصل Data types من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: التحويل بين الأنواع
• المقال السابق: المتغيرات
• كامل مقالات دليل تعلم جافاسكربت

سوف تحتاج، بالتأكيد، في مرحلة ما من عملك على تطوير التطبيقات في لغة JavaScript للتعامل مع المعلومات. فمثلًا، بإمكانك تخيل العمل على التطبيقين التاليين:

1. متجر إلكتروني – يمكن أن تتضمن المعلومات البضائع التي تباع وسلة التسوق.
2. تطبيق محادثة فورية – يمكن أن تتضمن المعلومات، والمستخدمين، والرسائل وغيرها.

إن أردنا تخزين هذه المعلومات، نحتاج إلى شيء يُخزِّنها ويحفظها لنا، وهذا ما تمثله المتغيرات تمامًا. فمثل المتغيرات كمثل الأوعية والآنية التي تحفظ وتُخزِّن كل ما يوضع فيها.

المتغير

المتغير هو «مَخزَن مُسمَى» (named storage) للبيانات، وهذا المخزن يقع في الذاكرة. بإمكانك استخدام المتغيرات لتخزين البضائع، والزوار وغيرها من البيانات.

إن أردت إنشاء متغير جديد في لغة JavaScript، استخدم الكلمة المفتاحية let. تنشئ العبارة البرمجية التالية (أو بمعنى آخر تصرّح عن، أو تُعرِّف) متغيرًا جديدًا باسم "message":

let message;

الآن، نستطيع وضع بعض البيانات فيه باستخدام معامل الإسناد =:

let message;
message='Hello'; // 'Hello' خزِّن السلسلة النصية

بعد تنفيذ هذه الشيفرة، تُحفَظ السلسلة النصية السابقة في منطقة من الذاكرة مرتبطة بهذا المتغير. ويمكننا الوصول إليها باستخدام اسم المتغير:

let message
mesaage = 'Hello!';

alert(message); // اظهار محتوى المتغير

وللاختصار، من الممكن الدمج بين التصريح عن المتغير وإسناد قيمة معينة له في نفس السطر بالشكل التالي:

let message = 'Hello!'; // التصريح عن المتغير وإسناد قيمة له
alert(message); // Hello!

كما من الممكن أيضًا التصريح عن عدة متغيرات في نفس السطر:

let user = 'John', age = 25, message = 'Hello';

يبدو هذا أقصر، ولكن لا أنصحك باستخدام هذه الطريقة. استخدم سطرًا مستقلًا لكل متغير لتسهيل قراءة الشيفرة البرمجية.

تبدو المتغيرات المتعددة الأسطر (المكتوبة على أسطر منفصلة) أطول قليلًا، ولكنها أسهل عند القراءة:

let user = 'John';
let age =25;
let message = 'Hello';

يصرِّح بعض المبرمجين عن عدة متغيرات بأسلوب الأسطر المتعددة بالشكل التالي:

let user = 'John',
   age = 25,
   message = 'Hello';

أو حتى من الممكن استخدام أسلوب «الفاصلة أولًا» (comma-first):

let user = 'John'
   , age = 25
   , message = 'Hello';

برمجيًا، جميع هذه الحالات متماثلة وظيفيًّا. لذلك، يعود الأمر لك لتختار الأنسب والأفضل.

ملاحظة حول استخدام var بدلًا من let: في السكربتات القديمة، من الممكن أن تلاحظ استخدام الكلمة المفتاحية var بدلًا من let للتصريح عن المتغيرات:

var message = 'Hello';

وللكلمة المفتاحية var نفس عمل let تقريبًا. فهي تصرح أيضًا عن المتغيرات ولكنها تختلف عنها قليلًا، ومن الممكن أن تعتبرها، الطريقة «التقليدية» (old-school) للتصريح عن المتغيرات.

هناك فروق دقيقة بين let و var، لكنها حاليًا غير مهمة بالنسبة لك. سندرس هذه الفروق بالتفصيل في فصل المتغير القديم.

مثال واقعي للمتغيرات

إن أردت فهم مبدأ عمل المتغيرات فهمًا جيدًا، فتخيل «صندوقًا»، وعليه لُصاقة باسم مميز. فمثلًا، بإمكانك تخيل المتغير message بصندوق مسمى بالاسم "message"، وداخل هذا الصندوق القيمة "Hello!‎"

بإمكانك وضع أي قيمة في الصندوق، كما بإمكانك تغيير هذه القيمة مرارًا وتكرارًا:

let message;
message = 'Hello!';
message = 'World!'; // value changed
alert(message);

ولكن لاحظ أنه عندما تتغير القيمة، تُحذَف البيانات السابقة من المتغير.

بإمكانك أيضًا التصريح عن متغيرين ونسخ البيانات من أحدهما إلى الآخر.

let hello = 'Hello world!';
let message;
// message إلى المتغير hello من المتغير 'Hello world' نسخ القيمة
message = hello;

// يملك المتغيران الآن البيانات نفسها
alert(hello); //Hello world!
alert(message); // Hello world!

اللغات الوظيفية

من الأمور التي تجدر ملاحظتها أيضًا أن اللغات البرمجية الوظيفية، مثل Scala أو Erlang، تمنع تغيير قيم المتغيرات بعد إسنادها إليها. أي عندما تخزن القيمة في الصندوق، في مثل تلك اللغات، فإنها تبقى فيه للأبد. وعند الحاجة إلى تخزين بيانات أخرى، تجبرك اللغة على خلق صندوق آخر (التصريح عن متغير جديد)، ولا يمكنك آنذاك إعادة استخدام الصندوق السابق ولا حتى إعادة الصندوق الحالي الذي أنشأته. هل يمكنك تخيل كومة الصناديق التي ستتراكم بعد فترة من الزمن؟!

يبدو الأمر غريبًا وصعبًا قليلًا، ولكن فعليًا هذه اللغات قادرة على إجراء تطويرات جادة ومهمة. كما أنَ بعض المجالات تستغل هذه المحدودية وتعتبرها فائدة كما في الحوسبة المتوازية مثلًا. دراسة مثل هذه اللغات جيد لتوسيع مداركك وآفاقك (حتى لو كنت لا تخطط لاستخدامها قريبًا).

تسمية المتغيرات

هنالك شرطان لأسماء المتغيرات في JavaScript:

1. يجب ألا يحتوي اسم المتغير إلا على حروف، و أرقام، و الرمزين $ و _ فقط.
2. يمنع استخدام رقم في أول حرف من الاسم، أي يجب ألا يبدأ اسم المتغير برقم.

أمثلة عن التسمية الصحيحة للمتغيرات:

let userName;
let test123;

عندما يتألف الاسم من عدة كلمات، يستخدم عادةً أسلوب «سنام الجمل» (camelCase). حيث تكتب الكلمات متتالية دون أي فاصل، وتبدأ كل كلمة بحرف كبير: myVeryLongName.

الأمر المميز الآخر هو أنه من الممكن استخدام رمز الدولار $ والشرطة التحتية _ في أسماء المتغيرات. وهما عبارة عن رمزين عاديين، كأي حرف آخر، وليس لهما معنًى خاص.

أمثلة عن بعض الأسماء المسموحة:

let $=1; // "$" التصريح عن متغير اسمه
let _=2; // "_" والتصريح عن متغير آخر اسمه

alert($ + _); // 3

وأمثلة عن بعض أسماء المتغيرات المكتوبة خطأً:

let 1a; // لا يمكن بدء اسم المتغير برقم
let my-name; //  لا يسمح باستعمال الشرطة '-' في أسماء المتغيرات

ملاحظة: حالة الأحرف مهمة
فالمتغير الذي اسمه apple مختلفٌ تمامًا عن المتغير الذي اسمه AppLE.

ملاحظة: استخدام أحرف من لغات أخرى غير الإنجليزية
من الممكن استخدام أحرف من أي لغة غير الإنجليزية وحتى الأحرف العربية أو السيريلية أو الهيروغليفية، ولكن لا ننصحك بذلك. فمثلًا:

let имя = '…';
let 我 = '…';
let رسالة = '…';

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

الأسماء المحجوزة

هناك قائمة من الكلمات المحجوزة، والتي ليس ممكنًا استخدامها كأسماء للمتغيرات لأنها مستخدمة من قبل اللغة نفسها.

مثلًا، الكلمات التالية: let، و class، و return، و function محجوزة. والشيفرة البرمجية التالية سينتج عنها خطأ في الصياغة:

let let = 5; // "let" خطأ! لا يمكن تسمية المتغير بالاسم
let return = 5; // أيضًا "return" خطأ! لا يمكن تسمية المتغير بالاسم

الإسناد بعيدًا عن الوضع الصارم

نحتاج عادةً إلى التصريح عن متغير قبل استخدامه. ولكن سابقًا، كان من المسموح برمجيًا خلق المتغير فقط بإسناد قيمة له دون استخدام let أو أي كلمة مفتاحية أخرى. ما زال هذا ممكنًا، ولكن بشرط عدم استخدام الموجه "use strict" في السكربت وذلك لضمان استمرارية التوافق مع السكربتات السابقة.

// هنا "use strict" انتبه إلى عدم استخدام الموجه
num = 5; // إن لم يكن موجودًا "num" سيُنشَأ المتغير
alert(num); // 5

ولكن أبقِ في ذهنك أنها طريقة سيئة، وسينتج عنها خطأ عند عملك ضمن الوضع الصارم (strict mode):

"use strict"
num = 5; // error: num is not defined

الثوابت

للتصريح عن ثابت، وهو المتغير الذي لا تتبدل قيمته، استخدم const بدلًا من let:

const myBirthday = '18.04.1982';

المتغيرات التي يُصرَّح عنها باستخدام const تُسمَّى «الثوابت» ولا يمكن أن تتغير قيمتها؛ وأي محاولة للقيام بذلك ينتج عنها خطأ عند تنفيذ الشيفرة:

const myBirthday = '18.0401982';
myBirthday = '01.01.2001'; // خطأ! لا يمكن إعادة إسناد قيمة لثابت

يستخدم المبرمج الثابت عندما يكون متأكدًا أن قيمة المتغير لن تتبدل أو لا يجب أن تتبدل ضمن البرنامج، ويصرح عنه باستخدام const. أما الفائدة من ذلك فهي ضمان والتحقق من وصول هذه الحقيقة إلى الجميع.

متى تستخدم الأحرف الكبيرة في تسمية الثوابت؟

هنالك عرف منتشر في استخدام الثوابت كأسماء مستعارة أو مرادفات للقيم صعبة الحفظ أو القيم العددية الثابتة المعروفة قبل التنفيذ. تسمى مثل هذه الثوابت باستخدام الأحرف الكبيرة والشرطة السفلية (_). كما في هذا المثال:

const COLOR_RED = "#F00";
const COLOR_GREEN = '#0F0";
const COLOR_BLUE = '#00F";
const COLOR_ORANGE = '#FF7F00";

// .. عندما نريد انتقاء لون
let color = COLOR_ORANGE;
alert(color); // #FF7F00

والفائدة من ذلك:

• حفظ وتَذكُّر COLOR_ORANGE أسهل بكثير من "‎#FF7F00".
• احتمال ارتكاب خطأ بكتابة "‎#FF7F00" أكبر بكثير من كتابة COLOR_ORANGE.
• قراءة الاسم COLOR_ORANGE في الشيفرة البرمجية له معنًى جلي خلافًا لقراءة ‎#FF7F00.

ربما تتساءل الآن وأنت في حيرة، متى تستخدم الأحرف الكبيرة لتسمية الثوابت ومتى نسميها بالشكل الاعتيادي؟ حسنًا، سنوضح ذلك الآن.

عندما تصرِّح عن ثابت، فهذا يعني أن قيمة هذا المتغير لن تتبدل أبدًا. ولكن ميز بين نوعين من الثوابت: الأول هو الثوابت التي تكون قيمتها معروفة قبل التنفيذ (كما في المثال السابق، فالقيمة الست عشرية للون الأحمر معروفة سابقًا وثابتة). أما النوع الثاني، فهو الثوابت التي تحسب قيمتها أثناء عمل السكربت، وخلال التنفيذ، ولكنها لا تتغير بعد إسناد قيمة لها.

مثال على ذلك:

const pageLoadTime = /* الوقت الذي تستغرقه الصفحة للتحميل */;

قيمة الثابت pageLoadTime تكون غير معروفة قبل تحميل الصفحة، لذلك يتم تسمية الثابت بشكل عادي. ولكنه ثابت لأنَّ قيمته لا تتغير بعد إسنادها له.

بمعنًى آخر، الثوابت المسماة بأحرف كبيرة تُستخدَم فقط كمرادفات للقيم صعبة الكتابة في الشيفرة البرمجية (hard-coded).

تسمية الأشياء تسميةً صحيحةً

بما أننا نتكلم عن المتغيرات، لابدّ أن نذكر أمرًا مهمًّا للغاية متعلق بتسمية المتغيرات. أرجوك أن تختار أسماء منطقية للمتغيرات، وأن تأخذ الوقت الكافي للتفكير بالأسماء المناسبة لها.

لا تُعدُّ مهمة تسمية المتغيرات مهمةً بسيطةً، فهي واحدة من المهارات الأكثر أهمية وتعقيدًا في البرمجة. و بإمكانك بنظرة سريعة على أسماء المتغيرات المستخدمة في الشيفرة البرمجية معرفة مدى خبرة المطور الذي كتبه.

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

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

وإليك بعض النصائح الجيدة لاتباعها في تسمية المتغيرات:

• استخدم أسماء يمكن للآخرين قرائتها وفهمها مثل userName أو shoppingCart.
• ابتعد عن الاختصارات أو الأسماء القصيرة مثل a، أو b، أو c إلا إذا كان العمل واضحًا لك بشكل جيد.
• اجعل أسماء المتغيرات تصف محتواها ولكن لا تبالغ كثيرًا، بل حاول أن تكون مختصرة أيضًا. وكمثال عن الأسماء السيئة data و value. مثل هذه الأسماء لا تعبر عن أي شيء. ومن الممكن استخدامها فقط إذا كان سياق الشيفرة البرمجية، يوضح بشكل بديهي واستثنائي، أي بيانات أو قيم يشير إليها المتغير.
• اتفق على شروط معينة ضمن فريقك أو حتى مع نفسك في تسمية المتغيرات. فإذا كان اسم زائر الموقع هو user، فإن اسم المتغيرات المرتبطة به تكون أسماؤها currentUser أو newUser عوضًا عن currentVisitor أو NewManInTown.

يبدو ذلك بسيطًا، أليس كذلك؟ بالتأكيد، إنها عملية بسيطة. ولكن اختيار أسماء جيدة ومختصرة ليس بالأمر السهل في الحياة العملية، ولكن ننصحك بإيلاء أسماء المتغيرات أهمية كبيرة واختيارها بعناية مطلقة.

هل تعيد استخدام المتغير أم تخلق متغيرًا جديدًا؟

أخيرًا وليس آخرًا، هناك بعض المبرمجين الكسالى الذين يفضلون إعادة استخدام المتغيرات الموجودة عوضًا عن خلق متغيرات جديدة. وبالنتيجة، تصبح متغيراتهم مثل الصناديق التي يرمي فيها الناس أشياء مختلفة من دون تغيير مسمياتهم. ماذا يوجد الآن داخل الصندوق؟ لا أحد يعلم. نحتاج إلى الاقتراب والتحقق من محتواه.

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

المتغير الإضافي هو أمر جيد وليس سيء. وتعمل «مصغرات» (minifiers) لغة JavaScript الحالية والمتصفح على تحسين الشيفرة البرمجية بشكل جيد، وذلك لتفادي أية مشاكل في أدائها. كما أن استخدام المتغيرات المختلفة للقيم المختلفة يساعد المحرك أيضًا في تحسين شيفرتك البرمجية.

الخلاصة

بإمكاننا التصريح عن المتغيرات لتخزين البيانات باستخدام الكلمات المفتاحية var، أو let، أو const.

• let: تستخدم للتصريح عن المتغيرات في النسخة الحالية. كما يجب استخدام الوضع الصارم (strict mode) لاستخدام let في V8.
• var: هي الطريقة التقليدية للتصريح عن المتغيرات. عادةً، لا نستخدم هذه الطريقة على الإطلاق، ولكن سنتعرف على الفروقات الدقيقة بينها وبين let في مقال إفادة var القديمة وهذا أمر ضروري في حال اضطررت لاستخدامها.
• const: مثل let، ولكن قيمة المتغير لا يمكن تعديلها. كما يجب تسمية المتغيرات بطريقة تسمح لنا بفهم القيم المسندة إليها بسهولة.

تمارين

1. العمل مع المتغيرات

الأهمية: 2

1. صرّح عن المتغيرين: admin و name.
2. أسند القيمة "John" إلى المتغير name.
3. انسخ قيمة name إلى المتغير admin.
4. اعرض قيمة المتغير admin باستخدام التنبيه alert (يجب أن يكون الخرج "John").

الحل:

let admin, name; // يمكننا التصريح عن متغيرين في الوقت نفسه
name = "Mohammad";
admin= name;
alert (admin); // "Mohammad"

2. اختيار الأسماء المناسبة

الأهمية: 3

1. أنشئ متغيرًا وليكن اسمه كوكبنا (our planet). كيف يمكنك تسمية هذا المتغير؟
2. أنشئ متغيرًا لتخزين اسم الزائر الحالي للموقع. كيف بإمكانك اختيار اسم هذا المتغير؟

الحل:

let ourPlanetName = "Earth";

let currnetUserName = "John";

3. الثوابت بالأحرف الكبيرة؟

الأهمية: 4

تفحص الشيفرة البرمجية التالية:

const birthday = '18.04.1982';
const age = someCode(birthday);

هنا لدينا الثابت birthday الذي يحوي تاريخًا والثابت age الذي سيُحسَب من birthday عن طريق الشيفرة البرمجية someCode (لم يتم كتابتها للاختصار، ولأن هذه التفاصيل غير مهمة الآن).

هل يكون صحيحًا استخدام الأحرف الكبيرة لتسمية الثابت birthday أو الثابت age أو كلاهما؟

const BIRTHDAY   = '18.04.1982'; // هل يُكتَب اسم المتغير بالأحرف الكبيرة؟
const AGE = someCode(BIRTHDAY); // هل يُكتَب اسم المتغير بالأحرف الكبيرة؟

الحل:

ترجمة -وبتصرف- للفصل Variables من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: أنواع البيانات
• المقال السابق: الوضع الصارم: النمط الحديث لكتابة الشيفرات
• كامل مقالات دليل تعلم جافاسكربت

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

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

واستمرت هذا الحال حتى ظهور ECMAScript 5 (اختصارًا ES5) في عام 2009. التي أضافت خصائص جديدة إلى اللغة وعدّلت على بعض الخصائص الموجودة سابقًا. ولضمان استمرار عمل الشيفرات البرمجية السابقة، فإنّ معظم هذه التعديلات كانت غير فعّالة بشكل افتراضي؛ ولاستخدامها، عليك تفعيلها بشكل صريح باستخدام الموجه الخاص: "use strict".

الموجه "use strict"

يبدو الموجه كسلسلة نصية: "use-strict" أو 'use strict'. وعندما يوضع في بداية السكربت، يُنفَّذ السكربت وفق الطريقة والمعايير الحديثة.

إليك المثال التالي:

"use strict";
//هذه الشيفرة البرمجية تعمل في الوضع الصارم
…

قريبًا، سندرس الدوال (طريقة لجمع الأوامر). ولكن في نطرة استباقية للموضوع، لاحظ أنه بالإمكان وضع "use strict" في بداية معظم أنواع الدوال عوضًا عن كامل السكربت. وبذلك يتم تفعيل الوضع الصارم (strict mode) ضمن الدوال فقط. لكن عادةً يستخدم المبرمجون هذا الوضع لكامل السكربت.

تأكد من وضع "use script" في بداية السكربتات، وإلا فإنه من الممكن ألا يُفعَّل الوضع الصارم. فمثلًا، الوضع الصارم غير مفعّل في المثال التالي:

alert("some code");
// إن لم يُستعمَل في أول سطر "use strict" سيجري تجاهل الموجه
"use strict"
// الوضع الصارم غير مُفعَّل

بإمكانك كتابة التعليقات فقط قبل استخدام الموجه "use strict". لاحظ أيضًا أنه ليس هناك طريقة لإلغاء "use strict"، أي لا يوجد موجه آخر مثل "no use strict" والذي يثني المحرك عن عمله ويلغي تفعيل الوضع الصارم. لذلك عند بدء استخدام الوضع الصارم، لا توجد طريقة لإلغائه والعودة إلى الوضع الافتراضي.

طرفية المتصفح

أبقِ في ذهنك أن طرفية المتصفح (console) لا تستخدم الوضع الصارم لاختبار وتنفيذ الشيفرات المكتوبة فيها؛ أي أنها لا تستخدم "use strict" افتراضيًا.

عندما يوجد هناك اختلاف بين "use strict" والنمط الافتراضي في بعض الأحيان، قد تحصل على ناتج خطأ. ولن تنجح محاولتك في تفعيل الوضع الصارم (strict) بالضغط على الاختصار Shift+Enter لإدخال عدة أسطر، ثم استخدام "use strict" في البداية وذلك بسبب طريقة معالجة الطرفية للشيفرة البرمجية داخليًا.

الطريقة الأفضل للتأكد من عمل "use strict" هو كتابة الشيفرة البرمجية ضمن الطرفية كما يلي:

(function() {
'use strict';
// … ضع شيفرتك هنا …
})()

استخدم "use strict" دومًا

سنتعلم لاحقًا الاختلافات بين الوضع الصارم والوضع الافتراضي الذي تعمل ضمنه الشيفرات. ففي الفصل القادم، ستلاحظ الاختلافات بين هذين الوضعين أثناء تعلمك للخصائص الجديدة. من الجيد أنه لا يوجد الكثير من هذه الاختلافات، وفي حال وجودها فهي لتحسين عمل الشيفرة البرمجية. ولكن في الوقت الحالي تكفي معرفتك بهذه الأمور العامة:

1. الموجه "use strict" يحول المحرك إلى النمط الحديث (modern)، مما يغير من طريقة تعامله مع بعض الخصائص الموجودة سابقًا. سندرس ذلك بالتفصيل في الأجزاء القادمة من هذه السلسلة التعليمية.
2. يتم تفعيل الوضع الصارم بوضع الموجه "use strict" في بداية السكربت أو الدالة. العديد من خصائص اللغة، مثل الأصناف (classes) والوحدات (modules)، ُتفعِّل الوضع الصارم (strict) تلقائيًا.
3. الوضع الصارم (strict) مدعوم من قبل جميع المتصفحات الحالية.
4. أنصحك دائمًا بوضع "use strict" في بداية السكربت. جميع الأمثلة في هذه السلسلة التعليمية تفترض العمل ضمن الوضع الصارم إلا إذا ذُكر غير ذلك وهذا في بعض الحالات النادرة.

ترجمة -وبتصرف- للفصل "Modern mode, "use strict من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: المتغيرات
• المقال السابق: بنية الشيفرة البرمجية
• كامل مقالات دليل تعلم جافاسكربت

في هذا المقال، سنبدأ بتعلم أساسيات كتابة الشيفرة البرمجية في لغة JavaScript. هل أنت مستعد؟ لننطلق!

التعابير البرمجية

التعابير البرمجية هي صياغة التراكيب والأوامر التي تنفذ الأعمال في السكربت. رأيت سابقًا التعبير البرمجي alert('Hello, world!')‎ الذي يُظهر الرسالة "Hello, world!‎".

بإمكانك استخدام تعابير بقدر ما تريد في شيفرتك البرمجية. ويمكن فصل التعابير البرمجية عن بعضها بالفاصلة المنقوطة (;).

مثلًا، بإمكاننا فصل "Hello World" إلى تنبيهين منفصلين بالشكل التالي:

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

تُكتَب التعابير البرمجية عادةً على أسطر منفصلة لتسهيل قراءة الشيفرة البرمجية:

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

الفاصلة المنقوطة

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

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

تُفسِّر لغة JavaScript الانتقال إلى سطر جديد بفاصلة منقوطة (ضمنيًا). وهذا ما يُسمى (الاضافة التلقائية للفاصلة المنقوطة [Automatic semicolon insertion]).

في معظم الحالات، يتضمن السطر جديد فاصلةً منقوطةً افتراضية في آخره ولكن هذا لا يشمل جميع الحالات. هناك حالات لا يحوي فيها السطر الجديد بالضرورة فاصلةً منقوطةً افتراضية. إليك مثلًا:

alert(3+
1
+2);

خرج الشيفرة البرمجية السابقة هو 6 لأنَّ لغة JavaScript لا تضيف الفاصلة المنقوطة في هذه الحالة. فمن البديهي أنه عند انتهاء السطر بإشارة "+" يكون التعبير ناقصًا (incomplete expression)، وبالتالي لا يتطلب وجود فاصلة منقوطة. لذلك، تعمل الشيفرة البرمجية كما هو مطلوب.

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

إذا كنت ترغب في الاطلاع على مثال واقعي عن هذه الحالة، إليك الشيفرة البرمجية التالية:

[1, 2].foreach(alert)

لا تقلق إن كانت هذه الشيفرة صعبة الفهم عليك، فليس هناك حاجة الآن لفهم معنى الأقواس المعقوفة [] أو التعبير البرمجي forEach، فسندرسهم لاحقًا. ولكن أبقِ في ذهنك أن خرج هذه الشيفرة البرمجية هو إظهار 1 ثم 2.

سنضيف الآن تنبيهًا (alert) قبل الشيفرة البرمجية السابقة دون وضع الفاصلة المنقوطة في نهاية العبارة البرمجية:

alert("There will be an error")
[1 ,2].forEach(alert)

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

alert("All fine now");
[1 ,2].forEach(alert)

تظهر لدينا الآن الرسالة "All fine now"، ثم 1 و 2. الخطأ الذي حدث في الحالة الأولى (حالة عدم إضافة الفاصلة المنقوطة) سببه أنَّ لغة JavaScript لا تضيف الفاصلة المنقوطة تلقائيًا عند الانتقال إلى سطر جديد في حال وجود الأقواس المعقوفة […] في بداية هذا السطر. وبالتالي لن تُضاف الفاصلة المنقوطة تلقائيًا في الحالة الأولى وسيتم التعامل مع الشيفرة البرمجية كعبارة برمجية واحدة. أي سيراها المحرك بالشكل التالي:

alert("There will be an error")[1, 2].forEach(alert)

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

بناءً على ما سبق، ننصحك بإضافة الفاصلة المنقوطة بين التعابير البرمجيَّة حتى لو قمت بفصلها بأسطر جديدة. وهذه هي القاعدة الأكثر اتباعًا بين مستخدمي JavaScript. لنراجع سويةً ما ذُكر سابقًا، من الممكن الاستغناء عن الفاصلة المنقوطة في معظم الحالات، ولكن من الأفضل إضافتها في آخر العبارة البرمجية - وخاصةً بالنسبة للمبتدئين - تجنبًا للوقوع في أخطاء عصية التنقيح والتصحيح أنت بغنًى عنها.

التعليقات

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

التعليقات المكتوبة على سطر واحد تبدأ بخطين مائلين (forward slash) بالشكل //. ويكون الجزء التالي للخطين المائلين على نفس السطر تعليقًا. ومن الممكن أن يشغل التعليق سطرًا كاملًا أو يأتي التعليق بعد العبارة البرمجية.

إليك المثال التالي الذي يشرح ما سبق:

// يمتد هذا التعليق على كامل السطر فقط
alert('Hello');
alert('World'); // هذا تعليق يلي تعبيرًا برمجيًّا

وإن أردت كتابة تعليقات تمتد على عدَّة أسطر، فابدأ التعليق متعدد الأسطر بخط مائل يليه رمز النجمة (أي ‎/*‎) ، وأنهِ التعليق برمز النجمة ثم الخط المائل (أي ‎*/‎) . إليك المثال التالي:

/* يُظهر هذا المثال تنبيهين
وهذا التعليق متعدد
الأسطر
*/
alert('Hello');
alert('World');

يجري تجاهل كل ما يقع داخل التعليق متعدد الأسطر، وبالتالي لا تُنفَّذ أية شيفرة برمجية موجودة داخل /*…*/.

أحيانًا، يكون من المفيد إلغاء تفعيل جزء من الشيفرة البرمجية مؤقتًا أثناء تنقيح الأخطاء:

/* تعليق جزء من الشيفرة
alert('Hello');
*/
alert('World');

استخدام الاختصارات

من الممكن تعليق سطر واحد من الشيفرة البرمجية بالضغط على الاختصار Ctrl+/‎ في معظم المُحرِّرات وبيئات التطوير. ومن أجل التعليقات متعددة الأسطر من الممكن استخدام الاختصار Ctrl+Shift+/، (عليك أن تحدد جزءًا من الشيفرة البرمجية ثم الضغط على الاختصار). في الأجهزة التي تعمل على الماك، جرّب Cmd عوضًا عن Ctrl.

تحذير: التعليقات المتداخلة متعددة الأسطر غير مدعومة. أي لا يمكنك وضع /*…*/ داخل /*…*/ آخر، إذ ستنتهي هذه الشيفرة البرمجية بخطأ:

/*
التعليق الخارجي
            /*تعليق متشعب*/
لاحظ لوني الأسود
*/
alert('World');

لا تتردد أبدًا في وضع التعليقات ضمن شيفرتك البرمجية وشرح ما الذي يجري فيها لأنك عندما تعود إليها لاحقًا، ستجد غالبًا أنك نسيت وظيفة كل جزء من شيفرتك.

قد تزيد التعليقات من حجم الشيفرة ولكن هذه ليست بمشكلة. هناك العديد من الأدوات التي تُقلِّص الشيفرة البرمجية قبل نشرها على خادم الإنتاج، إذ تَحذِف التعليقات من السكربت نهائيًّا ولا يبقَ لها بذلك أي أثر. في تلك الحالة، لا يكون للتعليقات أي آثار سلبية عند الإنتاج. لا تقلق مرة أخرى إن لم تتضح لك الصورة ولم تفهم بعض المصطلحات (مثل ما الذي يقصد بالإنتاج) فكل شيء سيتضح تدريجيًّا.

لاحقًا في هذه السلسلة التعليمية، سيكون هناك فصل عن جودة الشيفرة البرمجية والذي يشرح طريقة كتابة التعليقات بشكل أفضل.

ترجمة -وبتصرف- للفصل Code structure من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: الوضع الصارم: النمط الحديث لكتابة الشيفرات
• المقال السابق: المثال الأول: أهلًا بالعالم!
• كامل مقالات دليل تعلم جافاسكربت

أبقِ في ذهنك أنَ هذه السلسلة التعليمية هي عن أساس لغة جافاسكربت (core JavaScript) المستقلة عن أي منصة. سنتعرف لاحقًا على Node.JS والمنصات التي تستخدمها.

الآن، نحن بحاجة إلى بيئة للعمل وتشغيل السكربتات التي سنكتبها، ويبدو المتصفح خيارًا جيدًا بما أنك تتابع هذه السلسلة التعليمية عبر الإنترنت. سنقلل من استعمال التعليمات التي تعمل فقط على المتصفح (مثل alert) لكي لا يضيع مجهودك بالتركيز عليها خاصةً إن كنت تنوي العمل في بيئة أخرى (مثل Node.JS). وسنركِّز على لغة JavaScript ضمن المتصفح في الجزء القادم من هذه السلسلة التعليمية.

في البداية، سنتعرَّف على طريقة إضافة السكربت إلى صفحة الويب. من أجل البيئات التي تعمل على الخادم (مثل Node.JS)، بإمكانك تنفيذ السكربت عن طريق أمرٍ مثل node my.js.

الوسم <script>

من الممكن تضمين برامج لغة JavaScript في أي جزء من مستند HTML باستخدام الوسم <script>. على سبيل المثال:

<!DOCTYPE HTML>
<html>

<body>

<p>Before the script… </p>

<script>
    alert(‘Hello, world!’);
</script>

<p>...After the script.</p>

</body>

</html>

يحتوي الوسم <script> على شيفرة JavaScript تُنفَّذ تلقائيًا عندما يعالج المتصفح الوسم.

الترميز الحالي

يملك الوسم <script> عددًا من الخاصيات، ونادرًا ما يتم استخدامها الآن، ولكن ما زال بإمكانك رؤيتها في الشيفرات البرمجية القديمة.

الخاصية type

<script type=...>

تتطلب معايير لغة HTML القديمة، HTML4، إسناد قيمة للخاصية type في الوسم <script>، وعادةً ما تكون type="text/javascript"‎، لكن هذا الأمر لم يعد ضروريًا. كما أنَ معنى هذه الخاصية تغيَر بشكل كامل وفق معايير لغة HTML بنسختها الحالية، HTML5. وأصبحت تستخدم مع وحدات (modules) لغة JavaScript. ولكنه موضوع متقدم سنتحدث عنه لاحقًا في جزء آخر من هذه السلسلة التعليمية.

الخاصية language

<script language=...>

تُستخدَم هذه الخاصية لتحديد اللغة المكتوب بها السكربت، ولكنها لم تعد مهمة الآن، لأن لغة JavaScript أصبحت هي اللغة الافتراضية، ولم تعد هناك حاجة لاستخدام هذه الخاصيَّة.

التعليقات قبل وبعد السكربتات

من الممكن أن تجد تعليقات ضمن الوسم <script> في كتب ومراجع لغة JavaScript القديمة، مثل:

<script type=”text/javascript”><!--
    …
//--></script>

تعمل هذه التعليقات على إخفاء الشيفرة البرمجية عن المتصفحات القديمة والتي لا تعرف معالجة الوسم <script> ولم تعد مستخدمة في لغة JavaScript بنسختها الحالية. وبما أن نسخ المتصفحات في السنوات الخمسة عشر الماضية لا تملك هذه المشكلة، فإنً هذا النوع من التعليقات يمكًنك من تحديد الشيفرات البرمجية القديمة للغة JavaScript.

ما هو الاستعمال الحديث للعنصر <script>؟

عندما تكون الشيفرة البرمجية للغة JavaScript طويلة، قد ترغب في وضعها في ملف مستقل. ويتم ربط ملف السكربت إلى HTML عن طريق الخاصية src:

<script src=”/path/to/script.js”></script>

هنا المسار path/to/script.js/ هو المسار الكامل لملف السكربت (ابتداءً من جذر الموقع).

بإمكانك أيضًا إدخال المسار نسبةً للصفحة الحالية. مثلًا، المسار ("src="script.js) معناه أنً الملف script.js موجود في نفس المجلد الذي توجد فيه الصفحة.

بالإمكان أيضًا استخدام عنوان الموقع كاملًا، كما في المثال التالي:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js”></script>

وإن أردت ربط عدة سكربتات مع نفس الصفحة، فاستخدم الوسم <script> لكل سكربت على حدة:

<script src=”/js/script1.js”></script>
<script src=”/js/script2.js”></script>

ملاحظة: يمكنك العمل بالقاعدة التالية، «السكربتات البسيطة فقط تُضمَّن مع HTML والسكربتات الأكثر تعقيدًا تُكتَب في ملفات مستقلة». والفائدة من وجود ملف مستقل هي امكانية تنزيل المتصفح لهذا السكربت مرة واحدة وتخزينه في ذاكرة مؤقتة (cache). وبذلك، تتمكن الصفحات الأخرى المرتبطة بنفس السكربت من طلبه وجلبه من الذاكرة المؤقتة عوضًا عن تنزيله مرةً أخرى. وبذلك يتم فعليًا تنزيله مرة واحدة، مما يقلل حركة البيانات عبر الإنترنت ويُسرِّع تحميل ومعالجة صفحات الويب.

تحذير: انتبه إلى أنه يجري تجاهل السكربت المكتوب ضمن الوسم <script> في حال ربطه مع ملف مستقل أي عند إسناد قيمة أو مسار معين للخاصية src. بعبارة أخرى، ليس بإمكان الوسم <script> أن يُنفِّذ شيفرتين برمجيَّتين في آن واحد: شيفرة قادمة من الخاصية src وشيفرة برمجية مكتوبة بداخله.

فمثلًا، لن تُنفَّذ التعليمة البرمجية alert(1)‎ المكتوبة ضمن الوسم في هذا المثال:

<script src=”file.js”>
    alert(1);  // src سيجري تجاهل أي محتوى مكتوب ضمن الوسم بسبب ضبط الخاصية
</script>

يجب أن تختار أحد الأمرين: ملف خارجي مستقل للسكربت <script src="..."‎>، أو وسم <script> عادي يحوي ضمنه على الشيفرة البرمجية المراد تنفيذها.

بالإمكان فصل السكربت في المثال السابق إلى وسمين <script> منفصلين ليعمل بشكل صحيح:

<script src=”file.js”></script>
<script>
    alert(1);
</script>

الخلاصة

• نستخدم الوسم <script> لتضمين الشيفرة البرمجية للغة JavaScript في صفحة الويب.
• في الوقت الحالي، لم نعد نستعمل الخاصيتين type و language.
• يمكن ربط السكربت الموجود في ملف خارجي باستخدام الخاصية src.

هنالك الكثير لتعلمه عن السكربتات الممكن تنفيذها في المتصفح وتأثيرها على صفحات الويب. ولكن أبقِ في ذهنك أن هذا الجزء من السلسلة التعليمية يُركِّز على لغة JavaScript ويجب ألا نشوش أنفسنها بالتركيز على معايير تنفيذ السكربتات ضمن كل متصفح بشكل خاص. سنستخدم المتصفح وسيلةً لتنفيذ سكربتات JavaScript لأنه مناسب في حالتنا للتعلم عن طريق الإنترنت، ولكنه إحدى الطرق الكثيرة لتشغيل JavaScript.

تمارين

1. إظهار تنبيه

الأهمية: 5

أنشئ صفحةً تُظهِر الرسالة "I`m JavaScript".

بإمكانك تنفيذها في صفحة تجريبية (sandbox)، أو على قرصك الصلب. لا يهم ولكن تأكد من أنها تعمل بالشكل الصحيح. بعد كتابة شيفرتك، نفِّذها ثم تأكد من الإجابة المرفقة.

الحل:

2. إظهار تنبيه باستخدام سكربت خارجي

الأهمية: 5

استخدم الحل في التمرين السابق (إظهار تنبيه)، وعدله لاستخراج الشيفرة البرمجية المراد تنفيذها إلى سكربت خارجي باسم "alert.js" موجود في نفس المجلد. افتح الصفحة وتأكد من عمل التنبيه.

الحل:

<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>

alert("I'm JavaScript!");

ترجمة -وبتصرف- للفصل !Hello, world من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: بنية الشيفرة البرمجية
• المقال السابق: محررات الشيفرة البرمجية
• كامل مقالات دليل تعلم جافاسكربت

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

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

سنتعلم في هذه المقالة كيفية إنشاء العقد وإضافتها إلى DOM، واستبدال وإزالة عقد قديمة.

إنشاء عقد جديدة

في مواقع الويب الثابتة، يتم إضافة العناصر بشكل مباشر من خلال كتابة ملف HTML باللاحقة ‎.html ولكن في تطبيقات الويب الديناميكية المتغيرة باستمرار، تُضَاف العناصر والنصوص بشكل آلي من خلال جافاسكربت باستخدام توابع مثل createElement()‎ و createTextNode()‎ التي تنشئ عقدة جديدة في DOM.

لنبدأ أولًا بإنشاء الملف index.html ونقوم بحفظه في مجلد المشروع.

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>

</html>

نضغط بالزر الأيمن على أي مكان في الصفحة لتظهر لدينا قائمة نختار منها "Inspect" لفتح أدوات التطوير ثم نختار اللسان Console. سنقوم الآن باستخدام التابع ()createElement الموجود في الكائن document من أجل إنشاء عنصر جديد هو p:

> const paragraph = document.createElement('p');

للتأكد من أنه تم إنشاء العنصر p، ندخل التعليمة التالية إلى الطرفية:

> console.log(paragraph)

حيث سيكون الخرج هو:

<p></p>

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

> paragraph.textContent = "I'm a brand new paragraph.";
> console.log(paragraph)

عندها سيكون الخرج هو:

<p>I'm a brand new paragraph.</p>

إن استخدام ()createElement و textContent معًا يؤدي إلى بناء عقدة عنصر كاملة. ولكن يمكن أيضًا استخدام تابع بديل لتعديل محتوى العنصر من خلال الخاصيةinnerHTML التي تسمح بإضافة تعليمات HTML ونص عادي إلى العنصر بآن واحد:

> paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";

تحذير: إن طريقة استخدام innerHTML شائعة لإضافة محتوى إلى العنصر ولكن سيصبح الموقع عرضة لخطر هجوم cross-site scripting (xxs) والذي يتم من خلال إضافة سطر تعليمة جافاسكربت قد تؤدي إلى ضرر بالموقع باستخدام innerHTML غير مرغوب فيه، لذلك ينصح باستخدام textContent وبالتالي سيتم التخلص من وسوم HTML فورًا. كما أنه من الممكن استخدام التابع createTextNode()‎ لإضافة عقدة نص، كما في التعليمة:

> const text = document.createTextNode("I'm a new text node.");
> console.log(text)

وسيكون الخرج هو بالشكل:

"I'm a new text node."

إذًا، نستطيع من خلال هذه التوابع إنشاء عقد عناصر ونصوص جديدة، ولكن هذه العقد لن تصبح مرئية في واجهة الموقع حتى يتم إدخالها إلى المستند document.

إضافة عقد إلى DOM

نحتاج الآن بعد بناء عقد العناصر والنصوص إلى إضافتها إلى document ويتم ذلك من خلال استخدام مجموعة من التوابع مثل appendChild()‎ و insertBefore()‎ لإضافة العناصر في بداية، وسط، أو نهاية عنصر الأب، كما يمكن استخدام التابع replaceChild(‎) لاستبدال عقدة قديمة بأخرى جديدة.

للتمرن على هذه التوابع سنقوم بإنشاء قائمة المهام التالية باستخدام html:

• Buy groceries
• Feed the cat
• Do laundry

وعند تحميل الملف السابق إلى المتصفح فإنه سيبدو بالشكل:

الآن سنقوم بإضافة عنصر جديد إلى نهاية قائمة المهام، وللقيام بذلك سننشئ عنصرًا ونضيف له نصًّا كما فعلنا في المقطع السابق:

> // ليمثل قائمة المهام ul إنشاء عنصر
> const todoList = document.querySelector('ul');

> // إنشاء مهمة جديدة أي عنصر قائمة
> const newTodo = document.createElement('li');
> newTodo.textContent = 'Do homework';

الأن سنقوم بإضافة هذه المهمة إلى نهاية القائمة باستخدام التابع appendChild()‎:

> // إضافة مهمة جديدة إلى نهاية القائمة
> todoList.appendChild(newTodo);

عند فتح ملف html الخاص بالقائمة، سنلاحظ أنه تم إضافة عنصر li جديد في نهاية ul:

<ul>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

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

> // إنشاء مهمة جديدة
> const anotherTodo = document.createElement('li');
> anotherTodo.textContent = 'Pay bills';

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

parentNode.insertBefore(newNode, nextSibling);

الآن، لتطبيق التعليمة السابقة عمليًا على قائمتنا، سنضيف العقدة التي بنيناها سابقًا والمسماة anotherTodo قبل العنصر الأول من أبناء القائمة والذي هو العنصر “Buy groceries”:

> // إضافة مهمة جديدة إلى بداية القائمة
> todoList.insertBefore(anotherTodo, todoList.firstElementChild);

الآن سيصبح شكل ملف todo.html هو:

<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the cat</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

وعند تحميل الملف السابق على المتصفح سيظهر كمايلي:

إذًا تمت إضافة العقدة الجديدة بنجاح لبداية القائمة، وهكذا نكون قد تعلمنا كيفية إضافة عقدة ابن لعقدة أب ولكن يمكننا أيضًا استبدال هذه العقدة الموجودة بعقدة جديدة.

لتعديل عقدة موجودة في قائمة المهام، سننشئ أولًا عنصرًا جديدًا:

> const modifiedTodo = document.createElement('li');
> modifiedTodo.textContent = 'Feed the dog';

سنقوم بالاستبدال باستخدام التابع replaceChild()‎ الذي يشبه التابع insertBefore()‎حيث يتم تمرير متحولين له الأول هو العقدة الجديدة والثاني هو العقدة المراد استبدالها، حيث أن الشكل العام لهذه التعليمة هو:

parentNode.replaceChild(newNode, oldNode);

الآن سنقوم باستبدال العنصر الثالث في القائمة بالعنصر الجديد:

> // استبدال مهمة موجودة مسبقًا بأخرى
> todoList.replaceChild(modifiedTodo, todoList.children[2]);

حيث سيتم تلقائيًا تعديل تعليمات ملف html لتصبح بالشكل:

<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
  <li>Do homework</li>
</ul>

ويصبح شكل صفحة الويب:

باستخدام توابع appendChild()‎، و insertBefore()‎، و replaceChild()‎ يمكننا إضافة العناصر إلى أي مكان في DOM.

حذف عقد من DOM

بما أننا تعرفنا على طريقة إنشاء عناصر وإضافتهم إلى DOM أو تعديل العناصر الموجودة، تبقى لنا الخطوة الأخيرة لإتمامها وهي تعلم كيفية حذف عنصر موجود في DOM. نستطيع حذف العقد الأبناء من العقدة الأب باستعمال التابع removeChild()‎ كما نستطيع حذف العقدة نفسها باستخدام التابع remove()‎.

بالعودة إلى مثال قائمة المهام السابق، سنحذف عناصر من القائمة بعد الانتهاء منها. مثلًا سنقوم بحذف المهمة "Do homework" الموجودة في نهاية القائمة (أي هي الابن الأخير للقائمة) وذلك باستخدام التابع removeChild()‎:

>todoList.removeChild(todoList.lastElementChild);

بالعودة لملف html نلاحظ أن عنصر li الأخير قد حُذِف:

<ul>
  <li>Pay bills</li>
  <li>Buy groceries</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

الآن سنستخدم التابع الآخر وهو remove()‎ والذي يقوم بحذف العقدة نفسها مباشرة:

> // Remove second element child from todoList
> todoList.children[1].remove();

وبالتالي يصبح ملف html بالشكل التالي:

<ul>
  <li>Pay bills</li>
  <li>Feed the dog</li>
  <li>Do laundry</li>
</ul>

باستخدام التابعين removeChild()‎ و remove()‎، يمكننا إزلة أي عقدة من DOM كما يمكننا استخدام الخاصية innerHTML لإزالة عقدة ابن من العنصر الأب من خلال استبدال الابن بسلسلة نصية فارغة (empty string) بالشكل "" ولكن هذه الطريقة غير مفضلة في الاستخدام. ملخص تعلمنا في هذه المقالة كيفية استخدام الجافا سكربت لإنشاء عقد وعناصر جديدة ثم إضافتها إلى DOM، واستبدال أو حذف العقد والعناصر الموجودة. وبهذا نكون قد تعلمنا طريقة الوصول إلى عناصر DOM والتنقل بين العقد وتعديلها وبالتالي يمكنك البدء بإنشاء واجهة تطيبق ويب باستخدام الجافا سكربت.

ترجمة -وبتصرف- للمقالة How To Make Changes to the DOM للكاتبة Tania Rascia

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

بدايةً، يوجد نوعان رئيسيان لمحررات الشيفرة البرمجية: «بيئات التطوير المتكاملة» (Integrated Development Environments وتدعى اختصارًا IDE) و «المحررات البسيطة» (lightweight editors). يستخدم العديد من المبرمجين محرِّرًا واحدًا من كل نوع. في بداية تعلمك للبرمجة، يمكنك استعمال المحررات البسيطة مثل المفكرة (notepad) في ويندوز والمحرر vim أو kate في لينكس ولكن ستحتاج مع تقدمك وتطور وكبر شيفرتك إلى بيئة تطوير متكاملة. فما هي بيئة التطوير المتكاملة؟

بيئة التطوير المتكاملة

بيئة التطوير المتكاملة «IDE» عبارة عن محرر شيفرة برمجية قوي، ومزود بمزايا كثيرة ومتنوعة تكفي للعمل عادةً على كامل المشروع. وكما هو واضح من اسمها، فهي ليست كأي محرر عادي، ولكن «بيئة تطوير» شاملة.

يمكنك تحميل المشروع بجميع ملفاته إلى بيئة التطوير (IDE)، مما يسمح بالتنقل بينها بسهولة، كما توفر هذه البيئة (IDE) ميزة الإكمال التلقائي أثناء كتابتك للشيفرة البرمجية كالتعليمات وأسماء المتغيرات بالنسبة لكامل المشروع (وليس ضمن الملف المفتوح فقط). وتتيح الاندماج مع نظام التحكم في النسخ مثل git، وبيئة الاختبار، وغيرها من الأمور التي تُنفذ على مستوى المشروع.

بإمكانك الاطلاع على خيارات بيئات التطوير (IDE) التالية، لمساعدتك على اختيار واحدة منها للعمل عليها إن لم تحدد واحدة بعد:

• WebStorm: تستخدم لتطوير الواجهات الأمامية (Front-end development). توفر الشركة محررات أخرى للعديد من اللغات البرمجية ولكنها مدفوعة.
• NetBeans: بيئة متكاملة ومجانية وتعمل على مختلف أنظمة التشغيل.
• Visual Studio: خاص بنظام التشغيل «ويندوز»، (ميّز بينه وبين "Visual Studio Code"). وهو محرر قوي ومدفوع، ومناسب جدًا للعمل على منصة «NET.»، ويوجد نسخة مجانية منه تُسمى Visual Studio Community.

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

المحررات البسيطة

المحررات البسيطة (Lightweight editors) ليست قوية مثل بيئات التطوير المتكاملة، لكنها سريعة، وأنيقة، وبسيطة الاستخدام. تُستخدَم بشكل أساسي لفتح وتعديل الملف بطريقة سريعة وآنية.

الاختلاف الرئيسي بين المحرر البسيط وبيئة التطوير المتكاملة، هو أنّ بيئة التطوير المتكاملة تعمل على «مستوى المشروع»، لذلك تُحمِّل الكثير من البيانات في البداية، وتكون قادرة على تحليل بنية المشروع عند الحاجة وغيرها من المهام. أمّا المحرر البسيط، يكون أسرع بشكل كبير عند الحاجة للعمل على ملف واحد فقط من المشروع.

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

لذلك وقبل أن تحسم رأيك باستخدام بيئة تطوير متكاملة، ننصحك بالاطلاع على الخيارات التالية للمحررات البسيطة:

• Visual Studio Code: مجاني ومتعدد المنصات ويملك العديد من المزايا المشابهة لمزايا بيئة التطوير المتكاملة.
• Atom: مجاني الاستخدام ومتعدد المنصات.
• Sublime Text: برنامج تجريبي ومتعدد المنصات ويدعم العديد من اللغات البرمجية (programming languages) واللغات التوصيفية (markup languages).
• Brackets: محرِّر مجاني ومفتوح المصدر وعابر للمنصات ومخصَّص بشكل عام لمطوري الويب وبشكل خاص لمصممي الويب ومطوري الواجهات الأمامية.
• ++Notepad: محرِّر مجاني وخاص بنظام التشغيل ويندوز.
• Vim و Emacs: محِّرران بسيطان، ويعدَّان خيارًا جيدًا إذا كنت تعرف كيفية استخدامهما.

ما هو محرري المفضل الذي سأستخدمه؟

نصيحة مني لك هو تجريب الخيارين السابقين كلاهما؛ استخدم بيئة التطوير المتكاملة عند العمل على كامل المشروع، وأحد المحررات الخفيفة من أجل التعديلات السريعة والطفيفة في ملفات المشروع. يمكن في البداية استعمال المحررات الخفيفة (مثل VS code) التي تفي بالغرض في أغلب المشاريع ثمَّ الانتقال إلى البيئات المتكاملة (سواءً المجانية أو المدفوعة) في المستويات المتقدمة عندما تتولد الحاجة إليها. أسمعك تسألني ما الذي استخدمه؟ حسنًا، أنا استخدم:

• استعمل WebStorm - بيئة التطوير المتكاملة - عند العمل بلغة JavaScript، واستعمل خيارًا آخر من JetBrains مثل IntelliJ IDEA عند العمل بلغات برمجية مختلفة.
• واستخدم Sublime أو Atom كمحرر خفيف.

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

هناك العديد من المحررات الجيدة أيضًا في عالمنا الكبير. لذلك، ننصحك بالعمل على المحرر المفضل لديك. فاختيار المحرر، مثل أي أداة أخرى، هو قرار خاص، ومعتمد على مشروعك، وعاداتك، وتفضيلاتك الشخصية. ولكي تعرف ما هو المحرر المفضل لديك، لا بد أن تجرب جميع المحرِّرات.

ترجمة -وبتصرف- للفصل Code Editors من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: المثال الأول: أهلًا بالعالم!
• المقال السابق: أدوات المطور
• كامل مقالات دليل تعلم جافاسكربت

أبقِ في بالك أن الشيفرة البرمجية عرضةً لاحتواء الكثير من الأخطاء، إذ احتمال ارتكابك الأخطاء كبير أثناء كتابة الشيفرة البرمجية، لا بل وقوعك فيها هو أمر حتمي طالما أنك إنسان ولست رجلًا آليًا. هل تصدق أنه حتى المبرمجين المتمرسين وذوي الخبرة الطويلة يرتكبون الكثير من الأخطاء في الشيفرة التي يكتبونها! لا تقلق فهذا أمر طبيعي.

على أي حال، لا تُظهِر المتصفِّحات الأخطاء البرمجية تلقائيًا للمستخدمين. وعند وجود مشكلة ما في السكربت، ولا يمكنك آنذاك تحديد مكانها، وبالتالي لا يمكن إصلاحها. لذلك، أُضيفت «أدوات المطوّر» (developer tools) إلى المتصفِّحات لاسكتشاف الأخطاء وتوفير معلومات مفيدة عن السكربت لتحسينه.

يفضل معظم المطورون العمل على متصفِّحي Chrome أو FireFox لاحتوائهما على أفضل أدوات المطوّر. توفر المتصفِّحات الأخرى أيضًا مجموعة أدوات للمطوّر والتي من الممكن أن تحتوي على مزايا خاصة. لكن عادةً ما تحاول اللحاق بمتصفِّحي Chrome و FireFox الأفضل من هذه الناحية. يفضل المطوّرون بشكل عام العمل على متصفِّح واحد وينتقلون إلى متصفِّح آخر عندما تكون المشكلة التي يعملون عليها محدَّدة بهذا المتصفِّح.

بناءً على ذلك، نجد أنَّ أدوات المطور مهمة للغاية لما تمتلكه من مزايا تساعدك أثناء مسيرتك في تطوير الويب عبر JavaScript. سنتعلم في البداية طريقة فتحها، واستخدامها لاستكشاف الأخطاء، وتشغيل تعليمات JavaScript ضمنها.

أدوات المطور في متصفح Google Chrome

قم بفتح الصفحة bug.html. يوجد خطأ في الشيفرة المكتوبة بلغة JavaScript غير ظاهر للزائر العادي، لذا سنستخدم أدوات المطوّر لاكتشافه.

اضغط على F12 (أو الاختصار Cmd+Opt+J إذا كنت تستخدم نظام التشغيل «ماك») وسيفتح ذلك تلقائيًا أدوات المطوّر على لسان «الطرفية» (Console). وتظهر أدوات المطوّر تقريبًا بهذا الشكل:

يعتمد شكل أدوات المطوّر على إصدار متصفِّح Chrome الذي تستخدمه، إذ يختلف بشكل بسيط من إصدار إلى آخر.

• بإمكانك رؤية رسالة الخطأ باللون الأحمر. معنى الرسالة أن السكربت يحتوي على أمر غير معروف هو "lalala".
• لاحظ في أقصى اليمين وجود رابط إلى المصدر bug.html:12 مع رقم سطر الخطأ في الشيفرة.

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

الآن أصبح بإمكانك استكشاف الأخطاء، وهذا يكفي كبداية وسنعود لاحقًا إلى أدوات المطوَر لندرس استكشاف الأخطاء وإصلاحها أو ما يعرف debugging في فصل تنقيح الأخطاء في المتصفِّح Chrome.

أدوات المطور في متصفحي FireFox و Safari وغيرهما

تَستخدِم معظم المتصفِّحات الاختصار F12 لفتح أدوات المطوَر. بشكل عام تتشابه هذه الأدوات في الشكل والمضمون. وبمجرد تعلمك العمل على إحدى هذه الأدوات (بإمكانك البدء مع Chrome)، يمكنك بسهولة الانتقال للعمل على الأدوات الأخرى.

أدوات المطور في متصفح Safari

يختلف المتصفِّح Safari (متصفِّح خاص بنظام التشغيل «ماك» وغير مدعوم من قبل «ويندوز» أو «لينكس») في طريقة فتح أدوات المطور. نحتاج في البداية لتفعيل « قائمة المطوّر» (Develop menu). لفعل ذلك، افتح «التفضيلات» (Preferences) ثم اختر قائمة «متقدم» (Advanced). يوجد في الأسفل مربع اختيار لإظهار قائمة المطوَر في شريط القائمة. حدده لتفعيل القائمة:

بإمكانك استعمال الاختصار Cmd+opt+C لإظهار وإخفاء الطرفية من أدوات المطور. ويمكنك ملاحظة ظهور قائمة جديدة في الأعلى اسمها «Develop». تملك هذه القائمة العديد من الخيارات والأوامر الخاصة بالمطور.

الإدخال متعدد الأسطر

عادةً يتم تنفيذ الشيفرة البرمجية في نافذة الأوامر سطرًا تلو الآخر عند الضغط على زر الإدخال Enter. ولكتابة أمر متعدد الأسطر، اضغط على Shift+Enter (يُمكِّنك ذلك من الانتقال إلى السطر التالي دون تنفيذ السطر الحالي، وعند الانتهاء من إدخال كامل الأمر، اضغط على Enter فقط لتنفيذ هذا الأمر المتعدد الأسطر).

الخلاصة

• توفِّر أدوات المطوّر لك عدة أدوات متطورة تساعدك على تنقيح الأخطاء، وتنفيذ الأوامر، وفحص المتغيرات، وغيرها من المهام.
• يمكن الوصول إليها باستخدام الاختصار F12 في معظم متصفِّحات نظام Windows. أمَا في نظام Mac، استخدم الاختصار Cmd+Opt+J لمتصفِّح Chrome، واستخدم Cmd+Opt+C لمتصفِّح Safari (ولكن عليك أن تفعَل قائمة المطوّر في البداية).

الآن أصبحت البيئة جاهزة لديك. استعد للتعمق في لغة JavaScript في الفصل التالي.

ترجمة -وبتصرف- للفصل Developer Console من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: محررات الشيفرة البرمجية
• المقال السابق: مقدمة إلى لغة JavaScript
• كامل مقالات دليل تعلم جافاسكربت

تستخدَم لغة JavaScript لإنشاء صفحات ويب تفاعلية، وهي منتشرة بشكل كبير ومُستعمَلة من أغلبية المواقع، وتدعمها جميع المتصفحات تقريبًا دون الحاجة إلى إضافات خارجية.

يشرح هذا المقال مزايا لغة JavaScript، وما يمكنك تحقيقه باستخدامها، وأفضل التقنيات التي تعمل معها بشكل جيد.

ما هي لغة JavaScript؟

ظهرت لغة JavaScript لإنشاء صفحات ويب حيوية وتفاعلية.

تسمى البرامج المكتوبة بلغة JavaScript بالسكربتات (scripts)، ويمكن كتابتها بشكل مباشر ضمن شيفرة HTML لصفحة الويب ليتم تنفيذها تلقائيًا عند تحميل الصفحة. ولا تحتاج هذه السكربتات إلى تحضير خاص أو تصريف مسبق وإنما تتم كتابتها ثم تنفيذها كنص عادي. هذا الأمر يميز لغة JavaScript عن لغة برمجية أخرى تشبهها بالاسم تدعى Java.

لماذا سميت JavaScript؟

عندما ظهرت لغة JavaScript، كان لها اسم مختلف وهو «LiveScript» ولكن الشعبية الكبيرة للغة Java في تلك الفترة دفعت إلى تغيير اسم اللغة إلى JavaScript بهدف إظهارها بصورة «الأخ الصغير» للغة Java واكتساب بعض الشهرة منها.

ومع تطور لغة JavaScript، أصبحت لغةً مستقلة بشكل كامل ولها مواصفات ومعايير خاصة بها تُسمى «ECMAScript»، ولم يعد لها أي علاقة بلغة Java.

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

يحتوي المتصفح على محرك مدمج ضمنه عادةً ما يسمى بآلة JavaScript الافتراضية وله أسماء تختلف باختلاف المتصفحات. فمثلًا يسمى المحرك باسم:

• V8 في متصفحي Chrome و Opera وباسم SpiderMonkey في المتصفح FireFox.
• Trident و Chakra في إصدارات مختلفة من IE، ويسمى ChakraCore في MicroSoftEdge، ويسمى Nitro و SquirrelFish في متصفح Safari …إلخ.

احفظ هذه الأسماء في ذهنك جيدًا لأنها مستخدمة بشكل كبير في مقالات المطورين عبر الإنترنت وسنأتي على ذكرها لاحقًا في مقالاتنا. إذا قرأت مثلًا الجملة التالية: «الخاصية X مدعومة من قبل V8»، فيجب أن تعرف أنَ هذه الخاصية تعمل على الأغلب ضمن المتصفحين Opera و Chrome.

كيف تعمل محركات JavaScript؟

طريقة عمل المحركات معقدَة وتتألف من ثلاث مراحل أساسية:

1. بدايةً، يقرأ المحرك (إذا كان التنفيذ يتم عن طريق المتصفح فالمحرك مدمج ضمنه) أو يفسر (بمعنى أدق) السكربت، ثم
2. يحول السكربت إلى لغة الآلة (عملية التصريف)، ثم
3. تُنفَّذ شيفرات الآلة بشكل سريع.

يحسّن المحرك كل مرحلة من هذه العملية عن طريق مراقبة السكربت المترجم أثناء تنفيذه، وتحليل تدفق البيانات وفق السكربت ثم يقوم بتحسين شيفرة الآلة الناتجة وفقًا للمعرفة التي قام باكتسابها مما يساعد على زيادة سرعة تنفيذ السكربت.

ما الذي يمكن أن تفعله لغة JavaScript ضمن المتصفح؟

لغة JavaScript بإصدارها الحالي هي لغة برمجية «آمنة». ويعود ذلك إلى توجيه هذه اللغة للعمل ضمن المتصفحات لذلك فهي لا تحتوي على تعليمات للوصول إلى طبقة أدنى من العتاد مثل المعالج أو الذاكرة لأن عملها لا يتطلب ذلك. وتعتمد امكانيات لغة JavaScript بشكل كبير على البيئة التي تعمل ضمنها؛ فمثلًا تدعم بيئة Node.Js (التي تنفِّذ شيفرة JavaScript خارج بيئة المتصفح) التوابع التي تسمح بالقراءة من أو الكتابة على الملفات، وتنفِّذ طلبات الشبكة، وغيرها من المهام التي لا يمكن تنفيذها في بيئة المتصفح. أما ضمن المتصفح، فيمكن للغة JavaScript القيام بجميع الأعمال المتعلقة بمعالجة صفحات الويب، والتحكم بالتفاعل بين المستخدم وخادم الويب.

يمكن للغة JavaScript ضمن المتصفح تنفيذ العديد من المهام نذكر منها:

• إضافة عناصر HTML جديدة إلى الصفحة، وتغيير المحتوى الحالي لها، وتعديل التنسيقات.
• التفاعل مع المستخدم وتنفيذ أعمال معينة عند النقر على الفأرة وتحريك المؤشر والضغط على أزرار لوحة المفاتيح.
• إرسال الطلبات عبر الإنترنت للخوادم البعيدة، بالإضافة إلى تحميل وتنزيل الملفات (كما في تقنية AJAX و COMET).
• الحصول على معلومات من «ملفات تعريف الارتباط» (Cookies، أو الكعكات) والتعديل عليها، وطرح الأسئلة على زوار الموقع وإظهار الرسائل والاشعارات.
• يمكن استخدامها لتخزين البيانات من جهة المستخدم أي ذاكرةً محليةً.

ما المهام التي لا يمكن للغة JavaScript القيام بها ضمن المتصفح؟

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

يوجد العديد من القيود على عمل JavaScript ضمن المتصفح نذكر منها:

• لا يمكن للغة JavaScript ضمن المتصفح قراءة الملفات الموجودة على القرص الصلب للمستخدم، أو نسخها، أو التعديل عليها. كما لا يمكنها تشغيل البرامج على جهاز المستخدم أو الوصول إلى ملفات نظام التشغيل. تسمح المتصفحات في الوقت الحالي للغة JavaScript بالتعامل مع الملفات في حالة سماح المستخدم بذلك. مثال على ذلك هو تحميل المستخدم ملفًا ما إلى موقع ويب طلب ذلك إما عبر السحب والإفلات في مربع محدَّد أو اختيار ملف معين في الوسم <input>. وتوجد طرق تتيح التعامل مع الأجهزة الملحقة مثل الكاميرا أو مسجل الصوت ولكنها تتطلب تقديم صلاحيات صريحة من قبل المستخدم وأخذ موافقته على أداء مهمة معينة فقط. بمعنى أن الصفحة التي جرى تفعيل JavaScript لا يعني بالضرورة تفعيل كاميرات الويب والوصول إليها الأمر الذي يتيح مراقبة المستخدم ومحيطه وإرسال المعلومات عبر الإنترنت إلى وكالات الأمن القومي كما يظن البعض.

• في الحالة العامة، الألسن والنوافذ المختلفة في المتصفح لا يمكنها تبادل البيانات فيما بينها أو معرفة أية تفاصيل عن بعضها بعضًا إلا عندما تستخدم صفحة JavaScript لفتح صفحة أخرى؛ وحتى في هذه الحالة، لا يمكن لصفحة تبادل البيانات مع صفحة فتحتها إذا كانت هاتين الصفحتين من موقعين مختلفين (نطاق مختلف، برتوكول أو منفذ). يسمى ذلك «سياسة المصدر الواحد» ويمكن تجاوزها عند الحاجة ولكن يجب أن تحتوي كلا الصفحتين على سكربت JavaScript خاص يتحكم بتبادل البيانات بينهما. هذه المحدودية - مرةً أخرى - ضرورية لضمان أمان المستخدم. فلا يجب على أي صفحة من الموقع http://anysite.com مثلًا والتي فتحها المستخدم أن يكون باستطاعتها الوصول وسرقة بيانات صفحة أخرى من الموقع http://gmail.com مثلًا مفتوحة في لسان آخر من نفس المتصفح.

• بإمكان لغة JavaScript تبادل البيانات عبر الإنترنت بسهولة بين صفحة الويب والخادم الخاص بها ولكن إمكانيتها على استقبال البيانات من مواقع ونطاقات أخرى محدودة إلا في حالة السماح بذلك بتصريح صريح (يُذكَر ضمن ترويسة HTTP) للطرف الآخر البعيد. هذه المحدودية مرةً أخرى ضرورية لأمان المستخدم.

يجب التنويه أنَ المحدوديات السابقة توجد فقط عند استخدام لغة JavaScript ضمن المتصفح ولا توجد عند استخدامها ضمن بيئة مختلفة مثل الخادم. كما أنّ المتصفحات في الوقت الحالي توفر ملحقات/إضافات تسأل المستخدم عن الرغبة بإعطاء صلاحيات أكبر للغة JavaScript المنفذة في المتصفح.

ما المميز في لغة JavaScript؟

هنالك على الأقل ثلاثة أمور تميَز لغة JavaScript وهي:

• الاندماج الكامل مع HTML و CSS.
• سهولة تنفيذ الأمور البسيطة.
• مدعومة من قبل أغلبية المتصفحات ومفعًلة تلقائيًا.

لغة JavaScript هي اللغة الوحيدة التي تتوفر فيها هذه المزايا الثلاث. وهذا ما يجعلها الأداة الأكثر انتشارًا لبناء صفحات الويب.

قبل البدء بتعلم لغة JavaScript، من المفيد الاطلاع على الآفاق المستقبلية لها والتقنيات الحديثة التي تنافسها من لغات برمجية جديدة وتحديثات في عمل المتصفحات.

اللغات المعتمدة على لغة JavaScript

لا تناسب قواعد كتابة لغة JavaScript الجميع. ويختلف المطورون في حاجاتهم إلى مزايا مختلفة، وهذا بالطبع أمر متوقع لاختلاف مشاريعهم ومتطلباتهم. لذلك، ظهرت مؤخرًا مجموعة من اللغات البرمجية الجديدة والتي تُحوَّل (transpiled) إلى لغة JavaScript قبل تنفيذها في المتصفح.

ومع تطور هذه الأدوات، أصبحت عملية التحويل (transpilation) سريعة. الأمر الذي سمح للمطورين بكتابة الشيفرات بلغة برمجية أخرى ليتم تحويلها تلقائيًا دون أي اختلاف إلى لغة JavaScript وكأنها مكتوبة من الأصل بهذه اللغة.

بعض الأمثلة عن مثل هذه اللغات هي:

• CoffeeScript: تعدُّ لغةً ذات صياغة تجميلية للغة JavaScript. توفر صياغة أقصر مما يسمح بكتابة شيفرة برمجية أوضح وأكثر دقةً. لها شعبية بين مطوري لغة Ruby .
• TypeScript: تركز على إضافة تعريف لأنواع المعطيات لتسهيل دعم وتطوير الأنظمة المعقدة. طُوِّرت هذه اللغة من قبل شركة Microsoft.
• Dart: هي لغة مستقلة ولها محرك خاص وتعمل على بيئات مختلفة غير المتصفح (مثل تطبيقات الموبايل). قدمتها شركة Google كبديل عن لغة JavaScript، ولكن تعمل المتصفحات في الوقت الحالي على تحويلها إلى لغة JavaScript كما هو حال اللغات السابقة.

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

الخلاصة

• أُوجدت لغة JavaScript في البداية كلغة يتم تنفيذها فقط من قبل المتصفح ثم تطورت وأصبح من الممكن تنفيذها ضمن بيئات مختلفة عبر Node.js.
• اليوم، تملك لغة JavaScript مكانة كبيرة وخاصة بسبب دعمها من قبل معظم المتصفحات واندماجها الكامل مع HTML و CSS.
• هنالك العديد من اللغات التي تُحول إلى JavaScript وتوفر مزايا خاصة. لذا ننصحك بالاطلاع عليها ولو بشكل سريع بعد تمكنك من لغة JavaScript.

ترجمة -وبتصرف- للفصل An Introduction to JavaScript من كتاب The JavaScript Language

انظر أيضًا

• المقال التالي: أدوات المطور
• محررات الشيفرة البرمجية
• كامل مقالات دليل تعلم جافاسكربت

تعتبر المخططات والجداول البيانية charts طريقة لعرض المعلومات information المُستخرجة من البيانات الخام data بشكل بصري يساهم في تقديم المعلومة بشكل سهل للمستخدم ويجعل تحليل الأجزاء الكبيرة من البيانات أكثر سهولة، بالإضافة إلى الجاذبية التي تضيفها هذه المخططات على الموقع بسبب الطريقة التفاعلية التي تُقدَّم بها المعلومات.

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

في هذه المقالة سنتعلم عن أهم 3 مكتبات مفتوحة المصدر متخصصة في المخططات في الجافاسكربت

مكتبة chart.js

إن مكتبة chart.js هي مكتبة مفتوحة المصدر مكتوبة بالجافا سكربت تسمح لنا ببناء مخططات بيانية جميلة متحركة وتفاعلية نستخدمها في تطبيقات الويب، وهي متاحة تحت ترخيص MIT. يمكن يمكن من خلال هذه المكتبة بناء العديد من المخططات والرسوم البيانية المثيرة للإعجاب بمافيها مخططات الأعمدة bar charts، المخططات الخطية line charts، مخططات المساحة area charts، المقاييس الخطية linear scale، المخططات البيانية المبعثرة scatter charts. تمتاز المخططات المبنية بواسطة هذه المكتبة بأنها متجاوبة بشكل كامل مع غالبية الأجهزة، حيث يتم استدعاؤها وتضمينها في صفحة الويب باستخدام عناصر HTML5. سنطرح مثالًا توضيحيًا لطريقة رسم مخطط أعمدة باستخدام هذه المكتبة، حيث سنُضمِّمن مكتبة chart.js الموجودة في content delivery Network (اختصارًا CDN)، مع العلم أن البيانات المذكورة في المثال توضيحية فقط.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

<body>
    
    <canvas id="bar-chart" width=300" height="150"></canvas>

    
    <script>
      
new Chart(document.getElementById("bar-chart"), {
    type: 'bar',
    data: {
      labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],
      datasets: [
        {
          label: "Number of developers (millions)",
          backgroundColor: ["red", "blue","yellow","green","pink"],
          data: [7,4,6,9,3]
        }
      ]
    },
    options: {
      legend: { display: false },
      title: {
        display: true,
        text: 'Number of Developers in Every Continent'
      },

      scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }

    }


});

    </script>
   
    
</body>
</html>

كما نرى في المثال، يتم إنشاء المخطط وتسمية نوعه عندما أسندنا القيمة bar إلى type (يمكن اختيار نوع المخطط هنا مثلًا يمكن تغيير نوع المخطط إلى horizontalBar)

نسند قيم ألوان الأعمدة من خلال مصفوفة إلى backgroundColor

ونلاحظ أن كل لون أسند إلى اسم العمود الذي يحمل نفس رقم الفهرسة في مصفوفة labels

وسيكون الخرج بالشكل التالي:

مكتبة Chartist.js

مكتبة Chartist.js هي هي مكتبة تحريك بسيطة مكتوبة بلغة جافا سكربت تُستخدم لبناء مخططات وتصميمات جميلة متجاوبة وقابلة للتخصيص، وهي مكتبة مفتوحة المصدر تندرج تحت ترخيص MIT و WTFPL.

صممت هذه المكتبة من قبل مجموعة من المطورين الذين كانوا غير راضيين عن الأدوات التي تُستخدم لتصميم المخططات، لذلك قاموا ببناء هذه المكتبة التي توفر ديناميكية رائعة للمصممين والمطورين.

للبدء باستخدام هذه المكتبة ضمن تطبيقنا، نحتاج أولًا لتضمين ملف المكتبة Chartist.js والملف CSS، ويمكننا بعدها البدء ببناء العديد من أنواع المخططات والرسوم البيانية مثل مخططات الأعمدة، المخططات الخطية، بالإضافة إلى أنها إضافة بعض التحريك animation، حيث تقوم باستخدام SVG لاستدعاء وتحريك المخططات ديناميكيًا.

سنطرح هنا مثالًا عن طريقة استخدام هذه المكتبة لبناء مخطط الفطيرة pie chart:

<!DOCTYPE html>
<html>
<head>
    
    <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
    
    <style>
        .ct-series-a .ct-slice-pie {
            fill: hsl(100, 20%, 50%); /* filling pie slices */
            stroke: white; /*giving pie slices outline */           
            stroke-width: 5px;  /* outline width */
          }

          .ct-series-b .ct-slice-pie {
            fill: hsl(10, 40%, 60%);
            stroke: white;
            stroke-width: 5px;
          }

          .ct-series-c .ct-slice-pie {
            fill: hsl(120, 30%, 80%);
            stroke: white;
            stroke-width: 5px;
          }

          .ct-series-d .ct-slice-pie {
            fill: hsl(90, 70%, 30%);
            stroke: white;
            stroke-width: 5px;
          }
          .ct-series-e .ct-slice-pie {
            fill: hsl(60, 140%, 20%);
            stroke: white;
            stroke-width: 5px;
          }

    </style>
     </head>

<body>

    <div class="ct-chart ct-golden-section"></div>

    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

    <script>
       
      var data = {
            series: [45, 35, 20]
            };

      var sum = function(a, b) { return a + b };

      new Chartist.Pie('.ct-chart', data, {
        labelInterpolationFnc: function(value) {
          return Math.round(value / data.series.reduce(sum) * 100) + '%';
            }
              });
     </script>
</body>
</html>

تتيح لنا هذه المكتبة استخدام العديد من الأنماط Style المُعرَّفة مسبقًا في ملفات CSS التي قمنا بتضمينها في البداية بدلًا من كتابة الأنماط بشكل كامل يدويًا حيث يمكننا استخدام هذه الأنماط في التحكم بشكل المخطط الذي قمنا ببنائه.

يُستخدم الصف .ct-chart المبني مُسبقًا في CSS لبناء حاوية container للمخطط، ويستخدم الصف .ct-golden-section للحصول على النسبة aspect ratios المستخدمة في تكبير وتصغيير التصميم ليتلائم مع التصميم المتجاوب responsive design وبالتالي يخفف عنا حساب الأبعاد.

واستخدمنا الصف الافتراضي .ct-series-a لتحديد شكل الأقسام الموجودة في المخطط، حيث يمكن استبدال الحرف a للحصول على أشكال أخرى مبنية مُسبقًا.

وقد استخدمنا التابع Chartist.Pie لبناء مخطط الفطيرة، وفي حال كنا نريد بناء شكل نوع آخر من المخططات مثل المخطط الخطي يمكن استخدام التابع Chartist.Line

وسيكون الخرج لهذا الكود بالشكل:

مكتبة D3.js

تُعتبر المكتبة D3.js مكتبة أخرى مهمة مفتوحة المصدر مكتوبة بالجافا سكربت. وهي متاحة تحت رخصة BSD.

وتقوم هذه المكتبة التي توفر أيضا تحريك ثلاثي الأبعاد 3D animation باستخدام HTML5، SVG، و CSS كإطار لعملها ضمن صفحة الويب.

تقوم هذه المكتبة على على مبدأ أساسي في العمل وهو بناء مستند (Document Object Model) DOM ثم معالجته بالاعتماد على التوابع والبيانات المتوفرة داخله لنحصل منها على المخطط البياني الذي نريد بناؤه من خلال إحداث تغييرات في المستند.

سنطرح هنا مثال عن مخطط الأعمدة باستخدام هذه المكتبة:

<!DOCTYPE html>
<html>
<head>
     
    <style>
    .chart div {
      font: 15px sans-serif;
      background-color: lightblue;
      text-align: right;
      padding:5px;
      margin:5px;
      color: white;
      font-weight: bold;
    }
        
    </style>
     </head>

<body>

    <div class="chart"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>

    <script>

      var data = [342,222,169,259,173];

      d3.select(".chart")
        .selectAll("div")
        .data(data)
          .enter()
          .append("div")
          .style("width", function(d){ return d + "px"; })
          .text(function(d) { return d; });
       
  
    </script>
</body>
</html>

حيث قمنا أولًا ببناء وسم style يحوي جميع اختياراتنا لشكل المخطط ويتم ربطها مع عقدة DOM لمعالجتها بنفس الطريقة التي يعمل بها jQuery.

بعد حفط البيانات في المستند document يقوم التابع .enter() بالإذن ببدء التطبيق invoke لبناء العقدة الجديدة التي تحمل البيانات

بالنسبة لجميع وكل التوابع التي تلي التابع .enter() فسيتم استدعاؤها من أجل كل عنصر من البيانات.

وسيكون الخرج بالشكل التالي:

الخلاصة

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

ترجمة وبتصرّف للمقال  3 top open source JavaScript chart libraries لصاحبه Dr. Michael J. Garbade

مقدمة

تعلمنا في المقال السابق طريقة الوصول إلى العناصر في DOM  عن كيفية استخدام التوابع الملحقة بالكائن document بهدف الوصول إلى عناصر html بإحدى الطرق التالية: معرف العنصر ID، صف العنصر class، اسم الوسم tag name، أو محددات الاستعلام query selectors.

كما شرحنا في مقال البنية الشجرية لـ DOM  عن العقدة الأب لـ DOM الممثلة بالكائن document، كما تطرقنا إلى شرح مفصل عن العقد الأبناء التي تبنى من خلالها الشجرة وعن أنواعها (العناصر، التعليقات، والنصوص).

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

الإعداد:

لنبدأ أولًا بإنشاء ملف nodes.html والذي يحوي التعليمات التالية:

<!DOCTYPE html>
<html>

<head>
  <title>Learning About Nodes</title>

  <style>
    * { border: 2px solid #dedede; padding: 15px; margin: 15px; }
    html { margin: 0; padding: 0; }
    body { max-width: 600px; font-family: sans-serif; color: #333; }
  </style>
</head>

<body>
  <h1>Shark World</h1>
  <p>The world's leading source on <strong>shark</strong> related information.</p>
  <h2>Types of Sharks</h2>
  <ul>
    <li>Hammerhead</li>
    <li>Tiger</li>
    <li>Great White</li>
  </ul>
</body>

<script>
  const h1 = document.getElementsByTagName('h1')[0];
  const p = document.getElementsByTagName('p')[0];
  const ul = document.getElementsByTagName('ul')[0];
</script>

</html>

عند فتح هذا الملف من خلال متصفح الانترنت، سنشاهد الصفحة التالية:

في صفحة الويب هذه لدينا مستند html يحوي على عدد قليل من العناصر وأساسيات css مرفقة به من خلال الوسم style من أجل تحسين طريقة إظهار العناصر، كما قمنا ببناء عدد قليل من المتحولات باستخدام تعليمات الجافا سكربت والتي ذكرت ضمن الوسم script حيث ستساعدنا بالوصول إلى العناصر.

كما نلحظ وجود عنصر واحد من العناصر التالية h1، p، ul لذا يمكن الوصول إليها من خلال الدليل الأول index للتابع getElementsByTagName.

عقدة الجذر Root Node

يعتبر الكائن doucment العقدة الجذر root node لجميع العقد في DOM. ولكن في الحقيقة كائن document هو إحدى خصائص الكائن window والذي يمكن تعريفه بأنه كائن عام global وذو مستوى عالي top-level object حيث يمثل تبويب المتصفح الذي يظهر فيه صفحة الويب.

يمكننا من خلال كائن window أن نصل إلى معلومات عن شريط الأدوات، طول وارتفاع النافذة، الرسائل الظاهرة في المتصفح، والإنذارات، في حين أن كائن document يتضمن كل الأحداث والخصائص الأخرى الموجودة داخل window.

يتضمن الجدول المرفق عناصر الجذر التي يمتلكها كل document حتى لو كان ملف html المحمل إلى المتصفح فارغ وهي عبارة عن 3 عقد سيتم إضافتها وتفسيرها في DOM.

وبما أن عناصر html، head، body شائعة جدًا فإنها تمتلك الخصائص الخاصة بها في المستند.

سنقوم بفتح تبويب console ضمن أدوات المطورين DevTools حتى نختبر هذه الخصائص الأربع من خلال كتابتها في console ومشاهدة النتائج. كما يمكننا أيضًا اختبار العناصر h1، p، و ul.

عقد الآباء Parent Nodes

لدينا في DOM ثلاث أنواع من العقد معرفة حسب نوع العلاقة فيها بينها وهي الآباء parents، الأبناء children، والشقيقة siblings.

تعرف العقدة الأب parent بأنها أي عقدة تمتلك عقدًا أقل في مستوى level أقل منها في التدرّج الهرمي للـ DOM، أو يمكن تعريفها بأنها العقد الأقرب لعقدة الجذر document.

يمكن الوصول دومًا للعقدة الأب بواسطة إحدى الخاصيتين parentNode أو parentElement.

في مثالنا nodes.html نلاحظ أن:

• html هي العقدة الأب لكل من عقد head، body، و script
• العقدة body  هي العقدة الأب لكل من h1، h2، و ul ولكنها ليست العقدة الأب لـ li لأنها في المستوى الأقل منها بمستويين.

يمكننا اختبار طريقة الوصول إلى العقدة الأب التي ذكرناها سابقًا، حيث سنقوم بمعرفة أب العنصر p من خلال الخاصية parentNode، وكما نذكر أننا قمنا ببناء المتحول p في التعليمات السابقة وإسناد القيمة document.getElementsByTagName('p')[0] وللوصول للأب نكتب التعليمة التالية في تبويب console

> p.parentNode;

وسيكون الخرج:

Output
► <body>...</body>

ويمكن استعمال parentNode مرتين للوصول إلى جد p.

يمكن الاستعانة بالعديد من الخصائص التي تمكننا من الوصول إلى العقدة الأب ولكن يوجد فيما بينها القليل من الاختلافات كما سنبينها الآن

> // Assign html object to html variable
> const html = document.documentElement;
>
> console.log(html.parentNode); // > #document
> console.log(html.parentElement); // > null

إن الأب لأي عقدة هو من نوع عقدة العنصر element nodes بينما لايمكن للعقد من نوع نص أو تعليقات أن تكون أب لأي عقدة أخرى وبما أن العقدة الأب لـ html هي العقدة الجذر document node لذلك نلاحظ أن القيمة المرجعة هي Null في السطر الأخير من التعليمات.

بشكل عام إن استخدام الخاصية parentNode شائع أكثر في الانتقال ضمن DOM.

العقد الأبناء Children Nodes

إن أبناء أي عقدة هي جميع العقد الموجودة في المستوى الذي يليه مباشرة أما العقد الموجود في المستوى الذي يلي مستوى الأبناء تسمى العقد الأحفاد.

إن خاصية ChildNode ستعيد قائمة بأبناء العقدة. على سبيل المثال في ملف nodes.html السابق نلاحظ أن عنصر ul لديه 3 عناصر أبناء من li وبالتالي عند إدخال التعليمة:

> ul.childNodes;

وسيكون الخرج:

Output
► (7) [text, li, text, li, text, li, text]

نلاحظ أننا حصلنا على قائمة بأبناء العنصر ul والتي تحوي العناصر li الثلاث التي ذكرناها بالإضافة إلى عُقد النصوص text nodes ويعود السبب في ذلك لأننا كتبنا ملف html بطريقة يدوية ولم يتم توليده بواسطة الجافا سكربت. مع العلم أن كل ما يوجد بين العناصر يعتبره DOM عقدة نص text node، ولكن يعمل تبويب Elements الموجودة في أدوات التطوير الخاصة بالمتصفح DevTools بحذف الفراغات البيضاء من النص وبالتالي لا يعتبرها عقد نصوص.

مثلًا إذا حاولنا تغيير لون الخلفية للابن الأول باستخدام خاصية firstChild سنفشل لأن أول عقدة هي نص.

> ul.firstChild.style.background = 'yellow';

وستكون رسالة الخطأ هي

Output

> Uncaught TypeError: Cannot set property 'background' of undefined

لذلك فإن الخصائص children، firstElementChild، و lastElementChild وجدت لكي نستطيع الحصول على العقدة من نوع عنصر element  node  فقط، أي في حال كتابة ul.children سنحصل على مصفوفة تحوي 3 عقد من نوع عنصر هي li.

باستخدام الخاصية firstElementChild سنقوم بتغيير لون الخلفية للعنصر الأول li التي هي ابن للعقدة ul

> ul.firstElementChild.style.background = 'yellow';

وعند تنفيذ هذه التعليمة سيتغير لون الخلفية

عند معالجة شجرة DOM تظهر بعض الخصائص المفيدة للعناصر element properties.

في تطبيقات الويب التي تم توليدها باستخدام الجافا سكربت الأكثر احتمالًا، هو استخدام الخصائص التي تختار جميع العقد، وفي هذه الحالة الخطوط والمساحات البيضاء لن تكون موجودة.

بالعودة للمثال السابق يمكن استخدام حلقة for ... of من أجل تطبيق اللون الأصفر في الخلف على جميع العناصر الأبناء children.

for (let element of ul.children) {
  element.style.background = 'yellow';
}

بتطبيق هذه التعليمات سيظهر اللون الأصفر في خلفية جميع الأبناء

وبما أن العنصر p يمتلك نوعي عقد من الأبناء وهي العناصر والنصوص في داخله، فإنه يمكن للخاصية childNodes أن تكون مفيدة في الوصول إلى لهذه المعلومات.

for (let element of p.childNodes) {
  console.log(element);
}

حيث سيكون الخرج عبارة عن ثلاثة أسطر كل سطر يمثل ابن للعقدة p

Output
"The world's leading source on "
<strong>shark</strong>
" related information."

إن خاصيتي children و childNode تعيد مصفوفة ولكنها لاتمتلك جميع خصائص وتوابع المصفوفات، ولكنها تظهر بشكل مشابه للمصفوفات في الجافا سكربت. ولكن يمكن الوصول إلى العقد من خلال رقم الدليل index أو من خلال خاصية طول المصفوفة length

document.body.children[3].lastElementChild.style.background = 'fuchsia';

التعليمة السابقة هي عبارة عن إضافة اللون الفوشي لخلفية العقدة الابن الأخيرة (li) التابعة للعنصر الابن رقم 3 (ul) والتي هي بدورها ابن للعقدة body.

إن استخدام خصائص الأب والابن تساعد في الوصول إلى أي عقدة ضمن شجرة DOM.

العقد الشقيقة Sibling Nodes

العقد الشقيقة sibling of nodes هي العقد الموجودة في نفس المستوى في شجرة DOM ويمكن أن تكون من أنواع مختلفة من العقد سواء عنصر، نص أو تعليق

إن خصائص العقد الشقيقة تعمل بنفس الطريقة التي تعمل فيها عند العقد الأبناء، حيث نجد مجموعة من الخصائص للتنقل بين العقد بكل أنواعها وهي previousSibling و nextSibling ومجموعة أخرى تساعد على التنقل بين العقد من نوع عناصر فقط وهي previousElementSibling و nextElementSibling.

في مثالنا nodes.html سنختار الابن الأوسط للعنصر ul

const tiger = ul.children[1];

وبما أننا بنينا DOM الخاص بنا من الصفر وليس بناء على تطبيق ويب باستخدام الجافا سكربت فإننا نحتاج لاستخدام خصائص العناصر الأشقاء للوصول إلى عقد العناصر السابقة واللاحقة مع العلم أن الفراغات البيضاء موجودة في DOM كعقد من نوع text

tiger.nextElementSibling.style.background = 'coral';

tiger.previousElementSibling.style.background = 'aquamarine';

وبتنفيذ التعليمات السابقة سنلاحظ أن لون الخلفية عند Hammerhead وGreat White قد تغير

ملخص

تحدثنا في هذه المقالة عن كيفية الوصول إلى جميع عناصر مستند HTML وكيفية التحرك بين العقد في شجرة DOM من خلال خصائص العقد الأب، الابن، والشقيقة.

وبهذا ستكون قادرًا على الوصول إلى أي عقدة ضمن شجرة DOM في أي موقع ويب.

هذه المقالة ترجمة للمقالة How To Traverse the DOM  للكاتبة Tania Rascia

مقدمة

تحدثنا في المقال السابق عن البنية الشجرية لـ DOM وعن العقد Nodes المكونة لها وهي عبارة عن كائنات objects من الممكن أن تكون نصوص أو تعليقات أو عناصر.

في الغالب يمكن الوصول إلى محتوى DOM من خلال عقد عناصر html، ولمعرفة كيفية الوصول إلى عناصر DOM بشكل احترافي من الضروري امتلاك معلومات كافية عن قواعد وأساسيات css، لذلك سنقوم في هذه المقالة بتعلم كيفية الوصول إلى عناصر DOM من خلال ID والصف class والوسم tag، ومحددات الاستعلام query selectors.

نظرة عامة

سنستعرض في هذا المقال خمس توابع methods هي:

من المهم عند دراستنا ل DOM أن تقوم بتطبيق الأمثلة على حاسبك للتأكد من فهم جميع المعلومات بشكل جيد.
سنبدأ بإنشاء ملف access.html في مجلد المشروع والذي سنقوم بتطبيق جميع أمثلتنا عليه في هذه المقالة.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessing Elements in the DOM</title>

  <style>
    html { font-family: sans-serif; color: #333; }
    body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
    div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
  </style>

</head>

<body>

  <h1>Accessing Elements in the DOM</h1>

  <h2>ID (#demo)</h2>
  <div id="demo">Access me by ID</div>

  <h2>Class (.demo)</h2>
  <div class="demo">Access me by class (1)</div>
  <div class="demo">Access me by class (2)</div>

  <h2>Tag (article)</h2>
  <article>Access me by tag (1)</article>
  <article>Access me by tag (2)</article>

  <h2>Query Selector</h2>
  <div id="demo-query">Access me by query</div>

  <h2>Query Selector All</h2>
  <div class="demo-query-all">Access me by query all (1)</div>
  <div class="demo-query-all">Access me by query all (2)</div>

</body>

</html>

في ملف html هذا نلاحظ أن لدينا العديد من العناصر التي يمكن الوصول إليها من خلال توابع method الخاصة بـ document وعند فتح هذا الملف في المتصفح سيكون مشابه لهذه الصفحة:

سنستخدم العديد من التوابع methods التي ذكرناها في المقال سابقًا للوصول إلى العناصر المتاحة في هذا الملف.

الوصول للعناصر باستخدام ID

أسهل طريقة للوصول إلى عنصر محدد في DOM هو المعرف الخاص بها ID(Identification). حيث يمكن الوصول إلى العنصر من خلال ID باستخدام التابع getElementById() مع العنصر document.

document.getElementById();

ولكن للحصول على هذه الخاصية في الوصول إلى العنصر من خلال id يجب أولًا إضافة الصفة id للعنصر. مثلًا سنضيف المعرف demo للعنصر div

<div id="demo">Access me by ID</div>

الآن في تبويب console سنقوم بالوصول إلى العنصر واسناده للمتحول demoId

> const demoId = document.getElementById('demo');

في حال تمرير المتحول demoId إلى تابع log سنحصل على عنصر html كاملًا.

> console.log(demoId);

سيكون الخرج عندها العنصر كاملًا

<div id="demo">Access me by ID</div>

للتأكد من وصولنا إلى العنصر الصحيح سنقوم بتغيير حدود العنصر border property إلى اللّون البنفسجي

> demoId.style.border = '1px solid purple';

وعند تنفيذ هذه التعليمات سنلاحظ أن حدود العنصر قد تغيرت إلى اللّون البنفسجي:

إن الوصول إلى أي عنصر من خلال ID الخاص به هي أكثر طريقة فعالة وسريعة للوصول إلى عنصر ضمن DOM، ومع ذلك هذه الطريقة لديها عدة عيوب وهي أن ID دائمًا يجب أن يكون متفردًا في الصفحة ولذلك لا يمكن الوصول إلا إلى عنصر واحد فقط من خلال التابع getElementById. ولذلك في حال الحاجة إلى إضافة تابع لأكثر من عنصر في الصفحة فإن إضافته باستخدام id سيؤدي إلى تكرار كتابة التابع لكل عنصر على حدى.

الوصول للعناصر باستخدام class

تستخدم خاصية class للوصول إلى عنصر أو أكثر في DOM وذلك من خلال التابع getElementByClassName()

document.getElementsByClassName();

ونستطيع من خلال الخاصية class الوصول إلى أكثر من عنصر، كما في هذا المثال حيث سنعطي لعنصرين نفس اسم الصف demo

<div class="demo">Access me by class (1)</div>

<div class="demo">Access me by class (2)</div>

الآن في تبويبة console سنبني متحول demoClass ونسند له العناصر التي استطعنا الوصول إليها من خلال اسم الصف demo

> const demoClass = document.getElementsByClassName('demo');

والآن أصبح بالإمكان الوصول إلى العناصر وتعديلها باستخدام class كما فعلنا في المثال السابق باستخدم ID.

سنقوم الآن بتغيير خاصية الحدود border من خلال المتحول demoClass،

demoClass.style.border = '1px solid orange';

ولكن ستظهر لنا رسالة خطأ بأنه لا يمكن تحديد العنصر

Output

Uncaught TypeError: Cannot set property 'border' of undefined

والسبب في هذا الخطأ أن المتحول demoClass لايحوي عنصرًا واحدًا فقط وإنما مصفوفة كائنات من هذه العناصر

للتأكد من ذلك سنكتب التعليمة التالية لمعرفة عدد عناصر المصفوفة المُسند إلى deomClass

console.log(demoClass);

والخرج سيكون هو عدد العناصر في المصفوفة

Output

(2) [div.demo, div.demo]

حتى نستطيع الوصول إلى العناصر بشكل صحيح يجب أن نتعامل مع المتحول demoClass على أنه مصفوفة جافا سكربت يتم الوصول إليها من خلال رقم دليل العنصر index number.
الآن نستطيع تغيير حدود كل العنصر الأول في المصفوفة باستخدام رقم الدليل 0

demoClass[0].style.border = '1px solid orange';

بشكل عام للوصول إلى العناصر من خلال الصف calss سنقوم بتغيير جميع العناصر التي تمتلك نفس اسم الصف باستخدام حلقة for التي تقوم بالمرور على جميع العناصر التي تحويها المصفوفة

for (i = 0; i < demoClass.length; i++) {

     demoClass[i].style.border = ‘lpx solid orange’;

}