All language subtitles for 3. Your First Javascript

Hello! Let's learn some JavaScript.

We're going to open up Google Chrome here and we're going to go to 'View', (then) 'Developer'.

And this time 'JavaScript Console'

So you can do 'CMD Option + J' as well and it opens up this Console which is if you remember elements,

you've seen it before.

That's your HTML. Console is where we can write JavaScript. On the right you'll see the outline of

what we'll talk about in this JavaScript segment.

We'll go one by one.

And some of them, we'll come back to. But, don't worry, by the end you'll know everything in here.

So let's talk JavaScript. JavaScript has 7 types. You can think of types as values that JavaScript

can have.

Let's start with the first one.

And that is 'Number'. So the 'Number' type. Well, in JavaScript you can do something like this:

Look at that. The console allows us to write JavaScript as much as we want.

So by writing this and the console giving us an answer means that, 'Yep, this is valid JavaScript'. OK! What

else can we do? Well we can do '3*5'

'15', '12/4', '3'.

That's awesome.

What else can we do? '12-4', '8'.

Can we do this?

Can we do this? '(3+4) * 2'.

So that's '7*2', '14'.

Yeah! It works! And we can even do this [%]. And this is a special character that you might have not seen before

it's called, 'modulo'.

And let's see what happens. Gives me '0'.

What if I do '12 % 5'? It gives me '2'. What this symbol does -

And let's make this bigger so you can see clearly. And I'm going to clear this just so you can see it

better. And I can do clear here, with these brackets and it'll clean up everything for me.

So one more time. What I did was '12 % 5' and that gives me '2'. And what module does is - it gives me

the remainder. So '12 % 5' is... Well it gives me a remainder of '2', because '5' can only go to '10' and then

you have twe remainder.

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

teaching me math!'

But don't worry. This is only a small part of it.

I just want to show you that the first JavaScript type is a 'Number' and we can do operations on them

just like the calculator can.

The second type in JavaScript is a 'String'.

So 'String' is just text and all you need to do to let JavaScript know that you're writing a piece of

text is double-quotes.

So I can just say "Bob". I can say my name ["Andrei"]. And you can also use single-quotes.

And that is a 'String'.

But what else can we do with the String?

Let me clear this. Well

you can also do this.

You can say "Hello"

+ "There!".

What do you think will happen here?

Let's see. "HelloThere!"

But it is one word. We need a space. So we would have to do "Hello " + "there!".

And there we have the space.

OK. So we can add things. So add two sentences together.

What if we do. What if we do something like this.

"This isn't very nice"

I hit 'Enter' and.

OK, that works.

That's good.

But what if I use single-quotes here?

What if I go like this -

And remember I said that I can use single-quotes in JavaScript.

Well, you see the syntax changes and I get a little error.

Well because I'm using a single-quote and then inside the string I'm trying to use a single-quote. And

that would happen as well if I use double-quotes.

So if we go back to the example before and I add another quoting here.

Well, again, I get an error.

So let me clear that.

How can we avoid this problem? Well, with a String in JavaScript we can do something like this:

'This' - Let's use single-quotes.

'This isn\' - And, what is this?

'This isn\'t very nice' (error).

And this backslash [\] has a special meaning.

The '/' says "Hey, whatever comes after this,

It's a special meaning. Means, "just ignore it - don't say that this is a piece of string.

I just want the back tick."

So if I run like this.

Oops! I made the syntax over here wrong.

Obviously the quotes need to match.

So let's try that again.

There you go!

This is very nice. OK

I have another question.

What happens here?

10 + "34". So that's 'Number' 10 + 'String' of 34.

Let's see what happens.

Hmm...Weird. So JavaScript automatically looked at this and said "Hmm, he's adding a Number and a String.

He's probably trying to add strings together".

So JavaScript converts the Number '10' into a String '10' and does '1034'.

That's kind of weird, right?

It's one of the quirks of JavaScript - there's a few of them.

You just have to get used to it.

Let's try something else.

What about if I do

10 - "3" ? Press enter.

I get 7.

What is going on here?

And because with the String, you can't really subtract the string and I mean let's see if I go "hello" - "bye".

I get this weird symbol which we'll get back to. But that doesn't work.

So now JavaScript says "I'm going to" - because he's subtracting,

I'm just going to assume that he means the number '3'.

So he's trying to help you out.

But! sometimes it can have unexpected behavior, so ideally you never do things like this.

Ideally you keep numbers with numbers and strings with strings and you keep the actions between the

like types.

So let's go back to this. What just happened when I say "hello" - "bye"? Well 'NaN' stands for 'Not

a Number' and it's technically - in JavaScript you can see the blue highlighting here.

It's part of the 'Number' type.

So numbers can. You know can range from 1 to 10 to.. You know 567.

But there's also the 'NaN', when it's saying 'Hey, whatever you just wrote is not a number.'

So that's the case as well.

I know it's really, really confusing, but don't worry. It's just the quirks of the language that we're learning.

OK.

I'm going to show you one other JavaScript type.

Before we get to some fun things in the next video.

So the next one is 'Boolean'.

And the 'Boolean' type is very simple. Boolean just means 'true'.

Or 'false'. That's it.

And sometimes that can be represented as '1'-s and '0'-s and for those that know a lot about computers

you might know that computer is pretty much runs on '1'-s and '0'-s and that's, that's where it comes

from.

But Booleans are very-very useful because now we can do something like

'3>2'.

And I'll say 'true': '3' is greater than '2'.

If I do '5>10'.

we'll say 'false': '5' is not greater than '10'.

We can also do '5>=5'.

So I'll say 'true' because I can do greater than or equal to.

And I can also do '5<=5'.

Now what if I want to say does '3=3"?

I get an error.

Why is that?

Because in JavaScript if you want to say something is equal to something you have to say '==='

'3===3' and I get 'true'.

And in the next video I'll tell you why that's the case.

It's very-very interesting.

But for now just remember, that's always a tricky point that a lot of beginners get confused about.

Just remember if you're comparing two things, 3 equal signs, '==='. The last one I want to show you is this:

'3!==3' (does not equal).

Isn't that confusing?

So, this is saying 'Does 3 not equal 3'? False, because '3' equals '3'.

I know.

It can get really-really confusing.

But think of this as the opposite of the 'equal' sign.

So, for example, if I do '4!==5', I'll get 'true', because you're right.

'4' doesn't equal '5'.

So what we just learned are JavaScript comparisons and they're the things right over here.

That's it.

You just have to remember these.

Well that was fun, right?

But we're just getting started.

After this video I have left an exercise sheet for you.

Try to find the answers to the problems and then copy and paste them.

Each of the questions each, of the lines into the JavaScript console.

So for example if I said, you know, "evaluate '3+5'", you'll copy this, put it in the console and

just press 'Enter'.

And I want you to get comfortable working with the console and playing around with it, experimenting around.

And like I said: really try and work on the next problem sets.

I haven't given you a lot because I don't want you to get overwhelmed.

There's a lot more interesting things happening in JavaScript than this.

And you can pick this up fairly easily. But I do encourage you to make sure you do the exercises.

Now, can you get all of them?

Good luck!

I'll see you in the next video.

Bye-bye