JavaScript – Placement in HTML File

There is adaptability given to incorporate JavaScript code anyplace in an HTML report.

Anyway, the most favoured approaches to incorporate JavaScript in an HTML document are as per the following −

  • Script in <head>…</head> section.
  • Script in <body>…</body> section.
  • Script in <body>…</body> and <head>…</head> sections.
  • Script in an external file and then include in <head>…</head> section.

In the accompanying area, we will perceive how we can put JavaScript in an HTML document in various ways.

JavaScript in <head>…</head> segment

In the event that you need to have a script kept running on some occasion, for example,

when a client clicks someplace, at that point you will put that script in the head as pursues −

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>  
</html>

This code will deliver the accompanying outcomes −

Click here for the result
Hello

JavaScript in <body>…</body> segment

In the event that you need a script to keep running as the page stacks so the script produces a script in the page,

at that point, the script goes in the <body> part of the record. For this situation,

you would not have any function characterized utilizing JavaScript. Investigate the accompanying code.

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <p>This is web page body </p>
   </body>
</html>

This code will deliver the accompanying outcomes −

Hello World
This is web page body

JavaScript in <body> and <head> Sections

You can put your JavaScript code in <head>and <body> segment out and out as pursues −

<html>
   <head>
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Hello World")
         //-->
      </script>
      
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>
</html>

This code will deliver the accompanying outcome −

Hello World

Say Hello

JavaScript in External File

As you work all the more widely with JavaScript, you will probably find that there

are situations where you are reusing indistinguishable JavaScript code on different pages of a site.

You are not limited to keep up indistinguishable code in different HTML records.

The script tag gives a component to enable you to store JavaScript in an outer record

and afterwards incorporate it into your HTML documents.

Here is a guide to show how you can incorporate an outside JavaScript document

in your HTML code utilizing script tag and its src quality.

To utilize JavaScript from an outer record source, you have to compose all your

JavaScript source code in a straightforward book document with the augmentation “.js” and

afterwards incorporate that document as appeared previously.

For instance, you can keep the accompanying substance in filename.js record

and afterwards, you can utilize sayHello function in your HTML document subsequent to including the filename.js record.

Leave a Comment

error: Alert: Content is protected!!