1 00:00:00,420 --> 00:00:05,470 OK, guys, welcome to the first video of the JavaScript in this video. 2 00:00:05,490 --> 00:00:13,070 We will talk about the console, log on, click on, log onto alert and and Event Lessner. 3 00:00:13,590 --> 00:00:17,020 The first thing first, what is the JavaScript like? 4 00:00:17,040 --> 00:00:22,410 Say that I want I have here I put in and inside clent me 5 00:00:25,050 --> 00:00:26,400 that JavaScript function. 6 00:00:26,400 --> 00:00:30,260 When I click on this button, I want something to be happened. 7 00:00:30,570 --> 00:00:32,910 That's why we are using the JavaScript. 8 00:00:33,180 --> 00:00:40,020 It is very similar to the Darkhold when you visit the website and it utting that charge to choose between 9 00:00:40,260 --> 00:00:42,270 the light and the dark one. 10 00:00:42,570 --> 00:00:47,790 When we click on the dark you can see that everything will be changed to the dark. 11 00:00:48,160 --> 00:00:50,310 This is for that JavaScript. 12 00:00:50,790 --> 00:00:56,020 It's changing the classes of the divisions to be having the top ones. 13 00:00:56,700 --> 00:01:05,010 OK, the first thing we will talk about in the comes along, we can go here and up the inspect from 14 00:01:05,010 --> 00:01:07,590 here and click on console. 15 00:01:08,460 --> 00:01:10,170 So it's empty right here. 16 00:01:10,560 --> 00:01:13,020 We can go to this part to be put in. 17 00:01:13,470 --> 00:01:18,450 The first thing we will talk about is how to create a JavaScript file. 18 00:01:18,900 --> 00:01:25,500 We can just go here and typescript dot data and then side. 19 00:01:25,710 --> 00:01:31,650 We will need to connect between them in order to use it inside our to email page. 20 00:01:32,160 --> 00:01:40,710 We can go here and just typescript and here with that script, with a source and its closure. 21 00:01:40,920 --> 00:01:48,990 And then inside we can type script dot G.S. and then we can go to the script and ask. 22 00:01:49,290 --> 00:01:57,000 The first thing we will talk about is how to a console lot, which everything will be everything. 23 00:01:57,000 --> 00:02:00,000 We will type here where it will appear here. 24 00:02:00,240 --> 00:02:01,620 Look at first load. 25 00:02:02,280 --> 00:02:07,620 OK, we can just type here, console, just love. 26 00:02:09,450 --> 00:02:14,850 So I will not something inside the console, the console and the look here. 27 00:02:14,850 --> 00:02:27,630 I will look the content with inside here to be here and then we can type our first console lock and 28 00:02:27,630 --> 00:02:30,510 then we can go to the page and reload. 29 00:02:31,770 --> 00:02:34,650 And here we have our first console log. 30 00:02:35,070 --> 00:02:36,060 OK, that's good. 31 00:02:36,390 --> 00:02:45,060 We can also try to add different, but we will need to add this syntax when we type on you could or 32 00:02:45,060 --> 00:02:47,730 a new line or anywhere on your property. 33 00:02:48,090 --> 00:02:51,240 We will be needing to add this sentence. 34 00:02:51,570 --> 00:02:54,850 And here also we can type on another console 35 00:02:57,360 --> 00:03:04,830 and this could be our second console, like we can go here and reload. 36 00:03:05,040 --> 00:03:09,870 So here we got our first console log and our second console. 37 00:03:09,870 --> 00:03:14,130 Look, let's say that I want the console to be enabled. 38 00:03:14,130 --> 00:03:21,930 When I click on something, we can just go to the index attached to an L and here we can add put in 39 00:03:23,070 --> 00:03:27,960 and we can give it a class of put on one. 40 00:03:28,620 --> 00:03:33,300 And then inside here we can type something like console. 41 00:03:34,110 --> 00:03:34,380 Good. 42 00:03:35,970 --> 00:03:37,080 OK, that's good. 43 00:03:37,290 --> 00:03:44,160 And then we can go back to the script J and add the same text here. 44 00:03:44,370 --> 00:03:51,210 We can add something which is called function function and then we have a function again for the function 45 00:03:51,210 --> 00:03:52,080 inside it. 46 00:03:52,380 --> 00:03:57,300 I want to be having the console lock so the function will be containing the console up. 47 00:03:57,600 --> 00:04:03,540 But before we add the console, we will be needing to add a name for this function. 48 00:04:03,840 --> 00:04:10,150 We can give it the name, console or just function one. 49 00:04:10,650 --> 00:04:15,460 And at the start we will be needing to add the parameters and we will leave it empty. 50 00:04:16,020 --> 00:04:27,040 This means that the end of the name of the function and then inside we can type console dockland and 51 00:04:27,360 --> 00:04:36,840 then here put in one was Klencke, OK? 52 00:04:37,200 --> 00:04:44,640 And then we can go back to each team so we can tell the team, Alcaide, I want something here to be 53 00:04:44,640 --> 00:04:45,900 having for this function. 54 00:04:46,530 --> 00:04:50,880 We can add something here which is called unclick so unclick. 55 00:04:50,880 --> 00:04:54,150 I want something to be happened which is the function. 56 00:04:54,360 --> 00:04:56,220 What function do you want to be happen. 57 00:04:56,250 --> 00:04:59,670 I want function one. 58 00:04:59,990 --> 00:05:01,220 And the parameters. 59 00:05:02,780 --> 00:05:11,780 OK, we have here everything good and we get into syntax here and safe and then we can go back to our 60 00:05:11,810 --> 00:05:16,100 edge to find we can't hear that concept put. 61 00:05:16,220 --> 00:05:20,540 When I click here now, we have put in one was clicked. 62 00:05:20,750 --> 00:05:23,930 And also we have many things we can do for this part. 63 00:05:24,260 --> 00:05:30,050 We can just go here and try something for the Adut. 64 00:05:30,350 --> 00:05:36,010 There's something which is called Andat, which will appear here when I was a load the page. 65 00:05:36,800 --> 00:05:39,770 We can go here after the function. 66 00:05:40,010 --> 00:05:41,810 We can add some whitespace here. 67 00:05:43,900 --> 00:05:47,960 OK, and then we can edit comment to add a comment. 68 00:05:47,960 --> 00:05:56,900 And the JavaScript we can just use this flash and clozapine, this one function one. 69 00:05:58,070 --> 00:06:09,110 OK, and at this part we can just scroll down and get in and let's get a comment and invite a comment 70 00:06:09,110 --> 00:06:11,990 became type Alor one. 71 00:06:14,540 --> 00:06:20,090 And here we can type alert and for the content of the Senate. 72 00:06:22,400 --> 00:06:24,170 Yes, but let me just. 73 00:06:24,200 --> 00:06:36,710 OK, we can make Enock and inside we can make welcome to our Web page and then we can go to our file 74 00:06:36,710 --> 00:06:38,480 right here when we load. 75 00:06:38,480 --> 00:06:40,810 We got welcome to our Web page. 76 00:06:40,820 --> 00:06:45,230 And when I click on OK, now we got this dismissable. 77 00:06:46,070 --> 00:06:48,180 But let's add the syntax. 78 00:06:48,740 --> 00:06:58,360 Can I can I add it without a double quotation we can try to delete when we go back here, we got uncowed 79 00:06:58,370 --> 00:07:03,680 error with the syntax for the line of thirty here. 80 00:07:03,830 --> 00:07:06,490 It gets me the line and that error. 81 00:07:06,890 --> 00:07:15,190 So when you give here, this is the syntax error for the job application and we got no error. 82 00:07:15,710 --> 00:07:19,460 The second thing, can I make it just with syncopations? 83 00:07:20,030 --> 00:07:21,650 We can go and try. 84 00:07:22,220 --> 00:07:26,000 We can get the gist part and just single contentions. 85 00:07:26,360 --> 00:07:32,750 We can go and reload so we can use them with double or single digits. 86 00:07:33,170 --> 00:07:34,100 OK, that's good. 87 00:07:34,580 --> 00:07:45,440 After this part, we can talk about the function for the other, we can go here and make here and edit. 88 00:07:46,130 --> 00:07:52,520 The purpose of this code is to tell you that we can do many functions over many properties using the 89 00:07:52,520 --> 00:08:06,500 same function name we can alad and then decide which one was clicked, can add syntax right here and 90 00:08:06,500 --> 00:08:07,790 then we can go back. 91 00:08:07,940 --> 00:08:11,720 What if I delete the changes we can do here? 92 00:08:12,560 --> 00:08:20,210 It's working fine, but it will be always better to use the syntax because OK, but in was clipped, 93 00:08:20,450 --> 00:08:26,270 but it will be always better to use syntax because many times might make a problem. 94 00:08:26,720 --> 00:08:34,280 We can go here and try this text again and then after this part, let's go and reload. 95 00:08:35,390 --> 00:08:43,820 Welcome to our page when I click on OK, and then when we click on Console Button, we got putting one 96 00:08:44,030 --> 00:08:46,490 click and also we have the button. 97 00:08:46,490 --> 00:08:47,810 One was clicked. 98 00:08:48,110 --> 00:08:51,680 Let's try to make an addict without the thing function. 99 00:08:52,160 --> 00:09:03,560 We can just make any function here function and give it the name of function to and then inside we can 100 00:09:03,560 --> 00:09:11,060 make l'a and then to be header one 101 00:09:13,520 --> 00:09:28,640 was click and then we can go to the URL file from here and here we can add X1 and then we can add unclick 102 00:09:29,030 --> 00:09:37,670 to be having the function to and then side we can make a header one. 103 00:09:38,180 --> 00:09:42,430 We can go back now to the edge html file and reload. 104 00:09:43,040 --> 00:09:44,380 Welcome to our page. 105 00:09:44,390 --> 00:09:45,100 Thank you. 106 00:09:45,440 --> 00:09:51,350 And then when we click on the header one we got here, header one was clicked. 107 00:09:51,890 --> 00:09:59,630 OK, that's good after activist part and we can talk about the ADD event left. 108 00:09:59,950 --> 00:10:07,180 And how we can use it, let's say that I don't want to go back to the e-mail file to add the unclick 109 00:10:07,180 --> 00:10:14,770 function, we can just go to this script and add something which is called add event left here. 110 00:10:15,140 --> 00:10:20,560 The first thing we will think about is to add something. 111 00:10:20,560 --> 00:10:22,800 What is called it would go OK. 112 00:10:26,140 --> 00:10:32,950 The first thing we will know here is to how to select something from the HTML5 so we can just go here 113 00:10:32,950 --> 00:10:42,480 and add to some content aside, like header through and then we can go back to the script, OK, which 114 00:10:42,490 --> 00:10:44,610 is something which is called document. 115 00:10:44,620 --> 00:10:45,820 What is document. 116 00:10:46,060 --> 00:10:55,990 Document is this document right here, which is everything inside the page and then we can go back here. 117 00:10:56,980 --> 00:11:04,180 The second thing we will add is Dot and then we will add something which is called query selector. 118 00:11:04,570 --> 00:11:06,370 So now here I have a query. 119 00:11:06,370 --> 00:11:07,480 What is the query? 120 00:11:07,480 --> 00:11:16,170 I want to select something from the HTML five and then we end up in that bracket and beginning as double 121 00:11:16,180 --> 00:11:16,870 quotation. 122 00:11:17,350 --> 00:11:20,770 And then inside we got three options we can use. 123 00:11:20,770 --> 00:11:26,950 Just here there are two and to add a class we can just add dot and then add the last name. 124 00:11:27,520 --> 00:11:31,240 And we can also add I think we can make. 125 00:11:33,540 --> 00:11:40,090 And then the IG me that he would just have to OK after his party. 126 00:11:40,530 --> 00:11:45,460 We can add something for just add event left here. 127 00:11:47,160 --> 00:11:55,200 So here I will be adding an event for this choir with a lecture and then sign the code red. 128 00:11:55,230 --> 00:11:56,530 And you're can add some space. 129 00:11:58,380 --> 00:12:08,130 The first thing we will type here is that be the first thing will be type inside here is the type of 130 00:12:08,130 --> 00:12:09,570 event I want to happen. 131 00:12:09,720 --> 00:12:12,020 That type of event would want to be happened. 132 00:12:12,210 --> 00:12:19,230 It's the click we can just type here, click and then we have the click function and then we will add 133 00:12:19,230 --> 00:12:21,000 a comment sorry, a comma. 134 00:12:21,360 --> 00:12:29,070 And then inside we will type function with donita function name because we already had this click function 135 00:12:29,070 --> 00:12:38,730 so we will not go to the team L and at this function name and then inside we can add some space here. 136 00:12:39,420 --> 00:12:47,940 OK, we will add the same bracket as here at a bracket and then each side we will add the something 137 00:12:47,940 --> 00:12:49,590 which we want to be happened. 138 00:12:49,980 --> 00:13:06,720 We can go here and add some log of the header to what's the click the link to OK. 139 00:13:07,140 --> 00:13:10,830 And then we can go to the estimate file. 140 00:13:11,550 --> 00:13:13,080 OK, we can reload. 141 00:13:13,350 --> 00:13:15,510 So here we got welcome to our page. 142 00:13:15,960 --> 00:13:25,380 And then when we were a little bit page we got here had to click when I click on the header too and 143 00:13:25,380 --> 00:13:28,520 when I click more I shouldn't be having this counted. 144 00:13:29,600 --> 00:13:30,660 OK, that's great. 145 00:13:31,050 --> 00:13:40,380 After this part, what we can just talk about is that the how to add another to using the same method. 146 00:13:40,770 --> 00:13:43,860 We can just go here and the same text. 147 00:13:45,090 --> 00:13:59,070 OK, and then inside of what we can do is to add other and then inside we can type header to was clicked 148 00:14:00,240 --> 00:14:00,780 OK. 149 00:14:01,170 --> 00:14:04,580 And then we can go back to the MLP. 150 00:14:04,800 --> 00:14:10,290 And when we have here welcome to our Web page. 151 00:14:10,290 --> 00:14:14,550 We can click on OK and then we can click on there are two. 152 00:14:15,450 --> 00:14:25,290 So here we got Heather to was clicked and then at this part what we can do right here, I think that's 153 00:14:25,290 --> 00:14:27,870 all we can just add the syntax. 154 00:14:28,740 --> 00:14:35,160 OK, in the next video we will talk about how to change the content of the check. 155 00:14:35,610 --> 00:14:38,010 Let's say that we have here and there, too. 156 00:14:38,220 --> 00:14:42,660 And I want to change its content when I click on this one. 157 00:14:42,930 --> 00:14:50,670 And we will also know how to use this is asked from the JavaScript and one click for an example, and 158 00:14:50,670 --> 00:14:56,750 also we will know how to use it this function. 159 00:14:57,120 --> 00:14:58,980 So good luck and have fun.