Scribd
Upload
18 views

UNIT-IV DHTML With Javascript

TD his document is for the java script document to use

Uploaded by

venkateswararao m
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
18 views

UNIT-IV DHTML With Javascript

TD his document is for the java script document to use

Uploaded by

venkateswararao m
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 16

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 ID’s 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

You might also like