How to run JavaScript in the page?

You might have heard that, JavaScript can manipulate the page. But, how to execute JavaScript for manipulating the page. In order to do that, you need to load the JavaScript code after the page loaded.

Table of contents

How many ways we include execute JavaScript in a page?

There are a couple of ways you can include JavaScript in a page, but mainly there is two ways you can include JavaScript in a page.

Create a file index.html and index.js. Keep both of them in the same directory as of now.

Paste the following code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="index.js"></script>
    <title>How to run JavaScript in the page</title>
    <script>
      console.log("Inside Head Tag");
    </script>
  </head>
  <body>
    <script>
      console.log("Before H1");
    </script>
    <h1>How to run JavaScript in the page</h1>
    <script>
      console.log("After H1");
    </script>
  </body>
</html>

Paste the following code into index.js

console.log("External File");

1. Internal JavaScript

In internal JavaScript, you can include the code in the page itself. Just put your code inside <body> or <head> tag.

<script>console.log("Before H1");</script>

The above code is an internal JavaScript code. It is placed inside body tag.

Advantages of internal JavaScript

  • No loading of external file - When you put any internal JavaScript on a page, then it does not make a request to load the JavaScript code fro another location.

Disadvantage of internal JavaScript

  • Duplicate code - when you have more than on e HTML page, and all of the pages requires same JavaScript code, then you'll have to repliacate the code in every HTML page.

  • Maintenance - Suppose your JavaScript code is being used at multiple HTML file and it has some bug. To fix that bug, you'll have to change JavaScript present in all HTML files.

  • Browser Cache - Internal JavaScript code can be cached by the browser.

2. External JavaScript

External JavaScript code are written in separate file and they are fetched when page loads.

To include external JavaScript, you need to to put a <script> tag with src attribute.

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

Advantages of External JavaScript

  • Reusability - Suppose you have 100 HTML pages. For every page you want to show the length of the current page. You can get the length by document.body.innerText.length. Then show the length on the page. To do this in all the page, you can not write code in all 100 HTML files. Instead you can create a JavaScript file and include this file in all the HTML pages.

  • Maintenance - Now, you would like to some message along with length of the page. For example, you want to show page length is 500. To change the code, you can just change the code in the file and changes will be automatically reflected in all the pages.

  • Browser Cache - External JavaScript code can be cached by the browser, Suppose, you have index.html page which have reference to index.js. When index.html will load, browser make another request for index.js and cache this. When index.html will load for second time, it'll not make any request to the HTML page. Instead it'll serve the cached page.

Disadvantage of External JavaScript

  • Loading time - When you have a reference to another .js page, then browser make a separate request to load .js page.