Home » Online Computer Education » Lean Java Script, Different Ways to Integrate JavaScript into Your HTML Pages, Lesson No. 16

Lean Java Script, Different Ways to Integrate JavaScript into Your HTML Pages, Lesson No. 16

 
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>

 

3

About

The main objective of this website is to provide quality study material to all students (from 1st to 12th class of any board) irrespective of their background as our motto is “Education for Everyone”. It is also a very good platform for teachers who want to share their valuable knowledge.

Leave a Reply

Your email address will not be published.