Scribd
Upload
3 views

CSS Exp - 7_20203B1002

The document outlines an experiment to create a webpage implementing form events using JavaScript. It details various event types such as onclick, onmouseover, and onmouseout, providing practical examples of their usage in HTML. Additionally, it includes theoretical questions related to JavaScript functions and events, along with exercises for further practice.

Uploaded by

pawararya2024
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS Exp - 7_20203B1002

The document outlines an experiment to create a webpage implementing form events using JavaScript. It details various event types such as onclick, onmouseover, and onmouseout, providing practical examples of their usage in HTML. Additionally, it includes theoretical questions related to JavaScript functions and events, along with exercises for further practice.

Uploaded by

pawararya2024
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Name :- Harshvardhan Gupta Roll no:- 20203B1002

Class :- CO5I-B Subject :- CSS

Experiment No: 07

Create a webpage to implement form events. Part 1

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

onclick Event Type


This is the most frequently used event type, which occurs when a user clicks the left
button of his mouse. You can put your validation, warning etc., against this event type.

<html>
<head>
<script> function
sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>

onmouseover and onmouseout Event

These two event types will help you create nice effects with images or even with text
as well. The onmouseover event triggers when you bring your mouse over any element
and the onmouseout triggers when you move your mouse out from that element.

<html>
<head>
<script> function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

Practical Example

<html>
<head>
<title>Mouse Events</title>
</head>
<body>
<h2>Following are the Mouse Events</h2>
<input type="button" name="btn1" onmouseover="alert('You pointed your mouse on
the Button');" value="Hover mouse on me"><br><br>
<input type="button" name="btn2" onmouseout="alert('You pointed your mouse out
of the Button');" value="Hover out of me"><br><br>
<input type="button" name="btn3" onclick="alert('You left-clicked on the Button');"
value="Left-click on me"><br><br>
<input type="button" name="btn4" oncontextmenu="alert('You right-clicked on the
Button');" value="Right-click on me"><br><br>
</body>
</html>

Practical related questions:


1) Explain Java Intrinsic functions.
• Ans:- An intrinsic function (or built-in function) is a function (subroutine)
available for use in a given programming language whose implementation
is handled specially by the compiler.
• “Intrinsic” is the way some authors refer to what other authors call “built-in”.

2) Write the events which are used checkbox and buttons.


Ans:- Onclick,Onchange.

3) Explain the use of with keyword in javascript.


Ans:- The with keyword is used as a kind of shorthand for referencing an object's
properties or methods. The object specified as an argument to with becomes the default
object for the duration of the block that follows. The properties and methods for the object
can be used without naming the object.

4) What is the use of oncontextmenu event?


Ans:- The oncontextmenu event occurs when the user right-clicks on an element to open
the context menu. the contextmenu attribute is currently only supported in Firefox.

Exercise:
1) Write a program for changing the option list dynamically.
2) Develop a program for as we enter the firstname and lastname , email is

automatically generated.
Marks Obtained Dated Signature of
Teacher
Process Related Product Total
(15) Related (50)
(35)

You might also like