Homepage
Notes
1.
Preface
❱
1.1.
Instructional Approach
1.2.
JavaScript History
1.3.
Why Learn JavaScript?
2.
SleepTime App
❱
2.1.
Step 1: HTML
2.2.
Step 2
2.3.
Step 3: events
2.4.
Step 4: styling
2.5.
Step 5: DOM
2.6.
Step 6: getElementById()
2.7.
Step 7: Date object
2.8.
Step 8: script
2.9.
Step 9: Style Guide
2.10.
Exercise 1
2.11.
Exercise 2
3.
JavaScript Basics
❱
3.1.
Variables
3.2.
Syntax
3.3.
Types
3.4.
Strings
3.5.
Numbers
3.6.
Arithmetics
3.7.
Math
3.8.
Objects
3.9.
Array
3.10.
Date
4.
SleepTime App with Git
❱
4.1.
Step 1: init & status
4.2.
Step 2: add & commit
4.3.
Step 3: log & diff
4.4.
Step 4: reset
4.5.
Step 5: gitignore
4.6.
Step 6: createElement
4.7.
Step 7: Event Listener
4.8.
Step 8: GitHub
4.9.
Step 9: GitHub Pages
4.10.
Step 10: clone, push & pull
4.11.
Step 11: merge
4.12.
Step 12: branching
4.13.
Step 13: GitHub Flow
5.
Control Flow
❱
5.1.
Equality Operators
5.2.
Comparison Operators
5.3.
Logical Operators
5.4.
Boolean-ish
5.5.
if statement
5.6.
switch statement
5.7.
Loops
5.8.
Enhanced Loops
6.
Tic Tac Toe
❱
6.1.
Step 1: Starter
6.2.
Step 2: Game board
6.3.
Step 3: cross & naught
6.4.
Step 4: add event listener
6.5.
Step 5: Game board
6.6.
Step 6: modular structure chart
6.7.
Step 7: functions
6.8.
Step 8: refactor?
7.
Functions
❱
7.1.
Defining Functions
7.2.
Function Expression
7.3.
Arrow Functions
7.4.
Hoisting
7.5.
Arguments
7.6.
Function Scoping
7.7.
Inner Functions
7.8.
Functional Encapsulation
7.9.
Closures
7.10.
Mimic OOP
7.11.
Functions are Objects
7.12.
Methods
7.13.
Function Context
7.14.
Exercise
8.
Brick Breaker
❱
8.1.
Step 1: Starter
8.2.
Step 2: Canvas
8.3.
Step 3: Animation
8.4.
Step 4: Block class
8.5.
Step 5
8.6.
Step 6: Sprite Class
8.7.
Step 7
8.8.
Step 8: Ball Class
8.9.
Step 9: bounce
8.10.
Step 10: Paddle Class
8.11.
Step 11
8.12.
Step 12: Collision Detection
8.13.
Step 13: Game over
8.14.
Step 14: Brick Class
8.15.
Step 15
8.16.
Step 16: Scores
8.17.
Step 17
9.
Classes
❱
9.1.
Class Syntax
9.2.
Instantiate Classes
9.3.
Dot operator
9.4.
The this keyword
9.5.
this keyword, again!
9.6.
Information Hiding
9.7.
Setters & Getters
9.8.
Static Fields & Methods
9.9.
Inheritance
9.10.
Polymorphism
9.11.
Class Expression
10.
SIS API & Fetch
❱
10.1.
Step 1: HTML boilerplate
10.2.
Step 2: Dropdown
10.3.
Step 3: Sample data
10.4.
Step 4: populateSelector()
10.5.
Step 5: search()
10.6.
Step 6: showSearchResults()
10.7.
Step 7: Popular CSS libraries
10.8.
Step 8: Bootstrap
10.9.
API
10.10.
SIS
10.11.
HTTP
10.12.
SIS API
10.13.
SIS API & CORS Policy
10.14.
Postman
10.15.
Fetch
10.16.
Step 9: fetch schools & terms
10.17.
Step 10: fetch courses
11.
Asynchronous
❱
11.1.
Some Things Take Time!
11.2.
Not All Tasks Created Equal!
11.3.
Asynchronous Programming
11.4.
Understanding Async Operations
11.5.
Patterns for Dealing with Async Code
11.6.
Callback
11.7.
Callback Hell!
11.8.
Promises
11.9.
Replacing Callbacks with Promises
11.10.
Promises Exercise
11.11.
Chaining Promises
11.12.
Async & Await
12.
Modules
❱
12.1.
IFEE Revisited!
12.2.
An ES6 Module is just a file!
12.3.
Exporting
12.4.
Importing
12.5.
Module does not create a type!
12.6.
Default Export/Import
12.7.
Before ES6 Modules
13.
Node
❱
13.1.
Before Node
13.2.
Run a script file with Node
13.3.
Node Module System
13.4.
Module Wrapper Function
13.5.
Path Module
13.6.
OS Module
13.7.
FS Module
13.8.
HTTP Module
13.9.
A very basic API
14.
Express
❱
14.1.
NPM
14.2.
Step 1: Adding Express
14.3.
Installing
14.4.
Step 2: Hello Express
14.5.
Dissecting the code
14.6.
Step 3: A very basic API
14.7.
Step 4: Routing
14.8.
Step 5: Web Application
14.9.
Step 6: Login
14.10.
Step 7: The Dashboard!
14.11.
Step 8: Template Engine
14.12.
Step 9: Serving Static Files
15.
Heroku
❱
15.1.
Step 1: Create App
15.2.
Step 2: Procfile
15.3.
Step 3: Using CLI
16.
YouNote API
❱
16.1.
Step 1: Express app
16.2.
Step 2: Note class
16.3.
Step 3: nodemon
16.4.
Step 4: Data Access Object
16.5.
Step 5: CRUD Operations
16.6.
Step 6: CRUD Operations
16.7.
Step 7: HTTP GET
16.8.
Step 8: Query Parameter
16.9.
Step 9: Path Parameter
16.10.
Step 10: HTTP POST
16.11.
Step 11: Input validation
16.12.
Step 12: HTTP DELETE
16.13.
Step 13: HTTP PUT
16.14.
Step 14
17.
Refactoring YouNote API
❱
17.1.
Step 1: Postman Collections
17.2.
Step 2: Express Router
17.3.
Step 3: Data & Error fields
17.4.
Step 4: faker package
17.5.
Step 5: CORS
17.6.
Step 6: helmet
17.7.
Step 7: Middleware functions
18.
MongoDB
❱
18.1.
Step 1: Atlas
18.2.
Step 2: Database/Network Access
18.3.
Step 3: Cluster
18.4.
Step 4: mongoose
18.5.
Step 5: Cluster URI
18.6.
Step 6: dotenv
18.7.
Step 7: connect()
18.8.
Step 8: Schema & model
18.9.
Step 9: create()
18.10.
Step 10: find() & findById()
18.11.
Step 11: findByIdAndDelete()
18.12.
Step 12: findByIdAndUpdate()
19.
YouNote API Persisted
❱
19.1.
Step 1: Note Schema
19.2.
Step 2: Note DAO
19.3.
Step 3: async create
19.4.
Step 4: async read
19.5.
Step 5: async delete
19.6.
Step 6: Note Routes
19.7.
Step 7: router.get
19.8.
Step 8: router.post
19.9.
Step 9: router.put
19.10.
Step 10: async sample notes
19.11.
Step 11: mongoose connect
19.12.
Step 12: db.connect
19.13.
Step 13
20.
YouNote App
❱
20.1.
Step 1: starter code
20.2.
Step 2: views
20.3.
Step 3: server
20.4.
Step 4: axios
20.5.
Step 5: heroku config var
20.6.
Step 6: API URL
21.
Users App
❱
21.1.
Step 1: starter code
21.2.
Step 2: views
21.3.
Step 3: database
21.4.
Step 4: routes
21.5.
Step 5: post form
21.6.
Step 6: register user
21.7.
Step 7: login
21.8.
Step 8: flash message
21.9.
Step 9: cookie-parser
21.10.
Step 10: read/write cookie
21.11.
Step 11
21.12.
Step 12
21.13.
Step 13: issue with cookies
21.14.
Step 14: clear cookie
21.15.
Step 15: username cookie
21.16.
Step 16: protected resource
21.17.
Step 17
21.18.
Step 18: signed cookie
21.19.
Step 19: expire cookie
21.20.
Step 20: bcrypt
22.
React: The basics
❱
22.1.
Step 1: create-react-app
22.2.
Step 2
22.3.
Step 3
22.4.
Step 4: React Element
22.5.
Step 5: React Component
22.6.
Step 6: JSX
22.7.
Step 7: think in components
22.8.
Step 8: JS in JSX
22.9.
Step 9: props
22.10.
Step 10: binding
22.11.
Step 11: state
22.12.
Step 12: data flow
22.13.
Step 13: setState
22.14.
Step 14: styling
22.15.
Step 15: import
23.
Zirectory (Part I)
❱
23.1.
Step 1: starter code
23.2.
Step 2: wireframe
23.3.
Step 3: components
23.4.
Step 4: sample data
23.5.
Step 5
23.6.
Step 6: ListMeetings
23.7.
Step 7: Meeting
23.8.
Step 8: QR Code
23.9.
Step 9: Delete btn
23.10.
Step 10: removeMeeting
23.11.
Step 11: Search
23.12.
Step 12: updateQuery
23.13.
Step 13: searching
24.
Zirectory (Part II)
❱
24.1.
Step 1: wireframe
24.2.
Step 2: Add btn
24.3.
Step 3: react-router
24.4.
Step 4: CreateMeeting
24.5.
Step 5: Controlled Component
24.6.
Step 6: handleChange
24.7.
Step 7: handleSubmit
24.8.
Step 8: withRouter
24.9.
Step 9: Link
24.10.
Step 10: prop-types
24.11.
Step 11
24.12.
Step 12: React Developer Tools
25.
Zirectory (Part III)
❱
25.1.
Step 1: backend
25.2.
Step 2: axios
25.3.
Step 3: Lifecycle Methods
25.4.
Step 4: removeMeeting
25.5.
Step 5: addMeeting
25.6.
Step 6: SRP
25.7.
Step 7: Refactoring
25.8.
Step 8: Build & Serve
25.9.
Step 9: Netlify
25.10.
Step 10: _redirects
25.11.
Step 11: environment vars
26.
Appendix
❱
26.1.
HTML
26.2.
CSS
26.3.
Git & GitHub
26.4.
Styling Guidelines
26.5.
Quiz
27.
Appendix: JHU SSO
❱
27.1.
Step 1: Terms & Jargons
27.2.
Step 2: How does SSO work?
27.3.
Step 3: How does SAML work?
27.4.
Step 4: Setup
27.5.
Step 5: Passport-SAML Library
27.6.
Step 6: Login Route
27.7.
Step 7: Callback Route
27.8.
Step 8: The SAML Strategy
27.9.
Step 9: The configuration options
27.10.
Step 10: Generate the XML file!
27.11.
Step 11: Public-key cryptography
27.12.
Step 12: Using OpenSSL Tool
27.13.
Step 13: Using the generated keys
27.14.
Step 14: Reuse the generated keys
27.15.
Step 15: Middlewares
27.16.
Step 16: Final touches
27.17.
Step 17: Deploy
Light (default)
Rust
Coal
Navy
Ayu
CS280 Notes
Control Flow
In this chapter, we will explore JavaScript control structures.
