[go: up one dir, main page]
Scribd
Upload
13 views3 pages

JS Event Excercise

The document outlines a series of exercises for handling various JavaScript events, including click events, mouse hover effects, key presses, and preventing default behaviors. Each exercise includes specific HTML elements and JavaScript functionality to implement, such as displaying alerts, changing background colors, counting key presses, and checking password strength. Additionally, it covers real-time character counting and preventing content copying on the page.

Uploaded by

muradshotaro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views3 pages

JS Event Excercise

The document outlines a series of exercises for handling various JavaScript events, including click events, mouse hover effects, key presses, and preventing default behaviors. Each exercise includes specific HTML elements and JavaScript functionality to implement, such as displaying alerts, changing background colors, counting key presses, and checking password strength. Additionally, it covers real-time character counting and preventing content copying on the page.

Uploaded by

muradshotaro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Exercise

1. Handle Click Event


 Create a <button> with the text "Click
me!".

 When the user clicks the button, display an


alert message saying "You clicked the
button!".

Hint

<button id="myButton">Click me!</button>

<script>

// Write JavaScript to handle the click event


here

</script>

2. Change Background Color on Mouse Hover


 Create a <div> with a size of 200px x 200px
and a default background color of gray.
 When the mouse enters (mouseover), change
the background color to blue.
 When the mouse leaves (mouseout), revert
the background color to gray.

Move hover

3. Count Key Presses


 Create an <input type="text"> field and a
<p> that displays the number of times the user
has pressed a key.
 Each time a key is pressed (keydown),
increase the count.
Hint
<input type="text" id="textInput">
<p>You have pressed a key <span
id="count">0</span> times</p>
<script>
// Write JavaScript to handle the keydown event
here
</script>

4. Prevent Default Behavior of <a> Tag


Enter three numbers and display the largest.
 Create a link (<a>) with
href="https://google.com".
 When the user clicks it, prevent the
redirection and display an alert message "You
cannot access this link!".
<a href="https://google.com"
id="myLink">Click here</a>
<script>
// Write JavaScript to handle the click event and
preventDefault here
</script>

5. Display Mouse Click Position


When the user clicks anywhere on the page,
display the X, Y coordinates of the click
position.
hint
<p>Click anywhere on the page to see the
coordinates: <span id="position">X: 0, Y:
0</span></p>
<script>
// Write JavaScript to handle the click event
here
</script>
6. Real-Time Character Counter
 Create a <textarea> where users can type.
 Show a real-time character count as they type.

7. Check Password Strength


 Create a password input field.
 When the user enters a password, display a
message:

 "Weak" if the password is less than 6


characters.
 "Medium" if the password is 6-10
characters.
 "Strong" if the password is more than 10
characters.

8. Prevent Copying Content on Page


 When users try to copy (Ctrl + C or right-
click Copy), display an alert message.
Hint:

1. Use the copy event on document.


2. Use event.preventDefault() to block
copying.
3. Show an alert using alert().

You might also like