صفحة ٢٧٥
انظر إلى بداية الدرس الخامس عن الموقع الإلكتروني التفاعلي. الموقع الذي تستخدمه يختلف عن صفحة الإنترنت الثابتة؛ فهو يقبل مدخلات المستخدم ويغير محتواه وفقاً لها. لتطوير هذه التفاعلية، نستخدم لغة جافا سكربت بجانب لغة ترميز النص التشعيبي لإنشاء البنية ونمط التنسيق الذي يعطي الشكل. يمكنك استخدام جافا سكربت للتحقق من صحة مدخلات المستخدم كالتأكد من البيانات قبل إرسالها، أو لعرض التاريخ والوقت، أو لإنشاء النوافذ المنبهة ومربعات الحوار والقوائم المنسدلة. لغة جافا سكربت هي لغة برمجة عالية المستوى تجعل صفحات الويب أكثر تفاعلية وديناميكية بما يفوق قدرات لغات البنية والتنسيق العادية. يكتب المقطع البرمجي لجافا سكربت بين الوسمين script و script، ويمكن وضعه داخل قسمي head و body أو في ملف خارجي تشير إليه الخاصية src. لعرض النتائج، تستخدم دالة مثل كتابة النص في مستند أو إنشاء نافذة تنبيه أو الحصول على عنصر عبر معرفه النصي.
صفحة ٢٧٦
انظر إلى دالة الكتابة في مستند document.write التي تستخدم لعرض نص محدد داخر الصفحة الإلكترونية. يظهر لك هنا كود مكتوب بلغة ترميز النص التشعيبي، وتحديداً ضمن جسم الصفحة body، حيث أضيف وسم script الذي يحتوي على دالة الكتابة متبوعة بعبارة بين قوسين وعلامتي تنصيص: document.write("ولكن هذا النص تم إنشاؤه باستخدام لغة جافا سكربت.");. انظر إلى نافذة المتصفح أسفل الكود البرمجي لتلاحظ كيف ظهر عنوان الصفحة الرئيسي والنص العادي الذي صمم بلغة الترميز، وكيف ظهر تحت ذلك النص الجديد الذي أنتجته لغة جافا سكربت تماماً كما كُتب داخل دالة الكتابة البرمجية. تعمل هذه الدالة على إدخال مخرج نصي جديد مباشرة إلى مستند HTML أثناء تحميل الصفحة لتراه ظاهراً أمامك على الشاشة.
صفحة ٢٧٧
انظر إلى دالة نافذة التنبيه window.alert التي تستخدم لعرض مربع تنبيه يحتوي على رسالة نصية للمستخدم. يتطّلب استخدام هذه الدالة من المستخدم الضغط على زر موافق لإغلاق هذا المربع، وهي تفيد غالباً للتأكد من بعض المعلومات الخاصة بالمستخدم أو تنبيهه لخطأ ما. انظر إلى الكود البرمجي في الصفحة، وتحديداً داخل وسْم script، حيث كُتبت الدالة هكذا: window.alert("مرحباً بالزائرين في موقعي الإلكتروني، تم إنشاء هذا النص باستخدام لغة جافا"); ويليها سطر آخر للترتيب. انظر إلى نافذة المتصفح بالأسفل بعد تنفيذ الصفحة، تجد أن المتصفح أنشأ نافذة منبثقة مستقلة في المنتصف تحمل عبارة التنبيه المكتوبة ويظهر أسفلها زر موافق رمادي اللون باللغة الإنجليزية OK، وحين ينقر المستخدم عليه تختفي نافذة التنبيه ليكمل تصفح الموقع.
صفحة ٢٧٨
انظر إلى دالة الحصول على عنصر من المُعرّف في مستند document.getElementById التي تُستخدم لتحديد عنصر نصي معين في صفحة الإنترنت باستخدام مُعرّف العنصر id وتغييره إلى عنصر آخر. انظر إلى المثال البرمجي هنا، حيث أُنشئ عنصر فقرة نصية في جسم الصفحة يحمل المعرّف وبداخله كلمة مرحباً: p id="">مرحباً
. بعد ذلك، وفي قسم جافا سكربت، كُتبت التعليمة البرمجية التي تبحث عن هذا العنصر عبر معرفه وتستبدل محتواه الداخلي باستخدام الخاصية innerHTML لتصبح هكذا: document.getElementById("
").innerHTML = "صباح الخير";. انظر إلى نافذة المتصفح بالأسفل، فلن تجد كلمة مرحباً القديمة، بل استبدلتها لغة البرمجة فوراً بعبارة صباح الخير بناءً على الأوامر التي نفذتها الدالة.
صفحة ٢٧٩
انظر إلى كيفية إنشاء زر باستخدام جافا سكربت لربط الأحداث بالوظائف. يمكنك استخدام لغة ترميز النص التشعيبي لإنشاء زر يمكن الضغط عليه عبر وسم button مع إضافة خاصية النقر onclick لتشغيل دالة محددة عند الضغط على الزر. انظر إلى الكود، ستجد وسْم الزر كالتالي: button onclick="myFunction()">اضغط هنا. وفي الأسفل ضمن وسوم الجافا سكربت تم الإعلان عن الدالة داخل الأقواس المتعرجة باستخدام الصيغة function myFunction() وتحديد السطر البرمجي الذي يغير محتوی الفقرة النصية بواسطة دالة تحديد العنصر بمعرفه الداخلي innerHTML إلى عبارة صباح الخير. انظر إلى ناتج المتصفح يمين الصفحة، ففي البداية يظهر الزر ومعه الكلمة الافتراضية، وحين تنقر بيد الفارة على زر اضغط هنا، يتغير النص المكتوب تلقائياً إلى العبارة الجديدة.
صفحة ٢٨٠
انظر إلى كيفية استخدام ملف جافا سكربت خارجي. يمكنك إنشاء برنامج نصي في ملف مستقل وحفظه بامتداد js ثم الرجوع إليه باستخدام الخاصية src في وسْم script بدلاً من إعادة كتابة نفس البرنامج عدة مرات في صفحات الموقع. انظر إلى المثال البرمجي المطبوع أمامك: يبدأ السطر الأول بتعريف متغير يحمل اسم today ويخزن فيه تاريخ اليوم وجلبه عبر دالة new Date. السطر الذي يليه يعرّف متغيراً باسم hourNow لجلب الساعة الحالية كعدد صحيح من صفر إلى ثلاثة وعشرين باستخدام دالة getHours. بعد ذلك، يظهر هيكل اتخاذ القرار الشرطي باصطحاب تعليمة if، فإذا كانت الساعة أقل من اثني عشر يظهر متغير التحية بعبارة صباح الخير، وإن كانت أكبر من ثمانية عشر يظهر مساء الخير، وما عدا ذلك يظهر ترحيب عادي، ثم يُكتب هذا الناتج في المستند.
صفحة ٢٨١
انظر إلى صفحة الإنترنت المصممة هنا، وكيف رُبط بها ملف جافا سكربت خارجي عبر ترويسة الصفحة لزيادة تفاعليتها وجاذبيتها للمستخدمين. يخبرك الكود البرمجي العلوي كيف يتم إنشاء قسم جديد عبر الوسم div مع إعطائه فئة تسمى welcome، ثم إدراج وسم النص مع إسناد خصائص التنسيق الخاصة به من محاذاة ولون وحجم الخط، ويُشير الوسم script إلى ملف الجافا الخارجي المسمى Welcome_greeting.js عبر خاصية src لتنفيذ الأوامر البرمجية الموجودة بداخله. انظر إلى شكل الصفحة الظاهر بالأسفل، تجد شريط التنقل العلوي باللون الأخضر، يليه قسم الترحيب الذي جلب عبارة صباح الخير تلقائياً بناءً على وقت زيارة الصفحة، ثم تظهر أزرار وروابط وصفحات إضافية تشمل التاريخ ومعرض الصور وروابط الاتصال ومعلومات مفيدة.
صفحة ٢٨٢
انظر إلى الصورتين المتتاليتين اللتين توضحان كيف تتغير رسالة الترحيب في نفس صفحة الموقع الإلكتروني تلقائياً وفقاً لتوقيت زائر الموقع. في الصورة العليا، عندما تكون الساعة أكبر من اثني عشر وأقل من ثمانية عشر ظهراً، يتغير نص الترحيب في القسم المخصص ليصبح كلمة مرحباً بشكل واضح ومباشر للزائر. أما في الصورة السفلى، عندما تكون الساعة أكبر من ثمانية عشر وأقل من الصفر أي خلال فترة المساء والليل، يعرض الملف البرمجي الخارجي رسالة ترحيبية مختلفة تماماً لتتناسب مع الوقت لتصبح العبارة مساعدة ومناسبة للزوار وهي مساء الخير. يوضح هذا كيف تتفاعل السكربتات البرمجية ديناميكياً مع المدخلات الزمنية لتغير محتوى الصفحة دون تدخل يدوي من مصمم الموقع.
صفحة ٢٨٣
انظر إلى مفهوم قائمة همبرغر المكونة من ثلاثة أسطر تظهر عادة في أعلى الزاوية اليسرى أو اليمنى من الموقع الإلكتروني، وحين يضغط المستخدم عليها يمكنه فتح قائمة تحتوي على مجموعة من الخيارات الإضافية تشبه في شكلها ترتيب طبقات البرجر التقليدي. باستخدام ملف جافا سكربت، سيتم عرض أيقونة همبرغر عندما يكون عرض الشاشة صغيراً نسبياً، وفي نفس الوقت سيتم عرض عناصر القائمة في عمود فقط إذا ضغط المستخدم على الأيقونة. لتطبيق ذلك، عليك أولاً تحميل مكتبة الأيقونات Icons Library إلى ملف HTML الخاص بك وربطها بعنوان URL الخاص بها إلى القسم الرئيس للملف، ثم أضف في ملف HTML، داخل وأعلى قسم في القائمة، قسم div منفصل يحتوي على فئة الأيقونة Button class التي عند الضغط عليها تؤدي إلى تشغيل المقطع البرمجي لجافا سكربت، وفئة الرمز Icon class بين وسْم i.
