Way of Using JavaScript | Types of Using JavaScript | Inline-Internal-External JavaScript Tutorial

Way of Using JavaScript:

JavaScript provides 3 places to put the JavaScript code:

Inline JavaScript - Between the <body> </body> tag of html
Internal JavaScript - Between the <head> </head> tag of html
External JavaScript - In .js file

Inline JavaScript :

When a script tag is used in the HTML file, it is called inlining. This means no external JS file is used instead JavaScript is put into an HTML file.

When JavaScript was written within the html element using attributes related to events of the element then it is called as inline JavaScript.

Benefits of Inline JavaScript:

This is extremely advantageous as it can save the web browser round trips to the server. This is because it no longer requires an external file to download from the server-side.

Inline scripts are often seen in places such as Google Analytics tracking code, site verification, and introducing and setting proprietary and external scripting criteria for Webmaster Tools.

Example of Inline JavaScript :

<html>
    <form>
        <input type="button" value="Click" onclick="alert('Button Clicked')"/>
    </form>
</html>

Note : Using inline JavaScript is a bad practice and is not recommended.

Internal JavaScript:

Internal JavaScript code is code that's placed anywhere within the web page between the HTML tags . Many web developers choose to place their JavaScript code before the tag.

When JavaScript was written within the section using element then it is called as internal JavaScript.

Advantages to Internal JavaScript:

If the number of lines of Javascript is relatively small, a web page with internal Javascript loads faster than pages that must reference external code. This is because, as the web browser loads the page and encounters the reference to the external code, it must make a separate request to the web server to fetch the code.

Example of Internal JavaScript :

<html>
    <head> 
        <script>
            function msg()
                {
                    alert("Best JavaScript Tutorials");
                }
       </script>
    </head>
    <form>
        <input type="button" value="Click" onclick="msg()"/>                                                                                    
    </form>
</html>

External JavaScript:

JavaScript code placed in a file separate from the HTML code is called external JavaScript. External JavaScript code is written and used in the same way as internal JavaScript. The file should have the ".js" extension. Writing java script in a separate file with extension .js is called as external JavaScript.

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:

<script src="filename.js"></script>

Let's create an external JavaScript file that prints Welcome to CodeShikhi in a alert dialog box.

alertmsg.js

function msg(){  
 alert("Welcome to CodeShikhi");  
}

Create a html page and use the file functions.js as follows

index.html

<html>  
    <head>  
      <script type="text/javascript" src="alertmsg.js"></script>  
    </head>  
    <body>  
      <form>  
        <input type="button" value="click" onclick="msg()"/>  
      </form>  
    </body>  
</html>

Note : You can place an external script reference in <head> or <body> as you like. External scripts cannot contain <script> tags.

It is recommended to embed all JavaScript files into a single file. It increases the speed of the webpage.

Advantages of External Javascript:

Placing scripts in external files has some advantages:

It separates HTML and code
It helps in the reusability of code in more than one HTML file
It makes HTML and JavaScript easier to read and maintain
The length of the code reduces as only we need to specify the location of the js file.
Designers can work along with coders parallel without code conflicts
Cached JavaScript files can speed up page loads

Disadvantages of External JavaScript:

The browser has to make an extra http request to get the js code.
Code can be downloaded using the url of the js file. This can help coders to steal your code easily.
We need to check each file that depends on the commonly created external javascript file.
If it is a few lines of code, then better to implement the internal javascript code.
A small change to a common js file may cause unexpected results .

Previous Post:

Introduction To JavaScript - History & Application Of JavaScript

Next Post:

Code Structure Of JavaScript | Fundamentals of JavaScript Programming Language | Part - 1

Ashraf JavaScript Tutorial

CodeShikhi

Way of Using JavaScript | Types of Using JavaScript | Inline-Internal-External JavaScript Tutorial