Lectures
This page will contain the slides, notes, and example code pertaining to lecture.
- Tentative Course Schedule: See the roadmap for the quarter.
- NodeJS install instructions: Follow these instructions to install NodeJS on your machine.
- MongoDB install instructions: Follow these instructions to install MongoDb on your machine.
June 5: FINAL LECTURE: What’s next?
- Slides: Google slides / lecture27.pdf
- Important ideas we didn’t cover
- Module bundling with browserify
- Older browser support with babeljs
- Testing
- Accessibility
- Libraries and frameworks
- Rants and general advice
- Don’t use jQuery: prefer babeljs
- Don’t use Bootstrap: learn CSS
- Pick a frontend framework and build something on it
- Important ideas we didn’t cover
- No lecture on Wednesday: Work on your final project!
June 2: Middleware; Data modeling; Authentication
- Slides: Google slides / lecture26.pdf
- Middleware and Routes
- Single-page web app
- More MongoDB examples
- Authentication
- Code
May 31: Templates, Modules, and Routers
- Slides: Google slides / lecture25.pdf
- Web application architecture
- Multi-page web apps (server-side rendering)
- Templates with Handlebars
- NodeJS Modules
- Express Router
- Web application architecture
- Code
May 29: NO LECTURE
May 26: MongoDB and NodeJS
- Slides: Google slides / lecture24.pdf
- MongoDB and NodeJS
- insert, find, delete, update, upsert
ObjectID
- Web application architecture
- Multi-page web apps (server-side rendering)
- Single-page web apps
- MongoDB and NodeJS
- Code
- Final Project FINAL PROJECT ASSIGNED
May 24: MongoDB
- Slides: Google slides / lecture23.pdf
- MongoDB
mongo
/mongod
- CRUD operations
- MongoDB and NodeJS
- MongoDB
- Code
- MongoDB Installation
- Instructions: Follow these instructions to install MongoDB on your machine. This will be necessary to run lecture examples.
May 22: Saving data; MongoDB intro
- Slides: Google slides / lecture22.pdf
- Saving data
- POST body
body-parser
- Saving to a file
- MongoDB: Saving to a database
- Saving data
- Code
May 19: async / await
; more Express; more fetch()
- Slides: Google slides / lecture21.pdf
async / await
- Sending data to the server
- Returning JSON from Express
- Code
- Homework 5 HW5 assigned
May 17: More Express; fetch()
and localhost
- Slides: Google slides / lecture20.pdf
npm
- Express
fetch()
to localhost
- Code
May 15: Servers, NodeJS and Express
- Slides: Google slides / lecture19.pdf
- Servers in general
- NodeJS
npm
- Express
- fetch() to localhost
- Code
- Node Installation
- Instructions: Follow these instructions to install NodeJS on your machine. This will be necessary to run lecture examples, to complete HW5 and to complete the final project. (Thanks to our TA Zach Maurer for writing these awesome instructions!)
May 12: More Fetch; JavaScript Event Loop
- Slides: Google slides / lecture18.pdf
- More Fetch API:
- Querying 3rd-party REST APIs
- Submitting forms
- CORS
- Asynchrony in JavaScript
- JavaScript event loop
- More Fetch API:
- Code
- Fetch from Spotify / demo
- Form elements JS syntax: select, textarea, checkbox
May 10: Fetch API and JSON; 3rd-party APIs
- Slides: Google slides / lecture17.pdf
- Fetch API and JSON
- Fetch in a class
- REST APIs
- HTTP Methods: GET
- Query parameters
- Code
- GitHub repo / live: Several examples of Fetch API
- Form elements JS syntax: select, textarea, checkbox
May 8: Fetch API, Promises
- Slides: Google slides / lecture16.pdf
- Finish functional JS
- Currying
- Anonymous functions
- Closures
- Fetch API
fetch()
- Promises and
.then()
- JSON
- Finish functional JS
May 5: Callbacks; Functional JavaScript
- Slides: Google slides / lecture15.pdf
- Callbacks
- Functional JavaScript
- Closures
- Code
- Button example: Communicating between two classes (
Button
toMenu
) with callbacks
- Button example: Communicating between two classes (
May 3: Custom events, this
, and bind
; first-class functions
- Slides: Google slides / lecture14.pdf
- Custom events example
this
keyword /bind()
- First-class functions
- Callbacks
- Code
- Button example: Communicating between two classes (
Button
toMenu
) with custom events this
mystery 1: See howthis
changes in different contextsthis
mystery 2: See howthis
changes in different contexts- Present example: Communicating between two classes (
Present
toApp
) via callbacks
- Button example: Communicating between two classes (
May 1: More ES6 classes; this
and bind
- Slides: Google slides / lecture13.pdf
- More ES6 classes
this
keyword /bind()
- Communicating between classes
- Custom events
- JavaScript application architecture
Apr 28: CSS Animations; ES6 classes
- Slides: Google slides / lecture12.pdf
- Keyboard events
- Pointer events
- Animations
- Intro ES6 classes
- Code: (see more in slide deck)
- Dragon walk: Codepen example of dragging a dragon along the x-axis
- 2D dragon walk
- OO present with bind / live: Object-oriented Present example
- OO photo album / live: Object-oriented Photo Album example
Apr 26: Keyboard, Mouse, and Touch events
- Slides: Google slides / lecture11.pdf
- Keyboard events
- Pointer events
- Animations
- Code:
- key-events.html: Prints out keyboard events in the Web Console.
- photos-start.html: Starter code for our photos example.
- photos-desktop-finished.html: Finished photo album example with keyboard navigation
- photos-mobile-finished.html: Finished photo album example with swipe left/right navigation
Apr 24: More JavaScript events
- Slides: Google slides / lecture10.pdf
- Event propagation: bubbling and capturing
- Finish case study
data-*
attributes- Mischief and hacks
- Code:
- display-toggle.html: Display toggle. Shows how clicking an inner element fires the click event on the outer element.
- bubbling.html: Event bubbling example. See slides for more variants.
- empty-extension.zip: Empty extension that does nothing but print a log message
- quora-extension.zip: Extension that removes the Quora login nag screen
- adblock-block-block.zip: Extension that unblocks Adblock on OnDemandKorea
Apr 21: More DOM; case study
- Slides: Google slides / lecture09.pdf
- Adding and removing elements from DOM
- Case Study: tic-tac-toe
- Traversing the DOM
- Code:
- dom-walk-script.js / html: Recursively prints out every DOM element of the HTML page.
- tictactoe.js / html / css: Simple tic-tac-toe game
Apr 19: DOM and events
- Slides: Google slides / lecture08.pdf
- Finish language feature tour
- DOM: Document Object Model
- Basic event handling
Apr 17: Introduction to JavaScript
- Slides: Google slides / lecture07.pdf
- What is JavaScript?
- Language feature tour
- Code:
- first-js.html / script.js: A button with a simple event handler.
Apr 14: position
; Mobile web
- Slides: Google slides / lecture06.pdf
position
- Useful
background-image
properties - Mobile CSS
- Skipped but useful:
em
andrem
- Code:
- mobile.html / css: Our first mobile web example.
- squarespace-mobile.html / css: The mobile version of our Squarespace layout.
Apr 12: More flexbox and layout
- Slides: Google slides / lecture05.pdf
- More flexbox: shrink and grow
height
/width
percentage quirks:vh
/vw
andbox-sizing
- Block vs inline guide: review if necessary
- Code:
- squarespace.html / css: A rough copy of the Bedford Squarespace template. Be sure to inspect elements and view the source to see how it works!
Apr 10: Flexbox
- Slides: Google slides / lecture04.pdf
- Finish up Box Model
- Debugging with Chrome Inspector
- Case study: Squarespace layout
display: flex;
- Google Fonts
- Background images
- Homework 1 HW1 assigned
Apr 7: More CSS; CSS Box Model
- Slides: Google slides / lecture03.pdf
- HTML history and standard HTML
- Combining selectors; cascading; inheritance
- Box model
- HW0 DUE HW0 due at 11:59pm
Apr 5: Block vs inline; classes and ids
- Slides: Google slides / lecture02.pdf
- Block vs inline
div
andspan
class
es andid
s- Block vs inline guide
- Code: Course webpage
Apr 3: Course overview and basic HTML/CSS
- Slides: Google slides / lecture01.pdf
- Syllabus and course info
- HTML and CSS basics: syntax; element selector
- Homework 0 HW0 assigned