1 00:00:09,530 --> 00:00:15,770 Hey, everyone, in this video we're going to talk about Jake Wari event, we already used some of them 2 00:00:15,770 --> 00:00:22,910 like the click event, and we know that they are slightly different than in vanilla JavaScript. 3 00:00:23,240 --> 00:00:25,340 So their names are a bit different. 4 00:00:25,550 --> 00:00:31,730 But as you can see on this table, the main difference is that on January we don't have the on before 5 00:00:31,730 --> 00:00:32,480 the event. 6 00:00:32,810 --> 00:00:39,320 So the UNCLICK event in JavaScript is going to be claque in January and so on. 7 00:00:39,620 --> 00:00:45,990 But we also know that the way we set the event is also a bit different. 8 00:00:46,220 --> 00:00:53,060 So instead of using the equal sign and then a function, we know that in January we should use the function 9 00:00:53,060 --> 00:00:55,520 as an argument of the method. 10 00:00:56,030 --> 00:01:03,470 So the event is a method and as an argument, we are going to pass the function that's going to be executed 11 00:01:03,710 --> 00:01:05,990 when the event is detected. 12 00:01:06,050 --> 00:01:14,000 Now, always remember that if you are a bit confused with this syntax, always do it step by step. 13 00:01:14,270 --> 00:01:18,690 So first you select the element you want. 14 00:01:19,010 --> 00:01:28,130 So let's say it's an element with the ID of example and then the name of the event, which is click 15 00:01:28,970 --> 00:01:35,220 now before doing anything, you just open and close parentheses and include the semicolon. 16 00:01:35,960 --> 00:01:38,590 That's the basic syntax inside here. 17 00:01:38,600 --> 00:01:39,830 We need a function. 18 00:01:40,070 --> 00:01:44,630 So function open and close parentheses for the arguments. 19 00:01:44,630 --> 00:01:50,810 If there are any open and close curly braces where we are going to place the code. 20 00:01:51,080 --> 00:01:53,720 So this is step two and step three. 21 00:01:53,930 --> 00:01:58,460 We just hit enter and we are going to write our code inside here. 22 00:01:58,460 --> 00:02:01,640 So if you do it like this, you will never be confused. 23 00:02:02,150 --> 00:02:07,360 Now, let's talk about an interesting event, which is the Raddy event. 24 00:02:07,550 --> 00:02:14,780 So in Web development, many problems are caused because the script tries to interact with an element 25 00:02:14,990 --> 00:02:16,970 that hasn't been loaded yet. 26 00:02:17,210 --> 00:02:21,180 So we can avoid this by using the ready event. 27 00:02:21,350 --> 00:02:29,630 So this means that first we are going to wait for, in this case, the document to be loaded or in this 28 00:02:29,630 --> 00:02:30,800 case to be ready. 29 00:02:30,950 --> 00:02:36,580 And only after that we are going to try to do anything with the DOM. 30 00:02:37,070 --> 00:02:40,320 So let's get this and bring it to our script. 31 00:02:40,490 --> 00:02:46,670 So one thing that's common to do, instead of writing everything like we did, of course, we did not 32 00:02:46,670 --> 00:02:48,870 include this because we weren't using J. 33 00:02:48,920 --> 00:02:58,010 Querrey, but when you start a project with J query, it is normal to first use the aready event for 34 00:02:58,010 --> 00:03:04,070 the document and then all your code is going to be written inside here. 35 00:03:04,070 --> 00:03:11,460 So nothing is going to be executed before we make sure that the page was fully loaded, which is good. 36 00:03:11,480 --> 00:03:17,990 This is going to avoid many problems and this is so important that there is even a simpler way to write 37 00:03:17,990 --> 00:03:18,400 this. 38 00:03:18,800 --> 00:03:21,460 So this is how we write the same thing. 39 00:03:21,470 --> 00:03:23,720 I know this is not very intuitive. 40 00:03:23,750 --> 00:03:31,010 We can't look at this and figure out that this is actually a ready event on the document object. 41 00:03:31,160 --> 00:03:32,060 I know that. 42 00:03:32,060 --> 00:03:36,210 But this is exactly the same thing that we have above. 43 00:03:36,800 --> 00:03:38,420 So this is shorter. 44 00:03:38,630 --> 00:03:40,010 So let's get this one. 45 00:03:41,150 --> 00:03:47,990 And let's replace it here, so in January, this is the same thing of setting the ready event to the 46 00:03:47,990 --> 00:03:54,070 document object, so when we do this, we won't have the problem I've just mentioned. 47 00:03:54,320 --> 00:03:59,210 So every time we start a project, we're going to start like this. 48 00:03:59,360 --> 00:04:04,380 And then all the code for our page is going to be written inside here. 49 00:04:04,820 --> 00:04:07,040 So now I can just erase this. 50 00:04:07,820 --> 00:04:13,370 I'm going to add a comment because like I said, this is not very intuitive what this is doing. 51 00:04:13,730 --> 00:04:18,440 So just a reminder that this is the ready event. 52 00:04:20,610 --> 00:04:22,950 For the document object. 53 00:04:24,800 --> 00:04:29,600 And now we can add another comment inside here and we could write add. 54 00:04:31,160 --> 00:04:32,180 All the code. 55 00:04:33,610 --> 00:04:36,250 Of your page inside here. 56 00:04:37,000 --> 00:04:41,650 OK, now we don't need this for now, I just wanted to show you this. 57 00:04:41,650 --> 00:04:45,040 So shift out a to comment everything. 58 00:04:46,050 --> 00:04:52,170 And now going back to the course material, one more thing I want to talk about before we finish is 59 00:04:52,170 --> 00:04:53,460 the on method. 60 00:04:53,730 --> 00:04:57,830 So this method is an alternative way of working with events. 61 00:04:58,320 --> 00:05:03,780 So in this case, as you can see, instead of using the name of the event as the name of the method, 62 00:05:04,080 --> 00:05:06,260 the method is going to be on. 63 00:05:06,450 --> 00:05:12,150 So then in this case, instead of just passing a function, we need two arguments. 64 00:05:12,300 --> 00:05:19,770 The first one is going to be the name of the event inside quotation marks, and the second argument 65 00:05:19,890 --> 00:05:21,780 is going to be the function. 66 00:05:21,930 --> 00:05:27,060 So again, let's go to visual pseudocode code and let's write this step by step. 67 00:05:28,170 --> 00:05:35,760 So first, the selecter for the elements, for this example, I'm just going to write element and now 68 00:05:35,910 --> 00:05:38,760 the name of the method, which in this case is on. 69 00:05:38,940 --> 00:05:43,250 So what we do now, open and close parentheses, semicolon. 70 00:05:43,500 --> 00:05:45,960 Now, inside here, we need two arguments. 71 00:05:46,170 --> 00:05:48,840 The first argument is the name of the event. 72 00:05:49,350 --> 00:05:52,970 In this case, let's use click as an example. 73 00:05:53,520 --> 00:05:56,610 And the second argument is going to be the function. 74 00:05:57,550 --> 00:06:05,190 So function open and close parentheses, open and close, curly braces, and now that this is organized, 75 00:06:05,200 --> 00:06:11,950 now that we see that we are doing everything right, we can break the line and start writing the code 76 00:06:11,950 --> 00:06:13,020 for this event. 77 00:06:13,180 --> 00:06:15,640 So this is another way of using events. 78 00:06:15,640 --> 00:06:21,040 And at a first glance, it seems that there's no advantages in doing this. 79 00:06:21,310 --> 00:06:28,810 Why would we make it more complicated if we can just use the name of the event instead of doing it like 80 00:06:28,810 --> 00:06:32,020 this and then having to pass to argument? 81 00:06:32,680 --> 00:06:39,430 But actually, this is very good if we want to set multiple events at the same time. 82 00:06:39,820 --> 00:06:46,450 So in this example, we are setting three events at the same time and we just have to select the element 83 00:06:46,480 --> 00:06:47,070 once. 84 00:06:47,380 --> 00:06:54,250 So here, let's go back to the code and the way we are going to write this, if we have multiple events, 85 00:06:54,250 --> 00:06:55,340 is a bit different. 86 00:06:55,570 --> 00:06:57,430 So let me erase everything. 87 00:06:57,640 --> 00:06:58,630 In this case. 88 00:06:58,630 --> 00:07:00,800 We are going to pass an object. 89 00:07:00,820 --> 00:07:02,590 So here we have an object. 90 00:07:02,800 --> 00:07:04,270 Now we can break the line. 91 00:07:04,540 --> 00:07:09,510 So what is an object is a set of key value pairs. 92 00:07:09,520 --> 00:07:13,570 So the keys are going to be the names of the events. 93 00:07:13,570 --> 00:07:14,350 In this case. 94 00:07:14,350 --> 00:07:16,300 We don't need quotation marks. 95 00:07:16,450 --> 00:07:23,110 So the first key or property of this object is going to be the click event. 96 00:07:24,280 --> 00:07:29,470 So then we separate keys and values on object with a. 97 00:07:30,410 --> 00:07:38,900 Colin, and the value is going to be the function, so function open and close parentheses, open and 98 00:07:38,900 --> 00:07:46,060 close, curly braces, and this is how we write the on method with multiple events. 99 00:07:46,640 --> 00:07:50,360 So inside here is the code to be executed. 100 00:07:50,630 --> 00:07:58,700 And now the cool thing of doing this is that if we want to set multiple event, we just use comma and 101 00:07:58,700 --> 00:08:04,670 then we can list as many events as we want so we can do like this. 102 00:08:06,190 --> 00:08:10,480 And set another one, let's say the mouse enter event. 103 00:08:12,130 --> 00:08:16,490 And we are doing this by selecting the element only once. 104 00:08:16,630 --> 00:08:22,980 So if you're setting multiple events at the same time, it is a good idea to use the method. 105 00:08:23,850 --> 00:08:26,870 Now, before we finish, I have a challenge for you. 106 00:08:27,250 --> 00:08:31,540 So here we have an input filled with the idea of fullName. 107 00:08:31,540 --> 00:08:33,580 Let's inspect this element. 108 00:08:33,830 --> 00:08:37,450 So here it is, an input filled with an idea fullname. 109 00:08:37,750 --> 00:08:41,880 And right next to it we have a hidden button. 110 00:08:42,160 --> 00:08:49,780 So if you go to the e-mail here, you will see that we have a button with the display set to if I remove 111 00:08:49,780 --> 00:08:51,810 this now, we can see the button. 112 00:08:52,720 --> 00:08:55,340 So it's here, but it's hidden. 113 00:08:55,750 --> 00:08:58,360 So what I want you to do here is the following. 114 00:08:58,540 --> 00:09:00,940 So the button is going to start hidden. 115 00:09:01,360 --> 00:09:02,220 Now it's hidden. 116 00:09:02,470 --> 00:09:08,470 So when you start writing something, I want you to show the button and I want you to do this using 117 00:09:08,480 --> 00:09:10,120 Junqueira and event. 118 00:09:10,420 --> 00:09:13,290 But if for some reason I erase what's here. 119 00:09:13,300 --> 00:09:17,630 So I already wrote something and now I want to see the button. 120 00:09:17,650 --> 00:09:20,170 So this is what I want to see. 121 00:09:21,150 --> 00:09:29,130 In case I wrote something, but if I erase everything and the fields empty again, I want you to hide 122 00:09:29,130 --> 00:09:30,220 the button again. 123 00:09:30,870 --> 00:09:36,900 So in other words, if there's some name written inside here, I want to see the button. 124 00:09:37,110 --> 00:09:40,950 If there's nothing written inside here, I don't want to see the button. 125 00:09:42,070 --> 00:09:48,010 So let's see how you solve this problem using jury and events in the next video, I'm going to be back 126 00:09:48,010 --> 00:09:50,380 here to solve this in a video. 127 00:09:50,620 --> 00:09:51,370 I'll see you then.