JavaScript and HTML

The introduction of JavaScript into web pages immediately ran into the Web's primary language, HTML. As the component of its original work on JavaScript, Netscape tried to find out how to make JavaScript coexist in HTML pages without causing any break on those pages which is rendering in other browsers. Through trial and error along with controversy, several decisions were finally made and agreed upon to bring universal scripting support for the Web. Most of the work done in these early days of the Web has endured and become official in the HTML specification. In this chapter, you are going to relate the JavaScript language with HTML.

Use of <SCRIPT> Element

The primary technique of inserting JavaScript into an HTML page is through the <script> element. Netscape created this <script> element and first implemented in the browser - Netscape Navigator version 2. Then it was later added to the formal HTML specification.

Six attributes are provided by the <script> element. These are:

AttributeDescription
asyncWhich indicates that the script ought to begin downloading immediately.
charsetSet the character set of the code particularizes using the src attribute.
deferWhich indicates that the execution of the script can safely be deferred until after the document's content has been fully parsed and displayed.
languageWhich indicates that the scripting language being used by the code.
srcWhich indicates that an external file that holds the code to be executed.
typeis used to replace language; indicates the content type (also called MIME type) of the scripting language being used.

Example:

<script>
function test(){
alert("Hello Test!");
}
</script>

Tag Placement in JavaScript with HTML

Traditionally, all <script> elements were positioned within the <head> element on an HTML document's page, such as in the example given below:
Example:

<!DOCTYPE html>
<html>
<head>
<title>Webpage Title</title>
<script src="example1.js"></script>
<script src="example2.js"></script>
</head>
<body>
<!- -all other contents here -->
</body>
</html>

The major purpose of this way of structuring was to keep external file references, both CSS files along with JavaScript files, in the same location.

Moreover, including all JavaScript files in the <head> of a document designates that all of the JavaScript code must have to be downloaded then parsed and interpreted before the page begins rendering. Rendering means the moment when the browser receives the opening <body> tag in an HTML code. For pages which require a lot of JavaScript code, this can cause an obvious delay in page rendering, during which time the browser will be entirely blank.

What is Deferred Attribute?

HTML 4.01 defines an attribute named defer for the <script> element. The use of defer is to indicate that a script won't be changing the structure of the page as it executes. Likewise, the script can be run safely after the whole page has been parsed. Setting the defer attribute on an <script> element tells the browser that download should begin at once, but execution should be deferred:

Example:

<!DOCTYPE html>
<html>
<head>
<title>Webpage Title</title>
<script defer src="example1.js"></script>
<script defer src="example2.js"></script>
</head>
<body>
<!-- content here -->
</body>
</html>

Scroll Back to Top