Unit 6: Objects, the DOM, and Best Practices
This unit introduces objects. JavaScript objects and events with the HTML DOM (Document Object Model) give the programmer much POWER. DOM elements hold multiple values in properties. This unit also covers error handling and following best practices when developing programs. In addition, you will develop a small JavaScript application in the final practice exercise.
Completing this unit should take you approximately 4 hours.
Upon successful completion of this unit, you will be able to:
- identify properties of objects;
- explain the tree of the DOM (Document Object Model);
- create code that uses objects;
- model best practices;
- explain the use of exception handling; and
- develop real-world examples using JavaScript.
6.1: JavaScript Objects
In Unit 3, you learned about JavaScript primitive data types such as strings, numbers, and Booleans. In addition, this unit introduces the "array" and "object" data types.
Why use objects?
- Objects are an essential data type of JavaScript, and learning how to use them is necessary to develop applications.
- Objects help programmers write reusable code for real-world objects.
- Objects are dynamic; you can create, add, and delete them.
This video shows how objects store data and how to access the properties of an object (such as height or weight) using dot (
.) notation. Remember that objects start with curly brackets { } and are given a name (such as car, house, or triangle).In this section, you'll use JavaScript to create a "person" object. The code can be run in any browser and uses the Developer Console. This practice exercise does not count towards your grade. It is just for practice!
Here are the contents of the file:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>Object-oriented JavaScript example</title>
</head>
<body>
<p>This example requires you to enter commands in your browser's JavaScript console
(see What are browser developer tools for more information).</p>
</body>
<script>
</script>
</html>
6.2: The DOM (Document Object Model)
The power of JavaScript is its use in dynamically displaying and manipulating elements on a webpage written in HTML. We know that an HTML page consists of elements such as <head><body> <h1> tags or text fields and buttons. The DOM or Document Object Model represents the structure of these elements as a "tree" data structure after your web browser reads a page. The DOM Application Programming Interface (API) contains methods that provide JavaScript access to these elements. Start by reading this article to learn about the document structure of the DOM and how to find, create and change elements.
We'll dive deeper into the DOM by discussing DOM data types and the properties and methods used to access DOM elements using JavaScript.
Read this article and locate the methods used with the "window" and "document" objects. For example, when a program uses an alert, it uses the "window.alert" method. JavaScript uses the "window.onload" method when a page is loaded. When a user clicks an element on a page, the "onclick" method is called. Remember that calling a method for an object uses dot (.) notation.
As we continue to look at the DOM, this article contains an interactive tutorial to show how to view and interact with the DOM using the Developer Console. We are using the Chrome browser, but it will work the same in other browsers. This exercise does not count towards your grade. It is just for practice!
Before starting this tutorial:
- Collapse the left navigation pane on this page by selecting the
icon on the top left. - Next, you'll inspect the DOM elements on this page by displaying the Developer Console in your browser.
- The sequence is ctrl+shift+J on Windows and cmd+option+J on the Mac.
- Finally, select the Elements tab.
The tutorial demonstrates how to inspect the <ul> and <li> elements on the page, navigate the DOM tree using the keyboard, and inspect the properties of DOM objects. Close the Dev Console when you are finished with the tutorial.
- Collapse the left navigation pane on this page by selecting the
In this exercise, we'll use JavaScript to output data to a webpage using the
writemethod on adocumentobject. First, read this article that describesdocument.write(). The article also describes two other methods we've used in this course:console.log()andalert(). This exercise does not count towards your grade. It is just for practice!
6.3: JavaScript Best Practices
We've covered several introductory concepts for JavaScript programming in this course and how to debug your code. We'll review some coding guidelines and best practices you'll use as a JavaScript developer to ensure consistency, readability, security, and accessibility. Read this article to learn about some of the best practices for developing programs.
Review this section to see how to avoid common mistakes when writing your code, such as spelling errors or not calling a function. Remember that some of the errors can be found and fixed using a linter program, as we discussed in Unit 2.
This article describes using "strict mode" in JavaScript programs. Strict mode helps developers to avoid errors and write cleaner code. For example, an undeclared variable will cause an error in strict mode. Note that not all browsers support this functionality.
Exception handling is responding to unexpected errors in your program, which is a best practice. For example, if a program expects to open a file and the file is missing. The program should contain an "exception handler" to process this error (such as by sending an error message to the console). Exception handling is essential because the program continues running once the exception code executes. JavaScript has a "try...catch" statement that performs error handling. This video shows how to add exception handling to your applications. Looking at some of the applications on the web, which do you think would benefit from exception handling?
6.4: Final Practice Exercises
Congratulations! You've finished the course and have mastered the beginning concepts. We've covered a lot of material, and now it's time for two final practice exercises where you will see how to use JavaScript to solve real-world problems. The first exercise reviews "assignment", "declaration", and "conditional statements" like if/else and switch, and "comparison" and "logical" operators using interactive examples.
Now you've learned something about the theory of JavaScript and what you can do with it, we will give you an idea of what the process of creating a simple JavaScript application is like by guiding you through a practical tutorial. In the last practice exercise, you'll build up a simple Guess the Number game step by step. The game uses "variables", "conditionals", "functions", "events", and "loops".
It is essential to practice "reading" a lot of code and running it when learning a new language. In addition, reading well-written code helps you write well-structured code. Don't worry about knowing events and built-in objects such as Math; we'll cover them in more detail in another course. This is a practice exercise, and if you can't get the game to work, check it against the source code.
Study Session Review Video
Unit 6 Assessment
- Receive a grade
Take this assessment to see how well you understood this unit.
- This assessment does not count towards your grade. It is just for practice!
- You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
- You can take this assessment as many times as you want, whenever you want.