The DOM

Last reviewed 25 Feb 2020 by Alex Seymour

Learners will be introduced to the DOM. They will be shown how to make javascript bring a page to life by reacting to events. The learners will be shown how to trigger function calls using on page events.

Why this is important

Javascript is what brings a website to life. Being able to bind functions to document events is a fundamental part of being a web developer. This is the final lesson required to be able to create full UIs.

Outcomes

Following this training you will be able to: Bind document events to functions written in JS.

Learner Requirements

VS code

Github desktop

Outline

  1. Recap
    1. Functions & Control Flow
    2. Selectors
      1. IDs & Classes
      2. Nesting
  2. What is the DOM?
  3. Accessing the DOM
  4. querySelector()
  5. querySelectAll()
  6. Attributes
  7. CSS
  8. Events
  9. preventDefault
  10. Form values
  11. Tasks

Tasks

Mandatory

  1. Follow along with the demos throughout the session
  2. Javascript challenge

Additional

Resources / Reference

N/A

Skills, Knowledge, Behaviours and Values

Core Skills

This workshop is designed to develop the following from our core skills directive

  • Presentation
  • Logic
  • Problem Solving
  • Reflection
  • Research
  • Learning from failure

Apprenticeship Standard

This workshop will encourage the development of the following from the Software Developer Level 4 Standard

COMPETENCIES (Skills)

  • C1 - Logic: writes good quality code (logic) with sound syntax in at least one language.
  • C5 - Problem solving: can apply structured techniques to problem solving, can debug code and can understand the structure of programmes in order to identify and resolve issues.
  • C8 - Deployment: can understand and utilise skills to build, manage and deploy code into enterprise environments.
  • C9 - Development lifecycle: can operate at all stages of the software development lifecycle, with increasing breadth and depth over time with initial focus on build and test..
  • C12 - Can respond to the business environment and business issues related to software development.

BEHAVIOURS

  • B1 - Logical and creative thinking skills.
  • B2 - Analytical and problem-solving skills.
  • B3 - Ability to work independently and to take responsibility.
  • B7 - Ability to communicate effectively in a variety of situations.
  • B8 - Maintain productive, professional and secure working environment.

Knowledge

  • K1 - Understands and operates at all stages of the software development lifecycle.
  • K3 - Understands how teams work effectively to produce software and contributes appropriately.
  • K4 - Understands and applies software design approaches and patterns and can interpret and implement a given design, compliant with security and maintainability requirements.
  • K5 - Understands and responds to the business environment and business issues related to software development.