All right.
So I've spoken so much about how awesome it is, how can we get it and incorporate jQuery into our
websites 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 website 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 boilerplate,
and we're simply going to call our website 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 our h1 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.
Okay. 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 website, 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 $ is not defined on JavaScript line Number 2.
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 our 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 website, then when you refresh your website 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 website, 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 websites, 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
website, 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 website, and that way I only
try to tap into and manipulate my HTML elements after they've been loaded up and rendered on screen.