HTMLisEasy.com
HTML tutorials for the rest of us...
Javascript Tutor - Lesson 14

Let's suppose we send the function a color...

<html>
<head>
<title></title>

<script type="text/javascript">

colors = new Array();
colors[0] = "red";
colors[1] = "blue";
colors[2] = "green";
colors[3] = "yellow";
colors[4] = "purple";
colors[5] = "orange";

function GetMyColor(mycolor)
{
   alert(colors[mycolor]);
}

</script>

</head>
<body>

<a href="javascript:GetMyColor(3)">Click here for my color</a>

</body>
</html>

Try it.

Exercise: Add a prompt box to the last example to get a number from a user. Ask the user for a number between 0 and 5. Use that number to grab an element from the array. (Technically I suppose we would ask for an integer between and including 0 and 5, but that sounds confusing. We'll just keep it a number between 0 and 5 and figure we all understand what we're talking about.)

Here is a solution.

Exercise: Add to your last exercise an if-else statement that catches any entry greater than 5 and asks again for a number between 0 and 5.

Here is a solution.

Notice that the last couple examples hard code the number 5 into the function. If we were to add colors, we would have to go through the function and change all references to "5". Surely there's a better way. Here's an idea... let's get that number into a variable...

Exercise: Use the length property of an array to get the number of elements into a variable, then use that variable in the function. This is a tough exercise. Make sure you test your script thoroughly to reveal any errors.

Here is a solution.

I suppose this is a good time for a little side track. Our latest script checks if a number is greater than 5 (or whatever). This script could also benefit from a bit that checks if the number is less than 0. In other words check if the number is greater than 5 OR less than 0.

Consider this simple if statement...

if (x > 5)
{
  do something
}

It checks to see if x is greater than five. We can add another condition and test if x > 5 or x < 0...

if ((x > 5)||(x < 0))
{
  do something
}

The OR operator is two vertical slashes (pipes)... ||.

Exercise: Add this feature to your last exercise. Make the script check if the number is not greater than 5 or less than 0.

Here is a solution.

Similar to the OR operator is the AND operator. This operator is two ampersands... &&

if ((x > 5)&&(x < 0))
{
  do something
}

The above basically says if x is greater than 5 and x is less than 0 then do something. Obviously no number can fit these conditions, but hopefully you still understand the concept.

Exercise: Write a small script from scratch. When the user clicks on a link, a prompt box is thrown up that asks for a particular number (such as "Please enter 4"). A second prompt box then comes up asking for a second number (such as "Please enter 5"). The script is to determine if the user actually entered 4 and 5 as instructed. If correct, the user gets rewarded with a positive message. If not, a negative message. Utilize the && operator in your solution. Hint: remember to test for equality using a double equal sign ==.

Here is a solution.

<< BACK NEXT >>
Javascript Tutor
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
Javascript Authoring Guide      JavaScript FAQ
HTML 4.0 Reference      Google Groups (Advanced Search)