From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 4.16: Accessing the Web Page

The purpose of a Scripting Language is to allow the programmer to be able to dynamically change things on the page. This requires that the programming language is able to access the contents of the web page and be able to change this. This requires some type of standardization so that it will work across different browsers, after all, there is more than just the Chrome browser. The way we access the components of the web page is called the DOM, which stands for Document Object Model.

The DOM is the internal representation that browsers use for storing the HTML page information. It is internally represented as a tree structure that is made up of nodes and objects. As tree structures are a bit beyond the scope of this book, we will not go into too much detail, but you are able to traverse the tree to access everything that is on the page. Thankfully, it is not necessary to have to traverse the DOM tree to do things with it, because we have access to utility functions that will do that for us returning the object associated with any element that we have assigned a unique id to.

Every element in the page has an object tied to it that we are able to access. Not only are you able to access this element, but if the element is something that has content in it, such as a <div>, <span>, or <p> element, you can change the contents of that element. This would include adding new elements to the page. This gives the programmer the ability to generate parts of the web page on the fly, which is something all the popular JavaScript frameworks take advantage of. You, however, don’t need a framework in order to do this. All you need is an element with an id to indicate where you want to insert your dynamically generated HTML code. For example, let’s say you wanted to create a multiplication table inside a div element named “multiply”, you could generate the table as follows:

It is good practice to read through code to figure out what it is doing so before reading my detailed explanation try and see if you can do so. We are clearly creating a string here, with the contents of the string being the HTML text necessary to generate a table. The \n tags are for debugging so that it is easier to read the generated HTML if printing the code to the console instead of to the element and is not necessary. We are creating the table and the first row, with a loop being used to generate a header line (remember <th> is for table header cells, while <td> is for normal data cells). We then get to a nested loop. We loop through the rows of the table and before starting our other loop print out the column header for the row. We then have another loop to print the columns of the table. After the inner loop is finished, but before concluding the outer loop we close out the row of the table. One the looping is done we close the table. Then comes a magic line of code.

The browser gives JavaScript access to the page through an object called document. There is a lot that the document object contains, giving you details about the web page and access to things like the URL and any cookies on the page but that is a bit beyond the scope of this chapter. For now, we are only interested in being able to manipulate elements of the page. To do this we need to be able to find the element we want to access, and we do that by using the getElementById method. This method returns a JavaScript object that represents the element requested. Each element type has a different type of object that is appropriate to what it is and does.

Any object that has displayable contents, such as <p> or <div> has two ways of setting that displayable content. If you just want to change the text, then innerText can be used, but if you want to add HTML code to the contents of the element, you use innerHTML. These are variables so you just write the value you want to the variable to change the contents of the page. It really is that easy.

In addition to being able to change the contents of the page, you can alter properties of the page element itself. This includes the CSS settings for the elements. Recall that we use the style attribute in a tag to change the style, so the attribute we need to change to alter the style is the style attribute. This, however, leads to a bit of a problem. JavaScript variable naming conventions do NOT allow for a minus sign to be part of the variable name, yet the CSS naming conventions use minus signs all the time. How can we change the font-size if we can not access the variable font-size due to the fact that font-size would be interpreted by JavaScript to be font - size which is a mathematical operation not a name to reference?

The solution the DOM creators came up with was to use camelCase to represent those variables. This means that whenever you encounter a minus sign in a CSS variable, you ignore the minus sign and capitalize the next letter. If we had an element called myText, and we wanted to change the font-size of that text, we would use:

This applies to other CSS styling attributes as well, for instance:

Which gets us most the way through manipulating the web page. We just need to be able to respond to events, which is what we will look at next.