אינטראקטיביות עם JavaScript
הוצג| English | משמעות |
|---|---|
| DOM/dɒm/ | DOM |
| event/ɪˈvent/ | אירוע |
| function/ˈfʌŋkʃn/ | פונקציה |
תפריט נפתח, אך הכפתור שלו עדיין אומר שהוא סגור
- פאנל נראה ומצב הנגישות שלו עשויים להיות בסתירה. אינטראקציה אמينة מעדכנת גם את התוכן וגם את הבקרה המתארת אותו.
- JavaScript בדפדפן מגיב לפעולות של המשתמש. אל תשים תעודות זהות פרטיות בקוד לקלינט; מבקרים יכולים לבדוק ולשנות מה רץ במחשבות שלהם.
מצא את האלמנטים שפורסמו
- DOM מייצג את המסמך כצמתים כאשר HTML מפורסם. קוד יכול לשאול צומת קיים ולשנות את התכונות שלו.
- סקריפט הפועל לפני שהיעד שלו פורסם עשוי לקבל
null. סקריפט חיצוני המאוחר (deferred) פועל לאחר הפירוס; סקריפט בסוף הגוף יכול לעבוד גם עבור אלמנטים שכבר מעליו.
מה 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>
תחילה: הקישורים נראים, הרחיב אמת. לחיצה ראשונה: הקישורים מוסתרים, הרחיב שקר. לחיצה שנייה: הקישורים נראים, הרחיב אמת. כאשר 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
בדוק פעולה, מצב ותגובת חירום. קוד הדפדפן אינו מקום בטוח לאחסון פרטי מזהות.