Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Where to put JavaScript in an HTML Document ?

  • Difficulty Level : Basic
  • Last Updated : 13 Mar, 2019

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Examples:




<!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>

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:




<!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>

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:




<!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>

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
Recommended Articles
Page :