Schedule – Spring 2018

Week 1

Introduction

T January 9

Intro notes

Software, Tools and Resources

Eloquent JavaScript

 

TH January 11

Review HTML/CSS, introduce Forms

Intro to Programming Concepts

 


Week 2

Javascript 1

Assignments: CodeAcademy | Introduction to Javascript : “Introduction to JavaScript”, “Variables”,”Control Flow”

Read: Eloquent Javascript

———————————————

January 16

JavaScript Exercises: statements, comments, data, strings, numbers, operators, conditionals
JavaScript Objects : Math, Date, Array

TH January 18

Mini-project#1: Create an interactive text toy

Mini-projects List

W3Schools Reference

 


Week 3

JavaScript 2

Assignments: CodeAcademy |Introduction to Javascript : “Functions”, “Scope”, “Arrays”, “Loops”

Read: Eloquent Javascript

——————————————————–

January 23

Digital Canvas – submit!

Mini-projects List

JavaScript Talk:

  • functions
  • for loops, while loops
  • arrays

TH January 25

Nested arrays and loops

Organize class partners based on rating : Pair students

Corrected Pair students

Mini-project#2: TBA

Circles


Week 4

Javascript 3

Assignments: CodeAcademy |Introduction to Javascript : “Iterators”, “Objects”

Read: Eloquent Javascript:

———————————————–

January 30

Mini-projects List

JavaScript and the DOM
traversing

nested functions
nested for loops
nested conditionals
nested arrays

array methods

TH February 1

Spencer’s awesome solution:  Pair students version 3

Mini-project#3: Create a What Thing Are You Quiz

WORKSHOP: What Thing Are You Quiz?  (functions and for loop)

Vote example
Scale example
Complex example

javascript-test.html (complete)

Intro to Objects


Week 5

Javascript 4 / Google Maps API

Assignment: Get familiar with the Google Maps Javascript API

Try to put a simple map on a webpage

————————————————-

February 6

Tech 101 Workshops

DTC Superpower survey

Mini-projects List

 

Intro to Objects

object literals :

{ 
name: 'James', 
age: 23, 
hobbies: ['hiking','cooking','sleeping'],
greeting: function() {return 'Whatz up!';}
}

Google Maps Intro – class notes

Start a map

 

TH February 8

Map Resource page

WORKSHOP: Map Story

Mini-project#4: Create a Map Tour

JavaScript Quiz Study Guide

 


Week 6

jQuery 1

Assignments: CodeAcademy – jQuery Setup, jQuery EffectsMouse Events,

‘————————————————-

February 13

Mini-projects List

jQuery  intro on w3schools

Events
Effects

jQuery starter page

You Don’t Need jQuery

TH February 15

Quiz #1: JavaScript

CodeAcademy Javascript complete!

Mini-project#5 : Build a Slideshow

jQuery Slideshow Template

Slideshow with html images

Code your own slider

 


Week 7

jQuery 2

Assignments: CodeAcademy |   Modifying CSS with Style Methods, Traversing the DOM

February 20

Sample Map for review

Map Resource page

Map Story Projects (in progress)

WORKSHOP: Map Story Projects

TH February 22

Rick Silva – Digital Artist Talk

 


Week 8

Map Story

Assignment: Finish Map Project

——————————————————-

February 27

Mini-projects List – jQuery galleries

Sample Map for review

Map Resource page

Previous Map Story Projects

Map Story Projects (in progress)

Quiz overview

TH March 1

Quiz#2:  jQuery

WORKSHOP: Map Story

Map Story Projects (in progress)


Week 9

Creative Programming 1

Assignments: CodeAcademy |Introduction to Javascript : “Classes”, “Browser Compatibility and Transpilation”, “Modules”, “Requests”  ( 5 extra credit points – 3 weeks to complete )

March 6

Complete jQuery CodeAcademy Tutorials

WORKSHOP: Map Story

Map Story Projects (in progress)

TH March 8

DUE: Map Project
View Map Story Projects

Creative Programming: 10%

This project is intended to loosen you up with programming and to test some ideas towards your final project. Think of this as the preliminary phase of the the final project. Don’t worry about something polished or even practical. The idea is to push your current knowledge of javaScript and jQuery towards building interesting interactive objects. The crazier your approach, the better. You will be graded on your effort and your process of discovery.

  • What HTML5 & JavaScript functionalities are you exploring?
  • What are you going to research?
  • What are the development steps to complete the project?
  • How is this project testing ideas for a final project?

Objects and Classes talk

Pair students

Mini-project#6 : Build an Javascript Class

Mealplan example

 

 


Week 10

SPRING BREAK

March 13

NO CLASS

 

TH March 15

NO CLASS

 

 


Week 11

Creative Programming 2

——————————————————-

March 20

Creative Programming: Notes

Canvas Element
Javascript Drawing and Animation

canvas starter template

creating a sprite with canvas

Mini-project#7 : Create a Drawing/Animation with Canvas

Timing EventsSetTimeoutSetInterval

TH March 22

Mini-projects List

———–

Requests/Ajax

intro to Ajax

jQuery and Ajax

intro to JSON

open weather map api

weather app template

Mini-project#8 : Create a Weather App

student pairing


Week 12

Creative Programming 3

Email me  a description of your Final Project idea

—————————————————————————————

March 27

Mini-projects List

———-

Audio/Video and JavaScript

jQuery and the DOM

video-audio-javascript
video-audio-javascript zip

Mini-project#9 : Create an Interactive Video/Audio

miro converter
freesound

Pair students

TH March 29

View Creative Programming Projects

WORKSHOP: Creative Programming Project

 


Week 13

Final Project

T April 3

Web App vs. Native App vs. Hybrid App

Phonegap

Capacitor/Ionic

View Creative Programming Projects

WORKSHOP: Creative Programming Project

 

TH April 5

DUE: Creative Programming Project
View Creative Programming Projects

Final Project: 30%

The Final Project is quite open, but it must include your own scripting in JavaScript/jQuery and design with HTML/CSS. You have worked on small scripting projects, worked with an API and had the chance to write your own scripts in a creative way. Now is the time to put all of these skills together in a project for your portfolio. The subject and genre may be anything, but you will have to design something that involves user interaction with multimedia. Multimedia means using text, images, video, audio, maps in an integrated way. JavaScript and jQuery can be used to get data, add animation, create galleries, create dynamic video/audio, interactive elements, generative/random procedures  -anything you want. You will be graded on your own scripting using JavaScript/jQuery (30%), interface and interaction design (30%) and the completion of the content (30%).

Small group projects (2 people) are allowed, but you must work together on thinking through the JavaScript and the design.

In the next three weeks, we will begin each class discussing 2-3 final projects in progress. This means that you must make progress after each class. If you are not making progress, this will be reflected on your final grade.

BRAINSTORM: Final Project

-email me your Final project description


Week 14

Final Project

Work on final projects

—————————————————————————————

April 10

Nick Acker – q & a about JavaScript Developer jobs

WORKSHOP: Final Project

Final Projects (in-progress) 

 

TH April 12

WORKSHOP: Final Project

Final Projects (in-progress) 


Week 15

Final Project

April 17

WORKSHOP: Final Project

Final Projects (in-progress) 

TH April 19

Projects – Critique

Final Projects (in-progress) 

WORKSHOP: Final Project


Week 16

Final Presentations

April 24

Class Evaluations

Final Projects (in-progress) 

front-end-handbook/2018/

**On your Final Projects, include a brief statement (as a link or pop-up) and commented-out description (on the html page) about the sources you used (include links) and how/what your scripted.

Workshop

TH April 26

Final Projects Due on Wed. December 13

Final Projects