 All right. We are on our last unit. So this is exciting. All right. So let's review. We got approximately 17 hours to complete this certificate. That means that if you have done all this, you have about four hours left to do unit six. So you've done 13 hours around so far. Whoa. All right. Who am I? I am Susan White. I'm from Houston, Texas. I'm a computer science educator for about 25 years now. I have been with Sailor a little over a year now. I do love teaching coding. I think it's just great. It opens up so much problem solving skills for students, for adults, for everyone. And I just think it's a skill that everyone should have at this point. I do love to hang out with my dogs. I'd like to read a good book and sand and the beach and all that kind of good stuff. All right. This is the first in our series of three courses that'll cover the Java language script language. I'm sorry. Six units in this course we have gone through one, two, three, four and five. And now we are on six. Six is going to cover objects, the DOM and best practices. Last week we did cover unit five for those of you who may not have had a chance to look at it. I'll do a quick review so you know what you might see whenever you do get to go through it. I'll do a quick review so you know what you might see. I'll do a quick review so you know what you might see. So those of you that did do it, hopefully this will remind you what you did if it was a week ago or so. All right. So the certification for the course. Once again, you're going to work through all the different units. One through six. Then you can take that final assessment and that final assessment. You must worry 70 or above on the course final exam to receive that certificate. So let's say you take it and you get a 68 or whatever. And you're going to be able to do that. You're going to be able to do that. You're going to be able to do that. You're going to be able to take that week and you can try to get. We also have code runner. That's in a lot of our. Assessments where we have our exam questions. And I've gone through that a few times. I will be using it again today to show you some stuff. This is one thing that we did last week that I think is really good. There are some interactive reference material and three, three and three and four. So you can go there. Click on it and it does some interactive where you see all the examples and you can actually run some. And it's great. If say you just forget how something works or you just want to go playing around with some stuff. It also has 3.4 where it talks about keywords and it shows that stuff. So both of these are great resources to go back and check it anytime. All right. What topics did we actually cover? We talked about functions. Functions with arguments. How you declare those and how to call the functions. Okay, great. Now what are we covering this week? Unit six is a. I guess longer unit. It takes approximately four hours or some of them were like two hour ones. The biggest part of this is going to be the DOM, which I will touch on that. And as I go through it, I'll tell you, I'm going to go through that and definitely take your time so that you can understand that whole thing. We will definitely talk about objects. That'll be our first stuff. We'll create some code using objects. We'll talk about the best practices, although you might go through and make sure that you go through all that again. We'll talk about exception handling. And we'll do at the very end, a real world example using some JavaScript. So that's kind of like your final review of the whole script course. Alright, so why use objects? Objects are an essential data type of JavaScript and learning how to use them is necessary to develop applications. Objects will help programmers write reusable code for real world objects. Objects are dynamic. You can create, add, delete them, do whatever you need to do with them. Alright, so in this, as you're going through the unit and you're working through it, you're going to create a data structure. You're going to create a data structure. You're going to create a data structure. Who turns into a squirrel between eight and 10. So it doesn't turn to a werewolf who turns into a squirrel. So he wants to determine what's triggering it. What's making him turn into a squirrel. So he says, I'm going to create a data structure and store some information, but he doesn't want to just store one thing of information. He wants to store different things. So he decides that he's going to look at this first. And this is not really what he would want, but he's going to look at this first. So if I store a collection of numbers, you could try to store it as a string. And then try to work with the numbers. You convert them to a net. So if we had something like this, let our numbers be this string. Two, three, five, seven, 11. Okay, great. Then each time I tried to use something from the string, I would have to take it. Convert it to a number. Do whatever I need to do with it. And then if I needed to, I'd have to like put it back in and convert it back. And then I'm going to use an array of numbers. So this is not a good way to really store something. That is numbers. So we're going to need to talk about something now called an array. Don't worry, we'll get back to the whole object, but we're going to talk about an array right now. So if you've used other languages, sometimes they're called list. So we're going to use an array. Of numbers. So how do I declare a right? I'm going to show you this and then I'm going to bring this into a list. So of course we have our lets, and this is going to be the name of our array list of numbers. Notice I'm using camel case where the first one, the first word is all our case. And then all the other words start out with capital letter. I put the equal sign. Then an array has square brackets around the whole array list. And then all the list elements inside are separated by columns. So we're going to use a list of numbers. So let's see what this looks like. Now, if you notice this array has one, two, three, four, five things in it. So the length of this array would be five. However, if you notice here, when I say to print out list of numbers at two, I am not telling it to print out the number two. I'm telling it to go to the array. And the arrays name is listed numbers. So this is going to be the first one. And this is going to be the first one. And this is going to be the first one. So if you notice me, I want you to get an element from this array. And our elements are going to be counted starting at zero. So this is element zero. This is element one. And guess what? This is your element too. So even though we have five things in this list when we count elements, we're going to get a number of elements. And this is going to be used to because it's used in a lot of languages. So this is element zero, element one, element two, element three, and element four. So let's go here. And let's go to this example. Here. Let me get, if I went into the course, I would be going right here. Right now I'm just going to go to my link. Okay. So I'm going to come down. I'm going to grab this little. I'm going to grab this little button. When I go into replete, I'm going to create. And I'm going to create. My node. And I'm going to create. All right. Give it a second to boot up here. Did you say anything after. Create. Let's paste it back in. Oh, Susan, I'm sorry. I lost you. And then I lost myself or saying. Okay. Could you, could you say what you said? Real quick. I just said it. I'm going to go back to where. I know just. Really one line. You said, you were going to something your JS, but now I can't remember right off the top of my head. Oh, oh, just when I opened this here. Yeah. Okay. Sorry about that. I was clicking too many buttons on my end and I got lost. Sorry about that. Okay. All right. So I'm going to bring that into replete. So I'm going to say create. And when I go create, I'm going to put this in here. I'm going to put this in here. I'm going to come down here to node JS. And I'm going to create that replete. Give it a second to boot up. Having a hard time thinking. Sorry. All right. Let's put this in here. All right. So again, this is our array. This is his name. Or her name. When I do the equal sign, this is going to be with the elements of my array. So I have the list of numbers. So when I ask it to print out list of numbers, elements at two, it is going to go and count from zero, zero, one, two. So it will print five. If I tell it just to print list of numbers, zero, then it's going to print two, because the zero element is our first one. If I say listed numbers two minus one, notice the two and the one are both in the bracket. So it will go two minus one first, which would give me a one. Then it would go to element one, which is three. So let's run this. So notice it does five, two and three. Now, if I wanted to go ahead and try something else. And I wanted to print out. All right. Let's make sure I have those right. Yes. Okay. So these two are different. So I'm going to take the two minus one and I'm going to get one. And then I will look at my list of numbers and see who's at one. In this case, I'm going to go to my list of numbers at two, zero, one, two, which is five. And then I'm going to subtract my list of numbers at one, zero, one, which is three. So five minus three, my output, hopefully here, this is what I think it's going to be. It should be two. So let's see if we're right. So you see the difference between saying two minus one and square bracket two minus square bracket one. All right, let's continue on. So here. This is our definition again. These are our elements. They are enclosed in square brackets. So if I want to look at a single element, I will say the name of the array, square bracket, zero. That will give me the first one. The length of the array is five. So we talked about that one, two, three, four, five things. However, when I talk about these single elements in there, the element is element zero, element one, two, three, and four. The length property of an array is used by writing the name of the array dot length, and I'll show that here in a second. And I could get the last element of an array without even knowing it's size by saying this. So we're going to try both of those here in just a second. Oops, and I already have one in there. All right. So I wanted to print out. I would like to have my hand on the right keys first. All right. So I want to print out my array. And it's linked. So I'm going to say the name of my array, which is list. So I'm going to have a list of. Numbers. Dot. L. E. N. G. T. H. All right. So we got a lot of fives here. I'm going to go ahead and comment out a few of these real fast. I'm just going to leave the last two right now. All right. So our list of numbers at element two minus this number is element one was still two. And our length of our array is one, two, three, four, five. So I'm going to go ahead and do the same thing. And I'm going to try to do. The last. I know that the link was five. So I could do this. If I knew the link was five, I could say, okay, well, then if I want to print out the very last one, I'll do four. Whoops. And what did I do there? I misspelled. That is something we're going to talk about later too. You see what I did. Instead of writing numbers, I wrote number. And I'm going to say I want to go ahead and comment. All right. So I got 11. Is that my last element? Yes, it is. Now, what if I didn't know the length or if I just wanted it to work for any links? I could do this. Let's see if I can spell it right this time. List of numbers. LEN Gth. So that would be our links. Minus one. That should give me 11 also. I did that again, but I did that again. Yes, look what I did this time. Wow, I'm getting all those errors for y'all. Of numbers, there we go. All right, you see I got the same thing. So length minus one will give us the very last one. Zero will give us the first one and we did that already right here. And let's see what else did I wanna show you from that? Let me come back here. Oh, I think that's it. All right, let's keep going. All right, so now we have a couple other things that we can do with arrays. Push will add a value to the end and a pop will remove the last value in there right. Those of you that have done other computer languages, you're going, hey, push and pop, that kinda sounds like a stack. And it does. It totally acts just like the stack that you would know. So we're gonna take this example and go ahead and throw it in there and let you see what that one does. So let me get to it. All right, so let's grab this. All right, so if I run this, it looks like I started 1, 2, 3, 4, 5. So let's see. I really started 1, 2, 3, didn't I? All right, that's great. If I wanna print that out then, I would have said console.log sequence at this point. And I could see 1, 2, 3 was what it was to start with. There we go. Now, if I push for and I push 5, it doesn't push it starting here. It pushes it to the end over this way. So you see that our next thing says 1, 2, 3, 4, 5, because I pushed 4 and I pushed 5 and then I printed it out again for you. Now, if I pop, notice it pops it off the end also. I always, when I teach stacks, tell people to think of a stack of plates. This would be the top of the stack of the plate. So I'm adding stuff here. And when I put stuff on that stack of plates, the last one in is my first one out. It's a lifo, last in, first out. So whenever I'm taking it off, the last person I put on was the 5. So guess what? He gets popped off. So when I pop him, it comes off and when you pop, it just tells you, hey, this is what you just popped off. And it does go back and it changes your array. So now our array only has 1, 2, 3, 4, 5. Now, if I had changed our array up here and I had had comma seven, comma eight. So we start with that. So 1, 2, 3, 4, 5, 6, 7, 8. Or 1, 2, 3, 7, 8. I missed four and five, sorry. So then when it adds it, notice it added the four and five at the end. Okay, when it popped it off, who still got popped off the end? The five, whoever I added last is the first one off. Let's continue on. All right, so now we're back to our guy. He turned into a squirrel, which is pretty random and weird, but we'll go ahead and talk about him anyway. So it's kind of funny. So if he wanted to figure out his trigger, he wanted to keep track of his activities and the Boolean values. So he wanted to keep track of two things. Now he could have done it in some kind of weird way where he had to an array and another array and he tried to keep them like somehow related to each other, but that gets really, really picky to do and it's not very efficient. So what he decided to do was he was gonna decide to make an object and the object is called day one. So you see it right here. This is our first introduction to what an object will look like. So day one equals, notice the curly braces. Curly braces enclose our object and then these are the properties of our object. Notice we have a property that's a squirrel and it's false. So that means it's gonna be Boolean. It's either false or true. We're starting off with false. Then we have some events. And in the events, this is an array. How can I tell? Because we've got square brackets here. Well, and everything is separated by commas. This is not an array of numbers. This is an array of strings. When we finish saying what our properties are of our object, we close the curly braces and then we put a semicolon. And then I'm gonna bring this example over there so we can see how we can touch stuff. So each property will have a name followed by that colon. Then it will have whatever value. So in this case, it was false. And notice that there isn't a semicolon right here. There's a comma. No semicolon here either. Our semicolon happens at the very end down here. If we want to, we can replace the value of a property or we can actually create even a new property. And that's what we're gonna do real fast. So let me grab this. All right, so let's run it. Just make sure everything's okay that I copied over. Let's talk about it. So again, this is the name of our object. After the name of our object, we put the equal sign. Curly braces with a semicolon at the end will cover everything, all the properties inside there. Each property will have a colon after it and then whatever values you're going to give it. So if I decide I want to look at some of the properties, I will say the name of the object and then I will use dot notation. Dot notation will say, okay, go to day one. And while you're in day one, I would like you to go to squirrel. So it will take it, it will go into day one, it will look at squirrel. And if you notice over here, it printed out false because that's what the value of squirrel was. I also said, hey, go to day one and print out wolf. Now, is there a wolf property here? No, there's no wolf property. So you notice it comes undefined. So it says, hey, there's no wolf property, it's undefined, there's nothing there. So if I do this and I decide to say day one is false, I've now created another property. Now there is a property called wolf and I can have it print out something by saying day one dot wolf. And now instead of it being undefined, it has now said false. And the reason it said false is because I put false here. Now, could I have also done wolf up here? Poland, and then what is the wolf? False. Okay, so let's do this and get rid of you. And I'm gonna get rid of you too. Uh-oh, what did I do wrong? Whoops, I messed up on my wolf, sorry, my fault. All right, let's get back to this because I totally messed that up. And head on back over here. All right, all right. So let's look at these two real fast. So this is a object. It has the curly braces, curly braces, semicolon at the end. Name of it equals one property only in this one. This one property is work and it has three went to work, touch to tree, touch to tree. So it's got a few things in there. Now over here, we use the curly braces and they started a block of statements rather than describing an object. So these curly braces in here enclose the fact that if this if was true, I wanted to do two things. So braces can have two different meanings. All right, so let's look at some more stuff on our objects. So here's an object. It has two properties left and right. Curly braces enclose it, semicolon at the end. Now these look a little different because they're not on separate lines. Is that harder for you to read? It might be. It might be better to take this object and kind of spread it out so you can see everything better. But this will work fine. JavaScript does not care how you do it. So let's go grab this one and play around with it some. Not cool. Okay, so we've got our object. It's got left and right. I print out the left first and it prints out one. Great, that makes sense because I gave it one. If I were to change that to say five, you should print five, right? Okay, so it did. All right, so that's awesome. So let's change it back to one before I mess up something. All right, so if I decide to delete that property and decided that this object no longer needed a left, notice when I try to access that left, it's gonna say undefined now. And I'm gonna go ahead and comment out these for a second just so we only see the one we're looking at. So right here, my left was a one. Great, I've printed that object's property out. Then I said, okay, get rid of left. I don't want it there anymore. So when I did that, it actually changes my object and that left is gone. So now when I try to print out the left again, it says, hey, undefined, that property no longer exists. So then this says to print left in an object. So let's see what that does. So I think it's running a little slower here. All right, so we've got our one. Hold on, let me do these again. Oh, wait, I wanna see what we're working with. So is there left in an object? False, there's not one. Okay, is there, let me get rid of this one. Is there right in the object? Whoops, yes, there is a right. Now what do you think if I would have taken this and checked to see if there was a left before we deleted it? Well, it makes sense that before we deleted it, it should be true also. Get rid of that one. So I wanna check and see if my object, which is called an object, I wanna see if it has a property called left. So I would use this in and see if it's there. Okay, it was there, but then you notice after we deleted it and we tried it again, it was no longer there. So this is a couple of different things here. It's deleting and showing you how to use this in in order to see if that object has that particular property, okay? Let's go back. If you wanna know what properties an object has, you can use the objects.key. It returns an array of strings which are the objects property names. So let me go grab this example too and we'll look at this. Actually, I was already in that one. Hello, I was kidding. All right. So if I run this, it says, hey, your object has the keys of an X, a Y, and a Z. Okay, what if we add, let's see if I can add something right this time and almost did another Y. That would not be good. Let's do B and we'll make it a three. So now if you notice, since I added the key B, now whenever I use this object.keys, it's gonna print out my new property. So I've got an X, a Y, a Z, and a B. So those are my keys, which some of you that may use maps, you and sets you may have heard about keys, but this is a great way to understand, hey, I'm using this new object. I don't know what its properties are. Let me get a real quick key and see what they are. So this can help you know exactly what properties your object has in it. All right. All right. So then we get, as we're going through 6.1, we get into an example in action. This example in action is a great one. It talks about creating some objects, creating a whole bunch of different ones, changing things in them, adding stuff to them. This one is a great one to work straight through with the whole video and make sure that you're working through it. I'm not gonna show it to you. This is a screenshot from it, but again, example in actions are just a great learning tool. They're always there to help you understand. All right. So now we're gonna look at this 6.1 where it has the practice and it tells us that we're gonna pop be a file, save it on our drive, and then we're gonna open our browser and follow the instructions. All right. So let's do that. Let me put this. And I just kind of wanted to go over this one a little bit just to make sure you know where you're saving stuff and where to put things as you're working through it. So it's a great example. All right. So when you get to this, it says exploring objects using JavaScript practice. So it says here's the contents of the file and it shows you what the file is gonna look like. So you could copy and paste this file and just put it over there. You could also use this one to do it. I am just gonna copy this since this is the contents. I'm gonna do a copy and I'm gonna open up over here. Here is, which I have already saved this one time but I'm just gonna show you. So I would put this in here. So here's what it is. I would go ahead and save it. So I would go file save. And this looks exactly the same. Make sure I copied everything. Everything looks good. So now I've done this. All right. So great. It says to begin with make a local copy. I saved this on my desktop so that I could have quick access to it. If you have a great file system where you wanna put it there, that's great to put it wherever you can find it. All right. Then after we do that, it says that we are gonna create an object and do some things with it. So I'm gonna do a couple of these things right here with you and kind of get it started. So it says that we're gonna open up the developer tools and get ready to put in some commands. All right. So let's open this in our window here first. Now I could double click on this and it will open. Or here I can also go file open and I can open it. And now it's open. You could also find it on your desktop, double click on it and then it should open up in Chrome or whatever browser you have open. All right. So we have done that. Whoops, hold on. Let me get back to where it was again. Sorry. It went over to that window and copied over my other one. So let me open this again. All right. So we got our file, copied it over and to mine I put in sublime. You put it wherever you want. So made my local copy. Okay. Then I said we're gonna open our developer tools in our console and get ready to type in some commands. So I've got it open here. So developer tools, I'm gonna go here. I'm gonna go to more tools. Notice I don't use the shortcuts a lot especially if I'm showing you stuff here I will do the actual menu. So I opened up my developer tools and they said to go to my console. So here I am. So I'm gonna sit there and now what does it want me to do? So it says open the console, enter person into it and press enter. You should get a result similar to one of these lines. Okay. So let's check and see. So it says to type person. And this is what you should be doing as you're working through some of these because it will definitely help you. So it tells me, hello, person is not defined. I don't know what you're trying to do. So great. So I go, okay. Well, what do they want me to do? Let me come back here. Okay. So now what it wants me to do is create this person. So let's create this constant person like this. So I'm gonna just type it. So I'm gonna say const person equals and remember objects have curly brace, curly brace, semicolon. So now I'm gonna hit enter. And if I go person now it shows me those curly braces which is what it said over here. And it said, we should see this now. When I did the person the first time it said it was undefined right here. It said, I don't know what you're talking about. I created the person. It says undefined just because person doesn't really have anything in it. And then when I try person now instead of it saying person's not defined like this it shows me, hey, person is an object. You've created it now. So now I would come back over here and I'm like, okay, what are we doing? And they tell us, hey, you created your first object but it's an empty object which is what I just said. There's nothing inside here. So it says, and I'm just gonna go through a little bit more of this with you let's update your object in your file. So it doesn't tell you to take this and put it over here. It tells you to take this and put it in your file. So that means we're gonna go back to our file and in here where we have script we're gonna add that stuff. Now when you do that, what you can't forget to do is to save it. Okay, so now I've saved it there and now after I've saved it I go back over here and I refresh. Okay, so I've refreshed it now. So then after I've done that it says let's try some of this. So let's do person and then we're gonna do person.name or we're gonna do some of this stuff. So person, I'm gonna do that now. Look at that. So it has that person has some stuff in it and why does it have stuff in it? Because here I defined a person and it has a property of name, age, gender, interest and then even has a function in it and it has some kind of greeting that is a function in it. We got all kinds of stuff in here. So whenever we created this now and I try notice it shows me all this that it has. So after I do that it tells me, okay, try person.name. Okay, so name is one of my properties, right? And it has Bob and Smith in it. So let's try person, name of the object, dots which property do I want? Name, now it says if I just do name that shows me the whole array. But if I go person, dots, name and then I want one element, I do that and I get the first element which is Bob. All right, so then what else does it want me to try? Person.age, person.interest. So let's do person. age, that's a easy one because it's not an array. So it's just gonna be 32. Now then when we come back here and we look at our next one, interest is an array. So see how we put square brackets on it again. So let's do, now I'm getting the first one which means not the first one, it means what? One is actually zero, one. So remember, always start counting as zero. So that should give me scheme. So let's see if it does. Whoops, look at me misspelling for y'all again, person.dots and I am doing interest square bracket one, there we go. Notice I misspelled two things here, don't see that. I put the S on persons and I didn't put the S on interest. So a lot of your errors at first and a lot of your errors after doing it forever like I have are still just typing too fast, not looking when you have something that's plural, looking at capitals wrong, all that kind of stuff. So then we'll do person.bio, person.greeting and then we'll leave this and leave you to come back here and work on this. Now, look at bio over here. It has parentheses, everybody see that? So when you have the parentheses, that means bio is a function. And then if you look down here, reading is also a function. So if I'm gonna try to do bio, I put person.bio, parentheses and it says Bob Smith is 32 and he likes music and skiing. So I could load back and go, what does that function do? Oh, it does an alert and I can see exactly what it does. All right. So then your goal is to finish going through this and kind of go through this whole little practice and explore the objects using the JavaScript. It's a great lesson and just keep this open, work through it and do everything they ask and you'll be good. All right. Oh, I forgot to say that. As you're working through it, a new keyword this will show up towards the end of the practice to know what the this keyword does. You'll talk about it a lot more later in some other courses, but it just refers to your current object that you're using or that's in scope. And you'll see a little bit more about this as I go through this. All right. Now we're into 6.2 which is your document object model. So this section has a lot of practice, a lot of examples and is a great place to learn all about this. Now, if you have an HTML page, so here's our page right here and I decide that I want to kind of box it up and make it look good. I can do this. And so I have my HTML, which is this whole thing here and then notice in my HTML here, I have the head. So I put that here. Inside the head, I have the title. Then outside of the head, I have the body and then inside the body, I have the H1. So this is just a representation of how this whole page looks. So you can kind of picture it as this is how it's setting it up and that's how you can look at it. Now, another way that you can look at it is to think of it as this. And for those of you who may have used trees, lists, whatever, you may notice this and be like, oh, I can see that. So HTML is like the parent and then these are some of his children and these are some of the children and the leaves are text notes. So these are leaves. Anything that doesn't connect from it to something else or have any children is a leak. And so the person on the left here is the parent. The person on the right is a child. If I don't have a child, I am a leak. So this is another way that you can kind of look at how the DOM tree structure works. So this is another diagram. For those of you who have done even more like doubly linked lists and stuff like that, this will make a lot of sense. So we kind of have almost an array looking structure here where we have a zero and a one and a two. And then we've got this pointing to these. And if you notice here, we've got a previous and a next and something that goes to its parent and find your last child. So this is a little bit more complicated, but as you read through the text and you kind of practice through their explanations of everything, it will really help you understand how to get this whole picture in your mind. Now, as you are working through stuff, what are things that DOM could help you with? So I'm looking for a specific node in the document. So I couldn't say something like, hey JavaScript, get the second node and the sixth child in the document for me. So if you want it to get, say, the first link in the document, you can use this. We're using get elements by tag name, okay? So I let my link equal and I'm going to get my elements by a tag name here. So I'm looking for a tag name and then this will return something without me having to do some weird kind of text stuff like this. That won't work. So we want to use. I'm just going to give it one more second in vamp to make sure that this shows back up on the screen. Okay, so we are back. If you got lost with us, we're sorry if you had any questions about what happened. If you got communicated, leave them in the comments. And of course, there will be a later version of this that'll have this all cut together and stuff. I can see that some people are watching. So thank you and we'll just get right back into it. Soon as sorry about that, I'll hand it back over to you. All right, thank you. No problem. I will start back here and hopefully that'll be okay for everyone. All right. So another way to find the single node, you can give it an ID attribute and use get element by ID. So here's our command, get element by ID and I can look for, whoa, that's my computer freaking out. There we go. That went really far that one. All right, get element by ID. If I am looking for Gertrude, I can look for an ID. So somewhere I've got an image. It's ID is Gertrude. This is the source for it. And I can find it easily by getting it by its ID. So this is another way I can look for it. And a third way is get elements by the class name, which will search and retrieve all elements and have that given string in their class attribute. So that would be some other way to do that. You can set any attribute you want on nodes. It's recommended you prefect prefix the names with data to ensure they don't conflict with any other attributes. What does that mean? So right here, I said data-classified. So that means I am setting this attribute and I'm making it data- so I know that I did it. So data-classified equals secret. Data-classified is unclassified. So when I want to get an attribute, I would get an attribute. And if it's data-classified is secret, I would remove it in this case. So this is another way. The DOM has a ton of examples and working through again so you can kind of go through all these examples and see how they access stuff, how it works, how it can be helpful for you as you're trying to go through all the code. Now on this tutorial right here, it helps you understand the DOM more and gives you more practice with the developer tools. So we're gonna go into this one and I'm gonna get you started on it just a little bit also. So let me get here. All right, so this is in 6.2, it's in the practice. Okay, so as we continue to look at the DOM, it tells you before starting this tutorial collapse. So whenever you open this up, this may be like this. It tells you go ahead and collapse that. And then next you'll expect the DOM on this page. So we're actually gonna do it on this page. So again, I'm gonna come here. I'm not gonna use the shortcut. I'm gonna go to my developer tools and it says to go to the developer console. So I want to go to console. So here I am at console. I'm gonna clear mine so that it looks a little bit nicer. And then where are we at? Finally, select your elements tab. So I'm gonna go to my elements and then it says complete these active tutorials. So we're gonna start here and go to these active tutorials. And so notice this is kind of changing as I'm changing my screen. So when you're interested in a DOM node, inspect is a fast way to open the dev tools, investigate that node. So if I grab this, Michelangelo, and I right click it and I say inspect. Notice over here on the right side, I get something here and you notice Michelangelo is there. So it looks a little different than this one does, but still Michelangelo is highlighted over here. And we can see that it is in the same type of section. Now, if you do it and it comes here and it doesn't, you're like, okay, I don't see Michelangelo here or something. Just click on this and it should open it up and then you should be able to see it. So then, and this is your DOM tree. We're looking at it, we're seeing everything here. And then it says also try it this way. Click inspect up here, so I'm gonna click it. And then I'm gonna come down here to Tokyo. And now I'm at Tokyo. And it says your Tokyo should be highlighted. Okay, great, it did highlight, so that's awesome. So then I go to the next page. Now mind you, I'm not gonna do this whole thing, but I wanted you to kind of see what you would wanna do. Now, here I'm at Ringo. So I'm gonna highlight Ringo, right click, inspect. And now we see this comes up. Hey, wait, I don't see Ringo, what should I do? Go ahead and do that. And now I can see that Ringo is there. And like I said, it might look a little bit different than this, but it's still the same idea. Then as it starts to tell you, press the up arrow up two times, so you can see me moving through stuff over here. And it goes through everything and you're moving through the tree and you're looking at it, it is a great, great practice. So highly, highly suggest you step through all of this and get that all done. All right, now let's go onto this. All right, so the tutorial will use the right method on the document object to output data to a webpage. And you'll use console.log in a word. So let's look at this one real fast. All right, so I'm tired of looking at this. So what am I gonna do? I'm just gonna close it. All right, so this one is not falling to me. All right, so this was us doing this. Then our next thing is you'll use the right on the document object. So let me get to that, let me come here. Let me go to six. This is my fault, I put the wrong link, sorry. And we just did that. And now we would be on this one, which I put the wrong link, but you saw how I found where I was at. We just did the DOM elements here. And so now we were supposed to be doing this one and I put that wrong link. So this one will go through and you'll use JavaScript using and put data on a webpage using right console.log and alert. You have used all of those. So as you're going through them, you will read through all this and then it will show you here the JavaScript program that you're gonna have, that you're gonna save in your file and then you're gonna run it in your browser just like this and make sure you understand how all those different things work. So again, that is underneath 6.2, that is our practice. So we've got it down here. We're gonna use it to output data to a webpage. So we finished 6.1, 6.2. Now we're down here to best practices. All right, best practices. All right, so let's start our slideshow again. Okay, we've gone through many coding guidelines as we've worked through this course. This section will summarize your best practice. It will have general guidelines, variables, operators comparison, control statements. That should be control, not controls. Strings, conditionals, functions and objects. These are all the type of things that we've learned. And as you go through it, let me go through that again. Oops. As you go through it, it will take you step by step on different guidelines that you should use, how you should write your functions, how you should write your ifs, how you should make your comments. And it goes through and tells you all the guidelines that you should be using. So this is a great resource here to practice on that stuff. And you see over here that this is everything that it will talk about. All right. So common mistakes. All right, let's talk about it. Oh, I did this a lot today. Instead of get elements by tag name, if you write get element by tag name, those are, so you have to be careful and you have to be careful because name, name and name are all different to JavaScript. The capitalization matters. So you have to be careful with that. Semi-colons, be careful with semi-colons. When you put a semi-colon after it, if like this, that can cause you problems. When you forget semi-colons, that can cause you problems. Functions, a big thing with functions is that someone will write, and I was actually talking with a student today about doing that because they wrote about seven functions and they forgot to call every single one of them. So nothing was happening in their program. So you can write as many functions as you want, but if you never call them, then they're never gonna happen. When you have a return statement, if it isn't in like an if-else and it's just a return and you're trying to return something after a return statement, you will have issues. Okay, and be careful in assigning. Equals versus the two equal signs versus the three equal. All of those are very important to know the difference of. Okay, another thing is using strict mode. When you use strict mode, it will have different semantics than normal code. Some browsers may have issues with it, especially IE, I think. Anyway, it will take some errors and changes them from silent to actually throw the errors. It fixes your mistakes. It's a great thing. And I was gonna show you that real fast. So let me get back over here. All right, so in strict mode, we will actually put use, and you will know, hey, things get caught, things happen, and this will go through as you go through and show you how strict mode can change a bit of your coding and make it better. All right, so try catching finally. That is one of the things we end up doing too. So if you notice here, a try catch finally will catch errors and make things not break your program. So it'll catch it rather than it being oh, completely die. So we'll have a try with our curly braces. We will try some code. If this code causes issues, it will catch that error and then we will have code inside here that will handle that. And then finally, this will do the execute whether it had an exception or not, this will always happen. So I try something. If I have an error, it does something and then this code will always happen. So as you're going through this, we have an example and action for that and it's exception handling. So as you go through this, this is a great example and action again to get the try catch. Try catch, you will see a lot and you definitely want to go through this and learn how to write these yourself and use them because they are very helpful. All right, so then we talk about our course review. So in our course review, it covers almost all the topics you've learned to help you prepare for that final project and work through examples to help you with understanding. So we'll have final practice exercise review. You have if else, some examples, comparison operators, nesting, logical operators and it goes through all of these things. So as you are getting ready to finish off the course and you're like, okay, I'm done, I'm ready to get and get my certificate. So we get to our final practice exercise and it goes through all of this stuff. Now, if you notice, there's a whole bunch of these easy copy to clipboard. That way you can take this and you can throw it into Replet or wherever you'd like to do your stuff and you can remind yourself, okay, let me think what this output is gonna be and then I'll run it and I'll check and make sure I'm right. Hey, what happens if I were to do this? What happens if I did that? And you can play around and make sure that you're understanding everything you needed to understand from that. And as you go through the review, it goes through all these different things for you and goes through it all. So the review is great, but then even better than the review is your course project. The course project does not count towards your final grade but it is a great, I can't even tell you how great this is for you to do because it goes through and you do every single thing that we had talked about just about. So it gives you an algorithm and tells you, hey, this is exactly what you're gonna do. This is exactly how I want you to do it. And it even tells you, hey, if it's correct, do this. Else do this. And so it kind of almost helps you set up all your logic just from their algorithm. And as you go through it, which I'm gonna show you here in a minute, it takes you through each of these. Hey, this is what you're gonna do. This is how we're gonna set it up. Okay, add your variables now, add your functions now. So it will take you through all of that so that you can get ready to do that final test. Get there. So it's a guess the number game. And the best thing about it is when you start to do it, it's like, okay, well, what is a guess a number game? Okay, well, it says, select a random number between one and a hundred and see if you can guess it in 10 turns or fewer. So when I put in a guess, I'll start with 50 and then I'll submit it. And it'll tell me, oh, it was too high. So then I can do another one. So if that was too high, I'll do 25. Too high again. So I'm gonna do 10. And so as I'm doing this, I'm thinking, okay, I'm gonna have to program it to do this. So, hmm, it was one. I got it right. So when I get it right, I did that. And if I said start a new game, it does it again. So this is what I'm gonna create. So I know what it's supposed to look like. So now I will start. As I start the game, it says, okay, here's our algorithm. That's what I just showed you. Now let's get started together. So it walks you through it. So make a local copy again. So remember, make that copy, save it somewhere on your desktop whenever you do it. And you can see it live. You can do this. And then you just keep going through it all. And it takes you through each and every step of creating that whole game. So it is a great way to end the course to kind of put everything together and say like, yeah, I kind of get this JavaScript. I'm kind of getting okay at it. So then after you finish that and you're feeling okay, now you're ready for the unit six assessment. So one through eight are mixed tight. Actually, I think just 10 is, I think I messed up the slide and didn't fix it. So let's go and look up really fast. And so now I have finished my project. Now I'm onto the assessment. All right, so I'm gonna continue my attempt. I'm gonna come in here to my assessment. And I am one through 10. So one through nine are asking me through everything. You notice there's your dormitory. Here is some of our tri-catches here. And here we've got some objects. And so we've got all the stuff we just talked about. Then when we go over here, this is our coding with objects. So in this exercise, you're just creating an object. So if you notice there's not a lot down here, all you're doing is putting stuff in here, make your object and then you'll say check and then you'll finish your attempt and it'll tell you if you're right or not. All right, we are almost done. There was a lot of stuff in this unit. So when you finish unit six, you're finished with everything. You're ready to get that final exam, start your certificate. And we really appreciate you taking this course and being on these live speeds. And our next installment should be coming soon and we will definitely keep you in the loop unless you know whenever it comes out.