عادت دروس Modulo!

مرحبا جميعا! لقد عدت مع دروس Modulo بعد توقف الصيف. لدي المزيد من البرامج التعليمية قيد التنفيذ - لذا تابعونا. ومع ذلك، إذا كان لديك أي أفكار معينة لموضوعي التالي، فتأكد من إخباري بها في التعليقات!

كان البرنامج التعليمي الأخير الخاص بي عبارة عن برنامج تعليمي سريع وممتع للغاية "HTML-only، no-JS" حول مكون Pokémon Dance Party الذي يحركه API في أقل من 30 سطرًا من كود HTML Web Component. بعض دروسي السابقة كانت أكثر جدية بعض الشيء، مثل هذا البرنامج التعليمي الأكثر تقدمًا حول إدارة الدولة الخاصة والعامة. إذا كان هذا يبدو جافًا بعض الشيء، فأنت محظوظ، لأن البرنامج التعليمي اليوم هو درس ممتع آخر، ويتحدث عن لعبة فيديو أخرى محبوبة... Zelda: Breath of the Wild!

بالطبع، كما هو الحال دائمًا، تنطبق التقنيات المستفادة في هذا البرنامج التعليمي على أي واجهة برمجة تطبيقات، لذا استمر في القراءة لمعرفة المزيد حول المعرض الذي يعتمد على واجهة برمجة التطبيقات!

كيفية استخدام Hyrule Compendium API

هذا البرنامج التعليمي هو 100٪ بفضل واجهة برمجة التطبيقات Hyrule Compendium API المجانية الرائعة والمرخصة من معهد ماساتشوستس للتكنولوجيا والمستضافة بسخاء من Aarav Borthakur، وهي قاعدة بيانات ممتعة يحتفظ بها المعجبون وواجهة برمجة التطبيقات لاسترجاع معلومات امتياز Zelda: Breath of the Wild و وسائط. سنستخدم نقطة النهاية "الوحوش"، المتوفرة هنا: https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters

لقطة الشاشة

جربه الآن، في أقل من 30 ثانية: ؟؟؟ هل تريد التخطي للأمام؟ قم بالتمرير إلى النهاية وانسخ 39 سطرًا من تعليمات HTML البرمجية إلى أي ملف HTML محلي، ثم افتحه في متصفحك. لا يحتوي Modulo على أي تبعيات، بل إنه يعمل مضمنًا في ملفات HTML محلية، لذا فالأمر بهذه السهولة حقًا!

ابدأ بالبيانات

لنبدأ بـ 6 أسطر فقط من التعليمات البرمجية، مع StaticData ونموذج لعرضها:

في هذا المقتطف، لدينا

حاول تشغيل هذا المقتطف. هل ترى البيانات الناتجة؟ سنحتاج إلى تكرار ذلك باستخدام حلقة for.

إنشاء معرض للصور

الآن يمكننا أن نرى أن السمة .data تحتوي على صفيف من الكائنات، فلنتنقل عبرها وننشئ معرضًا:

سيؤدي هذا إلى إنشاء العديد من علامات img، كل منها مع src= مخصص لخصائص "الصورة" لـ Objects في JSON الأصلي Array، و{% for %} علامة القالب هي صيغة لتكرار جزء من HTML لكل عنصر في المصفوفة (ناهيك عن كل index، على سبيل المثال، رقم يعد من 0). لمزيد من التدريب، تحتوي حلقة for-loop على الكثير من الأمثلة التفاعلية في الجزء الرابع من البرنامج التعليمي Modulo.js.

إنشاء الحالة والبرنامج النصي

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

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

إرفاق حدث النقر

الآن، دعونا نضيف قطعة أخرى من اللغز: إرفاق حدث النقر. انظر أدناه:

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

إرفاق حدث النقر

أخيرًا، لنعرض معلومات الوحش بشكل مشروط عند تحديد وحش:

{% if state.selected %}
    
{{ state.selected.name|capfirst }}
    

    
{{ state.selected.description }}
{% else %}
    
Welcome to Hyrule Monster Guide!
    
← Select a monster to learn more
{% endif %}

سيظهر هذا في البداية رسالة "الترحيب" (نظرًا لأن الحالة المحددة تبدأ بقيمة خالية). ثم، بمجرد أن ينقر شخص ما على صورة الوحش، فإن المتغيرstate.selected لن يكون فارغًا بعد الآن، و
بدلاً من ذلك، سيتم عرض المحتويات منسقة بعلامات h1 وp، مع تطبيق بعض التعديلات (|capfirst يجعل الحرف الأول كبيرًا).

- مقتطف قابل للتضمين

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

أتمنى أن تستمتع بهذا البرنامج التعليمي، إذا كان الأمر كذلك، تابع للحصول على المزيد من هذا القبيل!