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 th...
DHTML   DHTML provides an easy way for creating dynamic and    interactive web pages. It allows to create web pages that ...
DHTML features   DHTML allows you to create interactive web pages without having    to compromise on its presentation. DH...
DHTML features….   Some feature of DHTML:    4.    Font download: are a feature that allows us to insert our choice      ...
DOM   DHTML provides an object model that represents a    collection of elements that are used by the scripts to    gramm...
DHTML objects   Every element contained within a web page is referred as    an object. The DHTML objects allow you to acc...
DHTML objects   Some of DHTML objects:       img: specifies an image or video clip to be embedded in the        document...
Event   An event occurs when the user interacts with the web    page. Some of the commonly generated events are    mouse ...
Event Bubbling   Event bubbling is a mechanism that allows you to    specify a common event handler for all child    elem...
Keyboard Event   Keyboard events are the events that occur when a    key or a combination of keys are pressed or released...
keyboard event - DemoDemo: S13_KeyboardEvent.html
Mouse Event   Mouse events are the events that occur when the user    uses mouse on the elements.   Some mouse events:  ...
mouse event - Demo                          onMouseOver                          onClickDemo: S13_KeyboardEvent.html
Focus and selection Event   The focus events determine the activation of various    elements that use the INPUT element. ...
mouse event - Demo                           onFocusDemo: S13_KeyboardEvent.html
Summary   DHTML allows to create a dynamic web pages.   DHTML is combination a DOM, CSS, HTML and    Javascript.   It p...
Summary   Event occur when the user interacts the web    page   The process of handling these events is known    event –...
Upcoming SlideShare
Loading in …5
×

13. session 13 introduction to dhtml

2,740 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,740
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
214
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

13. session 13 introduction to dhtml

  1. 1. Introduction to DHTML Session 13 Session 13
  2. 2. Objectives DHTML. Events.
  3. 3. 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.
  4. 4. 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
  5. 5. 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.
  6. 6. 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.
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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.
  12. 12. 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.
  13. 13. keyboard event - DemoDemo: S13_KeyboardEvent.html
  14. 14. 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.
  15. 15. mouse event - Demo onMouseOver onClickDemo: S13_KeyboardEvent.html
  16. 16. 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.
  17. 17. mouse event - Demo onFocusDemo: S13_KeyboardEvent.html
  18. 18. 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
  19. 19. 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.

×