HTML is the language that plays a major role in the rendering of a web page. To emphasize the strength of the role it plays, HTML forms the skeleton of the web page over which other code are dressed as skin and accessories to make it look great!

As from the title, we are going to learn where all the Javascript code can be placed to interact with HTML and provide all the necessary effects. Before we proceed where we can place the code, we will get a view of how a bare HTML document looks like and the elements that make up the structure.

The Basic Skeleton of an HTML document or page

 

In order to write code that can efficiently serve its purpose, it is always good to have a glimpse of what happens behind the scenes. So, we saw that whenever a client requires a service, the client requests the same from a web server. The client requests the service through a user agent which is usually a web browser.

So, whenever the web browser requests a web page, it gets the HTML code as the response. Then it is the responsibility of the web browser to parse (in layman terms, read the code line by line) the HTML code and render the web page accordingly.

The Declaration block tells the browser information about the page it has received. Information like the type of page, the version of the language, and other information go into this section.

The Head section is like a header section to the page. It contains the title to the page as well as any references to code files, style sheets and so on. The code in this section is first executed and then the body of the page is loaded.

The main section of the page is the Body section. Here the contents of the page are put in along with any specific styling information and code to be executed.

Same file or not

Script code can be blended with the HTML document in a flow or it can be placed separately in a file and then linked to the HTML file.

People who are more organized consider putting the code in a separate file, a best practise. Thinking why so? When you separate code from mark up, it will be easy to maintain and keep it clean. But, if the script is light weight, meaning, just a line or two, then creating a separate file and linking it to the HTML code, would be an overhead.

So, you can put your Javascript code in the same file as the HTML or put it in a separate file. When you are putting it in the same file, there are many places in which you can place the code.

Placing the code inside the HTML file itself

So, we are now exploring the first option of keeping both Javascript code and HTML code in the same page.

The browser starts rendering the page from the first line and proceeds to the bottom line by line. So, whenever the browser comes across a Javascript code in between the HTML, it switches to the Javascript mode, executes the code and then returns back to parsing the HTML code.

As and when the HTML elements are rendered, if we would like a piece of code to be executed, we type it in right when it has to be executed. Well, so how do we indicate that a piece of code is Javascript? That is where the <script..>…</script> tag set comes in.

Suppose, we would like to pop up a welcome message to the user, we can use an alert function.

alert(“Welcome!”) would display the message Welcome in a pop up box to the user. When we place this line of code in between the <script> and </script> tag set, this will help the browser identify that it is a piece of script and has to be executed. 

<Script type="text/javascript">
    alert("Welcome!")
</script>

So, here comes the next part. Now we know how to embed our Javascript code into the HTML. But, there is the head section, body section and the rest of the page. So, where do we exactly place this code and is there any change in the way things get done accordingly?

Of course, Yes! It all depends on when you want the code to be executed. There are certain pieces of code that you would want to be executed when the page loads or when it has finished loading. Sometimes it may be a mouse move or a hover. In these cases, we will place them into event handlers as they are to be executed after an event or during it.

Within the <head>…</head> tag

So, usually when you want the code to be executed before even the Body section is loaded, then we place it in the Head section. Here is an example.

<!Doctype HTML>
<html>
<head>
    <script type="text/javascript">
    alert("Welcome");
    </script>
</head>
<body>
</body>
</html>

Within the <body>…</body> tag

his section is concerned with the contents of the page. So any script embedded here would be executed when the body section of the page is being rendered.

<!Doctype HTML>
<html>
<head>
</head>
<body>
    <script type="text/javascript">
    alert("Welcome");
    </script> 
</body>
</html>

Just notice the difference between the two pages. The first example displays the welcome message from the Head section while the second message displays the same while the body is being loaded. Now, to test this order of execution, shall we try to put alerts in both the head and body section to see how things work?

Now, try out this following example and check for yourself if you get dialog boxes similar to the ones shown here.

Notice that the script in the head section has been executed first.

Now, the body section script has been executed. This shows the page is rendered line by line and not in some random order.

After the <body>…</body> tag

This is the ideal place for code to be put if it is okay for the script can be executed after the page has been displayed to the user. Ideally for the pages that have code in the same page, this is the best place unless and until there is a necessity.

Thinking why? Remember, the browser switches from HTML to Script and then back to HTML as and when required? If a script requires additional assets like images to display, then this interrupts the load of the page.  This enables the page to be displayed without much delay.

<!Doctype HTML>
<html>
  <head>
  </head>
  <body>
  </body>
  <script type="text/javascript">
   <!-- Place code here -->
  </script> 
</html>

Placing code in a separate file and linking it

Whenever you want to put either your style sheets or scripts in a separate file, you can link it to the web page using the <script> tag.

When you write a Javascript code in a separate file, you save the file with a .js extension. So, if you save your file with name ‘mycode’ then your file would be ‘myfile.js’.

Generally, the <script> tag is placed in the <head>..</head> tag. In the src attribute of the script tag, the path where the file resides on the server is specified. When the browser comes across the script tag, it requests the server for the Javascript code file to be sent along with the HTML code.

<!Doctype HTML>
 <html>
  <head>
   <script type = "text/javascript" src = "/script/mycode.js">
   </script>
  </head>
  <body>
  </body>
</html>

Now that we have an idea of how and when each section’s code executes, we will be able to code better! Don’t you think? In our further tutorials, we will see how to write code that dynamically alters pages, execute based on conditions and other things.