JavaScript DOM - Interactive and Dynamic Web Pages

JavaScript DOM - Interactive and Dynamic Web Pages

Instructor: Packt - Course Instructors

What you'll learn

Identify and recall the basic structure and elements of the DOM
Explain how JavaScript can be used to manipulate DOM elements and attributes.
Demonstrate the ability to dynamically update content on a webpage using JavaScript.
Break down complex web interactions into manageable JavaScript functions and DOM manipulations.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

1 assignment

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

There are 3 modules in this course

In this comprehensive course, you will embark on a journey to master JavaScript and its powerful DOM manipulation capabilities. Starting with the fundamentals, you'll understand how JavaScript integrates with HTML to create interactive webpage content. Through a series of progressively challenging modules, you will learn how to manipulate DOM elements, respond to user inputs, and dynamically update web pages without the need to refresh the browser.

As you advance, the course delves deeper into the practical applications of JavaScript DOM. You'll explore various techniques to interact with webpage elements, manage events, and implement animations. Each section is designed to build on the previous one, ensuring a cohesive learning experience that reinforces your understanding through hands-on examples and projects. By the end of this course, you will have the confidence and skills to create fully interactive and dynamic web projects. You'll be able to apply what you've learned to real-world scenarios, making your web pages more engaging and user-friendly. This course is perfect for anyone looking to advance their web development skills and make their websites stand out. This course is designed for aspiring web developers and designers who have a basic understanding of HTML and CSS. No prior JavaScript knowledge is required, although familiarity with basic programming concepts will be beneficial.

In this module, we will introduce the fundamentals of JavaScript and its role in creating interactive webpage content. You will learn how to get started with coding in JavaScript, including variables, arrays, objects, and functions, as well as how to manipulate the Document Object Model (DOM) to enhance web page interactivity.

What's included

27 videos

27 videosTotal 285 minutes

Introduction1 minutePreview module
How to Create Dynamic Interactive Webpages with JavaScript2 minutes
Getting Started on How to Start Coding with JavaScript5 minutes
How to Code with JavaScript Adding JavaScript9 minutes
JavaScript Code Tips and Learn How to Start with JavaScript9 minutes
How to Use Variables in JavaScript13 minutes
What Is JavaScript Dynamic Type Conversion and How It Works8 minutes
Variable Naming Rules on How to Declare JavaScript Variables3 minutes
Arrays and Objects in JavaScript Coding Examples9 minutes
JavaScript Functions – How Functions Can Be Used in Code12 minutes
JavaScript Document Object Model for Interactive Webpages11 minutes
DOM Methods with JavaScript Select HTML Pages Elements10 minutes
Logic Conditions with JavaScript if Statement Switch17 minutes
Operators in JavaScript – How to Apply Operators14 minutes
Ternary Operator JavaScript Short One Statement Conditions7 minutes
Math Random Values JavaScript – Get Random Numbers15 minutes
JavaScript for While and Do While Loops – Run Blocks of Code7 minutes
JavaScript Objects – How to Use Objects in Code16 minutes
Object Construction with JavaScript Coding4 minutes
Common JavaScript Array Methods to Update Array Values16 minutes
Looping Through Array Contents forEach Methods and For Loops for Array Data11 minutes
Array Methods for Items Contained in the Array JavaScript Coding13 minutes
Array Methods for Sorting Array Items Using JavaScript Random Array9 minutes
JavaScript Array Method Examples to Find Array Items12 minutes
JavaScript String Methods Common Functionality14 minutes
Interactive Word Scramble Game with JavaScript Shuffle Letters in Strings13 minutes
LocalStorage with JavaScript JSON Parse and Stringify of Objects11 minutes

In this module, we will delve into the interaction between JavaScript and the DOM, focusing on how to create and manipulate HTML elements dynamically. You will learn to add event listeners, manage form inputs, and respond to mouse and keyboard events, making your web pages more interactive.

What's included

8 videos

8 videosTotal 145 minutes

Introduction to JavaScript and the DOM1 minutePreview module
Introduction to JavaScript and the DOM How to Create Interactive Webpages15 minutes
Creating and Deleting Elements with JavaScript Code19 minutes
Lists Move Elements from Parent to Other Element Items Another List JavaScript20 minutes
AddEventListeners and DOM Loading Events in JavaScript18 minutes
Form Select and Input Fields Values and Creation of Elements JavaScript Example26 minutes
DOM Mouse and Keyboard Events Page Event Listeners Create Interactions21 minutes
JavaScript RequestAnimationFrame Smooth Animations within the DOM Ball Bouncing20 minutes

In this module, we will work on hands-on projects that utilize JavaScript and the DOM to create interactive and dynamic web pages. You will build various applications, such as games and dynamic content displays, to solidify your understanding and application of JavaScript in practical scenarios.

What's included

11 videos1 assignment

11 videosTotal 308 minutes

Introduction to Coding Projects Using JavaScript DOM Dynamic Webpages4 minutesPreview module
Background Color Table Fun Create Table with JavaScript27 minutes
Element Selector and Swap of Elements within the DOM JavaScript Code11 minutes
JavaScript Dynamic Modal from Data Object Create Modals with Code29 minutes
Page Clickers Create Dynamic Interactive Click Counters23 minutes
Random Words Maker with JavaScript String Methods19 minutes
Scrollbar Scroll Tracker Calculate the Scroll Position on the Page21 minutes
Math Quiz and Start and Stop Counters with JavaScript32 minutes
Dynamic Interactive JavaScript DOM Memory Game CSS Grid and Game Logic40 minutes
Dynamic JavaScript Coin Flipping Game DOM Game Coding Challenge42 minutes
JavaScript Battle Cards Game Using Array Methods55 minutes