SEP professional development materials for JavaScript workshop.
Clone the repo & open in your favorite editor:
$ git clone https://github.com/sepnyc/pd-javascript.git
$ $EDITOR pd-javascript
├── README.md
├── session-1/
│ ├── lesson-plan.md
│ └── slides.md
├── session-2/
│ ├── example.js
│ ├── lesson-plan.md
│ └── slides.md
├── session-3/
│ ├── example_code.js
│ ├── lesson-plan.md
│ ├── project/
│ └── slides.md
├── session-4/
│ ├── game-example-solution.js
│ ├── game-starter-code.js
│ ├── lesson-plan.md
│ ├── makeGame-rachel.js
│ ├── makeGame-recursive.js
│ ├── object_playtime.js
│ └── slides.md
├── session-5/
│ ├── lesson-plan.md
│ └── magicStick/
├── session-6/
│ ├── game/
│ ├── game-example-solution/
│ └── lesson-plan.md
└── session-7/
├── lesson-plan.md
├── mysounds/
└── mysounds-solution/
- Identify and describe the core syntactical elements of JavaScript
- Develop self-learning habits through analysis and experimentation
- Create and execute small programs using JavaScript
- Be able to debug code using basic debugging tools and techniques
- Develop good habits for iterative program development
- Differentiate between and compare different JavaScript environments (i.e. Node vs. browser)
- Manipulate elements on a web page with JavaScript
- Add an interactive feature to an existing web page using JavaScript
Session 1: Lesson Plan | Slides
Session 2: Lesson Plan | Slides
- data types
- variables
- operators
- control flow
- iteration
- functions
- Go through JS fundamentals course on CodeCademy
Session 3: Lesson Plan | Slides
- testing
- debugging
- interface design
- data structures
- iterative development
- Set up a development environment
- Grader
Session 4: Lesson Plan | Slides
- encapsulation
- variable scope
- index-based store
- key-value store
- properties
- methods
- Modeling systems with object-oriented design
Session 5: Lesson Plan
Session 6: Lesson Plan
- browser environment
- document object model (DOM)
- tree structure
- user input
- rendering
- Magic Stick
- Simon Says Memory Game
Session 7: Lesson Plan | Project
Code Visualizer:
Tutorials:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
- https://www.khanacademy.org/computing/computer-programming/programming
- https://www.codecademy.com/en/tracks/javascript
- https://www.codeschool.com/paths/javascript
- https://teamtreehouse.com/learn/javascript
- https://github.com/rkho/javascript-beginners-curriculum
- http://javascriptissexy.com/how-to-learn-javascript-properly/
Documentation:
Books & Readings:
Software Engineering Pilot | NYC Department of Education | http://sepnyc.org/