preview/outline.md

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
      3. 💻 repl_example("for-loop-sum-array")
      4. 💻 repl_example("for-loop-sum-series")
      5. 💻 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")
         2. 💻 repl_example("scrabble-forEach-word")
         3. 💻 repl_example("scrabble-map-word")
         4. 💻 repl_example("scrabble-reduce-rearrange")
         5. 💻 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. 🙋 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()