1
00:00:00,240 --> 00:00:01,050
Welcome back.

2
00:00:01,350 --> 00:00:06,110
So it's finally time that we actually start learning about javascript and its syntax in the first place

3
00:00:06,110 --> 00:00:10,750
so we're going to start with it's basic builtin primitive data types.

4
00:00:11,250 --> 00:00:12,990
So we have a few objectives here.

5
00:00:12,990 --> 00:00:18,080
The first is that we want to understand the five primitive data types and Javascript.

6
00:00:18,240 --> 00:00:22,040
Next we want to work with numbers and some of the built in numeric operators.

7
00:00:22,170 --> 00:00:27,430
And then finally we're going to talk about strings and common string methods and operators.

8
00:00:28,440 --> 00:00:34,320
So one of the big ideas at the core of every programming language is the languages ability to differentiate

9
00:00:34,320 --> 00:00:37,420
between different categories of data.

10
00:00:37,440 --> 00:00:44,730
So for instance a language could differentiate between a number and a word or it could differentiate

11
00:00:44,730 --> 00:00:50,490
between a whole number and a fractional number or a positive number and a negative number.

12
00:00:50,490 --> 00:00:53,570
And so these vary from language to language.

13
00:00:53,610 --> 00:00:56,660
So in javascript's there are five primitive data types.

14
00:00:56,730 --> 00:00:59,920
There are five low level basic types of data.

15
00:01:00,150 --> 00:01:04,620
And we're going to do a quick overview of the five first and then we're going to dive into detail in

16
00:01:04,620 --> 00:01:06,570
the following slides.

17
00:01:06,570 --> 00:01:13,320
So the first one is numbers and I have three examples here a whole number for a fractional or decimal

18
00:01:13,320 --> 00:01:17,040
number 9.3 and a negative number negative 10.

19
00:01:17,310 --> 00:01:22,950
And I chose these three because I wanted to show you that javascript doesn't care if a number is whole

20
00:01:23,040 --> 00:01:27,030
or if it's fractional if it's negative they're treated all as just numbers.

21
00:01:27,030 --> 00:01:28,970
It's a broad category.

22
00:01:29,070 --> 00:01:32,130
So other languages do differentiate but javascript doesn't.

23
00:01:32,130 --> 00:01:38,280
So again numbers it's just a category for whole numbers fractional numbers and negative numbers.

24
00:01:38,370 --> 00:01:44,820
The next category that we have next data type are called strings and strings are basically text.

25
00:01:44,880 --> 00:01:48,910
So the important thing is that they're inside of quotes.

26
00:01:49,270 --> 00:01:51,500
You can see here we have two examples.

27
00:01:51,600 --> 00:01:55,800
So we have the word hello space world inside of quotes.

28
00:01:55,800 --> 00:01:58,440
That is one string even though it's multiple words.

29
00:01:58,440 --> 00:02:00,480
It's one string.

30
00:02:00,480 --> 00:02:01,920
Same thing here.

31
00:02:01,950 --> 00:02:04,800
This is a number 43 but it's inside of quotes.

32
00:02:04,890 --> 00:02:07,410
So it's actually considered a string to Javascript.

33
00:02:07,590 --> 00:02:11,580
So we can have numbers we can have any character inside of a string.

34
00:02:11,610 --> 00:02:16,630
So the next type is the boolean and booleans only have two options.

35
00:02:16,670 --> 00:02:18,520
They are either true or false.

36
00:02:18,540 --> 00:02:20,790
There's no quotes there's no numbers.

37
00:02:20,790 --> 00:02:24,050
It's just the word true or the word false and that's it.

38
00:02:24,270 --> 00:02:28,480
So why we would actually use these will become much clearer in a few videos from now.

39
00:02:28,770 --> 00:02:31,290
But I just want to let you know booleans exist.

40
00:02:31,470 --> 00:02:33,410
True or false yes or no.

41
00:02:33,510 --> 00:02:35,040
And then there are two more types.

42
00:02:35,160 --> 00:02:38,580
No and undefined and these are actually values.

43
00:02:38,700 --> 00:02:40,140
So they're not really a category.

44
00:02:40,140 --> 00:02:45,630
There's not multiple types of Noall or multiple types of undefined like there are for numbers of strings

45
00:02:45,630 --> 00:02:45,990
.

46
00:02:45,990 --> 00:02:49,090
There is only one null and there's one undefined that just values.

47
00:02:49,320 --> 00:02:51,660
And we'll learn a whole lot more about these in the next video.

48
00:02:51,720 --> 00:02:53,820
But I just want you to be aware they exist.

49
00:02:54,150 --> 00:02:59,420
So numbers strings booleans null and undefined.

50
00:02:59,670 --> 00:03:05,100
So let's dive a little bit deeper into javascript numbers and to do that I can actually open up my javascript

51
00:03:05,100 --> 00:03:07,370
console because I'm in the browser right now.

52
00:03:07,410 --> 00:03:09,360
This is a web page that I'm on.

53
00:03:09,690 --> 00:03:14,300
So I'm going to open up my console command option j feel free to do this.

54
00:03:14,310 --> 00:03:20,370
You can do this on any site and I'm going to start typing some code and the first bit of code that I'm

55
00:03:20,370 --> 00:03:23,200
going to type is really really simple.

56
00:03:23,370 --> 00:03:24,790
It's not going to do much.

57
00:03:24,900 --> 00:03:27,080
Just going to type a number and hit enter.

58
00:03:27,180 --> 00:03:33,540
So in the console when I type a value like a number and I hit enter all that happens is that it spit

59
00:03:33,540 --> 00:03:34,270
back at me.

60
00:03:34,350 --> 00:03:39,630
It's just returned to me the value just shows back up so I can type a negative number negative ninety

61
00:03:39,630 --> 00:03:43,160
nine hit enter and I get negative Friday night.

62
00:03:43,620 --> 00:03:45,800
So I know this is very very basic stuff.

63
00:03:45,810 --> 00:03:49,080
We're not making any exciting applications just yet.

64
00:03:49,080 --> 00:03:53,490
But bear with me very soon will be using these numbers to do more interesting things.

65
00:03:53,820 --> 00:03:58,270
So the first thing that we can do with these numbers is simple mathematical operations.

66
00:03:58,290 --> 00:04:03,060
So these are things that you're already familiar with from basic math a way from the computer.

67
00:04:03,060 --> 00:04:10,320
So things like addition multiplication subtraction and division and the way that those work we just

68
00:04:10,320 --> 00:04:19,710
write some simpler expressions so a numbered like four plus sign 100 and you may notice I use two spaces

69
00:04:19,710 --> 00:04:21,340
here on either side of the plus sign.

70
00:04:21,420 --> 00:04:22,490
That's not mandatory.

71
00:04:22,530 --> 00:04:25,300
So if I hit Enter right now I get four.

72
00:04:25,350 --> 00:04:31,060
I get 104 but I could also do something like three plus seven with no spaces.

73
00:04:31,410 --> 00:04:33,440
And that works as well.

74
00:04:33,450 --> 00:04:35,250
So those are simple operators.

75
00:04:35,370 --> 00:04:40,970
I can also chain them together so I can do five plus four plus three and they get 12.

76
00:04:41,550 --> 00:04:44,930
And I can use other operators too like division.

77
00:04:45,390 --> 00:04:48,320
So let's do six divided by two.

78
00:04:48,720 --> 00:04:51,250
I hit enter and they get three.

79
00:04:51,810 --> 00:04:58,320
I can also do things like one divided by three and you'll see I get zero point three three three repeating

80
00:04:58,320 --> 00:04:59,180
.

81
00:04:59,190 --> 00:05:01,670
So just to wrap up here we also have subtraction.

82
00:05:01,740 --> 00:05:04,020
Let's do one minus 54.

83
00:05:04,380 --> 00:05:08,250
I get negative 53 and then we also have multiplication.

84
00:05:08,250 --> 00:05:11,650
So two times five is going to give us 10.

85
00:05:12,120 --> 00:05:17,940
Another important concept is that javascript follows the order of operations that all regular math follows

86
00:05:17,940 --> 00:05:18,840
as well.

87
00:05:18,870 --> 00:05:30,780
So something like three minus eight times 24 is going to follow the order of operations where the parentheses

88
00:05:31,140 --> 00:05:37,090
will denote that three minus eight needs to be done first and then multiply by 24.

89
00:05:37,250 --> 00:05:40,740
So we get negative 120 at the bottom of the slide.

90
00:05:40,750 --> 00:05:46,020
There's another operator called Maggiolo and Marcelo is usually unfamiliar to my students who have not

91
00:05:46,020 --> 00:05:48,000
done any programming before.

92
00:05:48,000 --> 00:05:53,280
It's often called the remainder operator and in some languages it's also called Moggi lists what it

93
00:05:53,280 --> 00:05:53,870
does.

94
00:05:53,970 --> 00:05:56,280
First of all it uses a percentage sign.

95
00:05:56,310 --> 00:05:58,830
So division is a slash.

96
00:05:58,830 --> 00:06:03,050
Multiplication is the star asterisk modulo is a percentage sign.

97
00:06:03,360 --> 00:06:07,280
So we can type a simple one like 10 mod 3.

98
00:06:07,380 --> 00:06:13,890
People often say modest a short cut and what it will do it will take three and divided into ten as many

99
00:06:13,880 --> 00:06:16,640
times as it goes in as a whole number.

100
00:06:16,650 --> 00:06:21,660
So that would be three times and then it will take the remainder.

101
00:06:22,530 --> 00:06:28,130
So the remainder three goes into ten three times which is nine and the remainder is 1.

102
00:06:28,760 --> 00:06:29,750
So if we get one.

103
00:06:30,180 --> 00:06:35,530
So as another example lets take 20 maade five.

104
00:06:35,860 --> 00:06:38,700
And in this case 5 goes into twenty four times.

105
00:06:38,730 --> 00:06:39,980
There is no remainder.

106
00:06:40,130 --> 00:06:41,800
So we get zero.

107
00:06:42,570 --> 00:06:45,640
So the next day to type that we're going to focus on is the string.

108
00:06:46,080 --> 00:06:47,700
So strings are text.

109
00:06:47,750 --> 00:06:54,100
They are words numbers characters inside of quotes and those quotes can be single or double quotes.

110
00:06:54,150 --> 00:06:57,300
So just as an example we were down to the con..

111
00:06:57,600 --> 00:07:06,090
And we can type something like a low class hit enter and just like the numbers before it just spits

112
00:07:06,090 --> 00:07:12,130
the value back at us so we can do the same thing with single quotes.

113
00:07:12,150 --> 00:07:17,660
Dogs are awesome single quotes hit enter and it spits it back out to us.

114
00:07:17,670 --> 00:07:20,320
Notice that it does show it to us in double quotes.

115
00:07:20,460 --> 00:07:23,300
That's because it treats them the same way.

116
00:07:23,310 --> 00:07:27,580
One small note if we did something with double quotes like hello.

117
00:07:27,750 --> 00:07:32,300
And we ended it with a single quote that gives us a problem.

118
00:07:32,310 --> 00:07:33,600
They need to match.

119
00:07:33,600 --> 00:07:38,790
One other note about single versus double quotes is that I can have a string that uses both.

120
00:07:38,820 --> 00:07:43,010
So I can have a double quoted string with a single quote inside of it.

121
00:07:43,080 --> 00:07:55,040
For example if I wanted to have a string that said I can't stop eating candy I have a single quote right

122
00:07:55,050 --> 00:07:58,320
here in between the end and the T.

123
00:07:58,320 --> 00:08:03,770
That is totally valid because I'm using double quotes on the outside.

124
00:08:04,950 --> 00:08:10,480
If I was using single quotes I can't stop.

125
00:08:10,580 --> 00:08:12,720
Can I use single quotes.

126
00:08:12,720 --> 00:08:13,860
We have a problem.

127
00:08:13,880 --> 00:08:16,870
You can see that it thinks the string ends right here.

128
00:08:16,980 --> 00:08:19,480
When in reality I wanted it to end over here.

129
00:08:19,880 --> 00:08:24,300
So one of the things that we can do with strings is add them together just like with numbers.

130
00:08:24,380 --> 00:08:26,780
Or we could write one plus five.

131
00:08:26,910 --> 00:08:28,320
We can do the same thing.

132
00:08:28,410 --> 00:08:30,630
We can have a string plus another string.

133
00:08:30,620 --> 00:08:36,150
And what happens is javascript will combine them into one string and that's called concatenation.

134
00:08:36,140 --> 00:08:43,470
So if I do this high plus goodbye and I hit enter I get one string.

135
00:08:43,550 --> 00:08:45,150
Hi goodbye.

136
00:08:45,140 --> 00:08:52,560
So if I wanted a space in there I would just need to either add a space here or add a space here and

137
00:08:52,560 --> 00:08:55,570
then I get high goodbye with a space in between.

138
00:08:55,590 --> 00:08:57,610
So that's called concatenation.

139
00:08:58,320 --> 00:09:03,110
So sometimes we might want to actually have a double quote inside of a double quoted string.

140
00:09:03,360 --> 00:09:09,970
So maybe we have something like she said good bye like this.

141
00:09:10,290 --> 00:09:12,230
And I want this to be double quoted.

142
00:09:12,240 --> 00:09:14,080
I don't want to change it to single quotes.

143
00:09:14,100 --> 00:09:18,880
There is a way I can do that and it's using something called an escape character.

144
00:09:18,990 --> 00:09:25,370
So javascript escape characters all start with a backslash and what they are they are ways of escaping

145
00:09:25,530 --> 00:09:30,800
out of the string and writing special characters that might not be valid in the string.

146
00:09:31,010 --> 00:09:37,790
So backslash and then followed by a double quote is how we tell javascript that we want a double quote

147
00:09:38,100 --> 00:09:38,890
in the string.

148
00:09:39,030 --> 00:09:44,650
So if I hit enter you'll see that it's actually just turned into this.

149
00:09:44,730 --> 00:09:50,020
So let me show you again without the backslashes.

150
00:09:50,300 --> 00:09:52,860
And if I hit Enter we get an error.

151
00:09:53,100 --> 00:09:55,530
That's because it thinks this is the first string.

152
00:09:55,560 --> 00:09:56,560
This is a second.

153
00:09:56,610 --> 00:09:57,980
This is in no man's land.

154
00:09:58,350 --> 00:10:02,280
But if I go back by the way I'm hitting the up arrow there.

155
00:10:02,370 --> 00:10:07,260
So if I hit the up arrow it will bring back previous lines of code so I don't have to write all of them

156
00:10:07,250 --> 00:10:08,410
again.

157
00:10:08,580 --> 00:10:17,720
So if I bring this back with the backslashes I get she said backslash quote goodbye backslash quote

158
00:10:17,740 --> 00:10:18,290
.

159
00:10:19,030 --> 00:10:21,920
It just gives me she said goodbye with no backslashes.

160
00:10:22,230 --> 00:10:24,480
So there's another escape character.

161
00:10:24,480 --> 00:10:29,580
If I want a backslash in my string if I actually want that character to be there I could do something

162
00:10:29,580 --> 00:10:30,180
like this

163
00:10:34,940 --> 00:10:38,610
to see a backslash.

164
00:10:38,880 --> 00:10:45,290
It starts with backslash and then another backslash and that will give us see a backslash.

165
00:10:45,300 --> 00:10:46,370
Just one there.

166
00:10:46,940 --> 00:10:53,550
So every string that we create has a length property and length property refers to the number of characters

167
00:10:53,610 --> 00:10:54,700
in that string.

168
00:10:55,080 --> 00:11:05,340
So if I create a string that is just hello in all caps and I do dot length on it it tells me that's

169
00:11:05,340 --> 00:11:17,770
five characters long and if I do something like my favorite number is 1 2 3 4.

170
00:11:17,820 --> 00:11:20,060
That is apparently twenty seven characters long.

171
00:11:20,220 --> 00:11:26,030
I won't count it but it does include a space and includes all the numbers and includes this characters

172
00:11:26,070 --> 00:11:26,990
Well the colon.

173
00:11:27,120 --> 00:11:30,380
So every character whatever it is it's going to be counted.

174
00:11:30,540 --> 00:11:35,850
So we can retrieve the entire length of a string using the length property and we can also retrieve

175
00:11:35,930 --> 00:11:41,280
individual characters like the first character the fifth character using the square bracket notation

176
00:11:41,280 --> 00:11:42,130
right here.

177
00:11:42,600 --> 00:11:47,850
So the way that it works we write the square brackets and then give it a number inside and that number

178
00:11:47,850 --> 00:11:53,700
will correspond to the position in the string of the character that we want and Javascript starts counting

179
00:11:53,690 --> 00:11:54,530
at zero.

180
00:11:54,680 --> 00:11:57,550
So to get the first character let's make a string.

181
00:11:57,680 --> 00:11:59,130
The Beatles.

182
00:11:59,500 --> 00:12:05,250
And if I want the first character I use 0 because javascript starts keeping track at zero.

183
00:12:05,390 --> 00:12:06,960
That is the first character.

184
00:12:07,740 --> 00:12:10,230
And it gives me capital-T.

185
00:12:10,620 --> 00:12:21,690
So if I wanted to get the capital B here I would need to do 0 1 2 3 4 and I get capital B and if I wanted

186
00:12:21,680 --> 00:12:32,540
to get the very last character I could either count so 1 2 0 1 2 3 4 5 6 7 8 9 10.

187
00:12:33,980 --> 00:12:38,240
And that gives me as or I could use the length property.

188
00:12:38,730 --> 00:12:46,580
So I know that the Beatles that length is 11 and that's because it starts counting out one.

189
00:12:46,590 --> 00:12:51,740
It's just the number of characters but the positions are kept track starting from zero.

190
00:12:52,020 --> 00:12:59,310
So the last character as is always the index is always one less than the total length.

191
00:12:59,340 --> 00:13:05,430
So just a side note you might be wondering why would you ever want to find the length or why would you

192
00:13:05,420 --> 00:13:10,650
ever find the tenth character of a string if you can just see the whole string right here and there

193
00:13:10,640 --> 00:13:14,220
are answers for that that we'll see very shortly when we cover variables