Where to place JavaScript code in HTML file? – Learn JavaScript Online

Hey, guys, in the last post I told you about JavaScript syntax. And I think you enjoyed that session. I have made it impressive for you with some output screenshots.

For today, I have decided to tell you about JavaScript code placement in the HTML file. And this is also very important for professional web-development.

So let’s get involved in it.

What first comes to your mind when you think that – “Where to write the Javascript code in the HTML file?”.

Are you saying the head tag? Yes?

Yes?

Okay, that is fine. You are right. But in Javascript, we don’t have any limitation of writing the Javascript code. But still, we should follow the standard way. Are you asking me why?

It’s very simple dear. e.g we drink coffee in a cup or we serve coffee in a cup, not in a cold drink bottle. Even we can drink it from a bottle too, then why cup? Due to its formal part right?

Yes, as we follow a standardized way for serving. In the same way, we can write js code anywhere but we have some formalities for it too. Let’s have a look on them…

We can write or place Javascript code in following areas:

  1. In between <head>Javascript code here</head>
  2. In between <body>Javascript code here</body>
  3. In both <head>Some of Javascript code here</head><>Some of Javascript code here.</body>
  4. External file placement and attachment to the html file.

Now I am giving you a brief information about all the above-mentioned placement.

In between <head></head>

When we write our HTML basic code structure, we have <head> tag there. It has both starting tag and ending tag as <head> and </head> as an ending tag.

Many of professional keep their javascript code in between these tags. This can be termed as internal Javascript code.

Internal javascript code means to write code in the same file where HTMl code in written. Is it a good strategy? This thing will be revealed at last of the

You can write your code here in between the tags and it should be your first priority. But in some cases, we don’t want our code to list here, at that time you can go for the next option.

Are you looking for  example? Here is the example code and output dear:

In the following program, I am using keyword “var”. Do you know what does it mean? It means variable. When you have to declare variable in the Javascript, you need to write like – “var variable_name = variable_value;”

Secondly, I have used “function”. When you want to create function in the javascript, you need to write it like
function function_name“. 

For now just remember this thing. In future tutorials I will tell you these things in details. So please wait till then.

<!DOCTYPE html>
  <html>
     <head>
          <title>Javascript inside head tags</title>
                <script type="text/javascript">
                     var firstname = "Pooja";
                     var lastname = "Kaushal";

                 function concat() {
                          name = firstname + "\n" + lastname;
                          document.write("My name is ", name);
                          } 
                </script>

    </head>
  <body>
       <button onclick="concat()">Hit Me!</button>
  </body>
</html>
Javascript Code Placement inside <head>. Learn JavaScript with Rahul Rahi. Get best, top and easy JavaScript tutorials online.

Javascript Code Placement inside.

Javascript Code Placement inside <head>.Learn JavaScript with Rahul Rahi. Get best, top and easy JavaScript tutorials online.

Javascript Code Placement inside.

In between <body></body>

After the body tag, we are with <body> tag for Javascript code writing. We can also put our code here in the tag. It is also a most common and also standard way of script writing.

The output will not make any difference. Only the writing style changes. That’s it!

Output screen which I have shown above will remain same for this part also. So don’t be tensed about that. Just the difference is that code is in between the <body> tags.

Hoping for an example code? Okay okay, here it is…

<!DOCTYPE html>
<html>
  <head>
  <title>Javascript inside head tags</title>
  </head>

<body>
   <script type="text/javascript">
     var firstname = "Pooja";
     var lastname = "Kaushal";

     function concat() {
              name = firstname + "\n" +lastname;
              document.write("My name is ", name);
              }
  </script>
       <button onclick="concat()">Hit Me!</button>
</body>
</html>

The output will be same as previous in the head tag. So don’t be tensed about it.

Javascript code inside both head and body tags:

Are you thinking it a very big deal? No, it’s really not. Asking me why? Because all the things are same. Just we have to add the script to both section head and body as I have explained in the below example.

<!DOCTYPE html>
<html>
  <head>
     <title>Javascript inside head and body tags</title>
     <script type="text/javascript">
         //variable decleration is here name welcome_text to store a text value to print.
         var welcome_text = "Hey there, welome to Codingparks.com Javascript Online Tutorial Session!"
         // function is used here in which an alert box is used to prompt the text.
     function welcome(){
                          alert(welcome_text);
                       }
     </script>
  </head>
        <body onload="welcome()"> 
          //onload is used to run function welcome automatically when webpage is ececuted. Its a proprty of body tag.
            <script type="text/javascript">
                    var firstname = "Pooja";
                    var lastname = "Kaushal";

            function concat() {
                     name = firstname + "\n" +lastname;
                     document.write("My name is ", name);
                     }

             </script>
           <button onclick="concat()">Hit Me!</button>
            // onclick property is used with button tag to evoke the function concat for name concatenation on the button click.
        </body>
</html>

Output screens are given below:

Javascript Code Placement inside <head> and <body>.

Javascript Code Placement inside head and body tags.

Javascript Code Placement inside <head> and <body>.

Javascript Code Placement inside head and body tags.

Javascript Code Placement inside head and body tags.

Javascript Code Placement inside head and body tags.

External file linking to the HTML consists of Javascript code:

This method is a very advanced level method. And this method of external linking involves the linking .js file with the .html or .htm file. After the attachment, the code will execute from the attached file, with providing proper source. In this method, whenever which function is in demand, only that will be executed.

This method is treated as the best method in many cases to avoid the one-page complexity of codes.

In the below example I have used the same example of name concatenation as previously I have done. Firstname as “Pooja” and Lastname as “Kaushal” to form “Pooja Kaushal”.

In this example what’s done new? Are thinking the same question? Yes?

Okay, let me tell you exactly what is the secret behind. I have created two different file named as “concat.js” and “javascript-external-linking-example-by-rahul-rahi.html”. 

As you can see in the screenshot provided here:

Learn Javascript online with Rahul Rahi

Learn Javascript online

After this, I have placed javascript code in a separate file named “concat.js”. I have also shown this thing in the following example screenshot:

Learn Javascript online with Rahul Rahi

Now the last step, I have to create a file means .html file consisting HTML content as previously and also the linking of the javascript external file.

Learn Javascript online with Rahul Rahi

Example of code is given below:

javascript-external-linking-example-by-rahul-rahi.html code:

<!DOCTYPE html>
<html>
  <head>
 
  <title>Javascript inside head tags</title>
      <script type="text/javascript" src="concat.js" ></script>
  </head>
  <body onload="welcome()">
     <button onclick="concat()">Hit Me!</button>
  </body>
</html>

concat.js code:

var welcome_text = "Hey there, welome to Codingparks.com Javascript Online Tutorial Session!"
 function welcome(){
                   alert(welcome_text);
                  }
   var firstname = "Pooja";
   var lastname = "Kaushal";

 function concat() {
       name = firstname + "\n" +lastname;
       document.write("My name is ", name);
}

 

Leave a Reply

CONTACT ME