In this example, the instructions that we want to carry out are too long to fit in one line after the onClick. Instead, we define our own function and specify the function after the onClick Click here to see the example. The source code is:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function congrats(first, last){

   document.write("<H2>Congratulations "+first+" "+last + "!</H2>");
   document.write("You have won the sweepstakes. ");
   document.write("Just think, "+first+" how excited the whole " );
   document.write(last + " family will be when you drive up in your brand new car.");
   document.write("<P>Enjoy your new car, " + first + "! ");
   document.write("Good luck to you and all of the " + last + " family.<BR>");
}

</SCRIPT>

</HEAD>
<BODY>

In this example, we will use a form with several input boxes to
get information from the user, and then use that information
to generate a web page.

<BR>
<P>
<FORM NAME="myform">
What is your first name?
<INPUT TYPE="text" NAME="firstname">
<BR>
What is your last name?
<INPUT TYPE="text" NAME="lastname">
<BR>
<INPUT TYPE="button" VALUE="Press Here"
onClick="congrats(document.myform.firstname.value,document.myform.lastname.value)
">
</FORM>

</BODY>
</HTML>

We have already used several functions that were pre-defined as part of the JavaScript language. For example, we used the alert function. In general, when we call a function, we supply some information to the function and the function does something with the information it receives. The data sent to a function are called the function parameters, or sometimes the function arguments. In the case of the alert function, the parameter is

a message. The alert function pops up a window and displays the message in the window. The prompt function can be used with two parameters

prompt("Which course are you taking?", "Core 5");

The first parameter is used for the message to be displayed in the prompt box; the second parameter is used to supply a default answer. Notice that the two parameters are separated by a comma.

When a function has more than one parameter, the parameters are separated by commas.

We can also define our own functions. To define a function, we describe what the function should do with the parameters it receives. In this example, we have a function that we named congrats. The congrats function receives two parameters. The function uses these two words to "fill in the blanks" and produce a custom-made Web page congratulating the appropriate person on winning a sweepstakes.


function congrats(first, last){

   document.write("<H2>Congratulations "+first+" "+last + "!</H2>");
   document.write("You have won the sweepstakes. ");
   document.write("Just think, "+first+" how excited the whole " );
   document.write(last + " family will be when you drive up in your brand new car.");
   document.write("<P>Enjoy your new car, " + first + "! ");
   document.write("Good luck to you and all of the " + last + " family.<BR>");

}

The variables first and last are just place-holders. They are used to describe what the function should do with the parameters it receives. When the function is actually called, the parameters are matched up with first and last. For example, if we said

congrats("John", "Doe");

then wherever first appears in the functions, the instruction would be carried out with "John". So the document.write would be printing "Congratulations John".

In our example, we call congrats when the button is pressed. We have

<INPUT TYPE="button" VALUE="Press Here"
onClick="congrats(document.myform.firstname.value,document.myform.lastname.value)
">

so the two parameters to congrats are document.myform.firstname.value and document.myform.lastname.value That means that the values that were entered into the form are the values that will be sent to the function. The function will use those names to print out the congratulations message.