Hey, everyone, welcome to a new section of the course now we're going to start learning Jay Querrey.
Jay Querrey is a JavaScript library or framework that simplifies the language.
So if Jay Querrey, we are going to need less lines of code, then we would need if we were using pure
JavaScript.
So let's see a basic example of changing the background of all elements that have a given class.
So here is the example with vanilla JavaScript, by the way, Vanilla JavaScript is the name used for
pure JavaScript with no libraries, which is exactly what we have been doing up to this point in the
course.
So you may be familiar with this structure.
So first we select all elements of this class, then we are going to have an array, then we need to
start a loop to run through all elements of this array and then set the background color for each of
them.
So as you can see, we need many lines of code with Jake.
We just need one line of code.
So this is the syntax using query.
We select the element, use the success method, then we just inform the property and the value we want.
With J query, we can manipulate the DOM and the success of aliments.
We can track, event, create effects, animations and et cetera.
J Querrey runs on all browsers and you can find thousands of plug ins online that are based on J query.
I'm going to show you some of them.
So with those plug ins, we can easily create cool stuff like photo galleries, grids, sliders, pop
ups, form validation and much more.
So before we jump into all these great things, let's see how we can install J.
Quarrie on our project.
So the first thing we need to do is creating a link to the James file that contains all the code for
this library.
So for this, we are going to go to this link.
And here we need to download one of these versions, we are going to use this compressed production
query, which by the time I'm recording this video, is on version three point five point one.
So this is the one we're going to need.
If you click this, you will see that you have all the code for this library.
It seems like crazy stuff, but this is just because this is a minified JavaScript file.
As you can see, it's Min.
That meant that, James, so there are no spaces or line breaks, this is why it looks like this.
But if it wasn't a minified file, let's check it out.
So this is the uncompressed version.
As you can see, this looks much more like the code we've been writing so far.
So if you want, you can just copy all this code, not this, but the compressed version that's going
to load much faster so you can copy all this and create a JavaScript file with the same name.
But I think this is a little bit more complicated.
I think the easiest way to get started with J query is using a CDN link.
So if you go down here, you will see that J query or this JS file that we need is hosted online on
a few places.
So let's use Google's CDN if you click here.
Then we go to this link, so as you can see, Google is already hosting the James file we need so we
don't need to have it inside our project.
We can just get it from the Internet.
So let's copy this script.
So controversy and going back to our code.
Let's go to the e-mail file.
We are at at the moment and let's remember that.
We place the script tags at the end of our body element, so here's the link for the James file, the
script that James file, but with Jay Quarrie is a bit different.
The best place to include the script tag is not here.
It is actually at the top of the page inside the head element.
So the first thing inside the head element is going to be the link to Jay Querrey.
And the reason for this is that all those plug ins I've mentioned are going to need Jay queries.
So we need to make sure that this is going to be loaded before any other script in our page.
So by placing it here, we avoid such a problem.
So that's all we need to get started with.
Jay Query As I've said, if you want, you can just go here to your JS folder.
You can start a new file and copy all that code.
So you have the file on your computer.
This is actually safer when you're working on other projects.
It's always good to have the query file inside your project.
But here for this course it's not necessary.
This link is reliable.
This is never going to be down or removed.
So we can just use this for our examples.
So by doing this, we already have Junqueira installed and we can start using it now.
Don't forget to save the file and you don't have to worry about the other HCM fires of this section.
If you go inside them, you will see that I already included the linked query.
I just left the undone on the first one so we could do it together.
So now we have Jake Wari being loaded on all our pages for this section so we can start working with
Jake Wari.
So let's go back to the browser.
Let's go back to our course material.
And in the first lesson, we are going to start learning the J query syntax.
I'll see you then.