Scribd
Upload
40 views

Web Technologies Unit IV Notes

Uploaded by

narasimhac191
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
40 views

Web Technologies Unit IV Notes

Uploaded by

narasimhac191
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/ 9

B.

Com II Year IV Semester


Web Technologies
UNIT – IV
1. Write short notes on Event and Event Handlers in JavaScript.
Event:
Responses made by the browser on account of user’s interactions are known as events.
Ex: Playing audio clip as soon as the page is loaded, generation of informative text as the
mouse pointer is moved through a region of the web page etc.
Event Handler:
The code for the requirement of the events to process is known as event handler. There are
two types of event handlers.
1. Interactive Event Handlers
2. Non – Interactive Event Handlers
1. Interactive Event Handlers:
The event handlers that simply depend on the user’s activity for them to be invoked are
interactive event handlers.
Ex: onClick, onBlur, onFocus etc.
2. Non – Interactive Event Handlers:
The event handlers that do not depend on the user’s for them to be invoked are non –
interactive event handlers.
Ex: onPageLoad
Types of Events:
There are two types of events.
1. Window Events
2. User Events
1. Window Events:
The events that occur as soon as something happens to the window. They occur when a page
loads or windows, when the focus moves to and from the window or frame.
2. User Events:
The events that occur when user interacts with page elements by using mouse or keyboard
or other pointing device.
===================================================================
2. List and explain keyboard events.
The various keyboard events are:
i) onKeyPress
ii) onKeyUp
iii) onKeyDown
i) onKeyPress:
This event occurs when the user presses the key or holds down the key on the keyboard.
This event is handled by onKeyPress event handler.
onKeyPress event involves when the key is pressed and released over the element.
Program:
<html>
<body>
<input type="text" onkeypress="myFunction()">
<script>
function myFunction()
{
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>

ii) onKeyUp:
This event occurs when the user releases the key that is pressed on a document, image, link
etc. This event is handled by the onKeyUp event handler.
Program:
<html>
<body>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
iii) onKeyDown:
This event occurs when the user presses a key on the keyboard. This event is handled by the
onKeyDown event handler.
Program:
<html>
<body>
<p>Press a key inside the text field to set a red background color.</p>
<input type="text" id="demo" onkeydown="myFunction()">
<script>
function myFunction()
{
document.getElementById("demo").style.backgroundColor = "red";
}
</script>
</body>
</html>
===================================================================
3. List and explain Mouse Events.
The following are the list of Mouse events.
➔ onClick
➔ onDblClick
➔ onDragDrop
➔ onMouseDown
➔ onMouseUp
➔ onMouseOut
➔ onMouseOver
1. onClick:
When an element or mouse is clicked, the onClick event handler calls the JavaScript
function. The specific JavaScript code or function is being executed on the occurrence of
the click event.
Program:
<html>
<head>
<script>
function fun()
{
alert("Welcome");
}
</script>
</head>
<body>
<h3> On Click Event </h3>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">Click me</button>
</body>
</html>
2. onDblClick:
This event occurs when the user double clicks on an object. onDblClick event is handled by
onDblClick event handler.
Program:
<html>
<head>
<title> On Double Click Event </title>
</head>
<body>
<h1 id = "heading" ondblclick = "fun()"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<script>
function fun()
{
document.getElementById("heading").innerHTML = " Welcome to the javaTpoint.com ";
}
</script>
</body>
</html>
3. onDragDrop:
This event occurs when the user drags and drops the element at a different location.
Program:
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="butterfly.jpg" draggable="true" ondragstart="drag(event)"
width="336" height="69">
</body>
</html>
4. onMouseDown:
This event occurs when the mouse button is pressed down on an element. This event is
handled by the onMouseDown event handler.
Program:
<html>
<body>
<li> OnMouseDown Eventhandler :
<input type=text value="click mouse key, don't release" size=20
onMouseDown='alert("Mouse Down")'>
</body>
</html>
5. onMouseMove:
This event occurs when the pointer moves when it is on an element. This event is handled
by the onMouseMove event handler.
Program:
<html>
<body>
<li> onMouseMove Eventhandler:
Traverse the mouse through the text
<a href =" " onMouseMove='alert(" mouse traversed")'> Welcome </a>
</body>
</html>
6. onMouseOut:
This event occurs when the cursor leaves the element. The javascript code is called when
the cursor leaves the element.
Program:
<html>
<body>
<li> onMouseOut Eventhandler :
Place the mouse pointer here
<a href=" " onMouseOut='alert("Mouse Out")'> Welcome </a>
</body>
</html>
7. onMouseOver:
This event occurs when the mouse pointer is moved over an element. This event is handled
by the onMouseOver eventhandler.
Program:
<html>
<body>
<li> onMouseOver Eventhandler:
<a href=" " onMouseOver='alert("Mouse Over")'> Welcome </a>
</body>
</html>
===================================================================
4. Write about onSubmit and onReset event handler.
onSubmit:
It is a form based event. Whenever the user fills in the given form and ensures that the
entries has to be loaded on a server then clicks the “submit” button. onSubmit event fires
whenever the button to which it is associated is clicked.
Program:
<html>
<body>
<form name="myform"
onSubmit="window.location=window.document.myform.URL.value;return false;">
<input type="text" name="URL" value="http://">
<input type="submit" value="Redirect">
</form>
</body>
</html>
onReset:
This event occurs when a form is reset. This event is handled by the onReset event handler.
When any form is reset all the controls related to it will be set to their initial values. This
event is cancellable. Once the event is cancelled, the reset operation will not be performed.
Program:
<html>
<body>
<form onReset=”myFunction()”>
Enter name: <input type=”text”>
<input type=”reset”>
</form>
<script>
function myFunction( )
{
alert(“The form was reset”);
}
</script>
</body>
</html>
===================================================================
5. Write about onLoad and onUnLoad event handler.
onload Event:
onLoad event gets invoked as soon as a web document is opened. It is handled by the onLoad
event handler. It is mostly used when a web page loads its complete content.
onUnLoad:
onUnLoad event gets invoked as soon as the given web document is closed. It is handled by
the onUnLoad event handler. It mostly occurs when the user navigates off from a web page.
Program:
<html>
<head>
<script type="javascript">
function disc()
{
alert("The current document cannot be loaded");
}
</script>
</head>
<body onUnload="disc()">
<img src="butterfly.jpg" onLoad="loadImage()" width="100" height="150">
<b> Close the window or press F5 to reload the page </b>
</body>
</html>
===================================================================
6. Explain about onAbort and onError.
onAbort:
onAbort event occurs when the loading of an image stops or aborts. When the user presses
the stop button or redirects the page before the image loads then onAbort event occurs. It
is handled by onAbort event handler.
Program:
<html>
<body>
<img src=”butterfly.jpg” onAbort=”alert(‘Loading of image aborted!’)”>
</body>
</html>
onError:
onError event occurs where there is a Javasccript error. The onError event is used to
launch a script that writes a message to the status bar of the browers.
Program:
<html>
<body>
<img src=”butterfly.jpg” onError=”fun()”>
<script language=”javascript”>
function fun()
{
alert(‘The image could not be loaded.’);
}
</script>
</body>
<html>
===================================================================

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