Udemy - JavaScript DOM Projects InterActive Dynamic WebPages

What you'll learn:
Perfect to get started with jаvascript - loaded with starter projects to get you coding
Master the DOM (document object model)
Explore how you can learn jаvascript while building FUN real world jаvascript projects from Scratch
Create interactive and dynamic web pages
Selection of web page elements and manipulation of elements
Requirements
HTML and CSS knowledge and jаvascript experience
Use of editor to write code
Description
Bring your web pages to life with jаvascript - access the browser document object - select and update the elements on the page!
Learn more about how to create dynamic web pages - connect with the DOM -> Update and manipulate page elements
Covering the common methods and properties that jаvascript uses to select elements from the web page and apply changes with code. Fine tune your jаvascript Skills while creating fun interactive projects.
- Challenges at the end of each lesson.
- Modern jаvascript coding and examples
- PDF resource and code guides in every section
- Examples and how to apply logic to create the interactions you want
- practice and learn more about the DOM while creating fun games
- Unique projects to grow your skills - you won't find these anywhere else!!!
- Content professionally designed to help focus your learning improve your skills
- Add and expand your portfolio
Source code is included - step by step learning on how to apply jаvascript to make thing happen
jаvascript and the DOM - learning objectives to get you coding!!!
Professional instructor with over 20 years of jаvascript experience ready to help you learn and answer any questions you have.
Covering the core code examples to interact with the DOM +++++ 3 AWESOME jаvascript DOM PROJECTS
Build an interactive game - generate a responsive grid with jаvascript and CSS Grid.
jаvascript Slot machine with real element movement and tracking of element values. Build with dynamic global game object that you can adjust to change the game dynamics
jаvascript DOM Frogger game - Classes and how to track classes, update and check if element contain classes. Logic for gameplay and how to create complete game from start to finish. Game Grid and design.
The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document-such as the HTML representing a web page-in memory.
The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.
Complete Introduction to the DOM and how to access page elements with jаvascript Code
How to write jаvascript editor used in the course and resources for lessons. Resources for writing code and for the upcoming lessons. Code editor used in the course
How to select all matching page elements with jаvascript QuerySelectorAll. DOM examples and how the DOM relates to jаvascript Code. Mini jаvascript Object with nested objects to illustrate a simple example of the DOM element tree. Update and selection of page elements using querySelector and querySelectorAll to select web page elements and update the value of the object. Select the element and manipulate the contents with textContent property value.
Web Page Element Style Attribute Update with jаvascript. Page element style values within style property of the element. Select an element and update the style values, get and set Attributes of the page element.
Attributes ClassList Add Remove Toggle Contains within class of page element. Explore how to select and update the element attributes, add new attributes and get contents of existing attributes. Useful classlist methods to toggle existing class, add and remove classes and check if the class exists on an element returning boolean value.
Add HTML to Page with jаvascript Code innerHTML property of web page elements. Select a page element with jаvascript - create page elements with loop from jаvascript to create multiple elements on the page. Add HTML to the page elements with innerHTML property value. Setting hyperlink attribute to have target blank, selecting all hyperlinks on page. Creating images with img elements as html code for page. Generate a random color with jаvascript string method. Lesson also includes a challenge to add html to a parent element and then select the new elements with jаvascript.
jаvascript to Create new page elements and Remove Elements. Use of createElement method to generate new page elements with jаvascript Code. Append Prepend AppendChild to parent Element methods of adding page elements to page. jаvascript insertBefore to add within an element and get the callback value. Coding Challenge to create multiple image elements adding images and properties with jаvascript Code.
jаvascript Traversing the DOM parents siblings children of elements. Navigate the DOM tree, select a starting element and move to its related elements with jаvascript Code. Select element parent object, get list of elements children and child nodes. Select an element get the first last and siblings related to the current element. Move to the next element and update the element.
Click Events and Event Listeners with jаvascript. Create interactive page elements that can be clicked to run blocks of code. User actions to trigger code blocks with jаvascript. How to setup click only once, addEventListeners and removeEventListeners. Create custom object property values. Update elements dynamically with code.
How to add Mouse Event Listeners with jаvascript code. Common mouse events to page elements, on mouse over movement and other actions. Create events with mouse actions and how to track the events, what the difference is between mouse over and mouse out.
Events Listeners Keyboard Events with jаvascript Code. Track keyboard events, get key values and how events can be attached to input fields. Focus and Blur on input fields running events and jаvascript Code. Keyup and KeyDown events tracking arrow presses on keyboard.
How to Move an Element with Arrow presses on Keyboard using jаvascript. Coding exercise with jаvascript and keyboard events. Track arrow key presses and update the element position on the page. Key press to move element on screen using jаvascript.
jаvascript Element Clicker Game CSS grid jаvascript Dynamic Grid
Objective of this section is to create a dynamic fully responsive Game Grid - that can be interacted with and updated using jаvascript. Game with dynamic Fully responsive Grid using jаvascript and CSS Grid.
jаvascript Game Clicker Project Introduction. Introduce the jаvascript Game created in the upcoming lessons. Set the game and demo the final game project.
Setup of HTML Web Page and jаvascript Code. Setup of page structure for the jаvascript Game. Using HTML and setup CSS to prep for Dynamic Elements with jаvascript.
Create a Responsive Dynamic Grid using jаvascript. Use jаvascript to generate a grid that is fully responsive and ready for gameplay elements. Create main container element and grid items.
WebPage Elements into Array with jаvascript. As you create the elements with jаvascript track them into a Global Array that can be used to easily select the elements and create interactions. This can be used to select elements by index value.
Add Event Listeners make Elements Clickable. Create interactions with page elements and user. Click elements and track click events on elements with jаvascript.
jаvascript Code updates tweaks for counters. Update the element counters removing the timeout function call and adding counters on each element object. Add variables to elements using jаvascript.
jаvascript Game Scoring and GamePlay Updates improvements. Adding more gameplay - with scoring and better visuals for the player. Use jаvascript to update hits and misses counter and display to the player. Add game difficulty option to increase play dynamically adjusting the game with changes in the main global parameters.
jаvascript Game Clickers Code Review. High level overview of game code and the functions used to create the jаvascript game. Updated and options for gameplay. Full code review of jаvascript Game.
jаvascript Slot Machine coding project Dynamic Interactive jаvascript DOM project
Explore how you can create elements have user interactions and trigger visual events making your web pages come to life.
Project Setup create HTML and jаvascript files. Setup html file prep to add jаvascript coding. Create HTML game container element, link to jаvascript source files. Select main output element using jаvascript.
Project Setup create HTML and jаvascript files. Setup html file prep to add jаvascript coding. Create HTML game container element, link to jаvascript source files. Select main output element using jаvascript.
jаvascript SlotMachine create interactive Button. Setup of HTML Web Page and jаvascript Code. Select main container element, add button for interaction. Allow user to toggle button content and select and invoke function on button click action. Setup of core Global Game properties to make the application dynamically adjust with new game object values. Append elements to the page with jаvascript. Create elements with jаvascript. Add event listeners to elements with jаvascript.
Create Game Elements jаvascript Apply CSS. Add and update the toggle of the clickable button element. Invoke a jаvascript function on click. Use of DOMContentLoaded event to build game board once the DOM is loaded and ready to use. Get document body properties to use values within the jаvascript code document.body.clientWidth. Create element maker function to generate elements within the jаvascript code, add and append new element to the parent, add a class, element tag, and html content within the element.
Update CSS styling to set dynamically created elements on page. Adding CSS to position elements, set widths and heights to set the content on the page by applying classes with jаvascript to the newly created page elements.
jаvascript adding animation frame to create smooth movement of elements. The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint. Add animation frames that can be added and removed with a global object.
Movement of Slot Wheels with jаvascript Page element style updates. Update the position of the element on the page, move the elements restack the order of elements within a parent element. Getting element property values to use within the code to update position. offsetTop with jаvascript. Conditions and calculations to manipulate element style positions top and left to create animation of elements with jаvascript code.
jаvascript Game Movement debugging and Fixes. jаvascript Game movement and debugging. How to troubleshoot your jаvascript game application and how to create and optimize gameplay. Update the game area styling with CSS. Adding and removing classes from jаvascript objects. Game playthrough and updates in element positions, style properties done with jаvascript.
Movement and Game Results Setting Conditions for win jаvascript. Final spin results and retrieving the values of the output results. Comparison functions and setting up win conditions for jаvascript Game Object. jаvascript
jаvascript Slot Machine Win Conditions and payout for matches. How to create a final tally object that can be used to calculate the final results for the player. Track matches and number of occurrences to be able to apply calculations on win.
jаvascript Slot Machine Final Code Tweaks and Updates. Improvement of visuals, testing of game play to ensure proper functionality. Update to the global game object values to test dynamic content and game play. Adding of icons for more appealing game visuals, use fo colors to add more appeal to game play.
jаvascript DOM frogger game Project
Practice updating and manipulating web page elements while creating a fun interactive game using jаvascript and the DOM. All gameplay is DOM based and can be used and reused to get more familiar with how the DOM works and how you can create interactive and dynamic Web Pages.
jаvascript Game Setup Add Elements and create core files. Info setup index and files. Prepare and plan main elements for gameplay. Setup CSS and use of querySelector to select Game Play Area element.
How to Create a Dynamic Element Grid jаvascript CSS Game Grid. Using jаvascript to generate elements grid using CSS grid. Add Rows and Columns to the dynamic fully responsive game grid. Setup of game board and game play area.
How to move element class with Keyboard events Arrow Keys move element jаvascript Example. Add movement to the game character with event listeners. Listen for arrow key presses and track user actions to player element on the screen. Move class of main character across board.
Player Movement with jаvascript Smooth movement animations. Adding smooth movement and animation frame in jаvascript. Animation frames to call functions creating animations of elements on the web page. User keyboard clicks to element page movement.
jаvascript Game Objects Background Design adding colors. Update and build jаvascript Frogger gameboard. Add roads and water classes to elements. Check if the frogger is on the safe final block. Use of classList to check which element contains specific classes needed for jаvascript Game
jаvascript Game Obstacles added logs and cars. Add interactive items on jаvascript Gameboard. Create elements with classes added to represent the obstacles that will be moving. Create visuals for game play add elements that the player can interact with.
jаvascript Game Object Movement of Classes motion and interaction. Selecting and updating classes in Game Animation. Creating gameplay and interactive obstacles that can move automatically on the screen. Update element classes and create motion of elements for the player within the jаvascript Frogger Game. Update game to have option for speed values to increase and decrease game speed.
jаvascript Frogger GamePlay Fixes Updates. Play the game and test to debug. Create and catch areas to improve the gameplay and increase game functionality. Use of classlist to detect classes on elements. Setup to start and stop gameplay for game debugging and help with game calculations.
Frogger Game Debugging with jаvascript and game updates. Play and check of game conditions, apply game logic to help move player through game. Add movement of frogger on log update of key presses for more responsive key actions and tracking of key events.
jаvascript Game Play Design and Improvements add images and graphics. Adding images to increase game play appeal. Update with CSS and jаvascript code. Game testing and debugging methods. Adding visual to game, adjustment of global game values to dynamically change gameplay.
Complete jаvascript Frogger Game Code Review. Overview of coding and game design points.
Who this course is for
Anyone who wants to practice writing jаvascript
jаvascript Beginners
Web developers
HTML and CSS coders
Homepage
https://www.udemy.com/course/jаvascript-dom-js/