Introduction To DHTML

Introduction to DHTML
DHTML is the art of combining HTML, JavaScript, DOM, and CSS.
What you should already know
Before you continue you should have a basic understanding of the following:
 HTML
 JavaScript
 CSS
If you want to study these subjects first, find the tutorials on our Home Page.
DHTML is Not a Language
DHTML stands for Dynamic HTML.
DHTML is NOT a language or a web standard.
DHTML is a TERM used to describe the technologies used to make web pages dynamic and interactive.
To most people DHTML means the combination of HTML, JavaScript, DOM, and CSS.
According to the World Wide Web Consortium (W3C):

"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and
scripts that allows documents to be animated."
DHTML Technologies
Below is a listing of DHTML technologies.
HTML 4
The W3C HTML 4 standard has rich support for dynamic content:
 HTML supports JavaScript

 HTML supports the Document Object Model (DOM)
 HTML supports HTML Events
 HTML supports Cascading Style Sheets (CSS)
DHTML is about using these features to create dynamic and interactive web pages.
JavaScript
JavaScript is the scripting standard for HTML.
DHTML is about using JavaScript to control, access and manipulate HTML elements.
You can read more about this in the next chapter of this tutorial.
HTML DOM
The HTML DOM is the W3C standard Document Object Model for HTML.
The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate
them.
DHTML is about using the DOM to access and manipulate HTML elements.
You can read more about this in a later chapter of this tutorial.
HTML Events
The W3C HTML Event Model is a part of the HTML DOM.
It defines a standard way to handle HTML events.
DHTML is about creating web pages that reacts to (user)events.
CSS
CSS is the W3C standard style and layout model for HTML.
CSS allows web developers to control the style and layout of web pages.
HTML 4 allows dynamic changes to CSS.
DHTML is about using JavaScript and DOM to change the style and positioning of HTML elements.
DHTML JavaScript
JavaScript can create dynamic HTML content:
Date: Tue Feb 26 2019 06:02:11 GMT+0530 (India Standard Time)
JavaScript Alone
If you have studied JavaScript, you already know that the statement:
document.write()
can be used to display dynamic content to a web page.
Example
Using JavaScript to display the current date:
<html>
<body>
<script type="text/javascript">
document.write(Date());
</script>
</body>
</html>
Try it Yourself
JavaScript and the HTML DOM
With HTML 4, JavaScript can also be used to change the inner content and attributes of HTML elements
dynamically.
To change the content of an HTML element use:
document.getElementById(id).innerHTML=new HTML
To change the attribute of an HTML element use:
document.getElementById(id).attribute=new value
You will learn more about JavaScript and the HTML DOM in the next chapter of this tutorial.
JavaScript and HTML Events
New to HTML 4 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript
when a user clicks on an HTML element.
To execute code when a user clicks on an element, use the following event attribute:
onclick=JavaScript
You will learn more about JavaScript and HTML Events in a later chapter.
JavaScript and CSS
With HTML 4, JavaScript can also be used to change the style of HTML elements.
To change the style of an HTML element use:
document.getElementById(id).style.property=new style
You will learn more about JavaScript and CSS in a later chapter of this tutorial.
DHTML - HTML Document Object Model (DOM)
The DOM presents HTML as a tree-structure (a node tree), with elements, attributes, and text:
Examples
innerHTML
How to access and change the innerHTML of an element.
Attribute change
How to access an image element and change the "src" attribute.
What is the HTML DOM?
The HTML DOM is:
 A standard object model for HTML

 A standard programming interface for HTML
 Platform- and language-independent
 A W3C standard
The HTML DOM defines the objects and properties of all HTML elements, and the methods(interface) to
access them.
In other words:
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Using the HTML DOM to Change an HTML Element
The HTML DOM can be used to change the content of an HTML element:
<html>
<body>
<h1 id="header">Old Header</h1>
document.getElementById("header").innerHTML="New Header";
</script>
</body>
</html>
HTML output:
New Header
Example explained:
 The HTML document contains a header with id="header"

 The DOM is used to get the element with id="header"
 A JavaScript is used to change the HTML content (innerHTML)
Try it yourself
Using the HTML DOM to Change an HTML Attribute
The HTML DOM can be used to change the attribute of an HTML element:
<html>
<body>
<img id="image" src="smiley.gif">
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
HTML output:
Example explained:
 The HTML document loads with an image with id="image"

 The DOM is used to get the element with id="image"
 A JavaScript changes the src attribute from smiley.gif to landscape.jpg
Try it yourself
More About the HTML DOM
If you want to study more about the HTML DOM, find the complete HTML DOM tutorial on our Home Page.
DHTML Event Handlers
HTML events can trigger actions in the browser, like starting a JavaScript when a user clicks on
an element.
Don't Click On This Text
Examples
onclick
Turn on the light! How to change an image when the user clicks it.
onmousedown & onmouseup

This time the light is on only when the user holds down the mouse button.
onload
Displays an alert box when the page has finished loading.
Event handlers
An event handler allows you to execute code when an event occurs.
Events are generated by the browser when the user clicks an element, when the page loads, when a form is
submitted, etc.
Example
A header changes when the user clicks it:
<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>
Try it yourself
You can also add a script in the head section of the page and then call the function from the event handler:
<html>
<head>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>
HTML 4.0 Event Handlers

Event Occurs when...
onabort a user aborts page loading
onblur a user leaves an object
onchange a user changes the value of an object
onclick a user clicks on an object
ondblclick a user double-clicks on an object
onfocus a user makes an object active
onkeydown a keyboard key is on its way down
onkeypress a keyboard key is pressed
onkeyup a keyboard key is released
onload a page is finished loading
onmousedown a user presses a mouse-button
onmousemove a cursor moves on an object
onmouseover a cursor moves over an object
onmouseout a cursor moves off an object
onmouseup a user releases a mouse-button
onreset a user resets a form
onselect a user selects content on a page
onsubmit a user submits a form
onunload a user closes a page
More About HTML Events
For a full overview please refer to the complete DOM Event Object Reference in our HTML DOM tutorial.
DHTML CSS
JavaScript can be used to change the style of an HTML element:
Examples
Change the style of the current element
How to change the style of an element using the this object.
Change the style of a specific element

How to change the style of an element using getElementById.
(You can find more examples at the bottom of this page)
JavaScript, DOM, and CSS
With HTML 4, JavaScript and the HTML DOM can be used to change the style any HTML element.
To change the style the current HTML element, use the statement:
style.property=new style
or more correctly:
this.style.property=new style
Try it yourself
To change the style of a specific HTML element, use the statement:
document.getElementById(element_id).style.property=new style
Try it yourself
More examples
Mouse Events
How to change the color of an element when the cursor moves over it.
Visibility
How to make an element invisible. Do you want the element to show or not?
More About JavaScript, DOM, And CSS

For a full overview please refer to the complete DOM Style Object Reference in our HTML DOM tutorial.
To learn more about CSS, find the complete CSS tutorial on our Home Page.
DHTML Summary - What's Next
DHTML is about combining HTML, JavaScript, DOM, and CSS.
DHTML is a Term
In this tutorial you have learned that DHTML is only a term used to describe the different combinations of
HTML, JavaScript, DOM, and CSS that can be used to create more dynamic web pages.
More DHTML examples
JavaScript
JavaScript is the standard scripting language for the Internet.
Everyone serious about web development should have a full understanding of JavaScript.
Visit our JavaScript tutorial, and our complete JavaScript reference.
The HTML DOM

HTML 4 supports the HTML Document Object Model (DOM).
The HTML DOM is the official (standard and browser independent) way to access HTML elements. It works in
all browsers.
Only by using the HTML DOM you can make interactive web pages that will work in all modern browsers.
If you are serious about web development, study our HTML DOM tutorial, and our complete HTML DOM
reference.
Dynamic CSS
There is no such thing as dynamic CSS.
However, with JavaScript and the HTML DOM you can dynamically change the CSS style of any HTML
element.
Server Side Scripting
In this tutorial you have seen that web pages can be made dynamic by using scripts on the client (in the
browser).
Web pages can also be made more dynamic by using scripts on the server.
With server scripting you can edit, add, or change any web page content. You can respond to data
submitted from HTML forms, access data or databases and return the results to a browser, and customize
pages for individual users.
At W3Schools you can study the following server side scripting tutorials:
PHP tutorial
ASP tutorial
DotNET tutorial

Introduction To DHTML

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Introduction To DHTML

Hochgeladen von

Copyright:

Verfügbare Formate

Introduction to DHTML

DHTML is the art of combining HTML, JavaScript, DOM, and CSS.

What you should already know

DHTML is Not a Language

DHTML stands for Dynamic HTML.

DHTML is NOT a language or a web standard.

According to the World Wide Web Consortium (W3C):

Below is a listing of DHTML technologies.

 HTML supports JavaScript

JavaScript is the scripting standard for HTML.

The W3C HTML Event Model is a part of the HTML DOM.

It defines a standard way to handle HTML events.

DHTML is about creating web pages that reacts to (user)events.

HTML 4 allows dynamic changes to CSS.

JavaScript can create dynamic HTML content:

Date: Tue Feb 26 2019 06:02:11 GMT+0530 (India Standard Time)

can be used to display dynamic content to a web page.

Using JavaScript to display the current date:

JavaScript and the HTML DOM

To change the content of an HTML element use:

To change the attribute of an HTML element use:

JavaScript and CSS

To change the style of an HTML element use:

What is the HTML DOM?

The HTML DOM is:

 A standard object model for HTML

<h1 id="header">Old Header</h1>

 The HTML document contains a header with id="header"

Using the HTML DOM to Change an HTML Attribute

<img id="image" src="smiley.gif">

 The HTML document loads with an image with id="image"

More About the HTML DOM

Don't Click On This Text

onmousedown & onmouseup

An event handler allows you to execute code when an event occurs.

A header changes when the user clicks it:

<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>

HTML 4.0 Event Handlers

onabort a user aborts page loading

onblur a user leaves an object

onchange a user changes the value of an object

onclick a user clicks on an object

ondblclick a user double-clicks on an object

onfocus a user makes an object active

onkeydown a keyboard key is on its way down

onkeypress a keyboard key is pressed

onkeyup a keyboard key is released

onload a page is finished loading

onmousedown a user presses a mouse-button

onmousemove a cursor moves on an object

onmouseover a cursor moves over an object

onmouseout a cursor moves off an object

onmouseup a user releases a mouse-button

onreset a user resets a form

onselect a user selects content on a page

onsubmit a user submits a form

onunload a user closes a page

More About HTML Events

JavaScript can be used to change the style of an HTML element:

Change the style of a specific element

(You can find more examples at the bottom of this page)

JavaScript, DOM, and CSS

To change the style of a specific HTML element, use the statement: