JavaScript Functions, Events, Image Maps and Animations
Working with Functions
a function is a set of statements that executes when the function is called in a program.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Function</TITLE>
<SCRIPT language="JavaScript">
function simple()
{
alert("This is an alert box. Thank You!!")
}
</SCRIPT>
</HEAD>
<BODY onload="simple()">
<H1>Using Simple JavaScript Function</H1>
<P>Here we are using a simple JavaScript function that displays an alert box on the load event of the Web page.</P>
</BODY>
</HTML>
the onload event handler under the BODY element calls the simple() function when the document is loaded in the browser.
Creating a Function with Parameters
a function with parameters accepts some values when it is called.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/JavaScript">
function parameter(value)
{
alert(value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" onclick="parameter('JavaScript function with parameter')" value="Call function">
</FORM>
<P>This is an example of JavaScript function with parameters</P>
</BODY>
</HTML>
Using Function Arguments
Arguments are the values that you pass to a function, which has corresponding parameters to store them.
it is importent to note that arguments are passed while calling a function.
Argument is often used in the sense of "actual argument" vs. "formal parameter".
The formal parameter is what's given in the function declaration/definition/prototype, the actual argument is what's passed when calling the function, an instance of a formal parameter, if you will.
That being said, they're often used interchangably, or depending on language/community, and I've also heard "actual parameter" &c.
Generally, the parameters are what are used inside the function and the arguments are the values passed when the function is called.
Using a Return Statement
the return statement returns a value from a function.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>RETURN</TITLE>
</HEAD>
<BODY>
<H1>Using the return Statement </H1>
<SCRIPT language="JavaScript">
function area (l, b)
{
var rectangle = l*b;
return rectangle;
}
document.write("The area of the rectangle is calculated using the area() function <BR/>");
var rect=area (4,6);
document.write("Area of rectangle is: "+rect);
</SCRIPT>
</BODY>
</HTML>
Using Function Scopr and Closures
te scope of a function specifies it's accessibility within a program.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Closures</TITLE>
</HEAD>
<BODY>
<H1>Using the Function Scope and Closure</H1>
<SCRIPT language="JavaScript">
// call function to display greeting message
Showmessage();
// "Hello, World" function
function Showmessage()
{
// declaring new variables
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var month = date.getMonth() + 1
var day = date.getDate()
var year = date.getFullYear()
// call DisplayGreeting
Display();
// display greeting
function Display()
{
if (hour >= 22 || hour <= 5)
document.write("Goodnight, world! <BR/>");
else
document.write("Hello, world! <BR/>");
document.write ("Today is " + month + "/" + day + "/" + year + "<BR/>");
document.write ("The current time is " + hour + ":" + min );
}
}
</SCRIPT>
</BODY>
</HTML>
the Showmessage() function acts as a closure as it combines two things, a funcion and a local variable.
Working with the setTimeout() Method
the setTimeout() method is used to specify the time interval after which the code executes.
this method is useful in the situation when you want to delay the execution of a particular code.
<!DOCTYPE HTML>
<HEAD>
<SCRIPT type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value=" timed alert box!"
onClick="timedMsg()" />
</FORM>
</BODY>
</HTML>
the first parameter of the setTimeout() method is a string that contains a Javascript statement.
the second parameter specifies the time in milliseconds after which the first parameter will be execute.
after 5sec an alert box will popup.
Working with the setInterval() Method
the setInterval() method is used to execute the code after every specified time intervals.
<!DOCTYPE HTML>
<HEAD>
<SCRIPT type="text/javascript">
function timedMsg()
{
var t=setInterval("alert('1seconds!')",1000);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value=" timed alert box!"
onClick="timedMsg()" />
</FORM>
</BODY>
</HTML>
the first parameter of the setInterval() method is a string that contains a Javascript statement.
the second parameter specifies the time in milliseconds after which the first parameter will be execute.
for every 1sec the first parameter JavaScript statement will execute.
Working with the onclick Event
the onclick eventtriggers when you click a particular control, such as the button control.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onclick Event</TITLE>
</HEAD>
<BODY>
<H1>Using the onclick Event </H1>
<FORM name="form">
Name:<INPUT type="text" id="field" value=" " ><BR/>
<BUTTON onclick="alert('Welcome, ' + document.getElementById('field').value)">Click me</BUTTON>
</FORM>
</BODY>
</HTML>
Working with the onload Event
the onload event triggers when a webpage loads in a browser.
in html this event is defined in the body element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onload Event</TITLE>
</HEAD>
<BODY onload = "alert ('Welcome to javascript!')">
<H1>Using the onload Event </H1>
<P>This example displays an alert box at the load event of the Web page.</P>
</BODY>
</HTML>
Working with the Mouse Events
the mouse events are those events that triggers while operating the mouse.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onload Event</TITLE>
</HEAD>
<BODY>
<H1>Using the Mouse Events </H1>
<P> Click this Button </P>
<BUTTON onMouseDown = "document.images['img'].src='car.jpg'" onMouseUp = "document.images['img'].src='go.png'" >
<IMG NAME="img" >
</BUTTON>
</BODY>
</HTML>
Working with the onresent Event
the onreset event is defined with a form and is triggered when the fields of form are reset.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onreset Event</TITLE>
</HEAD>
<BODY>
<H1>The onreset Event</H1>
<FORM onreset="alert('onReset event is triggered when the user clicks the RESET button')">
<B>Application Form</B>
<P>Fill the form and click the RESET button</P>
<BR>
<B>Name:</B><INPUT type="text" name="fname" value="">
<BR>
<B>Roll Number:</B><INPUT type="text" id="fnumber" value="">
<BR>
<B>Address:</B><INPUt type="text" name="faddress" value="">
<BR>
<B>Email id:</B><INPUT type="text" name="femail" value="">
<BR>
<INPUt type="reset" value="RESET">
</FORM>
</BODY>
</HTML>
input element attribute type is used to empty the fields what ever you are entered in a form.
Working with the onsubmit Event
the onsubmit event is used with the FORM element and is triggered when the form is submitted.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onsubmit Event</TITLE>
</HEAD>
<BODY>
<H1>The onsubmit Event</H1>
<FORM onsubmit ="alert('All the details of this form are submitted')">
<B>Application Form</B>
<P>Fill the form and click the SUBMIT button</P>
<BR>
<B>Name:</B><INPUT type="text" name="fname" value="">
<BR>
<B>Roll Number:</B><INPUT type="text" id="fnumber" value="">
<BR>
<B>Address:</B><INPUt type="text" name="faddress" value="">
<BR>
<B>Email id:</B><INPUT type="text" name="femail" value="">
<BR>
<INPUt type="submit" value="SUBMIT">
</FORM>
</BODY>
</HTML>
Working with Image Maps
image maps are used to provide hyperlinks on an image to navigate to a respective webpage.
<!DOCTYPE HTML>
<HTML>
<BODY>
<IMG src ="flower.jpg" width ="560" height ="500" alt="flowers" usemap="#flowermap" />
<MAP name="flowermap">
<AREA shape ="rect" coords ="0, 0, 200, 50" href ="flower1.jpg" target="_blank" alt="flower1" />
<AREA shape ="circle" coords ="0, 100, 200, 50" href ="flower2.jpg" target="_blank" alt="flower2" />
<AREA shape ="circle" coords ="0, 150, 200, 50" href ="flower3.jpg" target="_blank" alt="flower3" />
</MAP>
</BODY>
</HTML>
javascript map
<!DOCUMENT HTML>
<HTML>
<HEAD>
<TITLE>Using javaScript in Image map</title>
<script type="text/javascript">
function details(txt)
{
document.getElementById("description").src=txt
}
</SCRIPT>
</HEAD>
<BODY>
<IMG src ="flower.jpg" width ="300" height ="300" alt="flowers" usemap="#flowermap" />
<MAP name="flowermap">
<AREA shape ="rect" coords ="2,7,22,50" onMouseover="details('flower1.jpg')" />
<AREA shape ="circle" coords ="90,60,10" onMouseover="details('flower2.jpg')" />
<AREA shape ="circle" coords ="90,18,16" onMouseover="details('flower3.jpg')" />
</MAP>
<BR>
<IMG id="description" width ="300" height ="300" >
<P id="description1"></P>
</BODY>
</HTML>
Working with Animations
animation is the process of rapidly displaying a sequence of the images or frames on a webpage.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>JavaScript Animation</TITLE>
<SCRIPT type="text/javascript">
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,200); // call moveRight in 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<IMG id="myImage" src="Car.jpg" />
<P>Click the Start button to start aniamtion</P>
<INPUT type="button" value="Start" onclick="moveRight();" />
<INPUT type="button" value="Stop" onclick="stop();" />
</FORM>
</BODY>
</HTML>
Working with Functions
a function is a set of statements that executes when the function is called in a program.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Function</TITLE>
<SCRIPT language="JavaScript">
function simple()
{
alert("This is an alert box. Thank You!!")
}
</SCRIPT>
</HEAD>
<BODY onload="simple()">
<H1>Using Simple JavaScript Function</H1>
<P>Here we are using a simple JavaScript function that displays an alert box on the load event of the Web page.</P>
</BODY>
</HTML>
the onload event handler under the BODY element calls the simple() function when the document is loaded in the browser.
Creating a Function with Parameters
a function with parameters accepts some values when it is called.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/JavaScript">
function parameter(value)
{
alert(value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" onclick="parameter('JavaScript function with parameter')" value="Call function">
</FORM>
<P>This is an example of JavaScript function with parameters</P>
</BODY>
</HTML>
Using Function Arguments
Arguments are the values that you pass to a function, which has corresponding parameters to store them.
it is importent to note that arguments are passed while calling a function.
Argument is often used in the sense of "actual argument" vs. "formal parameter".
The formal parameter is what's given in the function declaration/definition/prototype, the actual argument is what's passed when calling the function, an instance of a formal parameter, if you will.
That being said, they're often used interchangably, or depending on language/community, and I've also heard "actual parameter" &c.
Generally, the parameters are what are used inside the function and the arguments are the values passed when the function is called.
Using a Return Statement
the return statement returns a value from a function.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>RETURN</TITLE>
</HEAD>
<BODY>
<H1>Using the return Statement </H1>
<SCRIPT language="JavaScript">
function area (l, b)
{
var rectangle = l*b;
return rectangle;
}
document.write("The area of the rectangle is calculated using the area() function <BR/>");
var rect=area (4,6);
document.write("Area of rectangle is: "+rect);
</SCRIPT>
</BODY>
</HTML>
Using Function Scopr and Closures
te scope of a function specifies it's accessibility within a program.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Closures</TITLE>
</HEAD>
<BODY>
<H1>Using the Function Scope and Closure</H1>
<SCRIPT language="JavaScript">
// call function to display greeting message
Showmessage();
// "Hello, World" function
function Showmessage()
{
// declaring new variables
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var month = date.getMonth() + 1
var day = date.getDate()
var year = date.getFullYear()
// call DisplayGreeting
Display();
// display greeting
function Display()
{
if (hour >= 22 || hour <= 5)
document.write("Goodnight, world! <BR/>");
else
document.write("Hello, world! <BR/>");
document.write ("Today is " + month + "/" + day + "/" + year + "<BR/>");
document.write ("The current time is " + hour + ":" + min );
}
}
</SCRIPT>
</BODY>
</HTML>
the Showmessage() function acts as a closure as it combines two things, a funcion and a local variable.
Working with the setTimeout() Method
the setTimeout() method is used to specify the time interval after which the code executes.
this method is useful in the situation when you want to delay the execution of a particular code.
<!DOCTYPE HTML>
<HEAD>
<SCRIPT type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value=" timed alert box!"
onClick="timedMsg()" />
</FORM>
</BODY>
</HTML>
the first parameter of the setTimeout() method is a string that contains a Javascript statement.
the second parameter specifies the time in milliseconds after which the first parameter will be execute.
after 5sec an alert box will popup.
Working with the setInterval() Method
the setInterval() method is used to execute the code after every specified time intervals.
<!DOCTYPE HTML>
<HEAD>
<SCRIPT type="text/javascript">
function timedMsg()
{
var t=setInterval("alert('1seconds!')",1000);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value=" timed alert box!"
onClick="timedMsg()" />
</FORM>
</BODY>
</HTML>
the first parameter of the setInterval() method is a string that contains a Javascript statement.
the second parameter specifies the time in milliseconds after which the first parameter will be execute.
for every 1sec the first parameter JavaScript statement will execute.
Working with the onclick Event
the onclick eventtriggers when you click a particular control, such as the button control.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onclick Event</TITLE>
</HEAD>
<BODY>
<H1>Using the onclick Event </H1>
<FORM name="form">
Name:<INPUT type="text" id="field" value=" " ><BR/>
<BUTTON onclick="alert('Welcome, ' + document.getElementById('field').value)">Click me</BUTTON>
</FORM>
</BODY>
</HTML>
Working with the onload Event
the onload event triggers when a webpage loads in a browser.
in html this event is defined in the body element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onload Event</TITLE>
</HEAD>
<BODY onload = "alert ('Welcome to javascript!')">
<H1>Using the onload Event </H1>
<P>This example displays an alert box at the load event of the Web page.</P>
</BODY>
</HTML>
Working with the Mouse Events
the mouse events are those events that triggers while operating the mouse.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onload Event</TITLE>
</HEAD>
<BODY>
<H1>Using the Mouse Events </H1>
<P> Click this Button </P>
<BUTTON onMouseDown = "document.images['img'].src='car.jpg'" onMouseUp = "document.images['img'].src='go.png'" >
<IMG NAME="img" >
</BUTTON>
</BODY>
</HTML>
Working with the onresent Event
the onreset event is defined with a form and is triggered when the fields of form are reset.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onreset Event</TITLE>
</HEAD>
<BODY>
<H1>The onreset Event</H1>
<FORM onreset="alert('onReset event is triggered when the user clicks the RESET button')">
<B>Application Form</B>
<P>Fill the form and click the RESET button</P>
<BR>
<B>Name:</B><INPUT type="text" name="fname" value="">
<BR>
<B>Roll Number:</B><INPUT type="text" id="fnumber" value="">
<BR>
<B>Address:</B><INPUt type="text" name="faddress" value="">
<BR>
<B>Email id:</B><INPUT type="text" name="femail" value="">
<BR>
<INPUt type="reset" value="RESET">
</FORM>
</BODY>
</HTML>
input element attribute type is used to empty the fields what ever you are entered in a form.
Working with the onsubmit Event
the onsubmit event is used with the FORM element and is triggered when the form is submitted.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>onsubmit Event</TITLE>
</HEAD>
<BODY>
<H1>The onsubmit Event</H1>
<FORM onsubmit ="alert('All the details of this form are submitted')">
<B>Application Form</B>
<P>Fill the form and click the SUBMIT button</P>
<BR>
<B>Name:</B><INPUT type="text" name="fname" value="">
<BR>
<B>Roll Number:</B><INPUT type="text" id="fnumber" value="">
<BR>
<B>Address:</B><INPUt type="text" name="faddress" value="">
<BR>
<B>Email id:</B><INPUT type="text" name="femail" value="">
<BR>
<INPUt type="submit" value="SUBMIT">
</FORM>
</BODY>
</HTML>
Working with Image Maps
image maps are used to provide hyperlinks on an image to navigate to a respective webpage.
<!DOCTYPE HTML>
<HTML>
<BODY>
<IMG src ="flower.jpg" width ="560" height ="500" alt="flowers" usemap="#flowermap" />
<MAP name="flowermap">
<AREA shape ="rect" coords ="0, 0, 200, 50" href ="flower1.jpg" target="_blank" alt="flower1" />
<AREA shape ="circle" coords ="0, 100, 200, 50" href ="flower2.jpg" target="_blank" alt="flower2" />
<AREA shape ="circle" coords ="0, 150, 200, 50" href ="flower3.jpg" target="_blank" alt="flower3" />
</MAP>
</BODY>
</HTML>
javascript map
<!DOCUMENT HTML>
<HTML>
<HEAD>
<TITLE>Using javaScript in Image map</title>
<script type="text/javascript">
function details(txt)
{
document.getElementById("description").src=txt
}
</SCRIPT>
</HEAD>
<BODY>
<IMG src ="flower.jpg" width ="300" height ="300" alt="flowers" usemap="#flowermap" />
<MAP name="flowermap">
<AREA shape ="rect" coords ="2,7,22,50" onMouseover="details('flower1.jpg')" />
<AREA shape ="circle" coords ="90,60,10" onMouseover="details('flower2.jpg')" />
<AREA shape ="circle" coords ="90,18,16" onMouseover="details('flower3.jpg')" />
</MAP>
<BR>
<IMG id="description" width ="300" height ="300" >
<P id="description1"></P>
</BODY>
</HTML>
Working with Animations
animation is the process of rapidly displaying a sequence of the images or frames on a webpage.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>JavaScript Animation</TITLE>
<SCRIPT type="text/javascript">
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,200); // call moveRight in 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<IMG id="myImage" src="Car.jpg" />
<P>Click the Start button to start aniamtion</P>
<INPUT type="button" value="Start" onclick="moveRight();" />
<INPUT type="button" value="Stop" onclick="stop();" />
</FORM>
</BODY>
</HTML>
No comments:
Post a Comment