starting with JavaScript functions

JavaScript takes us beyond just the marking-up of text and into the realms of proper programming. JavaScript is a simplified version of the full programming language, Java, a language with certain security features which made it ideal for use on the Web (and which I'm not going to get into). But to describe fully even the simplification that is JavaScript is beyond the scope of this option. But we can make a start, and for those who feel inspired to learn more, some links are provided below. All will open in the second browser window.

• http://javascript.internet.com/ The JavaScript Source - Hundreds of Scripts
• http://www.webreference.com/javascript/ Webreference.com's JavaScript tip of the week
• http://www.javascriptmall.com/learn/ The JavaScript Learning Centre
• http://www.pageresource.com/jscript/ A links page of JS tutorials.

If you do a web search on JavaScript you are bound to come up with hundreds of other examples, so do not stop at these.

In JavaScript a few commands are written in a sort of short-hand, and an understanding of what these characters represent will be useful. The { opening curly bracket symbol means "begin" in JavaScript, and the } closing curly bracket means "end". (It's the same on style sheets, where the { marks the beginning of a single set of instructions and the } marks the end.) As with most programming languages, sets of instructions which are to be carried out together start with a "begin" and finish with an "end". If you have a number of statements making up a command (do this then that then the other) each statement is separated from the other statements by a semicolon (again, there is a parallel in style sheets). All JavaScript programs start with a <script> tag and finish with a </script> tag. The JavaScript program usually goes in the head of the document as that is the part of the HTML file which is read first - this ensures that the scripts for a page are all loaded before the page content is displayed (so if the scripts affect the content there won't be a problem).

To see what this all means in practice, let's start with this simple example. Try typing something into the text box below, and clicking on the button:

Now obviously that's an alert, as described on the page about onClick and other events. The onClick event is built into the form button, and here's the HTML that produced it:

<form action="">
  <input name="Textbox" type="text" />
  <input name="submit" type="button" value="What's your name?"
    onclick="yourname(form.Textbox.value)" />
</form>

But we can't use an ordinary alert, because of the variability of the text, depending on what name (or any other text) the user types. Somehow, the contents of that form box must be passed to the alert - and, incidentally, have other text added to it (the "Hello... !" bits). What the onClick event in this case actually contains is a call to a function defined in the document header. This function is called yourname, and it is defined (between <script> tags) in the header as follows:

function yourname(whatname) { alert ("Hello, "+whatname+"!") }

Let us take apart this line of code bit by bit.

• function: tells the browser that what follows is the definition of a function.
• yourname: the name of the function.
• (whatname): the argument of the function. In a lot of ways this is the key bit. Imagine that the brackets represent a sort of "link" between the definition of the function (in the page header) and the moment that function is called (the onclick event). Whatever is contained in the brackets at the moment the function is called is then assigned the identifier whatname.
• {: the start of the actual function definition. Everything so far has just been involved in assigning identifiers, but the opening curly bracket, as said above, means "the function proper starts here."
• alert: should be obvious; this is what the function will actually do.
• ("Hello, "+whatname+"!"): the contents of the alert. This is made up of three elements. The first and last are standard strings of characters (in the case of the second string there is only one character, the exclamation mark). They are contained within quotation marks to let the browser know they should be rendered exactly as typed. The second one says, "take the contents of whatname and add it in between the two other strings". And what's "whatname"? It's whatever got passed to the function when it was called. More on that below.
• }: finally, we let the browser know the function is complete. There is only one instruction here so we don't need a semicolon to separate things out.

Remember that whatname will "pick up" the value passed to it when the function is called in the onclick event. So it's the contents of the brackets after yourname which are the final part of this function:

• form.Textbox.value: passes whatever the value is of the named form element, Textbox (itself defined within the textbox's <input> tag).

I know all this sounds complicated - and it is, compared to HTML - but hopefully, if you look at all this carefully, you can see how it fits together. Things might be clarified by the following example as well. This calls the same function (yourname), but from a different context (still an onClick event, but in a link, not a button) and with a different argument: the code follows the link. Note now that the argument is not a variable, but a fixed quantity; the string of characters "World". Fixed quantities are identified as such as they appear in quotation marks, but note the need for single quotes. Had I enclosed 'World' in double quotes the browser would have become confused and assumed the function had ended after the opening bracket.

Hello World!

<a href="#here" onclick="yourname('World')">Hello World!</a>

To avoid this page becoming too long I've basically split it into two. So even though the page on further JavaScript isn't really a separate topic, it's on a separate page: so follow the link to continue.

Back to the top

Back to the menu for lesson 8