Scribd
Upload
33 views

Module 6 (DHTML)

Uploaded by

pg.piyush18
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Module 6 (DHTML)

Uploaded by

pg.piyush18
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

WEB TECHNOLOGY AND ITS

APPLICATIONS
MODULE 6 – DHTML

• Combining HTML, CSS and JavaScript


• Events, and buttons
• controlling the browser
DHTML Introduction

❖DHTML stands for Dynamic HTML.

❖Dynamic HTML is not a markup or programming language but it is


a term that combines the features of various web development
technologies for creating the web pages dynamic and interactive.
Components of Dynamic HTML
DHTML consists of the following four components or languages:
1. HTML 4.0
HTML is a client-side markup language, which is a core component
of the DHTML. It defines the structure of a web page with various
defined basic elements or tags.
2. CSS
CSS stands for Cascading Style Sheet, which allows the web users or
developers for controlling the style and layout of the HTML
elements on the web pages.
3. JavaScript
JavaScript is a scripting language which is done on a client-side. The
various browser supports JavaScript technology. DHTML uses the
JavaScript technology for accessing, controlling, and manipulating
the HTML elements.
4.DOM
It is mainly used for defining the objects and properties of all
elements in HTML.
What is the Difference Between HTML and DHTML?
Document.write() Method
<html>
<head>
<title>
Method of a JavaScript
</title>
</head>
<body>
<script type="text/javascript">
document.write(“Example1");
</script>
</body>
</html>

Output:
Example1
JavaScript and HTML event
<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>
JavaScript and HTML DOM
<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>
CSS with JavaScript in DHTML
<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>
DHTML Events
• An event is defined as changing the occurrence of an object.
• It is compulsory to add the events in the DHTML page. Without
events, there will be no dynamic content on the HTML page. The
event is a term in the HTML, which triggers the actions in the
web browsers.

Example of events:
1.Click a button.
2.Submitting a form.
3.An image loading or a web page loading, etc.
Example of onclick event
<html>
<head>
<title>
</title>
<script type="text/javascript">
function ChangeText(ctext)
{
ctext.innerHTML=" Hi JavaTpoint! ";
}
</script>
</head>
<body>
<font color="red"> Click on the Given text for changing it: <br>
</font>
<font color="blue">
<h1 onclick="ChangeText(this)"> Hello World! </h1>
</font>
</body>
</html>
Example 2: onsubmit event handler
<html>
<head>
<title>
</title>
</head>
<body> <form onsubmit="Submit_Form()">
<label> Enter your name: </label>
<input type="text">
<label> Enter your Roll no: </label>
<input type="Number">
<input type="submit" value="submit">
</form>
<script type="text/javascript">
function Submit_Form()
{
alert(" Your form is submitted");
}
</script>
</body>
</html>
Advantages of DHTML

Following are the various benefits or the advantages of DHTML


(Dynamic HTML):
•Those web sites and web pages which are created using this
concept are fast.
•There is no plug-in required for creating the web page dynamically.
•Due to the low-bandwidth effect by the dynamic HTML, the web
page functionality is enhanced.
•This concept provides advanced functionalities than the static
HTML.
•It is highly flexible, and the user can make changes easily in the
web pages
DHTML Examples
Reference

https://w3schools.sinsixx.com/dhtml/dhtml_examples.asp.htm

You might also like