dhtml notes.docx

Notes for Web Technology on the basis of GGSIPU BCA Syllabus

DHTML

Once a web server processes a web page and sends it to the computer requesting it (called the 'Client' computer) it cannot get any more data from the server unless a new request is made. So to move around this drawback we use Dynamic HTML (DHTML) which is combining HTML and a scripting language that runs on the Client's browser to bring special effects to otherwise static pages. The scripting language that we will be using is JavaScript as most browsers support it. The scripting language can be used to alter HTML data shown (or present but hidden) on the current page by manipulating the properties for the HTML tags involved.

Dynamic HTML" is typically used to describe the combination of HTML, style sheets and scripts that allows documents to be animated. Dynamic HTML allows a web page to change after it's loaded into the browser - there doesn't have to be any communication with the web server for an update. You can think of it as 'animated' HTML. For example, a piece of text can change from one size or color to another, or a graphic can move from one location to another, in response to some kind of user action, such as clicking a

button. It is a browser feature that allows your browser (Netscape Navigator 4.x orhigher, or Microsoft Internet Explorer 4.x or higher) to be dynamic. A “dynamic” browser can alter a Web page’s look after the document has loaded.

Dynamic (relative to Web) refers to:

Web pages that respond to user requests through buttons or other types of controls

Various types of effects such as animation that appear automatically in a Web browser

Advantages of DHTML

(1) DHTML makes documents dynamic. Dynamic documents :

Allow the designer to control how the HTML displays Web pages’content.

React and change with the actions of the visitor.

Can exactly position any element in the window, and change thatposition after the document has loaded.

By Savleen Kaur, Assistant Professor IITM-JP, GGSIPU New Delhi Page | 1


Can hide and show content as needed.

(2) DHTML allows any HTML element(any object on the screen that can be controlled independently using JavaScript) in Internet Explorer to be manipulated at any time, turning plain HTML into dynamic HTML.

(3) With DHTML, changes occur entirely on the client-side( on the user’s browser).

(4) Using DHTML gives the author more control over how the page is formatted and how content is positioned on the page.

Components of DHTML

Dynamic HTML includes the following components:

Conventional HTML

Scripts– Small programs designed to manipulate Web pages.

Document Object Model (DOM) – The road map through which you can locate any element in an HTML document and use a scripting language, such as JavaScript, to change the element’s properties.

Absolute Positioning – The elements on the page are placed in a fixed location, as opposed to relative positioning, in which an element’s location is relative to particular elements on the page.

Multimedia filters –Multimedia features that create visual effects for text, images, and other objects, without imposing long download times on the user.

Note: Conventional HTML and Scripts component of DHML are already covered.



The Document Object Model (DOM)

What is the DOM?

The DOM is like a roadmap of your Web page. You describe a path that leads

from the HTML document down to the various elements on the page. The DOM for an image called button1 would be: document.images.button1.

The Document Object Model was created with these four goals in mind:

To delineate a hierarchical structure representing all parts of a Web document. To allow the modification of that structure through adding and removing content. To provide a way to monitor and manipulate the characteristics of content on the page. To provide information about how the items on a page interrelate with the user and each other

What Does the DOM Allow us to Do?

The Web page author can connect any element on the screen to a JavaScript. He or she can use scripts to control everything on the page and to change virtually anything at any time.

Some examples of effects the designer can create using the DOM with script:

o A button’s image changes when the user passes the mouse over it.

o The user can drag text or images around on a page.

o Some of the items on a page mover around without user interaction and end up

positioned exactly where the author wants them.

o When the user positions the mouse over an image, text appears.

o The Web page author can change the formatting of text, graphics, and tables on

the fly.



o Parts of the page are dynamically created or destroyed as they appear on the screen

How the DOM works?

The DOM works by tracing a path from the script down to the individual elements

to be acted upon with the HTML document. The steps in this hierarchy are:

window

(parent)

(frame)

document

ID

image

link

anchor

form

Components of the DOM

The DOM is comprised of these components:

Objects – The object is the basic unit of the DOM. Every element on the page is

part of the DOM. Text and images are examples of objects. A table would be a

parent object; its cells would be children of the table. A form named “MyForm”

could be referred to as: <FORM NAME=”MyForm”>

Properties – Properties are adjectives that describe parts of the Web page. Examples could include height, width, color, and size. If a



cell border is two pixels wide, its width property would be referenced as:

WIDTH=5.

Events – An event is an action or occurrence of a Web page. When an event

occurs on a page, the item that received the event notifies the DOM that the event

has occurred. This is called firing the event. An event is trapped, or handled, if a

script is present that responds to the firing of that event. The script is called an

event handler. Some examples of events:

o onMouseDown – Fired when the user presses the mouse button.

o onMouseOver – Fired when the user positions the mouse pointer over an object.

o onMouseOut - Fired when the user moves the mouse pointer outside the

boundaries of an object.

o onKeyPress – Fired when the user presses a key.

o onFocus – Fired when the object receives the focus.

o onClick – Fired when the mouse button is clicked over an area

Methods – They describe the actions an object can take. For example, the open

method directs the window to open a new browser window. Other examples are

focus, Run, and reload

Collections – Collections are lists of items that are associated with a particular

object. For example, the collection name images is a list of all image objects.



Properties of DOM:

1) innerHTML- it lets you change the content of elements between the start tag and the end tag; treats text as HTML.

2) innerText- it lets you change the text between the start and the end tag.3) outerText- it lets you change all the text including the start and the end tags.4) outerHTML- it lets you change the content of an element including the start and end tags; treats

text as HTML.

Example of the properties:

innerText and innerHTML:

<html><head><script>

function changeheading()

{header.innerText="this is new heading 1";}

function changeHeading2()

{header.innerHTML="<br><br><pre> Hello</pre>"}

</script></head>

<body>

<h1 id=header onclick="changeheading()" onmouseout="changeHeading2()">this is heading 1</h1></body></html>

outerHTML:


function changeheader()

{

header.outerHTML="<br><br><pre> Hello</pre>";



}</script></head>

<body>

<h1 id=header onclick=changeheader()>Dynamic HTML</h1>

</body></html>

Positioning:

CSS introduces the position property to have greater control over the display of the Web documents. There are two ways of defining the position of elements. These are:

Absolute Positioning Relative Positioning

Absolute Positioning:

<img src=”abc.gif” style=”position:absolute;top:0px;left:0px;z-index:1”>

The above statement positions the img element on the page. On specifying the position attributes as absolute removes it from the normal flow of elements on the page and positions the element according to its distance from top,left,right or bottom margins of its parent element. The z-index attribute is used to layer the overlapping elements. Elements that have higher z-index value are displayed in the front of elements with lower z-index values. The following example shows how the element can be positioned.

<body>

<img src="file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Blue%20hills.jpg" width="50" height="50" style="position:relative;top:20px;border-width:thick;left:30px;z-index:2">

<h2 style="position:absolute;top:20px;left:30px;z-index:3">Hello this is a heading</h2>



</body>

Relative Positioning:

In relative positioning the elements are specified based on its natural flow in the document. For example: if a paragraph falls 10pixels below a heading, and you specify, the paragraph to be “top:10px”, it will end up20pixels below heading. The code below illustrates how relative positioning can be implemented.

<body>

<img src="file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Blue%20hills.jpg" width="50" height="50" style="position:relative;top:20px;border-width:thick;left:30px;z-index:2">

<h2 style="position:relative;top:20px;left:30px;z-index:3">Hello this is a heading</h2>

</body>

Event Handling in DHTML

One of the keys to create a dynamic pages is the use of the event handlers. These event handler allow to execute the specific script code in response to user or system initiated actions. The DOM provides the methods for capturing events so that you can perform your own actions in response to them. It also provides an event object which contains information specific to a given event that can be used by an event processing code.

Event bubbling – (supported only in Internet Explorer) – When an object fires an

event, it also notifies its parent object that the event has occurred. The event

continues to travel, or “bubble,” up the hierarchy until it reaches the top or the

bubbling action is cancelled.

Events are :

onmouseDown – Fired when the user presses the mouse button.

onmouseOver – Fired when the user positions the mouse pointer over an object. onmouseout - Fired when the user moves the mouse pointer outside the



boundaries of an object.

onkeypress – Fired when the user presses a key.

onfocus – Fired when the object receives the focus.

onclick – Fired when the mouse button is clicked over an area.

onblur- occurs when the element loses the focus.

ondblclick- occurs when an element is double clicked.

onkeyup- Occurs when your key goes up.

Examples of Events are:

OnMouseEffect

<body>

<img src="file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Winter.jpg" onmouseover="this.src='file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Blue%20hills.jpg'" onmouseout="this.src='file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Winter.jpg'"></body></html>

Onblur:


function myFunction(x)

{x.value=x.value.toUpperCase();

document.write(x.value);}

</script></head><body>

Enter your name: <input type="text" onblur="myFunction(this)">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p></body></html>

Ondblclick





function Button1(event)

{alert(event.keyCode);}

</script></head>

<body onkeyup="Button1(event)">

<p><b>Note:</b> Make sure the right frame has focus when trying this example!</p>

<p>Press a key on your keyboard. An alert box will alert the keycode of the key.</p></body>

</html>

Filters

Microsoft-specific DHTML uses visual filters and dynamic CSS. Visual filterslet you perform visual effects on graphics and text on a Web page. Dynamic CSS enables you to change the visual appearance as well as the position of elements on the screen. Visual filters modify the appearance of the content of an object.

Types of Filters:

1) Flipv & Fliph Filter: This filter is used to create a mirror effect by flipping the content vertically and horizontally respectively.

Example:

<html><head><title>Filters-flipV</title></head>

<body><div>The text is turned upside down</div><br><br><br>

<div style="position:absolute;filter:fliph;font-family:jokerman;color:green">

The text is turned upside down </div><br><br>

<div style="position:absolute;filter:flipv;">The text is turned upside down</div></body></html>



2) Glow Filter: This filter is used to glow the text by giving a colour impact to the content. Strength parameter is used to increase or decrease glow effect.

Example:

<body>

<div style="position:absolute; filter:glow(strength=6,color=red);">

Hello There</div></body>

3) Invert Filter: Negative image effect. Dark areas become light and light areas become dark.

4) Gray Filter: Grayscale image effect. All color is stripped from the image, only brightness data remains

5) Xray Filter: Inversion of the grayscale effect.

Example:

<head> <title>Misc. Image filters</title> </head>

<body>

<table border=1>

<tr><td>Normal</td> <td>Grayscale</td> </tr>

<tr><td><img src = "file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Sunset.jpg" alt = "normal scenic view" /></td>



<td><img src = "file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Sunset.jpg" style = "filter: gray" alt = "gray scenic view"/> </td> </tr>

<tr><td>Xray</td> <td>Invert</td> </tr>

<tr>

<td><img src = "file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Water%20lilies.jpg" style = "filter: xray"

alt = "xray scenic view"/>

</td>

<td><img src = "file:///C:/Documents%20and%20Settings/All%20Users/Documents/My%20Pictures/Sample%20Pictures/Water%20lilies.jpg" style = "filter: invert"

alt = "inverted scenic view"/>

</td> </tr></table> </body></html>

6) Shadow Filter: Create a shadow effect through the color and direction parameters. Greater the value of direction lesser will be the shadow effect

Example:

<H1 STYLE="POSITION:ABSOLUTE; FILTER:SHADOW(DIRECTION=1, COLOR=GREEN);">SHADOW EFFECT</H1>

7) Wave filter: It allows user to apply sine-wave distortions to text and images on Web pages. Parameters are:Add- Adds a copy of the text or image underneath the filtered effect

Freq-Determines the frequency of the wave applied



phase -Indicates the phase shift of the wave

Example:

<body>

<h2 style="position:absolute; filter:wave(add=0,phase=0,freq=4,strength=4);">Wassup</h2>

</div></body>

8) Mask Filter: To create a masking effect.Example:

</body><div><h1 style="position:absolute; top:125; left:20; filter:mask(color=blue);">Heyyuoo</h1></div></body>

Transition:

Transitions are used to give power point effects to the content of the web page. Transitions are set as values of the filter property just as filters.

There are two types of Transitions:

Blend Trans- it is used to give fade in fade out effect to the content. Reveal Trans- it is used to apply 24 power point effects.

Both the transitions make use of some predefined functions. Those are:



1) start()- It is used to initiate the transition.

2) apply()- to apply the particular transition to the content.

2) run()- to execute the transition effect successfully.

Examples of transition:

Reveal


function start()

{

htext.filters.revealTrans.apply();

htext.innerText="after the transition effect";

htext.filters.revealTrans.play();

}

</script></head>

<body>

<h2 id="htext" style="width:400px; height=200px; filter:revealTrans(duration=5.000,transition=09)" onclick="start()">

Example of reveal trans

</h2></body></html>



Blend


function start()

{

htext.filters.blendTrans.apply();

htext.innerText="after the transition effect";

htext.filters.blendTrans.play();

}


<h2 id="htext" style="width:400px; height=200px; filter:blendTrans(duration=2.000)" onclick="start()">

Example of blend trans

</h2></body></html>
