This page provides a simple overview of how this is done. We will cover all of this in more detail during the rest of the course, but this brief discussion will give you enough information to get started.

Creating Functions

Much of JavaScript programming involves using Events to trigger Functions. Functions are usually "declared" in the head section of the HTML document. You can create a simple Function by placing the following code between script tags in the head section of an HTML document:

function simpleFunction() {
      alert("This sure is a simple Function.");
}

Click here to see what this function does.

Here's a word-by-word description of how this code creates this Function:

• function This is a JavaScript command that is used to establish a new Function.

• simpleFunction This is the name of the Function, which I made up. Function names must be single words that start with a letter and they cannot be the same as existing JavaScript commands. It's a common convention to run multiple words together capitalizing the first letter of each word following the first one.

• () The double parentheses always follow a Function name, both when it is being declared, as in this case, and when it is being "called" by an Event Handler, as you'll see below.

• { and } These curly brackets are used to enclose related lines of code. In this very simple Function, there's only one line of code to enclose. If there were more lines of code in this Function, they would all be enclosed between this one set of curly brackets -- that's how JavaScript knows which lines of code apply to the Function we're defining.

• alert() This is a built-in JavaScript command that shows a dialog box containing whatever text message is placed between the parentheses. In this case, the message is: "This sure is a simple function."

• ; The semi-colon is used to end every line of code that doesn't end in a curly bracket.
  
  NOTE: Always pay close attention to matters of punctuation -- ignoring punctuation is the second most common mistake.

Referring to Properties and Methods

Properties and Methods are always associated with an Object. When referring to an Object's Properties or Methods, the Object and the name of its Property or Method are strung together using dots. For example, bgColor is a Property of the document Object. If you wish to refer to the background color of a document, it looks like this:

document.bgColor

Where document refers to the HTML document Object, and bgColor is the background color Property associated with it.

So, here's a simple function like the one I used on an earlier page to change the background color.

function makeBGColorRed() {
      document.bgColor = "red";
}

function makeBGColorWhite() {
      document.bgColor = "white";
}

Triggering Functions with Events

To complete this basic overview, here's how you can trigger the above function using an onClick Event.

Declare the function makeBGColorRed() in the head section of an HTML document. Then build a link like the one below and put it somewhere in the body of the document.

<FORM>
    <INPUT TYPE="button" VALUE="Click here to make the background red."
      onClick="makeBGColorRed()">
    <INPUT TYPE="button" VALUE="Click here to make the background white, again."
      onClick="makeBGColorWhite()">
</FORM>

Here's how this link will appear on the Web page.

These are the basic techniques that allow you to add JavaScript to a Web page.