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