1
00:00:00,000 --> 00:00:05,013
[MUSIC]

2
00:00:05,013 --> 00:00:09,390
Earlier, you built a simple programme
that prompted the user for their name,

3
00:00:09,390 --> 00:00:13,517
then used the template to interpolate or
build that name into a string.

4
00:00:13,517 --> 00:00:16,506
You may have noticed what happens if
the user doesn't enter anything into

5
00:00:16,506 --> 00:00:17,237
the input field.

6
00:00:17,237 --> 00:00:22,092
For example, in the prompt dialogue,
I'll click OK without entering anything.

7
00:00:22,092 --> 00:00:24,806
When that happens,
the final message looks a little strange.

8
00:00:24,806 --> 00:00:29,105
Notice the empty spaces where
the name is supposed to display, or

9
00:00:29,105 --> 00:00:32,478
what if the user enters
a random string of numbers?

10
00:00:32,478 --> 00:00:34,144
Well, that doesn't make sense.

11
00:00:34,144 --> 00:00:38,434
Ideally, we'd check and
make sure that the user entered correct

12
00:00:38,434 --> 00:00:43,194
information into the input field
before displaying the Hello message.

13
00:00:43,194 --> 00:00:47,140
As a programmer you will often encounter
times when your program has to react

14
00:00:47,140 --> 00:00:49,184
intelligently to input from our user.

15
00:00:49,184 --> 00:00:53,148
For our Welcome message example it
would be a good idea to first check if

16
00:00:53,148 --> 00:00:55,647
the inputs supplied by
the user is a string.

17
00:00:55,647 --> 00:00:58,781
If it is, then display the greeting,
if it is not a string,

18
00:00:58,781 --> 00:01:01,688
then print out the message
like please type your name.

19
00:01:01,688 --> 00:01:03,188
That's just one example.

20
00:01:03,188 --> 00:01:06,950
There are many times in programming where
you'll need to make a program behave

21
00:01:06,950 --> 00:01:09,580
differently based on
conditions within the program.

22
00:01:09,580 --> 00:01:13,838
For example, in a spaceship battle game,
if the player loses all of their ships,

23
00:01:13,838 --> 00:01:14,960
the game should end.

24
00:01:14,960 --> 00:01:19,269
Or, if the player reaches 1,000 points,
the game should get faster and

25
00:01:19,269 --> 00:01:20,272
more difficult.

26
00:01:20,272 --> 00:01:24,077
You can change what your program does
by adding decision making to it.

27
00:01:24,077 --> 00:01:28,013
Programmers can make a program react
to different situations by using what

28
00:01:28,013 --> 00:01:30,020
are called conditional statements.

29
00:01:30,020 --> 00:01:34,600
A conditional statement can be as simple
as if this is true, then do that.

30
00:01:34,600 --> 00:01:38,016
For example, if the user types their name,
then display a greeting.

31
00:01:38,016 --> 00:01:43,407
Or in a space game, if the player is
out of spaceships, then end the game.

32
00:01:43,407 --> 00:01:46,539
You're going to create a conditional
statement by building a quiz.

33
00:01:46,539 --> 00:01:50,157
You can follow along in workspaces
by launching the new workspace with

34
00:01:50,157 --> 00:01:50,840
this video.

35
00:01:50,840 --> 00:01:55,148
Open the file conditionals.js
located inside your js folder,

36
00:01:55,148 --> 00:01:58,108
the file is already linked to index.html.

37
00:02:00,084 --> 00:02:04,006
First, we'll ask a question and
get a response from a user.

38
00:02:04,006 --> 00:02:09,438
Declare a variable named answer and

39
00:02:09,438 --> 00:02:13,963
assign it the prompt method,

40
00:02:13,963 --> 00:02:21,034
which asks Which planet
is closest to the sun?

41
00:02:21,034 --> 00:02:25,429
Next, we'll add the basic structure for
a conditional statement.

42
00:02:25,429 --> 00:02:30,320
Conditional statements begin with the if
keyword just like new variables begin

43
00:02:30,320 --> 00:02:32,223
with the const or let keyword.

44
00:02:32,223 --> 00:02:34,852
After if comes a set of parentheses.

45
00:02:34,852 --> 00:02:37,082
Inside the parentheses goes the condition.

46
00:02:37,082 --> 00:02:41,733
The condition is a test whose
answer is either true or false.

47
00:02:41,733 --> 00:02:43,842
Then come set of curly braces.

48
00:02:43,842 --> 00:02:49,005
Inside the braces you put the code that
runs only if the condition is true.

49
00:02:49,005 --> 00:02:53,113
The braces create what's called
a code block that can hold one or

50
00:02:53,113 --> 00:02:55,099
more JavaScript statements.

51
00:02:55,099 --> 00:02:58,711
And notice that unlike most other
statements you've learnt so far,

52
00:02:58,711 --> 00:03:01,898
there is no semi colon at the end
of a conditional statement.

53
00:03:01,898 --> 00:03:06,042
Now, let's write the actual

54
00:03:06,042 --> 00:03:11,027
condition answer === Mercury.

55
00:03:11,027 --> 00:03:13,565
This condition is a test.

56
00:03:13,565 --> 00:03:18,462
It asks if the value that's stored
inside the variable named answer is

57
00:03:18,462 --> 00:03:20,547
equal to the string Mercury.

58
00:03:20,547 --> 00:03:24,515
In other words, did the user type the word
Mercury into the input dialog box.

59
00:03:24,515 --> 00:03:28,456
The === sign here is called
a strict equality operator and

60
00:03:28,456 --> 00:03:31,940
it's used to test if two
values are exactly the same.

61
00:03:31,940 --> 00:03:35,795
In this case, it tests that two
strings are strictly equal.

62
00:03:35,795 --> 00:03:40,160
Which means that they have the same
sequence of characters as well as the same

63
00:03:40,160 --> 00:03:40,713
length.

64
00:03:40,713 --> 00:03:44,743
If they are the same,
then the condition is true and

65
00:03:44,743 --> 00:03:47,381
the code inside the braces runs.

66
00:03:47,381 --> 00:03:51,981
To make the code easier to read, it's
common practice to indent code that goes

67
00:03:51,981 --> 00:03:56,176
inside the braces just like it's
common in HTML to indent nested tags.

68
00:03:56,176 --> 00:04:00,025
Indenting the code makes it easy to
see that the code block belongs inside

69
00:04:00,025 --> 00:04:01,615
the conditional statement.

70
00:04:01,615 --> 00:04:06,522
In this case, if the person answers the
question correctly then That's correct!,

71
00:04:06,522 --> 00:04:08,032
is logged to the console.

72
00:04:08,032 --> 00:04:09,265
All right, let's try it.

73
00:04:09,265 --> 00:04:13,510
I'll save this and preview index.html.

74
00:04:13,510 --> 00:04:19,077
I'll type Mercury as an answer.

75
00:04:19,077 --> 00:04:23,493
When I open the JavaScript console,
I see that it works.

76
00:04:23,493 --> 00:04:26,537
Let's see what happens if I
don't type the correct answer.

77
00:04:26,537 --> 00:04:33,746
Refresh the page, and this time type
Venus and nothing happens at all.

78
00:04:33,746 --> 00:04:38,513
This is the first time in our programming
work code we've added to a program

79
00:04:38,513 --> 00:04:39,958
doesn't always run.

80
00:04:39,958 --> 00:04:43,181
Conditional statements let you
control the flow of a program.

81
00:04:43,181 --> 00:04:46,311
That is which code actually runs and when.

82
00:04:46,311 --> 00:04:51,180
In this example, when the condition is
true the program follows one path and

83
00:04:51,180 --> 00:04:53,783
prints that's correct to the console.

84
00:04:53,783 --> 00:04:58,314
However, if the answer is wrong then
it skips the console.log method.

85
00:04:58,314 --> 00:05:02,346
In either case, after the conditional
statement the program continues and

86
00:05:02,346 --> 00:05:03,861
runs any code that follows.

87
00:05:03,861 --> 00:05:08,067
You can also provide code that runs
only if the condition is false.

88
00:05:08,067 --> 00:05:09,978
This is called an else clause.

89
00:05:09,978 --> 00:05:14,129
It's optional, but it's often used as a
fallback for when a condition is not true.

90
00:05:14,129 --> 00:05:16,638
You add it to a conditional
statement like this.

91
00:05:19,552 --> 00:05:24,371
The code you want to run if the condition
is not true goes inside the pair of

92
00:05:24,371 --> 00:05:26,830
braces following the keyword else.

93
00:05:26,830 --> 00:05:31,594
The braces form another code block, and
there is no semicolon after them, either.

94
00:05:31,594 --> 00:05:34,469
It's best to indent code here, as well, so

95
00:05:34,469 --> 00:05:37,513
you can see that it's
part of the else clause.

96
00:05:37,513 --> 00:05:42,757
Inside this code block, I'll console.log,
Sorry, that's incorrect.

97
00:05:49,518 --> 00:05:51,412
Let's see what this does.

98
00:05:51,412 --> 00:05:55,813
I'll save the file, refresh the page and

99
00:05:55,813 --> 00:06:00,349
submit an incorrect answer, like Earth.

100
00:06:00,349 --> 00:06:02,637
And Sorry,
that's incorrect displays in the console.

101
00:06:07,037 --> 00:06:10,800
Type the correct answer and
you'll see That's correct!

102
00:06:10,800 --> 00:06:12,264
Good.

103
00:06:12,264 --> 00:06:17,533
So now there's one response if
you type the correct answer and

104
00:06:17,533 --> 00:06:20,383
one if you type the wrong answer.

105
00:06:20,383 --> 00:06:22,504
Only one message appears and

106
00:06:22,504 --> 00:06:27,551
it's entirely dependent upon what
happens here in the condition.

107
00:06:27,551 --> 00:06:31,114
Let's look at the basic structure of
a conditional statement that includes

108
00:06:31,114 --> 00:06:31,900
an else clause.

109
00:06:31,900 --> 00:06:35,259
In programming,
we call this an if else statement.

110
00:06:35,259 --> 00:06:37,837
The two sets of braces
create two code blocks.

111
00:06:37,837 --> 00:06:39,532
You can think of them as two doors.

112
00:06:39,532 --> 00:06:42,031
Door number one and door number two.

113
00:06:42,031 --> 00:06:47,171
With an if/else statement, you can only ever go
through one of the two doors never both.

114
00:06:47,171 --> 00:06:50,014
The condition or
what's inside the parentheses,

115
00:06:50,014 --> 00:06:54,518
determines which code the program will
run or which door the program will enter.

116
00:06:54,518 --> 00:06:57,375
The condition is always either true or
false.

117
00:06:57,375 --> 00:07:00,793
If it's true,
then the program enters door number one.

118
00:07:00,793 --> 00:07:03,866
If the condition is false,
then it's door number two.

119
00:07:03,866 --> 00:07:07,932
It's only one of the doors, and
only one could walk that run.

120
00:07:07,932 --> 00:07:11,652
Once the conditional statement is
finished, the program continues.

121
00:07:11,652 --> 00:07:15,181
Finally, let's look at one
problem with the quiz program.

122
00:07:15,181 --> 00:07:19,927
This time I'll type mercury and
all lowercase letters.

123
00:07:19,927 --> 00:07:21,421
Notice what happened.

124
00:07:21,421 --> 00:07:24,443
The program thinks that it
answered the question wrong, and

125
00:07:24,443 --> 00:07:25,874
strictly speaking, I did.

126
00:07:25,874 --> 00:07:30,882
To computers a m is not the same as an M.

127
00:07:30,882 --> 00:07:37,244
So mercury in all lowercase letters, isn't
equal to mercury with an uppercase M.

128
00:07:37,244 --> 00:07:41,009
Fortunately, you can get around that using
a string method you learned about earlier.

129
00:07:41,009 --> 00:07:46,086
The toUpperCase method takes a string and
converts all of the letters to uppercase.

130
00:07:46,086 --> 00:07:49,604
So you can apply that method to
what the user typed, like this.

131
00:07:51,988 --> 00:07:52,740
In this case,

132
00:07:52,740 --> 00:07:56,836
you also need to change the case of
the string you're testing to all uppercase.

133
00:07:59,487 --> 00:08:03,467
Now, even if you type and
submit mercury in all lowercase,

134
00:08:03,467 --> 00:08:08,175
the condition passes, and
that's correct displays in the console.

135
00:08:16,536 --> 00:08:20,555
As you just learned, conditional
statements let you make a program behave

136
00:08:20,555 --> 00:08:24,017
differently depending upon
the circumstances in the program.

137
00:08:24,017 --> 00:08:27,774
The value a user types into a form,
or the score in a game, for

138
00:08:27,774 --> 00:08:30,377
example can change how the program runs.

139
00:08:30,377 --> 00:08:34,507
Conditional statements make your
programs flexible and more interesting.

140
00:08:34,507 --> 00:08:36,601
Up next,
you'll learn more about how to test for

141
00:08:36,601 --> 00:08:38,810
different conditions using
comparison operators.