spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / diaries / 4

[previous] [next]

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


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.

home / programming / javascript / diaries / 4

[previous] [next]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

Created: May 27, 2005

URL: