JavaScript DOM - Interactive and Dynamic Webpages

JavaScript DOM - Interactive and Dynamic Webpages

by Laurence Svekis
Released August 2022
Publisher(s): Packt Publishing
ISBN: 9781838559687

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

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.

What You Will Learn

  • Explore JavaScript code tips
  • Learn to declare JavaScript variables
  • Explore logic conditions with JavaScript
  • Learn to create elements with JavaScript code
  • Learn about page clickers and random words maker
  • Understand object construction with JavaScript

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.

About The Author

Laurence Svekis: Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world

Table of contents

  1. Chapter 1 : Introduction to JavaScript and Interactive Webpage Content
    1. Introduction
    2. How to Create Dynamic Interactive Webpages with JavaScript
    3. Getting Started on How to Start Coding with JavaScript
    4. How to Code with JavaScript Adding JavaScript
    5. JavaScript Code Tips and Learn How to Start with JavaScript
    6. How to Use Variables in JavaScript
    7. What Is JavaScript Dynamic Type Conversion and How It Works
    8. Variable Naming Rules on How to Declare JavaScript Variables
    9. Arrays and Objects in JavaScript Coding Examples
    10. JavaScript Functions – How Functions Can Be Used in Code
    11. JavaScript Document Object Model for Interactive Webpages
    12. DOM Methods with JavaScript Select HTML Pages Elements
    13. Logic Conditions with JavaScript if Statement Switch
    14. Operators in JavaScript – How to Apply Operators
    15. Ternary Operator JavaScript Short One Statement Conditions
    16. Math Random Values JavaScript – Get Random Numbers
    17. JavaScript for While and Do While Loops – Run Blocks of Code
    18. JavaScript Objects – How to Use Objects in Code
    19. Object Construction with JavaScript Coding
    20. Common JavaScript Array Methods to Update Array Values
    21. Looping Through Array Contents forEach Methods and For Loops for Array Data
    22. Array Methods for Items Contained in the Array JavaScript Coding
    23. Array Methods for Sorting Array Items Using JavaScript Random Array
    24. JavaScript Array Method Examples to Find Array Items
    25. JavaScript String Methods Common Functionality
    26. Interactive Word Scramble Game with JavaScript Shuffle Letters in Strings
    27. LocalStorage with JavaScript JSON Parse and Stringify of Objects
  2. Chapter 2 : DOM Webpage Interaction with JavaScript
    1. Introduction to JavaScript and the DOM
    2. Introduction to JavaScript and the DOM How to Create Interactive Webpages
    3. Creating and Deleting Elements with JavaScript Code
    4. Lists Move Elements from Parent to Other Element Items Another List JavaScript
    5. AddEventListeners OnLoad and DOM Loading Events in JavaScript
    6. Form Select and Input Fields Values and Creation of Elements JavaScript Example
    7. DOM Mouse and Keyboard Events Page Event Listeners Create Interactions
    8. JavaScript RequestAnimationFrame Smooth Animations within the DOM Ball Bouncing
  3. Chapter 3 : Interactive and Dynamic Web Projects with JavaScript Code DOM Examples
    1. Introduction to Coding Projects Using JavaScript DOM Dynamic Webpages
    2. Background Color Table Fun Create Table with JavaScript
    3. Element Selector and Swap of Elements within the DOM JavaScript Code
    4. JavaScript Dynamic Modal from Data Object Create Modals with Code
    5. Page Clickers Create Dynamic Interactive Click Counters
    6. Random Words Maker with JavaScript String Methods
    7. Scrollbar Scroll Tracker Calculate the Scroll Position on the Page
    8. Math Quiz and Start and Stop Counters with JavaScript
    9. Dynamic Interactive JavaScript DOM Memory Game CSS Grid and Game Logic
    10. Dynamic JavaScript Coin Flipping Game DOM Game Coding Challenge
    11. JavaScript Battle Cards Game Using Array Methods

Product information

  • Title: JavaScript DOM - Interactive and Dynamic Webpages
  • Author(s): Laurence Svekis
  • Release date: August 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781838559687