التفاعلية بـ JavaScript
مُقدَّم| English | المعنى |
|---|---|
| DOM/dɒm/ | نموذج كائن المستند |
| event/ɪˈvent/ | حدث |
| function/ˈfʌŋkʃn/ | دالة |
يتفتح القائمة، لكن الزر ما زال يقول إنه مغلق
- قد يتعارض اللوحة الظاهرة وحالة الوصول إليها. التفاعل الموثوق يقوم بتحديث كل من المحتوى والزر الذي يصفه.
- يستجيب JavaScript في المتصفح لإجراءات المستخدم. لا تضع بيانات اعتماد خاصة في كود العميل؛ حيث يمكن للزوار فحص وتعديل ما يتم تشغيله على أجهزتهم.
إيجاد العناصر المفسرة
- يمثل DOM المستند كعقد أثناء تفسير HTML. يمكن للكود استعلام عقدة موجودة وتغيير خصائصها.
- قد يحصل السكربت الذي يعمل قبل هدفه المفسر على
null. يعمل السكربت الخارجي المؤجل بعد التفسير؛ كما يمكن للسكربت الموجود في نهاية جسم الصفحة أن يعمل للعناصر الموجودة أعلاه منه بالفعل.
ماذا تمثل DOM؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
تصبح العقد متاحة أثناء تحليل المستند؛ لا يمكن للاستعلام العثور على هدف لم يتم تحليله بعد.
تسجيل الاستجابة مرة واحدة
- يسجل حدث إجراءً مثل النقر أو إرسال نموذج. يقوم
addEventListenerبتسجيل دالة للتشغيل عند إطلاق ذلك الحدث. - ابحث عن الزر ولوحة العرض، وسجّل المستمع، ثم حدّث الحالة في كل نقر. لا تستدعِ الدالة أثناء تسجيلها إذا كنت تنوي تمريرها كمعالج.
أي طريقة تقوم بتسجيل معالج أحداث لعنصر؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
يسجل addEventListener دالة استدعاء لأحد الأحداث مثل النقر.
ضع خطوات إعداد هذا التفاعل بالترتيب الصحيح.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
التسجيل يسبق استجابة الحدث؛ يعمل المعالج عند إرسال الحدث.
الحفاظ على بديل قابل للاستخدام
- احفظ هذا كملف HTML. الروابط مرئية بشكل افتراضي؛ يظهر زر التبديل فقط بعد جاهزية معالجه.
- انقر على الزر مرتين. تحقق من أن لوحة العرض و
aria-expandedيتغيران معًا. يستجيب الزر الأصلي أيضًا لتفعيل لوحة المفاتيح.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Club menu</title></head>
<body>
<button id="menu-button" type="button" hidden
aria-controls="menu-panel" aria-expanded="true">Menu</button>
<nav id="menu-panel" aria-label="Club">
<a href="#meeting">Meeting details</a>
</nav>
<main id="meeting"><h1>Meet Thursday in room 12</h1></main>
<script>
const button = document.querySelector('#menu-button');
const panel = document.querySelector('#menu-panel');
button.addEventListener('click', () => {
panel.hidden = !panel.hidden;
button.setAttribute('aria-expanded', String(!panel.hidden));
});
button.hidden = false;
</script>
</body>
</html>
في البداية: الروابط مرئية، expanded true. النقر الأول: الروابط مخفية، expanded false. النقر الثاني: الروابط مرئية، expanded true. مع تعطيل JavaScript، تظل الروابط الأصلية مرئية.
في المثال المحلول، تم تعطيل JavaScript. ماذا يحدث لروابط التنقل الأصلية؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
تبدأ الروابط مرئية. يبدأ الزر مخفياً، لذا فإن فشل التحسين لا يزيل التنقل الأساسي.
طابق حالة كل لوحة مع حالة الزر الصحيح.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
يصف aria-expanded ما إذا كانت المنطقة الخاضعة للتحكم ممتدة حالياً أم لا.
فصل الفحوصات المساعدة عن الفحوصات الموثوقة
- يمكن أن يوفر التحقق من المتصفح ردود فعل سريعة، ولكن يجب على الخادم التحقق من القيم المُرسلة والصلاحيات بشكل مستقل. يمكن للمُستدعي تجاوز أو تعديل كود المتصفح.
- استخدم
textContentلإدراج نص عادي بدلاً من تفسيره كـ HTML. تحقق من العناصر المفقودة والأخطاء قبل إضافة ميزات إضافية.
معالج النقر وحده لا يجعل العنصر المخصص متاحًا عبر لوحة المفاتيح. استخدم التحكم المحلي المناسب وتحقق من التركيز والتفعيل. تأكد أيضًا من أن CSS الخاص بك لا يلغي حالة إخفاء لوحة العرض.
يمكن للخادم الوثوق بكل قيمة مُدخل لأنها تم التحقق منها بواسطة المتصفح.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
يمكن للمُطلِّقات تجاوز أو تعديل كود المتصفح. تحقق من القيم والأذونات بشكل مستقل على الخادم.
تتبع حدثين وفشل واحد
- سجّل الحالة الأولية والحالة بعد تفعيلين. كرر العملية باستخدام لوحة المفاتيح، ثم تحقق من أن التنقل الأساسي يظل متاحًا بدون السكربت.
- اشرح ما يتم تشغيله في المتصفح وما لا يزال يحتاج إلى فحوصات على الخادم. اختبر هذا المثال المحلي دون إرسال أي بيانات نموذج حقيقية.
عنصر مُفسَّر → معالج أحداث مسجَّل → تحديث حالة متسق. حافظ على محتوى البديل المفيد وأبقِ التحقق الموثوق على الخادم.
تبدأ اللوحة مرئية. يتم تشغيل المفتاح مرتين. ما هي الحالة النهائية؟
Difficulty 1/5 · 100 coins + a small bonus on first completion today
النقر الأول يخفيها؛ والثاني يعيد إظهارها. يجب أن تظل الحالتان متسقيتين.
أي من هذه التحققات تنتمي إلى مراجعة التفاعل المحلي هذه؟ حدد جميع ما ينطبق.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
اختبار التشغيل، والحالة، والاحتياطي. كود المتصفح ليس مكاناً آمناً للمفاتيح الخاصة.