Loading Javascript

Methods of loading scripts

1: In the Script tag

The first, and easiest method of including javascript in an HTML file is with the script tag - javascript code is placed between the opening and closing of the tag, and is run by the browser one line at a time, as it arrives. If a script actively prints out text, that text will appear in the browser window as though it was part of the original HTML file, in the location where the script tag was originally located. Thus, the code in the example below:

Would display exactly the same as if it had been this:

The script tag has one required parameters which must be included on each script tag, and one optional one. The type="text/javascript" parameter is required, and tells the browser what language the script tag's contents are in. (It is possible to have other languages than javascript, depending on the browser being used.) The language="javascript" attribute is optional, and is usually included for backwards compatibility to very old browsers such as Netscape and Internet Explorer 3.

Where does the script tag go?

the script tag is able to be placed anywhere either inside of the head of your document, or the body. Which of those locations you use should be based on what exactly it is that your script tag is doing. Here is a list of questions you can ask yourself about your script to see where in your file the script tag should be placed: (Note: some of these items refer to material we will not be dealing with until later in the semester.)

• Does this script output any text? (ie: with document.write or document.writeln) If so, it should go in the location where that text belongs. (ie: if you're printing out a title tag or a link tag, you should be placing it in the head where those tags belong. If you're printing regular text to be displayed on screen, it should be in the body where such things belong.
• Does this script just store information? Scripts that are just setting variable values, or defining functions should be placed in the head area, where they'll be easy to find later on.
• Does this script rely on variables or functions that are created in some other script tag? If so, you'll need to make sure that this script tag is somewhere in the file after the first one.
• Does this script access any tags on the page through the Document Object Model? If so, then your script tag should be after the tag it accesses, otherwise when it runs, it will generate an error.

2: Loading a script from an external file

Some scripts will need to be used on more than one page. With the above method, you must copy that same script to each HTML file you wish to use it inside of. This is highly inneficient, because not only do you increase the chances that you will accidentally introduce an error to the script during one of the copyings, you also add time and effort to maintaining your script, because if you wish to alter your script in any way (to change colours, fix errors, spelling mistakes, or anything else) you must then edit all files in which you have used the script.

Obviously, this is not desirable. Instead, a method of including a script which is stored in an external file should be used, much like was done with stylesheets and the link tag. In this case, we can include the script with just one added attribute to the script tag - src.

Note that unlike with the link tag, you can not close this script tag with a /> at the end of the tag. The script tag is designed to contain things, and so you must close it properly with </script>.

The src attribute for the script tag allows us to point at an external file which contains JUST the JavaScript code, and NOTHING else. Like with CSS files, you should NEVER include HTML tags in your JavaScript files - not even the XHTML comment - any such code will stop your JavaScript from running properly! Below is an example of the entire contents of a JavaScript file, called file.js:

Just like with the normal script tag, this version of the script tag is able to go anywhere in the head or body of your document, and the same conditions should be examined when deciding where to put it.

NOTE: When using the src= attribute on the script tag, you can NOT use the same script tag to include javascript directly in the HTML file. You must use a seperate script tag for this - if you try to use both at once, the browser will automatically ignore the contents of the script tag, and will use only the file pointed to by the src= attribute.

3: From inside of a DHTML Event

This method will be covered in much greater depth later on, but as it is very useful for demonstrating the uses of functions in later sections, it should be explained first. To simplify things at first, we will only discuss using the onclick events of form buttons, rather than the full scope of what events can be used for, which will be discussed during the section on DHTML Events.

JavaScript programming can be considered to be largely "Event Based" - in that any time something happens with the browser, or the web page, or even possibly the computer the web browser is running on, JavaScript regards that thing which happened as an Event, and can attach some kind of significance to that event by running a bit of code every time that event occurs. Note that events can be anything from Clicking on a button, to loading a new page, moving the mouse, or even pressing a key on the keyboard.

The method by which these events are noticed is by carefully placing special attributes in the tags in your HTML code which you wish to watch for the event. Which tag you use depends on what event you're looking for, and where you want it to be used. In our case, we're just going to be using simple form buttons, and the only Event we currently care about is when someone clicks on that button. Thus, inside of the HTML tag which produces the form button, we can include the special attribute onclick - this will cause the browser to watch over the button, and whenever someone clicks the mouse on the button, the browser will run whatever JavaScript code we included as the value of that attribute. Here is an example of this:

Thus, when the button is clicked on, the script inside of the onclick attribute for the input tag will be run, and a popup window will appear and say "Boo!". You should take carefull note here that the quotation marks used around the script ("") are different from the quotation marks used inside of it for the script code (''). This is very important! You can not put any type of quotation mark into a string that it is already being used to contain! If you have some sort of very complex statement which must be run during an event (ie: printing a statement which contains both types of quotation mark) you are better off to create a function which does this task, and run the function from the event in question. (How to do this will be covered in the very next tutorial section.)

4: All scripts on the page are one script

It is important to remember that all script tags on your page are in reality one large program, which runs one line at a time, until it reaches the end. This includes scripts that are directly inside of script tags, and scripts that are loaded from external .js files. The only exception is with DHTML events, which can delay execution of a small piece of code until later. Variables and functions that have already been created in your HTML file will still exist, and will be available to use inside of events as well, as they are not run until after the whole file has loaded, and thus all script tags have been run. Here is an example of this being done:

Remember that for all intents and purposes, the value of the onclick attribute on that button is just another script tag, which only gets run when someone clicks on the button in the form. In fact, it gets run every time someone clicks on it, too, so it could be run more than once.

There are a few important rules to remember when using javascript in DHTML events, because of the fact that they are usually coded inside of XHTML attributes - these rules actually apply to all XHTML attributes, but when dealing with javascript, they make things considerably more complex. In general, these limitations are one of the best reasons for using functions in your javascript code.

• You may not hit enter inside of an XHTML attribute! - the entire attribute value (and thus all javascript code) must be on a single line. This means that long, or complex event code may become very difficult to read and edit.
• You may not use single quotes inside of an attribute value surrounded by single quotes, and you may not use double quotes inside of an attribute value surrounded by double quotes. This means you are limited to only a single type/pair of quotation marks inside attribute values. If you wish to have a DHTML event which prints out text with an apostrophe in it, you have to do so in a function, as the apostrophe will already be in use as a single quote.

5: Comments in JavaScript

When writing scripts in JavaScript, it is often useful to include comments in your script code, so that you are able to go back to it later and fix things without first having to puzzle over what exactly it was that you were doing. Comments in Javascript can be one of two types, as shown in the example below:

The first type of comment will stop the script processor from looking at the rest of the line that it is on - you can put it after your code, to include short notes without taking up a whole line. The second type of comment is the same as the type of comment used in CSS - you begin your comment with a /* and then everything in your script is ignored until you reach the closing */. This can be useful if you have a large comment you wish to make, or to block out sections of code while testing things.

XHTML comments can NOT be used as comments in JavaScript. In fact, they will generate errors if you attempt to use them inside of a separate JavaScript file. There is one place where they are acceptable however, in much the same manner as how they are used in CSS. If you wish to protect the contents of your script from old browsers that don't understand the script tag, and from XHTML parsers, then you should open an XHTML comment immediately inside of your script tag, and then close it just before the end of the script tag.

WARNING! The closing end of an XHTML script command, --> can NOT be placed directly into your script, because -- is a command in JavaScript! To protect your script from this, you should close the XHTML comment on a line which starts with a JavaScript comment, like this: // -->. Here is an example:

Remember, the XHTML comment can be used to protect the inside of your script tag, but you should never use it in a separate JavaScript file!