DHTML

JavaScript - An Introduction

Where to put JavaScript

Another really important thing we need to talk about before getting into JavaScript programming is where to put it. As you will see, there are several different areas that JavaScript can be put into. We are going to discuss the best places to put it.

The <script> tag

The HTML <script> tag is the tag that tells the browser that the stuff inside it is script of some sort. It is a very good idea to also let the browser know what kind of script it is. When we are going to put JavaScript inside this tag, the tag should look like this:

<script type="text/javascript"> (script goes in here) </script>

The main part of this tag, the type= attribute, is very important. This tells the browser that it is looking at text organized as JavaScript. You should never leave out this part of the tag. Especially if you want your page to validate properly.

You may sometimes see examples on the Web of this JavaScript container that show the language="JavaScript" attribute. This attribute was at one time used to designate the particular version of JavaScript being used, but it is no longer a part of newer HTML languages, so your page may not validate if you use it.

The <script> tag can be used as often as you wish in your document. This way you can have many different scripts on the same page.

Head vs. Body

Most JavaScripts go into the <head></head> area of the Web page. Especially if they contain portions of script that will be re-used. These are sometimes referred to as header scripts.

Scripts can also go between the <body></body> tags of a Web page. Scripts put here are commonly scripts that write out HTML or text into the page.

Inline JavaScript

JavaScript can also be put inline, without the <script> tag contained in another HTML tag. Many people script like this, but it is very hard to re-use code this way, and it is not recommended for any but the simplest of scripts. For most of the scripts in this course, we will be placing them in the <head> or the <body> of the page.

Hiding Javascript from Older Browsers

Some very old browsers don't understand JavaScript at all. Although the vast majority of people now use browsers that understand JavaScript, some people might still be using a browser that doesn't. One of the worst things that can happen is for all your JavaScript to be spilled out all over the screen when someone views your page. Thankfully, there is a way around this.

Although even the oldest of browsers is supposed to ignore any tags it doesn't understand, this is not always the case. So to hide our script from older browsers, we enclose it in HTML comments:

This way, the old browsers will be sure to ignore the script instead of printing it out on the screen. With the comments in place, our script tag now looks like this:

<script type="text/javascript"> </script>

(You don't need the "Hide this script from old browsers" bit, it's only in there for demonstrative purposes.)

Just to be extra safe, most people put a JavaScript comment before the closing HTML comment so that JavaScript will ignore it:

<script type="text/javascript"> </script>

The above script tag is now ready to place scripts inside. It is probably a good idea to save this somewhere (as a kind of template), then re-use it each time you want to place some JavaScript in a Web page.

Where to put JavaScript Summary

JavaScript usually goes between the <script></script> HTML tags.
You should always include the type="text/javascript" attribute in your <script> tags.
Script tags can be used as often as you want in a page.
Most scripts are put into the <head> area of the Web page.
Scripts that write out text or HTML typically go into the <body> section of a page.
Some simple scripts are written inline, contained in an HTML tag.
It is a good idea to use the HTML Comment tag to enclose the JavaScript, with a JavaScript comment just before the closing HTML comment.

Coming Soon:

Feb 13: ISSD 24 - XML

Feb 14: Web Design Level 4: XHTML Advanced

Feb 21: ISSD 23 - Web 2.0 Technology

Feb 23: Facebook for Business
Hours: 2
Cost: Free!

Feb 25: Search Engine Optimization (SEO)
Hours: 2
Cost: Free!

Feb 25: Search Engine Marketing (SEM)
Hours: 2
Cost: Free!

Feb 27: ISSD 24 - OLDB (Online Databases with MySQL and PHP)

Mar 05: ISSD 23 - Ajax

Mar 20: Web Design Level 5: DHTML Introduction

DHTML - TOC - Introduction - Books -
JavaScript - An Introduction - Links - Questions -
1 - 2 - 3 - [ 4 ] - 5 -