Original subtitles

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

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

Well, that's exactly what

we're gonna find out in this video.

And so in this lecture,

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

And so it's really important that you

follow this one until the end.

So we can define JavaScript in many different ways.

But, my definition is that

it's a high level object-oriented,

multi-paradigm programming language.

And with that being said,

can we move on to the next lecture now?

Well, probably not because

what does any of that actually mean?

So let's deconstruct this just a little bit

to at least make some sense out of this.

And starting with programming language itself,

a programming language is basically just a tool

that allows us to write code

that will instruct a computer to do something.

And of course, that's our main goal

of using JavaScript, right?

Then I go on and say that

JavaScript is a high-level language,

which means that we don't have to think

about a lot of complex stuff such as managing

the computer's memory while it runs or program.

So in JavaScript,

there are a lot of so-called abstractions

over all these small details

that we don't want to worry about.

And this makes the language

a lot easier to write and to learn.

Next, I say that JavaScript is object oriented.

And all that means is that the language

is mostly based on the concept of objects

for storing most kinds of data.

And of course, we will learn all about

object-oriented programming throughout this course.

Finally, JavaScript is also a multi-paradigm language,

meaning that it's so flexible and versatile,

that we can use all kinds of different programming styles,

such as imperative and declarative programming.

And these different styles are just

different ways of structuring our code, basically.

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

This just a first, very high level overview,

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

Anyway, now that we know what JavaScript actually is,

at least kind of, what is the role

that it plays in web development,

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

And to answer that question,

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

HTML, CSS and of course, JavaScript.

So these three technologies all work together

to create beautiful, interactive

and dynamic websites or web applications.

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

So the text, the images, the buttons,

and all the contents that you see on the webpage

is always written in HTML.

Then the CSS is responsible for the

presentation of that content.

So basically for styling and for laying out

the elements on a webpage.

And then, finally, JavaScript is the real

programming language of the internet.

And it allows developers to add dynamic

and interactive effects to any webpage.

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

load data from remote servers

and really build entire applications in the browser,

which we then call web applications.

Now, we can also use the analogy of nouns,

adjectives, and verbs to make this separation

of roles a bit easier to understand.

So in this analogy, HTML represents the nouns.

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

And so paragraph is the noun here.

The CSS then, is the adjective,

because it describes the noun.

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

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

And finally JavaScript is, of course, the verb,

like saying hide the paragraph.

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

Okay?

Does that make sense?

Now, since we've been talking a lot

about dynamic effects and web applications here,

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

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

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

and there is a lot happening

as we open a profile page like this one.

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

So right off the bat,

you see that there are these

two rotating spinners on the page,

meaning that JavaScript is probably loading some data

from the Twitter service in the background.

Then, as the data arrives,

JavaScript hides these spinners,

and instead show us the loaded content.

So this is a very cool example

of manipulating styles and content, right?

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

like JavaScript showing the tweet box

whenever we hit the tweet button

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

And finally, JavaScript also displays

this really nice user information

as we hover our mouse over any user on Twitter.

And it probably also loads this data on the fly.

So a lot of cool stuff going on here,

and it's all powered by JavaScript.

How cool is that?

And in fact, by the end of the course,

you will actually know how to use

all of these techniques that we just saw here.

And so I hope that this makes you

even more excited about all the content ahead.

Alright, now that we saw what

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

and also look at other cool stuff

that we can build with the power of JavaScript.

So as you already know,

Java script allows us to add dynamic effects to pages.

And in fact, to build entire

web applications in the browser,

and these applications feel almost like the apps

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

So we can say that JavaScript

is what made modern web development,

and really the whole modern web itself

possible in the first place.

Now, if you're already somewhat familiar

with the web development industry,

you probably heard of modern JavaScript libraries

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

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

All you need to know is that these are basically tools

that make writing modern, large scale web applications,

a lot easier and faster.

Now what matters here, is that all these frameworks

and libraries are still 100% based on JavaScript.

And what this means is that you should become really,

really good at JavaScript before learning

and using any of these frameworks,

and not just jump into your first framework

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

Okay?

Also your library of choice

might not always be as popular as it is today.

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

becoming really good at JavaScript,

because then you can easily learn whatever is popular next.

So no matter what anyone tells you,

learning JavaScript properly

is the single best investment that you can make

in your web development career right now.

Now the JavaScript language and the web browser

are actually two separate things.

And what that means is that JavaScript

can also run outside of web browsers.

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

using a very popular technology called Node.js,

which doesn't need any browser at all.

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

which are simply applications that run on a web server

and interact with databases and stuff like that.

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

we create so-called front end applications.

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

of the JavaScript language itself,

and of course also how to use it in the browser

in order to create all these amazing effects

that we've been talking about.

So basically we're going to be

building front-end web applications.

And in the future,

I might also add a section about Node.js

at the end of this course,

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

outside of the browser environment as well.

All right.

And now, just to finish, I want to mention

that we can actually also use JavaScript

to build kind of native mobile applications,

as well as native desktop applications

for any phone and computer operating system out there.

That's because of modern tools like React Native,

the Ionic framework and tools like Electron.

These have completely changed the whole development industry

over the last couple of years,

making things possible that were never possible before.

So as you can see, there's almost nothing

that you can't build after becoming

really good at JavaScript,

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

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

Okay.

And now to finish this lecture,

I want to briefly talk about JavaScript releases

or versions, as you might call them.

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

because it's super important,

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

of JavaScript releases at this point.

Anyway, to make a long story short,

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

which is officially called ES2015,

but most people just call it ES6,

simply because it was released after ES5.

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

Now after ES2015,

there is now a yearly new release

with a couple of new JavaScript features.

In all of these new releases or versions,

starting from ES2015, is what we call modern JavaScript.

But, why am I telling you all this?

Well, it's simply because in this course,

I'm gonna teach you a modern JavaScript,

right from the beginning.

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

However, I'm also convinced that

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

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

The reason for that is in a complete video

about JavaScript releases at the end of this section,

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

So instead, let's now finally get started.