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 to 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 it 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:

Attribute Description
async Which indicates that the script ought to begin downloading immediately.
charset Set the character set of the code particularizes using the src attribute.
defer It indicates that the execution of the script can safely be deferred until after the document's content has been fully parsed and displayed.
language Which indicates that the code is using the scripting language.
src Which indicates that an external file that holds the code is to be executed.
type is used to replace language; indicates the content type (also called MIME type) of the used scripting language.
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 primary purpose of this structuring was to keep external file references, both CSS files, and 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 that 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 parsing the whole page. 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>