- Introducing Conditional Statements 8:39
- Comparison Operators 7:19
- Conditional Statements and Operators Review 7 questions
- Use Comparison Operators 1 objective
- Boolean Values 7:32
- Program Multiple Outcomes 5:45
- Booleans and Else If Review 5 questions
- Write an 'if' Statement 1 objective
- Add an 'else if' Clause 1 objective
- Add a Final 'else' Clause 1 objective
- Test Multiple Conditions With the && Operator 3:57
- Test Multiple Conditions With the || Operator 4:04
- Document Your Code with Comments 4:43
- Multiple Conditions and JavaScript Comments Review 6 questions
- The Conditional Challenge 2:17
- The Conditional Challenge Solution 6:23
- Use Multiple Conditions 1 objective
Preview
Video Player
00:00
00:00
Boolean Values
7:32Every condition evaluates to either true or false. True and false have a specific meaning in JavaScript, they're called "Booleans," and along with strings and numbers, they represent a third type of value (or data type) in JavaScript.
A condition in a conditional statement
is really just a question with a yes or
0:00
no answer.
0:04
In JavaScript, we say that the condition
evaluates to either true or false.
0:05
True and False have a specific meaning
in JavaScript, they're called Booleans.
0:11
And along with strings and
0:15
numbers, they represent a third type
of value or data type in JavaScript.
0:17
Though they have an unusual name,
Booleans are simple.
0:21
Remember, a Boolean value can be
only one of two possible values,
0:24
true or false, that's it.
0:29
There will be times where you'll want
to ask your program yes/no questions,
0:31
then run different code
based on those answers.
0:35
Let's have a look at some examples.
0:38
This time open the booleans.js
inside your js folder and
0:41
update the script tag in index.html so
that it points to booleans.js.
0:45
In JavaScript programming, the two
possible Boolean values are represented by
0:56
the keywords, true and false.
1:00
Because all conditions return a true or
false value,
1:02
you can see how these two keywords work
by using them in this if/else statement.
1:05
If I type true inside the condition and
refresh the browser,
1:10
The condition is true
displays in the console.
1:15
Now, if I type false inside the condition,
1:19
The condition is false appears.
1:24
Notice that there are no quotation
marks around the words true or false.
1:29
They're not strings, they each represent
a specific type of value, a Boolean value,
1:34
so quotes should not go around them.
1:39
You can assign a Boolean
value to a variable,
1:41
just like you can assign a string or
a number to a variable.
1:43
This is a common way to keep track of
a certain condition throughout a program.
1:46
For example, let's see how we can use
a Boolean value in a number guessing game.
1:50
First, declare a new variable
using the let keyword named
1:56
correctGuess, and
set it to the Boolean value false.
2:01
When the number guessing game begins,
the player hasn't yet guessed anything, so
2:06
we'll say that the guess is false.
2:11
The value of this variable will only
change if the player gets the correct
2:13
answer.
2:17
And notice how we're using the let keyword
here because we expect the value of
2:18
correctGuess to change.
2:22
Next, declare a variable named number
to store the number two guess.
2:24
You can set it to any number between 1 and
10, I'll set it to 6.
2:30
Then let's declare one
more variable named guess.
2:35
To store the answer,
the user types into a prompt dialogue,
2:39
which will instruct the user to
guess a number between 1 and 10.
2:43
Next, below the guess variable,
2:55
let's write a conditional statement
that changes the correct guess
2:58
variable from false to true if
the user guessed the correct number.
3:02
Type, if guess === number,
3:07
run the code inside these curly braces or
code block.
3:11
If the number the user typed
into the prompt dialog exactly
3:18
matches the number stored
in the number variable,
3:22
we're going to change the value of the
correctGuess variable from false to true.
3:25
If the player guesses wrong, the variable
isn't changed, it remains false.
3:32
Now, there's one detail we need
to address in the condition.
3:38
You learned that the value returned
by the prompt method is a string.
3:41
So notice how in the condition,
3:46
we're comparing a number
value with a string value.
3:48
For example, even if the user types 6,
the program will compare
3:51
the number 6 inside quotes with
the actual number value 6.
3:55
And this is always going to return false,
because we're using the strict equality
3:59
operator, and
the game will not work as expected.
4:04
So for the sake of this example,
4:07
we need to convert the string value
returned by prompt to a number value.
4:09
The quickest way to do this
is by adding a plus symbol or
4:13
the unary plus operator just before
the guess variable like this,
4:16
make sure that there is no space
between the plus and the variable.
4:20
So now, this ensures that we're
comparing two number values.
4:23
It may seem a little strange, but
4:27
don't worry too much about
this operator for now.
4:29
You're going to learn a whole lot more
about converting strings to numbers and
4:31
working with number
values in a later course.
4:35
For now, I've posted more information
about the unary plus operator and
4:37
the teacher's notes with this video.
4:41
Finally, let's update the conditional
statements below to check the current
4:43
value of the correctGuess variable and
put a message that matches the condition.
4:47
First, the if statement will check if
the value of correctGuess is true.
4:53
If it's true, then log the message,
You guessed the number.
5:00
Else, if the value is false,
5:10
then print a different message
that reveals the variable number.
5:12
I'll use a template literal
to insert the value
5:17
of the number variable Into the message,
Sorry,
5:23
the number was ${number} and that's it.
5:28
Before running it,
let's step through this code line by line.
5:34
First, we declare a variable
with the Boolean value false.
5:38
Next, we store the number to
guess in a variable named number.
5:43
We then open a dialog box and
ask the user to supply a number,
5:47
which we store in the variable guess.
5:52
Then the program tests
the user's response.
5:54
If the user supplied the same
number stored in guess,
5:58
then the correctGuess
variable changes to true.
6:02
If the player didn't however, then
the variable stays the same, it's false.
6:05
Then we have a second
conditional statement that says,
6:11
if the value in correctGuess is true, then
print a winning message to the console.
6:15
However, if the value is false,
then reveal the number.
6:20
All right, let's see it in action.
6:24
I'll save the file, refresh the browser.
6:26
If I type, say, 8 into the prompt dialog,
6:30
the console displays,
Sorry, the number was 6.
6:34
Refresh the page to try again,
this time I'll type 6 and
6:38
see the message,
You guessed the number, good.
6:42
You can also simplify the code
in this if/else statement.
6:45
Remember that all conditions
are either true or false,
6:49
that is, the test condition
produces a Boolean value.
6:53
Since we're already storing either true or
false in the correctGuess variable,
6:56
we don't need to use the strict
equality operator at all.
7:01
In other words, this is the same as this.
7:04
And as you can see,
7:11
the number guessing game still
works in the same way as before.
7:12
There are other ways you might
write this number guessing game,
7:20
without having to use two
separate conditional statements.
7:23
I use this approach to teach you
how Booleans get evaluated and
7:25
change the flow of a program when
used in conditional statements.
7:28