Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
DHTML JavaScript
DHTML stands for Dynamic Hypertext Markup Language. DHTML combines HTML, CSS, and JavaScript to create interactive and dynamic web pages. It allows for customization and changes to the content based on user inputs. Earlier, HTML was used to create static pages that only defined the structure of the content.
CSS helped in enhancing the page's appearance. However, these technologies were limited in their ability to create interactive experiences. DHTML introduced JavaScript and the Document Object Model (DOM) to make web pages dynamic. With DHTML, the web page can be manipulated and updated in response to user actions, eliminating the need for creating separate static pages for each user.
Key Components of DHTML
DHTML consists of four main technologies working together:
HTML - Provides the basic structure and content
CSS - Controls styling and layout
JavaScript - Adds interactivity and behavior
DOM - Allows JavaScript to access and modify HTML elements
What You Can Do with DHTML
DHTML enables various interactive features:
Dynamically modify HTML content and structure
Change CSS styles in real-time
Handle user events (clicks, mouse movements, keyboard input)
Create animations and visual effects
Update page content without refreshing
Including JavaScript in HTML
You can include JavaScript in HTML documents in two ways:
External file: Use the
<script src="filename.js"></script>tagInline: Write JavaScript directly inside
<script>tags
Example: Modifying HTML Content
This example demonstrates changing text content using the DOM's getElementById() method:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p id="demo">Text will be modified</p>
<script>
document.getElementById("demo").innerHTML = "Simply Easy Learning at your fingertips...";
</script>
</body>
</html>
Example: Interactive Button with Styling
This example shows how to handle events and dynamically change CSS properties:
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
display: flex;
margin: auto;
justify-content: center;
padding: 20px;
font-size: 24px;
}
input {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1 id="demo">Tutorialspoint</h1>
<input type="button" value="Change Color" onclick="changeBackground()"/>
<script>
function changeBackground() {
document.getElementById("demo").style.backgroundColor = "seagreen";
document.getElementById("demo").style.color = "white";
alert("Background color changed to seagreen!");
}
</script>
</body>
</html>
DHTML vs Static HTML
| Static HTML | DHTML |
|---|---|
| Fixed content | Dynamic, changeable content |
| No user interaction | Responds to user actions |
| Requires page refresh for updates | Updates without page refresh |
| Limited visual effects | Rich animations and effects |
Common DHTML Applications
DHTML is widely used for:
Interactive forms with real-time validation
Dynamic menus and navigation
Image galleries and sliders
Drag-and-drop interfaces
Single-page applications (SPAs)
Conclusion
DHTML revolutionized web development by combining HTML, CSS, and JavaScript to create interactive experiences. It enables real-time content updates and user interaction without page refreshes, making modern web applications possible.
6K+ Views
