How to make HTML dynamic using JavaScript
JavaScript code is executed within the web pages. So, your web page contains not only HTML tags but also statements (scripts) written using a scripting language like JavaScript.
There are two ways to include JavaScript in our web pages. One way is to include the JavaScript statements inside <script> and </script> tags. Below is the syntax for including JavaScript in <script> tags:
1
2
3
|
<script type=“text/javascript”>
JavaScript code…
</script>
|
In the above code, the attribute type is used to specify which scripting language we are using to write the statements embedded within the <script> tags. There are many scripting languages among which JavaScript and VBScript are the popular ones. If no language is specified, by default the browser assumes JavaScript.
The <script> tags can be either included in the head section of the web page or in the body section of the web page. It is valid to specify multiple <script> blocks in a single web page. When there are multiple scripts, they are executed from top to bottom.
The second way to specify JavaScript in a web page is by writing the JavaScript statements in an external file and referencing them in a web page. The external file is a JavaScript source file which must end with .js extension. The syntax for referencing an external JavaScript source file is as follows:
1
2
3
|
<script type=“text/javascript” src=”script.js”>
JavaScript code...
</script>
|
In the above code, src attribute specifies the path to the external JavaScript source file. The path can be relative or absolute. Take care that no JavaScript statements should be written in between the <script> and </script> tags. If written, they will be ignored. Multiple <script> tags can be written to refer multiple external source files.
Which method to use for incorporating JavaScript code in a web page?
When the JavaScript code is less, embed the code inside <script> tags within a web page. Changes made to embedded JavaScript code are visible immediately as opposed to changes made to external JavaScript source file may not be visible immediately because sometimes the browser may cache the external JavaScript source file.
Maintaining JavaScript code in an external file has the following advantages:
- Makes HTML file cleaner and easy to understand.
- Same JavaScript file can be reused in many HTML files.
- JavaScript code remains hidden if it is not supported by the browser.
Dynamic HTML is not a new markup language. It is a collection of technologies (generally HTML, CSS and JavaScript) which changes the document content once it is loaded into a web browser.
Some examples for dynamism in a web document are given below:
- Changes to document content on user interactions or after a specified time interval or on specific browser events.
- Moving elements to new positions.
- Making elements disappear and reappear.
- Changing the colour of the background and foreground.
- Changing the font properties of elements.
- Changing the content of the elements.
- Overlapping elements in stack order.
- Allow dragging and dropping elements anywhere in the browser window.
As an example let’s consider a web document which contains an image image1 initially when the page is loaded. When the user clicks on the image, the image changes to image2 which demonstrates dynamism and hence Dynamic HTML (DHTML).
1
2
3
4
5
6
7
8
9
10
|
//HTML Code
<html>
<head>
<title>DHTML Demo</title>
</head>
<body>
<img src=“image1.jpg” id=“image” />
<script type=“text/javascript” src=“script.js”></script>
</body>
</html>
|
1
2
3
4
5
6
7
8
|
//JavaScript code – script.js
function change( )
{
var img = document.getElementById(“image”);
img.src = image2.jpg;
}
document.getElementById(“image”).onclick = change;
|
Comments
Post a Comment