UNIT-IV

(1)

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:

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:1:: 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>

function validateForm() {

var x=document.forms["myForm"]["fname"].value; if (x==null || x=="")

{

(2)

} </script> </head>

<body>

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:

<head>

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>

(3)

</body> </html>

Output:

******************************************************************************

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.

(4)

******************************************************************************

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

Example:

(5)

<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:

******************************************************************************

Frames in DHTML Definition

 HTML Frame used to split the browser window in several 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.

Disadvantages of Frames

 The web developer must be track of more HTML documents linked with main frame.

(6)

<frameset> tag Attributes

HTML <frameset> tag support following specific attributes.

Attribute s Value Description cols * % pixels

Specifies the number of columns and their width in a frameset. Default value is 100%.

*: Allocated remaining size of the window. Eg. Create two vertical frames, use cols="35%, *". Here * will takes remaining size of the window.

rows *

% pixels

Specifies the number of rows and their height in a frameset. Default value is 100%.

*: 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

frameborde r

0 1

Specify whether display a border or not.

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>

(7)

</head>

<h3 align="center">This Is Frame A</h3>

<a href="program1.html" target="output">Program1</href> <br><br><br>

<a href="program2.html" target="output">Program2</href> <br><br><br>

<a href="program3.html" target="output">Program3</href> </body>

</html>

Frame_b.html

<html>

<head>

<title>frame_b</title> </head>

<h1 align="center">This Is Frame B</h1> </body>

</html>

Program1.html

<html>

<head>

<title>Program1</title> </head>

<h1 align="center">This is Program1</h1> </body>

</html>

Program2.html

<html>

<head>

(8)

Program3.html

<html>

<head>

</html>

Output:

******************************************************************************

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.

 onmouseover is triggered when the mouse moves over an element

(9)

Some of the key features of rollover include:

 Enables interaction between the user and the Web page

 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>

<h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='green'"> JavaScript RollOver</h1>

<img src="js1.jpg" onmouseover="this.src='js2.jpg'"

onmouseout="this.src='js3.jpg'" height=200 width=300 border=1> </center>

</body> </html>

Output:

(10)

Moving Images in DHTML

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>

var imgObj = null; var animate ;

function init(){

imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative';

imgObj.style.left = '0px'; }

function moveRight(){

(11)

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>

</form>

</body> </html>

Output:

******************************************************************************

Events in DHTML

(12)

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:

• User interface events

• Mouse events

• Key events

• 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.

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.

Handle Mouse Events

(13)

Handle Key Events

Like the user interface events, key events fire in a predictable sequence. There are three main key events in HTML.

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>

(14)

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><br><br> Key Down: <input type="text" onKeyDown="fun1()"><br><br><br> Key Up: <input type="text" onKeyUp="fun2()"><br><br><br> </form>

</body> </html>