Different Ways to Integrate JavaScript into Your HTML Pages

[ LiB ]

As you know, there are two places you can put your JavaScripts in an HTML page: in either the head or body section. In addition, I have told you that you can either embed JavaScript directly into the HTML page or reference it in as an external .js file. One more way you can integrate JavaScript into an HTML page is as a component in an HTML tag.

Placing JavaScripts in the Body Section of the HTML page

JavaScripts embedded with the <SCRIPT> and </SCRIPT> tags can be placed anywhere in the body section of an HTML page. Scripts embedded in the body section are executed as part of the HTML document when the page loads. This enables the script to begin executing automatically as the page loads. For example, the statements shown below demonstrate how to embed a JavaScript within the body section of an HTML page.

 <BODY>   <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     document.write("This JavaScript is located in the body section");   </SCRIPT> </BODY>

Similarly, you can embed multiple JavaScripts in HTML pages:

 <BODY>   <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     document.write("This first JavaScript is located in the body section");   </SCRIPT>   <BR>   <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     document.write("This second JavaScript is also located in the body section");   </SCRIPT> </BODY>

Placing JavaScripts in the Head Section of the HTML page

JavaScripts also can be placed anywhere within the head section of your HTML pages. Unlike scripts embedded within the body section of HTML pages, scripts embedded in the head section are not necessarily automatically executed when the page loads. In some cases, they are executed only when called for execution by other statements within the HTML page. Most JavaScript programmers move all functions and most variables to the head section because this ensures that they will be defined before being referenced by scripts located in the body section of the page.

NOTE

Variables are containers for storing information in computer memory. Functions are groups of JavaScript statements that you can call to perform a specific task. I'll talk more about the benefits of using functions and variables tomorrow.

The following statements show an HTML page with a JavaScript embedded in the head section. This script will automatically execute when the HTML page is loaded.

 <HTML>   <HEAD>     <TITLE>Script 1.3 - Sample HTML Page</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">       window.alert("This JavaScript is located in the head section");     </SCRIPT>   </HEAD>   <BODY>   </BODY> <HTML>

As Figure 1.6 shows, this script displays a message in a pop-up dialog. I'll explain how the script did this tomorrow.

Figure 1.6. Testing your first JavaScript using Internet Explorer

graphic/01fig06.gif

This next HTML page contains an embedded JavaScript that will not automatically execute when the HTML is loaded by the browser.

 <HTML>   <HEAD>     <TITLE>Script 1.4 - Sample HTML Page</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">       function DisplayMsg() {         window.alert("This JavaScript is located in the head section");       }     </SCRIPT>   </HEAD>   <BODY>   </BODY> </HTML>

This pop-up dialog is not displayed this time because the JavaScript statement that displays it has been embedded within a function called DisplayMsg() . As a result, the JavaScript is executed only when called upon to execute from someplace else in the HTML page. For now, don't concern yourself with worrying about what a function is. Just understand that they can be used to create JavaScripts in the HTML page's head section that do not execute automatically.

Referencing JavaScript in an External .js File

To store your JavaScripts in external files, you need to save them as plain text files with a .js file extension. You then need to add the SCR attribute to the opening <SCRIPT> tag in your HTML page as demonstrated here.

 <SCRIPT SRC="Test.js" LANGUAGE="JavaScript" TYPE="Text/JavaScript"> </SCRIPT>

In this example, an external JavaScript named Test.js has been specified. This external JavaScript can contain any number of JavaScript statements. However, it cannot contain any HTML whatsoever. Otherwise you'll end up with an error. For example, the contents of the Test.js script might be as simple as this:

 document.write("This is an external JavaScript.");

There are many advantages to putting JavaScripts in externally referenced files. For starters, by moving JavaScripts out of your HTML pages you make your HTML pages smaller and easier to work with. In addition, you can reuse the JavaScripts stored as external files over and over again by referencing them from any number of HTML pages. This way if you create a script that you want to reference from multiple HTML pages, you can do so without having to embed the same script in different HTML pages over and over again. As a bonus, should you ever want to modify the functionality of an externally stored script, you may do so without having to visit every HTML page where you would otherwise have embedded it.

NOTE

References to external JavaScripts can be placed in either the head or the body section of the HTML page.There is no limit to the number of external references that you can make, and there is no limit to the number of statements you can place in an external JavaScript.

Placing JavaScript in an HTML Tag

JavaScript can also be placed within HTML tags, as shown in the following example.

 <BODY onLoad=document.write("Hello World!")> </BODY>

In this example, the JavaScript onLoad=document.write("Hello World!") statement has been added to the HTML <BODY> tag. This particular JavaScript statement tells the browser to write the enclosed text when the browser first loads the HTML page.

Placing small JavaScript statements inside HTML tags provides an easy way to execute small pieces of JavaScript code. Of course, this option really is beneficial only when executing small JavaScript statements and is impractical for larger JavaScript statements or situations that required multiple lines of code. However, as you will learn tomorrow, you can also trigger the execution of JavaScripts embedded in an HTML page's head section by embedding calling statements inside HTML tags.

NOTE

You may have noticed the unusual spelling of the word onLoad in the previous example.The L in the middle of the word is capitalized, and rest of the word is in lowercase letters .This type of notation is known as camelback notation .This is a perfect example of JavaScript's case sensitivity. If you change the capitalization of this word in any way, you'll get an error when you run your JavaScript.

[ LiB ]