HTML CSS JavaScript TypeScript HTML Online Editor

JavaScript Tutorial

JavaScript Control Flow

TypeScript Tutorial

Javascript Where To

Previous
Next

There are 3 methods to add javascript to HTML

  • Inline JavaScript
  • Internal JavaScript
  • External JavaScript

Inline JavaScript

You can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other event handler attributes.

Example

Run Code 
<html>
<head></head>
<body>
    <h2>
        Adding JavaScript in HTML Document
    </h2>
    <button onclick="alert('Button Clicked!')">
        Click Here
    </button>
</body>
</html>

Internal JavaScript

You can write JavaScript code inside the <script> tag within the HTML file. This is known as internal JavaScript and is commonly placed inside the <head> or <body> section of the HTML document.

JavaScript Code Inside <head> Tag

Placing JavaScript within the <head> section of an HTML document ensures that the script is loaded and executed as the page loads. This is useful for scripts that need to be initialized before the page content is rendered.

Example

Run Code 
<html>
<head>
    <script>
        function myFun() {
            document.getElementById("demo")
                .innerHTML = "Content changed!";
        }
    </script>
</head>
<body>
    <h2>
        Add JavaScript Code
        inside Head Section
    </h2>
    <h3 id="demo" style="color:green;">
        GeeksforGeeks
    </h3>
    <button type="button" onclick="myFun()">
        Click Here
    </button>
</body>
</html>

JavaScript Code Inside <body> Tag

JavaScript can also be placed inside the <body> section of an HTML page. Typically, scripts placed at the end of the <body> load after the content, which can be useful if your script depends on the DOM being fully loaded.

Example

Run Code 
<html>
<head></head>
<body>
    <h2>
        Add JavaScript Code
        inside Body Section
    </h2>
    <h3 id="demo" style="color:green;">
        GeeksforGeeks
    </h3>
    <button type="button" onclick="myFun()">
        Click Here
    </button>
    <script>
        function myFun() {
            document.getElementById("demo")
                .innerHTML = "Content changed!";
        }
    </script>
</body>
</html>

External JavaScript

For larger projects or when reusing scripts across multiple HTML files, you can place your JavaScript code in an external .js file. This file is then linked to your HTML document using the src attribute within a <script> tag.

Example

Run Code 
<html>
<head>
    <script src="script.js"></script>
</head>
<body>
    <h2>
        External JavaScript
    </h2>
    <h3 id="demo" style="color:green;">
        GeeksforGeeks
    </h3>
    <button type="button" onclick="myFun()">
        Click Here
    </button>
</body>
</html>

Advantages of External JavaScript

  • Faster Page Load Times: Cached external JavaScript files don’t need to be reloaded every time the page is visited, which can speed up loading times.
  • Improved Readability and Maintenance: Keeping HTML and JavaScript separate makes both easier to read and maintain.
  • Separation of Concerns: By separating HTML (structure) and JavaScript (behavior), your code becomes cleaner and more modular.
  • Code Reusability: One external JavaScript file can be linked to multiple HTML files, reducing redundancy and making updates easier.

Asynchronous and Deferred JavaScript

JavaScript can be loaded asynchronously or deferred to optimize page performance, especially for larger scripts. By default, JavaScript blocks the rendering of the HTML page until it is fully loaded, but using async or defer can help improve load times.

async Attribute

The async attribute loads the script asynchronously, meaning the script will be downloaded and executed as soon as it is available, without blocking the page.

Example

Run Code 
<script src="script.js" async></script>

defer Attribute

The defer attribute delays the execution of the script until the entire HTML document has been parsed. This is particularly useful for scripts that manipulate the DOM.

Example

Run Code 
<script src="script.js" defer></script>

How to Reference External JavaScript Files?

We can reference an external script in three ways in javascript:

By using a full URL:

Example

Run Code 
src = "https://www.geeksforgeek.org/js/script.js"

By using a file path:

Example

Run Code 
src = "/js/script.js"

Without using any path:

Example

Run Code 
src = "script.js"
Previous
Next