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 access does.
If you remember, HTML gets sent to the browser, then it sees the link tag and the CSFs 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 that ECMWF out, 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 e-mail file, JavaScript, and let's just have a simple header that says JavaScript and HTML.
Save and refresh, perfect, we're master of this already.
We all know what's going on.
So how do we add JavaScript to this?
I mean, with success, we had the link tag, right.
And we had this graph where we tell it where it is.
Well, if you remember.
JavaScript, again, just like she says, is just a file, so let's create one first.
And sublime text, I'm going to create a new file.
I'm going to save it and I'm going to say script dot just see the Dodgers at the end.
That means JavaScript.
Notice what happens when I click save at the bottom.
Sublime text now converted the syntax to JavaScript.
So now I can write something like.
Four plus three, and I get the cool JavaScript colors, I can write if four plus three equals.
Seven.
I can alert.
You're smart, so you can see that it does the syntax for me.
OK, perfect.
I'm going to just save that.
Let's see if we can add this to I forgot the semicolon here, I always forget it, too.
Let's add this to our e-mail.
If it works, we'll get an alert saying you're a smart.
So how can we do this?
Well, there's an e-mail tag called.
Script tag, so linked 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 access we have text access.
Well, we're telling it that this is JavaScript.
And in here, JavaScript can be written right over here.
If I go alert hello, and you might remember this because it's kind of like the style tag for success.
Let's see what happens.
Going to refresh and I get hello, look at that, we just added JavaScript to our e-mail, but I really
want to use this file as we know with success, we don't necessarily want our JavaScript to live on
a Schimmer.
We want separation of concerns.
We want the JavaScript and the JavaScript file.
Well, the way we do that is.
Through a Sourcefire, so all we do is source, you might remember this from images, so instead of
ref and link, we have source and we say script, Dr. James.
I save and I refresh.
And I get your smart.
Now, again, we can say script dogs because, well, it's in the same folder, it's in the desktop
folder.
If it wasn't, then let's say this e-mail wasn't in the desktop folder, we'd have to do something like
desktop.
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, yeah, you can just just like you can with link.
You can have multiple script decks and you can just say script to script three.
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 Let me just remove this for now, why don't we just put it at the top like we do with
the successful.
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 your 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 Fashanu and I'm going to say.
Waiting for JavaScript going to save.
Notice what happens to the header I refresh.
It hasn't changed yet, I have to click your 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 access file and then sees a script 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 waiting for JavaScript.
So you will see in 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 to save.
Let's see what happens.
Not waiting for JavaScript, that got changed.
So we ideally want to put our script 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 lo.
Let's say we had a cool animation.
You'll have to wait until that loads.
But to a user, it appears like the website goes a lot faster because they might not click on a drop
down menu or see the animation right away and notice that there's a lot.
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 dialog.
And here I can say.
Hello.
So this Syntex, a little bit weird, I'll explain later on what is going on here, but console dialogue
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 hello 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 e-mail.
So I'll see you in the next.