Functions

  1. Easy way to group a number of commands into a single unit.
  2. Start with the word "function".
  3. followed by the name of the function (use interCaps to be cool).
  4. Parentheses (arguments, if any)
  5. Everything contained within braces { }

In the header put:

<script language="Javascript">
<!---//Hide from old browsers
function exampleFunction() {
    document.write("Welcome to Javascript for Beginners!<br>");
    document.write("This is an example of a function.");
    document.close();
}
//--->
</script>

In the body put:

<form>
<input type="button" onClick="exampleFunction()" value="Example">
</form>

A Closer look at Functions

Just like variables, however, we need to declare our functions the first time they're introduced.

function doSomething() {
    alert(string);
}

I could also have written the function like this:

function doSomething() { alert(string); }

I often write them this way if they're that short. Otherwise I write them in the previous format. Note that in the first example, we write "function". Then we can name our function just about anything our little hearts desire. We could even have called it lateForDinner() if we wanted to. Javascript doesn't care as long as you follow the rules. Those parenthesis are there for a reason. Sometimes you'll use a form to pass some extra information to the function to help it do its job. It might look like this:

function starGaze(planet,num) {
    for (i=0;i<=9;i++) {
        if (planetArray[i].name==planet) {
            alert(planet[i].name + " is " + num + "planets away from the sun.");
        }
    }
}

Okay, don't worry about understanding the code yet. Just get used to looking at it.

Note that there are matching sets of brackets - the same number face left as face right. This is important to remember. Most of your Javascript errors you encounter will probably be missing brackets. The brackets define the beginning and end of a function's little routine or in the case above, subroutines. One routine is looking at a list of planet names and numbers, another is cycling thru a loop to check each line in the list, and finally the main function that encompasses both subroutines. It is also very helpful to follow the format shown above - each subroutine is indented from its encompassing routine. The ending brackets are normally put in line vertically with the beginning of that particular subroutine. So one ending bracket should aline vertically with "if", another with "for", and another with "function".

Let's take a look at a basic function and analyze it a bit.

function myFunction() {
var age = prompt("How old are your socks?","(enter a number)");
alert("Wow, I can't believe your socks are " + age + " years old!");
}

Click on the button above to see this function perform its duties.

Again, like variables, we first declare our functions. We do this by typing the word "function" before each function name. Next you'll see that the function name follows the convention of using a lower case letter for the first word, then initial caps on every word thereafter. This isn't critical, but it just makes it easier to read. Next to the fuction name, you'll always have pair of parentheses (). These parens are often used as sort of a little mail box for info submitted from forms. So if the function needs some kind of input to do its job, there will be a little note in there that gives a variable name to anything it gets from the form. Let's take the previous example:

function myFunction(age) {
alert("Wow, I can't believe your socks are " + age + " years old!");
}

2
5
8
9
10

Loops

A loop is a javascript shortcut that does repetitions of code until a certain result is acheived. For example, if I wanted an alert box to appear with each number, from one to ten, I could write this:

alert("1");
alert("2");
alert("3");
alert("4");
alert("5");
alert("6");
alert("7");
alert("8");
alert("9");
alert("10");

Or, using a loop, write this instead:

for (i=1;i<=10;i++) {
alert(i);
}

Much easier, no? Let's analyze this a bit. In the part that says (i=1;i<=10;i++), the "i=1" means "Start with the number one". The "i<=10;i++" means "Keep incrementing the number by one (i++) until i is equal to 10, then stop. In the "alert(i)", it means substitute whatever number is currently in place for i and put it in the alert. So this little function will keep repeating itself until it has alerted the number 10.

Neato, but how do we make these cool functions go?