Vefþróun@Tækniskóli
← All projects/3 - The fundamentals/Javascript In The Browser - DOM Manipulation & Timing

Guide: Javascript In The Browser - DOM Manipulation & Timing

Description

👉 This guide is part of the Javascript In The Browser Guides.

  • DOM Manipulation & Timing
  • Forms
  • Common Web APIs

 

The DOM is a representation of a website that the Javascript can use to access its contents and properties. For example, with it it's possible to add and remove a list's items, or make an element “stick” to a specific place after the user scrolled a certain amount, or add and remove CSS classes of whatever element in the page. This is the feature that makes possible the highly interactive interfaces we see on the web today, and is therefore very important to learn. 

Asides from that topic, this Guide covers the timing features of Javascript, which you will use to create cyclical actions and timers.

Knowledge

  • Understand what is the DOM
  • Understand why the DOM is only available in browsers
  • Understand what event listeners are
  • Understand the timing functions in Javascript

Skills

  • Be able to select elements form the DOM and change them with Javascript
  • Be able to iterate through collections of DOM elements
  • Be able to add event listeners to DOM elements
  • Be able to create animations by manipulating element classes
  • Be able to create a timer for a an action

Topics

  • DOM -> Only available in browsers vs. Pure javascript
  • DOM (Document Object Model)
    • What is DOM
    • window and document object
    • Adding, Getting, Modifying and Deleting DOM Elements
    • Adding Event Listeners to DOM Elements
      • Event bubbling
    • Iterate DOM collections
    • Animate with JS and CSS transitions
  • Timing Events
    • setTimeout
    • setInterval

Action Points

  • Read up on the DOM
  • Find out why the DOM is only available in the browser
  • Learn how to create and use event listeners
  • Learn how to manipulate elements' classes to change the way they look
  • Exercise each item in the Topics list on Glitch or similar

Deliverable: Interactive single-purpose application

  • Submit:
    • Glitch Project URL or Github Repository + Github Pages URLs
      • Add comments for each relevant code block
    • Project description and details in the README.md file
  • Minimum requirements
    • Use Event listeners to add interactivity in the application
    • Add an option to bring the application to the initial state (without reloading the page)
    • Use a few animations made with CSS transitions (use of JS to control them encouraged)
    • Display a loading screen for a couple seconds using setTimeout
    • Display a clock or timer on the screen (use setInterval)
    • At least one page should be available
    • Website should be styled with CSS
  • Theme ideas:
    • An application that allows the user to change a character’s clothes for different looks :)
    • Supermarket list with the option to add the desired number per item
    • Drum kit with ability to add and remove instruments
    • Calculator with a history of calculations on the side
    • Video game (pong, snake, tic-tac-toe...)