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
- Recap
- Functions & Control Flow
- Selectors
- IDs & Classes
- Nesting
- What is the DOM?
- Accessing the DOM
- querySelector()
- querySelectAll()
- Attributes
- CSS
- Events
- preventDefault
- Form values
- Tasks
Tasks
Mandatory
- Follow along with the demos throughout the session
- 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.