1
00:00:00,980 --> 00:00:05,400
Hello! Let's learn some JavaScript.

2
00:00:05,400 --> 00:00:11,160
We're going to open up Google Chrome here and we're going to go to 'View', (then) 'Developer'.

3
00:00:11,320 --> 00:00:13,640
And this time 'JavaScript Console'

4
00:00:13,720 --> 00:00:22,670
So you can do 'CMD Option + J' as well and it opens up this Console which is if you remember elements,

5
00:00:22,690 --> 00:00:23,800
you've seen it before.

6
00:00:23,830 --> 00:00:30,680
That's your HTML. Console is where we can write JavaScript. On the right you'll see the outline of

7
00:00:30,680 --> 00:00:33,740
what we'll talk about in this JavaScript segment.

8
00:00:33,770 --> 00:00:35,480
We'll go one by one.

9
00:00:36,050 --> 00:00:42,760
And some of them, we'll come back to. But, don't worry, by the end you'll know everything in here.

10
00:00:43,910 --> 00:00:54,220
So let's talk JavaScript. JavaScript has 7 types. You can think of types as values that JavaScript

11
00:00:54,220 --> 00:00:55,890
can have.

12
00:00:55,900 --> 00:00:57,330
Let's start with the first one.

13
00:00:57,970 --> 00:01:06,260
And that is 'Number'. So the 'Number' type. Well, in JavaScript you can do something like this:

14
00:01:07,970 --> 00:01:12,880
Look at that. The console allows us to write JavaScript as much as we want.

15
00:01:12,880 --> 00:01:21,160
So by writing this and the console giving us an answer means that, 'Yep, this is valid JavaScript'. OK! What

16
00:01:21,160 --> 00:01:25,800
else can we do? Well we can do '3*5'

17
00:01:26,110 --> 00:01:30,400
'15', '12/4', '3'.

18
00:01:30,400 --> 00:01:31,090
That's awesome.

19
00:01:31,090 --> 00:01:36,630
What else can we do? '12-4', '8'.

20
00:01:36,680 --> 00:01:37,940
Can we do this?

21
00:01:37,940 --> 00:01:43,580
Can we do this?  '(3+4) * 2'.

22
00:01:43,730 --> 00:01:47,480
So that's '7*2', '14'.

23
00:01:47,610 --> 00:01:55,070
Yeah! It works! And we can even do this [%]. And this is a special character that you might have not seen before

24
00:01:55,390 --> 00:01:56,360
it's called, 'modulo'.

25
00:01:56,360 --> 00:01:59,970
And let's see what happens. Gives me '0'.

26
00:02:00,350 --> 00:02:07,330
What if I do '12 % 5'? It gives me '2'. What this symbol does -

27
00:02:07,370 --> 00:02:13,930
And let's make this bigger so you can see clearly. And I'm going to clear this just so you can see it

28
00:02:13,940 --> 00:02:19,490
better. And I can do clear here, with these brackets and it'll clean up everything for me.

29
00:02:19,910 --> 00:02:29,150
So one more time. What I did was '12 % 5' and that gives me '2'. And what module does is - it gives me

30
00:02:29,240 --> 00:02:38,060
the remainder. So '12 % 5' is... Well it gives me a remainder of '2', because '5' can only go to '10' and then

31
00:02:38,060 --> 00:02:39,540
you have twe remainder.

32
00:02:39,560 --> 00:02:52,760
So if I do, let's say, '12 % 5' or let's do '9', I get a remainder of '3'. And you're thinking 'Oh god! You're just

33
00:02:52,870 --> 00:02:53,760
teaching me math!'

34
00:02:53,770 --> 00:02:56,890
But don't worry. This is only a small part of it.

35
00:02:56,920 --> 00:03:03,040
I just want to show you that the first JavaScript type is a 'Number' and we can do operations on them

36
00:03:03,220 --> 00:03:06,470
just like the calculator can.

37
00:03:06,480 --> 00:03:10,190
The second type in JavaScript is a 'String'.

38
00:03:12,010 --> 00:03:19,720
So 'String' is just text and all you need to do to let JavaScript know that you're writing a piece of

39
00:03:19,720 --> 00:03:22,960
text is double-quotes.

40
00:03:23,090 --> 00:03:30,020
So I can just say "Bob". I can say my name ["Andrei"]. And you can also use single-quotes.

41
00:03:35,350 --> 00:03:38,220
And that is a 'String'.

42
00:03:38,810 --> 00:03:40,720
But what else can we do with the String?

43
00:03:40,960 --> 00:03:43,630
Let me clear this. Well

44
00:03:43,640 --> 00:03:46,070
you can also do this.

45
00:03:46,130 --> 00:03:47,240
You can say "Hello"

46
00:03:49,830 --> 00:03:50,640
+ "There!".

47
00:03:50,730 --> 00:03:52,070
What do you think will happen here?

48
00:03:53,350 --> 00:03:56,210
Let's see. "HelloThere!"

49
00:03:56,800 --> 00:04:08,960
But it is one word. We need a space. So we would have to do "Hello " + "there!".

50
00:04:09,190 --> 00:04:11,370
And there we have the space.

51
00:04:11,430 --> 00:04:16,700
OK. So we can add things. So add two sentences together.

52
00:04:17,970 --> 00:04:23,170
What if we do. What if we do something like this.

53
00:04:23,280 --> 00:04:28,260
"This isn't very nice"

54
00:04:29,860 --> 00:04:30,920
I hit 'Enter' and.

55
00:04:31,090 --> 00:04:31,780
OK, that works.

56
00:04:31,780 --> 00:04:32,230
That's good.

57
00:04:32,290 --> 00:04:34,830
But what if I use single-quotes here?

58
00:04:34,900 --> 00:04:36,120
What if I go like this -

59
00:04:36,140 --> 00:04:40,330
And remember I said that I can use single-quotes in JavaScript.

60
00:04:40,690 --> 00:04:45,650
Well, you see the syntax changes and I get a little error.

61
00:04:45,790 --> 00:04:52,430
Well because I'm using a single-quote and then inside the string I'm trying to use a single-quote. And

62
00:04:52,430 --> 00:04:54,850
that would happen as well if I use double-quotes.

63
00:04:54,860 --> 00:05:01,220
So if we go back to the example before and I add another quoting here.

64
00:05:01,350 --> 00:05:04,460
Well, again, I get an error.

65
00:05:04,620 --> 00:05:07,330
So let me clear that.

66
00:05:07,400 --> 00:05:12,060
How can we avoid this problem? Well, with a String in JavaScript we can do something like this:

67
00:05:13,650 --> 00:05:16,240
'This' - Let's use single-quotes.

68
00:05:16,230 --> 00:05:23,800
'This isn\' - And, what is this?

69
00:05:23,810 --> 00:05:27,490
'This isn\'t very nice' (error).

70
00:05:27,730 --> 00:05:31,170
And this backslash [\] has a special meaning.

71
00:05:31,270 --> 00:05:35,600
The '/' says "Hey, whatever comes after this,

72
00:05:35,670 --> 00:05:41,720
It's a special meaning. Means, "just ignore it - don't say that this is a piece of string.

73
00:05:41,790 --> 00:05:43,970
I just want the back tick."

74
00:05:44,100 --> 00:05:45,770
So if I run like this.

75
00:05:45,820 --> 00:05:48,150
Oops! I made the syntax over here wrong.

76
00:05:48,180 --> 00:05:49,760
Obviously the quotes need to match.

77
00:05:49,770 --> 00:05:50,890
So let's try that again.

78
00:05:52,420 --> 00:05:53,170
There you go!

79
00:05:53,200 --> 00:05:56,190
This is very nice. OK

80
00:05:56,290 --> 00:05:57,320
I have another question.

81
00:05:57,430 --> 00:05:59,800
What happens here?

82
00:06:00,310 --> 00:06:07,350
10 + "34". So that's 'Number' 10 + 'String' of 34.

83
00:06:07,420 --> 00:06:08,440
Let's see what happens.

84
00:06:10,450 --> 00:06:18,480
Hmm...Weird. So JavaScript automatically looked at this and said "Hmm, he's adding a Number and a String.

85
00:06:18,820 --> 00:06:22,320
He's probably trying to add strings together".

86
00:06:22,390 --> 00:06:28,110
So JavaScript converts the Number '10' into a String '10' and does '1034'.

87
00:06:28,450 --> 00:06:29,500
That's kind of weird, right?

88
00:06:29,500 --> 00:06:32,180
It's one of the quirks of JavaScript - there's a few of them.

89
00:06:32,320 --> 00:06:33,770
You just have to get used to it.

90
00:06:34,150 --> 00:06:34,990
Let's try something else.

91
00:06:34,990 --> 00:06:36,180
What about if I do 

92
00:06:36,420 --> 00:06:42,290
10 - "3" ? Press enter.

93
00:06:42,410 --> 00:06:43,560
I get 7.

94
00:06:43,780 --> 00:06:46,120
What is going on here?

95
00:06:46,150 --> 00:06:56,360
And because with the String, you can't really subtract the string and I mean let's see if I go "hello" - "bye".

96
00:06:57,810 --> 00:07:02,500
I get this weird symbol which we'll get back to. But that doesn't work.

97
00:07:02,500 --> 00:07:08,320
So now JavaScript says "I'm going to" - because he's subtracting,

98
00:07:08,330 --> 00:07:10,400
I'm just going to assume that he means the number '3'.

99
00:07:10,400 --> 00:07:12,670
So he's trying to help you out.

100
00:07:13,550 --> 00:07:20,230
But! sometimes it can have unexpected behavior, so ideally you never do things like this.

101
00:07:20,290 --> 00:07:25,540
Ideally you keep numbers with numbers and strings with strings and you keep the actions between the

102
00:07:25,540 --> 00:07:26,430
like types.

103
00:07:27,400 --> 00:07:34,520
So let's go back to this. What just happened when I say "hello" - "bye"? Well 'NaN' stands for 'Not

104
00:07:34,550 --> 00:07:39,010
a Number' and it's technically - in JavaScript you can see the blue highlighting here.

105
00:07:39,140 --> 00:07:41,030
It's part of the 'Number' type.

106
00:07:41,390 --> 00:07:47,390
So numbers can. You know can range from 1 to 10 to.. You know 567.

107
00:07:47,420 --> 00:07:54,820
But there's also the 'NaN', when it's saying 'Hey, whatever you just wrote is not a number.'

108
00:07:54,860 --> 00:07:56,480
So that's the case as well.

109
00:07:56,480 --> 00:08:02,470
I know it's really, really confusing, but don't worry. It's just the quirks of the language that we're learning.

110
00:08:02,890 --> 00:08:03,230
OK.

111
00:08:03,350 --> 00:08:06,070
I'm going to show you one other JavaScript type.

112
00:08:06,440 --> 00:08:10,000
Before we get to some fun things in the next video.

113
00:08:10,200 --> 00:08:12,960
So the next one is 'Boolean'.

114
00:08:15,080 --> 00:08:19,980
And the 'Boolean' type is very simple. Boolean just means 'true'.

115
00:08:21,380 --> 00:08:22,680
Or 'false'. That's it.

116
00:08:22,910 --> 00:08:29,420
And sometimes that can be represented as '1'-s and '0'-s and for those that know a lot about computers

117
00:08:29,420 --> 00:08:35,419
you might know that computer is pretty much runs on '1'-s and '0'-s and that's, that's where it comes

118
00:08:35,419 --> 00:08:35,890
from.

119
00:08:36,780 --> 00:08:41,250
But Booleans are very-very useful because now we can do something like

120
00:08:41,250 --> 00:08:44,039
'3>2'.

121
00:08:44,390 --> 00:08:47,820
And I'll say 'true': '3' is greater than '2'.

122
00:08:48,060 --> 00:08:51,780
If I do '5>10'.

123
00:08:51,930 --> 00:08:55,740
we'll say 'false': '5' is not greater than '10'.

124
00:08:55,770 --> 00:09:03,360
We can also do '5>=5'.

125
00:09:03,420 --> 00:09:06,350
So I'll say 'true' because I can do greater than or equal to.

126
00:09:06,450 --> 00:09:13,950
And I can also do '5<=5'.

127
00:09:15,810 --> 00:09:23,160
Now what if I want to say does '3=3"?

128
00:09:23,440 --> 00:09:24,790
I get an error.

129
00:09:24,820 --> 00:09:26,720
Why is that?

130
00:09:26,750 --> 00:09:32,960
Because in JavaScript if you want to say something is equal to something you have to say '==='

131
00:09:33,080 --> 00:09:37,640
'3===3' and I get 'true'.

132
00:09:37,750 --> 00:09:41,680
And in the next video I'll tell you why that's the case.

133
00:09:41,710 --> 00:09:42,850
It's very-very interesting.

134
00:09:42,850 --> 00:09:50,210
But for now just remember, that's always a tricky point that a lot of beginners get confused about.

135
00:09:50,250 --> 00:09:57,300
Just remember if you're comparing two things, 3 equal signs, '==='. The last one I want to show you is this:

136
00:09:57,930 --> 00:10:03,930
'3!==3' (does not equal).

137
00:10:03,940 --> 00:10:05,170
Isn't that confusing?

138
00:10:05,170 --> 00:10:14,770
So, this is saying 'Does 3 not equal 3'? False, because '3' equals '3'.

139
00:10:14,780 --> 00:10:15,320
I know.

140
00:10:15,380 --> 00:10:17,200
It can get really-really confusing.

141
00:10:17,300 --> 00:10:21,590
But think of this as the opposite of the 'equal' sign.

142
00:10:21,590 --> 00:10:27,800
So, for example, if I do '4!==5', I'll get 'true', because you're right.

143
00:10:27,800 --> 00:10:31,170
'4' doesn't equal '5'.

144
00:10:31,180 --> 00:10:39,530
So what we just learned are JavaScript comparisons and they're the things right over here.

145
00:10:39,660 --> 00:10:40,170
That's it.

146
00:10:40,170 --> 00:10:42,650
You just have to remember these.

147
00:10:42,840 --> 00:10:45,140
Well that was fun, right?

148
00:10:45,630 --> 00:10:47,470
But we're just getting started.

149
00:10:48,060 --> 00:10:50,860
After this video I have left an exercise sheet for you.

150
00:10:51,090 --> 00:10:55,440
Try to find the answers to the problems and then copy and paste them.

151
00:10:55,470 --> 00:10:59,920
Each of the questions each, of the lines into the JavaScript console.

152
00:10:59,970 --> 00:11:08,110
So for example if I said, you know, "evaluate '3+5'", you'll copy this, put it in the console and

153
00:11:08,110 --> 00:11:09,440
just press 'Enter'.

154
00:11:09,610 --> 00:11:15,320
And I want you to get comfortable working with the console and playing around with it, experimenting around.

155
00:11:15,460 --> 00:11:18,990
And like I said: really try and work on the next problem sets.

156
00:11:19,000 --> 00:11:24,400
I haven't given you a lot because I don't want you to get overwhelmed.

157
00:11:24,760 --> 00:11:27,950
There's a lot more interesting things happening in JavaScript than this.

158
00:11:28,150 --> 00:11:33,550
And you can pick this up fairly easily. But I do encourage you to make sure you do the exercises.

159
00:11:33,790 --> 00:11:36,900
Now, can you get all of them?

160
00:11:36,930 --> 00:11:38,330
Good luck!

161
00:11:38,440 --> 00:11:40,190
I'll see you in the next video.

162
00:11:40,190 --> 00:11:40,710
Bye-bye