Scribd
Upload
102 views

Events Are Actions That Trigger When User Does Something.: Properties

Events are actions that trigger JavaScript functions and are associated with HTML elements and tags. There are different types of events for forms, images, links, and windows. Common events include clicking, loading, hovering, focusing, and submitting. Functions allow code to be reused and organized into logical and modular units. Functions can accept parameters, return values, and perform tasks. Defining functions involves specifying a name, parameters, and body with optional return statement.

Uploaded by

sheetalharrison
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
102 views

Events Are Actions That Trigger When User Does Something.: Properties

Events are actions that trigger JavaScript functions and are associated with HTML elements and tags. There are different types of events for forms, images, links, and windows. Common events include clicking, loading, hovering, focusing, and submitting. Functions allow code to be reused and organized into logical and modular units. Functions can accept parameters, return values, and perform tasks. Defining functions involves specifying a name, parameters, and body with optional return statement.

Uploaded by

sheetalharrison
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 34

Events

Events are actions that trigger when user does


something.Every element on a web page has certain events
which can trigger JavaScript functions.For ex.A form event
is the clicking on a button. Events are objects with
properties.

JavaScript defines five types of events which are form,


image, image map, link, and window events. Events are
associated with HTML tags.
Examples of events:
•A mouse click
•A web page or an image loading
•Mousing over a hot spot on the web page
•Selecting an input box in an HTML form
•Submitting an HTML form
•A keystroke 1
Form Events
•blur - The input focus was lost.
•change - An element lost the focus since it was changed.
•focus - The input focus was obtained.
•reset - The user reset the object, usually a form.
•select - Some text is selected
•submit - The user submitted an object, usually a form.

Image Events
abort - A user action caused an abort.
•error - An error occurred.
•load - The object was loaded.

Image Map Events


•mouseOut - The mouse is moved from on top a link.
•mouseOver - The mouse is moved over a link. 2
Link Events
•click - An object was clicked.
•mouseOut - The mouse is moved from on top a link.
•mouseOver - The mouse is moved over a link.

Window Events
•blur - The input focus was lost.
•error - An error occurred.
•focus - The input focus was obtained.
•load - The object was loaded.
•unload - The object was exited.

3
Meaning of Event :
•abort - A user action caused an abort of an image or document
load.
•blur - A frame set, document, or form object such as a text field
loses the focus for input.
•click - Happens when a link or image map is clicked on
•change - Happens when a form field is changed by the user and it
loses the focus.
•error - An error happened loading a image or document.
•focus - A frame set, document, or form object such as a text field
gets the focus for input.
•load - The event happens when an image or HTML page has
completed the load process in the browser.
•mouseOut - The event happens when the mouse is moved from
on top of a link or image map
•mouseOver - The event happens when the mouse is placed on a
link or image map.
•reset - The user reset the object which is usually a form.
•submit - The user submitted an object which is usually a form.
•unload - The object such as a frameset or HTML document was 4
exited by the user
Common Events for HTML TAGS :
5 ) <FRAME>
1) <A>
•click (onClick) •blur (onBlur)
•mouseOver (onMouseOver)
•focus (onFocus)
•mouseOut (onMouseOut)
2) <BODY> 6) <FRAMESET>
•blur (onBlur)
•error (onError) •blur (onBlur)
•focus (onFocus) •error (onError)
•load (onLoad)
•unload (onUnload) •focus (onFocus)
3) <FORM> •load (onLoad)
•submit (onSubmit)
•reset (onReset) •unload (onUnload)
4) <IMG>
•abort (onAbort)
•error (onError)
•load (onLoad)

5
8) <INPUT TYPE = "button">
•click (onClick)
9) <INPUT TYPE = "checkbox">
•click (onClick)
10 ) <INPUT TYPE = "reset"> / <INPUT TYPE = "submit">
•click (onClick)
11) <INPUT TYPE = "text">
•blur (onBlur)
•focus (onFocus)
•change (onChange)
•select (onSelect)
12) <SELECT>
•blur (onBlur)
•focus (onFocus)
•change (onChange)
13) <TEXTAREA>
•blur (onBlur)
•focus (onFocus)
•change (onChange)
•select (onSelect)
6
Event Handlers :

Event handlers are created as follows:

onEvent = "Code to handle the event"

For Ex. Onload=add( )

7
onload and onUnload
The onload event is triggered when the user enters the page.
The onload event is often used to check the visitor's browser
type and browser version, and load the proper version of the
web page based on the information.

onUnload event is triggered when the user leaves the page.


Both the onload and onUnload events are also often used to
deal with cookies that should be set when a user enters or
leaves a page.

8
Example Of Event Handling :
<html>
<head> <script>
function myfunction()
{
alert("Welcome to my world!!");
}
</script></head>
<body>
<form name="myform">
<input type="button" value="click me" onclick="myfunction()">
</form>
</body>
9
</html>
Opening New Window :
There’s a JS command to open a new browser window.
The third parameter is opitonal, and covers stuff like size,
whether it will have scrollers, etc.
window.open("URL","name","features");
Example : Open a new window when clicking on a button
<html>
<head> <script language=javascript>
function openwindow()
{ window.open("http://google.com") }
</script></head>
<body><form>
<input type=button value="Open Window" onclick="openwindow()">
</form> </body></html> 10
Example of Different Window.open Parameters and hyperlink:
<html>
<head>
<script type="text/javascript">
function openwindow()
{
window.open("http://google.com","window1","width=250,height=300")
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="openwindow()">
<P>
<A href="javascript: openwindow()">Open the JavaScript Window on
hyperlink</A>
</P>
</form></body> </html>
11
Example of multiple Window.open Parameters :
<html>
<head>
<script type="text/javascript">
function openwindow()
{
window.open("http://google.com","window1","width=250,height=300")
window.open("http://gmail.com","window2","width=250,height=300")
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="openwindow()">
<P>
<A href="javascript: openwindow()">Open the JavaScript Window on
hyperlink</A>
</P>
</form></body> </html> 12
Location :The Location object is part of a Window object and is
accessed through the window.location property. It contains the
complete URL of a given Window object, or, if none is specified,
of the current Window object.
Example :
<html><head>
<script type="text/javascript">
function openwindow()
{ window.location = "http://www.yahoo.com" }
</script>
</head>
<body>
<form>
<input type="button" value="Open Window"
onclick="openwindow()">
<P><A href="javascript: openwindow()">Open the JavaScript
Window on hyperlink</A>
</P>
13
</form></body> </html>
Changing font weight and font style when mouse
cursor is moved over object
Example :
<P ID="boldpara1"
onmouseover="javascript:document.all.boldpara1.style.fontWeig
ht= 'bold'" onmouseout="javascript:document.all.boldpara1.style.
fontWeight='normal'" >
This text will turn bold when the mouse cursor is placed on it.
</P>
<P ID="boldpara2"
onmouseover="javascript:document.all.boldpara2.style.fontStyle
= 'italic'"
onmouseout="javascript:document.all.boldpara2.style.fontStyle='
normal'" >This text will turn italic when the mouse cursor is 14
placed on it.</P>
Functions In JavaScript :
Enables modularization
 Makes code reusable
 Reduce size and complexity of code
 Efficiency by avoiding repetition
 Limits details needed to be remembered

 Ensures consistency
 Modifications are only made once

15
Functions :
A module of code that performs a specific task
 Types of functions
 Pre-defined in JavaScript
 User-defined
 Functions may:
 Accept data
 Return a value
 Do something else
 Or any combination of the three 16
Functions :
 Define the functions in the <head> </head>
section of an HTML page inside <script> </script>
tags.
 Function names become reserved once used
 We call functions within the <body> </body>
portion of an HTML page.
 Functions are not executed until they are called in
the </body> portion of an HTML page.

17
Functions :
 When the browser encounters a call to a
function, it passes control to that function and
executes it.
 When it finishes executing the function,
control is passed back to where the function
was called from and proceeds to whatever is
next.

18
Defining Functions :
function FunctionName (parameters)
{
Do something with arguments Define the function here…

return something; Optional

}
... ...and later we use it

variable = FunctionName (arguments);

19
Rules For Naming The Function :
The name of the function:
 Must start with a letter or an underscore
 Can contain letters, digits, and
underscores in any combination
 Cannot contain space
 Cannot contain special characters

20
Functions :
 Parameters represent the inputs in the
function header
Data needed by the function
 Arguments represent the inputs specified in
the function call
 Data provided to the function
 Arguments and parameters are mapped
according to their order
 Needs to be a 1-to-1 mapping 21
Return Values :
 A function can return a value but it is not required
 Return statements return a single value
 The calling program must be set to accept that
value either by assigning it to a variable, or having
it part of output
 Functions without a return statement have a
specific purpose that does not require a value
to be sent back to the calling program
 Output
22
Libraries :
 Functions that might be used in multiple
pages are better stored in a separate file and
imported on the pages where they are used.
Example :
<head>
<script type=“text/javascript” src=“FILENAME”>
</script>
</head>
23
Example Of simple Function :
<html><head>
<script type="text/javascript">
function myfunction()
{
alert("HELLO")
}
</script></head>
<body><form>
<input type="button" onclick="myfunction()" value="Call function">
</form>
<p>By pressing the button, a function will be called. The function will
alert a message.</p>
</body></html>

24
Example of Parameter Passing to function :
<html><head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script></head>
<body>
<form>
<input type="button" onclick="myfunction('Good Morning!')" value="In the
Morning">
</form>
<p>By pressing the button, a function with an argument will be called. The
function will alert
this argument.</p>
</body> </html>
25
Example of Parameter Passing to function :
<html> <head> <script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script> </head>
<body> <form>
<input type="button" onclick="myfunction('Good Morning!')" value="In
the Morning">
<input type="button" onclick="myfunction('Good Evening!')" value="In
the Evening">
</form>
<p>When you click on one of the buttons, a function will be called. The
function will alert
the argument that is passed to it.
</p> </body> </html> 26
Example for Return in Function :
<html><head><script type="text/javascript">
function total(numberA,numberB)
{
return numberA + numberB
}
</script> </head>
<body>
<script type="text/javascript">
document.write(total(2,3))
</script>
<p>The script in the body section calls a function with two
arguments, 2 and 3.</p>
<p>The function returns the sum of these two arguments.</p>
</body>
</html>
27
Example of Recursive Function :
<html> <head><title> recursive function </title>
<script language="javascript">
document.write("Factorials of 1 to 10 ");
document.write("<table border='1'>”);
for(var i=0;i<=10;i++)
document.write("<tr><td>" + i + "</td><td> " + factorial(i) + "</td></tr>");
document.write("</table>");
function factorial(n)
{ if (n<=1)
return 1;
else
return n*factorial(n-1);}
</script></head></html> 28
Example of accepting a number from User :
<html><head><title> recursive function </title>
<script language="javascript">
document.write("Factorials of 1 to 10 ");
document.write("<table border='1'>");
i=prompt("enter number");
document.write("<tr><td>" + i + "</td><td> " + factorial(i) + "</td></tr>");
document.write("</table>");
function factorial(n)
{
if (n<=1) return 1;
else return n*factorial(n-1);
}
29
</script></head></html>
How To Handle Form Elements in Functions :
<html> <head><title> Handling Form Elemnts </title></head>
<Script Language="JavaScript">
function getFullName()
{
var firstName, lastName, fullName;
firstName = document.f.txtFirstName.value;
lastName = document.f.txtLastName.value;
fullName = firstName + " " + lastName;
document.f.txtFullName.value = fullName;
}
</Script>

30
<body>
<form name="f">
First Name:<input type="text" name="txtFirstName" size="14">
Last Name:<input type="text" name="txtLastName" size="14">
Full Name:<input type="text" name="txtFullName" size="30">
<input type="button" value="Show Full Name" onClick="getFullName()">
</form>
</body>
</html>

31
Example of external Javascript File :
File name : b.js
function getFullName()
{
var firstName, lastName, fullName;
firstName = document.f.txtFirstName.value;
lastName = document.f.txtLastName.value;
fullName = firstName + " " + lastName;
document.f.txtFullName.value = fullName;
}

32
Example of how to include external Javascript File :
<html> <head><title> Handling Form Elemnts </title></head>
<Script Language="JavaScript" src="b.js">
</Script>
<body>
<form name="f">
First Name:<input type="text" name="txtFirstName" size="14">
Last Name:<input type="text" name="txtLastName" size="14">
Full Name:<input type="text" name="txtFullName" size="30">
<input type="button" value="Show Full Name" onClick="getFullName()">
</form>
</body>
</html>
33
Example Of Predefined Functions in JavaScript :
 Alert ( )
 Confirm ( )
 Prompt ( )
 Math Functions like random( ) , max ( ) ,min ( )
 String Functions like charAt( ) , toUpperCase( ) , substr ( )

34

You might also like