Original subtitles

1 1

So you've already written a line or two of JavaScript, 2

2

but what exactly is JavaScript and what can we do with it? 3

3

Well, that's exactly what 4

4

we're gonna find out in this video. 5

5

And so in this lecture, 6

6

we will set the stage for the rest of the course. 7

7

And so it's really important that you 8

8

follow this one until the end. 9

9

So we can define JavaScript in many different ways. 10

10

But, my definition is that 11

11

it's a high level object-oriented, 12

12

multi-paradigm programming language. 13

13

And with that being said, 14

14

can we move on to the next lecture now? 15

15

Well, probably not because 16

16

what does any of that actually mean? 17

17

So let's deconstruct this just a little bit 18

18

to at least make some sense out of this. 19

19

And starting with programming language itself, 20

20

a programming language is basically just a tool 21

21

that allows us to write code 22

22

that will instruct a computer to do something. 23

23

And of course, that's our main goal 24

24

of using JavaScript, right? 25

25

Then I go on and say that 26

26

JavaScript is a high-level language, 27

27

which means that we don't have to think 28

28

about a lot of complex stuff such as managing 29

29

the computer's memory while it runs or program. 30

30

So in JavaScript, 31

31

there are a lot of so-called abstractions 32

32

over all these small details 33

33

that we don't want to worry about. 34

34

And this makes the language 35

35

a lot easier to write and to learn. 36

36

Next, I say that JavaScript is object oriented. 37

37

And all that means is that the language 38

38

is mostly based on the concept of objects 39

39

for storing most kinds of data. 40

40

And of course, we will learn all about 41

41

object-oriented programming throughout this course. 42

42

Finally, JavaScript is also a multi-paradigm language, 43

43

meaning that it's so flexible and versatile, 44

44

that we can use all kinds of different programming styles, 45

45

such as imperative and declarative programming. 46

46

And these different styles are just 47

47

different ways of structuring our code, basically. 48

48

Again, you will learn all about this throughout the course. 49

49

This just a first, very high level overview, 50

50

but I hope it's been making sense so far. 51

51

Anyway, now that we know what JavaScript actually is, 52

52

at least kind of, what is the role 53

53

that it plays in web development, 54

54

or in other words, what do we actually use it for? 55

55

And to answer that question, 56

56

let's actually look at a three core technologies of the web, 57

57

HTML, CSS and of course, JavaScript. 58

58

So these three technologies all work together 59

59

to create beautiful, interactive 60

60

and dynamic websites or web applications. 61

61

Now the HTML is responsible for the content of the page. 62

62

So the text, the images, the buttons, 63

63

and all the contents that you see on the webpage 64

64

is always written in HTML. 65

65

Then the CSS is responsible for the 66

66

presentation of that content. 67

67

So basically for styling and for laying out 68

68

the elements on a webpage. 69

69

And then, finally, JavaScript is the real 70

70

programming language of the internet. 71

71

And it allows developers to add dynamic 72

72

and interactive effects to any webpage. 73

73

We also use it to manipulate the content or the CSS, 74

74

load data from remote servers 75

75

and really build entire applications in the browser, 76

76

which we then call web applications. 77

77

Now, we can also use the analogy of nouns, 78

78

adjectives, and verbs to make this separation 79

79

of roles a bit easier to understand. 80

80

So in this analogy, HTML represents the nouns. 81

81

For example, saying that the P element is a paragraph. 82

82

And so paragraph is the noun here. 83

83

The CSS then, is the adjective, 84

84

because it describes the noun. 85

85

Like this piece of CSS saying the paragraph text is red. 86

86

And so here, red is the adjective describing the noun. 87

87

And finally JavaScript is, of course, the verb, 88

88

like saying hide the paragraph. 89

89

And so here we are doing something and so we have a verb. 90

90

Okay? 91

91

Does that make sense? 92

92

Now, since we've been talking a lot 93

93

about dynamic effects and web applications here, 94

94

let's now actually take a look at a real example 95

95

to make it even more clear what JavaScript is capable of. 96

96

And so this is the Twitter web application on twitter.com 97

97

and there is a lot happening 98

98

as we open a profile page like this one. 99

99

And so I thought that this was a very cool example. 100

100

So right off the bat, 101

101

you see that there are these 102

102

two rotating spinners on the page, 103

103

meaning that JavaScript is probably loading some data 104

104

from the Twitter service in the background. 105

105

Then, as the data arrives, 106

106

JavaScript hides these spinners, 107

107

and instead show us the loaded content. 108

108

So this is a very cool example 109

109

of manipulating styles and content, right? 110

110

But there's also some simpler dynamic effect on this page, 111

111

like JavaScript showing the tweet box 112

112

whenever we hit the tweet button 113

113

and then hides it as we click outside of that box. 114

114

And finally, JavaScript also displays 115

115

this really nice user information 116

116

as we hover our mouse over any user on Twitter. 117

117

And it probably also loads this data on the fly. 118

118

So a lot of cool stuff going on here, 119

119

and it's all powered by JavaScript. 120

120

How cool is that? 121

121

And in fact, by the end of the course, 122

122

you will actually know how to use 123

123

all of these techniques that we just saw here. 124

124

And so I hope that this makes you 125

125

even more excited about all the content ahead. 126

126

Alright, now that we saw what 127

127

JavaScript is really capable of, let's quickly recap, 128

128

and also look at other cool stuff 129

129

that we can build with the power of JavaScript. 130

130

So as you already know, 131

131

Java script allows us to add dynamic effects to pages. 132

132

And in fact, to build entire 133

133

web applications in the browser, 134

134

and these applications feel almost like the apps 135

135

that we use on our computers and phones every single day. 136

136

So we can say that JavaScript 137

137

is what made modern web development, 138

138

and really the whole modern web itself 139

139

possible in the first place. 140

140

Now, if you're already somewhat familiar 141

141

with the web development industry, 142

142

you probably heard of modern JavaScript libraries 143

143

and frameworks such as React, Angular or Vue, right? 144

144

And if you didn't, that's absolutely no problem. 145

145

All you need to know is that these are basically tools 146

146

that make writing modern, large scale web applications, 147

147

a lot easier and faster. 148

148

Now what matters here, is that all these frameworks 149

149

and libraries are still 100% based on JavaScript. 150

150

And what this means is that you should become really, 151

151

really good at JavaScript before learning 152

152

and using any of these frameworks, 153

153

and not just jump into your first framework 154

154

after you know how to write, like, 10 lines of JavaScript. 155

155

Okay? 156

156

Also your library of choice 157

157

might not always be as popular as it is today. 158

158

And the best way to be prepared is, you guessed it, 159

159

becoming really good at JavaScript, 160

160

because then you can easily learn whatever is popular next. 161

161

So no matter what anyone tells you, 162

162

learning JavaScript properly 163

163

is the single best investment that you can make 164

164

in your web development career right now. 165

165

Now the JavaScript language and the web browser 166

166

are actually two separate things. 167

167

And what that means is that JavaScript 168

168

can also run outside of web browsers. 169

169

For example, it's possible to use JavaScript on a web server 170

170

using a very popular technology called Node.js, 171

171

which doesn't need any browser at all. 172

172

And this allows us to create so-called backend applications, 173

173

which are simply applications that run on a web server 174

174

and interact with databases and stuff like that. 175

175

On the other hand, when we use JavaScript in the browser, 176

176

we create so-called front end applications. 177

177

So in this course, we will learn the ins and outs 178

178

of the JavaScript language itself, 179

179

and of course also how to use it in the browser 180

180

in order to create all these amazing effects 181

181

that we've been talking about. 182

182

So basically we're going to be 183

183

building front-end web applications. 184

184

And in the future, 185

185

I might also add a section about Node.js 186

186

at the end of this course, 187

187

so that you can get a sense of how we can use JavaScript 188

188

outside of the browser environment as well. 189

189

All right. 190

190

And now, just to finish, I want to mention 191

191

that we can actually also use JavaScript 192

192

to build kind of native mobile applications, 193

193

as well as native desktop applications 194

194

for any phone and computer operating system out there. 195

195

That's because of modern tools like React Native, 196

196

the Ionic framework and tools like Electron. 197

197

These have completely changed the whole development industry 198

198

over the last couple of years, 199

199

making things possible that were never possible before. 200

200

So as you can see, there's almost nothing 201

201

that you can't build after becoming 202

202

really good at JavaScript, 203

203

which if you think about it, is really kind of mind-blowing. 204

204

It's just amazing, because the possibilities are so endless. 205

205

Okay. 206

206

And now to finish this lecture, 207

207

I want to briefly talk about JavaScript releases 208

208

or versions, as you might call them. 209

209

We will come back to this topic by the end of the section 210

210

because it's super important, 211

211

but it's also a good idea to get a first overview 212

212

of JavaScript releases at this point. 213

213

Anyway, to make a long story short, 214

214

there has been a huge update to the language in 2015, 215

215

which is officially called ES2015, 216

216

but most people just call it ES6, 217

217

simply because it was released after ES5. 218

218

And by the way, E. S stands for ECMAScript. 219

219

Now after ES2015, 220

220

there is now a yearly new release 221

221

with a couple of new JavaScript features. 222

222

In all of these new releases or versions, 223

223

starting from ES2015, is what we call modern JavaScript. 224

224

But, why am I telling you all this? 225

225

Well, it's simply because in this course, 226

226

I'm gonna teach you a modern JavaScript, 227

227

right from the beginning. 228

228

And I wanted to make that very clear right from the start. 229

229

However, I'm also convinced that 230

230

you need to understand what came before ES2015, so ES5. 231

231

And so I will also show you what's important of ES5. 232

232

The reason for that is in a complete video 233

233

about JavaScript releases at the end of this section, 234

234

because now I no longer want to bore you with theory. 235

235

So instead, let's now finally get started.