11/28/24, 5:00 PM DOM and Asynchronous Programming with JavaScript - Launch School

(/) MENU

Pedagogy  (/pedagogy) Salaries (/results)

Overview (/pedagogy) Mastery-based Learning (/mastery)

Free Classes  (/smooth-start)

Smooth Start (/smooth-start) Prep Live (/prep-live) Core Live (/core-live) Workshops (/workshops) Prep Courses (/prep-courses)

Community (/community)

For Students  (/is_this_for_me)

Deferred Payment (/deferred) Is This For Me? (/is_this_for_me) Common Questions (/faq) Core Curriculum (/courses)

Capstone (/capstone)

 (/love)

Sign In (/sign_in) Sign Up (/sign_up)

 BACK TO THE CURRICULUM (/COURSES)

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 (/curriculum/courses/1dbae9eb)

OR
LS220d Introduction to Data Structures and Algorithms (/curriculum/courses/9622ca85)

https://launchschool.com/curriculum/courses/a3843755 1/3
11/28/24, 5:00 PM DOM and Asynchronous Programming with JavaScript - Launch School
Course No. Name

OR
LS221 Assessment: Data Structures and Algorithms (/curriculum/courses/5bc500cb)

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
https://launchschool.com/curriculum/courses/a3843755 2/3
11/28/24, 5:00 PM DOM and Asynchronous Programming with JavaScript - Launch School
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

Medium Publication (https://medium.com/launch-school) Open Bookshelf (/books) Podcast (https://podcast.launchschool.com)

Shop (https://shop.launchschool.com)

  (https://www.facebook.com/launchschoolonline/) (https://twitter.com/launchschool)
© Copyright 2024 Launch School - All Rights Reserved.
[email protected] (mailto:[email protected])

https://launchschool.com/curriculum/courses/a3843755 3/3