So here's the thing: the goal of this series is to allow people who aren't programmers to take full advantage of their computers and other programmable devices at home, school, and work by giving a light introduction to computing concepts. I think the last post went too deep to really serve that purpose. I'll try to steer clear of posts like that in the future. All right, enough metablogging.
Today's topic is conditional execution.
You've seen this before:
visitor:
for your output:
Or have you? I decided to give myself some special treatment this time. Pretend you're me. Just go and tell that box that your name is John and click again.
Neat, eh? So what's the difference?
All computer programming languages support conditional execution: if something is true, do X; otherwise, do Y. Here's what the new code looks like:
function greet (visitor) {
var greeting;
if (visitor === "John") {
greeting = "Hello, " + visitor + ". Remember, authentication is not authorization!";
} else {
greeting = "Hello, " + visitor + "!";
}
return greeting;
}
Neat, huh? if and else are special instructions in JavaScript (and in most programming languages). The stuff inside the () following if is evaluated as a boolean expression. If the expression evaluates to true, the block (starts with {, ends with the next }) right after the if statement is executed. Otherwise (else), the block ({ to next }) immediately following the else statement is executed.
The statement this new program evaluates is
visitor === "John". A === comparison is true when the values to the left and right are equal and of the same type (e.g. both are numbers or both are strings), so if visitor is set to "John", the comparison visitor === "John" evaluates to true. "John" === "John" would also be true, just a little silly to write (you could just write "true" without the double-quotes (though writing if(true) is pretty silly to write as well)). "John" === "You" is false, 1 === 1 is true, 1 === 2 is false, 1 === "1" is false because the triple-equals comparison operator we're using treats the number 1 as distinct from a string containing 1.
JavaScript has other comparison operators, mostly for numbers. You'll see these same symbols across a wide variety of modern programming languages (well most of these are the same in, C, C#, F#, Java, Ruby, Python, Perl, PHP, BASIC, at least).
| Comparing a and b in JavaScript | True when... |
|---|---|
a === b | a equals b |
a !== b | a does not equal b |
a < b | a is less than b |
a > b | a is greater than b |
a <= b | a is less than or equal to b |
a >= b | a is greater than or equal to b |
Comparison operations can be combined using logical operators && (and), || (or) and ! (not) from last time:
function coverCharge (sex, itIsLadiesNight) {
var doorPrice;
if (sex === "F" && itIsLadiesNight) {
doorPrice = 0;
} else {
doorPrice = 10;
}
return doorPrice;
}
So women get in free on ladies' night, otherwise it's $10 for everybody.
coverCharge ("M", true) returns 10.
coverCharge ("F", false) returns 10.
coverCharge ("F", true) returns 0.
In addition to if and else, there is "else if". This is how your describe a multi-tined fork in the road for the progress of your program instead.
function sign(birthMonth, birthDay) {
var sign = "Oops, I guess I missed one. Sorry about that.";
if (birthMonth === 3 && birthDay > 20
|| birthMonth === 4 && birthDay <= 20) {
sign = "Aries";
} else if (birthMonth === 4 && birthDay > 20
|| birthMonth === 5 && birthDay <= 20) {
sign = "Taurus";
} else if (birthMonth === 5 && birthDay > 20
|| birthMonth === 6 && birthDay <= 20) {
sign = "Gemini";
// ...more of the same for 8 other signs...
} else if (birthMonth === 2 && birthDay > 20
|| birthMonth === 3 && birthDay <= 20) {
sign = "Pisces";
}
return sign;
}
else ifs can be chained off of an if indefinitely, but an if must start the chain, and no else ifs may appear after the final else (the final else may be omitted, as above).
Exercise:
Pretend you're a robot. Imagine you have the data you need to make decisions about what to do as conveniently-named variables, and you have conveniently-named statements that describe what you can do. Can you use a chain of if/else if/else statements to describe what to do when you're bored? Describe a series of if/elses that will make your robot version of yourself behave as close to how you would behave as possible.
Bonus:
Death Note is an awesome anime show and manga. How could you express the rules for the Death Note in JavaScript so that your program can compute an outcome from use of the note? What are your inputs and outputs?
 |
| I do not often recommend anime shows, but when I do, it's always Death Note. |
