|
The if Statement The if statement is one of the most powerful tools at your disposal. It allows you to test one or more things and react to the results of that test. Let's start by doing a simple if test. Make your document look like this: Click here to maximize
Let's analyze what this does and how these new elements work. Look below:
Here's what this statement does. When the function is called, the if statement tests to see if the value that was entered into the form you created is less than '15'. If so, it displays a JavaScript alert to tell you that it is indeed less than '15'. Click 'Preview' and try it out. Now for how it works. The first thing that you probably noticed was that green section that says parseFloat'. parseFloat is a method that converts a value that is of type string (as in 'string of characters') to a value that is type floating point number (a number capable of having decimal places.) This value is then stored by the 'testnumber' variable. This method doesn't really have anything to do with the if statement directly. The reason that we have to do this is that we are eventually going to compare the entered value to another number. Form input values automatically come in as a value of type string. If we didn't do this, an error would occur because you can't decide if a string value is less than a n umber value. Make sense? The next thing that you should notice is the multi-colored line that says if (testnumber < 15){. This line does three things. The red part that says 'if' tells the browser that we are beginning an 'if' statement. The next part - in blue - contains the test itself. Notice that it is contained by parentheses. Throughout JavaScript, anytime you are performing a test, your test clause is always contained within parentheses. In the specific case of this test, we are checking to see if the value of 'testnumber' is less than '15'. In English it says In English is says Is testnumber less than 15? The next thing you see - in black - is an open bracket {. This works in much the same way as the brackets work for functions - that is they contain the commands that are to be executed by the if statement (in fact, functions are a type of statement.) In the case of if statements, however, the commands are only to be executed if the test clause is true. In this specific case, only if 'testnumber' is less than 15. The next line - in purple - is the commands that are to be executed by the if statement if it returns true. In this example there is only one command to be executed, but you can have as many as you want. In this example, the familiar 'alert()' method is called and a message is displayed. Did you notice that this line was indented? You don't have to do this, but it helps in the readability of the code. Indenting commands that are within statements makes it easy to find exactly what IS within the statement, and what ISN'T. It's just a good programming habit. Finally, you see a black close bracket }. This tells the browser that this is the end of the commands for the 'if' statement. This does not end the function. That is what the black close bracket directly below is for. So, to recap, first we change the form value to a number type, then we test to see if it is less than '15'. If it is, we run the JavaScript commands with the { and the }, in this case we display a message. Simple, huh?
You are a smart person. And something about the if statement bothers you. You ask, "What if I want the if statement to do something else if the test returns false?" Excellent question!! There is an additional portion of the if statement. That additional portion is the else statement. The else statement must ALWAYS come right after the corresponding if statement. Make your document look like this (add the red portion): Click here to maximize
The keyword else tells the browser to execute whatever commands come between the following set of brackets if the previous if test returns false. In this case, it brings up a JavaScript alert to tell you that the number you entered was greater than '15'. Try it. But wait!! Did you try entering '15' into the text field? If not, go try it now. When you entered '15' and clicked "Do It", the script should have displayed that the number you entered was greater than '15'. Is that true? No. It's equal to '15'. How can this be. Well you see, we only tested to see if it was less than '15'. Since '15' isn't less than '15', the test returned false. Change your script to look like this (change the red portion): Click here to maximize
That makes it tell the truth, doesn't it? But, let's suppose that what we actually wanted to test for was whether or not the value entered was less than or equal to '15'. What do we do then? We could change the test to "testnumber < 16". That would wo rk wouldn't it? Well, yes and no. As long as the user only enters integers it works fine. But what if the user enters '15.0001'. '15.0001' is greater than 15 isn't it? But the results of your script will treat it like it is actually less than 15, right? So that does n't work, but we really need to find a way to decide precisely whether or not the value is less than or equal to '15'. Enter COMPARISON OPERATORS. Here's a description of the comparison operators. Look them over and then we'll discuss their usage. < Is the first value less than the second? You've already seen this one. This is used to compare 2 values to see if the first is less than the second. The usage of this comparison operator in a test clause is: x < y This says, "Is x less than y?" If it is, then the statement returns true. Otherwise it returns false. > Is the first value greater than the second? This is used to compare 2 values to see if the first is greater than the second. The usage of this comparison operator in a test clause is: x > y This says, "Is x greater than y?" If it is, then the statement returns true. Otherwise it returns false. == Is it equal to? This is used to compare 2 values to see if they are exactly the same. The usage of this comparison operator in a test clause is: x == y This says, "Does x equal y?" If it does, then the statement returns true. Otherwise it returns false. != Is it not equal to? This is used to compare 2 values to see if they are not exactly the same. The usage of this comparison operator in a test clause is: x != y This says, "Is x not equal to y?" If it isn't exactly the same, then the statement returns true. Otherwise it returns false. (typically ! before an operator means not). <= Is it less than or equal to? This is used to compare 2 values to see if the first is less than or equal to the second. The usage of this comparison operator in a test clause is: x <= y This says, "Is x less than or equal to y?" If it is, then the statement returns true. Otherwise it returns false. >= Is it greater than or equal to? This is used to compare 2 values to see if the first is greater than or equal to the second. The usage of this comparison operator in a test clause is: x >= y This says, "Is x greater than or equal to y?" If it is, then the statement returns true. Otherwise it returns false. OK. There's the comparison operators. Let's use one. Change your script to look like this (change the blue part): Click here to maximize
OK. I bet you think that this is going to fix our dilemma, don't you. Well, you're right. Now it is precisely checking to see if the value is less than or equal to '15'. Make sense? Basically all of the comparison operators work the same way. Go ahead and try a few of them, and then we'll do some more powerful stuff.
So now you're saying to yourself, "What if I want to test to see if a value is, say, between '15' and '25'?" Well, let's learn the hard way first. Make your script look like this (change the red stuff): Click here to maximize
Go try it, and then com back and we'll discuss a couple of things. OK. Look at this:
In the red part, we didn't do anything new. All we did was test to see if the value was greater than '15'. If it was, then we did something new. See that blue stuff? If you look closely, you'll notice that it is completely inside the section that is to be executed if the value is greater than '15'. You'll also notice that the blue part is another 'if' statement, and that it is inside the first 'if' statement. This is called nesting - meaning placing one statement within another. This concept is used throughout JavaScript as you will see later on. Now, this nested if statement then tests to see if the value is less than '25'. If it is, a JavaScript alert announces that the entered value is indeed in-between '15' and '25'. You'll note that if the value turns out not to be less than '25', an else statement makes an alert message. You'll also note that if the value didn't turn out to be greater than '15', the entire nested if statement is skipped over, and an alert message is displayed. Does all of that make sense? Good. Now let's learn the easy way to do what we just did. Make your document look like this: Click here to maximize
Now that you have it changed, go try it. It should have done the same thing. Let's analyze what we did. Look at this:
You should notice 2 things. First, we now only have one (1) 'if' statement - no nested 'if' statements. Secondly, and more importantly, you should notice the red "&&" in the test clause. What the heck is that? Well, it's called a logical operator, and it allows you to perform more than one test with a single test clause. Here's a description of the logical operators. Look them over and we'll discuss them. && Are x > 15 AND x < 25 true? This is used to join 2 tests and see if they both are true. The usage of this comparison operator in a test clause is: x > 15 && x < 25 If both 'x > 15' and 'x < 25' return true, the test clause as a whole returns true. || Is x > 15 OR x < 25, or both, true? This is used to join 2 tests and see if either one or the other, or both are true. The usage of this comparison operator in a test clause is: x < 15 || x > 25 If either 'x < 15' or 'x > 25' return true, the test clause as a whole returns true. That's all of them - just 2. So, back to our example. When you typed the "&&" in-between the two test clauses and placed them in the same test clause parentheses, in effect you were saying, "If testnumber is greater than 15 and less then 25, do whatever is in this 'if' statement." Neat huh? Well, you've learned about all there is to know about 'if' statements. In the next tutorial you will learn about some things called loops. See you then. |