DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites [Video]

Book Image

DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites [Video]

By : SkillZone .

Book Image

DOM 2023 - Using the DOM and JavaScript to Build Dynamic Websites [Video]

By: SkillZone .

Overview of this book

In the first half of the course, we will cover everything you need to start coding dynamic sites by yourself. It gives you the sound fundamentals and essential practical regarding the DOM. You will emerge from part 1 with a basic understanding and practical experience. It will take you to the point where you will understand what the DOM is, why we need it, how to access it, where to find it, and how to manipulate it. By the end of part 1, you will have learned about front-end web development by mastering the Document Object Model. The second half of the course provides a whole different world of fun with amazing practical examples that will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end web development. By the end of part 2, you will have learned more about front-end web development by working with events in the Document Object Model. By the end of this course, you will be able to “speak” and “walk” DOM by gaining an understanding of how you can manipulate it in meaningful and practical ways. All the resources for this course are available at https://github.com/PacktPublishing/DOM-2022---Using-the-DOM-and-JavaScript-to-Build-Dynamic-Websites

Free Chapter

Part 1 - Introduction

Welcome to the Course

Everything Is an Object

Building Our Own Simple Page

DOM Hierarchy Conclusion

What Is the BOM?

DOM Versus JavaScript Versus Python

The DOM Is not the Same as Your HTML

The DOM Is not What You See in the Browser

The DOM Is not What You See in DevTools

Pseudo Elements

Summary: What Is the DOM?

What Can We Do with the DOM?

Quick Example of Changing the DOM

Part 1 - JavaScript Versus DOM

What Is the DOM API?

JavaScript Lives in Different Environments

Let's Build a setTimeout() Function

setTimeout - JavaScript Versus DOM

The DOM Was not Solely for JavaScript

Part 1 - Accessing the DOM

Section Introduction

Accessing the DOM - Introduction

Understanding Your HTML

Let's Build Our Page for this Section

getElementById()

getElementById() Recap

getElementsByClassName()

Test: Introduction

Test: Building Our Test Code

getElementsByTagName()

querySelector - Introduction

querySelector - Practical Example

Part 1 - Nodes

Nodes - Section Introduction

Nodes - Introduction

Nodes in Action

childNodes - How Do We See Nodes?

Creating Different Nodes

What Are the Different Types of Nodes?

Node - Family Tree

Identifying Nodes

HTMLCollection Versus NodeList

Live Versus Static lists

Part 1 - Traversing the DOM

Section Introduction

Traversing the DOM - Introduction

Building Our Section Page Together

Why Do We Need to Traverse the DOM?

The Three Most Important Objects in the DOM

Parent, Child, and Siblings - A Quick Introduction

Siblings in the DOM

firstChild, lastChild, and Children - Introduction

firstChild, lastChild, and Children - Practical Example

Children Property

childNode Versus Children - What Are the Differences?

Test - Node Types

Test - Solution

Siblings - A Quick Word

Working with Sibling Methods

Summary of Traversing the DOM

Part 1 - Creating, Removing, and Cloning DOM Elements

Section Introduction

Static Versus Dynamic Websites

How Do You Create Elements

Document Versus Document

Understanding the createElement() Method

Let's Attach Our Element to the DOM

Using the textContent Property to Add Text to Our Newly Created Element

How Does appendChild Work?

insertBefore() Method

Is There an insertAfter() Method?

Let's Trick the insertBefore() Method

How to Remove Elements

It's Time to Clone

Clone Example Using setInterval()

Let's Analyze Our Clone Code

Test Your Skills

Test - Solution

Part 1 - Where to Next?

Part 2 - Introduction to Events

Introduction - What Is an Event

The Two Most Important Things When It Comes to Events

Inline Event Listeners - Brief Introduction

Inline Properties - Brief Introduction

addEventListener() Method - Brief Introduction

Summary - the Three Ways to Add an Event Listener to HTML Elements

A Quick Word on Events

Inline Event Listeners - Detailed Overview

Inline Event Listeners - Test Introduction (Part 1 of 3)

Inline Event Listeners - Test Setup (Part 2 of 3)

Inline Event Listeners - Test Solution (Part 3 of 3)

Inline Properties - Detailed Overview

Inline Properties - Test Introduction (Part 1 of 3)

Inline Properties - Test Setup (Part 2 of 3)

Inline Properties - Test Solution (Part 3 of 3)

addEventListener() Method - Detailed Overview

Callback Functions - A Quick Overview

addEventListener - Test Introduction (Part 1 of 3)

addEventListener - Test Setup (Part 2 of 3)

addEventListener - Test Solution (Part 3 of 3)

Extra Lecture - Three Ways to Define a Color

Extra Lecture - Digits, Bytes, and Hexadecimal Format

Extra Lecture - toString() Method

Part 2 - Different Types of Events

Section Introduction

Quick Click Event Example - Part 1 of 2

Quick Click Event Example - Part 2 of 2

Keydown Event - Example

Form Events - Introduction

Overview of What Form We Will Build

Form: Building Our Page - HTML + CSS

How to Find Forms and Its Default Behavior

Input Event, Focus Event, and Copy/Paste Events

Touch and Window Events

Part 2 - Event Challenges

Challenge 1 - Introduction

Challenge 1 - Click Image and Display Text

Challenge 2 - Introduction

Challenge 2 - Reveal Text When Mouse Moves over Image

Challenge 2 - Create a Black Dot When Mouse Moves over Image

Challenge 2 - Dynamic Dot Movement and Complete Solution

Challenge 3 - Mustache

Challenge 3 - Placing a Mustache on an Image

Part 2 - Object and Node Hierarchy

Section Introduction

JS objects Versus DOM Objects in the Console

Host Versus Native Objects

The Importance of Understanding Inheritance

Finding the createElement() Method

Element Node - Object Hierarchy

Quick Recap on Object Hierarchy

What Is DOM Extension?

Adding Our Own DOM Extension - Practical Example

Are DOM Extensions a Good Thing?

The Problems with DOM Extensions Are ...

Part 2 - Capturing and Bubbling

Section Introduction

An Event Is not an Isolated Occurrence

The Two Phases of an Event - Capturing and Bubbling

How to Listen to an Event During the Capturing Phase

Example - Let's Listen to an Event During Both Phases

Example - Capturing and Bubbling Using the for... of Loop

Who Cares about Capturing Versus Bubbling?

How to Stop Event Capturing and Event Bubbling?

Example of stopPropagation()

Part 2 - Event Delegation and Challenges

Event Delegation Introduction

Box Challenge - Introduction

Box Challenge - Build

Box Challenge - Solution

What Is the classList Property?

Box Challenge - Perfecting Our Solution

Quote Challenge - Introduction

Quote Challenge - Build

Quote Challenge - Solution

List Challenge - Introduction

List Challenge - Build

List Challenge - Solution

Part 2 - Website Project - A Shopping List

What Are We Going to Build?

High-Level Overview of the Website Structure

Building Our Website HTML

Coding the CSS for the Header

Coding the CSS for the Form and List Section

DOM Access Methods, the forEach Method, and Nodes - Quick Recap

Removing Items - The Old-School Way

Removing Items - Using Event Bubbling and Event Delegation

Introduction to Dealing with Forms

Default Behavior with Forms and How to Prevent Default Behavior

Adding Items to Our List - Creating Elements Dynamically

Adding Items to Our List - Adding Classes with the classList API

Hiding and Un-Hiding Our Shopping List

Recap of the Different Event Listeners We Have Already Dealt With

Accessing an <input> within a <form> Element

What Is the toLowerCase() Method?

Accessing our <li> Tags and Introduction to the Array.from() Method

Introduction to the Array.from() Method

How Does Array.from() Work - Some Practical Examples

Using forEach() to Loop Through Our Groceries Array

Introduction to indexOf()

Using indexOf() Method with Arrays

Using indexOf() Method with Strings

Finishing Off Our Search Functionality

Improvement: Clear the <input>Text When the User Clicks a Button

Improvement: Let's Add Tabs

Improvement: Building Our Tabs (HTML + CSS)

What is the data* Attribute?

Using the classList API to Add Dynamic Classes to Our Heading Tabs

Improvement: Showing and Hiding Our Panels When the Heading Tab Is Clicked

Improvement: Adding a Button for Our Answer

Part 2 - Outro

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Chapter 3

Part 1 - Accessing the DOM

Content Locked

Section 13

querySelector - Practical Example

Actions speak louder than words, so this lecture takes a look at how we can use the querySelector to access items in our DOM.