- Course type
- Paid course
- All Levels
- 16 hours
- 84 lessons
- Available on completion
- Course author
- Laurence Svekis
- Create Dynamic interaction on webpages
- Update HTML elements
- Manipulate Element Styling
- Add event triggers.
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
Page Clickers Create Dynamic Interactive Click Counters
Scrollbar scroll tracker Calculate the Scroll position on the page
See how easy it is to select elements and make the interactive.
Lessons in the section include :
Variable naming Rules
Math Random Values
Looping through Array contents
Array Methods for Items
Array Methods for Sort
Word Scramble Game
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!
Create an HTML file and a JS file.
Use the script tags to link to the JS file as the source file.
Using the document.write() add text to the webpage.
Using the document.write() add html formatted content to your webpage.
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
Variables are one of the basic concepts of coding
Using const or let avoid using var
const and let are scope based
Parent scope vs local scope
Assign values to variables and reassign new updated values
Use of strings and numbers as values for variables
Conditions can be used within code to apply logic, and run different actions based on the result of the condition. Depending on the value either True or False the code can run different blocks of code.
The if statement will check a condition, if true it runs the specified code. If false it does not run the code. Else provides an alternative if the condition is not true then else statement allows us to run a block of code on false if none of the previous conditions are true. You can also use the else if statement to check another condition with a separate block of code to be run if the previous condition came back as false.
Using the switch statement allows us to specify several alternatives checking to see if any of the conditions match and allow the corresponding code to be executed.
Random values are ideal for games and to create unique custom experiences for web users.
Loops allow us to execute blocks of code a number of times, they also allow us to iterate through a list of items such as items in an array or other iterable list.
Loops will always require several parameters, such as a starting value, a condition to stop the loop and a way to move through the items to the next item in the loop. We can set up a simple for loop by setting a variable to use with a starting value, then applying a condition to continue the loop if the condition is true, and incrementing the value of the variable so that eventually the condition is no longer true.
Arrays are also objects as a data type but they contain specific properties that allow the developer to interact with the contents of the array and its data.
arr.push(val); // add to array return the array length
arr.pop(); //remove last
arr.shift(); //remove first item
arr.unshift(val); //add to the front of array array length returned
arr.splice(1); // return array with all items after the index of 1
splice(start, deleteCount, val); //changes the contents of an array
slice(start, end); // returns a copy of a portion of an array into a new array
arr.slice(); //duplicate array as new array
arr.slice(5); // return array items from index 5
arr.slice(1,4); // return portion of array using slice
arr.toString(); // returns a string representation of the array items
arr.join(' - '); // returns a string representation of the array items using the argument value as a separator for the items in the array.
HTML elements can be accessed as objects that have properties, methods, and events.
Code is a set of instructions that tells the application in a language that can be understood by it, what to do.
How to write code using a code editor or IDE.
How the elements from the HTML code are represented within the DOM tree structure, and that you can navigate from one to another.
What Devtools are and how you can use them
How you can use console log and console dir methods within the DevTools to view the document object and see the contents of the page elements in the DOM.
Browser APIs allow access to the web page elements, and other data. You can access the API and do useful programming things. The DOM ( Document Object Model) API allows you to manipulate the HTML and CSS of the page.
Learn how to select HTML elements via tags, id, class and queryselection
traverse elements move between elements to properly select the ones you are looking for
Find out about nodes and how they work
Get data from the DOM about your page and elements
Add interactive listeners for page events
Append and remove elements Dynamically
Useful code snippets
Source Code is included
Top resources and more
Everything is included for you to get started quickly