7.Dynamic HTML with Java Script Version2

(1)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist.,

7. Dynamic HTML with JavaScript

1. What is DHTML?

Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies

used together to create interactive and animated web sites by using a combination of a

static markup language (such as HTML), a client-side scripting language (such

as JavaScript), a presentation definition language (such as CSS), and the Document Object

Model (DOM).

2. Explain Data Validation in DHTML.

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 we require. It is not the process of ensuring that the data is any way

accurate.

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.

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

Ex:1Required Fields

The function below 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=="") {

alert("First name must be filled out");

(2)

}

//-->

</script>

</head>

<body>

<form name="myForm" action="demo_form.asp" onsubmit="return

validateForm()" method="post">

First name: <input type="text" name="fname">

</form>

</body>

</html>

Output:

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

<!--

function validateForm(){

var x=document.forms["myForm"]["email"].value;

(3)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., 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">

</form>

</body>

</html>

Output:

3. How to open 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

(4)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., The open() method opens a new browser window. The general format is

window.open(URL,name,specs,replace)

Parameter Description

URL Optional. Specifies the URL of the page to open. If no URL is specified, a _{new window with about:blank is opened}

Name

Optional. Specifies the target attribute or the name of the window. The

following values are supported:

name - The name of the window

Specs

Optional. A comma-separated list of items. The following values are

supported:

channelmode=yes|no|1|0 Whether or not to display the window in theater mode. Default is no. IE only

directories=yes|no|1|0 Whether or not to add directory buttons. Default is yes. IE only

fullscreen=yes|no|1|0 Whether or not to display the browser in screen mode. Default is no. A window in full-screen mode must also be in theater mode. IE only

height=pixels The height of the window. Min. value is 100 left=pixels The left position of the window

location=yes|no|1|0 Whether or not to display the address field. Default is yes

menubar=yes|no|1|0 Whether or not to display the menu bar. Default is yes

resizable=yes|no|1|0 Whether or not the window is resizable. Default is yes

scrollbars=yes|no|1|0 Whether or not to display scroll bars. Default is yes

status=yes|no|1|0 Whether or not to add a status bar. Default is yes titlebar=yes|no|1|0 Whether or not to display the title bar. Ignored

unless the calling application is an HTML Application or a trusted dialog box. Default is yes

toolbar=yes|no|1|0 Whether or not to display the browser toolbar. Default is yes

top=pixels The top position of the window. IE only width=pixels The width of the window. Min. value is 100

Replace

Optional. Specifies whether the URL creates a new entry or replaces the

(5)

4. Explain Message passing in DHTML (JavaScript).

JavaScript provides three types of built-in window types that can be used from

application code. These are useful when we need information from visitors to our site.

a. prompt() Method:

The prompt() method displays a dialog box that prompts the visitor for input. This

method returns the string the visitor has entered. The general format is

prompt(msg,defaultText)

Parameter Description

msg Required. The message to display in the dialog box

defaultText Optional. The default input value

Ex: Display a prompt box which asks the user for her/his name, and then write a greeting to

the page:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to demonstrate the prompt box.</p>

<!--

function myFunction(){

var x;

var person=prompt("Please enter your name","Harry Potter");

if (person!=null) {

x="Hello " + person + "! How are you today?";

document.write(x);

}

//-->

</script>

</body>

(6)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., Output:

b. confirm() Method:

The confirm() method displays a dialog box with a specified message, along with an

OK and a Cancel button. This method returns true if the visitor clicked "OK", and false

otherwise. The general format is

confirm(message);

Ex: Display a confirm box, and alert what the visitor clicked:

<!DOCTYPE html>

<html>

<body>

<p>Click the button to display a confirm box.</p>

<!--

var x;

var r=confirm("Press a button!");

if (r==true) {

x="You pressed OK!";

}

else {

x="You pressed Cancel!";

}

document.write(x);

(7)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., //-->

</script>

</body>

</html>

Output:

c. alert() Method:

An alert box is often used if you want to make sure information comes through to the

user. When an alert box pops up, the user will have to click "OK" to proceed. The general

format is

window.alert("sometext");

Ex: The window.alert method can be written without the window prefix.

<!DOCTYPE html>

<html>

<head>

<!--

alert("I am an alert box!");

}

</script>

</head>

<body>

</body>

(8)

5. How to 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

Ex:

<!DOCTYPE html>

<html>

<body>

<!--

window.status="Some text in the status bar!!";

//-->

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

(9)

6. Explain Frames in DHTML.

When the page is initially loaded we can display the form in the upper window and an

empty HTML page in the lower window. It is better to use a simple empty page in the bottom

frame to be totally browser-friendly. The code for the frameset is

<html>

<head>

<title>Color Picker</title>

</head>

</frameset>

</html>

Code for the empty frame:

<html>

<head>

</head>

<body>

</body>

</html>

The top frame from the file cols.html is simple. When the frames were created they

were given the names topone and botone. The script is part of the document that is being

displayed in frame topone and botone. The script is part of the document that is being

displayed in frame topone and is going to create a document to be displayed in frame botone.

(10)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., The following diagram describes the color picker structure:

Each frame is a part of the main window and contains a single document. Each frame

has a unique name and we can use that name to write to, or read from, those documents.

7. Write about Rollover Buttons.

The most common usage of dynamic HTML is the image rollover. The technique is

used to give visual feedback about the location of the mouse cursor by changing the images

on the page as the mouse moves over them. This is a highly effective technique, especially

where images are used as the hyperlinks in a menu or where an image map is being used.

The JavaScript code does not directly manipulate the image. If we need to change the

(11)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., rollover is simpler because it uses two image files which it swaps between as the mouse is

moved.

Ex:

One image is created for the inactive static when the mouse is not over it. A second

image is created for the active state when the mouse cursor is placed over it.

1. The onload event happens when the page is first loaded into the browser.

2. OnMouseover calls a JavaScript function when the cursor passes over the image.

3. OnMouseOut calls a function when the cursor moves away from the image.

8. Write about Moving Images.

Images (layers) can around repeatedly but doing so takes up processor cycles. It is

more user-friendly, if our images only move for a restricted amount of time such as when the

page is first loaded (or) when the user specifically triggers the event.

Each layer can be positioned on the screen by changing the offset of the top left

corner of the layer. The HTML code creates a division of the page named logo and positioned

at pixel 5,100. The layer must be positioned absolutely so that the browser does not mess up

the look of the page and must be visible. The sole content of this division is an image:

<div id=”logo” style=”top: 5; z-index: 4; left: 1000; visibility: visible; position:

absolute;”>

</div>

Use a division to place the image rather than a Netscape-specific layer. If we want

create a browser-neural version then modify the code using the techniques.

var count=0;

function FlyLogo(){

if(count < 5){

(12)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., count++;

document.layers[“logo”].left = 1000;

}

document.layers[“logo”].left - = 10;

setTimeout(‘FlyLogo()’, 200);

}

else

document.layers[“logo”].left=200;

}

When the function is called it checks the counter to make sure that it should run. If the

counter is equal to 5 then the left edge of the logo is placed at pixel 200 and no more

processing is performed by this routine.

If the counter is less than 5, the layer containing the logo will be moved. If the left

hand side of the layer is at pixel 200 then the image has finished moving across the screen.

The counter is incremented and the layer is repositioned to pixel 1000. However, if the edge

of the logo is not at position 200 is repositioned 10 pixels to the left of its current location.

The FlyLogo() routine then calls itself using the built-in setTimeOut() call. This takes

the name of the function and a delay in milliseconds. It will not run the routine until after the

delay has eased. In this case over image moves 10 pixels left every 200 ms.

9. Explain Multiple Pages in a single download.

DHTML opens up some interesting possibilities but rarely used is having several

pages in a single download. Instead of using a separate file for each page, why not place each

page of content in a separate layer and switch between those layers? This technique will not

work if the layers have too much content or too many images.

Ex: The stylesheet for multiple pages is a single download: Open a new file in Notepad and

type the following STYLES code:

.SWITCH{

font-size: 20pt;

font-family: Arial, Helvitica, "Sans Serief";

color: ultramarine;

background: wheat;

(13)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., .OVER{

font-size: 20pt;

font-family: Arial,Helvitica, "Sans Serief";

font-style: italic;

font-weight: bold;

}

a:link, a:visited, a:active{

text-decoration:none;

}

p{

font-family: "Times New Roman", times, serief;

font-size: 12pt;

color:purple;

text-align: justify;

margin-left: 10%;

}

h1{

font-size: 16pt;

color:teal;

text-decoration: underline;

text-align: center;

}

*** Save the file as styles.css

Open a new file in Notepad and type the following HTML Page code:

<html>

<head>

</script>

</head>

(14)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., <div id="menua" style="top: 5; left: 5; visibility:visible; position: absolute;

z-index: 5>

<a href="#" onClick="ChangeLayer(2)">Three</a></p>

</div>

<div id="content0" style="top: 40; left: 0; visisibility: visible; position:

absolute;">

<h1>A test header</h1>

<hr>

</div>

<div id="content1" style="top: 40; left: 0; visibility: hidden; position:

absolute;>

<h1>Another Test header</h1>

<hr>

</div>

<div id="content2" style="top: 40; left: 0; visibility:hidden; position:

absolute;">

<h1>Yet another test header</h1>

<hr>

</div>

</body>

</html>

***Save the above file as djs10.html

Open a new file and type the following JavaScript code:

var active=0;

var browser;

(15)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., browser=new BrowserObj();

}

function BrowserObj(){

this.navigator=0;

this.explorer=0;

this.other=0;

if((navigator.appName.toLowerCase()).indexOf("netscape") >= 0)

this.explorer=1;

else

this.other=1;

}

this.major=parseInt(navigator.appVersion)

this.minor=parseFloat(navigator.appVersion)

}

function ChangeLayer(now){

if(browser.navigator){

document.layers["content" + active].visibility="hide";

document.layers["content" + now].visibility="show";

active=now;

}

else{

var current=document.all("content" + active).style;

var next=document.all("content" + now).style;

current.visibility="hidden";

next.visibility="visible";

active=now;

}

(16)

The page contains four divisions or layers. The first is a menu layer which holds three

hyperlinks. Each hyperlink points to the dummy page #, so that the browser does not attempt

an unwanted page load.

The other three layers are all content holders. These layers positioned at 40 pixels

from the top of the screen. Only one layer is visible, the other layers are hidden. If more than

one of these layers is visible, then the content of both will display at the same time, which is

obviously not ideal.

10. Write about text-only menu system.

In my text-only menu system, the HTML page has four divisions. The main one is

menu which was displayed when menu is inactive. It contains a paragraph; in the paragraph

there are three hyperlinks which go nowhere. Each hyperlink is a piece of text and they are

links the onmouseover and onmouseoff event. These events are tied to the link rather than to

an image. The remaining three are hidden. As the mouse moves over the menu, these layers

will be made visible and hidden. Each submenu is identical to the main menu. Each has one

item and is formatted differently. Here is the sample code:

Open a new file in Notepad and type the following HTML page code:

<html>

<head>

</script>

</head>

(17)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., <div id="menua" style="top: 5; left:5; visibility: visible; position:

absolute; z-index: 5;">

<a href="#" onMouseOVer="Highlight(0)"

onMouseOut="UnHighlight(0)">One</a>

onMouseOut="UnHighlight(1)">Two</a>

onMouseOut="UnHighlight(2)">Three</a>

</div>

<div id="menu0b" style="top:5; left: 5; visibility:hidden;

position:absolute; z-index: 5;">

</span>

<a href="#">Three</a>

</div>

</span>

</div>

(18)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., <a href="#">Two</a>

</span>

</div>

</body>

</html>

The JavaScript: Open a new file in Notepad and type the following code:

var active=0;

function Highlight(id){

document.layers["menua"].visibility="hide";

document.layers["menu" + id + "b"].visibility="show";

}

function UnHighlight(id){

document.layers["menu" + id + "b"].visibility="hide";

document.layers["menua"].visibility="show";

}

Save the above file as menu.js

Output:

The HTML page has FOUR divisions:

1. The main one is menua which will be displayed when the menu is inactive. It consists

three hyper links. Each hyperlink is a piece of text and they are links to the onMouseOver

and onMouseOff events.

2. The remaining three layers are all hidden. As the mouse moves over the menu these layers

will be made visible and hidden.

A different class of formatting is applied to the items using <span>…</span> tag.

(19)

11. Write about Floating Logos.

We can put up a logo on the website in such a way that it floats on the page in any

particular location that can be set. The following example explains the use of floating logos:

Ex: 1 Try resizing the window to see what happens when the images does not have enough

room.

<!DOCTYPE html>

<html>

<head>

<style>

<!--

.thumbnail{

float:left;

width:110px;

height:90px;

margin:5px;

}

//-->

</style>

</head>

<body>

<h3>Image Gallery</h3>

<p>Try resizing the window to see what happens when the images does not have

enough room.</p>

(20)

Ex:2 The following example given in the prescribed Text Book.

The HTML Page: This page consist two layers.

<html>

<head>

</script>

</head>

<p>Dynamic HTML, or DHTML, is an umbrella term for a collection of

technologies used together to create interactive and animated web sites by using a

combination of a static markup language (such as HTML), a client-side scripting

language (such as JavaScript), a presentation

definition language (such as CSS), and the Document Object Model (DOM).

We can put up a logo on the website in such a way that it floats on the page in any

particular location that can be set. </p>

</div>

<div id="lay10" style="visibility: visible; postion: absolute; font-size: 20pt;

background: aquamarine; color:purple; text-algn:left;">

(21)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., </body>

</html>

The JavaScript: Open a new file in Notepad and enter the following code:

var brows;

var orig_width;

var orig_height;

var px;

var py;

function Init(){

brows=new BrowserObj();

if((brows.major<4)||(brows.ohter))

alert("Only works with version 4 browsers");

else{

if(brows.navigator){

orig_height=window.innerHeight;

orig_width=document.innerWidth;

}

else{

orig_height=document.body.client.Height;

orig_width=document.body.clientWidth;

}

setupEvents();

positionLogo();

}

function BrowserObj(){

this.navigator=0;

this.explaorer=0;

this.other=0;

if((navigator.appName.toLowerCase()).indexOf("netscape")>=0) this.navigator=1;

else{

(22)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., this.explorer=1;

else

this.other=1; }

}

function postionLogo(){ if(brows.naviagtor){

var height=window.innerHeight+py; var width=window.innerWidth+px; }

else{

var height=orig_height; var width=orig_width; }

var wide=120; //logo width var high=50;m //logo height var top=height;

var left=width-wide; if(brows.navigator)

document.layers["lay10"].moveTo(left,top); else{

document.all("lay10").style.left=left; document.all("lay10").style.top=top; }

}

function SetupEvents(){ if(brows.navigator)

setInterval("Reposiiton()",200);

else{

window.onresize=new Function("Reposition()");

window.onscroll=new Function("Reposition()");

}

function Reposition(){ if(brows.navigator){

px=window.pageXOffset; py=window.pageYOffset;

if((orig_width != window.innerWidth) || (orig_height != window.innerHeight)){

(23)

Written by Dept. of Computer Science @ Dr. BVRICE Bhimavaram W.G. Dist., }

} else{

px=document.body.clientWidth; py=document.body.clientHeight; var w2=document.body.scrollLeft; var h2=document.body.scrollTop; orig_width=px+w2;

orig_heightpy+h2; }

positionLogo(); }

** setupEvents(): After sniffing out the browser the script runs the SetupEvents() function.

This tells the browser what do when certain events happen.

PositionLogo(): This function keeps the logo in the specified position.

Reposition(): The function starts by setting the vertical and horizontal offsets. If the page

has not been scrolled, these will remain at 0.

Output: