Scribd
Upload
22 views6 pages

Css Exp - 8 - 20203B1002

The document outlines an experiment to create a webpage that implements form events using JavaScript, focusing on keyboard events such as keydown, keypress, and keyup. It provides a theoretical background on how these events are triggered and how to handle them using event listeners. Additionally, it includes practice questions and exercises related to the content covered in the experiment.

Uploaded by

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

Css Exp - 8 - 20203B1002

The document outlines an experiment to create a webpage that implements form events using JavaScript, focusing on keyboard events such as keydown, keypress, and keyup. It provides a theoretical background on how these events are triggered and how to handle them using event listeners. Additionally, it includes practice questions and exercises related to the content covered in the experiment.

Uploaded by

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

Experiment No: 08

Create a webpage to implement form events. Part 2

Resources required:
Hardware Software

Computer 1)Notepad editor


System 2)Any Web Browser

Practical Significance:
A JavaScript executes in response to an event that occurs while a form is displayed on
the screen. An event is something the user does to the form, such as clicking a button,
selecting a radio button, or moving the cursor away from an element on the form. The
browser also fires events when the page finishes loading from the server.

Theoretical Background

When you interact with the keyboard, the keyboard events are fired. There are three
main keyboard events:

keydown – fires when you press a key on the keyboard and it fires repeatedly while
you holding down the key. keyup – fires when you release a key on the keyboard.

keypress – fires when you press a character keyboard like a,b, or c, not the left arrow
key, home, or end keyboard, … The keypress also fires repeatedly while you hold
down the key on the keyboard.

The keyboard events typically fire on the text box, through all elements support
them.

When you press a character key once on the keyboard, three keyboard events are
fired in the following order:

keydown
keypress keyup

Both keydown and keypress events are fired before any change made to the text box,
whereas the keyup event fires after the changes have made to the text box. If you
hold down a character key, the keydown and keypress are fired repeatedly until you
release the key.

When you press a non-character key, the keydown event is fired first followed by the
keyup event. If you hold down the non-character key, the keydown is fired repeatedly
until you release the key.

Handling keyboard events:

To handle a keyboard event, you follow these steps:

First, select the element on which the keyboard event will fire. Typically, it is a text
box.

Then, use the element.addEventListener() to register an event handler.

Suppose that you have the following text box with the id message:

<input type="text" id="message">

The following illustrates how to register keyboard event listeners:


msg.addEventListener("keydown", (event) => {
// handle keydown
});
msg.addEventListener("keypress", (event) => {
// handle keypress
});

msg.addEventListener("keyup", (event) => {


// handle keyup
});
If you press a character key, all three event handlers will be called.

Example:
<html>
<head><title>Javascript Form Events : onClick Event</title>
<script>
function Japan(){
alert("konnichiwa");
}
function India(){
alert("namaste");
}
function Germany(){
alert("Guten Tag");
}
</script>
</head>
<body>
<p>Hello in Different Countries</p>
<form>
<input type="button" value="Japan"
onclick ="Japan()" />

<input type="button" value="India"


onclick ="India()" />

<input type="button" value="Germany"


onclick ="Germany()" />
</form>

</body>
</html>

Practice Questions

1) What event occurs when an element comes into focus?

a. onblur

b. onfocus
c. onselect
d. onchange

2) What event occurs when a user highlights text in a text fi eld?

a. onblur

b. onfocus

c. onselect
d. onchange

3)True or False. A JavaScript function can only change attributes of an element

that calls the JavaScript function.

a. True

b. False
Exercise:

1)Write a program to demonstrate the use of onchange event.

2)Write a JavaScript program to demonstrate the addEventListener ().


Name:- Harshvardhan Gupta Subject:- CSS

Rollno:- 20203B1002 Class :- CO5I-B

Marks Obtained Dated Signature of


Teacher
Process Related Product Total
(15) Related (50)
(35)

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy