Session 13

Session 13

Introduction to DHTML

Objectives DHTML. Events.

Need for DHTML Static pages that are created using HTML

and CSS concentrate more on the presentation layout of the web page. These pages are not dynamic by nature. They are not updated.

Dynamic web pages are more attractive and sophisticated web pages. They provide the user with the updated content. In addition, can create a user interface that allows to display new content without downloading additional documents from web server.

DHTML DHTML provides an easy way for creating dynamic and

interactive web pages. It allows to create web pages that evaluates and responds to user inputs. Can add animation effects and generate a link to the database.

The HTML elements are automatically reformatted to display the visual affects and other dynamic changes. For every change that is carried out, DHTML does not reload or load the document again, but it carries out the changes at the user’s computer. Thus, the user does not have to wait to view the modifications.

DHTML composes of various web technologies that can be used together to generate more interactive web pages.

DHTML = CSS + JavaScript + DOM + HTML

DHTML features DHTML allows you to create interactive web pages without

having to compromise on its presentation. DHTML provides various features for effective development of dynamic web pages.

Some feature of DHTML:1. Dynamic style: Using style sheets, we can specify the

color, style or size of the page content. We can change the style of the page without having to return to web server reduce the time-consuming.

2. Dynamic content: We can change the contents of web page after they are displayed in response to user input or events like a mouse click.

3. Real-time positioning: We can specify the exact position (either absolute or relative), in terms of x and y co-ordinates. Once page is rendered, we can move the elements on the page, making it dynamic.

DHTML features…. Some feature of DHTML:

4. Font download: are a feature that allows us to insert our choice fonts in the web page. This is an important feature, because if the specified fonts are not available on the user’s machine, the browser defaults to available our fonts.

5. Dynamic binding: We can bind the table in the web page to a database. When the web page is loaded, the data from the database on the server is displayed in the table.

6. Scripting: We can write scripts to change the style and content of the web page. This script is inserted in the web page. The browser interprets the script whenever the page displayed.

DOM DHTML provides an object model that represents a

collection of elements that are used by the scripts to grammatically access and manipulate the web page. This object model is referred as Document Object Model (DOM). DHTML DOM refers the different elements contained within the web page as objects. It is a platform independent object model that allows the scripts to access the HTML and CSS elements.

DHTML DOM provides full support to events triggered by the user. This allows responding to user’s input and to generate better interactivity with much ease.

DHTML objects Every element contained within a web page is

referred as an object. The DHTML objects allow you to access and manipulate the element by using the different properties and methods.

Some of DHTML objects: a: specifies the beginning and end of a hypertext link. body: specifies the start and end of the body of the

document. div: divides a web page into multiple sections, where

each section can render other HTML elements. document: represents the entire HTML document. form: Specifies a container for other controls. frame: specifies a frame within a frameset. frameset: specifies a frameset that can hold multiple

frames. html: specifies the HTML elelements.

DHTML objects Some of DHTML objects:

img: specifies an image or video clip to be embedded in the document.

input: creates different form input controls. li: specifies a list item. link: specifies a link between the existing document and

external document. span: Specifies an inline element to apply styles to a part

of the text. table: specifies that the content should be displayed in a

table. td: specifies the data to be displayed in a table cell. tr: specifies a table row.

Event An event occurs when the user interacts with the

web page. Some of the commonly generated events are mouse clicks, key strokes, and so on.

The process of handling these events is known as event handling. Event handling is process of specifying actions to be performed when an event occurs. This is done by using an event handler.

The event handler is a scripting code or a function that defines the actions to be performed when the event triggered.

When an event occurs, an event handler function that is associated with the specific event is invoked.

Event Bubbling Event bubbling is a mechanism that allows

you to specify a common event handler for all child elements. This means that the parent element handles all events generated by the child elements.

Life circle of an event:1. The user performs an action to raise an

event.2. The event object is updated to

determine the event state.3. The event is fired.4. The event bubbling occurs as the event

bubbles through the elements of the hierarchy.

5. The event handler is invoked that performs the specified actions.

Keyboard Event Keyboard events are the events that occur

when a key or a combination of keys are pressed or released from a keyboard. Theses events occur for all keys of keyboard.

Some keyboard events: onKeyDown: Occurs when a key is pressed down. onKeyUp: Occurs when a key is released. onKeyPress: Occurs when a key is pressed and

released.

keyboard event - Demo

Demo: S13_KeyboardEvent.html

Mouse Event Mouse events are the events that occur when the

user uses mouse on the elements. Some mouse events:

onMouseDown: Occurs when the mouse button is pressed. onMousUp: Occurs when the mouse button is released. onMouseClick: Occurs when the mouse button is clicked. onDblClick: Occurs when the mouse button is double-

clicked. onMouseMove: Occurs when the mouse pointer is moved

from one location to other. onMouseOver: Occurs when the mouse pointer is moved

over element. onMouseOut: Occurs when the mouse pointer is moved

out of the element.

mouse event - Demo

Demo: S13_KeyboardEvent.html

onMouseOver

onClick

Focus and selection Event The focus events determine the activation of

various elements that use the INPUT element. It allows you to set or reset focus for different INPUT elements.

The selection events occur when an element is selected.

Some events: onFocus: Occurs when an element receives focus. onBlur: Occurs when an element loses the focus. onSelectStart: Occurs when the selection of an

element starts. onSelect: Occurs when the present selection changes. onDragStart: Occurs when the selected element is

moved.

mouse event - Demo

Demo: S13_KeyboardEvent.html

onFocus

Summary DHTML allows to create a dynamic web

pages. DHTML is combination a DOM, CSS, HTML

and Javascript. It provides a set of functionalities to handle

a user - generated event Some of the features of DHTML:

Dynamic style Dynamic contents Real-time positioning

Summary Event occur when the user interacts the

web page The process of handling these events is

known event – handling. Event – handling is a process of specifying

actions to be performed when an event occurs.