In exercise 11, you're going to apply some of the things you have learned about manipulating the DOM. So let's get started. In this exercise, you're going to create a page that looks like this is simply a table that lists five common methods for selecting DOM elements and then a description. For each of those methods. However, you only have the table to begin with, there's no data in it. So this is what the page looks like to begin with.

We have the title. Then we have a table with six rows and two columns. Now, let me jump to the files which you will be using for this. These are found in exercise 11. Here is the HTML file, which I just showed you. Notice Here's the table, it is completely empty.

It's contained within a div tag, which has an ID of table. That's important to remember. And that's all there is. Now in the app dot j s file, so that you don't have to enter all the data, I've created an object that contains all the data that will go into the table. This object has four key value pairs. The first is the heading for the method column.

The second is the heading for the description column. And then we have all the methods that will go in the first column, then we have all the descriptions that will go in the second column all the methods are in an array attached to that key methods and all the descriptions are also in an array so This is the data that you have. This is the data you received. And you need to write the JavaScript code that will cause this data to fill up that table. Now, before you start, I want to show you one thing that is quite important. First off, this HTML page is not linked to the app.js file.

So we need to do that. Now where do we put that app.js file? Well, you can put a number of different places, for example, we could put it in the head. However, if we put app.js up here in the head tag, it will load before the structure of the table has loaded. And so it's very possible you could get an error that it wouldn't be able to find those DOM elements that you're looking for. So before starting, this is where you should Enter the script tag and remove type and enter the source for app dot j s. Now just to make sure that's connected and linked up, I always like to do a console dot log statement to make sure that's working.

Save that. I'm gonna go to my page, refresh it, open the console. Sure enough, it's connected. So we're good to go. All right, so pause the video. give this a try.

And when you're ready to see the solution, go ahead and start the video again. All right, I hope you were successful in getting that to work getting the table populated with these different values. Now there are a number of different approaches that could be taken to this. So don't assume that your approach has to be the same as mine. As long as you got the end results, and they work then fantastic. Alright, so I'm going to start off by creating a function.

Now, you may ask, Well, why am I creating a function? Why don't I just start entering the code that is needed to process all this data? Well, the reason I'm entering a function is because I'm going to be using a lot of variables as I process this data. So I don't want to create those variables in the global environment, you should avoid creating global variables as much as possible. So one way to do that is to put all of the, the code inside Have a function. Therefore variables that are declared will be declared inside that function and the scope will be the function and not the global environment.

Now that's the function I'm going to create right there is Phil table, and I will need to call that and pass in this object that was created up here that has all the data in it. So that's what I'll pass in. Alright, so we have the function set up, now we can start entering the code. So first off, I'm going to create a couple of variables to select the nodes in the DOM that I will need to modify. So I'm going to divide this into two separate groupings of nodes, the table head. I'm going to do that first.

And then second, the rest of the table So the first variable I'm going to create is I'm going to call it table head nodes. I'm gonna set that equal to document dot query selector all. And now what am I going to select? Well, if you remember looking at the CML file, there is an ID associated with the div tag. And then inside that div tag is the table. So if I start with an ID of table, and then select every th th, are the heading, Jose heading cells for the table, that will get the heading cells, the TDs will get the regular cells.

So that's what I'll do inside of query selector all put quotes and then hash table that specifies the ID table and then th Now we'll get me what I need there. Now I'm while I'm creating this variable, I'm going to go ahead and create a variable for the other nodes as well. I'm just going to call this one table nodes and set that equal to document dot query selector all. Same, or very similar query selector. So this time, I'll use TD instead of th. Alright, great.

So I have those first two variables that contain an array of the table heading and an array of all the other table cells. So let's go ahead and set up the table heading. So table head nodes. The first one, remember, this is an array. So the first one dot inner HTML equals OBJ dot know which key value pair contains the heading text for the first column. Now when it selects these when table head nodes are selected, it's going to select them as an encounter.

So this will be the first one, this will be the second one. What key value pair contains the text for that first column heading, and that's method head, and then de SC head is the second one. So that's what I'll put for the first one. Table head nodes. This will be one dot inner HTML equals OBJ dot, the SC head. I'm going to save that let's go ahead and check this out.

I'm going to refresh the page. Sure enough, we got our two headings. So we're proceeding correctly at this point. All right, now I need to start doing the regular table cells. Now, this is probably going to be best done in a loop, because there are a number of cells to go through. But remember, they're going to be selected in order as well.

And so the first cell will be the method, second cell will be its description. third item in the array will be the next method, fourth item in the array will be its description, and so on. So to make this a bit easier, I'm going to create two more arrays that contain the methods from the object and the descriptions from the object. So methods is going to be equal to OBJ dot methods. C, if we look at our, our object here, methods that contains an array of all the methods, and then I'll do one more descriptions, what I'm going to call this is equal to OBJ dot descriptions. So that will get us to arrays.

So now let's create a for loop. That will cycle through the table nodes array, this one right here, let's cycle through each of those nodes in that array, and then put in the correct information. So for inside of parentheses, let i equals zero. i is less than table nodes dot length, because we want to cycle through all of the items in the table nodes array. That will contain every node that we selected. And then finally, I plus plus the curly braces.

All right, let's come pleat our for loop now. So table, table nodes. And then we use AI to identify which node we want to change inner HTML. We'll use the inner HTML property of that node and set that equal to Now what are we going to set it equal to? Well, we copied it, the first one needs to be the method name, and we copied the array of methods into this methods array. So it would be methods.

And then of course, it would be zero. But we need to come up with a way that we can cycle through each item in that array. So I'm going to create another variable. I'm just going to call this location or LLC. For short, and set that equal to zero. Now let's replace this with LLC.

Now we've got the first table node set to the method. Now we need to set the next table node. So the next TD tag to the description. So how do we do that? Well table nodes. Now, the correct table node would be i plus one, right?

It's not I any longer, it's i plus one. But if we do i plus one, that's not going to help us with our loop. Because if we start with zero, i plus one equals one. And then when we do the loop again, this will be one. And so it'll be putting a method into the scription column. So we got to do something different.

We've got an increment i, at the same time, as we're identifying the node, we want to manipulate So we can do that with the increment operator. But the, the difference is we do the increment operator prior to the eye that causes it to increment before it is used. And because it's incrementing it, it goes zero here, one here. Then next time through the loop, it'll be two, three, and so on. So now we'll do inner HTML. And we'll set this equal to descriptions.

And then inside of square braces, look. We're going to use that same variable for the methods and the descriptions array. Now we need that variable to increment. After we use the first time in array, we need to go to the next item in the array. So at this point, let's increment that variable. All right, that looks pretty good.

Let's go ahead and save Let's jump out and see what we get. And there we have it. There's our table, set up with the method names and the descriptions. Now before we end this exercise, I want to show you one more thing. At the start of the exercise, I mentioned that it was important to put the script tag down here right before the end of the body tag. Because I said that the JavaScript may try to execute before this is even loaded.

That wouldn't be good. So what if we had a script tag up here? Let's see what would happen. Well, we obviously didn't get the results we wanted. Let me open the console. And sure enough, uncaught type error cannot set property inner HTML of undefined.

So it's trying to set one of those inner HTML. And when it did query, select all on the DOM. The table had not been drawn yet on the HTML page. So it could not grab those nodes because they did not exist at that point. And therefore, when we try to do that, the JavaScript to set the inner HTML of that node, it indicates that it's undefined. And so we're not allowed to do that.

So that is why we had to put this script tag down at the bottom. Now in the last section of this course, we'll have a bit of a discussion about the best ways to include JavaScript files within HTML pages. But I want to make sure you're aware of that very important concept. Also, as we continue with this section and start looking at events, there are some events that we can use to determine if the HTML page has been loaded. Let's continue on to the next topic.