Functions

A function's purpose can be glimpsed at by looking at the other names for it in other languages. In other languages, a function is called a "method," a "macro," or a "routine." A function describes a set of instructions to be done in a specific order. We give this set of instructions a name, so that we can refer to it later, and by doing so, we increase the effective vocabulary of the computer, at least for this site. If you write a method called "sayWelcome," then the computer now knows how to do something new - we are allowed to tell the computer to "sayWelcome" as a command, and it will look up where we defined what that means and follow those instructions, step by step.

To define a function, we first have to put it in a ... tag, which gets put in the ... section. We use the keyword "function" and follow that with the name of the function we are defining, which must end with a set of parentheses. (This makes the computer consider that name as a verb.) Then, between a set of {curly brackets}, we list the commands that define what this method does. Here's an example: code format="html4strict"  function sayWelcome {       alert("Howdy!"); } code In this case, the definition of sayWelcome is only one line long, so this is a pretty simple function.

Note that we have only defined what "sayWelcome" means - we haven't told the computer to actually do this. If this was all we wrote, then we wouldn't see anything happen. To make this happen, we need to tell the computer to actually "sayWelcome" somewhere. For example, code format="html4strict" Greetings! code If we put this code in the body of the page, it would create a hyperlink that said "Greetings!" Clicking this link would then cause the computer to execute the (very short) list of instructions in "sayWelcome." As you may remember, the "return false;" command at the end prevents the hyperlink from loading a new web page.

Parameters
Sometimes, we may want to send some information to the function. For instance, we might wish to have a function that can say Welcome to a specific person. On a given page, it might want to say welcome to two different people, Alice and Bob. Although we could write two different methods, "sayWelcomeToAlice" and "sayWelcomeToBob," it would be nice if we could write one method that could work for either case, since they are so similar. We might call this method "sayWelcomeTo" - and when we call this method, we would send the name to the function that it should use. That is, we would like to write the method so that we can do the following: code format="html4strict" Greet Alice Greet Bob code Will this work? No, not yet, but we can write a function that will let it work. Notice that we put a value in quotes inside the parentheses. This is the information that we will send the function. (The fact that we put it in quotes means that it is a string: we are sending the letters A-l-i-c-e, rather than a variable called Alice.) When we write the function, we need to write it so that it expects this information and has a way to keep track of what was sent. To do this, we create a temporary variable which will automatically be filled in with either "Alice" or "Bob" or whatever when the function is called. In this case, we will call that temporary variable "name." code format="html4strict"  function sayWelcomeTo(name) {

} code The fact that we put "name" inside the parentheses indicates that whenever we use the "sayWelcomeTo" method, we need to send it some information - whom to greet. That information will be stored in "name." Then we can use that information when we fill in the curly brackets: code format="html4strict"  function sayWelcomeTo(name) {      alert("Howdy, " + name + "!"); } code This will make the alert show up with a string that consists of a combination of "Howdy, " whatever was stored in the //name// variable and an exclamation mark.