Scribd
Upload
13 views22 pages

Unit 2-5 - Web Technology

Uploaded by

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

Unit 2-5 - Web Technology

Uploaded by

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

CSB4301 - WEB TECHNOLOGY

B.Tech – V Semester
UNIT II
M. Vijayakumar
Assistant Professor (SS)
School of Computing Sciences,
Department of Computer Science and Engineering
Handling Events

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 2


HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can "react" on these


events.

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 3


HTML Events
An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

An HTML web page has finished loading


An HTML input field was changed
An HTML button was clicked
Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements.

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 4


With single quotes:

<element event='some JavaScript’>

With double quotes:

<element event="some JavaScript">

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 5


In the following example, an onclick attribute (with code), is added to a <button> element:

<!DOCTYPE html>
<html>
<body>

<button
onclick="document.getElementById('demo').innerHTML=Date()
">The time is?</button>

<p id="demo"></p>

</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 6


In the example above, the JavaScript code changes the content of the element with
id="demo".

In the next example, the code changes the content of its own element (using
this.innerHTML):
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>


<button onclick="this.innerHTML=Date()">The time
is?</button>

</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 7


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>


<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 8


Common HTML Events
Here is a list of some common HTML events:

Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an
HTML element
onmouseout The user moves the mouse away from
an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the
page

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 9


What can JavaScript Do?
Event handlers can be used to handle and verify user input, user actions, and browser actions:

• Things that should be done every time a page loads


• Things that should be done when the page is closed
• Action that should be performed when a user clicks a button
• Content that should be verified when a user inputs data

Many different methods can be used to let JavaScript work with events:

• HTML event attributes can execute JavaScript code directly


• HTML event attributes can call JavaScript functions
• You can assign your own event handler functions to HTML elements
• You can prevent events from being sent or being handled

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 10


onchange Event
Execute a JavaScript when a user changes the selected option of a <select> element:
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 11
<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onchange"


event to an input element.</p>

Enter your name: <input type="text" id="fname"


onchange="myFunction()">

<p>When you leave the input field, a function is triggered


which transforms the input text to upper case.</p>

<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

</body>
</html>
Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 12
onclick Event
Execute a JavaScript when a button is clicked:
<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onclick"


event to a p element.</p>

<p id="demo" onclick="myFunction()">Click me.</p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "YOU
CLICKED ME!";
}
</script>

</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 13


<!DOCTYPE html>
<html>
<body>

<h1>The onclick Event</h1>


<p>The onclick event is used to trigger a function when an element is clicked on.</p>
<p>Click the button to trigger a function that will output "Hello World" in a p element with
id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 14


Onmouseover event
Execute a JavaScript when moving the mouse pointer onto an image:
<!DOCTYPE html>
<html>
<body>
<p>This example demonstrates how to assign an
"onmouseover" and "onmouseout" event to a h1 element.</p>
<h1 id="demo" onmouseover="mouseOver()"
onmouseout="mouseOut()">Mouse over me</h1>
<script>
function mouseOver() {
document.getElementById("demo").style.color = "red";
}
function mouseOut() {
document.getElementById("demo").style.color = "black";
}
</script>

</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 15


<!DOCTYPE html>
<html>
<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src=“tiger.jpg" alt=“Tiger"


width="32" height="32">

<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 16


Onmouseout event
Execute a JavaScript when moving the mouse pointer out of an image:
<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onmouseover" and "onmouseout" event to a h1


element.</p>

<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse over me</h1>


<script>
function mouseOver() {
document.getElementById("demo").style.color = "red";
}
function mouseOut() {
document.getElementById("demo").style.color = "black";
}
</script>
</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 17


<!DOCTYPE html>
<html>
<body>

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src=“tiger.jpg" alt=“Tiger"


width="32" height="32">
<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 18


Onkeydown event
Execute a JavaScript when a user is pressing a key:
<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onkeydown" event to an


input element.</p>

<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>
Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 19
<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when the user is pressing a key in


the input field.</p>

<input type="text" onkeydown="myFunction()">

<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>

</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 20


Onload event
Execute a JavaScript immediately after a page has been loaded:
<!DOCTYPE html>
<html>
<body>

<p>This example demonstrates how to assign an "onload"


event to an iframe element.</p>

<iframe onload="myFunction()" src="/default.asp"></iframe>

<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Iframe is
loaded.";
}
</script>
</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 21


<!DOCTYPE html>
<html>
<body onload="myFunction()">

<h1>Hello World!</h1>

<script>
function myFunction() {
alert("Page is loaded");
}
</script>

</body>
</html>

Department of Computer science and Engineering CSB4301 - WEB TECHNOLOGY 22

You might also like