All language subtitles for 176 How to Incorporate jQuery into Websites.en_US

All right.

So I've spoken so much about how awesome it is. How can we get it and incorporate jQuery into our

web sites to start benefiting from all of its awesomeness?

Well if you head over to jquery.com, you can see that, just like Bootstrap, you can download all the

jQuery code files through their download page, or you can simply use a CDN.

Now previously we explained what CDNs, or Content Delivery Networks, were and how they work.

So if you're at all confused about this then take a look back at the Bootstrap module when we talked

about this in detail.

Now the most popular option across the web is to use Google's CDN.

And, as we mentioned before, the beauty of using a popular CDN is that if a user has been to another web

site that uses the same CDN to fetch the jQuery library, then they'll likely have it already cached

and saved in their browser, which means that when they want to load up your web site they won't have

to fetch a fresh copy of jQuery,

they've already got it loaded and ready to go,

giving your web site a much faster load rate. So we're going to be using the latest version of jQuery,

3.3.1.

Now at the time when you're watching this video it might just be that it'll be 3.3.2 or a larger

number,

but I want you to get the latest version with the script tag,

and we're going to copy it and we're going to create a new project.

Now I want you to go into your Web Development project folder and create a new project, and we're going

to call this jQuery, and then we're going to drag and drop this into Atom, and then we're going to

hit a in order to create a new file,

and this is going to be index.html

as well as styles.css and also our index.js.

All right. So we've got all three files lined up and now let's head into our HTML, put in our boiler plate,

and we're simply going to call our web site title just jQuery.

We're going to hit save,

and now I want you to pause the video and incorporate our CSS as well as Javascript into this HTML web

page.

So pause the video now and see if you remember how and where to do that.

As we said before our style sheets should go into the head section of our web page.

So in here just below the title I'm going to create a link that has a relationship of stylesheet, and

the href is going to be styles.css.

Now let's hit save and let's just test this to make sure that it's definitely working.

So we're just going to change the background color of our body to red.

And now if I copy the full path of my index.html and paste it in here,

there we go.

All right. So our CSS is working and linked up, next step is to include and link up our Javascript.

Now if you completed the last module then you would know that,

preferably, you should include your Javascript at the end of your web site just before the closing tag

of the body.

So over here we're going to include a script with an external source and the source is going to be index.js.

I'm going to hit save.

And we're going to include some Javascript code in here just to check that it's working,

and if so we'll just send an alert that says "Working".

So now if I hit refresh and I get an alert as well as my background being red,

so I know that everything is all linked up and I can safely delete these bits of code.

Now in our index.html I'm going to include a number of HTML elements.

So first I'm going to have an h1 that just says Hello.

And then I'm going to have a whole bunch of buttons and the buttons are just going to say Click Me, but

I'm going to copy this and paste it so that we have five buttons in total as well as an h1.

All right. So now let's hit save and I'm going to use the same code that I showed you in the last lesson

to write some jQuery

that's going to change the text color of each one to red.

So we're going to start off with the dollar sign which is short for jQuery, so you can either write

it like this or you can write it like this.

They both do exactly the same thing in jQuery. Almost everybody will be using the dollar sign, as a lot

of the reason why we're using jQuery is to shorten our code and do less typing.

OK. So I'm going to target the h1 in our document and I'm going to change its

CSS, namely the color property, to red.

All right. So now we've got our jQuery code.

We're going to be going through all of this code much much deeper later on.

But now all you need to know is that we're using this to select the h1 on our web page and we're changing

its

CSS, namely the color property, to red.

If I refresh my web site you'll see that nothing has happened because we need to incorporate jQuery

in order for this to be valid because right now if you open up the console you can see that it's telling

you that the dollar sign is not defined on Javascript line number two.

Now that's because the dollar sign, if you remember, is jQuery,

so if we don't have any jQuery then it's not really going to work.

So let's incorporate it.

Now head back to the Google Hosted Libraries page and copy the script tag,

and we're going to paste that above our Javascript script tag.

And now if you hit save and refresh then you can see that we have no more errors in our console and

the text is now being turned red using our jQuery code inside our index.js.

Now the position where you place your jQuery script tag is really important.

For example, if we placed it below our index.js, then you'll see that it no longer works,

and it no longer colors our text red, and we get the same problem that the dollar sign is not defined

in our index.js on line 2.

Now the reason is because if you remember the browser will read the code from top to bottom and the

first thing that it will try to process is are index.js.

So it heads over here,

and it tries to make sense and carry out the instructions in here, and when it sees that dollar sign at

this point it hasn't got a hold of the jQuery library yet,

so it still doesn't know what this dollar sign and all the short code is all about.

So that's why if you're going to use jQuery inside your Javascript code, then make sure that you

place the script tag above it so that by the time it gets into this file,

it already knows what the dollar sign is and how all of these shortening methods work.

Now the other way that it might mess up is that if you had both of the script tags inside the head section

of your web site, then when you refreshed your web site you'll notice that again it doesn't work.

And in this case it's not even giving you a proper error. And you have to be really careful about including

the CDN for our jQuery library in the head section of your web site, because what might happen is that

before we've actually finished loading up the entire jQuery library, our index.js might already be

trying to access it.

So one of the ways that you can safeguard against this is to check whether if our jQuery library is ready,

and we do that by using the dollar sign to select our document and then we use the ready method and

we have a callback function in here.

And that means that once our document is ready then it's going to call this code.

So now if we hit save and we refresh then you can see our code now works because we waited until our

jQuery library has finished loading and then we access the h1 to change its color.

Now when you come across web sites, you'll often see this line of code.

But another way of doing exactly the same thing is simply to include all scripts at the end of our web

site right before the closing body tag.

And this is exactly the same thing as this line of code.

So when you see me writing jQuery code in the coming lessons, then you'll notice that I don't use

that ready method because I always have my jQuery script at the end of my web site, and that way I only

try to tap into and manipulate my HTML element after they've been loaded up and rendered on screen.