From our HTML tutorial we have learned that an image-map is an image with clickable regions. Normally, each region has an associated hyperlink. Clicking on one of the regions takes you to the associated link. Look at our simple HTML image-map.
Adding some JavaScript
We can add events (that can call a
JavaScript) to the <area> tags inside the image map. The <area> tag
supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver,
onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur
events.Here's the HTML image-map example, with some JavaScript added:
Example
 |
JavaScript Timing Events
|
|
JavaScript can
be executed in time-intervals.
This is called
timing events.
|
JavaScript Timing Events
With JavaScript, it is possible to
execute some code after a specified time-interval. This is called timing
events.It's very easy to time events in JavaScript. The two key methods that are used are:
- setTimeout() - executes a code
some time in the future
- clearTimeout() - cancels the
setTimeout()
The setTimeout() Method
Syntax
|
var t=setTimeout("javascript statement",milliseconds);
|
The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
The second parameter indicates how many milliseconds from now you want to execute the first parameter.
Note: There are 1000 milliseconds in one second.
Example
When the button is clicked in the
example below, an alert box will be displayed after 5 seconds.
Example
|
Example - Infinite Loop
To get a timer to work in an
infinite loop, we must write a function that calls itself.In the example below, when a button is clicked, the input field will start to count (for ever), starting at 0.
Notice that we also have a function that checks if the timer is already running, to avoid creating additional timers, if the button is pressed more than once:
Example
|
The clearTimeout() Method
Syntax
|
clearTimeout(setTimeout_variable)
|
Example
The example below is the same as
the "Infinite Loop" example above. The only difference is that we
have now added a "Stop Count!" button that stops the timer:
Example
|
JavaScript Timing Events
|
|
JavaScript can
be executed in time-intervals.
This is called
timing events.
|
JavaScript Timing Events
With JavaScript, it is possible to
execute some code after a specified time-interval. This is called timing
events.It's very easy to time events in JavaScript. The two key methods that are used are:
- setTimeout() - executes a code
some time in the future
- clearTimeout() - cancels the setTimeout()
The setTimeout() Method
Syntax
|
var t=setTimeout("javascript statement",milliseconds);
|
The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
The second parameter indicates how many milliseconds from now you want to execute the first parameter.
Note: There are 1000 milliseconds in one second.
Example
When the button is clicked in the
example below, an alert box will be displayed after 5 seconds.
Example
|
Example - Infinite Loop
To get a timer to work in an
infinite loop, we must write a function that calls itself.In the example below, when a button is clicked, the input field will start to count (for ever), starting at 0.
Notice that we also have a function that checks if the timer is already running, to avoid creating additional timers, if the button is pressed more than once:
Example
|
The clearTimeout() Method
Syntax
|
clearTimeout(setTimeout_variable)
|
Example
The example below is the same as
the "Infinite Loop" example above. The only difference is that we
have now added a "Stop Count!" button that stops the timer:
Example
|
JavaScript Timing Events
|
|
JavaScript can
be executed in time-intervals.
This is called
timing events.
|
JavaScript Timing Events
With JavaScript, it is possible to
execute some code after a specified time-interval. This is called timing
events.It's very easy to time events in JavaScript. The two key methods that are used are:
- setTimeout() - executes a code
some time in the future
- clearTimeout() - cancels the
setTimeout()
The setTimeout() Method
Syntax
|
var t=setTimeout("javascript statement",milliseconds);
|
The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".
The second parameter indicates how many milliseconds from now you want to execute the first parameter.
Note: There are 1000 milliseconds in one second.
Example
When the button is clicked in the
example below, an alert box will be displayed after 5 seconds.
Example
|
Example - Infinite Loop
To get a timer to work in an
infinite loop, we must write a function that calls itself.In the example below, when a button is clicked, the input field will start to count (for ever), starting at 0.
Notice that we also have a function that checks if the timer is already running, to avoid creating additional timers, if the button is pressed more than once:
Example
|
The clearTimeout() Method
Syntax
|
clearTimeout(setTimeout_variable)
|
Example
The example below is the same as
the "Infinite Loop" example above. The only difference is that we
have now added a "Stop Count!" button that stops the timer:
Example
|
JavaScript Form Validation
JavaScript Form Validation
JavaScript can be used to validate
data in HTML forms before sending off the content to a server.Form data that typically are checked by a JavaScript could be:
- has the user left required
fields empty?
- has the user entered a valid
e-mail address?
- has the user entered a valid
date?
- has the user entered text in a
numeric field?
Required Fields
The function below checks if a
required field has been left empty. If the required field is blank, an alert
box alerts a message and the function returns false. If a value is entered, the
function returns true (means that data is OK):|
function validate_required(field,alerttxt)
{ with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else { return true; } } } |
|
<html>
<head> <script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else { return true; } } } function validate_form(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false;} } } </script> </head> <body> <form action="submit.htm" onsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html> |
E-mail Validation
The function below checks if the
content has the general syntax of an email.This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign:
|
function validate_email(field,alerttxt)
{ with (field) { apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2) {alert(alerttxt);return false;} else {return true;} } } |
|
<html>
<head> <script type="text/javascript"> function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2) {alert(alerttxt);return false;} else {return true;} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus();return false;} } } </script> </head> <body> <form action="submit.htm" onsubmit="return validate_form(this);" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> </body> </html> |
Javascript examples
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click
me!" onClick="displaymessage()" />
</form>
<p>By pressing the button above, a function will be
called. The function will alert a message.</p>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function funName(n)
{
txt=n.value;
if(txt.length<6)
{
alert("please
enter the min. 6 characters ");
}
}
function funTel(n)
{txt=n.value;
if(txt.length<10)
{
alert("please
enter the min. 10 numbers ");
}
}
function funMTel(n)
{
txt=n.value;
if(txt.length<10)
{
alert("please
enter the min. 10 numbers ");
}
}
function funMail(n)
{
txt=n.value;
if(txt.indexOf('@')==-1
&& txt.indexOf('.')==-1)
{
alert("please
enter @ sign or .sign");
}
}
function funpassword(n)
{
txt=n.value;
if(txt.length<6)
{
alert("please
enter the min. 6 characters ");
}
}
</script>
<title> my home page</title>
</head>
<body background="images/ss.jpg"
text="#000000">
<form action="show.php"
name="registration" method="post">
<h1><center>
Registration form
</center></h1>
<HR WIDTH="75%" COLOR="#FF0000"
SIZE="4">
<tr><th><p>Personal information</p>
<p> </p></th>
</tr>
<tr><td>Name</td><td><input
name="name" input type="text" value=""
onblur="funName(this)"></td></tr>
<tr><td>Father's Name</td><td><input
name="fathername"
type="text" value=""
onBlur="funName(this)"></td></tr>
<tr><td>address</td><td><input
type="text" input name="address" value=""
onBlur="funName(this)"></td></tr></br>
<tr><td>teleno.</td><td><input
type="text" input name="teleno" value=""
maxlength="10"
onBlur="funTel(this)"></td></tr>
<tr><td>mobile no.</td><td><input
type="text" input name="mobileno" value=""
maxlength="10" onBlur="funMTel(this)"
></td></tr>
<tr>
<td>Email Id:
</td>
<td><INPUT
name="email" input type="text" value=""
size="10" onBlur="funMail(this)"></td></tr>
<tr>
<td>Password:</td>
<td><input
name="password" input type="password" value=""
size="10"
onBlur="funpassword(this)"></td></tr>
<tr> <td>Re enter Password:</td>
<td><input
name="repassword" input type="password" value=""
size="10"></td></tr>
<input type="submit"
name="submit"
value="Submit"/>
</form>
</body>
</html>
<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>
// JavaScript Document<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your
name","harry poter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you
today?");
document.write("i am fine... , how r uu.");
}
}
</script>
</head>
<body>
<input type="button"
onClick="show_prompt()" value="Show a prompt box" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start
count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will
count for ever, starting at 0.</p>
</body>
</html>
<html>
<body>
<script type="text/javascript">
document.write(Math.random());
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
document.write(Date());
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button"
onClick="show_confirm()" value="Show a confirm box" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt);
}
</script>
</head>
<body>
<form>
<input type="button"
onClick="myfunction('Hello')" value="Call function">
</form>
<p>By pressing the button above, a function will be
called with "Hello" as a parameter. The function will alert the
parameter.</p>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start
count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop
count!" onClick="stopCount()">
</form>
<p>
Click on the "Start count!" button above to start
the timer. The input field will count forever, starting at 0. Click on the
"Stop count!" button to stop the counting.
</p>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onLoad="startTime()">
<div id="txt"></div>
</body>
</html>
No comments:
Post a Comment
Type Your Comments........