1
00:00:01,490 --> 00:00:08,000
And welcome back! Hopefully, those exercises weren't too tough and you breezed right through them.

2
00:00:09,110 --> 00:00:12,800
We're going to talk about something called 'Control Flow'.

3
00:00:12,890 --> 00:00:17,640
Up until now we've been doing this: This little 'arrow'.

4
00:00:17,900 --> 00:00:23,750
We write a line of code, then another line of code, then another line of code, then another line of code

5
00:00:24,080 --> 00:00:27,130
and everything executes in one line.

6
00:00:27,150 --> 00:00:29,740
Just flows, just kind of like water

7
00:00:29,750 --> 00:00:33,520
If you're pouring water down. It's just going straight down.

8
00:00:33,950 --> 00:00:37,210
But what if we had conditions?

9
00:00:37,250 --> 00:00:43,040
What if we want to say something like "If user name is 'Bob' -

10
00:00:43,460 --> 00:00:44,340
say 'Hi, Bob' ".

11
00:00:44,360 --> 00:00:54,230
If not - say "I don't know you". Maybe "Sign in again" or "We don't have this user". That's called 'conditional

12
00:00:54,230 --> 00:01:02,150
execution' and it looks something like this, where we get to a point in the program and we have two options,

13
00:01:02,330 --> 00:01:07,960
where we either want to go one way, or the other, and then continue executing.

14
00:01:07,970 --> 00:01:13,470
So in this lesson we're going to talk about exactly that - 'conditional execution'.

15
00:01:14,350 --> 00:01:15,270
Let's try some out.

16
00:01:19,340 --> 00:01:21,780
So JavaScript 'conditionals',

17
00:01:21,780 --> 00:01:22,810
that's what they're called,

18
00:01:22,920 --> 00:01:27,090
we're going to start off with what's called an 'if' statement.

19
00:01:28,130 --> 00:01:34,000
And an 'if' statement kind of reads, like English. We can do something similar to this:

20
00:01:34,010 --> 00:01:42,920
I say 'if name' equals, remember '===' signs here, because we're not assigning variable, we're

21
00:01:42,920 --> 00:01:51,020
comparing. [if (name === "Billy")] - close the bracket.

22
00:01:51,040 --> 00:01:56,050
And this is just a notation that you'll have to get used to. Again, it's just like learning a language,

23
00:01:56,200 --> 00:02:01,870
you just have to know, that when you're doing an 'if' statement, you have to have these brackets, close the

24
00:02:01,870 --> 00:02:05,530
brackets, and then you do curly bracket '{'.

25
00:02:05,530 --> 00:02:12,310
Hold 'Shift' and (press) 'Enter', so that the program doesn't execute. And we'll say, I've added a tab just so you can

26
00:02:12,310 --> 00:02:13,930
see for indentation.

27
00:02:14,200 --> 00:02:19,360
I can say 'alert("hi Billy!")'

28
00:02:23,990 --> 00:02:33,270
And I close the bracket. And again just like I said, each expression - something that produces a value, needs

29
00:02:33,490 --> 00:02:34,920
to have a semicolon.

30
00:02:35,140 --> 00:02:40,930
And you might think that you need a semicolon here, but again, with an 'if' statement you don't add one.

31
00:02:41,230 --> 00:02:42,230
But 'alert'.

32
00:02:42,250 --> 00:02:45,180
That's an expression, we had a semicolon here.

33
00:02:45,190 --> 00:02:51,490
Now you might be asking yourself "Well, we haven't assigned a variable to 'name' yet". So let's do that!

34
00:02:51,700 --> 00:03:04,990
I'm going to say name - 'var name' equals. We'll say 'Billy'. And I'm going to press 'Enter'.

35
00:03:04,990 --> 00:03:05,800
Let's see what happens.

36
00:03:07,430 --> 00:03:08,780
'hi Billy!'

37
00:03:08,860 --> 00:03:09,150
OK.

38
00:03:09,160 --> 00:03:13,070
So, that looks like it's working just to double check.

39
00:03:13,070 --> 00:03:15,800
What if I change 'name' to 'Susy'?

40
00:03:19,430 --> 00:03:20,550
oops - 'semicolon', not 'colon'.

41
00:03:21,800 --> 00:03:22,260
OK.

42
00:03:22,520 --> 00:03:26,780
And now if we run this program again. I'm going to just copy it.

43
00:03:28,430 --> 00:03:34,580
If 'name' equals 'Billy' - 'alert("hi Billy!")'. Nothing happens.

44
00:03:34,700 --> 00:03:35,960
I just get 'undefined'.

45
00:03:36,770 --> 00:03:40,010
And no alert.

46
00:03:40,060 --> 00:03:41,820
So that's a 'conditional statement'.

47
00:03:42,220 --> 00:03:44,160
But let's be realistic here.

48
00:03:44,200 --> 00:03:50,350
You often won't just have code, that executes when a condition holds 'true', but also code, that handles

49
00:03:50,770 --> 00:03:57,610
other cases, such as when the 'name' isn't 'Billy'. Maybe when the 'name' is 'Susy'.

50
00:03:57,660 --> 00:04:02,490
So this alternate path is shown,

51
00:04:02,490 --> 00:04:10,080
if you remember, in the diagram by the alternate arrow, where you need to have an alternate route in case

52
00:04:10,140 --> 00:04:12,620
the name doesn't equal 'Billy'.

53
00:04:12,620 --> 00:04:16,640
So let's go back again and see what we can do.

54
00:04:16,640 --> 00:04:21,880
So the second keyword, that we're going to learn is 'else'.

55
00:04:21,950 --> 00:04:34,360
So you can do something like 'if (name === "Billy")' and I just press right-key arrow here, and here again. Google Chrome

56
00:04:34,360 --> 00:04:42,360
is smart enough to know that you've typed this before. And now instead of leaving it like that, I now

57
00:04:42,360 --> 00:04:44,420
press 'Space', 'else'.

58
00:04:44,460 --> 00:04:51,360
So 'if name' equals 'Billy', 'alert("hi Billy!"); 'else' - it kind of reads like English, right?

59
00:04:51,480 --> 00:05:05,520
And then again 'else', opening curly bracket, closing curly bracket, and within here I'm going to say,

60
00:05:05,530 --> 00:05:09,910
'alert("hmmm I don't know you");'.

61
00:05:09,930 --> 00:05:12,190
So now let's see what happens.

62
00:05:14,980 --> 00:05:16,200
'hmmmm I don't know you' and why is that?

63
00:05:16,200 --> 00:05:23,030
Because if you remember 'name' equals 'Susy'. If I change 'name' to

64
00:05:26,590 --> 00:05:27,000
'Billy'

65
00:05:30,020 --> 00:05:32,630
Well, and redo the program you'll get:

66
00:05:32,960 --> 00:05:33,970
'Hi Billy'.

67
00:05:34,340 --> 00:05:37,670
So that's what's called an 'if-else' statement.

68
00:05:37,670 --> 00:05:40,960
You write a condition 'if' something equals 'true',

69
00:05:42,270 --> 00:05:46,140
Then do something. 'else' - do something else.

70
00:05:46,620 --> 00:05:49,180
And this is just a syntax you'll have to learn.

71
00:05:49,200 --> 00:05:53,850
But, as you can see, it's fairly easy, you write it a couple of times and you'll get the hang of it.

72
00:05:55,380 --> 00:05:58,920
OK. But now you might have another question.

73
00:06:00,370 --> 00:06:10,300
What if, what if you have something like this, something, something a little bit more complicated, like this, where

74
00:06:10,300 --> 00:06:13,440
you have multiple conditions.

75
00:06:13,450 --> 00:06:16,780
Let's see what I'm talking about by showing you another example.

76
00:06:19,160 --> 00:06:23,890
In this one we're going to use something called 'else-if'.

77
00:06:24,050 --> 00:06:33,360
So again I'm going to say 'if name' equals 'Billy'. Again I'm just going to press the 'right(arrow)' key here and it's

78
00:06:33,360 --> 00:06:34,960
load up what I've written before.

79
00:06:35,130 --> 00:06:38,080
So 'if name' equals 'Billy' - 'alert'.

80
00:06:38,280 --> 00:06:41,980
'hi Billy!', 'else' - 'alert'.

81
00:06:42,030 --> 00:06:43,200
'hmmmm I don't know' -

82
00:06:43,560 --> 00:06:44,060
'hmmmm I don't know you'.

83
00:06:44,130 --> 00:06:47,240
But, what if we also want to check for the name 'Susy'?

84
00:06:47,460 --> 00:06:49,960
Well, I can do something like.

85
00:06:50,040 --> 00:06:52,470
'else if'

86
00:06:53,160 --> 00:07:00,040
'name' equals 'Susy', close bracket '}'.

87
00:07:00,040 --> 00:07:00,760
I'm going to say

88
00:07:04,060 --> 00:07:06,890
'hi Susy!'.

89
00:07:07,060 --> 00:07:09,930
And at the end here you can leave it as is

90
00:07:10,030 --> 00:07:12,880
or again we can add an 'else statement'.

91
00:07:12,880 --> 00:07:18,380
So with both of these fail - both of these comparisons fail

92
00:07:18,450 --> 00:07:24,450
I can say 'else', 'alert'

93
00:07:24,540 --> 00:07:25,230
'I don't know you'.

94
00:07:29,030 --> 00:07:29,990
Close the bracket '}'.

95
00:07:30,020 --> 00:07:32,390
Again don't forget to close the bracket.

96
00:07:32,390 --> 00:07:42,450
Press 'Enter' and see 'hi Billy', because remember my 'name' is 'Billy' but if I do 'name' equals 'Susy'

97
00:07:45,560 --> 00:07:50,960
and I rerun the program. Again press the 'arrow' key and I press 'Enter' again.

98
00:07:51,110 --> 00:07:53,040
'hi Susy!'.

99
00:07:53,130 --> 00:07:54,750
That's pretty cool, right?

100
00:07:54,750 --> 00:07:58,400
You can think of this like how passwords work, right?

101
00:07:58,410 --> 00:08:04,800
This is what forms are doing there, checking your email and checking your password, using simple logic

102
00:08:04,800 --> 00:08:05,820
like this.

103
00:08:06,700 --> 00:08:13,960
Now I want to show you also with conditionals, what's very useful and that's something called 'logical

104
00:08:14,230 --> 00:08:15,760
operators'.

105
00:08:15,820 --> 00:08:20,340
I'm going to show you the three of them. If I can uncomment this.

106
00:08:20,350 --> 00:08:21,010
Here you go!

107
00:08:21,250 --> 00:08:33,900
And these are the three, so let's clean this up and try something. I can go 'if (name === Billy")'.

108
00:08:37,390 --> 00:08:41,820
'or' - these two lines "||", so that's right above your 'Enter' key.

109
00:08:43,750 --> 00:08:50,660
This means 'or' in JavaScript. or '|| name' === "Ann"),

110
00:08:54,410 --> 00:09:01,240
then 'alert'

111
00:09:01,510 --> 00:09:04,120
"Hi Billy or Ann!"

112
00:09:07,200 --> 00:09:08,630
Close your bracket '}'.

113
00:09:08,730 --> 00:09:10,070
What do you think will happen here?

114
00:09:10,170 --> 00:09:13,960
Let's see! 'name' equals

115
00:09:20,420 --> 00:09:20,970
'Billy'.

116
00:09:21,020 --> 00:09:24,280
We execute the program, press 'Enter'.

117
00:09:25,650 --> 00:09:29,950
I get "Hi Billy or Ann!" but if now the 'name' is

118
00:09:32,770 --> 00:09:37,080
'Ann' and I re-execute the program, press 'Enter' again.

119
00:09:37,150 --> 00:09:41,140
'Hi Billy or Ann!'. That's, that's pretty cool.

120
00:09:41,140 --> 00:09:44,050
I can do 'or' comparison.

121
00:09:45,020 --> 00:09:46,670
What's another one that we can do?

122
00:09:46,700 --> 00:09:48,110
Well, we can also do:

123
00:09:51,760 --> 00:10:00,980
'and', which is two of these signs (ampersand) and this means, if 'name' equals 'Billy' and 'name' equals 'Ann'. Hmm, let's see if this works.

124
00:10:02,000 --> 00:10:09,740
Now, let's to 'name' equals 'Ann' and we do the program. Hmmm, and I'm not getting anything. What if I do 'Billy'

125
00:10:14,310 --> 00:10:15,280
and execute.

126
00:10:15,460 --> 00:10:16,880
Nope, nothing.

127
00:10:16,890 --> 00:10:17,580
Why is that?

128
00:10:17,580 --> 00:10:20,850
Well, this doesn't make sense, right?

129
00:10:20,850 --> 00:10:23,750
I mean 'name' equals 'Billy' and 'name'

130
00:10:23,760 --> 00:10:24,730
equals 'Ann'.

131
00:10:24,750 --> 00:10:30,750
But, as we've discussed a variable holds, well, holds a value.

132
00:10:30,780 --> 00:10:36,480
It's a drawer in your desk and it has a certain type of look to it.

133
00:10:36,480 --> 00:10:44,940
It either has a pen or a bunch of files, it can't have both 'Billy' and 'Ann' - at least now with what we've learned

134
00:10:44,940 --> 00:10:46,170
so far.

135
00:10:46,260 --> 00:10:54,790
So this doesn't make sense. Where you would use 'and' - is maybe to check somebody's name. So I can do:

136
00:10:54,930 --> 00:11:01,050
'if firstName', remember I'm using 'camel case' here.

137
00:11:01,270 --> 00:11:14,920
'Bob and lastName' equals 'Smith', close your bracket '}', curly brackets.

138
00:11:14,920 --> 00:11:16,610
And I'm going to say 'alert'.

139
00:11:16,870 --> 00:11:18,850
'Hi Bob Smith'.

140
00:11:20,980 --> 00:11:28,380
Close your brackets, curly brackets, press 'Enter' and looks like I made a mistake here, and it says:

141
00:11:28,380 --> 00:11:30,380
'firstName is not defined' and

142
00:11:30,420 --> 00:11:35,760
Well, that's true because I've never said what 'firstName' is and 'lastName' is. Before I've already defined

143
00:11:35,820 --> 00:11:42,550
what 'name' was, but it needs to know what these variables are otherwise it's saying "Hey, I'm JavaScript

144
00:11:42,550 --> 00:11:46,390
and I've never encountered these words before. What are you talking about?"

145
00:11:46,390 --> 00:11:54,140
So, before we do this. We have to say 'var firstName = "Bob";'

146
00:11:56,740 --> 00:12:00,320
and 'var lastName' equals

147
00:12:05,820 --> 00:12:06,370
'Smith'. OK.

148
00:12:06,790 --> 00:12:11,980
I actually want to draw your attention back to the error - you'll get this a lot and when you're starting

149
00:12:11,980 --> 00:12:15,430
off 'ReferenceError: firstName is not defined'.

150
00:12:15,430 --> 00:12:16,700
It's pretty good error.

151
00:12:16,710 --> 00:12:22,930
But keep that in mind: 'ReferenceError' just means 'I don't know what this value is. It's not referencing

152
00:12:22,930 --> 00:12:24,490
anything'.

153
00:12:24,500 --> 00:12:30,960
OK. So now when we have 'firstName' and 'lastName' defined, we press up again to get to our little execution piece here.

154
00:12:30,970 --> 00:12:41,800
And I go press 'Enter' and I get 'Hi Bob Smith'. If I change the 'firstName' or 'lastName' to say 'Jones', press

155
00:12:41,860 --> 00:12:47,350
'Enter' and let's re-execute this piece of code.

156
00:12:48,490 --> 00:12:54,950
I get nothing, because 'firstName' and 'lastName' must match. OK.

157
00:12:55,010 --> 00:13:01,180
I have one last one over here and that's the 'exclamation point' or 'exclamation mark' not point.

158
00:13:02,250 --> 00:13:03,550
Um, let's see what it does.

159
00:13:03,600 --> 00:13:07,190
This is a little bit tricky but see if you can follow along here.

160
00:13:07,410 --> 00:13:30,510
'if (!(name === "Bob")), opening brackets '{', 'alert("Hi Bob");' and close it '}', press 'Enter' and I

161
00:13:30,510 --> 00:13:32,680
get "Hi Bob".

162
00:13:32,930 --> 00:13:36,220
OK. Let's remember what 'name' was.

163
00:13:36,290 --> 00:13:37,440
It's 'Billy'.

164
00:13:37,440 --> 00:13:48,750
Why am I getting 'High Bob' when 'Billy' is the 'name'. Clearly 'name' doesn't equal 'Bob'. Because of this '!'.

165
00:13:48,860 --> 00:13:54,710
This is the 'not' operator. So it's the opposite.

166
00:13:54,770 --> 00:14:03,740
So it turns this expression which is 'name' equals 'Bob', which is 'false' to 'true'.

167
00:14:03,740 --> 00:14:10,260
So just to show you if I go this and then 'false' [!false], I get 'true'.

168
00:14:10,450 --> 00:14:14,710
And if I go this 'true' [!true], I get 'false'.

169
00:14:14,780 --> 00:14:17,250
So that's why I use the brackets here.

170
00:14:17,270 --> 00:14:25,970
I'm saying: "Evaluate this, and once you do this - add the opposite to not".

171
00:14:26,590 --> 00:14:31,240
And it seems like, "why would I ever want to do that?

172
00:14:31,240 --> 00:14:32,850
When would I ever use this?"

173
00:14:32,950 --> 00:14:40,270
And this is a good thing to use whenever, let's say, you want to turn off a switch.

174
00:14:40,270 --> 00:14:48,980
So just like I showed you if I go 'not true' I can say now it's off, 'not false' - light comes on.

175
00:14:49,510 --> 00:14:55,700
So you'll see cases where we do use this and I promise you it's very-very-very important that we have

176
00:14:55,700 --> 00:14:57,310
it in the language.

177
00:14:57,490 --> 00:15:01,380
So let's just review what we've learned up to this point.

178
00:15:01,450 --> 00:15:08,090
So that in the next video we have a sense of where we've been and where we're going.

179
00:15:08,240 --> 00:15:10,130
We've talked about JavaScript types.

180
00:15:10,340 --> 00:15:16,540
We've learned about 'Numbers', 'Strings', 'Booleans', and 'Undefined'.

181
00:15:16,590 --> 00:15:23,520
We've also learned about JavaScript comparisons that we use sometimes in conditional statements, like

182
00:15:23,520 --> 00:15:30,910
'if' statements. We've learned about JavaScript variables, we've learned about JavaScript conditionals, the

183
00:15:30,960 --> 00:15:40,090
'if', 'else', 'else if' statements and we've learned about JavaScript logical operators: 'and', 'or', and

184
00:15:40,100 --> 00:15:44,950
'exclamation marks'. And there's a few more that we haven't covered yet and don't worry, we will.

185
00:15:45,040 --> 00:15:46,370
I know this is confusing.

186
00:15:46,370 --> 00:15:53,880
This is new syntax is learning a new language but it's not too bad.

187
00:15:53,940 --> 00:15:57,690
It definitely doesn't have as many words as a real language.

188
00:15:57,690 --> 00:16:03,020
You just have to get used to this and practice typing in the console and practice with the problems

189
00:16:03,090 --> 00:16:10,200
and get yourself familiar with running these syntaxes and it will click and it will become second nature.

190
00:16:10,200 --> 00:16:12,570
Like I said, everybody goes through this.

191
00:16:12,720 --> 00:16:13,840
You'll get it!

192
00:16:13,860 --> 00:16:19,510
I promise, I know I keep saying this but I only say because I know, when I started learning this stuff.

193
00:16:19,800 --> 00:16:21,030
That's how I felt.

194
00:16:21,270 --> 00:16:22,760
And that's how everybody else feels.

195
00:16:22,780 --> 00:16:26,850
I want to just make sure that (you) don't worry, you'll get there.

196
00:16:26,850 --> 00:16:32,040
You're going to be a master of JavaScript by the end of this course so I'll see you in the next one.

197
00:16:32,040 --> 00:16:35,140
Can't wait to show you more. Talk to you then.

198
00:16:35,400 --> 00:16:35,710
Bye-bye