TagDocument Object Model

Programming in JavaScript: Todo App

In this post, we will now take the tools that we installed in the last post and put them to good use. We will also draw upon all of the knowledge that we have built up until now to create this “todo” application. It has become rather common in programming for people to make a todo application as their first application. It’s so common that the todo app has almost replaced the “Hello World” app as the first app people make.
todo appThe basic function of a todo application is to create a list of items that we want “to do” or have “to do”. We can add as many “todos” as we want to this list and we can cross them off the list by hitting a remove button which is right next to each element. We also have a button which will remove all of the items on the list if we wish to clear our “todos” for the day.

In our code example, we will show both the HTML and the JavaScript as one large code container then we will split it into parts and talk about what they do. Note, you can run this application by simply opening the HTML file in a browser, you don’t need to use Node.js.

The Todo Application

In this example, we have the JavaScript embedded inside of the HTML. We will ignore the HTML and talk about the JavaScript as this tutorial assumes you have a basic understanding of HTML.

Let us focus on the first few lines of the JavaScript.

This first statement is a variable declaration and binding. We are using some of the Dom methods to bind elements of the HTML to variables in the JavaScript. The method document.getElementById('list') is selecting the unordered list with the id of ‘list’. The next two statements are getting the two button elements and binding them to variables. Our next lines of code are where many of the more important parts of this program take place.

Our Main Code Logic

First, we create an onclick function called addLi and bind it to the add button. Our onclick function resides inside of an anonymous function which is then bound to our add variable’s attribute of onclick. We are making an object out of the add variable and we use an anonymous function so that add.onclick will run when we click the add button.

jscriptThe first lines of the addLi function are again variable declarations and assignments. The first one invokes the document.getElementById('text').value method to get the string from the input box. Our li variable is bound to a function which creates a new li list element, document.createElement('li'). The textNode variable calls the document.createTextNode(inputText + " ") method to “mount” the text from the input box to the new li list element. Our final variable declaration removeButton creates a button that will be mounted onto the new li list elements.

The next line is a call to allow us to clear the text input by setting it equal to an empty string with document.getElementById('text').value = ''. We then enter an if statement which checks to see if there was indeed an input into the input box. If there is no input, the program deploys an alert box to the screen and returns false. If the if statement passes we go on to the next lines.

The lines after the if statement are lines to create the removeButton element which is mounted in the li list elements. We are creating an object out of removeButton which has two properties; className and innerHtml; and an onclick method; removeMe. The className property gives the button a class name of "removeMe" and the innerHtml property gives the button a label of " DONE!".

The final three lines in this function mount the text node and button we just created onto the list element using the appendChild method. We then call the appendChild method on the unordered list that was passed to the function, targetUl. Let us now turn our focus to our final lines of code.

Adding Logic to the Remove Buttons

We create a function removeMe, which is the function that is called as an onclick event on the removeButton we just made. First, this function selects the parent HTML element of the button itself which is the li list item by using the parentElement method. The function then calls the parentElement of the li list item which is the unordered list and deletes that li list item using removeChild(self). Keep in mind that the parent variable is bound to the original list item that has the button we just clicked on.

The final function in this code is an on click method for the removeAll button. This function removes all of the li list items by setting the inner HTML of the unordered list equal to an empty string.

Closing

In this post, we took a look at an inline HTML vanilla todo application. We talked about how the JavaScript works line by line. We also looked at various methods that we can use to target HTML elements and their properties. If you want to see a video version of this post, go to our vanilla todo app video tutorial. If you would like to brush up on your HTML knowledge, we recommend checking out w3school’s tutorials. You can download a version of this code with styling at our github repository.

Manipulating the Document Object Model

Today, we are going to introduce the concept of the Document Object Model or DOM. The DOM is a very important concept when you are working with JavaScript. JavaScript is a language that uses HTML and CSS to create its graphical user interfaces. Other languages use similar markdown languages such as XML to streamline the process of creating GUIs. (Note: we won’t really be looking at much code in this post.)

In this tutorial, we will assume that you have at least a basic understanding of HTML and CSS. HTML is a markdown language that basically lets you define where things will be on your GUI and CSS is a styling language that lets you configure how things will look on your GUI. JavaScript becomes very powerful with these two technologies because it can give the elements created by HTML and CSS specific behaviors.

The Document Object Model

The DOM is an application programming interface (API) of the hierarchy of objects inside of a typical HTML document. More specifically, the DOM refers to the structure of the document itself and how you can access and manipulate elements on the document. More or less, the DOM helps programmers by defining a standardized structure for an HTML or XML document.

5733353962_ecd5b221cf_zAll of this sounds really complicated but it truly isn’t. All the DOM really does is allow JavaScript (and other languages) to easily access HTML to read, write, delete and add elements dynamically. When you write an HTML document that you plan to access with JavaScript, you can think of your HTML as a tree structure of JavaScript objects. Each element on the HTML document has various properties that can be accessed and manipulated through the use of JavaScript functions.

The Window Object

For instance, the largest object in the Document Object Model is the window object. If you open your JavaScript console and type window you will see a return value of all of the child objects that exist on the current web page that you are on. The window object is an abstraction of an open window in your browser. Inside of the window object, there are three objects: the history object, the location object and the document object. The document object is the most important object for our purposes.

The history object is a representation of the browser history. If you open a new tab or window with your browser, then open your console and type history.length you will see a return value of 1. This is because you have only been to the first URL since the history object was created. The location object contains information about the current URL that you are viewing. Typing location.href will return the entire URL name of the URL you are currently on.
nodesBefore we talk about the document object in detail, we need to understand what nodes are and why the Document Object Model uses nodes to represent everything (including the document itself). If the DOM is a tree structure, then the nodes are represented by the intersections of the lines of the tree. There is a document node, text nodes, attribute nodes, element nodes and even comment nodes. All of these nodes represent different data structures on the HTML document. A good metaphor for the DOM is to think of the HTML document like a net with the intersection points being nodes. JavaScript can only grab these intersection points when it is manipulating the document.

The Document Object

The document object is the owner of the HTML document that you see in your browser. There are various JavaScript functions that use the document object to manipulate the nodes it owns. For instance, document.getElementById(), searches for an HTML element by it’s id and then returns it. This is a frequently used function which allows you to bind HTML nodes to variable names in a JavaScript program. You can also create different node types with different functions such as document.createElement(). You can create an element type then assign it to a node or near a node with document.appendChild().

We have actually been using various different DOM functions such as console.log() which calls the console object and then prints what’s inside the parenthesis to the console object. As we explore deeper and deeper into JavaScript we will start to see more and more of the Document Object Model and its various functions.

Conclusion

Today, we took a break from looking at pure JavaScript code to talk about the Document Object Model and how we can use it to access data on HTML documents. We looked at a very general overview of how the DOM works and how the nodes on an HTML document are organized.  As we continue forward with our look at JavaScript we will start to look at bigger examples which will start to use and rely on the DOM. In our next post, we will continue by taking a better look at objects and functions.