Content

Examples, lecture content, exercises for Fall 2021 session of 420-320-DW Web Dev II - JavaScript

Teacher Patricia Campbell, contact me on slack!

code examples and lab exercises

1. Week 1Day 1 code examples and labs
   • HTML & CSS review
2. Week 1 Day 2 code examples and labs
   • using defer & DOMContentloaded
   • simple event listeners
3. Week 2 Day 3 code examples and
   • variable data types
   • string templates
   • scope & hoisting
   • functions and default parameters
   lab see moodle
4. Week 2 Day 4 code examples
   • DOM node relationships
   • Manipulate the DOM
   • classlist examples
   • variable scope examples
   • Use CSS to repeat text across html - example
   lab see moodle
5. Week 3 Day 5 code examples
   • 2x forms examples
   • MDN validation link
   • regex example
6. Week 3/4 Day 6 code examples
   • forms example: reading input & validation js & html5
   • events, event object
   • using properties vs add listener
   • changing event default behaviour
   • event propagation
   • target vs currentTarget
7. Week 4/5
   • basic functions
   • higher order functions (arrow, anon)
   • Array methods
   • Map object
   • NodeList & HTMLCollection
8. Week 5/6
   • JSON
   • Web Storage
   • MDN example web storage
9. Week 7 test #1
10. Week 8 Deployment (1x class+lab)
11. Week 9
    • some mdn examples blocking & coop async
    • cooperative async in JS timeout & intervals
    • promises
12. Week 10
    • fetch api
13. Week 11
    • XHR
    • functions- using arguments object
    • functions- more examples
14. Week 12/13
    • constructor function
    • objects & classes general
    • Introducing React
15. Week 13/14
    • demo Comment React component
    • More React state
    • JSX using module (component and class)-and useState hook
16. Week 15
    • demo render list & key
    • demo read json render to cards
      
    • codepen example: render cards multiple times (bad if mult info)
    • codepen example: render cards from an array (good)
17. Sunrise sunset
    • Plain old JS
    • React-render for each update (bad)
    • React-use state to auto render
    • tbd React-use state to auto render component function

    Labs, Assignments and Projects

debugging videos

• Using Dev tools & console.log
• Using Dev tools Debugger

flexbox videos

• container properties
• item propertes

MDN references

• JavaScript &
• HTML & Learn HTML
• CSS & Learn CSS