7/1/2025
DHTML (Dynamic HTML)
DHTML is a term used to describe the combination of the
three web technologies HTML, style sheets (CSS) and
JavaScript Web Scripts to create dynamic and interactive web
pages.
Using DHTML you can interact with the user and alter the
content of a page at any time.
1 2
Web Scripting JavaScript
Two main scripting languages are in use. JavaScript is a scripting language used to create
JavaScript dynamic web pages. As a scripting language
VBScript JavaScript is therefore, interpreted and not
compiled.
The disadvantage of using VBScript is that it is
only supported by Internet Explorer. Where as
The script is usually embedded directly into HTML
JavaScript is supported by several browsers.
pages.
3 4
Integrating JavaScript with HTML
JavaScript cannot run outside the browser - it is a
client-side scripting language.
There are two ways to embed a JavaScript in
JavaScript is case-sensitive.
an HTML document:
It is an object-based scripting language.
i. Using the HTML <script></script> tag.
ii. Placing the JavaScript in an HTML tag.
5 6
1
7/1/2025
Using HTML <script> tag
Syntax: The script can be placed:
<script language=“JavaScript” Within the head or body section of an HTML
type=“text/javascript” src=“url”> document or
……….. As an external file with a .js extension. The src
attribute of the <script> tag specifies the location
</script>
of the external JavaScript file.
7 8
Placing a JavaScript in the Body Section method
Object
Scripts placed in the body section are executed as document.write(“Hello World”)
part of the HTML document when the page loads.
<body>
<h1>My First javaScript</h1> Standard JavaScript command
<script language=“javascript” type=“text/ javascript”> for writing output to a web page
document.write(“Hello World”); Note:
</script> Each HTML document loaded into a browser window
</body> becomes a Document object.
9 10
<html>
Example 1: <body>
<script language="javascript" type="text/javascript">
Write a JavaScript to display the following: document.write("<h1 align=center><u>Hello
World</u></h1>");
“Hello World” as a center aligned H1 heading.
Underline the text. document.write("<p>How are you?</p>");
</script>
“How are you?” as a paragraph. </body>
</html>
11 12
2
7/1/2025
<html>
Example 2:
<body>
<script language="javascript" type="text/javascript"> Write a JavaScript to display the following:
document.write("<h1 align=center><u>Hello Vocational Training Authority-Niyagama as an H1
World</u></h1><p>How are you?</p>"); heading in italic and center aligned with font color
</script> red.
Diploma In ICT5 as a center aligned H2 heading.
</body>
</html>
13 14
<html> Placing a JavaScript in the Head Section
<body>
<script language="javascript" type="text/javascript">
document.write("<h1 align=center><font Scripts placed in the head section are not
color=red><i>Vocational Training
Authority</i></font></h1>"); automatically executed when the page loads but can
document.write("<h2 align=center>Diploma In ICT5 be executed when called by other scripts in the page.
</h2>");
</script>
</body>
</html>
15 16
Placing a JavaScript in an external file
<head>
The external file can appear in the head or the body
<title> Javascript Example </title>
<script language=“javascript” type=“text/javascript”> section of the HTML document.
…………… Save the external JavaScript file with a .js file
</script>
extension.
</head>
<script language=“javascript” type=“text/
javascript” src=“filename.js”>
</script>
17 18
3
7/1/2025
<html><body>
Example 1: <script language="javascript" type="text/javascript"
src="ext.js">
</script>
Use an external JavaScript to display the
</body></html>
following:
“WEB” as a center aligned H1 heading.
“Learn JavaScript in a day” as a paragraph with Ext.js
font color blue. document.write("<h1
align=center>WEB</h1><p><font color=blue>Learn
JavaScript in a day</font></p>");
19 20
Comments
JavaScript Popup Boxes
Comments are written between the <! - - and
JavaScript has three types of popup boxes:
- - > symbols. Alert box
Confirm box
Prompt box
<script language=“javascript” type=“text/javascript”>
<!- - document.write(“Hello World”) - - >
</script>
21 22
Alert Box
A JavaScript alert is a dialog box that contains a
message. When an alert box pops up, the user has
to click "OK" to proceed.
Syntax: alert(“text message”)
")
<script language=“javascript” type=“text/javascript”>
alert(“This is an alert box”);
</script>
23 24
4
7/1/2025
Confirm Box <script language=javascript type="text/javascript">
A confirm box pops up with both an OK button to confirm("Are you sure you want to log out?");
accept and a Cancel button to reject. </script>
If the user clicks "OK", the box returns true. If the
user clicks "Cancel", the box returns false.
Syntax:
confirm(“text message")
25 26
<html><body>
Example
<script language="javascript" type="text/javascript">
if (confirm("do you want to log out?"))
Write a Javascript to display a confirm box with the {
message “Do you want to log out?”. If the user clicks alert (“Good Bye !");
the OK button, display an alert “Good Bye!”. If the }
else
user clicks the Cancel button, display an alert “Please
{
continue your work!”. alert (“Please continue your work !");
}
</script></body>
</html>
27 28
Prompt Box <script language=javascript type="text/javascript">
prompt(“Please Enter your name”, ” ”);
A prompt box is used if a user’s input value is desired
</script>
before entering a page.
When a prompt box pops up, the user has to click
either "OK" or "Cancel" to proceed after entering an
input value.
If the user clicks "OK" the box returns the input value.
If the user clicks "Cancel" the box returns null.
Syntax:
prompt(“text message","defaultvalue")
29 30
5
7/1/2025
JavaScript Values JavaScript Variables
JavaScript recognizes the following types of values:
Variable names are case sensitive.
Numbers – real and integers ( eg: 45.786, 100).
A variable name must begin with a letter or an
Strings (eg: Hello World).
underscore. The remaining characters can be
Logical (Boolean) values - True or False.
numbers (0-9), letters (a-z or A-Z) or the
Null - a special keyword to denote a null value
underscore.
31 32
Declaring Variables
Variable names cannot contain spaces.
var maxval = 100
Reserved words cannot be used as variable
names.
Examples: maxval, First_Name, _name, a100
maxval = 100
33 34
Example 1
Write a JavaScript to define two variables num1
and num2, initialize them to 10 and 20
Manipulating Variables
respectively and display the addition of the two
numbers.
35 36
6
7/1/2025
Example 2:
<html><body>
<script language="javascript" type="text/javascript"> Write a JavaScript to enter a user’s name through a
var num1=10;
prompt box. If the user enters a name and clicks the OK
var num2=20;
button display the message “Good day <user name>!”
var num3=num1+num2;
document.write(“The Addition of numbers =” + num3); else if the user clicks the cancel button display the
</script> message “Good bye”. Use an alert dialogue box to
</body></html> display the relevant messages.
37 38
<html><body> Example 3:
<script language="javascript" type="text/javascript"> Write a JavaScript for the following:
var reply=prompt("What is your name?",""); Enter the price of an item and the quantity
if(reply!==null)
purchased through prompt boxes.
{alert("Good Day " +reply +"!"); }
Calculate the total amount (qty*price).
else
If the amount is greater than Rs500/= add a
{alert("Good Bye");}
10% tax.
</script>
</body></html> Display the total amount payable as an alert.
39 40
<html><body>
<script language="javascript" type="text/javascript">
var x=prompt("Enter the price of an item","");
var y=prompt("Enter the quantity","");
var amount=x * y;
if(amount > 500)
{var total= amount * 1.1 ;
alert("The total value payable with tax= Rs " +total);}
else
{alert("The value payable = Rs " +amount);}
</script>
</body></html>
41
