Code Punk -- JS Lesson 3 - Using Parameters

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

Home	<Code_Punk>'s Web Tutorials

Website Development and Management

Downloads & Resources

JavaScript Lesson 3:
Using Parameters

Using Parameters

You've probably wondered what those parentheses in a function's name are all about. They are used to pass information to a function. This comes in really handy as the example below will demonstrate.

Lets say we've got two links that we want to open alert() boxes when clicked. We want each alert box to display a different message. We could code the page like this:

<html>
<head>
<title>JavaScript Alert Boxes</title>

<script language="JavaScript">
function box1(){alert("You just opened box #1");}
function box2(){alert("This is box #2");}
</script>

</head>

<body>
<a href="#" onClick="box1()">Box #1</a><br>
<a href="#" onClick="box2()">Box #2</a>
</body>
</html>

The first link would open the the "box1()" function when clicked and the second box would run the "box2()" function. We've made two functions, one for each link and each box. But, what if we had a hundred boxes? That would be a lot of functions to code. We can save ourselves a lot of coding by using "parameters" in cases like this.

The idea behind parameters is that we'll put a value in the parentheses of the function call. The parameter value is in red:

Now the string of text "You just opened box #1" will be passed to the function. Notice that the string is inside single quotes (' '). It must be inside quotes because it is a string value. Single quotes are used because it's already inside double quotes as part of the function call.

Lets see how the function "catches" the parameter values using a "receiving parameter", or "receiving variable":

Three things to note. First, we only need one function, not two. I called the single function "box". Secondly, we put a receiving parameter in the parentheses of the function's name. I called this parameter "whichText". The receiving parameter whichText will act like a *variable*, or container, for whatever value is sent to the function by a particular function call's parameter value.

In the case of the first link, this value would be "You just opened box#1". When the first link is clicked, whichText becomes equal to "You just opened box #1".

Thirdly, we used whichText as the value we want displayed in the alert() box. Because whichText is a variable and not a string of text, we do not put it in quotes. If we put it in quotes, the alert() box would display the word (string) "whichText" instead of the value passed to the function in the function call and "held" by whichText.

Lets go ahead and finish the rest of the page:

<html>
<head>
<title>JavaScript Alert Boxes</title>

<script language="JavaScript">
function box(whichText)
{alert(whichText);}
</script>

</head>

<body>
<a href="#" onClick="box('You just opened box #1')">Box #1</a><br>
<a href="#" onClick="box2('This is box #2')">Box #2</a>
</body>
</html>

The above code will produce the same results as the original page except that only one function was needed. Whatever link you click, it's parameter value will be sent to the function and stored by the receiving parameter whichText. It will then be displayed when the box pops up and displays the value of whichText.

NOTE: Look at the way we used single-quotes (' ') to hold the parameter values in the function calls -- 'This is box #2' -- instead of double quotes (" "). This is because the function call is already in double quotes. This is how quotes are "nested". Keep an eye on this if you run into parameters that aren't getting to your function correctly.

Multiple Parameters

Who says we have to stop at one parameter? We can add as many parameters and receiving parameters as we'd like. All we do is "delimit", or separate, the extra parameters with commas (,). Lets make the background of our page change when the box pops up using two parameters and an extra statement to our function:

<html>
<head>
<title>JavaScript Alert Boxes</title>

<script language="JavaScript">

function box(whichText,color)
{document.bgColor=color;
alert(whichText);
document.bgColor="white";}

</script>
</head>

<body>
<a href="#" onClick="box('You just opened box #1','red')">Box #1</a><br>
<a href="#" onClick="box('This is box #2','green')">Box #2</a>
</body>
</html>

The trick here is to keep your parameter values and your receiving parameters in the same order. Lets see what happens when the first link is clicked:

1) The string "You just opened box #1" is passed to whichText.

2) The string "red" is passed to the new receiving variable "color".

3) The background of the page will turn red.

4) The alert() box will pop up. When an alert() box pops up, all other activities cease until the "OK" button is clicked. It will display "You just opened box #1".

5) The page's background returns to white after the alert() box's "OK" button is clicked. The function is finished and you can start all over again.

Pay special attention to the fact that the different parameter values in the function calls are separated by commas (,) and inside single quotes (' ').

Click here to see the above JavaScript in action.

Now you can make a hundred boxes and just give them whatever parameters you'd like in the function calls. You don't need to code a hundred functions.

Continue To JavaScript Lesson 4 -- The Confirm Box & Boolean Values >>>

<<< Back To Beginning JavaScript Index

<Code_Punk>'s Web Tutorials