JavaScript

تستخدم JavaScript لجعل صفحات الويب تفاعلية، مثل القوائم التي تفتح والنماذج التي تتحقق من المدخلات والمحتوى الذي يتحدث دون إعادة تحميل الصفحة. كما تعمل JavaScript على الخوادم عبر Node.js وتشغل كثيرا من تطبيقات الجوال والحاسوب. وكل متصفح حديث يشغل JavaScript مباشرة.

JavaScript وJava لغتا برمجة منفصلتان لا يجمعهما إلا جزء من الاسم. فـ JavaScript تعمل أساسا في المتصفحات وأنواعها ديناميكية، أما Java فأنواعها ثابتة وتترجم إلى bytecode يعمل على آلة Java الافتراضية. وجاء تشابه الاسم من قرار تسويقي في التسعينيات.

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

تضيف JavaScript إلى صفحة HTML بوسم script، إما بكتابة الكود داخله مباشرة أو بالإشارة إلى ملف JavaScript منفصل عبر خاصية src. ووضع وسم script في نهاية body أو إضافة خاصية defer يتيح تحميل HTML أولا. والملفات المنفصلة أسهل في التخزين المؤقت والصيانة.

في JavaScript يكون نطاق let وconst هو الكتلة، أما var فنطاقه الدالة ويمكن تعريفه مرة أخرى. ولا يمكن إعادة إسناد متغير const، لكن الكائن المحفوظ فيه يمكن أن تتغير محتوياته. وتستخدم JavaScript الحديثة const افتراضيا، وlet عندما يجب أن تتغير القيمة، وتتجنب var.

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

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

تجلب البيانات من واجهة API في JavaScript بدالة fetch، ثم تقرأ المحتوى بدالة json في الاستجابة. ودالة fetch تعيد وعدا promise، لذلك ينتظر الكود النتيجة عادة باستخدام async وawait. وفحص حالة الاستجابة والتقاط الأخطاء يبقيان الصفحة عاملة عند تعطل الشبكة.

الوعد في JavaScript كائن يمثل قيمة ستكون جاهزة لاحقا، مثل نتيجة طلب عبر الشبكة. ويكون الوعد معلقا أو محققا أو مرفوضا. ويتعامل الكود مع النتيجة باستخدام then وcatch، أو باستخدام async وawait.

تتيح async وawait لكود JavaScript انتظار الوعد بطريقة تقرأ مثل الكود العادي خطوة بخطوة. فالدالة الموسومة بـ async تعيد دائما وعدا، وتوقف await تلك الدالة حتى يستقر الوعد. وتعالج الأخطاء داخل الدوال غير المتزامنة بكتلة try وcatch عادية.

ES6، ويسمى أيضا ECMAScript 2015، هو التحديث الكبير لمعيار لغة JavaScript في عام 2015. وأضاف let وconst والدوال السهمية والفئات والقوالب النصية والتفكيك والوحدات والوعود. وكل المتصفحات الحديثة تدعم ES6، وتضاف مميزات جديدة إلى JavaScript كل سنة منذ ذلك الحين.

الدوال السهمية في JavaScript طريقة أقصر لكتابة الدوال باستخدام الصيغة =>. والدالة السهمية ليس لها this خاصة بها، فتحتفظ this بقيمتها من الكود المحيط. وتشيع الدوال السهمية في الاستدعاءات القصيرة، مثل التي تمرر إلى map وfilter.

JSON، أو ترميز كائنات JavaScript، صيغة نصية لحفظ البيانات وتبادلها على شكل مفاتيح وقيم. وتحول JavaScript الكائن إلى نص JSON بالدالة JSON.stringify، وتعيد نص JSON إلى كائن بالدالة JSON.parse. ومعظم واجهات API على الويب ترسل البيانات وتستقبلها بصيغة JSON.

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

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

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

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

في JavaScript يقارن === القيمة والنوع معا، بينما يحول == الأنواع قبل المقارنة. فمثلا 0 == "0" نتيجتها true، لكن 0 === "0" نتيجتها false. واستخدام === يتجنب النتائج المفاجئة وهو القاعدة المعتادة في كود JavaScript الحديث.

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

تتتبع أخطاء JavaScript في المتصفح بأدوات المطور، وتفتحها بمفتاح F12 أو بالنقر بالزر الأيمن على الصفحة واختيار Inspect. ولوحة Console تعرض الأخطاء والقيم المسجلة، ولوحة Sources تتيح وضع نقاط توقف وتنفيذ الكود سطرا بسطر. ولوحة Network تعرض كل طلب ترسله الصفحة والاستجابة لكل طلب.

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

نعم، تعمل JavaScript على الخادم عبر بيئات تشغيل مثل Node.js وDeno وBun. وتستطيع JavaScript على الخادم بناء واجهات API وقراءة الملفات والاتصال بقواعد البيانات. واستخدام لغة واحدة في المتصفح والخادم يتيح للفريق مشاركة الكود والمهارات.

تحافظ على أمان كود JavaScript بعدم إدخال نص غير موثوق في الصفحة عبر innerHTML أبدا، والتحقق من كل المدخلات مرة أخرى على الخادم، وإبعاد الأسرار عن كود الواجهة الأمامية. فكل ما يرسل إلى المتصفح يستطيع المستخدمون قراءته، ومنه مفاتيح API. وسياسة أمان المحتوى Content Security Policy والمكتبات المحدثة تحجب كثيرا من الهجمات الشائعة.

في JavaScript يحفظ localStorage البيانات في المتصفح فقط، أما ملفات تعريف الارتباط فترسل إلى الخادم مع كل طلب. ويتسع localStorage لبيانات أكثر ويناسب الإعدادات مثل السمة المختارة. أما ملفات تعريف الارتباط الموسومة بـ HttpOnly وSecure فهي المكان الأكثر أمانا لجلسات تسجيل الدخول لأن السكريبتات لا تستطيع قراءتها.

تكتب كود JavaScript سهل الصيانة بدوال صغيرة، وأسماء واضحة، ووحدات، وتنسيق متسق، وأداة فحص مثل ESLint. وتجنب المتغيرات العامة، وافصل الكود الذي يغير DOM عن الكود الذي يعالج البيانات. والاختبارات الآلية تجعل التعديلات اللاحقة آمنة.