DHTML – JavaScript , CSS , DOM

DHTML JavaScript

JavaScript can be included in HTML pages, which creates the content of the page as dynamic. We can easily type the JavaScript code within the <head> or <body> tag of a HTML page. If we want to add the external source file of JavaScript, we can easily add using the <src> attribute.

Following are the various examples, which describes how to use the JavaScript technology with the DHTML:

Document.write() Method

The document.write() method of JavaScript, writes the output to a web page.

Example: The following example simply uses the document.write() method of JavaScript in the DHTML. In this example, we type the JavaScript code in the <body> tag.

<HTML>
<head>
<title>
Method of a JavaScript
</title>
</head>
<body>
<script type="text/javascript">
document.write("JavaTpoint");
</script>
</body>
</html>  

Output :-

image 14

JavaScript and HTML event

A JavaScript code can also be executed when some event occurs. Suppose, a user clicks an HTML element on a webpage, and after clicking, the JavaScript function associated with that HTML element is automatically invoked. And, then the statements in the function are performed.

Example: The following example shows the current date and time with the JavaScript and HTML event (Onclick). In this example, we type the JavaScript code in the <head> tag.

<html>
<head>
<title>
DHTML with JavaScript
</title>
<script type="text/javascript">
function dateandtime()
{
alert(Date());
}
</script>
</head>
<body bgcolor="orange">
<font size="4" color="blue">
<center> <p>
Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>
# to check the today's date and time.
</p> </center>
</font>
</body>
</html>  

Output :-

image 15

Explanation:

In the above code, we displayed the current date and time with the help of JavaScript in DHTML. In the body tag, we used the anchor tag, which refers to the page itself. When you click on the link, then the function of JavaScript is called.

In the JavaScript function, we use the alert() method in which we type the date() function. The date function shows the date and time in the alert dialog box on the web page.

DHTML CSS

We can easily use the CSS with the DHTML page with the help of JavaScript and HTML DOM. With the help of this.style.property=new style statement, we can change the style of the currently used HTML element.

Or, we can also update the style of any particular HTML element by document.getElementById(id).style.property = new_style statement.

Example 1: The following example uses the DHTML CSS for changing the style of current element:

<html>
<head>
<title>
Changes current HTML element
</title>
</head>
<body>
<center>
<h1 onclick="this.style.color='blue'"> This is a JavaTpoint Site </h1>
<center>
</body>
</html>  

Output :-

image 18

Explanation:

In the above code, we used the this.style.color=’blue’ statement, which shows the color of a text as blue.

Example 2: The following example uses the DHTML CSS for changing the style of the HTML element:

<html>
<head>
  <title>
changes the particular HTML element example
</title>
</head>
<body>
  <p id="demo"> This text changes color when click on the following different buttons. </p>
  <button onclick="change_Color('green');"> Green </button>
  <button onclick="change_Color('blue');"> Blue </button>
<script type="text/javascript">
function change_Color(newColor) {
  var element = document.getElementById('demo').style.color = newColor;
}
</script>
</body>
</html> 

Output :-

image 19

Explanation:

In the above code, we used the var element = document.getElementById(‘demo’).style.color = newColor; statement, which changes the color of a text as green and blue according to the buttons.

CSS with JavaScript in DHTML

With version 4 of HTML, JavaScript code can also change the style such as size, color, and face of an HTML element.

Example: The following example changes the color of a text.

<html>
<head>
  <title>
getElementById.style.property example
</title>
</head>
<body>
  <p id="demo"> This text changes color when click on the following different buttons. </p>
  <button onclick="change_Color('green');"> Green </button>
  <button onclick="change_Color('blue');"> Blue </button>
<script type="text/javascript">
function change_Color(newColor) {
  var element = document.getElementById('demo').style.color = newColor;
}
</script>
</body>
</html>  

Output :-

image 17

Explanation:

In the above code, we changed the color of a text by using the following syntax:

document.getElementById(‘demo’).style.property=new_value;.   

The above syntax is used in the JavaScript function, which is performed or called when we clicked on the HTML buttons. The different HTML buttons specify the color of a text.

DHTML DOM

DHTML DOM stands for Dynamic HTML Document Object Model.

It is a w3c standard, which is a standard interface of programming for HTML. It is mainly used for defining the objects and properties of all elements in HTML.

It also defines the methods for accessing the HTML elements.

Example: The following program helps in understanding the concept of DHTML DOM. This example changes the color of the text and displays the text in red color automatically.

<html>
<head>
  <title>
Example of DHTML DOM
</title>
</head>
<body>
<font color = "blue">
  <p id="demo"> This text changes color when the page loaded. </p>
</font>
<script type="text/javascript">
document.getElementById('demo').style.color = "red";
</script>
</body>
</html>  

Output :-

image 20

JavaScript and HTML DOM

With version 4 of HTML, JavaScript code can also change the inner content and attributes of the HTML event.

Example: This example checks the Grade of a student according to the percentage criteria with the JavaScript and HTML DOM. In this example, we type the code of JavaScript in the <body> tag.

<html>
    <head>
        <title> Check Student Grade
</title>
    </head>
    <body>
<p>Enter the percentage of a Student:</p>
<input type="text" id="percentage">
<button type="button" onclick="checkGrade()">
Find Grade
</button>
<p id="demo"></p>
<script type="text/javascript">
            function checkGrade() {
                var x,p,text;
                p = document.getElementById("percentage").value;
        x=parseInt(p);
               if (x>90 && x <= 100) {
                    document.getElementById("demo").innerHTML = "A1";
                } else if (x>80 && x <= 90) {
                   document.getElementById("demo").innerHTML = "A2";
         } else if (x>70 && x <= 80) {
                   document.getElementById("demo").innerHTML = "A3";
        }
            }
        </script>
    </body>
</html>   

Output :-

image 16

Explanation:

In the above code, we check the student’s Grade with the help of JavaScript in DHTML. In the JavaScript code, we used the checkGrade() method, which is invoked when we click on the button. In this function, we stored the value in variable p.

The value is taken in the input field. When the value is stored, then we convert the value of p into integer and store the conversion value in x, because the value in p is text.

After that, we used the if-else-if statement for finding the grade according to the percentage.