Hello and welcome to our first lesson on jQuery.
In this lesson, we're going to be installing jQuery on our website.
So first things first,
we need to open up a browser and go over to jQuery.com.
Now there's two ways we can install jQuery.
We can download this and use it locally on our computer.
So we can use an actual file on our computer,
or we can use this thing called a content delivery network.
So I click the download button there and we can download, download, download.
There's another way we can use yarn and PM Bauer, all these other things.
Or we can take the better way and where it says other CDNs,
we can use Google CDN,
Microsoft CDN JS or deliver or jazz deliver.
And I'm just going to use JS delivered just for no particular reason.
And in this course we're going to be using jQuery 3.5.1.
And so what I wanna do here is get
the minified version because we don't need all the extra source code.
We don't need all the extra spacing or code comments.
We just need the actual JavaScript and we don't
really care what it looks like because we're using jQuery as a library.
So let's copy the HTML and let's open
up Visual Studio code or any text editor that you want to use.
Let's create a new file here.
Let's do HTML five.
That's not gonna work. We're gonna have to save this first.
So I'm gonna save this as index.html.
And then I can do HTML colon five,
hit tab and it auto fills a bunch of cool stuff for us.
And we can do jQuery one-to-one as the title.
Now, when we're using JavaScript,
we typically want to put JavaScript at the bottom of our body,
not outside of the body, but just at the bottom,
just before the closing body tag.
And that code that I copied there,
I'm going to paste that in here.
And we're gonna see that this is coming from CDN ab.js
deliver.net slash npm yada, yada, yada.
And so what a content delivery network is,
is basically a series of servers across the world.
And when you try to download this particular file,
it's going to go to the closest,
the closest server to you.
So it's going to be faster download.
The nice thing about this is they can also provide a layer of caching.
And when there's caching,
that means if someone has already downloaded
this from a particular website somewhere else on the internet,
and you're now accessing the same file is already been downloaded to your computer.
And so you don't have to download it again,
which is really, really nice.
And that's actually the reason we're using a Content Delivery Network or CDN,
is because we want that extra layer of caching just to make our websites super fast.
It also means we don't have to maintain an extra file.
Now when we are writing this,
we need to have a script tag and a closing script tag.
And inside of here,
we are going to be waiting for jQuery to properly load.
So even though this file could technically be downloaded on your computer,
your browser might not have fully
recognize that the whole file is there an end evaluated or executed the code yet,
so it might not fully know.
And so we do this thing where we wait for it to load and we do that
with this weird little syntax and we'll talk about syntax in its own lesson.
But for now we just need to get this up and running so we can do document.ready.
Function, Console.log.
Jquery is loaded.
And so what we're doing here is we're an,
again, we'll talk about syntax and a little bit.
But we're using this as a selector.
We're selecting the entire document, the entire page,
and when it's ready, when the Document Object Model is loaded,
when our JavaScript is done,
loading execute this function and
that's called a callback function will talk about those as well.
And then once that's all done,
just console log jQuery is loaded.
And so if we go to our browser,
open up a new tab and at the top of that is going to file,
that's just outside my recording area,
but I just want to file and then we can go to open file,
select our index.html file.
And we're going to see absolutely nothing happens.
But if we right-click and go to Inspect and go to console,
and let's not preserve the log there.
It's just a setting from a project I was working on.
Let's make this larger. It says jQuery is loaded.
So every time I refresh it says jQuery is loaded and it should be almost instant.
So you wouldn't actually notice that it is or isn't.
Evaluating your JavaScript, your jQuery library.
It's supposed to be super fast,
but this is a good little method just to make sure
that we can continue to use jQuery in our code.
So before anything, what I would like you to do is
make sure you go and get jQuery from a content delivery network,
create a brand new index file like this,
and then just write this weird little script here.
And again, we will dissect this over and over again.
So you'll be super familiar with what this actually is,
but you just need to write this out to begin with.
And then we will move on to the next lesson.
So once you've done that and you're ready,
let's head on over to the next lesson where we talk properly about jQuery syntax.