And welcome back! Hopefully, those exercises weren't too tough and you breezed right through them.
We're going to talk about something called 'Control Flow'.
Up until now we've been doing this: This little 'arrow'.
We write a line of code, then another line of code, then another line of code, then another line of code
and everything executes in one line.
Just flows, just kind of like water
If you're pouring water down. It's just going straight down.
But what if we had conditions?
What if we want to say something like "If user name is 'Bob' -
say 'Hi, Bob' ".
If not - say "I don't know you". Maybe "Sign in again" or "We don't have this user". That's called 'conditional
execution' and it looks something like this, where we get to a point in the program and we have two options,
where we either want to go one way, or the other, and then continue executing.
So in this lesson we're going to talk about exactly that - 'conditional execution'.
Let's try some out.
So JavaScript 'conditionals',
that's what they're called,
we're going to start off with what's called an 'if' statement.
And an 'if' statement kind of reads, like English. We can do something similar to this:
I say 'if name' equals, remember '===' signs here, because we're not assigning variable, we're
comparing. [if (name === "Billy")] - close the bracket.
And this is just a notation that you'll have to get used to. Again, it's just like learning a language,
you just have to know, that when you're doing an 'if' statement, you have to have these brackets, close the
brackets, and then you do curly bracket '{'.
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
see for indentation.
I can say 'alert("hi Billy!")'
And I close the bracket. And again just like I said, each expression - something that produces a value, needs
to have a semicolon.
And you might think that you need a semicolon here, but again, with an 'if' statement you don't add one.
But 'alert'.
That's an expression, we had a semicolon here.
Now you might be asking yourself "Well, we haven't assigned a variable to 'name' yet". So let's do that!
I'm going to say name - 'var name' equals. We'll say 'Billy'. And I'm going to press 'Enter'.
Let's see what happens.
'hi Billy!'
OK.
So, that looks like it's working just to double check.
What if I change 'name' to 'Susy'?
oops - 'semicolon', not 'colon'.
OK.
And now if we run this program again. I'm going to just copy it.
If 'name' equals 'Billy' - 'alert("hi Billy!")'. Nothing happens.
I just get 'undefined'.
And no alert.
So that's a 'conditional statement'.
But let's be realistic here.
You often won't just have code, that executes when a condition holds 'true', but also code, that handles
other cases, such as when the 'name' isn't 'Billy'. Maybe when the 'name' is 'Susy'.
So this alternate path is shown,
if you remember, in the diagram by the alternate arrow, where you need to have an alternate route in case
the name doesn't equal 'Billy'.
So let's go back again and see what we can do.
So the second keyword, that we're going to learn is 'else'.
So you can do something like 'if (name === "Billy")' and I just press right-key arrow here, and here again. Google Chrome
is smart enough to know that you've typed this before. And now instead of leaving it like that, I now
press 'Space', 'else'.
So 'if name' equals 'Billy', 'alert("hi Billy!"); 'else' - it kind of reads like English, right?
And then again 'else', opening curly bracket, closing curly bracket, and within here I'm going to say,
'alert("hmmm I don't know you");'.
So now let's see what happens.
'hmmmm I don't know you' and why is that?
Because if you remember 'name' equals 'Susy'. If I change 'name' to
'Billy'
Well, and redo the program you'll get:
'Hi Billy'.
So that's what's called an 'if-else' statement.
You write a condition 'if' something equals 'true',
Then do something. 'else' - do something else.
And this is just a syntax you'll have to learn.
But, as you can see, it's fairly easy, you write it a couple of times and you'll get the hang of it.
OK. But now you might have another question.
What if, what if you have something like this, something, something a little bit more complicated, like this, where
you have multiple conditions.
Let's see what I'm talking about by showing you another example.
In this one we're going to use something called 'else-if'.
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
load up what I've written before.
So 'if name' equals 'Billy' - 'alert'.
'hi Billy!', 'else' - 'alert'.
'hmmmm I don't know' -
'hmmmm I don't know you'.
But, what if we also want to check for the name 'Susy'?
Well, I can do something like.
'else if'
'name' equals 'Susy', close bracket '}'.
I'm going to say
'hi Susy!'.
And at the end here you can leave it as is
or again we can add an 'else statement'.
So with both of these fail - both of these comparisons fail
I can say 'else', 'alert'
'I don't know you'.
Close the bracket '}'.
Again don't forget to close the bracket.
Press 'Enter' and see 'hi Billy', because remember my 'name' is 'Billy' but if I do 'name' equals 'Susy'
and I rerun the program. Again press the 'arrow' key and I press 'Enter' again.
'hi Susy!'.
That's pretty cool, right?
You can think of this like how passwords work, right?
This is what forms are doing there, checking your email and checking your password, using simple logic
like this.
Now I want to show you also with conditionals, what's very useful and that's something called 'logical
operators'.
I'm going to show you the three of them. If I can uncomment this.
Here you go!
And these are the three, so let's clean this up and try something. I can go 'if (name === Billy")'.
'or' - these two lines "||", so that's right above your 'Enter' key.
This means 'or' in JavaScript. or '|| name' === "Ann"),
then 'alert'
"Hi Billy or Ann!"
Close your bracket '}'.
What do you think will happen here?
Let's see! 'name' equals
'Billy'.
We execute the program, press 'Enter'.
I get "Hi Billy or Ann!" but if now the 'name' is
'Ann' and I re-execute the program, press 'Enter' again.
'Hi Billy or Ann!'. That's, that's pretty cool.
I can do 'or' comparison.
What's another one that we can do?
Well, we can also do:
'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.
Now, let's to 'name' equals 'Ann' and we do the program. Hmmm, and I'm not getting anything. What if I do 'Billy'
and execute.
Nope, nothing.
Why is that?
Well, this doesn't make sense, right?
I mean 'name' equals 'Billy' and 'name'
equals 'Ann'.
But, as we've discussed a variable holds, well, holds a value.
It's a drawer in your desk and it has a certain type of look to it.
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
so far.
So this doesn't make sense. Where you would use 'and' - is maybe to check somebody's name. So I can do:
'if firstName', remember I'm using 'camel case' here.
'Bob and lastName' equals 'Smith', close your bracket '}', curly brackets.
And I'm going to say 'alert'.
'Hi Bob Smith'.
Close your brackets, curly brackets, press 'Enter' and looks like I made a mistake here, and it says:
'firstName is not defined' and
Well, that's true because I've never said what 'firstName' is and 'lastName' is. Before I've already defined
what 'name' was, but it needs to know what these variables are otherwise it's saying "Hey, I'm JavaScript
and I've never encountered these words before. What are you talking about?"
So, before we do this. We have to say 'var firstName = "Bob";'
and 'var lastName' equals
'Smith'. OK.
I actually want to draw your attention back to the error - you'll get this a lot and when you're starting
off 'ReferenceError: firstName is not defined'.
It's pretty good error.
But keep that in mind: 'ReferenceError' just means 'I don't know what this value is. It's not referencing
anything'.
OK. So now when we have 'firstName' and 'lastName' defined, we press up again to get to our little execution piece here.
And I go press 'Enter' and I get 'Hi Bob Smith'. If I change the 'firstName' or 'lastName' to say 'Jones', press
'Enter' and let's re-execute this piece of code.
I get nothing, because 'firstName' and 'lastName' must match. OK.
I have one last one over here and that's the 'exclamation point' or 'exclamation mark' not point.
Um, let's see what it does.
This is a little bit tricky but see if you can follow along here.
'if (!(name === "Bob")), opening brackets '{', 'alert("Hi Bob");' and close it '}', press 'Enter' and I
get "Hi Bob".
OK. Let's remember what 'name' was.
It's 'Billy'.
Why am I getting 'High Bob' when 'Billy' is the 'name'. Clearly 'name' doesn't equal 'Bob'. Because of this '!'.
This is the 'not' operator. So it's the opposite.
So it turns this expression which is 'name' equals 'Bob', which is 'false' to 'true'.
So just to show you if I go this and then 'false' [!false], I get 'true'.
And if I go this 'true' [!true], I get 'false'.
So that's why I use the brackets here.
I'm saying: "Evaluate this, and once you do this - add the opposite to not".
And it seems like, "why would I ever want to do that?
When would I ever use this?"
And this is a good thing to use whenever, let's say, you want to turn off a switch.
So just like I showed you if I go 'not true' I can say now it's off, 'not false' - light comes on.
So you'll see cases where we do use this and I promise you it's very-very-very important that we have
it in the language.
So let's just review what we've learned up to this point.
So that in the next video we have a sense of where we've been and where we're going.
We've talked about JavaScript types.
We've learned about 'Numbers', 'Strings', 'Booleans', and 'Undefined'.
We've also learned about JavaScript comparisons that we use sometimes in conditional statements, like
'if' statements. We've learned about JavaScript variables, we've learned about JavaScript conditionals, the
'if', 'else', 'else if' statements and we've learned about JavaScript logical operators: 'and', 'or', and
'exclamation marks'. And there's a few more that we haven't covered yet and don't worry, we will.
I know this is confusing.
This is new syntax is learning a new language but it's not too bad.
It definitely doesn't have as many words as a real language.
You just have to get used to this and practice typing in the console and practice with the problems
and get yourself familiar with running these syntaxes and it will click and it will become second nature.
Like I said, everybody goes through this.
You'll get it!
I promise, I know I keep saying this but I only say because I know, when I started learning this stuff.
That's how I felt.
And that's how everybody else feels.
I want to just make sure that (you) don't worry, you'll get there.
You're going to be a master of JavaScript by the end of this course so I'll see you in the next one.
Can't wait to show you more. Talk to you then.
Bye-bye