About this Course

JavaScript is an extremely powerful programming language. One place where its power truly shines is using it to control a web page. Through this course, you'll learn about the Document Object Model (DOM), how it's created, and what capabilities it provides. Then you'll use JavaScript and the DOM to add, delete, or alter page content; control page styling, and respond to user actions.

Course Cost
Free
Timeline
Approx. 4 weeks
Skill Level
Intermediate
Included in Course
  • Rich Learning Content

  • Interactive Quizzes

  • Taught by Industry Pros

  • Self-Paced Learning

  • Student Support Community

Join the Path to Greatness

This free course is your first step towards a new career with the Front-End Web Developer Nanodegree Program.

Free Course

JavaScript and the DOM

Enhance your skill set and boost your hirability through innovative, independent learning.

Icon steps

Course Leads

  • Richard Kalehoff
    Richard Kalehoff

    Instructor

What You Will Learn

Lesson 1: The Document Object Model

  • Learn how the DOM is constructed
  • Use DOM methods to select page elements
  • Figure out where an Element's properties come from

Lesson 2: Creating Content with JavaScript

  • Use DOM and JavaScript to add new content to the page
  • Learn DOM and JavaScript to remove page content
  • Use DOM and JavaScript to style page elements

Lesson 3: Working with Browser Events

  • Discover the hidden world of browser events
  • Use DOM and JavaScript to respond to specific events
  • Learn when the web page is ready to be modified and controlled

Lesson 4: Performance

  • Learn how to measure the speed of your DOM and JavaScript code
  • Identify code that causes Reflow and Repaint issues
  • Explain how the JavaScript Event Loop works

Prerequisites and Requirements

Students should have experience with the following skills:

  • building a website with HTML
  • styling page elements with CSS
    • specifically, selecting elements by ID, class, or tag
  • using the JavaScript data types (e.g. strings, arrays, object, functions, etc.)
  • looping through data (e.g. the for loop)

These skills are covered in the following courses:

See the technology requirements for using Udacity.

See the Technology Requirements for using Udacity.

Why Take This Course

HTML provides the structure for a site. CSS provides the styling. JavaScript (and the DOM) provides the interactivity for a site. Without JavaScript and the DOM, a site is static. The web is alive and shouldn't be shackled by a non-interactive page!

Are you interested in learning how to programmatically add new content to a page? Do you want to dynamically change the styling of an element, respond to a form submission by displaying a message to the user, or learn how to measure the performance of your code? If you said, "Yes!" to any of these, then this course is for you!

What do I get?
  • Instructor videos
  • Learn by doing exercises
  • Taught by industry professionals
Icon globe

Udacity 现已提供中文版本! A Udacity tem uma página em português para você! There's a local version of Udacity for you! Sprechen Sie Deutsch?

Besuchen Sie de.udacity.com und entdecken Sie lokale Angebote, unsere Partnerunternehmen und Udacitys deutschsprachigen Blog.

前往优达学城中文网站 Ir para a página brasileira Go to Indian Site Icon flag de Zu de.udacity.com continue in English