Skip to content

instructor-notes.md

Latest commit

 

History

History
86 lines (63 loc) · 3.38 KB

instructor-notes.md

File metadata and controls

86 lines (63 loc) · 3.38 KB

JavaScript for the Web (Part 1): Instructor Notes

Quick Links and Requirements

Software

Content

Slides

Title Language Link
JavaScript for the Web (Part 1) English Google Slides: Online or in-person

Starting project / Development environment

Title Language Link
JavaScript for the Web (Part 1) English CodeSandbox: bit.ly/llc-jsweb-ide

Finished project / Demo

Title Language Link
JavaScript for the Web (Part 1) English CodeSandbox: bit.ly/llc-jsweb-demo

Versioning

1.0.0-b.1 (May 2023)

  • Initial release for testing (previously was in pilot as JavaScript for the Web).
  • Workshop has been split into 2 parts. Each part will be independently versioned.
  • Part 1 includes up to the end of exercise 5.

Workshop Overview

Description

In this workshop, learner will get started with the basics of using JavaScript in the context of the web. Learners will set up a development environment as well as be introduced to and apply basic JavaScript syntax and concepts through a series of exercises. They will then be guided in their exploration of a web page's the document object model (DOM) and how to use the methods of the document object to select and modify elements on a web page.

Learning objectives

By the end of this experience, learners will be able to:

  1. Work with JavaScript objects, including using dot notation and applying built-in objects and methods in common use cases.
  2. Use selectors to find specific elements in a web page's document object model.
  3. Modify the content and visual presentation of a webpage through modifying elements with the document object model.

Prerequisities

None

Workshop schedule and breakdown

Est. total time

3 hrs

Breakdown

Element Slides Length
Introduction 1-14
Today's tool: CodeSandbox.io 15-19
JavaScript and the Web 20-23
JavaScript & JavaScript Syntax 11 25-30
Exercise 0: IDE setup and console dot log Hello world 31 10 mins
JavaScript Syntax 1.52 32-33
Introducing the Document Object Model & document object 34-36
HTML, CSS & the DOM 37-45
Selectors and selecting elements 46-51
Exercise 1: Selectors 52 7 mins
document.querySelector() and HTML element methods 53-57
Exercise 2: classList 58 12 mins
JavaScript Syntax 23 59-63
Exercise 3: Variables 64 7 mins
JavaScript Syntax 34 65-67
Exercise 4: Lists 68 10 mins
Collections & for loops 69-72
Exercise 5: Loop secret message 73 15 mins
Wrap up 74-78

Footnotes

  1. JavaScript Syntax 1: Basics of JavaScript syntax (the concept of keywords, symbols); the meaning of brackets (); using dot notation to invoke an object's methods or access its properties, e.g. objectName.someProperty. ↩

  2. JavaScript Syntax 1.5: Comments //, objects ↩

  3. JavaScript Syntax 2: Arguments, text strings, variables ↩

  4. JavaScript Syntax 3: Arrays and lists ↩