01
Course Introduction & Tools
Objectives
Class Logistics & Materials
Course Structure
Course Tools
Folder Organization
Confirm Node & Git Installation
What is Programming?
What is JavaScript?
Pseudocode
Class Exercise - Smart Thermostat Pseudocode
Group Exercise - Rock, Paper, Scissors
02
JavaScript Basics
Objectives
Variables
What are Variables?
Declaring Variables
Updating Variables
Naming Rules for Variables
var keyword
const
When to use let vs const
Data Types
Strings
Numbers
Booleans
Arrays
Objects
Arithmetic Operators
Comparison Operators
Logical Operators
03
Control Flow and Loops
Objectives
Conditionals
if Statement
if..else Statement
if..else if Statement
ternary Operator
Switch Statement
Loops & Iteration
while Loop
do..while Loop
for Loop
forEach Loop
Lab: JS Basics, Control Flow & Loops
04
Functions and Scope
Objectives
Function Overview
Declaring Functions
Calling Functions
Hoisting
Returning Values from Functions
Working with Parameters
Functions Calling Other Functions
Function Expressions & Anonymous Functions
Arrow Functions
Scope
Global Scope
Local Scope
Scope in Block Statements
Single Responsibility Principle
Code Along: Rolling Dice
05
Arrays & Objects
Objectives
Warm Up: JS Basics, Control Flow and Loops Practice
Warm Up: Functions Practice
Array Review
Creating Arrays
Accessing Array Values
Updating Array Values
Adding & Removing Items
.push()
.pop()
.shift()
.unshift()
.slice()
length Property
Array Iterators
.forEach()
.map()
.find()
.filter()
.reduce()
Other Iterators
Objects
Creating Objects
Accessing Properties
Dot Notation
Bracket Notation
Assigning Properties
Methods
Nested Objects
06
DOM & jQuery
Objectives
Warm Up: Iterators Practice
Document Object Model
jQuery Overview
What is jQuery?
Benefits of jQuery
Document Ready Function
Adding jQuery to your Projects
Add jQuery via Download
Add jQuery via CDN
jQuery Syntax
jQuery Selectors
jQuery Objects
Code Along: Rolling Dice jQuery
jQuery Events
Events Handlers
Mouse Events
.click() Event
.hover() Event
Form Events
.change() Event
.submit() Event
Other Events
jQuery Manipulation
Getting & Setting Content
.text()
.html()
.val()
.attr()
Inserting & Removing Content
.append()
.prepend()
.before()
.after()
CSS & Style Manipulation
.css()
.addClass()
.removeClass()
.toggleClass()
jQuery Effects
.show() & .hide()
.toggle()
.slideUp() & .slideDown()
.slideToggle()
.fadeIn() & .fadeOut()
Other Effects
jQuery Traversing
ancestors
descendants
Other Traversal Methods
07
DOM & jQuery II
Objectives
$(this)
event.currentTarget
Code Along: Color Scheme Switcher
Code Along: Traffic Light
Code Along: Score Keeper
08
DOM & jQuery III
Code Along: HiLo
Lab: CitiPix
09
HTTP and APIs
Objectives
Clients & Servers
HTTP
Overview
HTTP Requests
URLs
HTTP Methods
GET
POST
PUT
DELETE
HTTP Responses
Status Codes
Code Along: CRUD API Requests
APIs
Overview
Finding APIs
Data Formats
API Keys
JSON
Overview
JSON.stringify()
JSON.parse()
AJAX
Overview
AJAX Requests using Native JS
AJAX Requests with jQuery
Code Along: Giphy API
Lab: Random Color API with $.ajax()
10
Asynchronous JS and Promises
Objectives
Synchronous Programming
Asynchronous Programming
Simulating Async Operations
Challenges of Async Programming
Handling Async Issues with Callbacks
Promises
Overview
Creating Promises
Consuming Promises
Handling Async Issues with Promises
Passing values with Promises
Error Handling with .catch()
Code Along: Random Color API with Promises
Async / Await
Overview
Handling Async Issues with Async / Await
Passing Values with Async / Await
Error Handling with Async / Await
Code Along: Random Color API with Async/Await
Lab: Giphy API with Promises
Lab: Giphy API with Async / Await
11
Lab: SAT Vocab Flashcards App
Objectives
Instructions
Requirements
12
Project: Build a Slackbot
Objectives
Project Overview
Documentation
Tutorial
Step 1: Create New Slack Workspace
Step 2: Create New Slack App
Step 3: Set Up Node Application
Step 4: Run ngrok
Step 5: Create a test Slash command
Step 6: Install App to Workspace
Step 7: Responding to Slash Commands
Step 8: Test your Slash Command
Step 9: Access Slash Command Parameters
Step 10: Create Weather Slash Command
Step 11: Make API Request to OpenWeather
Step 12: Respond to Slack with Current Weather
Step 13: Use Environment Variables to Protect Secure Credentials
Step 14: Handle Errors Gracefully
Step 15: Enhance Weather Response with Emojis
13
Object Oriented Programming (OOP)
Objectives
Classes
Overview
Constructor
Encapsulation
Instances
Methods
Overview
Getters & Setters
General Methods
Static Methods
Inheritance
Overview
Super & Extends
Code Along: Bank ATM
14
Lab: OOP Order Checkout App
Objectives
Instructions
Requirements
15
Intro to CRUD and Firebase
Objectives
CRUD
Firebase
Overview
Benefits
NoSQL Databases
Firestore Database
Code Along: Firebase Playlist App
16
Project: Firebase Todo App
Objectives
Instructions
Requirements
17
Deploying and Hosting
Objectives
Github Pages
Code Along: Hosting with Github Pages
Surge
Code Along: Hosting with Surge
Securing Sensitive Credentials with Parcel
Code Along: Using Environment Variables with Parcel
Heroku
Code Along: Hosting with Heroku
Step 1: Install Heroku
Step 2: Prepare the App
Step 3: Run Heroku Locally
Step 4: Deploy to Heroku
18
Lab: Deployfest
Lab: Deployfest
19
Final Projects Lab
Lab: Final Projects
20
Final Project Presentations
Presentation Script
A.
Class Resources
Office Hours
Documentation
Git Commands
Git Workflow for Submitting Assignments
Keyboard Shortcuts
Recommended Atom Editor Settings
Opening Atom from Command Line
Working with Atom Themes
Show Git-Ignored Files in Atom
Node & Git Installation
Mac OS X Installation Instructions
Windows Installation Instructions
Linux Installation Instructions
Keys to Success
Learning HTML & CSS
Coding Challenge Sites
CORS
Common Final Project Tasks
B.
Homework Assignments
HW Assignment #1
HW Assignment #2
HW Assignment #3
HW Assignment #4
C.
Final Projects
Overview & Requirements
Milestones & Due Dates
I.
Submit Project Ideas
II.
Get Idea Approved
III.
Create Github Repository for Final Project
IV.
Create & Submit Wireframes
V.
Create Project Plan
VI.
Host Final Project
VII.
Complete Final Project
D.
Command Line JS & Git
Objectives
Intro the the Command Line
Code Along: Command Line Intro
Git Overview
Github
Git Vocabulary
Repository
Commit
Branch
Master Branch
Merge
Push
Pull
Fork
Clone
Pull Request
Git Basics
Code Along: Basic Git Workflow
Code Along: Git Branching & Merging
E.
Solutions
Classwork & Lab Solutions
Homework Solutions
F.
Continue Learning
Free Courses & Guides
JSD
>
DOM & jQuery
>
jQuery Manipulation
> Getting & Setting Content
Getting & Setting Content
Getting & Setting Content
Getting & Setting Content
.text()
.html()
.val()
.attr()