The HTML script element allows you to embed JavaScript into an HTML document. Often script elements are placed within the head element, and, in fact, this placement was often stated as a requirement. Today, however, script elements are used within the head element as well as in the body of web pages.
The format of the script element is very simple:
<script> (insert your JavaScript here) </script>
Here’s an example of an HTML document with a script tag containing JavaScript. In this case, however, the script element is placed at the bottom of the body element.
<!DOCTYPE html>
<html>
<head>
<title>Hello, HTML!</title>
</head>
<body>
<h1>Let’s Count to 10 with JavaScript!</h1>
<p id=“theCount”></p>
<script>
var count = 0;
while (count < 10) {
count++;
document.getElementById(“theCount”).innerHTML +=
count + “<br>“;
}
</script>
</body>
</html>
Script placement and JavaScript execution
Web browsers normally load and execute scripts as they are loaded. A web page always gets read by the browser from the top down, just as you would read a page of text. Sometimes you’ll want to wait until the browser is done loading the contents of the web page before the script runs.
Above, this was accomplished by using the onload event attribute in the body element. Another common way to delay execution is to simply place the code to be executed at the end of the code.
Limitations of JavaScript in
While much more commonly used and more widely accepted than inline scripting (putting JavaScript into event attributes), embedding JavaScript into a script element has some serious limitations.
The biggest limitation is that scripts embedded in this way can be used only within the web page where they live. In other words, if you put your JavaScript into a script element, you need to copy and paste that script element exactly into every page where it exists. With some websites containing many hundreds of web pages, you can see how this can become a maintenance nightmare.
When to use JavaScript in
This method of embedding JavaScript does have its uses. For bits of JavaScript that simply call other bits of JavaScript and that rarely (or preferably, never) change, it is acceptable and can even speed up the loading and display of your web pages by causing the web server to have to make fewer requests to the server.
Single page apps, which (as the name implies) contain only a single HTML page, are also great candidates for the use of this type of embedding because there will only ever be one place to update the script.
As a rule, however, you should seek to minimize the amount of JavaScript that you embed directly into an HTML document. The results will be easier maintenance and better organization of your code.
