Session 13 Session 13 Introduction to DHTML
Jan 18, 2015
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.