further JavaScript

This page is a continuation of the page on starting with JavaScript functions and if you haven't read that page first, you should do so.

You may have noted on the previous page that we were able to call the same function from two different locations on the page, and pass a different argument to the function in each case. The function there was very simple, but some are more complex. In that case, it would be quite a time-saver to only have to type a repeated, complex function once, rather than placing it in tags each time, in full.

Here's an adaptation of some links from another page where we used JavaScript to open a variety of new windows:

One way of doing this is to include long onclick events in each link. But here there is just an href attribute. However, the links do not call up new HTML files, but instead, call a JavaScript function defined in the document header. The links each look like this - with the name of the HTML file different each time, according to which flag they surround:

<a href="javascript:newWin('argentina.html');">

Remember the elements of JavaScript. The link now says to the browser, "call a function with the details that follow the colon". Actually, you've seen this sort of thing before, in mail-to links, where the browser opens a mail application rather than trying to download another file, and passes to that application whatever follows the colon: in that case, an e-mail address. Here, it passes the function name and argument. The function newWin, as in previous examples, is defined in the document header:

function newWin(URL)
{
aWindow=window.open(URL,"countrywin","toolbar=no, width=500,height=500,status=no,scrollbars=yes, resize=yes,menubar=no"); }

(IMPORTANT: note this is a case where the text above should be run together without spaces or line breaks. I have had to introduce line breaks here to fit it on the page, but the actual code does not contain them.)

The object in this case is window.open. That takes three variables, though the third is very long and itself subdivided. The first variable is the URL that the new window contains. This is a "genuine" variable; in other words, it can take different values depending on what is passed to it in the document body. (You can tell it's like this because it doesn't have quotes around URL.) So, each time the function is called, we need to pass it this info: "argentina.html", "bolivia.html" and so on. The second variable is the name of the new window. (This could be left blank in this case but I have included one for clarity.) The third variable is the long string of information about what the window should look like.

In practice this makes little difference to the functionality of the page, but it is a more efficient use of code, and easier to put together. The best thing to do is go back to the opening new windows page and compare the code of the two methods, to see which one you ultimately prefer.

Going on from here

There have been several occurrences of JavaScript on this site so far, and more will come. To repeat, there is simply not the time and space in this course to take things any further. Like many other advanced techniques, remember that JavaScript is just padding. Be wary of using it to pass on any important information that is not available by other means. As with image maps, always have a text alternative, and/or don't make the JavaScript absolutely integral to the page, just in case a reader can't view it for whatever reason.

If you want to go further with JavaScript then get yourself a decent manual. O'Reilly's series of manuals are always amongst the best available, and the relevant one is JavaScript in a Nutshell by David Flanagan. There is also the JavaScript Pocket Reference by the same author, but this is pretty expensive for what you get.

It might also be a good idea to learn some basic principles of programming - to get a better handle on what a function is, variables, arguments, and (if you are thinking of writing your own scripts) some processing terminology such as iteration. JavaScript syntax is modelled on Java syntax, which in turn is modelled on C++, so anyone who picks up these more complex languages should have no problem with JavaScript. In turn, JavaScript can serve as a useful primer for some true programming. You may, of course, choose to take (or already have taken) the relevant ACOM module here: ACOM1910: Programming IT Skills. This requires no foreknowledge of any programming, incidentally.

Note that more complex web page interactivity, of the sort you might see on e-commerce sites, may also be written in the languages Perl or (for online databases) SQL or its variants. Again, though we can't offer this level of tuition in this course, there are several manuals and start-up guides available. You should realise, however, that in order to make full use of these techniques you may need access to a server at a level that is not possible on the normal Leeds University student system. If you do become interested in programming web page functionality at this level, you will have to contact an Internet Service Provider and establish the means by which you can incorporate these kinds of techniques on your site.

Happy scripting!

Back to the top

Back to the menu for lesson 8