JavaScript DOM Create Interactive Dynamic Web Pages (Udemy.com)

Learn how to make your HTML and CSS code interactive and dynamic!  JavaScript can interface with the Document Object Model and help make webpage elements come to life!   Interact with web users via event listeners make your web pages respond to users and code.

Enroll now to get instant access to:

• 10+ hours of lessons

• 60 page downloadable workbook for Section 1 includes source code, tips, resources and challenges

• 27 page downloadable workbook for Section 2 includes source code, tips, resources and challenges

• 65 page downloadable workbook  for Section 3 includes source code, tips, resources and challenges

• Premium instructor support to help you learn

• Lifetime access to course updates

10 NEW coding Projects added - 5.5hrs NEW video content

1. Background Color Table Fun Create Table with JavaScript

2. Element Selector and Swap of Elements within the DOM JavaScript Code

3. JavaScript Dynamic Modal from Data Object Create Modals with Code

4. Page Clickers Create Dynamic Interactive Click Counters

5. Random Words Maker with JavaScript String Methods

6. Scrollbar scroll tracker Calculate the Scroll position on the page

7. Math Quiz and Start and Stop Counters with JavaScript

8. Dynamic Interactive JavaScript DOM memory Game

9. Dynamic JavaScript Coin Flipping game DOM game.

10. JavaScript Battle Cards Game using Array methods

JavaScript holds the key to selecting and changing web page elements.   The Document Object Model is a model of your HTML document represent within JavaScript as objects.  Your browser builds the DOM and JavaScript can be used to connect to it selecting and accessing data contained within the DOM.  All the web page elements are represented within the DOM.  Elements are within the HTML page rendered out by the browser.  JavaScript engine in the browser then create representations of the elements as JavaScript Objects

See how easy it is to select elements and make the interactive.

Explore JavaScript and how you can start coding JavaScript that will be able to interact with the Web page elements.

Section 1 Basic of Coding JavaScript

Covers all the fundamentals to code JavaScript - with examples and coding challenges in each lesson.

Explore how to get started with code, setup you developer environment.  Create HTML files and connect your Javascript to the page elements.

JavaScript coding best practices with tips and resources.   How to setup 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.  DOM and how JavaScript code can use the DOM to connect, update and manipulate web page elements.   

Lessons in the section include :

• Introduction to how JavaScript works and how you can write JavaScript code

• Getting started writing code how to code with Javascript

• JavaScript Code Tips

• How to use variables in JavaScript

• JavaScript Dynamic Type Conversion

• Variable naming Rules

• Arrays and Objects in JavaScript

• JavaScript Functions

• JavaScript Document Object Model

• DOM methods with JavaScript

• Logic Conditions with JavaScript

• Operators in JavaScript

• Ternary Operator JavaScript

• Math Random Values

• JavaScript For and While Loops

• JavaScript Objects

• Object Construction with JavaScript

• Common JavaScript Array Methods

• Looping through Array contents

• Array Methods for Items

• Array Methods for Sort

• JavaScript Array Method Examples

• JavaScript String Methods

• Word Scramble Game

• JavaScript JSON parse and JSON.Stringify()

JavaScript is everywhere - all your favorite websites and also the ones you don’t like use JavaScript. Makes your web content come to life - JavaScript allows for interaction with content and makes things happen. JavaScript is the dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. Used in all browsers it's the most popular coding language ever. Websites and web apps everywhere are using JavaScript. It runs directly in your browser and you can create html files with a text editor directly on your computer to run in your browser. Select the html file and open it with any browser.

Code is a set of instructions for what you want to happen. Example : When a new person comes to your website, ask their name. Showing a welcome message with their name would be an example of something you might ask JavaScript to do. The instructions for the code would be to provide the user an input area, get the input value of their name, then use that value to return a response. Select a page element and update the contents of the element with the welcome message including the value of the input for the user's name.

Getting started with JavaScript is easy: all you need is a modern Web browser. Create an index html file and open it in a browser Add JavaScript to the html either linking to a script file or JavaScript directly between the script tags in the HTML.

From an instructor with over 18 years of real world web development experience, here to help you learn how to use the DOM for your web projects.  Ready to answer any questions you may have!

The DOM is like a doorway to access all of this functionality that is already there.  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.

This course has everything you need to start creating your own interactive JavaScript code.  This is a step by step guide explaining how and why JavaScript DOM is used.  

Lesson JavaScript Coding Exercise :

1. Create an HTML file and a JS file.

2. Use the script tags to link to the JS file as the source file.

3. Using the document.write() add text to the webpage.

4. Using the document.write() add html formatted content to your webpage.

JavaScript Code Tips

• Use Comments when possible single or multiple line

• Indent using whitespace to make the code readable

• Create code in a separate JS file and link to it from the HTML file

• Use the console for debugging and to see values