JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript - Placement in HTML File

In this chapter you will learn how to incorporate JavaScript into your web pages.

There are typically three ways to add JavaScript to a web page:

  • JavaScript code can be inserted between <script> and </script> tags
  • Placing the JavaScript code directly inside an HTML tag using the event attributes such as onclick, onkeypress etc
  • Creating an external JavaScript file and then load it within the page through the src attribute of the <script> tag

The <script> Tag

In HTML, JavaScript code must be inserted between <script> and </script> tags.

Run code

Note: Old JavaScript examples may use a type attribute: <script type="text/javascript">. The type attribute is no longer required since HTML5. JavaScript is the default scripting language for HTML5.


JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.

Scripts can be placed in the <head>, or in the <body> section of an HTML page, depending on when you want the script to load.


JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked when a button is clicked:

Run code

Each <script> tag blocks the page rendering process until it has fully downloaded and executed the JavaScript code, so placing them in the head section of the document without any valid reason will significantly impact your website performance.



JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked when a button is clicked:

Run code

Scripts should be placed at the end of the body section, just before the closing </body> tag, it will make your web pages load faster, since it prevents obstruction of initial page rendering.


Placing the JavaScript Code Inline

You can also place JavaScript code directly inside an HTML tag using the event attributes such as onclick, onkeypress etc.

Run code

However, you should avoid placing large amount of JavaScript code inline as it clutters up your HTML with JavaScript and makes your JavaScript code difficult to maintain.


Calling an External JavaScript File

You can also place your JavaScript code into a separate file with the .js extension and then load it within the page through the src attribute of the <script> tag.

The following example point to an external JavaScript file:

Run code

To add several script files to one page - use several script tags:

You can place an external script reference in <head> or <body> as you like.

The script will behave as if it was located exactly where the <script> tag is located.

Note: External scripts cannot contain <script> tags.


Advantages of External JavaScript

Placing scripts in external files has some advantages:

  • It separates JavaScript from HTML
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads
  • Same script can be available to multiple documents

Tip: Usually when an external JavaScript file is downloaded for first time, it is stored in the browser's cache (just like images and style sheets), so it won't need to be downloaded multiple times from the web server that makes the web pages load more quickly.


External References

External scripts can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a script:

Run code

This example uses a script located in a specified folder on the current web site:

Run code

You can learn more about file paths in the chapter HTML File Paths tutorial.