Javascript Is One of the Client Side Scripting Languages Created by Netscape, Microsoft
Server Side Programming with PHP CPAN 542
Lecture 7:DHTML with JavaScript
Adding event handlers
An event represents an action that happen when the user interacts with a Web page, like opening the page, moving the mouse over a link or clicking on a button. An event handler on the other hand is a JavaScript statement(s) that get called in response to that event.
Event handlers are part of the dynamic effect that you can add to your page, to control the behavior of your pages, depending on the users interacting with these pages.
Examples
Let's get started with some examples to demonstrate the use of event handlers:
Example 1: overlink.html:
This example shows information on the status bar as the user moves the mouse over and out of the hyperlink.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Mouse-over and Out-link Example</title>
</head>
<body>
<h1>This is first JavaScript Code</h1>
<a href=" onmouseover=
"window.status='Click to see yahoo site';return true;"
onmouseout="window.status='';return true;">Visit Yahoo</a>
</body>
</html>
Example 2: overlink1.html
In this example, we will do the same as in example 1 but using functions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<title>Mouse-over and Out-link example</title>
<script language="JavaScript" type="text/javascript">
<!--
function show(lnk)
{
var name = lnk.hostname;
var site = "", firstdot=0,lastdot = 0;
firstdot = name.indexOf(".");
lastdot=name.lastIndexOf(".");
site = name.substring(firstdot+1,lastdot);
status="Click to see "+site+" Site";
}
function hide()
{
status="";
}
//-->
</script>
</head>
<body>
<h1>This is the First JavaScript Code</h1>
<a href="
onmouseover="show(this);return true;"
onmouseout="hide();return true;">Visit Yahoo</a>
</body>
</html>
Example 3: timedtext.html
In this example, we are using the setTimeout function to clear the status bar when you move the mouse pointer over the hyperlink after three seconds.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function showInfo()
{
window.status="check this";
setTimeout("window.status=''",3000);
return true;
}
//-->
</script>
</head>
<body>
<a href="
onmousemove="showInfo();return true;">visit hotmail site</a>
</body>
</html>
Example 4: imageswap.html
Here we will present the idea of swapping images when the mouse moves over and out of a hyperlink.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<title>Untitled</title>
</head>
<body>
<a href="
onmouseover="lnkImage.src='image2.gif';return true;"
onmouseout="lnkImage.src='image1.gif';return true;"<img
src="image1.gif" alt="this image" width="50" height="20"
name="lnkImage" /</a>
</body>
</html>
Example 5: radiolink.html
In this example, we are making a form radio button as a link to another page
.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<title>Radio Buttons as a Link to Another Page</title>
</head>
<body>
<form<input type="radio" name="page" value="fourth page"
onclick="parent.location='imageswap.htm'" /> go to fourth
page.</form>
</body>
</html>
Using JavaScript to validate forms elements
When users have to fill some form online, some information must be in a specific format or some fields should not be blank. If the user will submit an incomplete form to the application on the server, that will process the form. The server must check the form and send it back to the user to be refilled again. This process is time consuming and still has a chance that the user will not submit the form in the required way.
The solution for such a problem is to use JavaScript code to validate the form in advance before sending it to the processing program on the server. With this technique, you can force the user to submit the required information or even submit the information in a specific format.
Example 1: formvalidate.html:
In the following example, we will build a form with some elements and try to validate these elements. If any of the fields is empty, a message will be prompted to the user to re-enter the required field. We are also using Learn a radio group that has four buttons. The last one has a text field to be filled in whenever it is selected. So if the user selects that radio button and doesn't fill in that field, a message will be prompted for him/her to fill in that field. Otherwise the user should not be able to type in this field when any other button is selected.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html xmlns="
<head>
<title>personal information form</title>
<script language="JavaScript" type="text/javascript">
<!--
function validate()
{
var person_name=document.myForm.person_name;
var email=document.myForm.email;
var phone=document.myForm.phone;
var specify=document.myForm.specify;
var group1=document.myForm.group1[3];
var nameval=person_name.value;
var emailval=email.value;
var phoneval=phone.value;
var specifyval=specify.value;
var groupval=group1.checked;
if(!check(nameval))
{
alert("please enter your name");
person_name.focus();
return false;
}
else if(!check(emailval))
{
alert("please enter your email ");
document.myForm.email.focus();
return false;
}
else if(!check(phoneval))
{
alert("please enter your phone number ");
phone.focus();
return false;
}
else if(groupval)
{
if(!check(specifyval))
{
alert("please specify others ");
specify.focus();
return false;
}
}
else
return true;
}
function check(fieldval)
{
if (fieldval.valueOf()==0)
return false;
else
return true;
}
//-->
</script>
</head>
<body bgcolor="#669999" text="#FFFFFF">
<form name="myForm" method="get" onsubmit="return validate();"
action="
<table border="0" width="100%">
<tr>
<td width="21%">
<p align="right">Name:</p>
</td>
<td width="79%"<select size="1" name="title">
<option selected="selected">Mr.</option>
<option>Ms.</option>
<option>Mss.</option>
</select> <input type="text" name="person_name" size="10"
maxlength="40" /> </td>
</tr>
<tr>
<td width="21%">
<p align="right">Email Address:</p>
</td>
<td width="79%"<input type="text" name="email" size="52" />
</td>
</tr>
<tr>
<td width="21%">
<p align="right">Phone Number:</p>
</td>
<td width="79%"<input type="text" name="phone" size="11"
maxlength="10" /> </td>
</tr>
<tr>
<td width="21%" valign="top" bgcolor="#47B899">
<p align="left">How did you heard about us?:</p>
</td>
<td width="79%" bgcolor="#47B899">
<table border="0" width="48%">
<tr>
<td width="35%">Friend <input type="radio" checked="checked"
value="friend" name="group1"
onclick="specify.disabled='true';specify.value='';return true;" />
</td>
<td width="35%">Internet<input type="radio" value="internet"
name="group1"
onclick="specify.disabled='true';specify.value='';return true;" />
</td>
<td width="35%">Newspaper<input type="radio" value="newspaper"
name="group1"
onclick="specify.disabled='true';specify.value='';return true;" />
</td>
<td width="35%" bordercolor="#0033CC">other<input type="radio"
value="other" name="group1"
onclick="specify.disabled='';specify.focus();return true;" /</td>
</tr>
</table>
<p>specify for others <input type="text" name="specify"
disabled="disabled" size="71" /</p>
</td>
</tr>
</table>
<p<input type="submit" value="Submit" /> <input type="reset"
value="Reset" /</p>
</form>
</body>
</html>
1