1 00:00:09,160 --> 00:00:15,310 Hey, everyone, welcome to a new section of the course now we're going to start learning Jay Querrey. 2 00:00:15,670 --> 00:00:22,430 Jay Querrey is a JavaScript library or framework that simplifies the language. 3 00:00:22,780 --> 00:00:30,160 So if Jay Querrey, we are going to need less lines of code, then we would need if we were using pure 4 00:00:30,220 --> 00:00:31,140 JavaScript. 5 00:00:31,390 --> 00:00:37,990 So let's see a basic example of changing the background of all elements that have a given class. 6 00:00:38,470 --> 00:00:45,940 So here is the example with vanilla JavaScript, by the way, Vanilla JavaScript is the name used for 7 00:00:45,940 --> 00:00:53,950 pure JavaScript with no libraries, which is exactly what we have been doing up to this point in the 8 00:00:53,950 --> 00:00:54,490 course. 9 00:00:55,720 --> 00:00:59,290 So you may be familiar with this structure. 10 00:00:59,320 --> 00:01:07,000 So first we select all elements of this class, then we are going to have an array, then we need to 11 00:01:07,000 --> 00:01:14,290 start a loop to run through all elements of this array and then set the background color for each of 12 00:01:14,290 --> 00:01:14,540 them. 13 00:01:14,860 --> 00:01:18,600 So as you can see, we need many lines of code with Jake. 14 00:01:19,000 --> 00:01:21,430 We just need one line of code. 15 00:01:21,760 --> 00:01:24,610 So this is the syntax using query. 16 00:01:24,970 --> 00:01:34,570 We select the element, use the success method, then we just inform the property and the value we want. 17 00:01:35,020 --> 00:01:39,670 With J query, we can manipulate the DOM and the success of aliments. 18 00:01:39,670 --> 00:01:44,900 We can track, event, create effects, animations and et cetera. 19 00:01:45,490 --> 00:01:52,520 J Querrey runs on all browsers and you can find thousands of plug ins online that are based on J query. 20 00:01:52,780 --> 00:01:55,150 I'm going to show you some of them. 21 00:01:55,330 --> 00:02:03,130 So with those plug ins, we can easily create cool stuff like photo galleries, grids, sliders, pop 22 00:02:03,130 --> 00:02:06,340 ups, form validation and much more. 23 00:02:06,370 --> 00:02:12,850 So before we jump into all these great things, let's see how we can install J. 24 00:02:12,850 --> 00:02:15,390 Quarrie on our project. 25 00:02:15,430 --> 00:02:22,510 So the first thing we need to do is creating a link to the James file that contains all the code for 26 00:02:22,510 --> 00:02:23,650 this library. 27 00:02:23,830 --> 00:02:27,880 So for this, we are going to go to this link. 28 00:02:29,520 --> 00:02:36,750 And here we need to download one of these versions, we are going to use this compressed production 29 00:02:37,080 --> 00:02:44,120 query, which by the time I'm recording this video, is on version three point five point one. 30 00:02:44,130 --> 00:02:46,380 So this is the one we're going to need. 31 00:02:46,380 --> 00:02:51,690 If you click this, you will see that you have all the code for this library. 32 00:02:51,960 --> 00:02:59,010 It seems like crazy stuff, but this is just because this is a minified JavaScript file. 33 00:02:59,010 --> 00:03:00,960 As you can see, it's Min. 34 00:03:01,940 --> 00:03:10,600 That meant that, James, so there are no spaces or line breaks, this is why it looks like this. 35 00:03:11,060 --> 00:03:16,070 But if it wasn't a minified file, let's check it out. 36 00:03:16,100 --> 00:03:19,100 So this is the uncompressed version. 37 00:03:19,340 --> 00:03:25,790 As you can see, this looks much more like the code we've been writing so far. 38 00:03:26,000 --> 00:03:33,200 So if you want, you can just copy all this code, not this, but the compressed version that's going 39 00:03:33,200 --> 00:03:40,670 to load much faster so you can copy all this and create a JavaScript file with the same name. 40 00:03:41,000 --> 00:03:44,060 But I think this is a little bit more complicated. 41 00:03:44,330 --> 00:03:50,770 I think the easiest way to get started with J query is using a CDN link. 42 00:03:51,020 --> 00:04:00,380 So if you go down here, you will see that J query or this JS file that we need is hosted online on 43 00:04:00,380 --> 00:04:01,660 a few places. 44 00:04:01,940 --> 00:04:05,600 So let's use Google's CDN if you click here. 45 00:04:07,740 --> 00:04:14,820 Then we go to this link, so as you can see, Google is already hosting the James file we need so we 46 00:04:14,820 --> 00:04:17,640 don't need to have it inside our project. 47 00:04:18,060 --> 00:04:20,940 We can just get it from the Internet. 48 00:04:21,210 --> 00:04:23,520 So let's copy this script. 49 00:04:25,840 --> 00:04:29,110 So controversy and going back to our code. 50 00:04:30,510 --> 00:04:32,680 Let's go to the e-mail file. 51 00:04:32,700 --> 00:04:36,600 We are at at the moment and let's remember that. 52 00:04:37,970 --> 00:04:46,940 We place the script tags at the end of our body element, so here's the link for the James file, the 53 00:04:46,940 --> 00:04:51,970 script that James file, but with Jay Quarrie is a bit different. 54 00:04:52,370 --> 00:04:56,390 The best place to include the script tag is not here. 55 00:04:56,720 --> 00:05:01,910 It is actually at the top of the page inside the head element. 56 00:05:02,160 --> 00:05:08,570 So the first thing inside the head element is going to be the link to Jay Querrey. 57 00:05:08,750 --> 00:05:15,380 And the reason for this is that all those plug ins I've mentioned are going to need Jay queries. 58 00:05:15,380 --> 00:05:21,650 So we need to make sure that this is going to be loaded before any other script in our page. 59 00:05:21,830 --> 00:05:25,600 So by placing it here, we avoid such a problem. 60 00:05:25,610 --> 00:05:28,730 So that's all we need to get started with. 61 00:05:28,730 --> 00:05:36,350 Jay Query As I've said, if you want, you can just go here to your JS folder. 62 00:05:36,530 --> 00:05:40,280 You can start a new file and copy all that code. 63 00:05:40,550 --> 00:05:44,120 So you have the file on your computer. 64 00:05:44,270 --> 00:05:49,000 This is actually safer when you're working on other projects. 65 00:05:49,010 --> 00:05:53,750 It's always good to have the query file inside your project. 66 00:05:53,750 --> 00:05:57,510 But here for this course it's not necessary. 67 00:05:57,530 --> 00:05:59,280 This link is reliable. 68 00:05:59,300 --> 00:06:02,210 This is never going to be down or removed. 69 00:06:02,540 --> 00:06:06,440 So we can just use this for our examples. 70 00:06:06,830 --> 00:06:13,100 So by doing this, we already have Junqueira installed and we can start using it now. 71 00:06:13,110 --> 00:06:20,570 Don't forget to save the file and you don't have to worry about the other HCM fires of this section. 72 00:06:20,720 --> 00:06:25,640 If you go inside them, you will see that I already included the linked query. 73 00:06:25,820 --> 00:06:30,440 I just left the undone on the first one so we could do it together. 74 00:06:30,590 --> 00:06:38,060 So now we have Jake Wari being loaded on all our pages for this section so we can start working with 75 00:06:38,060 --> 00:06:39,020 Jake Wari. 76 00:06:39,170 --> 00:06:41,060 So let's go back to the browser. 77 00:06:41,330 --> 00:06:44,750 Let's go back to our course material. 78 00:06:44,750 --> 00:06:50,560 And in the first lesson, we are going to start learning the J query syntax. 79 00:06:50,570 --> 00:06:51,410 I'll see you then.