Homepage
Syllabus
❱
Material & Resources
Topics & Goals
Assessment & Grading
Expectations & Policies
Logistics
❱
Office hours
Regrade request
Notes
Preface
❱
Instructional Approach
JavaScript History
Why Learn JavaScript?
JavaScript Basics
❱
Variables
Syntax
Types
Strings
Numbers
Arithmetics
Math
Objects
Array
Date
SleepTime App
❱
Step 1: HTML
Step 2: button
Step 3: events
Step 4: script tag
Step 5: Styling
Step 6: style tage
Step 7: More styling
Step 8: DOM
Step 9: getElementById()
Step 10: Date object
Step 11: Calc sleep times
Step 12: Style Guide
Control Flow
❱
Equality Operators
Comparison Operators
Logical Operators
Boolean-ish
if statement
switch statement
Loops
Enhanced Loops
Git & GitHub
❱
Step 0: Preamble
Step 1: init & status
Step 2: add & commit
Step 3: log & diff
Step 4: reset
Step 5: add HTML
Step 6: Staging multiple files
Step 7: gitignore
Step 8: createElement
Step 9: Styling
Step 10: eventListener
Step 11: GitHub
Step 12: GitHub Pages
Step 13: clone
Step 14: Summary
RockPaperScissors
❱
Step 1: HTML Boilerplate
Step 2: Add Bootstrap
Step 3: Add buttons
Step 4: Container
Step 5: Grid
Step 6: Bootstrap button
Step 7: Check responsiveness
Step 8: Adjust responsiveness
Step 9: Jumbotorn
Step 10: Card
Step 11: Link to script
Step 12: Computer plays
Step 13: Game logic
Step 14: Display on HTML
Functions
❱
Defining Functions
Function Expression
Arrow Functions
Hoisting
Arguments
Function Scoping
Inner Functions
Functional Encapsulation
Closures
Mimic OOP
Functions are Objects
Methods
Function Context
Prototype Chain
TicTacToe
❱
Step 1: Starter
Step 2: HTML
Step 3: Style
Step 4: Script
Step 5: Debug
Step 6: Implement
Step 7: Solution
Payment App
❱
Step 1: HTML Boilerplate
Step 2: HTML Form
Step 3: Submit
Step 4: Script
Step 5: Validate date
Step 6: Validate CVV
Step 7: Validate Card Number
Step 8: Luhn Algorithm
Step 9: Implement Luhn
Step 10: Array.map
Step 11: Arrow function
Step 12: Array.reduce
Step 13: Complete Luhn
Step 14: Styling
Brick Breaker
❱
Step 1: Vite
Step 2: Install Dependencies
Step 3: Run
Step 4: Canvas
Step 5: Animation
Step 6: Block Class
Step 7: Block Object
Step 8: Sprite Class
Step 9: Sprite Object
Step 10: Ball Class
Step 11: Refactor Ball
Step 12: Paddle Class
Step 13: Restrict paddle
Step 14: Collision Detection
Step 15: Game over
Step 16: Brick Class
Step 17: Lay the Bricks
Step 18: Scores
Step 19: Winning the game
Step 20: Build and Serve
Step 20: Deploy to Netlify
Classes
❱
Class Syntax
Instantiate Classes
Dot operator
The this keyword
this keyword, again!
Information Hiding
Setters & Getters
Static Fields & Methods
Inheritance
Polymorphism
Class Expression
Asynchronous
❱
Some Things Take Time!
Not All Tasks Created Equal!
Asynchronous Programming
Understanding Async Operations
Patterns for Dealing with Async Code
Callback
Callback Hell!
Promises
Replacing Callbacks with Promises
Promises Exercise
Chaining Promises
Async & Await
Dictionary App
❱
Step 1: View the app
Step 2: Layout and style
Step 3: Vanilla JavaScript
Step 4: The create-react-app
Step 5: Boilerplate code
Step 6: Simplify code
Step 7: React Element
Step 8: React Component
Step 9: Think in Components
Step 10: Header
Step 11: Footer
Step 12: Phonetics
Step 13: JSX
Step 14: Definitions
Step 15: Search
Step 16: Controlled Component
Step 17: State
Step 18: Set state
Step 19: Fields
Step 20: Binding
Step 21: Fetch
Step 22: Axios
Step 23: Data flow
Step 24: App's state
Step 25: Props
Step 26: Update UI
Step 27: PropType
Step 28: Build & Deploy
Web Workers
❱
Dedicated Workers
Shared Workers
Service Worker
Modules
❱
IFEE Revisited!
An ES6 Module is just a file!
Exporting
Importing
Module does not create a type!
Default Export/Import
Before ES6 Modules
React (Basic)
❱
Create React App
React Component
Thinking in Components
React Element
JSX Rules
Props
State
QuickNote App [I]
❱
Step 1: Create React App
Step 2: GitHub Repository
Step 3: Continuous Delivery
Step 4: Wireframing
Step 5: Page vs. Component
Step 6: Sample Data
Step 7: Material UI
Step 8: Note Component
Step 9: Collapsible Note
Step 10: Delete Note
Step 11: Add button
Step 12: React Dev Tool
Step 13: To be continued!
QuickNote App [II]
❱
Step 1: DisplayNotes
Step 2: AddNote
Step 3: Change view
Step 4: Routing
Step 5: React Router
Step 6: Navigation
Step 7: Controled Component
Step 8: Add Note
Step 9: Refactor AddNote
Step 10: Edit Note
Step 11: Lifecycle Method
Step 12: Improve styling
Step 13: The _redirect file
Step 14: To be continued
QuickNote App [III]
❱
Step 1: Rich Text Format
Step 2: React Markdown
Step 3: GitHub Flavored Markdown
Step 4: Improve Styling
Step 5: Easy Markdown Editor
Step 6: Search Component
Step 7: Clean slate!
Step 8: Persistence
Step 9: That's a wrap!
React (Intermediate)
❱
React Data Flow
State Management
React Router
Lifecycle Methods
Styling
KeyCode App
❱
Step 1: Clone
Step 2: React Bootstrap
Step 3: State
Step 4: Lifecycle Method
Step 5: Refactoring
Step 6: useState
Step 7: useEffect
React Hook
❱
useState
useState Nuannces
useEffect
Quote App
❱
Step 1: Clone
Step 2: Chakra UI
Step 3: State
Step 4: Lifecycle Method
Step 5: Refactoring
Step 6: Hiding Secrets
Step 7: Netlify Env Var
Serving websites
❱
Step 1: BMI App
Step 2: Node
Step 3: FS Module
Step 4: CommonJS
Step 5: readfile
Step 6: HTTP Module
Step 7: Web server
Step 8: Heroku
Step 9: Procfile
Step 10: Express
Step 11: Refactor
Step 12: Static files
Step 13: Serve React app
Node & Express
❱
Before Node
Node Runtime
CommonJS
Module Wrapper
Node Modules
HTTP Module
RESTful API
NPM
Express
Refactoring
WebSockets
❱
Client-side Application
Server-side Application
Another Library
Templating
❱
Nunjucks Introduction
XSS
❱
Reflected XSS
DOM-based XSS
QuickNote API [I]
❱
Step 1: Express app
Step 2: Note class
Step 3: Data Access Object
Step 4: CRUD Operations
Step 5: ApiError class
Step 6: Erro Handling
Step 7: Fake data
Step 8: HTTP GET
Step 9: Query Parameter
Step 10: Path Parameter
Step 11: HTTP POST
Step 12: HTTP DELETE
Step 13: HTTP PUT
Step 14: To be continued!
QuickNote API [II]
❱
Step 1: MongoDB
Step 2: Atlas
Step 3: Cluster
Step 4: Database Access
Step 5: Network Access
Step 6: Connect
Step 7: Mongoose
Step 8: Schema
Step 9: Model
Step 10: Refactor Note
Step 11: Refactor NoteDao
Step 12: More Refactoring
Step 13: Heroku
Step 14: Dotenv
Step 15: To be continued!
QuickNote API [III]
❱
Step 1: User Model
Step 2: User DAO
Step 3: Routing
Step 4: Sample Users
Step 5: Run & Test
Step 6: Refactor
Step 7: Auth Route
Step 8: Run & Test
Step 9: Bcrypt
Step 10: Hash Passwords
Step 11: Verify Password
Step 12: JsonWebToken
Step 13: Sign Token
Step 14: Verify Token
Step 15: To be continued!
QuickNote API [IV]
❱
Step 1: Sample users
Step 2: Bearer token
Step 3: Check token
Step 4: Middleware
Step 5: Link models
Step 6: Notes with author
Step 7: Sample data
Step 8: Middleware again!
Step 9: User from token
Step 10: To be continued!
QuickNote API [V]
❱
Step 1: Jest & SuperTest
Step 2: Refactor
Step 3: Simple test
Step 4: Jest syntax
Step 5: Organize tests
Step 6: Endpoint testing
Step 7: Jest & MongoDB
Step 8: Setup & Teardown
Step 9: Test data
Step 10: Test Authenticate
Step 11: Focus or skip
Step 12: Code coverage
Step 13: More tests
Step 14: Exercise
Step 15: To be continued!
QuickNote API [VI]
❱
Step 1: auth.test.js
Step 2: Refactor
Step 3: users.test.js
Step 4: Refactor
Step 5: Lean objects
Step 6: Global Error Handler
Step 7: Update NoteDao
Step 8: Update notes
Step 9: notes.test.js
Step 10: Run all tests
Step 11: Refactor
Step 12: CORS
Step 13: helmet
Appendix
HTML
CSS
Heroku CLI
Light (default)
Rust
CS280 Homepage
Step 8
Let's try the server in Postman to ensure auth routes work as expected.
POST
/register
POST
/authenticate