Student Instructions

Unit 5: Lesson 8 - Boolean Expressions and if statements

Background

In this lesson we move from pseudocode to real code as you write if-statements. You'll learn more about the JavaScript syntax for if-statements and boolean expressions as you get practice with a bunch of small little programs.

Vocabulary

• Boolean - A single value of either TRUE or FALSE
• Boolean Expression - in programming, an expression that evaluates to True or False.
• Conditionals - Statements that only run under certain conditions.
• If-Statement - The common programming structure that implements "conditional statements".
• Selection - A generic term for a type of programming statement (usually an if-statement) that uses a Boolean condition to determine, or select, whether or not to run a certain block of statements.

Lesson

• Boolean Expressions and Conditional Operators
• How if-statements work
• How if-else statements work

Resources

• All in Code Studio

Continue

Student Instructions

Points to pay attention to:

1. What's a Boolean Expression?
2. Why is it called a "Boolean"?
3. Is this a legal expression? 10 > 25?

Student Instructions

Word Soup: Conditionals, Booleans, expressions, statements

As you saw in the video there are a bunch of terms that generally are all talking about the same thing.

Boolean, Boolean values, Boolean expressions:

• A Boolean value is simply a computer science-y term that means a true/false value.
• A Boolean expression is a statement that evaluates to a Boolean value (a single true/false).

Condition, Conditionals, Conditional Statements:

• "Conditional" is simply a generic term for code that alters program flow based on true/false values (like an if statement)
• Examples: Condition, Conditionals, Conditional statements, conditional execution

Comparison Operators

A common type of condition to check is a comparison of two values. Here are 6 common comparison operators. Each compares a value on the left with a value on the right and returns a Boolean value -- true or false. Most of these do what you would expect.

Why these symbols: ==, !=, <=, and >=?

1. We use == because the single equal sign = is the assignment operator. We need something different to indicate we want to compare two values instead of assign one to the other.

   Common mistake: writing something like if (age = 18) instead of if (age == 18). We'll make sure we get this down later.

2. We use !=, <=, and >= because they only requires ASCII symbols. Historically the mathematical symbols ≠, ≤ and ≥ were hard or impossible to produce on some systems. The ! is universally read as "not".

Reference: Examples

Below are a bunch of examples of how you might see comparisons in code. Review them if you like or continue on and come back if you need reference.

Compares two values - numbers, strings, or other booleans - and returns true if they are equal, otherwise false.

• "Hello" == "hello" returns false -- because the strings are slightly different.
• "3" == 3 returns true -- == tries to be forgiving. If it can "coerce" a string into a number it will do so to compare. ¹
• (2+1) == 3 returns true -- because the arithmetic expression evaluates to 3.
• x == 7 returns true -- when the variable x has the value 7.

^1. While it is a useful feature that == will coerce a string into a number, it is considered TRICKY since string "3" is not the same as the integer 3 underneath the hood. There are circumstances when you would consider these not equal. There is a "strict" equality operator - the "triple equal" === which makes sure that the both the type of data and value are equal. So "3" === 3 is false.

Compares two values - numbers, strings, or other booleans - and returns true if they are not equal, otherwise false.

• "Hello" != "hello" returns true -- because the strings are slightly different.
• "3" != 3 returns false -- because the string 3 can be coerced into a number before comparing with 3. (see notes above about the forgiving ==).
• (2+1) != 3 returns false -- because the arithmetic expression evaluates to 3.
• x != 7 returns true -- when the variable x is any value other than 7.

Compares two values to see if the number on the left is greater than the number on the right.

• 4 > 3 returns true
• 3 > 7 returns false
• age > 17 returns true -- when the value of the variable "age" is strictly greater than 17, otherwise false.

Compares two values to see if the number on the left is less than the number on the right.

• 4 < 3 returns false
• 3 < 7 returns true
• age < 17 returns true -- when the value of the variable "age" is strictly less than 17, otherwise false.

Compares two values to see if the number on the left is less than or equal to the number on the right.

• 3 <= 4 returns true
• 4 <= 3 returns false
• age <= 18 returns true -- when the value of the variable "age" is 18 or less.

Compares two values to see if the number on the left is greater than or equal to the number on the right.

• 3 >= 4 returns false
• 4 >= 3 returns true
• age >= 18 returns true -- when the value of the variable "age" is 18 or greater.

Student Instructions

Explore Comparison Operators with Console.log

Your task: Make each expression evaluate to true by changing only the comparison operator.

We can easily test the results of comparison operators with console.log.

• Run the code provided - see results in the console debug area below.
• All of the Boolean expressions currently evaluate to false.
• Modify the code so they all evaluate to true
• Change only the operator

Example:

• (3 > 4) evaluates to false...
• Change it to (3 < 4) (3 is less than 4) to make it *true

HINT: The workspace starts in text mode because you might find that doing this in text mode is much easier and faster than dragging out new blocks. You can flip back to block mode if you like.

Student Instructions

Student Instructions

Understanding Program Flow

Programs are said to have a "flow of execution". You start by executing some line of code and then the next and so on.

A flow chart is a common visual that's used to represent the various paths of execution that your program might take. Many people use them to help plan.

1. This flow chart depicts a program executing one line after another until it gets to a point where it needs to make a decision.

2. In order to determine which path to take you state some condition. It should be a Boolean expression - something that evaluates to true or false. Here we have a simple comparsion of two values: the person's age and the number 18.

3. The program does one thing if the condition is true, and something else if the condition is false.

4. The program can continue a single thread of execution after the condition as well.

How If-statements work

if statements are the lines of code you need to change the flow while you're program is running. You can write code that makes a decision that determines which lines of code should be run next.

At the right is a diagram showing the elements of a basic if statement in JavaScript.

There are two basic parts to an if-statement.

1. A condition to be evaluated (A Boolean expression that evaluates to true or false)
2. Code that should run if the expression was true - enclosed in curly braces

A worked example

1. Program executes line by line as you would expect. It displays a message, then prompts the user to enter a number. Whatever the user types will be stored in the variable age and then proceeds to the next line...

2. When the if statement is encountered the first thing it does is evaluate the condition in the parentheses. It checks to see if, at this point in the program, the value in a variable age is greater than or equal to 18. If it is then we say the expression "returns true". Otherwise it returns false.

3. These console.log statements will only execute if the expression was true. The curly braces surround all of the code that should be executed if, and only if, the expression was true. Otherwise, the entire section of code encapsulated in the if statement is skipped.

4. Execution picks up here, on the first line after the closing curly brace of the if-statement. This line will always execute, but notice that if the user entered an age less than 18, the entire if statement would be skipped, and it would just say "Thanks for verifying". (We'll fix this awkwardness soon).

Student Instructions

You try it

This is only slightly different from the voting example you just saw.

• Add an if-statement to the code to check the age to see if the person is old enough to drive. (In most states you need to be 16 or older).
• Display a message if the person is old enough drive.

You can add an if-statement by dragging it out from the toolbox. We've provided the console.log message you should use. Just drag it inside the if-statement. This animation shows most of what you have to do.

Student Instructions

Do it yourself - What's the secret number?

Insert lines of code between the "Welcome" and "Goodbye" that do the following:

1. use promptNum to ask the user to enter the "secret number"
2. add an if statement to check if the number is the secret (you can make up your own secret number)
3. use console.log to display a message if the user guessed correctly

NOTE: Don't go overboard here adding messages. Just get practice adding a prompt and an if-statement on your own. Make sure it works and move on.

Student Instructions

You try it -- Text Password Checker

Key idea: You can use == to compare strings as well as numbers.

• Let's use an if-statement in an event handler to compare text that a user inputs in a UI element.

The setup: Note the setup in Design Mode There are two images: a red lock, and a green "unlock". The green "unlock" is hidden* at the start.

Do this:

Add an if-statement to the event handler to check the password and display the "unlock" only if the password is correct

• You can use == to compare the text you get from the password_input text box and a string you want to use as the password. The boolean expression you should use should look like this:

• If the user entered the correct password then show the green "unlock" and hide the red lock.
  • We've provide the code to hide and show the images. You just need to add the if-statement.
• Otherwise do nothing. They can try again.

Student Instructions

Points to pay attention to:

• An IF statement can have an else clause, but an ELSE clause cannot exist on its own.
• With an else clause you are guaranteeing that one of two portions of code will run.

Student Instructions

How If-Else Statements work

With an if-else statement you are giving an either-or command:

either the lines of code inside the if will execute or the lines inside the else will execute. Those are the options.

You saw in the video how to add an else clause to an if-statement -- hit the little + symbol on the tail of the if statement.

Inside the curly braces for the else clause you put lines of code that you want to run if the Boolean condition from the if statement is false.

Some important notes about the else clause:

• The else must come immediately after the closing curly brace of an if statement
• The else also has its own set of opening and closing curly braces to encapsulate lines of code

Considering our flow chart from before, until now we haven't had a way to make the program do something different if the condition was false. With an if-else statement we do.

We can now write a program that "branches" at a particular point, running one of two possible sections of code.

A Worked Example

1. Lines of code execute sequentially as usual. Prompt the user to enter their age.

2. The if statement and Boolean expression are also the same as before. The expression evaluates to either true or false.

3. With an if-else statement you are guaranteeing that exactly one of these two sections of code will execute. If the condition is true (age is 18 or greater) then the lines of code inside the if-statement's curly braces are executed. If the condition is false it jumps to the else clause and executes any lines of code it finds between the else clause's curly braces.

4. Finally the program picks up normal execution directly after the if-else block. At this point in the program, we know that either the code in the if-block or the else block has executed.

Optional: What if you wanted to type the code instead of using blocks?

You can always type any of the code we compose in blocks. Here is an animation showing a programmer adding an else clause to an if-statement. Notice that you can freely go back and forth between blocks and text. With text you also have a bit more leeway with formating.

In JavaScript, spaces and line breaks are the treated the same - 1 space is the same as 2 or 10 or 20.

There are certain stylistic conventions that programmers can get in heated arguments about, but there actually are no rules about style that will make your code run any differently. JavaScript looks for keywords, parentheses, curly braces and so on, but ignores extra spaces.

You usually use white space to make your code more readable.

Here are some examples of the exact same program, but formatted differently. They all work and run the same.

1. This is the format that is used by the block-based version of code in app lab. It's trying to save on space because the blocks take up a lot of space on their own.

2. Here is the formatting that's similar to the AP pseudocode with if, else, and all of the curly braces, each on their own line. This is a perfectly valid way to format code as well.

3. Here, the programmer used line breaks to add some white space for readability. People sometimes use blank lines to separate portions of a program so that lines of code that are visually clumped together are related to each other in some way.

Student Instructions

You Try It

Recreate the simple movie age example from the video.

• We've provided the first line to prompt the user to enter their age.
• Add and if-else statement that checks to see if the age is >= 13 and
• Use console.log to display appropriate messages

Here is pseudocode for what you should add

IF age >= 13
    DISPLAY "You can see a PG-13 movie alone"
ELSE
    DISPLAY "You are not old enough to see a PG-13 movie alone"

Student Instructions

You try it

Let's modify the driving age example to add an else clause.

• Add an else to the if-statement.
• Add a console.log message inside the else clause that says something like "sorry you can't drive yet".

You can add an else-statement by clicking on the + attached to the if statement. We've provided some starting code.

BONUS - if they are not old enough to drive you could do the math and tell them how many years they have to wait.

Student Instructions

You try it - adding else to the password checker

If we add an else clause to the password checker we can make it act a little fancier - study the animation at right.

Add an if-else statement to the login_btn event handler that:

• Shows the unlock and displays "Access Granted" if the user enters the password correctly.
• Otherwise, show the lock and display "Access Denied"

Note the setup:

• Again we have two images - a lock and an unlock - but this time both are hidden at the start.
• There is also a text label at the bottom where we'll display a message, but it starts empty as well

There are two event handlers

• The first event handler - on login_btn "click" - is where you should add your if-else statement

  • We've provided the statements you need to add into the appropriate clause

• The second event handler - on password_input "click" -- acts as a reset

  • You do not need to modify anything in this event handler
  • It simply hides all images and sets the message text to ""

if( getText("password_input") == "some secret" ){
   // show green unlock
   // display "Access Granted"
} else {
    // show red lock
   // display "Access DENIED"
}

Student Instructions

How Dropdown Menus Work

A dropdown menu provides a fixed list of choices for a user to choose from. If you're expecting only a fixed set of responses from a user then it's a good alternative to a plain text input box. For example, if you want the user to select a day of the week.

Dropdown menu v. text input

Choosing a day of the week is an example of when it's a good idea to use a dropdown menu because there are only 7 days of the week, but there are countless ways a user might type it if you used a text input box. Rather than trying to figure out what the user typed, you can provide your own list. It makes it much easier to check.

Add and populate in Design Mode

How to get what the user chose

To get the value the user selected from the dropdown menu is very similar to getting the text out of a text input.

A worked example

Here is an example that uses an if statement with a dropdown.

• The program lets the user pick a day of the week and display a message.
• Study the code and read through the commentary on the right side.
• An image of the app is shown at the left after the user has selected Wednesday.

1. When the dropdown changes

2. Save in a variable the beginning of a message that will eventually be displayed to the user: "It's <name of day>!"

3. Check the current value of the dropdown to see if it's "Friday"

4. Add text to the message. Either "Whoo hoo..." if it's Friday, or "Aw..." if it's not.

5. Finally, set the text of a label on the screen to the message that was constructed.

A note on your choices as a programmer

It's possible to write the program above without introducing the msg variable at all. You can write it with just a single if-else like so:

However, the programmer realized that if she wrote it like this, the code in both the if and the else would effectively contain a repeated portion:

setText("msg_label", "It's "+getText("day_dropdown")+"!...

With experience you learn that repetitious code is bad and prone to errors. In this case there are two different places that are changing a label on the screen.

If you do the same thing in two different parts of your code it means that if you want to change it, you need to do it in two places. It's easy to spot here, but in a larger program it might be tricky.

So in this case the programmer made the choice to "factor out" the repeated portion by breaking up the string into smaller parts, and making a single call to setText at the end.

Student Instructions

You Try It

This example is very similar to the worked example on the previous page - it is a version of the movie age checker that uses a dropdown.

We've provided the starting UI elements, including the dropdown - but none of the code.

Do this: Using the examples on the previous page as a guide...

• Add an event handler for the dropdown menu that triggers on "change".
• Add an if statement to check if the age chosen in the dropdown is >= to 13 and set the text in the result_label
  • if the age is 13 or over set the text to "You are old enough to see a PG-13 movie alone"
  • Otherwise, set the text to "You are not old enough to see a PG-13 movie alone"

Tip: Use getNumber(id) instead of getText(id) to get the value out of the dropdown

• One major difference from the example is that we want to compare the value of the dropdown to a number using >= rather than with ==
• You should to use getNumber("age_dropdown") to extract the value as a number rather than text.
• This is the same reason we use promptNum instead of prompt for simple console examples.
• It will still work if you use getText but isn't good form.

Student Instructions

You try it

This is a slightly more involved example. You'll need to study the starting design and code a little bit, but you only have to insert a single if-else statement and move some lines of code into the appropriate if or else clause to make it work.

Do this

Study the starting code first to see what it does

• You can run it to see what happens before doing anything - it just won't work right
• Notice the function reset() - which hides the images.
  • We made a function because we want to run this code from two different event handlers.

Add an if-else statement in the roll_btn event handler to check if the random number that represents a dice roll matches the user's guess in the dropdown

If they guessed correctly Show the trophy image Add 6 to the score

Otherwise: Show the frowny face image Subtract 1 from the score

Setup Notes: All UI elements are added for you (images are hidden) - flip to Design Mode to see. All lines of code except for the if-else statement and condition are also provided - you'll need to move them around once you've added the if-else statement. Notice the global score variable which will keep track of the score between clicks We've added comments in the code to help you out - you can remove them if you like.

Student Instructions

Challenge: It's the weekend!

Make an app tells you whether to stay home or go to school based on what day of the week it is.

In this challenge you will:

• Add your own dropdown menu in design mode
• Add an event handler for the dropdown
• Write an if-statement that's slightly tricky

Do this:

• In Design Mode add a dropdown menu and fill it with the days of the week: Monday, Tuesday,...,Sunday
• Add an event handler for that dropdown that activates on "change"

• Add an if-else statement to the event handler that checks which day was selected and...

  • If the day selected was a weekend day (Saturday or Sunday) then display a message that says "It's the weekend! Stay home!"

  • Otherwise (the day is a weekday) display a message that says "It's a weekday. Go to school".

  • Your message should be displayed by setting the text of the msg_label provided in design mode.

Testing:

• Once you have something functional, make sure you test every day of the week to verify the output is correct
• The if-statement here is trickier than before.

IF it's saturday
   ...
ELSE
   IF it's sunday
      ...
   ELSE
      ...