Running Scripts: Introduction
HTML provides support to run scripts on client-side (that means in the browser). Scripts provide us several tools to make an HTML page dynamic and interactive. First, we can attach scripts to different events on the page -- thus, we can add a script to do something specific when a specific event (like, a mouse-click) happens on a specific element (like, a button on the page). Second, we can also attach scripts to validate a task, like validating user-input in a form. We can keep script element anywhere in an HTML page and we can place it as many times as required.
We can add scripts to a page using the <script> element. Before we go further, let us look at the script element and its various attributes.
<script type=".." src=".." defer="defer" charset="..">
Script goes here.
</script>
HTML supports several types of scripts. Accordingly, the value of the type can specify to the script type like type="text/vbscript", type="text/javascript", type="text/tcl" etc. For HTML 4 (which is what we are discussing here), each script element must specify the type attribute. For HTML 5, the type is optional and defaults to type="text/javascript".
The next attribute of the script element is the src attribute. This allows us to include the script in a separate file and simply add the location of the file in the HTML page. This enables us to keep the structure of the HTML separate from the behavior (provided by the script) of the page. W3C recommends that we keep scripts separate from the HTML content.
The next attribute, defer is a boolean attribute and provides a hint that the script is not going to generate any document content (e.g., no "document.write" in javascript). Browsers can use this hint and can continue rendering the page without having to wait.
Let us understand the behavior of script further by using an example that adds JavaScript script to an HTML page. As noted earlier, for that we can specify the type as "text/javascript". Any code that sits between the opening script tag and closing script tag executes in the context of JavaScript interpreter.
We begin by providing below a simple JavaScript example that adds some text. For adding the text, the script uses the innerHTML property of the "idDiv" HTML element.
<!doctype html>
<html>
<head>
<title> Adding Scripts to an HTML Page </title>
</head>
<body>
<div id="idDiv"> </div>
<script type="text/javascript">
// Get a handle of the div element.
var elem = document.getElementById("idDiv");
// Write something to it.
elem.innerHTML += "NASA's Kepler Space Telescope has helped astronomers <br>";
elem.innerHTML += "discover the first Earth-size planet located in a habitable zone <br>";
elem.innerHTML += "in a distant Solar System. It is named Kepler-186f. <br>";
</script>
</body>
</html>
The above script uses JavaScript's getElementById() method of the document object to grab the "div" element. Then, it adds some text to the innerHTML property of the "div" element. If you feel overwhelmed with the above script, then the good news is that we do not plan to dive any further on JavaScript! However, if you are interested in learning more about JavaScript or its library jQuery, you can visit our modules: JavaScript module and jQuery module.
The above example also shows an important behavior of accessing HTML elements from within a script. The W3C specification does not provide a standard way for referring to HTML objects. However, the recommendation is that the scripts should get hold of elements using their name or ID; the above example does so using the ID.
Once loaded, the page would display the text added to the <div> element. Here is the output:
Figure: Running JavaScript inside an HTML Page