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

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

תרגיל 1 - אירועי עכבר בסיסיים

צרו דף עם 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 - אירועי מקלדת

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

<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>

1. על כל הקלדה, עדכנו את מונה התווים, שם המקש האחרון, וקוד המקש
2. הציגו אילו modifier keys לחוצים (Shift, Ctrl, Alt, Meta)
3. אם המשתמש לוחץ Enter, הוסיפו את הטקסט מה-input ל-#output כפסקה חדשה ונקו את השדה
4. אם המשתמש לוחץ Escape, נקו את שדה הטקסט
5. מנעו הקלדה של מספרים (אם 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 תווים, ולידציה באירוע input
2. Email - חייב להכיל @ ונקודה, ולידציה באירוע blur
3. Password - לפחות 8 תווים, לפחות אות גדולה אחת ומספר אחד, ולידציה באירוע input
4. Confirm Password - חייב להיות זהה ל-Password, ולידציה באירוע input
5. כפתור ה-Submit יהיה מושבת (disabled) עד שכל השדות תקינים
6. בשליחת הטופס (submit), מנעו רענון דף והציגו alert עם הפרטים

תרגיל 4 - אירועי חלון

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

1. הציגו את גודל החלון הנוכחי (width x height) ועדכנו בזמן אמת כשמשנים גודל
2. הציגו את מיקום הגלילה ועדכנו אותו כשגוללים
3. כשהמשתמש גולל למטה מעבר ל-300 פיקסלים, הציגו כפתור "Back to Top" שגולל למעלה כשלוחצים עליו
4. כשהמשתמש מנסה לעזוב את הדף (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>

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

תרגיל 6 - רשימה עם אירועים

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

<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 שמסתיר פריטים שלא מתאימים (אירוע 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>

השתמשו באירועי 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

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

<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>

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

שאלות

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