Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
We can include the external JavaScript document in the HTML document using the <src> tag. Else, we can include JavaScript in the HTML document inside the <script> element.
Following are some tasks that we can perform with JavaScript; performing HTML tasks, performing CSS tasks, handling events, etc.
performing HTML tasks
performing CSS tasks
handling events etc.
Example
In the following example, we are changing the text of the element with id = "demo" using the HTML DOM document.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
In the example below, we are creating a function that will be invoked if we clicked the button and it changes the background color of the text and displays the alert on the screen.
<!DOCTYPE html>
<html>
<head>
<style>
#demo{
display: flex;
margin: auto;
justify-content: center;
}
input{
display: flex;
margin: auto;
justify-content: center;
}
</style>
<h1 id = "demo"> Tutorialspoint </h1>
<input type = "submit" onclick = "btn()"/>
<script>
function btn() {
document.getElementById("demo").style.backgroundColor = "seagreen";
window.alert("Background color changed to seagreen");
}
</script>
</head>
</html>
3K+ Views
To Continue Learning Please Login