JavaScript and the DOM

Overview

Dive into the essentials of JavaScript and its powerful relationship with the Document Object Model (DOM). This course covers fundamental JavaScript syntax, enabling you to manipulate web content dynamically. You'll explore how to create content and respond to browser events, enhancing user interactions on your site. Performance optimization techniques will help you write efficient code. In the final project, you’ll apply all of your learned concepts to develop a fully functional web project, showcasing your ability to merge JavaScript with HTML and CSS for a seamless user interface.

Syllabus

Javascript Syntax

With the latest updates 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.

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.

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.

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.

Asynchronous JavaScript and Performance

Learn about JavaScript's asynchronous operations, event loop, API interactions with Fetch and Promises, and use async/await for efficient, non-blocking code execution.

Project: A Personal Portfolio

In this project, you will simulate DOM manipulation using JavaScript, applying course concepts and research skills to build a strong foundation for dynamic web development and problem-solving.