Where to put JavaScript in an HTML Document ?

JavaScript in body or head: Scripts can be placed inside the body or the head section of an HTML page or inside both head and body.

JavaScript in head: A JavaScript function is placed inside the head section of an HTML page and the function is invoked when a button is clicked.

Examples:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   <head>
      <script>
         function gfg() {
           document.getElementById("demo").innerHTML = "Geeks For Geeks";
         }
      </script>
   </head>
   <body>
      <h2>JavaScript in Head</h2>
      <p id="demo" style="color:green;">geeksforgeeks.</p>
      <button type="button" onclick="gfg()">click it</button>
   </body>
</html>

chevron_right


Output:
Before clicking the button

After clicking the button

JavaScript in body: A JavaScript function is placed inside the body section of an HTML page and the function is invoked when a button is clicked.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   <center>
      <body>
         <h2>JavaScript in Body</h2>
         <p id="demo">geeksforgeeks.</p>
         <button type="button" onclick="gfg()">Try it</button>
         <script>
            function gfg() {
              document.getElementById("demo").innerHTML = "Geeks For Geeks";
            }
         </script>
      </body>
   </center>
</html>

chevron_right


Output:
Before clicking the button

After click on button

External JavaScript: JavaScript can also be used as external files. JavaScript files have file extension .js . To use an external script put the name of the script file in the src attribute of a script tag. External scripts cannot contain script tags.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   <center>
   <body>
      <h2>External JavaScript</h2>
      <p id="demo">Geeks For Geeks.</p>
      <button type="button" onclick="myFunction()">Try it</button>
      <script src="myScript.js"></script>
   </body>
   <center>
</html>

chevron_right


Output before clicking:

Output after clicking:

Advantages of External JavaScript:

  • Cached JavaScript files can speed up page loading
  • It makes JavaScript and HTML easier to read and maintain
  • It separates the HTML and JavaScript code


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.