Ways of Embedding and Integrating JavaScript in the HTML Pages
(js tag, javascript embed tag, embed javascript into html, include javascript file in html, javascript within html, include javascript file, include js file in html, add js file to html)
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.
As we already told you that we can
put our JavaScript code in anywhere in <head> or in <body> tags. We
told you that you can embed your code directly or in your code or by saving it
in another file and then referring the web page to get data from that external
file. Here we are going to define how to use both ways of embedding code in an
HTML page.
Using or Embedding JavaScript Code in the Body Section of an 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 TYPE="Text/JavaScript"
LANGUAGE="JavaScript" >
document.write("Code embedded in the body of an HTML page.");
</SCRIPT>
</BODY>
JavaScript can be used or embedded
more than once in the HTML pages.
<BODY>
<SCRIPT TYPE="Text/JavaScript"
LANGUAGE="JavaScript" >
document.write("First embedded code in the body section.");
</SCRIPT>
<BR>
<SCRIPT
LANGUAGE="JavaScript" TYPE="Text/JavaScript">
document.write("Second embedded code in the body section.");
</SCRIPT>
</BODY>
Embedding the JavaScript in <Head> and </Head> tags in HTML pages
JavaScripts can also 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. We'll talk more about the benefits of using functions and variables in
upcoming posts.
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>Programming Dost Home Page</TITLE>
<SCRIPT TYPE="Text/JavaScript" LANGUAGE="JavaScript">
window.alert("JavaScript is executing from the Head section");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
<HTML>
Using JavaScript with an External file in HTML pages
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 stated here.
<SCRIPT SRC="myExternalFile.js" TYPE="Text/JavaScript"
LANGUAGE="JavaScript" > </SCRIPT>
In this example, an external
JavaScript named myExternalFile.js has been used. This external JavaScript can
contain any number of JavaScript statements or code. However, it cannot have
any HTML whatsoever. Otherwise you'll end up with an error. For instance, the
contents of the myExternalFile.js script
might be very simple as follows:
document.write("External JavaScript for the friends(dost)
of Programming Dost.");
There are many advantages to putting JavaScripts in externally
referenced files. For beginners, by getting 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 several HTML pages, you can do so without
having to insert the same script in all HTML pages over and over again. As a plus,
should you ever want to alter the functionality of an externally stored script,
you can do it by changing the code in the external file and all is done for
you.
NOTE
There is no limit of the external file which can be called in
an HTML page. And there is not limit of code use in the external file.
Use of JavaScript in the HTML tags in Web Pages
JavaScript can also be placed within
HTML tags, as shown in the following example.
<BODY onLoad=document.write("Hello World! From
Programming Dost")> </BODY>
In this example, the JavaScript onLoad=document.write("Hello
World! From Programming Dost ") 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.
No comments:
Post a Comment