1 00:00:05,260 --> 00:00:05,560 All right. 2 00:00:05,570 --> 00:00:09,850 So let's go and dive right in to writing some jay queery code. 3 00:00:09,910 --> 00:00:17,110 I have my index file open right here and we went ahead in the last class and added the link to the query 4 00:00:17,410 --> 00:00:20,830 and we made sure that that worked within the browser we tested all that out. 5 00:00:20,830 --> 00:00:27,190 So now I have the library queries a library and now that we have that added here we can go ahead and 6 00:00:27,190 --> 00:00:27,730 start. 7 00:00:27,880 --> 00:00:31,750 Now we can go ahead and connect to it by adding some scripting code in here. 8 00:00:31,780 --> 00:00:33,130 So let's get started. 9 00:00:33,170 --> 00:00:36,820 I have to do is open up a tag and say 10 00:00:39,620 --> 00:00:40,240 script 11 00:00:42,990 --> 00:00:44,340 Meskin open and closed. 12 00:00:44,340 --> 00:00:49,080 When I go ahead and I get myself a little space here so I can type in between there. 13 00:00:49,090 --> 00:00:51,430 Now again this was just linking to the query. 14 00:00:51,430 --> 00:00:56,240 Now we create a new script to actually write some kind of a function within here. 15 00:00:56,260 --> 00:01:02,900 So the way you write Gigue query is you start out by adding a dollar sign. 16 00:01:03,040 --> 00:01:08,760 Now that allows you to link to the different things within their so and the dollar sign that's how we 17 00:01:08,760 --> 00:01:11,480 referenced the Jake word code there. 18 00:01:11,500 --> 00:01:15,940 Now what we do is we open up a set of parentheses and quotes. 19 00:01:15,940 --> 00:01:18,130 This is how we target our selector. 20 00:01:18,130 --> 00:01:25,570 We add the again be open and closing parentheses and opening closing quotes and here in there is where 21 00:01:25,570 --> 00:01:31,210 we start to say what we're going to target and target our document the whole document we're going to 22 00:01:31,210 --> 00:01:32,590 target that whole thing. 23 00:01:32,590 --> 00:01:36,790 I can also put it in there very specific things within CSSA or different things you going to see how 24 00:01:36,790 --> 00:01:38,870 we target all that stuff later on. 25 00:01:38,890 --> 00:01:42,010 Right now I want to target the entire document. 26 00:01:42,130 --> 00:01:50,260 So now after that I must say ready now this is a function this is says when this is ready this is what 27 00:01:50,260 --> 00:01:51,450 is going to happen. 28 00:01:51,470 --> 00:01:59,170 We say ready and then we open up another set of parentheses and we say the function of this is a callback 29 00:01:59,170 --> 00:02:02,730 function that is going to allow us to do other things. 30 00:02:02,890 --> 00:02:08,200 So just bear with me on this one we're going to open and close our parentheses and we're going to open 31 00:02:08,200 --> 00:02:13,960 and close lips your own unclose is that a curly brackets right. 32 00:02:13,960 --> 00:02:18,040 All right so I type that out between the Crilley brackets right damnum place my cursor so you can see 33 00:02:18,040 --> 00:02:21,170 it's blinking right there when I hit return a couple of times. 34 00:02:21,260 --> 00:02:23,970 Now in here we're going to add a nother selector. 35 00:02:24,000 --> 00:02:26,090 Can we added the first one to appear. 36 00:02:26,150 --> 00:02:36,910 I do a dollar sign and with in there must say open quote MSA body X. Well done so far as we said OK 37 00:02:36,910 --> 00:02:40,870 with them the document once it's ready start this function here. 38 00:02:40,900 --> 00:02:47,140 This is the event handler up here and we're to say make sure that all the stuff is ready and then target 39 00:02:47,200 --> 00:02:48,620 the body acts. 40 00:02:48,670 --> 00:02:54,040 Now what I want to do and I've written all this to say the Dykeman starts once that's ready within the 41 00:02:54,040 --> 00:03:00,720 body that what you want to do and want to do in this case I wanted to append that means to add to almost 42 00:03:00,730 --> 00:03:05,650 a append and going to open up a new set of parentheses here and news of the quotes I want to aren't 43 00:03:05,680 --> 00:03:10,510 pinned to the body is like put anything in here that I wanted to get at an image taken in a text I can 44 00:03:10,510 --> 00:03:15,040 do whatever I wanted to in this case when I do something very simple as why that little bit of each 45 00:03:15,040 --> 00:03:22,630 team comes in each one I love Jake Weary and just like with River. 46 00:03:22,660 --> 00:03:33,760 Each team element to go ahead and close that out and do is a need to add a semi-colon right there so 47 00:03:33,770 --> 00:03:36,080 they know that's all done. 48 00:03:36,100 --> 00:03:40,370 So if you're adding this with regular javascript this would take a lot more code than this. 49 00:03:40,480 --> 00:03:46,410 This is what's really great if you are not familiar with just writing regular javascript you would not 50 00:03:46,450 --> 00:03:47,660 appreciate this as much. 51 00:03:47,800 --> 00:03:53,390 But with this very simple little function right here I'm able to add this text to the body of my document. 52 00:03:55,340 --> 00:03:58,660 Because of that little room right there one less thing I've got to do. 53 00:03:58,760 --> 00:04:03,530 Just like with everything else each time LJ group seems as I need to make sure I'm always closing things 54 00:04:03,590 --> 00:04:08,080 out properly so I have that little Simak want I needed to add right down there. 55 00:04:08,150 --> 00:04:12,250 But I've got that in there that's why and save our document and we'll come back to her. 56 00:04:12,310 --> 00:04:13,740 Imelda I can get here soon. 57 00:04:13,780 --> 00:04:16,440 I'm still looking at the news source code up here. 58 00:04:16,460 --> 00:04:21,530 Now this was filed before regular old index that each team element to hit refresh rate there and you 59 00:04:21,530 --> 00:04:27,650 can see that my text is put right into the document or control click or you get it right click whatever 60 00:04:27,650 --> 00:04:35,240 and say inspect and you can see that it added that dynamically right into the document so you can start 61 00:04:35,240 --> 00:04:40,250 to see hopefully that the power of Jake where we right here I can just add information right into my 62 00:04:40,250 --> 00:04:46,550 document wherever I want to I can start to really target different things and here I could target CSSA 63 00:04:46,820 --> 00:04:51,140 ID areas different things like that you can switch things up on the go. 64 00:04:51,140 --> 00:04:56,600 Makes this stuff very powerful and opens up a lot of doors for you to do some really cool things. 65 00:04:56,660 --> 00:04:58,820 You'll be sane in future classes here.