Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
JavaScript DOM Example code Interactive Dynamic JavaScript
Rating: 4.5 out of 5(59 ratings)
4,838 students

JavaScript DOM Example code Interactive Dynamic JavaScript

Create Dynamic and Interactive web pages with JavaScript and the DOM
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • Write the basics of JavaScript
  • Add JavaScript to web pages and make them interactive
  • Select and manipulate elements

Course content

2 sections • 37 lectures • 1h 50m total length

  • DOM Course Introduction2:40
  • JavaScript DOM Dev Setup3:29
  • What is the DOM4:15
  • Source Code what is DOM
  • DOM Manipulation8:20

    Explore dom manipulation by selecting elements with querySelectorAll and querySelector, updating content and styles, and comparing innerHTML and innerText through hands-on examples.

  • Source Code DOM-Manipulation0:27
  • JavaScript DOM Selection7:00
  • Source Code JavaScript DOM Selection0:29
  • Element Text Manipulation5:47
  • Source Code Element Text Manipulation0:27
  • Change Classes DOM6:10
  • Source Code Change Class DOM0:11
  • Change Styles DOM6:08

    Select elements by class name, target the first node, and apply inline styles with element.style using properties like color, backgroundColor, fontSize, and display.

  • Source Code Change Styles DOM0:14
  • Element Attribute Manipulation7:08
  • Source code Element Attribute Manipulation0:13
  • Interactive DOM Events3:13

    Learn to make web pages interactive with JavaScript by selecting a list, attaching a click event listener, and updating the background color or logging clicks to the console.

  • Use DOM Select Multiple Elements5:36
  • Source Code Multiple Element Selection0:15
  • JavaScript DOM KeyPress Events5:03
  • Source Code eventKeyPress0:14
  • DOM Mouse Events2:42
  • Source code mouse events0:12
  • Create your own Elements5:04
  • Source Code create elements0:17
  • Event listeners to New elements3:42
  • Source Code Event listeners0:13
  • JavaScript DOM Create Dynamic List5:13

    Create dynamic elements with event listeners, toggling and removing them in the DOM. Build spans with an X, traverse to the parent, and append new elements on input enter.

  • List Project JavaScript DOM Input add new Element.3:38
  • Source Code List Project Source0:27
  • Bonus Adding Object Value2:41
  • Source Adding Values to the DOM0:29

Requirements

  • HTML and CSS
  • JavaScript Basics
  • Internet Access
  • Desire to learn about JavaScript

Description

Learn how to make web-pages Dynamic and Interactive using JavaScript to connect with the Document Object Model and influence and manipulate page elements.

The Document Object Model is a Massive object that represents your page elements and their attributes.  JavaScript can easily select objects within the DOM and use the content to change the display, add interactive events, update styling and a whole lot more.   JavaScript makes your webpage come to life.    JavaScript gives you the ability to open up that door and make amazing things happen on your website.  This course covers only the JavaScript Document Object Model and prior JavaScript knowledge is a prerequisite to this course.​

Packed with Source Code and Exercises so you can try the same code from the lessons!!!

Bonus 2 PDF ebooks also included containing information about Object in JavaScript and the DOM

Course covers

  • Selecting elements within the DOM

  • Manipulating element content and text output

  • Adding styling and classes using JavaScript

  • Event Listeners to add user interaction to your web content

  • Building and creating elements with JavaScript

  • Build an interactive list project from scratch

JavaScript is the technology that makes things happen online.  Learn how to create Dynamic and Interactive web pages applying JavaScript with the DOM. 

Taught by an instructor with over 20 years of web development experience, ready to help you learn and answer any questions you may have.

What are you waiting join now to start learning JavaScript Document Object Model, you have nothing to lose.

Who this course is for:

  • Anyone who wants to learn more about JavaScript
  • Web Developers
  • Front end application Developers
  • Anyone who wants to practice and learn how to make websites interactive

Report abuse