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 Course Dynamic Interactive webpages beginners
Rating: 4.4 out of 5(65 ratings)
5,422 students

JavaScript DOM Course Dynamic Interactive webpages beginners

Learn to create Dynamic and Interactive web pages using JavaScript. JavaScript Document Object Model - For Beginners
Created byLaurence Svekis
Last updated 11/2024
English

What you'll learn

  • How to apply JavaScript
  • Use of JavaScript
  • Making web pages interactive
  • How to make website dynamic

Course content

2 sections • 55 lectures • 2h 32m total length

  • Introduction to JavaScript DOM course4:48

    Explore the document object model with JavaScript to select elements using querySelector and querySelectorAll, update content and attributes, and create new elements for dynamic web pages.

  • Resource Guide0:11
  • Setup Developer Environment2:13
  • create an index page5:03

    Create an index page and link it to a JavaScript file, learning HTML structure, DOM basics, and using document.write, getElementById, and console logs to manipulate content and console output.

  • Script file JS1:59
  • Source Code0:05
  • Console Log Options5:00
  • Source Code0:05
  • JS Document Object.6:03
  • Source Code for html index page that can be used as a sample webpage1:14
  • Selecting Elements4:58
  • Source Code0:01
  • Selection by tag5:21

    Explore selecting and manipulating page elements with the document object model, using query selector and get elements by tag name to update text content across single and multiple elements.

  • Source Code0:05
  • querySelector3:53
  • Source Code0:03
  • querySelectorAll5:00
  • Source Code0:06
  • Complex CSS querySelectorAll.5:44
  • Source Code0:06
  • Update Images3:11
  • Source Code0:04
  • ChildNodes Children and more9:09
  • Source Code0:07
  • Element Style Update3:42
  • Multi Element Style Update.3:56
  • Source Code0:06
  • Add Classes to Elements7:35
  • Source Code0:05
  • Set Attribute.2:29

    Learn how to select a button with querySelector, set and remove attributes like id, log attribute values to the console, and observe how removing an attribute affects the element.

  • Source Code0:02
  • JavaScript Create Element3:52
  • Source Code0:04
  • append and prepend6:57

    Master dom manipulation by appending and prepending content to a container, creating elements with create element, and comparing appending as html strings versus updating innerHTML.

  • Source Code0:09
  • AddEvent Listeners3:46
  • Source Code0:06
  • AddEvent Mulitple Listeners5:32
  • Source Code0:07
  • Mouse move events.3:06

    Track mouse move events in the DOM by selecting elements with querySelector, attaching a mousemove listener, and updating the header with the mouse's X and Y coordinates on the page.

  • Source Code0:05
  • Fun with Images5:12

    Create ten dynamic images with random colors, display a hello world label, and attach click listeners to update each image with a new random color.

  • Source Code0:12
  • Fun with Images part 22:19

    Make images clickable by attaching event listeners during creation, and update their source with a generated random color value as you loop through the images.

  • Source Code0:10
  • Form Values5:12
  • Source Code0:06
  • Annoying Blinker5:40
  • Source Code0:09
  • Animation JavaScript.8:53
  • Source Code0:15
  • DOM Conclusion0:30

Requirements

  • HTML and CSS
  • Basics of JavaScript coding
  • Desire to learn JavaScript
  • Fundamental JavaScript

Description

Learn about how JavaScript can be used to apply interaction and dynamic content to web pages.

Please note that JavaScript - HTML and CSS are prerequisites to this course

Scope of this course is to cover JavaScript and how it can be used to select elements from the web page.  Create new element, updates elements and manipulate elements directly using JavaScript.  Explore how easy it is to make your website come to life.  Using the DOM Document Object Model connect to the elements via JavaScript.

  • Explore how JS can be added to web pages

  • Learn about console and debugging with JavaScript

  • Find out more about DOM Document Object Model

  • Use JavaScript to select elements from the page

  • Select multiple elements from the page

  • Update element attributes

  • Update element style properties and values

  • Add classes and manipulate element class values.

  • Learn how to create elements using JavaScript and add them to a webpage

  • Create interaction using event listeners in JavaScript

  • Form values

  • Mini projects to highlight what was learned

  • Source code is inlcuded

try the code for yourself and explore what you can do with JavaScript

Fast Friendly support to help answer any questions you might have and to help clarify content is always available in the Q&A section.  Taught by an instructor with over 20 years real world experience ready to help you learn more.  Step by step training resources and source code is also included to get you started quickly.

Who this course is for:

  • Web developers
  • Web designers
  • Anyone who wants to learn how to make interactive web applications

Report abuse