1 00:00:10,120 --> 00:00:15,940 Hey, everyone, in this video, we are going to learn how to use the dumb to work with our age to amale 2 00:00:16,080 --> 00:00:20,380 elements, so to do anything with any ASTM al element. 3 00:00:20,600 --> 00:00:25,040 First, we need to find them in the DOM tree and select them. 4 00:00:25,100 --> 00:00:33,680 So to select elements, we can do it by their class name, by I.D., by tag, name like age one, P. 5 00:00:33,710 --> 00:00:35,690 and etc. and more. 6 00:00:35,960 --> 00:00:40,250 Well, let's start with the I.D., which is the easiest way of doing it. 7 00:00:40,400 --> 00:00:47,810 So I've placed an element in the H team out of this file and it has the I.D. of Blue Box. 8 00:00:48,140 --> 00:00:54,760 If you want to check it out, you can just go to Visual Studio code or you can just use the inspectors. 9 00:00:54,770 --> 00:00:54,980 So. 10 00:00:54,980 --> 00:00:56,780 Right, click inspect. 11 00:00:57,170 --> 00:00:57,950 Here it is. 12 00:00:58,190 --> 00:01:02,360 You can see that this is the element with the I.D. of Blue Box. 13 00:01:02,720 --> 00:01:10,910 So going back to the console, let's try to get the text inside this element and send it to the console. 14 00:01:11,150 --> 00:01:13,850 And let's also try to change its content. 15 00:01:14,120 --> 00:01:20,180 One cool thing is that we don't need to go back and forth to Visual Studio Code any time we want to 16 00:01:20,180 --> 00:01:24,470 test something because we can do it directly from the console. 17 00:01:24,710 --> 00:01:30,230 If you're just testing some comments, if you're just writing them for the first time, you can do it 18 00:01:30,230 --> 00:01:30,590 here. 19 00:01:30,680 --> 00:01:35,780 Then when you understand how they work, you can go to your JavaScript file and write them. 20 00:01:36,200 --> 00:01:40,130 Let's remember that nothing that we write here is going to be saved. 21 00:01:40,340 --> 00:01:42,950 So this is just for testing purposes. 22 00:01:43,550 --> 00:01:43,890 All right. 23 00:01:43,910 --> 00:01:45,800 So to select this element. 24 00:01:47,040 --> 00:01:51,210 The first thing we need to use is the document object. 25 00:01:51,600 --> 00:01:55,620 So, again, be careful because JavaScript is case sensitive. 26 00:01:55,950 --> 00:01:59,610 The document object is written like this. 27 00:01:59,910 --> 00:02:02,080 Vol ladders in lowercase. 28 00:02:02,400 --> 00:02:06,830 So document is that object at the top of the gum. 29 00:02:07,470 --> 00:02:12,060 So inside it, we have a few methods that we can use. 30 00:02:12,180 --> 00:02:19,290 Don't worry about understanding this now about methods, because when we talk about objects, then this 31 00:02:19,290 --> 00:02:21,540 is going to be clear for now. 32 00:02:21,540 --> 00:02:25,770 Just know that to run methods we need to use the DOT. 33 00:02:25,980 --> 00:02:28,000 So document that. 34 00:02:28,290 --> 00:02:36,030 Now the name of the method we are trying to use is get element by I.D. So you can see that Google Chrome 35 00:02:36,030 --> 00:02:37,500 is helping us out here. 36 00:02:37,950 --> 00:02:40,950 You can just press tab to auto complete it. 37 00:02:41,220 --> 00:02:49,230 And now again, we just open and close parentheses so you can see that this is a common pattern in JavaScript. 38 00:02:49,710 --> 00:02:52,590 Let me just enlarge this a little bit. 39 00:02:52,860 --> 00:03:01,020 So now inside parentheses and inside quotation marks, we need to pass the I.D. of the element that 40 00:03:01,020 --> 00:03:02,640 we are trying to select. 41 00:03:03,000 --> 00:03:06,690 So the idea is blue box. 42 00:03:06,870 --> 00:03:09,900 Actually, we have an underscore like this. 43 00:03:10,110 --> 00:03:13,470 Be careful with these letters in caps. 44 00:03:13,500 --> 00:03:18,440 So element by I.D., they all start with caps. 45 00:03:18,750 --> 00:03:20,820 The get is all lowercase. 46 00:03:22,420 --> 00:03:30,040 Now that we've selected this element, let's try to get its content using a property called inner. 47 00:03:31,540 --> 00:03:35,470 So all lower case in our age, team out all uppercase. 48 00:03:36,970 --> 00:03:39,790 If we do this and hit enter. 49 00:03:40,000 --> 00:03:47,650 So, as you can see, the text inside this box was returned to us when we ran this comment. 50 00:03:47,920 --> 00:03:53,740 So we selected this element and then we got its inner age CML. 51 00:03:54,280 --> 00:04:01,420 So now that we know how to get the content of an aged male element, it's also useful to know how do 52 00:04:01,420 --> 00:04:04,570 we change content of an age CML element? 53 00:04:04,840 --> 00:04:07,120 So this is going to be really similar. 54 00:04:07,240 --> 00:04:15,820 We can just copy all this, but now, instead of just getting it, we can use the equals sign and define 55 00:04:15,970 --> 00:04:18,220 something that we go inside it. 56 00:04:18,700 --> 00:04:22,450 So let me open and close quotation marks again. 57 00:04:22,900 --> 00:04:29,870 Don't worry about all these parentheses dots quotation marks when we start talking about data types. 58 00:04:29,890 --> 00:04:33,430 In the next few lessons, this is going to be very, very clear. 59 00:04:33,970 --> 00:04:35,630 So for now, just follow along. 60 00:04:35,920 --> 00:04:39,300 Let's try to change the content of this element. 61 00:04:40,520 --> 00:04:49,100 So let's ride something like test, and now when we hit enter, we can see that we just changed the 62 00:04:49,100 --> 00:04:52,430 content of this element using JavaScript. 63 00:04:53,700 --> 00:04:57,300 And we don't have to send just pieces of text. 64 00:04:57,660 --> 00:05:02,190 We can also send other aged e-mail elements inside it. 65 00:05:02,250 --> 00:05:07,350 So if we instead of just sending text, we sent something like this. 66 00:05:07,500 --> 00:05:11,940 So age one in here, closing the age one. 67 00:05:12,240 --> 00:05:13,560 Now let's try again. 68 00:05:13,770 --> 00:05:17,130 And now we can see that we have an age one inside it. 69 00:05:17,960 --> 00:05:23,260 So now that we know how to do this, let's just copy this comment controversy. 70 00:05:23,490 --> 00:05:25,170 Now let's refresh the page. 71 00:05:25,410 --> 00:05:28,920 So, as you can see, nothing we write here is saved. 72 00:05:29,220 --> 00:05:31,020 The page is back to normal. 73 00:05:31,380 --> 00:05:33,390 Now, let's go back to our file. 74 00:05:33,540 --> 00:05:36,060 So let's get the text inside this box. 75 00:05:36,140 --> 00:05:37,650 Send it to the console. 76 00:05:37,830 --> 00:05:40,260 And let's also change the content. 77 00:05:41,440 --> 00:05:44,260 So go into the scripts file. 78 00:05:44,740 --> 00:05:46,750 Actually, I'm going to leave this comment here. 79 00:05:47,380 --> 00:05:53,740 Something that I like doing is adding comments to know which lesson we are at. 80 00:05:53,800 --> 00:05:56,920 So we are at lesson for. 81 00:06:00,300 --> 00:06:04,560 Working with the domme so you can organize this the way you think it's better for you. 82 00:06:04,590 --> 00:06:05,910 I just like doing this. 83 00:06:06,270 --> 00:06:11,100 So now let's try to run this comment from our file. 84 00:06:11,490 --> 00:06:20,280 We can also comment this will shift out a just so it's not executed every time in the console. 85 00:06:20,610 --> 00:06:27,330 So now the first thing we want to do with the content of that box is just sending it to the console. 86 00:06:27,360 --> 00:06:29,700 That was the first thing that was asked. 87 00:06:30,060 --> 00:06:32,460 So console dot log. 88 00:06:33,000 --> 00:06:38,700 Now inside here, instead of writing a text, we're going to write this full comment. 89 00:06:39,570 --> 00:06:41,070 Let's see what happens. 90 00:06:41,670 --> 00:06:42,630 Saving this. 91 00:06:44,180 --> 00:06:45,590 Refreshing the page. 92 00:06:47,040 --> 00:06:50,830 We are able to send to the council the content of that element. 93 00:06:51,130 --> 00:06:53,260 So now let's try to change it. 94 00:06:53,850 --> 00:06:58,750 So after getting it and send it to the council now, we're going to change it. 95 00:07:02,170 --> 00:07:04,450 So let's erase this now. 96 00:07:04,930 --> 00:07:09,100 Use the equal sign, an inside quotation marks. 97 00:07:09,370 --> 00:07:11,200 Let's try sending. 98 00:07:12,240 --> 00:07:13,620 Can age one again. 99 00:07:16,500 --> 00:07:17,330 Like this. 100 00:07:19,020 --> 00:07:19,710 Testing. 101 00:07:21,610 --> 00:07:25,990 And now, just out of curiosity, let's run this comment again. 102 00:07:26,170 --> 00:07:29,220 At the end and let's see what happens. 103 00:07:33,490 --> 00:07:38,390 So first, it just got the original content and sent it to the console. 104 00:07:38,800 --> 00:07:42,190 Then it changed the content inside it. 105 00:07:42,550 --> 00:07:47,470 And now we just got the content again and we are sending into the console. 106 00:07:47,950 --> 00:07:54,610 So this seems like a silly example, but this is just a starting point to understand how to work with 107 00:07:54,730 --> 00:07:56,860 elements and their content. 108 00:07:57,250 --> 00:08:02,740 And like I said, what is the use of sending all the stuff to the console? 109 00:08:03,070 --> 00:08:07,210 Well, this is just for testing purposes by using the console. 110 00:08:07,360 --> 00:08:09,430 We can see that this is working. 111 00:08:09,640 --> 00:08:13,480 So now we can start applying this on other situations. 112 00:08:13,570 --> 00:08:21,400 So before going to crazy and start changing all the age CML elements of our page, there are some basic 113 00:08:21,640 --> 00:08:26,880 fundamentals of JavaScript that we need to learn before we move it. 114 00:08:27,130 --> 00:08:34,210 So if you go to the index, you can see that we are going to talk about variables and data types before 115 00:08:34,210 --> 00:08:37,090 we do our first list of exercises. 116 00:08:37,810 --> 00:08:39,400 So this is going to be easy. 117 00:08:39,430 --> 00:08:45,400 But this is super important so we know what we are doing when we are working with JavaScript. 118 00:08:45,880 --> 00:08:48,740 So I'll see you in the next video so we can get started.