And welcome back!
We're going to take a quick break from learning JavaScript syntax to show you how JavaScript gets implemented
in the browser.
We're going to go back to this image that we've seen many times before
in this course. And we have a pretty good idea of what HTML and CSS does.
If you remember, HTML gets sent to the browser, then it sees the 'link' tag and the CSS gets sent to
the browser.
But what about our new friend JavaScript over here?
What happens with him?
Well, in this video we're going to learn exactly that.
So I have over here an index.html file. I'm going to open it with Google Chrome.
It's completely empty now.
And I'm also going to drag it to my Sublime text, so that we can add something to it.
So I have Sublime text and the browser, and we're going to use our little short command to create a quick
html file - 'Javascript'.
And let's have just have a simple 'header' that says 'Javascript in HTML'. Save and refresh.
Perfect!
We've masters of this already.
We all know what's going on.
So how do we add JavaScript to this?
I mean: with CSS we had the 'link' tag, right? And we had this 'href' where we tell it where it is. Well, if
you remember, JavaScript again just like HTML and CSS is just a file.
So let's create one first. In Sublime text
I'm going to create a new file.
I'm going to save it and I'm going to say 'script.js'.
'script.js'.
See the 'dot js' at the end?
That means JavaScript.
Notice, what happens when I click 'save'. At the bottom Sublime Text
now converted syntax to JavaScript.
So now I can write something like '4+3' and I get the cool JavaScript colors as, and I can write
'if (4+3 === 7)', I can 'alert("You're smart!").
So you can see that it does the syntax for me.
OK.
Perfect.
Then I just save that.
Let's see if we can add this to ...oops.
I forgot the semicolon here.
I always forget it too.
Let's add this to our HTML.
If it works, we'll get an 'alert' saying "You're a smart!"
So how can we do this?
Well, there's a HTML tag called 'script' tag.
So 'link' tag - for stylesheet, 'script' tag for - JavaScript. And all we do is this:
We have the 'type = "text/javascript"'. You see over here how with CSS we have "text/css". Well, we're telling it
here that this is JavaScript. And in here JavaScript can be written right over here.
I go 'alert("hello")' and you might remember this because it's a kind of like the 'style' tag for CSS.
Let's see what happens.
I'm going to refresh and I get
'hello'.
Look at that!
We just added JavaScript to HTML. But I really want to use this file. As we know with CSS we
don't necessarily want our JavaScript to live on HTML, we want separation of concerns, we want the
JavaScript in the JavaScript file.
Well, the way we do that is - through a source file.
So all we do is - 'src'. You might remember this from images.
So instead of 'href' and 'link' we have 'src' and we say 'script.js'.
I save and I refresh. And I get "You're smart!".
Now again we can say 'script.js', because, well, it's in the same folder - it's in the desktop folder.
If it wasn't, then let's say, this HTML wasn't in the desktop folder, we'd have to do something
like 'desktop/script.js...'. OK.
So that's very interesting. What if I have multiple JavaScript files, we might have seen that
in... remember Bootstrap and Bootstrap we have like three 'script' tags.
Well, yep.
You can, just - just like you can with 'link', you can have multiple 'script' tags and you can just say 'script2',
'script3' and again, each one gets executed one at a time.
OK.
Now one question you might have is: 'Why did I just put the 'script' tag at the bottom here, at the bottom
of the body?'
Why didn't we -
and let me just remove this for now...
Why don't we just put it at the top, like we do with the CSS file?
Well, let me show you something.
Let's put it up here.
Let's see what happens.
I'm going to refresh. OK. I get "You're smart!"
I don't know if you saw that.
Did you see the JavaScript go?
Let's change this quickly.
Let's say, our website is now fresh and new and I'm going to say 'Waiting for Javascript'.
I'm going to save. Notice what happens to the header.
I refresh. It hasn't changed yet.
I have to click "You're smart!"
You see, it's completely gone.
Click 'OK' and only then it shows up, because the browser reads the file, goes and gets the CSS file and
then sees the 'script' tag and says "Oh, I'm going to go read what's over here!"
And here is an 'alert' and what an 'alert' does it...
It waits for us to click 'OK', so the browser can't display (while) waiting for JavaScript.
So you will see an older websites people that put the 'script' tags in here, but that actually delays what
gets seen by the user.
Instead, if we put it down here and change the text again to 'Not waiting' and a save. See what happens.
'Not waiting for Javascript' - that got changed. So we ideally want to put our 'script' tags at the bottom
of the body.
What that means is that the website gets displayed, gets rendered and then we have to still wait for
the JavaScript to load - let's say we had a cool animation.
I'll have to wait until that loads.
But to a user it appears like the website loads a lot faster because they might not click on a dropdown
menu, or see the animation right away and notice that there is a lag, but they will see a delay if they
don't see anything on the page.
So 'script' tags at the bottom.
One last thing.
How do we get that console to print stuff out?
It would be nice if, instead of alert all the time I can get something in the console.
Well, in JavaScript you can do something, called 'console.log'.
And here I can say "Helooooo".
So this syntax the little bit weird.
I'll explain later on what is going on here, but 'console.log' is a special little syntax, that we can use.
And now if I refresh the page, I get logging over here. So I can write as much as I want here.
Kind of like 'alert' but without getting that annoying pop up over and over and refresh.
And I get 'Hellooooo'.
And we'll be using 'console.log' a lot in the next couple of videos.
You can see here that it's a nice way for us to print something to the console, before we learn how to
change our HTML.
So I'll see in the next one. Bye-bye