Back to course 'PRDV401: Introduction to JavaScript I'

Topic outline

  • Unit 6: Objects, the DOM, and Best Practices

    Collapse all Expand all

    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

      • book icon
        Data Structures: Arrays and Objects Book
        Students must
        Mark as done

        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.
      • page icon
        Example in Action: Storing and Accessing Objects with JavaScript Page
        Students must
        Mark as done

        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).

      • book icon
        Practice: Exploring Objects Using JavaScript Book
        Students must
        Mark as done

        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)

      • book icon
        Introduction to the DOM Book
        Students must
        Mark as done

        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.

      • book icon
        The DOM and JavaScript Book
        Students must
        Mark as done

        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.

      • book icon
        Practice: Inspecting DOM "Elements" using the Developer Console Book
        Students must
        Mark as done

        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:

        1. Collapse the left navigation pane on this page by selecting the hamburger menu icon on the top left.
        2. Next, you'll inspect the DOM elements on this page by displaying the Developer Console in your browser. 
        3. The sequence is ctrl+shift+J on Windows and cmd+option+J on the Mac.
        4. 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.

      • book icon
        Practice: Using JavaScript and the DOM to Output Data to a Webpage Book
        Students must
        Mark as done

        In this exercise, we'll use JavaScript to output data to a webpage using the write method on a document object. First, read this article that describes document.write(). The article also describes two other methods we've used in this course: console.log() and alert(). This exercise does not count towards your grade. It is just for practice!

    • 6.3: JavaScript Best Practices

      • book icon
        JavaScript Best Practices Book
        Students must
        Mark as done

        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.

      • page icon
        Common Mistakes in Your Code Page
        Students must
        Mark as done

        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.

      • book icon
        Using Strict Mode Book
        Students must
        Mark as done

        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.

      • page icon
        Example in Action: Exception Handling Page
        Students must
        Mark as done

        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

      • book icon
        Course Review Book
        Students must
        Mark as done

        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.

      • book icon
        Project: Guess The Number Game Book
        Students must
        Mark as done

        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

      • quiz icon
        Unit 6 Assessment Quiz
        Students must
        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.