Recommended Reading: Chapters 14 and 15 in the JavaScript book
The primary purpose of JavaScript code is to interact with the elements of a HTML page. In a typical bit of JavaScript code we will be reading the content of one or more page elements, doing a computation with those inputs, and then putting the results back into other page elements for display.
To make these interactions possible, JavaScript sets up a document object model, or DOM for short. In the JavaScript DOM every element in the page is represented by a JavaScript software entity called an object. JavaScript objects store data in properties and can respond to commands by executing methods. Our entry point to the DOM is a pair of pre-defined DOM variables, window and document, that give us access to objects representing the window and its contents.
The predefined document variable offers a finding method, getElementById, that we can use to locate objects that represent elements we are interested in interacting with. Here is a typical example. In the example page that I linked to above there is a text input field where the user can enter their name. The HTML code that sets up that element looks like
<input type="text" class="form-control" id="name" />
The most important thing to note here is the id attribute of the text input, name. We will use this id to locate the DOM object that represents this element. To locate and work with this object we start by declaring a variable that will store the object. We then ask the document object to locate the element via its finding method:
let nameField = document.getElementById('name');
Once we have access to the object that represents the text field we can use its value property to find out what the user typed into the text field:
let name = nameField.value;
Besides reading object properties, we can also use JavaScript code to set the value of an object property. The most common example of this is setting the text content of a paragraph or a span. In this lecture's example program I set up a paragraph near the bottom of the HTML page that will display the result of the computation. Initially that element looks like this:
<p id="result"></p>
Initially this paragraph is empty. After we run the JavaScript computation that constructs a message, we will insert some text content into this paragraph element. If we had the greeting message stored in a variable greeting we could use the following sequence to make that total appear in that paragraph:
let resultPar = document.getElementById('result');
resultPar.textContent = greeting;
The second statement above sets the text content property of the paragraph. As soon as we do that, that text will appear in the paragraph in the browser.
The last significant aspect of the DOM we will use in today's example is setting up a pair of event handlers. When the user interacts with some element in our page by, say, clicking on a button, the browser will generate an event. In our JavaScript we can express an interest in that event by setting up an event handler. An event handler is simply a function that we attach to some element. When the element generates that event the code in the event handler function runs, giving us an opportunity to respond to the event.
The classic example is responding to a button click event. Today's example contains a single button. The HTML code for that button looks like
<button class="btn btn-primary" id="greeting">Greet Me!</button>
Using some JavaScript code we can locate that button and attach an event handler function to it. That event handler function is the greetingHandler function defined in the JavaScript file. To attach that function to the button we do the following:
let greetingButton = document.getElementById('greeting');
greetingButton.addEventListener('click',greetingHandler,false);
Since elements in a page may potentially generate several different kinds of events, the first parameter to addEventListener is the type of event we want to handle (a click event for a button in this case). The second parameter is the name of the event handler function we want to run when the event happens. The third parameter sets an option for how to further handle the event after running the event handler: this parameter will almost always be set to false. (Should we ever need to specify a different value for this third parameter I will explain in greater detail what this parameter does.)
The example makes use of one other kind of event - the document load event. This is a event that browser will generate for us when the document has finished loading in the browser. By attaching an event handler to this event we can run additional set up code our application will need. To set up an event handler for the document load event we add the following line code to the bottom of our JavaScript code:
window.addEventListener('load',setup,false);
This statement uses the predefined DOM variable window and sets up the function named setup as the load event handler.
The setup function for this example does the one bit of additional initialization this example needs to do its work, locating the one button in the page and attaching a click event handler to it:
function setup() {
let greetingButton = document.getElementById('greeting');
greetingButton.addEventListener('click',greetingHandler,false);
}