the <script> tag

scripts v. events

JavaScript events are just the start. They are not actually attributes, but they have the appearance of them, being neatly containable within individual tags. In fact what these actually are, are references to JavaScript functions that the browser can pick up and activate in certain circumstances. But in the examples shown on the events page, the objects being called up were pre-defined. In other words, it was possible to give the browser all necessary information from within the event handler (or more generally, from within the tag). Don't underestimate the power of this though - the calculator here has been rendered entirely by this method...

I should point out that's not my own work, although it's not really a very complex thing to do with some knowledge of JavaScript. I'll tell you where you can find ready-made JavaScript creations like that in the section below (as linked).

If you look at the code of this page you will see that despite it clearly being a more complex creation than the things we saw on the events page, it is still all included within individual tags (form buttons, as it happens - see lecture 9). But there are also advantages to be gained from moving scripts out of the confines of tags. It is possible to define a function in the document header, and then refer back to it in the body. Or, you may have several identical events in your document and want to save some time by only defining the event once, but calling it from several different places (an example of that comes on the page about simple JavaScript functions). This is where the <script> tag comes in.

Again it is useful to refer back to a previous page - that on preloading images, to be exact. Recall that there, the code necessary to conduct the image changing was split, between the body of the page and the header. When you need to put code in the header like this you need to enclose it in <script> tags, like so:

<script type="text/javascript">
<!--
no1 = new Image(379, 412);
no1.src = "jupiter.jpg";
no2 = new Image(379, 412);
no2.src = "jupiterpainted.jpg";
function changeimage (imgTagName,imgObj)
{
  if (document.images)
    {
    document.images[imgTagName].src = imgObj.src
  }
}
// -->
</script>

The type attribute is obligatory, and should (with the applications for which you'll be using this) always take the value as shown. Do note that you will often see language="JavaScript" used instead of this, and while this works perfectly well it is not part of the XHTML 1.0 standard, and will therefore not validate. type will, however.

The only other thing to really draw attention to at the moment is the comment tags which lie inside the <script> tag. Some older browsers cannot handle JavaScript, but by commenting out the contents of the tag (but not the tag itself, note), this potential problem is removed. Note that the comments should be on separate lines as shown in the code above.

For some information about the sort of stuff you get within the <script> tag, and how to call it from within the document body, see the page on starting with JavaScript functions.

Back to the top

Ready-made scripts

Although you might be thinking JavaScript is way too complicated for you to start incorporating into your pages, there is a cop-out solution (which I use all the time myself...). Many sites act as "libraries" which feature scripts that anyone can use in their page as long as they include a link referring back to the original site. The calculator you saw above was from The JavaScript Source and is an example of the much more elaborate things you can do with JavaScript if you know how. (That link will, as ever, open in the second browser window.)

To get scripts like this into your page all you need to do is to copy and paste the relevant bit of source code into the body of your HTML file. JavaScript source code libraries have thousands of different scripts you can copy into your own page with a minimum of effort - most of these libraries ask you to do just one thing, which is to include a link back to them (some say that you should not alter the code at all either - you will find instructions usually in the same place as you find the code).

However, although copying sections of other people's code into your own HTML is a good way to introduce JavaScript into your pages, you are obviously limited in what you can achieve as you can only do things that have been done before, and certain more personalised effects will be unavailable to you unless you are able to modify existing scripts or create your own from scratch.

There's one other word of warning. Upon finding all these marvellous, ready-made scripts just waiting to be harvested, some users get over-excited and start cramming their pages with dreadful gimmicks. Here are some of the worst offenders - scripts that:

• cause sparkling lights, dots, or swirly things to follow the reader's cursor around
• make pages "fade in" to view, sometimes accompanied with colour changes (OK once, but if this happens every time a page loads, it becomes phenomenally annoying)
• simply don't work, either because the script itself is broken, or the author has missed something out in its operation; not only is this a waste of download time, it looks incredibly unprofessional, and is in any case a pain to put right (seeing as how you didn't write the script in the first place)
• leave the user facing about fifteen "pop-up" windows by the time they want to close the browser (a very common technique used by tacky Web advertising, but that's no excuse for you to repeat it)

There are many more examples of excess. The very titles of some of the available scripts from the The JavaScript Source make me cringe: "Flashy Fading Rollover Menu"? Please! Also, adding in code like this can cause a page to fail to validate. It can also throw out a well-crafted, stylish site: it's like, you've spent ages putting together a meal full of your own personal touches and style, and suddenly for pudding you serve up the packet cheesecake. Only use scripts which fit your site, in other words.

But having said all that there are a lot of interesting and useful things on there - remember, however, that they gain their power through selective and discerning use, not constant exposure. And, unfortunately, past experience with the inclusion of ready-made scripts forces me now to include the following disclaimer: It is not the responsibility of myself or the ACOM demonstrators to try and work out what is going wrong with a script you've copied in from somewhere else. Sorry! But don't let all that put you off looking around for ready-made scripts. They're another technique, that's all - one that like every other technique can be used well, or used badly.

Back to the top

Back to the menu for lesson 8