הופכים את הדף לחי
ברוכים הבאים לשלב שבו הקוד שלכם מתחיל להגיב לעולם. נלמד איך להפוך דף HTML סטטי לאפליקציה דינמית.
DOM
Document Object Model - ייצוג היררכי של מסמך ה-HTML המאפשר ל-JS לגשת לאלמנטים ולשנותם.
addEventListener
שיטה המאזינה לפעולות משתמש (כמו קליק או הקלדה) ומפעילה פונקציה בתגובה.
innerText
מאפיין המאפשר לקרוא או לשנות את תוכן הטקסט בתוך אלמנט HTML.
מקרה בוחן: המהפכה של E-Shop
חברת 'E-Shop' הטמיעה מערכת סינון מוצרים המבוססת על JavaScript בלבד. בעבר, כל סינון דרש רענון דף (Server-side rendering), מה שארך כ-3 שניות. לאחר המעבר לשינוי דינמי של ה-DOM, זמן התגובה ירד ל-100 מילי-שניות. המשתמשים דיווחו על תחושת 'זרימה' והמרות הקנייה עלו ב-22%. המקרה מדגים כיצד שימוש נכון ב-JS מחבר בין הלוגיקה שלמדתם בפרק 4 לבין הממשק הוויזואלי.
שאלה 1
מה מייצגות ראשי התיבות DOM?
שאלה 2
איזו פונקציה משמשת להאזנה לאירועים ב-JS?
ניתוח אינטראקטיביות בזמן אמת
במשימה זו, עליכם לבחון את השפעתו של ה-DOM MANIPULATION על חוויית המשתמש המודרנית. נתחו את היתרונות של עדכון חלקי של הדף לעומת טעינה מחדש מלאה.
🏆
כל הכבוד!
סיימתם את פרק 5 בהצלחה.