JavaScript – Script Placement

In Tutorial 2, we created a html file and placed the script in the <body> </body section of the html file. But in this lesson, we are going to see various ways we can place the JavaScript code. We would look at four ways:

 

  1. Script in the <head> section
  2. Script in <body> section
  3. Script in both <body> and <head> section
  4. Script in External Files
  5. Quiz

 

Let’s now see how these works.

 

1. Script in the <head> section

Now, you can also place the <script></script> tag inside the <head></head> section of the html page.

So try it. Move with the same code we wrote in Tutorial 2, move the <script></script> tag into the head section. That is below the <title></title> tag.

You will have it a shown below.

 

<html>

<head>
   <title>Your Second Program</title>
	
	<script language = "javascript" type = "text/javascript">
   
	document.write("Welcome to JavaScript. Enjoy!")
	
   </script>
   
</head>

<body>   
   
</body>

</html>

 

If you create and view this file, then it works fine as well.

However, this is normally used when you want the script to execute on some event. For instance, when a user clicks a button. In this case, you put the code inside a function. Then you call this function on button click event. To to this you simply assign the name of the function as value to the onclick attribute of a button. The complete code is given below.

Try  it to see how it works

<html>
   <head>      
      <script type = "text/javascript">
         <!--
            function greeting() {
               alert("Welcome to JavaScript")
            }
         //-->
      </script>     
   </head>
   
   <body>
      <input type = "button" onclick = "greeting()" value = "Greeting" />
   </body>  
</html>

 

So, in the code above, when the user clicks on the button, then the function in the <head> section will execute.

 

 

2. Script in <body> section

This is similar to the code we wrote in Tutorial 2. This means that the code would execute immediately the page loads. Sometimes you may need a code to generate the content of the web page. In this case, you place it in the <body> section. It runs immediately the page is opened.

Try the code below to see how it work.

 

<html>
   <head>
   </head>
   
   <body>
      <script type = "text/javascript">
         <!--
            document.write("Welcome to JavaScript")
            document.write("This is a second line of code") 
         //-->
      </script>
      
      <p>This text appear in the body of the page </p>
   </body>
</html>

 

 

3. Script in both <body> and <head> section

It is also possible to place the <script> tags both in the body and in the <head> section. I recommend you try it yourself.

 

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

 

 

4. Script in External Files

In this case, you place your JavaScript code in an external file. This is necessary if you need to use the same script in many pages. Instead of writing the script in the pages, you simply write it in just one single file. Then you can import this file into any page you want to apply the script.

Create a file with the content below and name it myfile.js.

 

function greeting() {
   alert("Welcome to JavaScript")
}

 

Then create a html file with content below. Both files should be in the same folder.

 

<html>
   <head>
      <script type = "text/javascript" src = "myfile.js" ></script>
   </head>
   
   <body>
      This is the body of the page
   </body>
</html>

 

Then open the html file. You will notice that it displays an alert as defined in the myfile.js script file.

 

5. Quiz

Here is a quiz for you:

What is the role of the <title></title> tag?

Leave your answer in the comment box below.