All language subtitles for 001 Adding Javascript to Websites.en

So up till now we've been learning about Javascript and using it inside the Chrome Developer Tools console.

Now this is the purest form of Javascript.

We're seeing the code as it is and seeing what it does. But it's no use learning about it

if we're not going to apply it to our web site,

right?

So in this lesson, I want to show you how we can incorporate Javascript into our web sites.

So firstly I'm going to create a new folder alongside my other web development projects, and I'm going

to call this one the DOM. And we're going to explain what the DOM or the Document Object Model is all

about

coming up really really soon.

But we're going to add this into Atom, and I'm going to create a new HTML file called index.html.

Now we're going to go through our traditional process of adding in the html boilerplate, giving our

web site a title, which I'm just going to call My Website, and then I'm going to link it up with a

stylesheet as well, which I'll just call styles.css, and we can create that in here as well,

styles.

css.

Now it's completely blank and that's totally fine because we're not going to be using it for a while. And

we're going to head back into our HTML, and we're just going to add a heading that says Hello.

And this is all we have as our simple web site.

And you can see it doesn't look very exciting at the moment.

Now what if we wanted to insert some Javascript?

So previously we've been working a lot with alerts, and what if we can get our web site to load up a

Javascript alert?

Now in the CSS module we explored all the various ways that you can inject CSS into your HTML web

sites.

And if you remember there were three ways that we can go about doing that.

One is inline CSS, the next is internal, and the last one is external

CSS, as we have over here.

Now if you don't remember any of that or if you skipped over and you want to refresh yourself then you

can head back to the CSS module where we talk about these things.

Now Javascript works really similarly.

So we can add inline Javascript by simply adding an attribute into the HTML tag.

So, for example, in the body, I'm going to add an attribute called onload.

And what this means is that when the body of our web site gets loaded up, then whatever Javascript we

place inside these two quotation marks will get carried out.

So what I'm going to say is that when our body is loaded up I'm going to create an alert, and the alert

is going to say Hello.

Now there's a bit of a problem here because you can see that the Javascript that gets created inline

in our HTML has to be included inside some quotation marks.

But in our alert we also want to have the string “Hello”, which is also enclosed by quotation marks.

So you can see how this is confusing, because to the browser it might think that this is a string, and

this is a string, and you can see it in fact is highlighting it exactly that way, because the green parts

are the things that it thinks is a string and the orange part it's interpreting as code.

So, in these situations, when we've got a quotation mark inside another set of quotation marks, what we

have to do is we have to downgrade our quotation marks to a single quote.

So instead of having double quotes we change it to a single quote and now it knows what we're talking

about.

This is one pair and this is another pair, and this makes perfect sense

now. When the body element gets loaded up it's going to look inside these quotation marks to carry out

all of the Javascript that's in here, and, to be complete,

we should also just add a semi-colon there to close off that line of code.

And this line of code is very familiar to us because we've been using it a lot in the previous modules

and all it does is it creates an alert that says Hello.

So now if I save my web page and I head over to Chrome and I hit refresh, then you can see, as soon as

the body gets loaded up, we get an alert that says Hello. Now inline Javascript has a lot of the downsides

of inline CSS. It’s not very modular,

it’s difficult to debug, and it's also not good practice as well,

so try to avoid that if you can.

Now the next way of incorporating Javascript is internal Javascript. So can add it by simply using

a script tag, and everything in between the script can simply be Javascript code. So we can write script

type javascript,

alert (“Hello”).

And you can see this is just normal old Javascript,

it doesn't have to be contained inside quotation marks this time,

so we can go back to our default way of putting strings inside quotation marks.

And now if I hit save you can see it does exactly the same thing.

The browser will read through this web site line by line and, once it hits this script tag, it'll carry

out the Javascript that's inside, which in this case is simply an alert that says Hello.

Now finally we can also incorporate Javascript as an external file.

So instead of having a simple script tag we can have a script tag that has an external source and we

specify the location of that file inside the attribute src.

And so let's go ahead and create a new file,

and let's just call index.js to create the new Javascript file.

And now we can point to it by saying index.js.

So now if we hit save we can add our Javascript code in here and we can say again, same thing,

create an alert that says Hello.

So now when I refresh,

exactly the same thing,

even though there's no Javascript inside our HTML code at all.

So this should be pretty familiar especially if you've already completed the CSS module.

Now the thing that is interesting though is that the position inside the HTML document where we place the

script tag matters a huge deal. With CSS,

we tend to put it inside the head element so that it gets loaded up first before any of the content

of our web site, which tends to be inside the body.

And this is important because if we placed this CSS code right up the bottom of our web site, say just

as our web site ends, let's say that we go into styles.css and we change the h1's color to red.

Now what happens when we run our code is that the browser will go from top to bottom line by line and

when it gets to the h1 it'll create a normal bog standard h1, black text, Serif font,

and it's only much later on, once it hits the stylesheet, does it actually apply these styles, changing

the color to red. So now, if I run.

So now if I go back to my web site and I refresh it, you can see the first thing that happens is I get

a h1 that gets generated

that's black,

so we're at this line.

The next thing that happens is our script gets carried out which if you remember is to create the alert.

So we're at the alert at this point.

And now if I dismiss the script it goes onto the next line which is carrying out the instructions inside

our stylesheet namely changing the color to red.

So that's why, with CSS, you always want to put it right at the top, just below the title usually. But with

Javascript it's the opposite story, because if inside our script we tried to change an HTML element that

does not yet exist then it will fail.

So I'm going to go inside my index.js and I'm going to write some Javascript code that looks

inside our HTML document, looks for the selector that's h1, and then when it finds that element, I'm

going to change its inner HTML, which is basically the text that's inside.

So currently the inner HTML,

so between the html elements, says Hello, but I'm going to change it to the string that's Good Bye instead.

Don't worry if this looks unfamiliar, we're going to be digging much deeper into this in the coming lessons.

Now here's the interesting part.

If my script, which is trying to look for an h1 to change its text to Good Bye, is below the h1,

so after the h1 has already been created, then you can see that it works.

It found the h1 and it changed

it's inner HTML, or rather the text, to Good Bye. But,

if I move this script into the head which will get loaded up first,

so as the browser reads from top to bottom it will hit the script and it will look inside our index.js

and try to look for an h1 to change its text to Good Bye.

But at this stage we don't have an h1 on the screen yet,

so what is it going to change?

So let's check this out.

If I hit refresh you can see that we actually get an error in the console and it says that Cannot set

property 'innerHTML' of null.

And that's because, at the time point when we tried to run this script to look for an h1, there were

no h1s.

It didn't exist yet.

So this was null,

and that's why it didn't work.

So best practice is always to put the script right at the end just before the closing body tag.

And the added benefit of this is, if you have a lot of Javascript code, which usually is a little bit

more time consuming to run, then at least all of the content of your web site will have been loaded up

for the users to see, and the parts that they can't perceive, like the script code, happens afterwards,

so your website looks like it loads faster,

whereas if you put the script right at the top, and the browser has to go through all of the code before

it can display all of the elements, then it might look like your web site is taking a long time to load

up, which nobody has the patience for, right? Now,

in the next lesson, we're going to learn more about this Document Object Model,

and the technology that's enabling us to select and manipulate the HTML elements.

So for all of that and more, I'll see you on the next lesson.