JavaScript & the DOM

Course

Expand your understanding of JavaScript syntax and learn about how we can programmatically interact with the DOM. By the end of this course, you'll be able to create or revise content and interact with browser events. In the project, you will build a landing page that combines your skills with JavaScript, HTML, and CSS to update and control the page and create a dynamic user experience.

Intermediate
3 weeks
Last Updated August 22, 2023

Skills you'll learn:

Dom eventsWebsite performance optimization

Prerequisites:

Basic JavaScript

Intermediate

3 weeks

Last Updated August 22, 2023

Skills you'll learn:

Dom events • Website performance optimization • Dom manipulation • JavaScript data structures

Prerequisites:

Basic JavaScript

Course Lessons

Lesson 1

Introduction to JavaScript & the DOM

In this lesson you'll get a preview of what you will learn in this course as you continue on your JavaScript journey. You'll also get a sneak peek at the project you'll build at the end of the course.

Lesson 2

JavaScript Syntax

With this major update to the JavaScript language, a number of syntax improvements have been added. In this lesson, you'll learn to improve your JavaScript code with these syntax updates.

Lesson 3

The Document Object Model

The Document Object Model (DOM) allows developers to interact with and control the rendered page. You'll learn how the DOM is formed, what Nodes and Elements are, and how to select items from the DOM.

Lesson 4

Creating Content with JavaScript

Static is boring, so we'll use JavaScript and DOM methods to create new page content, update existing content, and delete content. You'll also learn how to check and set the styling of page elements.

Lesson 5

Working with Browser Events

Hundreds of events fire every time you interact with a page. Learn what an event is, how to listen for an event and respond to it, what data is included with an event, and the phases of an event.

Lesson 6

Performance

Learn how to measure the code you write to make sure it's performing efficiently and how reflow and repaint affect performance. Learn how to harness the JavaScript Event loop for performance gains.

Lesson 7 • Project

Landing Page

Build a landing page that uses JavaScript to create an interactive navigational experience for the user.

Taught By The Best

Richard Kalehoff

Instructor

Richard is a Course Developer with a passion for teaching. He has a degree in computer science, and first worked for a nonprofit doing everything from front end web development, to backend programming, to database and server management.

The Udacity Difference

Combine technology training for employees with industry experts, mentors, and projects, for critical thinking that pushes innovation. Our proven upskilling system goes after success—relentlessly.

Demonstrate proficiency with practical projects

Projects are based on real-world scenarios and challenges, allowing you to apply the skills you learn to practical situations, while giving you real hands-on experience.

Gain proven experience
Retain knowledge longer
Apply new skills immediately

Top-tier services to ensure learner success

Reviewers provide timely and constructive feedback on your project submissions, highlighting areas of improvement and offering practical tips to enhance your work.