أساسيات لغة جافاسكربت

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

تعرف على جافاسكربت

تُعَدّ جافاسكربت لغة برمجة قوية تزيد من القدرة التفاعلية لمواقع ويب، وقد ابتكرها برنارد آيتش Brendan Eich، وهو مؤسس مشارك لمشروع موزيللا ومؤسسة موزيللا وشركة موزيللا، كما تُعَدّ جافاسكربت لغةً قريبةً من المبرمجين المبتدئين، إذ ستتمكن مع الممارسة والخبرة من إنشاء ألعاب ثنائية وثلاثية الألعاب وبناء تطبيقات عصرية مرتبطة بقواعد بيانات وغير ذلك الكثير، وصحيح أنّ هذه اللغة مدمجة مع المتصفحات، لكنها مرنة، فقد بنى المطورون الكثير من الأدوات انطلاقًا من جافاسكربت، مقدِّمين كمًا واسعًا من القدرات الوظيفية بأقل مجهود ممكن، ونذكر منها :

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

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

كتابة أول برنامج في جافاسكربت

تُعَدّ جافاسكربت من أكثر التقنيات الحديثة شعبيةً، وستُدخِل مواقعك مع تقدم مهارتك فيها أبعادًا جديدةً من القوة والإبداع، لكن التآلف مع هذه اللغة أصعب من الاعتياد على العمل مع HTML و CSS، فقد تبدأ بالقليل ثم تنمو قدراتك تدريجيًا، ولنبدأ بتفحّص الطريقة التي سنضيف فيها جافاسكربت إلى صفحتك لتنفيذ برنامج "!Hello world"، وهو برنامج معياري لتقديم لغة برمجة إلى المستخدِم لأوّل مرة.

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

انتقل إلى المجلد الذي يضم موقعك التجريبي وانشئ ضمنه مجلدًا باسم scripts، ثم انشئ ضمن الأخير ملفًا نصيًا ثم احفظه بالاسم main.js.
افتح الملف index.html واكتب قبل نهاية العنصر <body> سطر الشيفرة التالية:

<script src="scripts/main.js"></script>

ينفِّذ هذا العنصر ما ينفذه تمامًا العنصر <link> عندما أدرج ملف تنسيق CSS، إذ يطبِّق هذا العنصر شيفرة جافاسكربت الموجودة في الملف على عناصر HTML في الصفحة بالإضافة إلى تنسيقات CCS أو أيّ شيء آخر.
أضف الشيفرة التالية إلى الملف main.js:

const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

تأكد من حفظ التغيرات على الملفَين index.html وmain.js، ثم حمّل الملف index.html مجددًا في المتصفح الذي سيعرض صفحةً شبيهةً بالتالي:

ملاحظة: يعود سبب وضع العنصر <script> في نهاية ملف HTML إلى طريقة القراءة المتسلسلة للشيفرة وفق ترتيب ظهور العناصر التي يتّبعها المتصفح.

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

ما الذي حدث؟

لقد تغيّر عنوان الصفحة إلى "!Hello world" باستخدام جافاسكربت، إذ نُفِّذت العملية عبر استدعاء الدالة ()querySelector التي التقطت مرجعًا إلى عنصر العنوان <h1> وخزّنته في المتغير myHeading، أي الأمر مشابه لما فعلناه باستخدام محددِّات CSS، فإذا أردت تطبيق شيء ما على عنصر، فلا بد من تحديده أولًا.

بعد ذلك أُسندت إلى الخاصية textContent العائدة للمتغير myHeading والتي تمثل محتوى العنوان القيمة الجديدة "!Hello world".

ملاحظة: تُعَدّ كلتا الميزتين المستخدَمين في هذا المثال جزءًا من الواجهة البرمجية لشجرة DOM التي تمتلك القدرة على التعامل مع مستند HTML.

أساسيات لغة جافاسكربت

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

تنبيه: حاول أن تُدخل أسطر الشيفرة التجريبية التي تتعلمها في هذا المقال ضمن طرفية جافاسكربت JavaScript console المضمنة داخل المتصفح، ولمزيد من المعلومات عن هذه الطرفية راجع مقال أدوات مطوري ويب المدمجة في المتصفحات.

المتغيرات

تُعدّ المتغيرات حاويات لتخزين القيم، إذ تبدأ القصة عندما تُصرِّح عن متحول باستخدام التعليمة var (مع أنها غير محبّذة، ستجد التفاصيل لاحقًا) أو التعليمة let يتبعها الاسم الذي تختاره للمتغير:

let myVariable;

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

يمكنك إسناد قيمة إلى المتغير بعد التصريح عنه:

myVariable = 'Bob';

يمكنك تنفيذ خطوتَي التصريح والإسناد في سطر واحد:

let myVariable = 'Bob';

استدع المتغير وحسب لتحصل على القيمة:

myVariable;

يمكن تغيير قيمة المتغير لاحقًا في مواضع أخرى في الشيفرة:

let myVariable = 'Bob';
myVariable = 'Steve';

يمكن أن تحمل المتغيرات قيمًا من أنواع مختلفة:

String: يمثل مجموعةً من محارف تمثل سلسلةً نصيةً، ولابد من وضع السلسلة بين إشارتَي إقتباس مفردتين كما يلي:

let myVariable ='Bob';

Number: يمثل عددًا، ولا يُوضَع ضمن شارتي تنصيص.

let myVariable =10;

Boolean: ويمثل أحد القيمين المنطقيتين: صحيح true أو خاطئ false، وهاتين الكلمتين من الكلمات الخاصة المحجوزة في لغة جافاسكربت ولا حاجة لوضعهما بين إشارتي تنصيص:

let myVariable  = true;

Array: يمثل مايُدعى بالمصفوفة، وهي بنية لتخزين عدة قيم تحت مرجع واحد:

let myVariable = [1,'bob',10,'mad']
// يمكن الإشارة إلى كل عنصر من عناصر المصفوفة كما يلي
myVariable[0]; // 1 تعرض أولى قيم المصفوفة وهي 
myVariable[3]; // 'mad' تعرض القيمة الأخيرة

Object: قد يحمل أي نوع من القيم، فكل شيء في جافاسكربت هو كائن Object يمكن أن يُخزَّن في متغير:

let myVariable = document.querySelector('h1');
// الشيفرة نفسها التي استخدمناها سابقًا

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

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

/*
Everything in between is a comment.
*/

لكي يمتد التعليق على عدة أسطر، أو كما يلي:

// This is a comment

إذا كان التعليق على سطر واحد.

العوامل

يُعَدّ العامل Operator رمزًا رياضيًا يعطي نتيجةً استنادًا إلى قيمتين أو متغيرين، وإليك بعض العوامل الأبسط التي تُستخدَم في جافاسكربت مع بعض الأمثلة، وحاول تجريبها على طرفية جافاسكربت:

الجمع: رمزه +، ويضيف عددين معًا أو يضم نصين إلى بعضهما:

9+6; //15
'hello' + 'world'; // helloworld

الطرح والضرب والقسمة: رموزها بالترتيب -، *، /، وعملها مشابه تمامًا لعملها الرياضي:

4-5; //-1
3*3;//9
10/2;//5

الإسناد: رمزه =، ويسند قيمة إلى متغير:

let myVar = 3;

المساواة: رمزها ===، وتختبر تساوي قيمتين وتعيد نتيجةً منطقيةً؛ إما صحيح true أو خاطئ false :

let myVar =3;
myVar ===4; //fals تعيد

النفي: رمزه !، ويعيد القيمة المنطقية المعاكسة لما يتقدمها، إذ تُغيِّر true إلى false وبالعكس:

let myVar=3;
!(myVar===4); //true تعيد

عدم المساواة: رمزها ‎!==‎، وتختبر عدم تساوي قيمتين وتعيد النتيجة المنطقية المناسبة:

let myVar=4;
myVar==!3; //true تعيد

هناك الكثير من العوامل الأخرى في جافاسكربت، لكننا سنكتفي الآن بما ذكرناه.

ملاحظة: قد يقود دمج أنواع مختلفة من البيانات عند إجراء العمليات الحسابية إلى أخطاء، لذا فكن حذِرًا بالإشارة إلى متغيراتك لتحصل على النتيجة المتوقعة، فإذا نفَّذت العملية '35' +'25'، فستحصل على 2535 وهذا ما قد لا تتوقعه، لأن إشارات التنصيص المفردة تجعل ما داخلها نصوصًا لا أعدادًا، بينما إذا نفَّذت العملية على الصورة 35 + 25، فستحصل على نتيجة الجمع الصحيحة.

العبارات الشرطية

تُعَدّ العبارات الشرطية بُنًى تُستخدَم لاختبار تحقق شرط معيَن نتيجته true أو false، ومن أكثر الصيغ الشرطية استخدامًا هي العبارة if...else، وإليك مثالًا كما يلي:

let iceCream = 'chocolate';
if(iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}

تختبر البنية الشرطية العبارة التي تقع ضمن (...)if، إذ تستخدِم البنية في الشيفرة السابقة عامل المساواة للموازنة بين قيمتي المتغّير iceCream والنص chocolate والتحقق من تساويهما، فإذا أعادت الموازنة القيمة true، فستُنفَّذ الكتلة الأولى من الشيفرة التي تلي تعليمة الشرط (...)if، وإلا فستُنفَّذ الكتلة الثانية التي تقع بعد العبارة else.

الدوال

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

let myVariable = document.querySelector('h1');//هي دالة querySelector

وكذلك:

alert('hello!');

إنّ الدالتَين document.querySelector و alert مدمجتان مع المتصفح، فإذا رأيت شيئًا يشبه المتغير متبوعًا بقوسين ()، فهو دالة على الأغلب، كما تأخذ الدوال أشياء تُدعى وسائط arguments، وهي بيانات تحتاجها لتنفيذ وظائفها، إذ تُوضع الوسائط داخل قوسَي الدالة وتفصل بينها فاصلة ,.

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

function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
}

حاول تنفيذ ذلك في الطرفية، ثم اختبر الدالة بتغيير قيم الوسيطَين كما يلي:

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

ملاحظة: تخبر التعليمة return في نهاية الدالة أن تعيد قيمةً هي نتيجة تنفيذ الدالة غالبًا -مثل result في المثال السابق- لكي تستطيع استخدامها، وهذا الأمر ضروري لأن المتغيرات التي تُعرَّف داخل الدالة لا يمكن استخدامها خارج الدالة وهذا ما يُعرَف بمجال رؤية المتغير variable scoop.

الأحداث

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

document.querySelector('html').addEventListener('click', function() {
  alert('Ouch! Stop poking me!');
});

هناك طرق عدة لربط معالِج الحدث event handler بالعنصر، فقد اخترنا في الشيفرة السابقة العنصر <html>، ومن ثم استدعينا معه الدالة addEventListener()‎ مع تحديد اسم الحدث (في حالتنا 'click' النقر) المراد الإنصات له مع تحديد الدالة المراد تنفيذها عند وقوع ذلك الحدث.

لاحظ الشيفرة التالية التي تشبه تمامًا الشيفرة السابقة في العمل:

document.querySelector('html').onclick = function() {
  alert('Ouch! Stop poking me!');
}

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

أيضًا الشيفرة السابقة والتي تسبقها مماثل للشيفرة التالية:

let myHTML = document.querySelector('html');
myHTML.addEventListener('click', function() {
  alert('Ouch! Stop poking me!');
});

لكنه أقصر.

الدالة السابقة التي ممرناها إلى الدالة addEventListener()‎ تدعى دالة مجهولة لعدم امتلاكها اسمًا، وهنالك طريقة أخرى لكتابة دوال مجهولة تدعى الدوال السهمية التي تستعمل الصيغة ‎() =>‎ بدلًا من function ()‎، انظر مثلًا:

document.querySelector('html').addEventListener('click', () => {
  alert('Ouch! Stop poking me!');
});

تطوير المثال التجريبي الذي نعمل عليه

لنضِف بعض الميزات الجديدة إلى صفحة الويب التي نطوّرها باستخدام ما تعلمناه عن جافاسكربت.

احذف بداية محتوى الملف main.js واحفظ الملف فارغًا كي لا تتعارض الشيفرات الجديدة مع تلك التي كتبناها سابقًا.

تغيير للصورة

سنتعلم استخدام جافاسكربت وميزات واجهة DOM البرمجية لتبديل الصورة مرةً أو مرتين عند النقر عليها.

اختر صورةً جديدةً لاستخدامها والأفضل أن يكون لها قياس الصورة الأولى نفسه.
احفظ الصورة في المجلد images باسم firefox2.png.
أضف شيفرة جافاسكربت التالية إلى الملف main.js:

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src','images/firefox2.png');
    } else {
      myImage.setAttribute('src','images/firefox-icon.png');
    }
}

احفظ جميع التغيرات وحمّل الملف index.html في المتصفح وانقر على الصورة، إذ يجب أن تتغير الصورة المعروضة عند النقر.

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

إضافة رسالة ترحيب خاصة

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

أضف السطر التالي في الملف index.html فقط قبل العنصر <script>:

<button>Change user</button>

أي أسفل الملف.

ضع الشيفرة التالية في نهاية الملف main.js كما هي تمامًا، إذ تُخزِّن هذه الشيفرة مرجعًا إلى الزر الجديد ومرجعًا إلى العنوان داخل متغيرَين:

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

أضف الدالة التالية لتخصيص رسالة الترحيب، إذ لن تفعل الدالة شيئًا بالطبع حتى اللحظة لكنها ستفعل قريبًا:

function setUserName() {
  let myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}

تحتوي الدالة ()setUserName على الدالة ()prompt التي تعرض مربع حوار على شاشة المتصفح بصورة مشابهة للدالة ()alert لكنها تنتظر من المستخدِم إدخال قيمة لكي تخزنها بعد أن ينقر الزر موافق OK.

نطلب في هذه الحالة من المستخدِم إدخال اسمه ثم تستدعي الشيفرة الواجهة البرمجية localStorage التي تسمح بتخزين البيانات في ذاكرة المتصفح للوصول إليها لاحقًا، كما نستخدِم الدالة ()setItem لإنشاء وتخزين عنصر بيانات يُدعى name ثم إسناد قيمته إلى المتغير myName الذي يحوي القيمة التي يدخلها المستخدِم للاسم، ونضيف أخيرًا قيمة المتغير myName إلى محتوى العنوان ثم يُسند النص الناتح إلى الخاصية textContent ليظهر الاسم الذي أدخلناه على أساس جزء من العنوان.

أضف الكتلة الشرطية if ... else التالية:

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}

يمكننا استدعاء هذه الشيفرة عند بداية تحميل الصفحة كونها شيفرة تهيئة للمحتوى، إذ يستخدِم السطر الأول منها عامل النفي المنطقي ! للتحقق من عدم وجود عنصر البيانات name ضمن مخازن الذاكرة LocalStorage، فإذا لم يجده، فسيستدعي الدالة ()setUserName لإنشاءه؛ أما إذا كان موجودًا -أي أنّ المستخدِم أدخله في أثناء زيارته الأولى-، فسنعيد قيمته باستخدام الدالة ()getItem ثم نضبط قيمة محتوى العنوان ليصبح النص الأصلي إضافة إلى اسم المستخدِم كما فعلنا ضمن الدالة ()setUserName.

أضف معالِج الحدث onclick التالي إلى الزر لكي تُستدعى الدالة ()setUserName عند النقر عليه، وبالتالي سيتمكن المستخدِم من تغيير الاسم عند النقر على هذا الزر:

myButton.onclick = function() {
  setUserName();
}

ظهور القيمة null

إذا نقرت زر إلغاء cancel بدل زر موافق ok أثناء ظهور مربع الحوار، فسيظهر لك عنوان الصفحة "Mozilla is cool, null"، ويعود السبب في ذلك إلى عدم إسناد قيمة إلى المتغير myName وبالتالي سيأخذ القيمة null، وهي قيمة خاصة في جافاسكربت تشير إلى غياب قيمة مطلوبة؛ أما إذا نقرت زر موافق ok دون إدخال اسم، فستكون النتيجة ",Mozilla is cool" وهذا أمر واضح، ولتفادي هذه المشاكل يمكنك التحقق من وجود الاسم فعلًا، لذلك سنعدِّل شيفرة الدالة ()setUserName كما يلي:

function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla is cool, ' + myName;
  }
}