1. Computing
Send to a Friend via Email

Head Scripts and Body Scripts

Join the Discussion

Questions? Comments?

You don't need to be able to write your own Javascript code in order to use Javascript on your web page. There are a large number of scripts that have been written that are available for you to copy and use on your site provided that you abide by any conditions specified with the script.

When you obtain a script written by someone else who has given permission for you to use it on your site you will still have to install that script into your web page. Depending on what the script does and how long ago it was written the script may be all in one piece or there may be several sections that need to be inserted into different parts of the web page.There should be instructions with the script on where to insert the various pieces but if you are not familiar with HTML even this may not provide you with all of the information you need to know in order to figure out where or how to insert the code.

Often one piece of the code will be referred to as the "head script" or may have instructions to put it into the "head" of the page. Another section may be referred to as the "body script" or you may be told it needs to go into the "body" of the page. To know exactly where to put the scriptrequires that you understand what is meant by the "head" and "body" of a web page.

Each and every web page in existance is written in some form of HTML or XHTML (if you don't know either markup language then you can consider them to be slightly different names for the same thing in so far as this discussion is concerned). Somewhere near the start of the source of the page you will find an <html> tag (traditionally in uppercase but now normally in lowercase) and at the very bottom of the source there will be a </html> tag. With the exception of frameset definitions every web page has two sections defined between these tags. The first of these sections starts with the <head> tag (which should immediately follow the > of the html tag) and ends with a </head> tag. The second starts with a <body> tag (which should immediately follow the /head tag) and ends with a </body> tag (which should immediately precede the /html tag). There may be other entries within the tags themselves but the basic structure of any web page looks like this:

<html><head>

</head><body>

</body></html>

Exactly what goes in each of these two sections of the web page source depends on what the web page is about. For the most part the HTML content between the head tags is information about the page while the HTML content between the body tags is what will display on the page. Javascript can go in both sections depending on just exactly what the Javascript does (which I wont go into here). In any case you shouldn't need to know how to work out what Javascript to put where when you obtain a pre-written Javascript because the instructions should tell you where to place the particular pieces of code.

I am sure that you have figured out by now that a "head script" goes between the head tags and a "body script" goes between the body tags. What may not be quite so obvious is just where within the existing code within those sections to put the code.

In the case of a script to go in the head section it doesn't really matter where you put it as long as you don't place it into the middle of something else. The simplest solution therefore is to place it immediately before the </head> tag.

Placement of a body script is slightly more complicated. The content of the body is what actually displays on the web page and the body script presumably is going to display something on the page as otherwise there would be no reason why it needs to go into that part of the page. You therefore need to examine the current content of the body of the page in order to decide where amongst that content that you want the output from the script to display and that is where you need to place the code. You don't need to panic though if you get it in the wrong place as you can easily move it if it is wrong. The important thing to remember is not to put the code inside of any of the HTML. You can recognise all of the HTML on the web page because it all starts with a < and ends with a >.

There may be one further part for the script along with the head and/or body script. Some scripts contain a section that starts with onload= or onclick= (or something else starting with on). These pieces of code are called event handlers and they do go within the HTML tag that they are to apply to. The instructions with the script should help you to figure out which HTML tag in the body of the page to insert them into.

One very common event handler used in older scripts is the onload event. This piece of code needs to be added to the body tag itself like this (with the specified code where I have put ...):

<body onload="..." >

The problem with making this addition is that you can only add one such script to the same page. The solution to this is to insert a different piece of code to achieve the same effect. The following is equivalent to adding onload to the body tag and provides you with the ability to add more than one such script to the same page.

function start() {
...
}
window.onload=start;

Place this code into the end of one of the head scripts with the code from within the onload that I indicated as ... before placed in the spot marked ... in this code. With this in place you no longer need to add the onload code to the body tag and if you have two or more such script sections to add for different scripts simply add the appropriate code onto separate lines within the new code.

©2014 About.com. All rights reserved.