DHTML JavaScript

DHTML stands for Dynamic HTML. Dynamic means that the content of the web page can be customized or changed according to user inputs i.e. a page that is interactive with the user. In earlier times, HTML was used to create a static page. It only defined the structure of the content that was displayed on the page. With the help of CSS, we can beautify the HTML page by changing various properties like text size, background color etc. The HTML and CSS could manage to navigate between static pages but couldn’t do anything else. If 1000 users view a page that had their information for eg. Admit card then there was a problem because 1000 static pages for this application build to work. As the number of users increase, the problem also increases and at some point it becomes impossible to handle this problem.

To overcome this problem, DHTML came into existence. DHTML included JavaScript along with HTML and CSS to make the page dynamic. This combo made the web pages dynamic and eliminated this problem of creating static page for each user. To integrate JavaScript into HTML, a Document Object Model(DOM) is made for the HTML document. In DOM, the document is represented as nodes and objects which are accessed by different languages like JavaScript to manipulate the document.
dom example

HTML document include JavaScript:: The JavaScript document is included in our html page using the html tag. <src> tag is used to specify the source of external JavaScript file.
Following are some of the tasks that can be performed with JavaScript:

  • Performing html tasks
  • Performing CSS tasks
  • Handling events
  • Validating inputs

Example 1: Example to understand how to use JavaScript in DHTML.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
    <head>
        <title>DOM programming</title>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <p id = "geeks">Hello Geeks!</p>
        <script style = "text/javascript">
        document.getElementById("geeks").innerHTML = 
              "A computer science portal for geeks";
        </script>
    </body>
</html>                    

chevron_right


Output:
javascript
Explanation: In the above example, change the text of paragraph which using id. Document is an object of html that is displayed in the current window or object of DOM. The getElementById(id) gives the element id. The innerHTML defines the content within the id element. The id attribute is used to change HTML document and its property. Paragraph content changed by document id. For example: document.getElementById(“geeks”).style.color = “blue”; It is used to set the paragraph color using id of elements.

Example 2: Creating an alert on click of a button.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
    <head>
        <title>Create an alert</title>
    </head>
      
    <body>
        <h1 id = "para1">GeeksforGeeks</h1>
        <input type = "Submit" onclick = "Click()"/>
        <script style = "text/javascript">
            function Click() {
                document.getElementById("para1").style.color = "#009900";
                window.alert("Color changed to green");
            }
        </script>
    </body>
</html>                    

chevron_right


Output:
clicked alert
Explanation: In this example, creating a function that will be invoked on click of a button and it changes the color of text and display the alert on the screen. window is an object of current window whose inbuilt method alert() is invoked in Click() function.

Example 3: Validate input data using JavaScript.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
    <head>
        <title>Validate input data</title>
    </head>
      
    <body>
        <p>Enter graduation percentage:</p>
        <input id="perc">
        <button type="button" onclick="Validate()">Submit</button>
        <p id="demo"></p>
        <script>
            function Validate() {
                var x, text;
                x = document.getElementById("perc").value;
                if (isNaN(x) || x < 60) {
                    window.alert("Not selected in GeeksforGeeks");
                } else {
                document.getElementById("demo").innerHTML
                              "Selected: Welcome to GeeksforGeeks";
                document.getElementById("demo").style.color = "#009900";
                }
            }
        </script>
    </body>
</html>                    

chevron_right


Output:
javascript
Explanation: In this example, make a validate() function which ensures the user is illegible or not. If user enters > 60 then selected otherwise not selected.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.