Uncategorized

Include JavaScript in HTML

JAVASCRIPT BASICS

JAVASCRIPT FLOW CONTROL AND LOOPS

JAVASCRIPT ADVANCED

JAVASCRIPT OBJECT

JAVASCRIPT WEB API AND INTERFACES

The JavaScript code can be inserted in HTML file by using the HTML <script> tag. When an HTML document is loaded with the <script> tag in the web browser, the browser processes the content enclosed inside the script tag as JavaScript code.

The script tag can contain either scripting statements or refer to an external JavaScript file. The script tag provides a src attribute that allows us to add a reference to an external script file.

JavaScript is the default scripting language for most of the browsers.

Script tag Attributes and its Uses

Following is the basic syntax of using a <script> tag:

<script src="JS_FILE_URL" type="..."></script>

Similarly, we can use the <script> tag to directly add the JavaScript code too, like this:

<script type="text/javascript">
    // JS code here
</script>

There are five attributes of script tag which are listed below in the table:

AttributesValuesDescription
asynctruefalseIt specifies whether the script should be executed asynchronously or not.
typetext/ECMAScripttext/javascriptapplication/
ECMAScriptapplication/javascripttext/VBScript		It specifies the Multipurpose Internet Mail Extensions (MIME) type of script. Generally, text/javascript value is used.
charsetcharsetIt specifies the type of character encoding used in the script
defertruefalseIt specifies whether the browser continues parsing the web page or not.
srcURLIt specifies the uniform source locator(URL) of a file that contains the script.

Now that we know about the <script> tag which is used to include JavaScript code in a webpage, let’s see the various different ways in which we can do so.

JavaScript in HTML Webpage

You can use script tag inside an HTML web page to add JavaScript code in the following ways:

  • In the HEAD element (<head>…</head>)
  • In the BODY element (<body>…</body>)
  • To include an External JavaScript File

Let’s cover all of this one by one along with code examples to help you understand them.

1. Script tag with JavaScript Code in <head> Element

Let’s put the script tag inside the HTML head element. The script placed inside the head element is loaded with the webpage and gets executed if any defined event occurs.

The code given below shows how to use the <script> tag inside the <head> element of an HTML document to add some JavaScript code.

1. Script tag with JavaScript Code in <body> Element

You can place a script tag inside the body element of an HTML document too. The script tag inside the body element runs when a web page starts loading in a web browser. Below is the code to show you how to place a <script> element inside the <body> element of an HTML document:

3. JavaScript Code in an External File

Whenever we put lengthy JavaScript code in an HTML document, it affects the readability and maintainability of the HTML document. In addition, sometimes there is a need to use the same JavaScript code in several web pages. In such cases, we can store the JavaScript code in an external file and save that file with the .js extension. All JavaScript code files should have an extension .JS and nothing else.

To link the external file, we can provide its location (URL) in the src attribute of the script tag.

Including External JavaScript Syntax:

This is the way by which we can add an external JavaScript file to our HTML file:

<script src="jsfile.js" type="text/javascript"></script>

The type attribute is optional in the code example above.

Advantages of External JavaScript File:

Using an external JavaScript file has its own merits.

  1. It separates the HTML and JavaScript code and makes the code look clean and easy to understand.
  2. External JavaScript code can be reused in multiple HTML webpages.
  3. External JavaScript code can be cached in the browser. Once cached the browser will not load the JavaScript file again and again and will use the cached version of it. This will make your webpage loading fast.

JavaScript Code in External File Example:

The code given below shows you how to link an external JavaScript file with an HTML document.

<html>
    <head> 
        <title>my first JavaScript</title> 
        <script src="jsfile.js"></script> 
    </head> 
    <body> 
        <p id="script">this is the old text</p> 
        <button type="button" onclick="text()">Click this button to use JavaScript</button> 
    </body> 
</html>

The JavaScript code stored in a file with name jsfile.js

function text() 
{
    document.getElementById("script").innerHTML = "This text has been written inside the JavaScript.";
}

In the code above, we have defined a simple function in JavaScript, we will learn about JavaScript functions in upcoming tutorials.

Including JavaScript in HTML Page: Best Practice

In large projects, JavaScript code can be huge and there can be multiple external JavaScript files included in each HTML page using multiple <script> tags. Yes, we can use multiple <script> tags to include as many external JavaScript files as we want.

For example, if we have 3 JavaScript file, with names, one.js, two.js and three.js and we have to include all of these in our HTML page. We will use 3 <script> tags in this case,

<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>

Now the question is, where should we put the above code in our HTML page. Should we put it inside the HEAD section of HTML code, or should we put it in the BODY section of our HTML page?

Well, if we put it in the HEAD section, then when our webpage will load, all the JavaScript files will be loaded first which can slow down our webpage loading, which is not good.

So, we should load the external JavaScript files used in a webpage, at last, means either just before the closing </body> tag or after the closing </body> tag, so that first our complete webpage loads and then the external JavaScript files are loaded. This way, even if we have large JavaScript files, our webpage will not slow down because of it.

<html>
    <head>
        ...
    </head>
    <body>
        <!-- body of HTML page -->
    </body>
    <script src="one.js" type="text/javascript"></script>
    <script src="two.js" type="text/javascript"></script>
    <script src="three.js" type="text/javascript"></script>
</html>
< prev
next >

Published by krish

3 thoughts on “Include JavaScript in HTML”

  1. Pingback: JavaScript Syntax
  2. Pingback: Output in JavaScript
  3. Pingback: JavaScript Variables

Leave a comment