Page No:-93
UNIT IV::DHTML WITH JAVASCRIPT
Data validation, opening a new window, messages and confirmations, the status bar, different
frames, rollover buttons, moving images
Data Validation
Validation is simply the process of ensuring that some data might be correct data
for a particular application. Data validation is the process of ensuring that users
submit only the set of characters which you require.
A common technique for restricting access to a site is to check user IDs against a
file of valid users.
Generally the RegExp are used to validate the data.
The Regular expression which checks that any name entered by users only has
allowable characters in it.
If a program accepts the data from a remote data logger and that input is always going to be in
a particular range, then the program knows that data outside the range is valid and should not
be accepted.
Example: 1
The following example has two text fields. One accepts names, the other accepts age. Both
fields are validated using regular expressions and if the date is valid the contents of the form
are transmitted in an email message.
Example:2:: Required Fields
The below function checks if a field has been left empty. If the field is blank, an alert box
alerts a message, the function returns false, and the form will not be submitted:
<!DOCTYPE html>
<html>
<head>
<script>
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-94
function validateForm()
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
alert("First name must be filled out");
return false;
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()"
method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Example:2 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 a @ sign and at least one dot (.). Also, the @ must not be the
first character of the email address, and the last dot must be present after the @ sign, and
minimum 2 characters before the end:
<!DOCTYPE html>
<html>
<head>
<script>
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-95
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return
validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
******************************************************************************
Q). Opening a new Window
The Window Object:
The window object represents an open window in a browser. If a document contain
frames (<frame> or <iframe> tags), the browser creates one window object for the HTML
document, and one additional window object for each frame.
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-96
The open() method opens a new browser window. The general format is
window.open(URL,name,specs,replace);
******************************************************************************
Q). Display a message on Status Bar
The status property sets or returns the text in the status bar at the bottom of the
browser. The general format is
window.status (here window is a keyword)
Example:
<!DOCTYPE html>
<html>
<body>
<script>
window.status="Some text in the status bar!!";
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-97
</script>
<p>Look at the text in the statusbar.</p>
<p>Note: This property does not work in default configuration of IE, Firefox,
and some other browsers!</p>
</body>
</html>
Output:
******************************************************************************
Q). Frames in DHTML
Definition
HTML Frame used to split the browser window in multiple individual frames that can contain
a separate HTML web document.
Frame is use to improve appearance and usability of a site.
HTML document within frame include a other web pages link can be opened in the desired
frame.
Advantages of Frames
Frame Provides technical sophisticated appearance to the web site.
It facility to reduce downloading time and improves the usability of the website.
Frames generally include navigation link, header or footers, which help user to find and
navigate to required information.
It separates content of website from navigation elements, which is useful for website
maintenance and content modification.
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-98
Disadvantages of Frames
The web developer must be track of more HTML documents linked with main frame.
It is difficult to print the entire page, which is developed using frame.
<frameset> tag Attributes
HTML <frameset> tag support following specific attributes.
Attributes Value Description
cols * Specifies the number of columns and their width in a frameset.
% Default value is 100%.
pixels *: Allocated remaining size of the window. Eg. Create two vertical
frames, use cols="35%, *". Here * will takes remaining size of
the window.
rows * Specifies the number of rows and their height in a frameset.
% Default value is 100%.
pixels *: Allocated remaining size of the window. Eg. Create two
horizontal frames, use cols="40%, *". Here * will takes
remaining size of the window.
<frame> tag Attributes
HTML <frame> tag support following specific attributes.
Attributes Value Description
frameborder 0 Specify whether display a border or not.
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-99
name name Specify the frame name.
src url Specify web document URL to show in a frame.
The following program explains how to use the frames in DHTML
Frames.html
<html>
<frameset cols="15%,85%">
<frame src="frame_a.html" name="list">
<frame src="frame_b.html" name="output">
</frameset>
</html>
Frame_a.html
<html>
<head>
<title>Frames</title>
</head>
<body bgcolor="#ccfff5">
<h3 align="center">This Is Frame A</h3>
<a href="program1.html" target="output">Program1</href><br>
<a href="program2.html" target="output">Program2</href><br>
<a href="program3.html" target="output">Program3</href>
</body>
</html>
Frame_b.html
<html>
<head>
<title>frame_b</title>
</head>
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-100
<body bgcolor="#ffcc99">
<h1 align="center">This Is Frame B</h1>
</body>
</html>
Program1.html
<html>
<head>
<title>Program1</title>
</head>
<body bgcolor="#99e6ff">
<h1 align="center">This is Program1</h1>
</body>
</html>
Program2.html
<html>
<head>
<title>Program2</title>
</head>
<body bgcolor="#ff80aa">
<h1 align="center">This is Program2</h1>
</body>
</html>
Program3.html
<html>
<head>
<title>Program3</title>
</head>
<body bgcolor="#ffffcc">
<h1 align="center">This is Program3</h1>
</body>
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-101
</html>
Output:
******************************************************************************
Q). Rollover Buttons in DHTML
Rollover is a JavaScript technique used by Web developers to produce an effect in
which the appearance of a graphical image changes when the user rolls the mouse pointer
over it.
Rollover also refers to a button on a Web page that allows interactivity between the
user and the Web page. It causes the button to react by either replacing the source image
at the button with another image or redirecting it to a different Web page.
Rollover is triggered when the mouse moves over the primary image, causing the
secondary image to appear. The primary image reappears when the mouse is moved away.
Occasionally, rollover is referred to as synonym for mouseover.
On many web pages, javascript rollovers are handled by adding an onmouseover and
onmouseout event on images.
1. onmouseover is triggered when the mouse moves over an element
2. onmouseout is triggered when the mouse moves away from the element
Some of the key features of rollover include:
Enables interaction between the user and the Web page
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-102
Makes an image appear or disappear when the mouse is moved over it
Makes a hidden image or element to appear when the mouse is moved over it
Makes an element of the page change the color of the entire Web page when the mouse is
moved over it
Causes text to pop up or become highlighted with bold colors when the mouse is moved on
a text element.
Example:
<html>
<body>
<center>
<h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='green'">
JavaScript RollOver</h1>
<img src="C:/Pictures/myhand.jpg" onmouseover="this.src='C:/Pictures/cars.jpg'"
onmouseout="this.src='C:/Pictures/cars2.jpg'" height=200 width=300 border=1>
</center>
</body>
</html>
Output:
******************************************************************************
Q). Moving Images in DHTML
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-103
JavaScript can be used to move a number of DOM elements (<img />, <div> or any
other HTML element) around the page according to some sort of pattern determined by a
logical equation or function.
JavaScript provides the following three functions to be frequently used in animation
programs.
setTimeout( function, duration)
This function calls functionafter duration milliseconds from now.
setInterval(function, duration)
This function calls function after every duration milliseconds.
clearTimeout(setTimeout_variable)
This function calls clears any timer set by the setTimeout() functions.
JavaScript can also set a number of attributes of a DOM object including its position on
the screen. We can set top and left attribute of an object to position it anywhere on the
screen. Here is its syntax.
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
OR
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;
Example:
<html>
<head>
<title>JavaScript Animation</title>
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-104
<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 200msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-105
</html>
Output:
******************************************************************************
Q). Events in DHTML
An event is defined as something that takes place and that is exactly what it means
in web programming as well. An event handler is JavaScript code that is designed to run
each time a particular event occurs.
The Syntax of handling the events is
<Tag Attributes event=handler>
Example:
Click on mouse button
Pressing a keyboard key
Selecting a menu item
Categories of events
Events fall into four major categories:
a) User interface events
b) Mouse events
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-106
c) Key events
d) HTML events
User interface events happen as controls or other objects on a web page gain and lose
focus. These events are often caused by other user actions such as a tab key press. They
can also happen programmatically as well.
Mouse events occur when the user moves the mouse or presses one of the mouse buttons.
These events allow a web page to respond to mouse movements by.
Key events occur when the user presses and/or releases one of the keyboard keys. Only
certain HTML elements can capture keyboard events.
Finally, there are several events specific to certain HTML elements. They often relate
to the browser window itself or to form controls and other objects embedded in a web page.
a) Handle User interface events
User interface events deal exclusively with the transfer of focus from one object inside
the web page to another. There are three user interface events defined in most web
browsers.
• onBlur: Fires when we leave from the control.
• onFocus: Fires when we place focus on some control.
• onActivate: Fires when we activate the control.
b) Handle Mouse Events
JavaScript programs have the ability to track mouse movement and button clicks as
they relate to the web page and controls inside.
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-107
c) Handle Key Events
Like the user interface events, key events fire in a predictable sequence. There are
three main key events in HTML.
d) Handle HTML Events
An HTML event means any events that do not belong in the user interface, mouse, or
key event categories. Some HTML events are triggered directly by a user action, while others
are fired only as an indirect result of a user action.
Example on Key Events
<html>
<head>
<title>Demo on Key events</title>
</head>
<script language="javascript">
function fun()
{
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
Page No:-108
alert("This is Key Press");
}
function fun1()
{
alert("This is Key Down");
}
function fun2()
{
alert("This is Key Up");
}
</script>
<body>
<form>
Key Press: <input type="text" onKeyPress="fun()"><br>
Key Down: <input type="text" onKeyDown="fun1()"><br>
Key Up: <input type="text" onKeyUp="fun2()"><br>
</form>
</body>
</html>
Output:
Prepared By: M.VENKAT (MCA, M-Tech) Lecturer in Computer Science
