Learn how to make your HTML and CSS code interactive and dynamic.
About This Video
In Detail
The Document Object Model (DOM) is an object that contains a data representation of the page elements. The DOM is structured in a …
Learn how to make your HTML and CSS code interactive and dynamic.
About This Video
In Detail
The Document Object Model (DOM) is an object that contains a data representation of the page elements. The DOM is structured in a tree-like format, as objects that comprise the webpage and content of the HTML web document. Document Object Model (DOM) is a programming interface for HTML documents, that is, the logical structure of a page and how the page content can be accessed and manipulated.
The first part covers all the fundamentals to code JavaScript, with examples and coding challenges in each lesson. Explore how to get started with code and set up your developer environment. Create HTML files and connect your JavaScript to the page elements. Cover JavaScript coding best practices with tips and resources; how to set up and use variables within your code; different data types and how JavaScript manages the values; what functions are and how to use them in your code; and DOM and how JavaScript code can use the DOM to connect, update, and manipulate webpage elements.
The second part involves DOM webpage interaction with JavaScript. Learn how to create and delete elements with JavaScript code and learn about page event listeners. In the last section, you will learn to create interactive and dynamic web projects.
By the end of this course, you will learn how to use the DOM and develop skills in how to manipulate the DOM within your website.
Audience
This course is for anyone who wants to expand their knowledge of JavaScript and those who want to know more about DOM. This course can also be taken by JavaScript developers and HTML and CSS developers who want to learn about DOM
Previous JavaScript and HTML experience is a requirement as the contents of the course are to introduce the Document Object Model and how to connect JavaScript to the browser DOM.
Chapter 1 : Introduction to JavaScript and Interactive Webpage Content
Introduction
How to Create Dynamic Interactive Webpages with JavaScript
Getting Started on How to Start Coding with JavaScript
How to Code with JavaScript Adding JavaScript
JavaScript Code Tips and Learn How to Start with JavaScript
How to Use Variables in JavaScript
What Is JavaScript Dynamic Type Conversion and How It Works
Variable Naming Rules on How to Declare JavaScript Variables
Arrays and Objects in JavaScript Coding Examples
JavaScript Functions – How Functions Can Be Used in Code
JavaScript Document Object Model for Interactive Webpages
DOM Methods with JavaScript Select HTML Pages Elements
Logic Conditions with JavaScript if Statement Switch
Operators in JavaScript – How to Apply Operators
Ternary Operator JavaScript Short One Statement Conditions
Math Random Values JavaScript – Get Random Numbers
JavaScript for While and Do While Loops – Run Blocks of Code
JavaScript Objects – How to Use Objects in Code
Object Construction with JavaScript Coding
Common JavaScript Array Methods to Update Array Values
Looping Through Array Contents forEach Methods and For Loops for Array Data
Array Methods for Items Contained in the Array JavaScript Coding
Array Methods for Sorting Array Items Using JavaScript Random Array
JavaScript Array Method Examples to Find Array Items
JavaScript String Methods Common Functionality
Interactive Word Scramble Game with JavaScript Shuffle Letters in Strings
LocalStorage with JavaScript JSON Parse and Stringify of Objects
Chapter 2 : DOM Webpage Interaction with JavaScript
Introduction to JavaScript and the DOM
Introduction to JavaScript and the DOM How to Create Interactive Webpages
Creating and Deleting Elements with JavaScript Code
Lists Move Elements from Parent to Other Element Items Another List JavaScript
AddEventListeners OnLoad and DOM Loading Events in JavaScript
Form Select and Input Fields Values and Creation of Elements JavaScript Example
DOM Mouse and Keyboard Events Page Event Listeners Create Interactions
JavaScript RequestAnimationFrame Smooth Animations within the DOM Ball Bouncing
Chapter 3 : Interactive and Dynamic Web Projects with JavaScript Code DOM Examples
Introduction to Coding Projects Using JavaScript DOM Dynamic Webpages
Background Color Table Fun Create Table with JavaScript
Element Selector and Swap of Elements within the DOM JavaScript Code
JavaScript Dynamic Modal from Data Object Create Modals with Code
Page Clickers Create Dynamic Interactive Click Counters
Random Words Maker with JavaScript String Methods
Scrollbar Scroll Tracker Calculate the Scroll Position on the Page
Math Quiz and Start and Stop Counters with JavaScript
Dynamic Interactive JavaScript DOM Memory Game CSS Grid and Game Logic
Dynamic JavaScript Coin Flipping Game DOM Game Coding Challenge
JavaScript Battle Cards Game Using Array Methods