Add outline

outline.md

@@ -0,0 +1,130 @@
+# 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()`