إذا كانت HTML هي هيكل الصفحة وCSS هي شكلها، فجافاسكربت هي ما يمنحها الحياة. بها يتفاعل الزر مع نقرتك، وتظهر القائمة المنسدلة، ويتحقق النموذج من بياناتك قبل الإرسال، وتتحدث الصفحة مع الخادم دون إعادة تحميل. وهي اللغة الوحيدة التي تعمل أصلًا داخل المتصفح، ولذلك يتعلمها كل من يريد العمل في تطوير الواجهات. وللمبتدئين فيها بوابتان: الأولى لغة نفسها بمفاهيمها من متغيرات ودوال وشروط، والثانية طريقة التعامل مع الصفحة من خلالها، أي كيف تقرأ عناصر الصفحة وتغيرها وكيف تستجيب لتصرفات المستخدم. ونركز في هذا المقال على الثانية لأنها ما يميز جافاسكربت في الويب، مع إشارات سريعة للأولى، وقد غطى مقال المنطق البرمجي الأفكار العامة. ونلفت إلى أن اللغة تتطور بإصدارات سنوية تضيف ميزات، فبعض ما نذكره قد لا يعمل في متصفحات قديمة، وننصحك بمراجعة توثيق مطوري المتصفحات للتأكد من الدعم عند استعمال ميزة حديثة.
كيف تضيف جافاسكربت إلى صفحتك؟
قبل الكتابة، يجب أن تعرف كيف يصل الكود إلى المتصفح، وما أماكن كتابته المناسبة:
عنصر script: تضيف وسم السكربت إلى الصفحة، إما بكتابة الكود داخله مباشرة، وإما بربطه بملف خارجي. والملف الخارجي أنسب للمشاريع لأنه منظم وقابل لإعادة الاستخدام.
مكان الوسم: إن وضعته في أعلى الصفحة قبل تحميل العناصر فقد لا تجد ما تتعامل معه. لذلك يوضع غالبًا في نهاية body، أو يستعمل مع السمة defer التي تؤجل التنفيذ حتى تُقرأ الصفحة.
الوحدات (Modules): تتيح تقسيم الكود إلى ملفات تستورد من بعضها، وهي الطريقة الحديثة للتنظيم. وتحتاج إلى خادم محلي أثناء التطوير.
وحدة التحكم: مكان تجريب سريع، وتطبع رسائلك بأمر console.log. وهي أول أدواتك في تتبع ما يحدث.
الوضع الصارم: يكشف أخطاء كانت تمر بصمت. والوحدات تعمل به تلقائيًا.
التنفيذ بالترتيب: يقرأ المتصفح السكربت سطرًا بعد سطر، ومن ثم يهم ترتيب تعريف الأشياء واستعمالها.
لا تضع بيانات حساسة: كل ما في سكربتات الواجهة مرئي لأي زائر يفتح أدوات المطور، فلا تضع فيه كلمات مرور ولا مفاتيح سرية.
ما المفاهيم الأساسية في اللغة نفسها؟
لن نستعرض اللغة كاملة، لكن هذه المفاهيم تظهر في كل مثال لاحق، فاعرفها قبل المتابعة:
المتغيرات: تعرّف بـ let للقيم التي تتغير وconst للقيم التي لا يعاد إسنادها. وتجنب var القديمة لأن سلوكها يربك. واجعل const افتراضيك.
أنواع القيم: نصوص وأرقام وقيم منطقية وقوائم وكائنات. وللغة أنواع خاصة مثل null وundefined تعني الفراغ وعدم التعريف، وتسبب أخطاء شائعة.
المقارنة: استعمل === للمقارنة الصارمة لا ==، فالأخيرة تحوّل الأنواع وتعطي نتائج مفاجئة.
الدوال: يمكن تعريفها بأكثر من صيغة، ومنها الدوال السهمية القصيرة، وتمرر كقيم إلى دوال أخرى. وهذا أساس التعامل مع الأحداث.
الكائنات: مجموعات من الخصائص والقيم، وتقابل القواميس التي شرحناها. وهي تمثل أغلب البيانات التي ستتعامل معها.
القوائم وطرقها: كالتحويل والتصفية والبحث بدوال جاهزة مثل map وfilter وfind، وهي تختصر حلقات كثيرة.
القوالب النصية: تتيح دمج المتغيرات في النص بسهولة بعلامة الاقتباس المعكوسة.
اللغة تتساهل: تعطي نتائج غريبة أحيانًا بدل أن تخطئ صراحة، فتحقق من القيم بنفسك أثناء التطوير.
كيف تصل إلى عناصر الصفحة وتغيرها؟
يحول المتصفح الصفحة إلى شجرة كائنات تسمى DOM، تستطيع جافاسكربت قراءتها وتعديلها. وهذه هي المهارة المركزية في الويب:
اختيار العنصر: بدالتي querySelector لعنصر واحد وquerySelectorAll لعدة عناصر باستعمال محددات CSS نفسها. فتعرف أصلًا اللغة التي تحتاجها.
قراءة المحتوى وتغييره: خاصية textContent للنص الآمن، وهي الأفضل في الأغلب. أما innerHTML فتدرج HTML وقد تفتح ثغرة أمنية إن أدخلت نصًا من المستخدم دون تعقيم.
تغيير الأصناف: بإضافة صنف CSS أو إزالته أو تبديله عبر classList، وهي أنظف طريقة لتغيير الشكل من الكود: الكود يقرر الحالة، وCSS يقرر المظهر.
تغيير السمات: كتغيير رابط أو نص بديل أو تعطيل زر بدوال السمات.
إنشاء عناصر جديدة: بإنشائها بالكود وإضافتها إلى الصفحة، مثل إضافة بطاقة لكل عنصر من بيانات وصلت.
حذف العناصر: بإزالتها من الشجرة حين لا تحتاج إليها.
القراءة بعد التحميل: تأكد أن العناصر موجودة قبل أن تصل إليها، وإلا حصلت على قيمة فارغة وخطأ عند استعمالها.
تقليل التعديلات: كل تغيير في الشجرة قد يعيد حساب التخطيط، فاجمع التغييرات حيث أمكن بدل تغييرات صغيرة كثيرة.
كيف تستجيب لأحداث المستخدم؟
الأحداث هي لغة التفاعل: نقرة أو ضغط مفتاح أو تحريك مؤشر أو إرسال نموذج. وتتعامل معها بإضافة مستمع يتصرف عند وقوع الحدث:
المستمع: تضيفه بالدالة addEventListener وتحدد نوع الحدث والدالة التي تنفذ عند وقوعه. وهي الطريقة الموصى بها على كتابة الكود في سمات HTML.
كائن الحدث: يصل إلى الدالة وفيه معلومات عن الحدث، مثل العنصر الذي وقع عليه، والمفتاح المضغوط.
أحداث شائعة: click للنقر، وinput لتغير حقل أثناء الكتابة، وsubmit لإرسال نموذج، وkeydown للوحة المفاتيح، وchange لتغيير قيمة.
منع السلوك الافتراضي: بالدالة preventDefault، مثل منع إرسال النموذج وإعادة تحميل الصفحة لتتحقق من البيانات أولًا.
انتشار الحدث: ينتقل الحدث من العنصر إلى آبائه، ويمكنك الاستفادة بتفويض الأحداث: مستمع واحد على الأب يخدم كثيرًا من الأبناء، وخاصة العناصر المضافة ديناميكيًا.
أداء الأحداث المتكررة: أحداث مثل التمرير تتكرر بسرعة، فاستعمل أساليب تقليل التنفيذ مثل التأخير (debounce) حين تكون العملية مكلفة.
الأحداث على الجوال: أحداث اللمس والمؤشر تعمل على أنواع مختلفة من الأجهزة، فاختبر على جهاز حقيقي لا على الحاسب فقط.
إتاحة لوحة المفاتيح: لا تجعل التفاعل ممكنًا بالفأرة فقط، فاستعمل عناصر أزرار وروابط حقيقية تتفاعل مع لوحة المفاتيح تلقائيًا.
كيف تتعامل مع البيانات والعمليات غير الفورية؟
الصفحات الحديثة تجلب بيانات من الخوادم وتنتظر ردودًا. وهذا النوع من العمليات يسمى غير المتزامن، وهو أحد أصعب ما يواجه المبتدئين:
الفكرة: عملية قد تستغرق وقتًا، كطلب شبكة، لا تجمد الصفحة، بل يستمر البرنامج ويعود إليها حين تنتهي.
الوعود (Promises): كائنات تمثل نتيجة مستقبلية، إما نجاحًا وإما فشلًا. وتتعامل معها بدوال then وcatch.
async/await: صيغة حديثة تجعل الكود غير المتزامن يبدو متتابعًا، وهي أسهل قراءة في الغالب. وتضع await أمام عملية تنتظر نتيجتها داخل دالة async.
دالة fetch: لطلب بيانات من خادم، وتعيد وعدًا بالرد. وتحتاج إلى تحويل الرد إلى JSON واستخراج البيانات.
معالجة الأخطاء: الشبكة تفشل أحيانًا. غلّف الطلب بمعالجة أخطاء، وتحقق من حالة الرد، واعرض رسالة مفهومة للمستخدم.
حالات التحميل: اعرض مؤشر انتظار، ثم النتيجة أو رسالة الخطأ. فتجربة المستخدم تتأثر كثيرًا بهذه التفاصيل.
لا تفترض الترتيب: عمليات متعددة قد تنتهي بغير ترتيب بدئها، فصمم بحيث لا يعتمد الكود على ذلك.
تعلم تدريجيًا: هذا الموضوع يتضح بالتجربة. ابدأ بطلب واحد بسيط واعرض نتيجته، ثم زد التعقيد.
كيف تتعلم جافاسكربت بمشاريع صغيرة؟
لا ترسخ هذه المفاهيم إلا بالتطبيق. وهذه مشاريع صغيرة مرتبة من الأسهل إلى الأصعب، تغطي كل ما سبق:
عداد بزرين: أزرار لزيادة رقم ونقصه. يعلمك الاختيار والأحداث وتغيير النص.
قائمة مهام: إضافة مهمة وحذفها وتعليمها منجزة. تعلم إنشاء العناصر وتفويض الأحداث.
تبديل الوضع الليلي: زر يبدل صنفًا على الصفحة. وتضيف حفظ الاختيار في تخزين المتصفح مع معالجة حالة عدم توفره.
التحقق من نموذج: رسائل خطأ عند حقول ناقصة قبل الإرسال. تعلم منع السلوك الافتراضي والتعامل مع القيم.
عرض بيانات من واجهة برمجية عامة: جلب بيانات وعرضها كبطاقات. يعلمك fetch والتعامل مع JSON والتحميل والأخطاء.
بحث حي: ترشيح قائمة أثناء الكتابة. يجمع الأحداث وfilter والأداء.
قارن وحسّن: بعد أن تعمل المشاريع، أعد قراءة كودك وانظر ما يمكن تبسيطه، فهذا يعلمك أكثر من إكمال مشاريع جديدة.
اقرأ التوثيق: موقع مطوري المتصفحات التوثيقي مرجع موثوق ومحدث، وعوده على قراءته يجعلك تعتمد على نفسك.
أسئلة شائعة عن جافاسكربت
هل أتعلم جافاسكربت الصافية قبل الأطر؟
نعم في الأغلب. فهم الأساسيات والـ DOM والأحداث يجعل تعلم أي إطار أسهل ويقلل الاعتماد الأعمى عليه.
ما الفرق بين جافاسكربت وجافا؟
لغتان مختلفتان تمامًا رغم تشابه الاسم. الأولى للويب أصلًا والثانية لغة عامة تستخدم في تطبيقات المؤسسات وأندرويد وغيرهما.
هل أبدأ بتايب سكربت مباشرة؟
يفضل أن تفهم جافاسكربت أولًا لأن تايب سكربت تبنى فوقها. وحين تصبح مرتاحًا مع الأساسيات فتعلمها يحسن جودة مشاريعك الأكبر.
0 تعليقات