What\'s the difference between HEAD tags and BODY tags?
most HTML books only \'briefly\' mentions and
tags...but they
http://www.w3schools.com/js/js_whereto.asp
You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time.
It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.
The main difference in head and body scripts is that usually people who prefer functions use javascript in the whereas people who prefer inline practices will mostly use it below the document.
Functional
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Inline
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
A HTML file has headers and a "body" (payload) — just like a HTTP request.
The <body>
encapsulates the contents of the document, while the <head>
part contains meta elements, i.e., information about the contents. This is (typically) title, encoding, author, styling etc.
As for your question about JavaScript: In general JavaScript is evaluated as it is (loaded and) parsed. So, if you embed JavaScript in the <head>
section it should be parsed immediately.
The browser will process what's in the <head>
to show the <body>
accurately.
The <head>
holds stuff like what character set your page uses, when to refresh, external sheets or scripts you may want to include, and information about your page.
The <body>
holds only display-oriented stuff, usually HTML based.
It's important to keep the model (i.e. the information) and the view (i.e. the HTML) separate. Why? Later, you might want to update a style, and you don't want to chase it down through all of your HTML, each time it happens. Better to do it at one place for the whole document, in the <head>
.
In my little knowledge:
JavaScript in the head section is usually meant to preload certain files (usually procedures or functions as the case may be). For example, a website that utilizes the Time() or Date() function would require that the .js file that contains those functions be called before the website is fully loaded allowing the instance to be available (preloaded) before imminent usage. Same also applies to other custom functions.
JavaScript in the body section is primarily for adding extra functionality to a website. An example is in the case of a custom .js file where a function is to check for correctness of words in an input string or matching all characters entered in an input string to be of a certain length.
The downside of using either of these two conventions is in calling a custom .js file (meant for website functionality) from the head section. The implication is that the JS file would've already exhausted it's functionality before the website contents are fully loaded.
<script>
tags are run when the browser encounters them when loading the page. The <head>
can't contain content for the page, it can only contain meta-information (titles, descriptions, etc), styles and scripts. Therefore if you place a <script>
tag in the <head>
, you are ensuring that it is run before the browser has started loading the content of the page (which must go in the <body>
).
If you want to manipulate the content of the page, you need to make sure your script appears after the content you are manipulating. This is why people chose to put scripts at the end of the <body>
.
If your code is sloppy (for example, with tags not closed properly), this can cause problems. This is why libraries like jQuery have features to help you run code manipulating the document at the right time.