So now that you've heard my introduction to Jay Cory as well as my own opinion on teaching Jay query
and the approach that we're taking here which to summarize briefly is we started with vanilla javascript
and now that we're confident doing things that way we're moving on to Jay Querrey.
So the first thing we need to talk about is how do we include a query into an application.
So I'm going to start with a very simple application here just adding in my age to mouth and give it
a title.
Jay queery demo
Jay on Jay queery is always lower case.
Don't ask me why Q Is uppercase all that in just a few elements.
J.
Corey demo.
Just like that and maybe an ally or two and these will just be random text.
OK so three allies etc. you.
And H-1 and will save.
And of course we'll go ahead and open that in the browser.
And here's our demo page.
There are a few ways to add a query to our own application and to our own age html files.
Remember that J query is just a javascript file.
It's no different than the files that we've written so far.
Like our color game dodge A-S or our To Do list.
Yes or whatever javascript files we've created and linked using a script tag.
So in both methods here we're using a script tag.
The only difference is the source attribute.
And in this case we're linking to the file locally and what that means is that I downloaded the code
for a query and they put it in the same directory as my project and then I linked to it.
So I'll show you how we do that if we go to the J Crew documentation and we click on download and then
we need to pick a version and I'm going to go with the latest which is 2.1 point 4 and we have a few
options.
We can download the compressed production Jey query 2.0 point 1.4 and the uncompressed development version
.
I'm going to do both.
Usually I would just do this one because it's compressed the whole point is that it's faster to load
.
But I do want to show you what it looks like.
So I'm going to get the uncompress one and the compressed one and you can see if we get two different
files.
We have Jay queery to point one point for Dot J.S. and we have J queried 2.1 percent for men.
Yes.
So I'm going to open both of those up in sublime here.
Just drag them in and let's take a look at them.
So this file here is the uncompressed version.
And as I scroll through.
Notice that it's just one really long javascript file.
It's over 9000 lines so we can include this file or we can include the minimized version which is the
same code behind the scenes but when something is minimized or compressed all the whitespace is taken
out.
So all these returns all the comments are gone and all the names of variables and properties are shortened
to single characters so you can see that we have things like em or we have things like A B C which are
definitely not the names of properties and arguments inside if the uncompressed file so we can include
either one.
And to do that we just need to make sure that we add the files to the correct directory.
So I'm going to make a new folder instead of my project and I'm going to call it lib.
And we don't have to do this.
We could just drag our two files to be in the same directory as our h team.
I'll file and I'll start with it that way to show you.
So I'm going to open up my H Tim L file and add a script here script tag and I need source equals and
I need to write this name right here which is J query to point one point for Dot J us and we need that
dash.
So I'm going to copy it and just set the source to a query dash 2. 1.4.
J.
Yes and as long as this file J Curry demo aged him out is in the same place as Jay Querrey 2.1 14:4
we should be good.
So I'll save and open it back in the browser and refresh.
If we open up the console we can actually type the word J Query and hit enter.
And if we don't get an error that tells us that the query is correctly added to our application.
So a better way to structure this is to actually put these in a separate directory called the lib just
so that we can separate our own javascript files from library javascript files so that we don't confuse
them and we don't clutter up our directory structure so it's not mandatory at all.
As you saw we had Jay query working.
But a better way to do it is to make a directory and we can call this anything.
You could call it J-curve if you wanted to.
I'm going to go with lib and then I need to change my link here.
My source to be lib slash Jay query dashed to point one point four and I'll do mine.
Yes and you don't have to do that.
There's no difference in functionality.
The only difference is that this is faster to load but I need to have that one here.
So to reiterate we do not need both of them.
We just need one and we need to link to that one correctly.
So let's verify that it worked.
If I refresh rate that works well.
You can type J query and we can also type dollar sign and if those work we know that sheet query is
correctly installed.
So that's the first way we can download a query locally and then link to it with the script tag.
There is another option though which is to use a CD in CD and stands for content distributed network
and think of it as just a way of grabbing a file from online without actually having to download it
to your machine.
So I'll show you if we just copy this you Arel right here which happens to be AJ queery CDN for version
2.0 1.4.
And if I just go to that you URL you'll see that it's just the J Corey file here.
What we can do is link to this you Arel or any other J queery CD and you know there's a lot of them
on line and that will work the same way as linking to the file here locally.
The only difference is that this will actually load a little bit faster because it's local on our computer
and if we replace it with the CD then it won't be noticeable to us.
But under the hood it does take a little longer but of course it is a lot easier and simpler to use
because we don't have to download a copy of Jay query for every application that we make.
So I'll refresh.
And if we type J query here it should still work and it does.
Lastly I'll show you how I found that CDN.
Just open up a new tab and look for Cdn Jay queery and if we just do a search for Cdn and then any other
library which will see some some other ones later on.
Mike J query.
You'll see that we get a bunch of links.
So Jay query has an official one.
There's the Cdn dodge city NJ s dot com and we have a bunch of you or else here that we can just copy
.
We would have to pay attention to the version so this is for 3.00.
If we go to 2.20 point 4 it gives us a uncompress the normal version and a modified version.
And just to show you if I go to that you are well.
I see them in a file file.
So to wrap up.
Either way works.
We need a script tag in both cases but the source is either going to be a local file or a file that's
hosted somewhere that we're linking to using a CDN.
The last thing you want to do is give you a quick 30 second preview of what she court looks like.
So here's a little bit of what J query looks like.
First thing you might notice is there's a dollar sign being used in four different places.
We have a bunch of methods like Dom click that see SS dot fade out dot remove.
So what this code will actually do is select a button with ID trigger and when it is clicked it runs
all this code and when it's clicked we're going to change the background color of the body to be yellow
.
We're going to fade out all images on the page.
It's going to take 3 seconds to fade them out and then when the fade out is done we're going to remove
those three images from the page.
So click on the button with IDF trigger.
Change the body color fade out images over three seconds and then remove images when they're done.
All right so that was the speed preview of a query.
Now let's actually start writing some in the next video.