3.4 - אירועים - תרגול

תרגול - events¶

תרגיל 1 - events עכבר בסיסיים¶

צרו דף עם div מרובע (200x200 פיקסלים) ופסקה מתחתיו שמציגה מידע:

<div id="box" style="width: 200px; height: 200px; background: lightblue; border: 2px solid navy;"></div>
<p id="info">Interact with the box above</p>

הוסיפו event listeners:
1. כשלוחצים על ה-box, שנו את הצבע שלו לצבע אקראי
2. כשעושים double-click, החזירו אותו לצבע המקורי (lightblue)
3. כשהעכבר נכנס ל-box, הוסיפו גבול עבה יותר
4. כשהעכבר יוצא, החזירו את הגבול למקורי
5. כשהעכבר זז בתוך ה-box, הציגו ב-#info את מיקום העכבר (clientX, clientY)
6. כשלוחצים קליק ימני על ה-box, מנעו את תפריט ההקשר והציגו הודעה

רמז ליצירת צבע אקראי:

function randomColor() {
    return "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0");
}

תרגיל 2 - events מקלדת¶

צרו דף עם שדה טקסט ואזור תצוגה:

<input type="text" id="text-input" placeholder="Type something..." style="width: 300px; padding: 8px;">
<p>Characters typed: <span id="char-count">0</span></p>
<p>Last key: <span id="last-key">none</span></p>
<p>Key code: <span id="key-code">none</span></p>
<p>Modifiers: <span id="modifiers">none</span></p>
<div id="output" style="border: 1px solid #ddd; padding: 10px; min-height: 50px; margin-top: 10px;"></div>

על כל הקלדה, עדכנו את מונה התווים, שם המקש האחרון, וקוד המקש
הציגו אילו modifier keys לחוצים (Shift, Ctrl, Alt, Meta)
אם המשתמש לוחץ Enter, הוסיפו את הטקסט מה-input ל-#output כפסקה חדשה ונקו את השדה
אם המשתמש לוחץ Escape, נקו את שדה הטקסט
מנעו הקלדה של מספרים (אם event.key הוא ספרה, עשו preventDefault)

תרגיל 3 - ולידציית טופס¶

צרו טופס הרשמה:

<form id="signup-form">
    <div class="form-group">
        <label>Username:</label>
        <input type="text" id="username" required>
        <span class="feedback" id="username-fb"></span>
    </div>
    <div class="form-group">
        <label>Email:</label>
        <input type="email" id="email" required>
        <span class="feedback" id="email-fb"></span>
    </div>
    <div class="form-group">
        <label>Password:</label>
        <input type="password" id="password" required>
        <span class="feedback" id="password-fb"></span>
    </div>
    <div class="form-group">
        <label>Confirm Password:</label>
        <input type="password" id="confirm-password" required>
        <span class="feedback" id="confirm-fb"></span>
    </div>
    <button type="submit" id="submit-btn" disabled>Register</button>
</form>

דרישות:
1. Username - לפחות 3 תווים, ולידציה בevent input
2. Email - חייב להכיל @ ונקודה, ולידציה בevent blur
3. Password - לפחות 8 תווים, לפחות אות גדולה אחת ומספר אחד, ולידציה בevent input
4. Confirm Password - חייב להיות זהה ל-Password, ולידציה בevent input
5. כפתור ה-Submit יהיה מושבת (disabled) עד שכל השדות תקינים
6. בשליחת הטופס (submit), מנעו רענון דף והציגו alert עם הפרטים

תרגיל 4 - events חלון¶

צרו דף שמגיב לשינויי חלון:

הציגו את גודל החלון הנוכחי (width x height) ועדכנו בזמן אמת כשמשנים גודל
הציגו את מיקום הגלילה ועדכנו אותו כשגוללים
כשהמשתמש גולל למטה מעבר ל-300 פיקסלים, הציגו כפתור "Back to Top" שגולל למעלה כשלוחצים עליו
כשהמשתמש מנסה לעזוב את הדף (beforeunload), הציגו אזהרה

רמז: כדי שיהיה לכם מה לגלול, הוסיפו הרבה תוכן לדף או הגדירו body { height: 3000px; }.

תרגיל 5 - משחק הקלקות¶

צרו משחק שבודק כמה פעמים אפשר ללחוץ על כפתור ב-10 שניות:

<h1>Click Speed Test</h1>
<p>Click the button as fast as you can in 10 seconds!</p>
<button id="click-btn" disabled>Click Me!</button>
<button id="start-btn">Start Game</button>
<p>Clicks: <span id="click-count">0</span></p>
<p>Time left: <span id="timer">10</span> seconds</p>
<p id="result"></p>

כשלוחצים "Start Game", הפעילו את כפתור הלחיצה והתחילו ספירה לאחור
ספרו כל לחיצה על הכפתור
אחרי 10 שניות, השביתו את הכפתור והציגו את התוצאה (מספר הלחיצות ולחיצות לשניה)
אפשרו לשחק שוב

תרגיל 6 - רשימה עם events¶

צרו רשימת פריטים אינטראקטיבית:

<h2>Interactive List</h2>
<input type="text" id="new-item" placeholder="New item...">
<button id="add-btn">Add</button>

<ul id="item-list">
    <li>
        <span class="item-text">Learn JavaScript</span>
        <button class="edit-btn">Edit</button>
        <button class="delete-btn">Delete</button>
    </li>
    <li>
        <span class="item-text">Build a project</span>
        <button class="edit-btn">Edit</button>
        <button class="delete-btn">Delete</button>
    </li>
</ul>

דרישות:
1. כפתור Add (או Enter) - מוסיף פריט חדש לרשימה עם כפתורי Edit ו-Delete
2. כפתור Delete - מוחק את הפריט (עם confirm)
3. כפתור Edit - מאפשר לערוך את הטקסט באמצעות prompt
4. לחיצה כפולה (dblclick) על טקסט הפריט - מסמנת אותו כ"בוצע" (קו חוצה ושינוי צבע)
5. הוסיפו אפשרות לסנן את הפריטים לפי טקסט - שדה input שמסתיר פריטים שלא מתאימים (event input)

תרגיל 7 - גרירת אלמנט - drag element¶

צרו div שניתן לגרור בחופשיות על המסך:

<div id="draggable" style="width: 100px; height: 100px; background: coral; position: absolute;
     top: 100px; left: 100px; cursor: grab; display: flex; align-items: center;
     justify-content: center; border-radius: 10px; user-select: none;">
    Drag me!
</div>

השתמשו בevents mousedown, mousemove ו-mouseup כדי לממש גרירה:
1. ב-mousedown, שמרו את המיקום ההתחלתי של העכבר ושל האלמנט
2. ב-mousemove (על document), הזיזו את האלמנט בהתאם לתנועת העכבר
3. ב-mouseup, הפסיקו לגרור
4. שנו את ה-cursor ל-"grabbing" בזמן הגרירה

רמז:

element.addEventListener("mousedown", function(event) {
    // calculate the offset between mouse position and element position
    const offsetX = event.clientX - element.offsetLeft;
    const offsetY = event.clientY - element.offsetTop;

    function onMouseMove(event) {
        element.style.left = (event.clientX - offsetX) + "px";
        element.style.top = (event.clientY - offsetY) + "px";
    }

    // add mousemove listener to document (not the element)
    document.addEventListener("mousemove", onMouseMove);

    // remove on mouseup
    document.addEventListener("mouseup", function() {
        document.removeEventListener("mousemove", onMouseMove);
    }, { once: true });
});

תרגיל 8 - מעקב אירועים - event logger¶

צרו "לוג events" שמציג בזמן אמת כל event שקורה בדף:

<h2>Event Logger</h2>
<div id="test-area" style="width: 300px; height: 200px; border: 2px solid #333; padding: 20px;">
    <input type="text" placeholder="Type here...">
    <button>Click me</button>
    <a href="#" id="test-link">Test link</a>
</div>
<div id="event-log" style="height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; font-family: monospace;"></div>
<button id="clear-log">Clear Log</button>

האזינו ל-test-area לevents הבאים: click, dblclick, mouseenter, mouseleave, keydown, focus, blur, input
לכל event, הוסיפו שורה ל-event-log שמציגה: זמן, סוג הevent, ה-target, וערך (אם יש)
צבעו כל סוג event בצבע אחר
כפתור Clear Log מנקה את הלוג
מנעו ניווט כשלוחצים על הקישור

שאלות¶

מה ההבדל בין event.target ל-event.currentTarget?
מה עושה event.preventDefault() ומתי משתמשים בו?
למה עדיף addEventListener על פני onclick attribute ב-HTML?
מה ההבדל בין event input לevent change?
מה ההבדל בין event.key ל-event.code?
מה האפשרות once: true עושה ב-addEventListener?