Back to the curriculum

DOM and Asynchronous Programming with JavaScript

Summary

In this course, we'll begin to draw from what we’ve mastered in the HTML/CSS course and the JavaScript courses and learn how to add behavior to our user interfaces with JavaScript. We’ll start by learning about the DOM and how it lets developers change a document. In the lessons that follow, we’ll see how to update the interface in response to actions triggered by the user or the browser. We’ll also explore XMLHttpRequest, one of the browser APIs that provide network programming functionality to JavaScript applications. We'll also learn about asynchronous JavaScript, as well as how we can leverage third party libraries, such as jQuery to simplify certain aspects of front-end development. Finally, we'll pull all of those topics together to work on a number of projects.

Phase

Front-end Development

Prerequisites

Course No. Name
JS229 Assessment: Object Oriented JavaScript
OR
LS220d Introduction to Data Structures and Algorithms
OR
LS221 Assessment: Data Structures and Algorithms

Detailed Syllabus

The DOM

  • The Document Object Model (DOM)
  • A Hierarchy of Nodes
  • Node Properties
  • Determining the Type of a Node
  • Inheritance and Finding Documentation
  • Traversing Nodes
  • Element Attributes
  • Practice Problems: Traversing and Accessing Attributes
  • Finding DOM Nodes
  • Traversing Elements
  • Practice Problems: Finding Nodes and Traversing Elements
  • Creating and Moving DOM Nodes
  • The Browser Object Model (BOM)
  • Practice Problems: The DOM
  • Assignment: DOM Shuffling

Event-Driven and Asynchronous Programming

  • Asynchronous Execution with setTimeout
  • Repeating Execution with setInterval
  • User Interfaces and Events
  • A Simple Example
  • Page Lifecycle Events
  • User Events
  • Adding Event Listeners
  • The Event Object
  • Capturing and Bubbling
  • Preventing Propagation and Default Behaviors
  • Event Delegation
  • What is the Event Loop?
  • Assignment: Guessing Game
  • Assignment: Build an Input Box
  • Promises and Async/Await
  • Practice Problems: Promises and Async/Await
  • Douglas Crockford: An Inconvenient API

Making HTTP Requests from JavaScript

  • HTTP Review
  • Book: Working with Web APIs
  • Network Programming in JavaScript
  • Making a Request with XMLHttpRequest
  • XMLHttpRequest Events
  • Data Serialization
  • Example: Loading HTML via XHR
  • Example: Submitting a Form via XHR
  • Example: Loading JSON via XHR
  • Example: Sending JSON via XHR
  • Cross-Domain XMLHttpRequests with CORS
  • Project: Search Autocomplete, Part 1 - Introduction and Setup
  • Project: Search Autocomplete, Part 2 - Setting up the UI
  • Project: Search Autocomplete, Part 3 - Talking to the server
  • Project: Search Autocomplete, Part 4 - Improving User Experience
  • Project: Search Autocomplete, Part 5 - Throttling XHR requests

JavaScript Libraries

  • Douglas Crockford Lecture: The Metamorphosis of Ajax
  • Reading Documentation
  • jQuery
  • Read: jQuery DOM Traversal
  • Practice Problems: Using jQuery Selectors
  • Read: jQuery Events
  • Practice Problems: jQuery Events
  • HTML Templating With JavaScript
  • Practice Problems: Handlebars Basics
  • Assignment: Managing Collections in JavaScript with Handlebars
  • AJAX Requests

Putting it All Together

  • Chrome Debugging Tools for Front End Development
  • HTML Data Attributes
  • Assignment: Arithmetic Calculator
  • Assignment: Grocery List
  • Project: Guess a Word, Part 1: Core Functions
  • Project: Guess a Word, Part 2: Event Handling and Game Play
  • Project: Photo Gallery - Introduction and Server Setup
  • Project: Photo Gallery, Part 1 - Fetch Data and Render on Page Load
  • Project: Photo Gallery, Part 2 - Slide Show
  • Project: Photo Gallery, Part 3 - Like, Favorite and Comment