# Workshop Outline

## Welcome and Setup

1. Intro and Welcome
   1. Who are you?
   2. About me and the workshop
   3. Quick poll
   4. Setup
      1. Update `js4shiny`
2. What and why is JavaScript?

## Intro to JavaScript (10:30--12:00)

1. JavaScript Basics (10:30--10:50)
   1. Browser dev tools (2)
   2. Assigning variables (2)
   3. Code comments (0)
   4. Data types (4)
   5. Operators (6)
      1. 💻 `repl_example("are-we-there-yet")`
   6. Coercion
      1. 💻 Operators with mixed types
   7. Comparison
      1. 🖼 strict Comparison
      2. 🖼 truthy/falsy
      3. 🙋 strict vs. loose comparison table
   8. Incrementing
      1. 🖼 `x++` and `++x`
      2. 💻 trace incrementing
2. Objects (10:50--11:05)
   1. Arrays
   2. Objects
   3. Destructuring, rest, spread
   4. Exercise
      1. 💻 TODO: arrays & objects
      2. 💻 `repl_example("spread-node-element")`
3. Control Structures (11:05--11:25)
   1. If Else
      1. 🖼 ternary if/else
   2. For Loops
      1. 🙋 `string.length`
      2. 🖼 for loop varieties
      2. 💻 `repl_example("for-loop-sum-array")`
      2. 💻 `repl_example("for-loop-sum-series")`
      3. 💻 `repl_example("for-loop-object-ref")`
   3. References vs Values
      1. 🖼 pass by reference vs value
   4. Functions
      1. 🖼 function styles
      2. function arguments
      3. 🖼 rest params
      4. 🖼 destructuring params
      5. 🖼 default values
      6. 💻 `repl_example("limits-of-array-{1,2}")`
   5. Math built-in
      1. how to search MDN
      2. 💻 `repl_example("limits-of-array-{1,2}")`
4. Deeper into JavaScript (11:25--12:00)
   1. Scope
      1. Block scope
      2. Function scope
      3. Closures
      4. Exercise
         1. 🙋 what value where?
         2. 💻 `repl_example("one-time-only")`
   2. Callback functions
      1. some, every, filter
      2. demo on strings with `.startsWith()`, `.includes()`, `.endsWith()`
   3. Array methods
      1. `.forEach()`, `.map()`, `.reduce()`
      2. scrabble examples
         1. `repl_example("scrabble")`
         1. 💻 `repl_example("scrabble-forEach-word")`
         1. 💻 `repl_example("scrabble-map-word")`
         1. 💻 `repl_example("scrabble-reduce-rearrange")`
         1. 💻 `repl_example("scrabble-reduce-total")`

## HTML & CSS (12:30--2:00)

1. HTML Basics (12:30--12:50)
   1. Structure of a web page
   2. HTML tags are nested
   3. HTML is a tree
   4. Block vs inline elements
   5. div vs span
   6. common html elements
      1. structural elements
      2. text elements
      3. inline
      4. `<a>`
      5. `<img>`
   7. Better than div/span
      1. `repl_example("pkg-calendar-part-1")`
      2. &#x1F64B; View source
2. CSS Basics (12:50--1:25)
   1. Where to put CSS
   2. Selector Basics
   3. CSS variables
   4. Properties for appearance
   5. CSS units and inheritance
   6. Selector specificity
3. Intermediate CSS (1:25--1:50)
   1. Box model
   2. Position
   3. Attributes
   4. Media Rules
4. Interesting CSS (1:35--2:00)
   1. Bootstrap

## Interactive Web (2:30--4:00)

1. Animations
   1. Transitions
      1. `repl_example("animation-by-transition")`
2. Interactive Web
   1. Rebuild animation by transition from scratch
   2. Finding elements
      1. `getElementById`
      2. `querySelector()`, `querySelectorAll()`
   3. Manipulate class list
      1. `.classList`, `.classNames`
      2. `.toggle()`
      3. `.add()`, `.remove()`
      4. update style directly
   4. Events
      1. `repl_example("events")`
   5. Modify Document
      1. `textContent`, `innerHTML`
      2. `document.createElement()`, `appendChild()`