13. session 13 introduction to dhtml

Introduction to DHTML
Session 13

Session 13

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

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

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.

13. session 13 introduction to dhtml

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to 13. session 13 introduction to dhtml (20)

More from Phúc Đỗ (14)

Recently uploaded (20)

13. session 13 introduction to dhtml