6.6 Practicing the Concepts

In this lesson, we are going to practice some of the things that we have talked about. We are going to create an object. We are going to find elements in the document and we are also going to set up some events listeners. Now we are also going to do some things that we haven't talked about such as manipulating content. Now to prepare for this, I've gone ahead and I've cleared out all of the unnecessary stuff. So all of the content, if you can call it that for our message element is gone, but we still have our message element, as well as its style. I kept the background color for the body the same as well. And but everything else is gone. And for our index.js file, it's gone, there's nothing else there. Now as far as our HTML is concerned, there are two elements I want to add. They're both button elements. And one is gonna have the text of morning, the other is going to have the text of evening. And the idea is that we will click on these buttons and it's going to update the message so that whenever we click on morning, it's going to say good morning, and evening it's going to say goodnight. Now in order to set up the click events for these buttons, we need to easily find them. So I'm gonna set some IDs here. I'm just gonna set morning and evening. In a real application, I would probably use something like morning button and evening button, but this is going to be okay. And that's it as far as our HTML. So everything else is going to focus on our JavaScript. And we're gonna start by creating an object called App. Now, this is a programming style that is somewhat popular in that we are going to create an application object. And this object is going to contain everything that it needs to perform its own work. So we are grouping all of that functionality within a single object. Now as far as this application is concerned, there's several things. The first thing we need is our message element, so that we can refer to that whenever we need to. So we're going to create a property called message element and we want to initialize that as null. Now null is a special value in JavaScript. It practically means nothing. We're just initializing a message element with null. So that later on, we can retrieve our message from the document and then assign it to our property here. The next thing that we need is a method that is going to set the message. So that is going to be a function that is going to accept the message to change. Now, we will implement this here in a little bit. So let's add a to do change message or rather change content in message element. So we will have that. The third thing, is gonna be a method that we will use to initialize the application. This isn't always necessary, but anytime that there's any kinda setup, which in our case there is because we need to retrieve our message element. We need to set up the click event listeners for our buttons. So there are some things that need to be initialized. And I like to group all of that inside of just an init methods, so that all we have to do is then call init and then our application is initialized. Now as far as the initialization is concerned, there are several things that we need to do as I just mentioned. The first is to get the messageElement. So we will want to use document getElementById and that Id was message. And then the next thing that we need to do is set up the event listeners for our buttons. Now, we don't need to store these button objects in a variable because we're only going to use them once. And that's whenever we set up the click event listener. So we could just do this, we can retrieve those elements. We'll start with morning, and then we will just simply add the click event listener. And our function is going to call the set message method on our app object and that message will be simply good morning. And we can take this and copy it for the evening button, so that we can have that functionality as well. So we just need to change the ID to evening and we will change the message to good night. Now before we do anything else, there is some repetition that we're going through here. And some of the things that I like to do is write what I call helper functions, things that make it easier to type. Like for example, we have typed documen.getElementById three times. And that's a lot of typing to do. So some things that I like to do is create a function that will have a shorter name, but it will still do the same thing. Like for example, I'm going to create a function called _Id. And it is going to do the same work as document.getElementById. So is simply going to return, the result of calling document.getElementById. And we're gonna pass in the element ID. So instead of having to type all of these characters, we can just have _Id for every time we want to retrieve a particular element. And that's a lot less typing. Now we can also take that a step further with setting up a click eventListener. So we could write another helper function that says setClick or something like that. And we can specify the element that we want it to retrieve. And then the callback function that we would want to execute. And that code would look like this to where we would retrieve the given element. And then we would call, addEventListener, and that would be for the clickEvent. And then we would pass in our callback function. So this would make our code easier to read. So that whenever we set up the clickEventListeners for our buttons, it would look like that. So there's different little tricks that you can do to save yourself time and typing, because time is important. Now to make sure that everything is wired up correctly, let's first of all write our message to the console. So if we go to the browser let's pull up the developer tools and we will go to the console. If we click on morning we see good morning. If we click on evening, good night. And of course as we go back and forth, we can see that those values are being output to the console. So as far as the functionality is concerned, everything's great. We just need to actually write those messages to our message element. And we do that very simply. Now let me first of all say that there are many different ways that we can manipulate the content of an element. The easiest thing to do is to use a property called innerHTML. So I am getting to the message element object, app.messageEement.innerHTML and we are gonna set that to the message. It is that easy, and there we go. And as I said, there is different ways that we can manipulate the content. I mean, we can do a deep dive into the document object model and we can talk about all of the different elements that you can create and how you can create text nodes and all of that other stuff in our HTML is so much easier to use. It is a great little utility. So there we go, we have written a very simple application. We encapsulated all of the functionality as an object so that it has it's own distinct little thing. We even wrote some helper functions so that doing common things like retrieving an element by id or setting up click event listeners, can be done much easier with much less typing. Well in the next lesson we are going to be talking about HTTP requests because we can use JavaScript to make requests to the server.