The JavaScript Diaries: Part 4 - Page 4

[previous] [next]

The JavaScript Diaries: Part 4

Parameters

Parameters (also known as "arguments") allow a function to import values from outside the function, when a function call is made. The parameter is stated within the parenthesis following the function name, i.e. function music(myType). The value assigned to the parameter must come from outside of the function, either from the main script or from another function. It cannot come from within the function itself. Its value is derived from the data passed to it from a function call. It's similar to a variable that is assigned its value from another source. When used, the parameter is replaced with the value that has been assigned to it. Remember, the function call is performed before the function is actually run. It "calls" or tells the function to run. Any data that the function call passes to the function parameter is then used in the calculation within the function. An example follows. Try it yourself and see how it works.

The function numOddOrEven is called by the following function call. The value of the data within the parentheses in the call is assigned to the parameter within the function, located in the parentheses following the function name (in this case "theNum"):

<script type="text/javascript">
<!--
  numOddOrEven(9);
//-->
</script>

Here is the function numOddOrEven:

<script type="text/javascript">
<!--
  function numOddOrEven(theNum) {
    var numType = (theNum % 2)? "odd" : "even";
    alert("the number " + theNum + " is an " + numType + " number.");
  }
//-->
</script>

Let's break it down and see how it works.

From the function call, the parameter theNum is given a value of 9. The parameter theNum becomes a type of variable. A local variable named numType is declared and given a conditional statement for its value. The value of the parameter theNum is divided by 2 using the modulus operator, which will return a remainder if the number is odd. This is performed first because it's in parentheses. A comparison is then made and the conditional statement says basically: "If there is a remainder, the number is odd, or else it's even." An alert window is then called to display the results.

Multiple values can also be passed to parameters but they must be equal in number, i.e.:

  function sayHi(a,b,c) {
    alert("Say hello to " + a);
  }

Here, the function sayHi is given three parameters, each separated by a comma. The function call then lists three values to pass to the parameters:

  sayHi("Bob","Carol","Ted")

You could even add another function call which would assign a new value to the parameters, like this:

  sayHi("Bob","Carol","Ted")
  sayHi("Brandy","Jill","Mary")

Here is another script that uses parameters. The result depends on which link you click on. Go ahead and try it and see what happens. Of course, I did not include a conditional statement to check for errors like we did previously. (The values listed in the function call could even be elaborated, i.e. say('Hi, how are you, ');.)

function say(what) {
  var myName = prompt("Please enter your name.", "");
  alert(what + myName);
}

The function is then called from within a link. This is a mouseover event. To activate the links, you only need to place the mouse over the link:

<form>
<input type="button" value="Say Hi" onMouseOver="say('Hi ');"<br>
<input type="button" value="Say Bye" onMouseOver="say('Bye ');"<br>
</form>

Did you forget to enclose the function with the script tags? From here on, I won't be including them in order to save time and space. You'll need them to run the scripts, but not for the links.

[previous] [next]

Created: May 27, 2005

URL: