- 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
Introducing Conditional Statements
8:39You can change what your program does by adding decision-making to it. Programmers make a program react to different situations using JavaScript conditional statements.
[MUSIC]
0:00
Earlier, you built a simple programme
that prompted the user for their name,
0:05
then used the template to interpolate or
build that name into a string.
0:09
You may have noticed what happens if
the user doesn't enter anything into
0:13
the input field.
0:16
For example, in the prompt dialogue,
I'll click OK without entering anything.
0:17
When that happens,
the final message looks a little strange.
0:22
Notice the empty spaces where
the name is supposed to display, or
0:24
what if the user enters
a random string of numbers?
0:29
Well, that doesn't make sense.
0:32
Ideally, we'd check and
make sure that the user entered correct
0:34
information into the input field
before displaying the Hello message.
0:38
As a programmer you will often encounter
times when your program has to react
0:43
intelligently to input from our user.
0:47
For our Welcome message example it
would be a good idea to first check if
0:49
the inputs supplied by
the user is a string.
0:53
If it is, then display the greeting,
if it is not a string,
0:55
then print out the message
like please type your name.
0:58
That's just one example.
1:01
There are many times in programming where
you'll need to make a program behave
1:03
differently based on
conditions within the program.
1:06
For example, in a spaceship battle game,
if the player loses all of their ships,
1:09
the game should end.
1:13
Or, if the player reaches 1,000 points,
the game should get faster and
1:14
more difficult.
1:19
You can change what your program does
by adding decision making to it.
1:20
Programmers can make a program react
to different situations by using what
1:24
are called conditional statements.
1:28
A conditional statement can be as simple
as if this is true, then do that.
1:30
For example, if the user types their name,
then display a greeting.
1:34
Or in a space game, if the player is
out of spaceships, then end the game.
1:38
You're going to create a conditional
statement by building a quiz.
1:43
You can follow along in workspaces
by launching the new workspace with
1:46
this video.
1:50
Open the file conditionals.js
located inside your js folder,
1:50
the file is already linked to index.html.
1:55
First, we'll ask a question and
get a response from a user.
2:00
Declare a variable named answer and
2:04
assign it the prompt method,
2:09
which asks Which planet
is closest to the sun?
2:13
Next, we'll add the basic structure for
a conditional statement.
2:21
Conditional statements begin with the if
keyword just like new variables begin
2:25
with the const or let keyword.
2:30
After if comes a set of parentheses.
2:32
Inside the parentheses goes the condition.
2:34
The condition is a test whose
answer is either true or false.
2:37
Then come set of curly braces.
2:41
Inside the braces you put the code that
runs only if the condition is true.
2:43
The braces create what's called
a code block that can hold one or
2:49
more JavaScript statements.
2:53
And notice that unlike most other
statements you've learnt so far,
2:55
there is no semi colon at the end
of a conditional statement.
2:58
Now, let's write the actual
3:01
condition answer === Mercury.
3:06
This condition is a test.
3:11
It asks if the value that's stored
inside the variable named answer is
3:13
equal to the string Mercury.
3:18
In other words, did the user type the word
Mercury into the input dialog box.
3:20
The === sign here is called
a strict equality operator and
3:24
it's used to test if two
values are exactly the same.
3:28
In this case, it tests that two
strings are strictly equal.
3:31
Which means that they have the same
sequence of characters as well as the same
3:35
length.
3:40
If they are the same,
then the condition is true and
3:40
the code inside the braces runs.
3:44
To make the code easier to read, it's
common practice to indent code that goes
3:47
inside the braces just like it's
common in HTML to indent nested tags.
3:51
Indenting the code makes it easy to
see that the code block belongs inside
3:56
the conditional statement.
4:00
In this case, if the person answers the
question correctly then That's correct!,
4:01
is logged to the console.
4:06
All right, let's try it.
4:08
I'll save this and preview index.html.
4:09
I'll type Mercury as an answer.
4:13
When I open the JavaScript console,
I see that it works.
4:19
Let's see what happens if I
don't type the correct answer.
4:23
Refresh the page, and this time type
Venus and nothing happens at all.
4:26
This is the first time in our programming
work code we've added to a program
4:33
doesn't always run.
4:38
Conditional statements let you
control the flow of a program.
4:39
That is which code actually runs and when.
4:43
In this example, when the condition is
true the program follows one path and
4:46
prints that's correct to the console.
4:51
However, if the answer is wrong then
it skips the console.log method.
4:53
In either case, after the conditional
statement the program continues and
4:58
runs any code that follows.
5:02
You can also provide code that runs
only if the condition is false.
5:03
This is called an else clause.
5:08
It's optional, but it's often used as a
fallback for when a condition is not true.
5:09
You add it to a conditional
statement like this.
5:14
The code you want to run if the condition
is not true goes inside the pair of
5:19
braces following the keyword else.
5:24
The braces form another code block, and
there is no semicolon after them, either.
5:26
It's best to indent code here, as well, so
5:31
you can see that it's
part of the else clause.
5:34
Inside this code block, I'll console.log,
Sorry, that's incorrect.
5:37
Let's see what this does.
5:49
I'll save the file, refresh the page and
5:51
submit an incorrect answer, like Earth.
5:55
And Sorry,
that's incorrect displays in the console.
6:00
Type the correct answer and
you'll see That's correct!
6:07
Good.
6:10
So now there's one response if
you type the correct answer and
6:12
one if you type the wrong answer.
6:17
Only one message appears and
6:20
it's entirely dependent upon what
happens here in the condition.
6:22
Let's look at the basic structure of
a conditional statement that includes
6:27
an else clause.
6:31
In programming,
we call this an if else statement.
6:31
The two sets of braces
create two code blocks.
6:35
You can think of them as two doors.
6:37
Door number one and door number two.
6:39
With an if/else statement, you can only ever go
through one of the two doors never both.
6:42
The condition or
what's inside the parentheses,
6:47
determines which code the program will
run or which door the program will enter.
6:50
The condition is always either true or
false.
6:54
If it's true,
then the program enters door number one.
6:57
If the condition is false,
then it's door number two.
7:00
It's only one of the doors, and
only one could walk that run.
7:03
Once the conditional statement is
finished, the program continues.
7:07
Finally, let's look at one
problem with the quiz program.
7:11
This time I'll type mercury and
all lowercase letters.
7:15
Notice what happened.
7:19
The program thinks that it
answered the question wrong, and
7:21
strictly speaking, I did.
7:24
To computers a m is not the same as an M.
7:25
So mercury in all lowercase letters, isn't
equal to mercury with an uppercase M.
7:30
Fortunately, you can get around that using
a string method you learned about earlier.
7:37
The toUpperCase method takes a string and
converts all of the letters to uppercase.
7:41
So you can apply that method to
what the user typed, like this.
7:46
In this case,
7:51
you also need to change the case of
the string you're testing to all uppercase.
7:52
Now, even if you type and
submit mercury in all lowercase,
7:59
the condition passes, and
that's correct displays in the console.
8:03
As you just learned, conditional
statements let you make a program behave
8:16
differently depending upon
the circumstances in the program.
8:20
The value a user types into a form,
or the score in a game, for
8:24
example can change how the program runs.
8:27
Conditional statements make your
programs flexible and more interesting.
8:30
Up next,
you'll learn more about how to test for
8:34
different conditions using
comparison operators.
8:36