Where To Put JavaScript

In this tutorial, We are going to learn, where to put or how to include your JavaScript inside an HTML so it connects inside a website. In HTML <script> tag is used to insert JavaScript in between.

<script>:

This tag is used to insert JavaScript between <script> and </script> tags. In older JavaScript’s <script type=”text/javascript”> was used but the type attribute is not required now.

Example:

<script>
document.getElementById("change").innerHTML = "Welcome to second tutorial!";
</script>

There are three ways in which you can put JavaScript inside an HTML,

  1. Inside <head>
  2. Inside <body>
  3. External JS file

Inside head

First, we will see how to include JavaScript inside a <head>

The <script> can be placed inside a <head> section of HTML. Normally, JavaScript code is inside the <head> section to separate it from the main contain and encapsulate in <head> section.

Example:

In this example a JavaScript function named changeP() is placed inside a <head> section inside a <script> tags. The function is called when the mouse hovers over the button.

<!DOCTYPE html>
<head>
   <script>
      function changeP() {
         document.getElementById("changeP").innerHTML = "Study4Geeks";
      }
   </script>
</head>

<body>
   <h3>JavaScript in Head</h3>
   <p id="changeP">study4geeks</p>
   <button type="button" onmouseover="changeP()">Hover mouse over me</button>
</body>
</html>

Inside Body

After seeing the JavaScript in the <head> section, we will see how and why to include JavaScript in the <body> section.

If the script needs to run at certain points within the webpage’s layout, like generating some text or write something on click, you should put it at the point where it should be called within the <body> section.

Example:

In this example, a function changeP() is placed inside <body> section. The function is called when the mouse hovers over the button.

<!DOCTYPE html>
<head>

</head>

<body>
   <h3>JavaScript in Body</h3>
   <p id="changeP">study4geeks</p>
   <button type="button" onmouseover="changeP()">Hover mouse over me</button>
   <script>
      function changeP() {
         document.getElementById("changeP").innerHTML = "Study4Geeks";
      }
   </script>
</body>
</html>

External JavaScript file

Scripts can also be placed in external files. External scripts are used to manage extra-large scripts and to use the same scripts in several webpages like using the same navigation bar on every web page.

These scripts have extension ‘.js’. You can put external JS in <body> or <head> section of webpage by using ‘src’ attribute of <script> tag.

You can add as many scripts as you want. It will act as it was exactly located where <script> tag is placed. External scripts do not have <script> tag.

Syntax:

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

Advantages of external JavaScript file

It differentiates the HTML and JavaScript code which helps us to manage both codes separately. The same code can be used for several web pages so you don’t have to write it again and again. Once the JS file is caught by the browser, webpages load quickly.

External Reference

  • External scripts are referred to with the URL which will direct to the JS file.

Example:

<script src="www.study4geeks/JSexample.js"</script>
  • The script can be located in the specified folder.

Example:

<script src="/main/JS/index.js"> </script>
  • There could be more than one JS files.

Example:

<script src="index1.js"> </scripts>
<script src="index2.js"> </scripts>
Do you know?
Where To Put JavaScript This article is contribute by Rushikesh Tayade If you want share your knowledge on Study4Geeks then go to login section.