Schedule – Spring 2019

Week 1

Introduction

T January 9

Syllabus Overview

Intro notes

Intro to Programming Concepts

 


Week 2

Javascript 1

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

Read (optional): Eloquent Javascript

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

T January 15

JavaScript Starter file

JavaScript Exercises: statements, comments, data, strings, numbers, operators, conditionals

JavaScript Objects : Math, Date, Array

Student Pairings

Mini-project#1:  Alter Circles Script

Circles

DOM Styles reference

Mini-projects Spring 2019

previous: Mini-projects Fall2018 |  Mini-projects Spring 2018


Week 3

JavaScript 2

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

Read: Eloquent Javascript

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

January 22

View Mini-projects Spring 2019

JavaScript Talk:

  • conditionals
  • arrays
  • functions
  • for loops, while loops
  • nested arrays and loops

Working with strings

W3 Schools Reference:

Student Pairings

Mini-project#2: Create an interactive text toy

mini-project-2 template – story-generator

Mini-projects Spring 2019

previous: Mini-projects Fall2018 |  Mini-projects Spring 2018


Week 4

Javascript 3

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

Read: Eloquent Javascript:

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

January 29

Mini-projects Spring 2019

JavaScript and the DOM
traversing

innerHTML = “some text”;
innerHTML += “some more text”;

Array Methods:

pop(); // remove the last element of an array:
push(); // add a new item to an array:
shift(); // remove the first item of an array:
unshift(); // add new items to the beginning of an array:
splice(); // adds/removes items to/from an array, and returns the removed item(s)
sort(): // the sort() method sorts an array alphabetically, and sets number arrays to ascending or descending
slice(); // returns the selected elements in an array, as a new array object.

Iterators:

forEach(); // calls a provided function once for each element in an array, in order
findIndex();  // returns the index of the first element in an array that pass a test (provided as a function)
filter(); // creates an array filled with all array elements that pass a test (provided as a function).
map(); // creates a new array with the results of calling a function for every array element.
some(); // checks if any of the elements in an array pass a test (provided as a function).
every(); // method checks if all elements in an array pass a test (provided as a function)
reduce(); // method reduces the array to a single value

Intro to Objects

Student Pairings

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)

Mini-projects Spring 2019

previous: Mini-projects Fall2018 |  Mini-projects Spring 2018

Overview Maps


Week 5

Javascript 4 / Mapbox API

Assignment: View Mapbox API

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

T February 5

**This night is an independent work night. We will not meet in class, as I will be away giving a talk in Boulder. Read and complete what is below.* Email me if you have questions.*

The JavaScript Quiz  has been changed to February 19th, in two weeks we will go over study guide.

Complete Mini-project #3 – What Thing Are You?

Read the Maps Notes page: Maps Intro and do the mini-project #4 which is to create a  simple map with Mapbox API. Mini-project#4 : Make a Map

When we meet again on February 12th, you should have completed Mini-project#3 : What Thing Are You Quiz and Mini-project#4 : Make a Map

Codeacademy: You should complete Javascript tutorials up to “Objects”. And start the tutorials for jQuery.

Start planning the first JavaScript project, the Map Story. Research places and sketch your ideas.

Map Story Project (10%)

Build a site using the Mapbox API .  Create a map with at least 5 markers that tells a story about a place you visited, lived in, would like to visit or make fictional journey across different locations. Include images and text, video/audio (if needed) and a Mapbox map with javascript and interactive features with jQuery.

 

 


Week 6

jQuery 1

Assignments: CodeAcademy – jQuery Setup, jQuery EffectsMouse Events,

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

February 12

CMDC Survey – superpowers

Mini-projects Spring 2019

What Thing Are You Quizzes

CodeAcademy Javascript complete!

JavaScript Quiz Study Guide

<————>

jQuery  intro on w3schools

Events
Effects

jQuery tutorial emptyjQuery tutorial filled

You Don’t Need jQuery

Mini-project#5 : Build a Slideshow

jQuery Slideshow Template

Slideshow with html images

Code your own slider

Mini-projects Spring 2019

previous: Mini-projects Fall2018 |  Mini-projects Spring 2018

<————>

Maps Intro

WORKSHOP: Map Project

Map Story Project (10%) / Due February 26

Build a site using the Mapbox API .  Create a map with at least 5 markers that tells a story about a place you visited, lived in, would like to visit or make fictional journey across different locations. Include images and text, video/audio (if needed) and a Mapbox map with javascript and interactive features with jQuery.

 

 


Week 7

jQuery 2

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

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

February 19

Quiz #1: JavaScript

Mini-projects List– jQuery galleries

jQuery Quiz overview

WORKSHOP: Map Project


Week 8

Objects and Classes

Assignments: CodeAcademy | Introduction to Javascript : “Classes”  *Extra Credit

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

February 26

Complete jQuery CodeAcademy Tutorials

Due: Map Project

View projects

Objects and Classes

Mealplan example

Student Pairings

Mini-project#6 : Build an Javascript Class with Constructor

Mini-projects Spring 2019

previous: Mini-projects Fall2018 |  Mini-projects Spring 2018

 


Week 9

Creative Programming

T March 5

Quiz#2:  jQuery

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?

Creative Programming: Notes

Canvas Element
Javascript Drawing and Animation

canvas face

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

Timing EventsSetTimeoutSetInterval

Mini-projects Spring 2019

previous: Mini-projects Fall2018 |  Mini-projects Spring 2018


Week 10

Spring Break

T March 11

NO CLASS


Week 11

Creative Programming

T March 19

WORKSHOP: Creative Programming

Mini-projects Spring 2019

Server Requests/Ajax

intro to Ajax– asynchronous javascript and xml, passing data (GET or POST) without refreshing page

intro to XML– extensible mark-up language, used for storing and exchanging data.

jQuery and Ajax– ajax() method simplifies server requests

intro to JSON-javascript object notation, used for storing and exchanging data.

open weather map api

weather app template

Student Pairings

Mini-project#8 : Create a Weather App

Mini-projects Spring 2019

previous: Mini-projects Fall2018 |  Mini-projects Spring 2018


Week 12

Creative Programming #2

work on cp2

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

T March 26

Mini-projects Spring 2019

Audio/Video and JavaScript

jQuery and the DOM

video-audio-javascript
video-audio-javascript zip

WORKSHOP: Creative Programming Project

miro converter
freesound

Creative Programming Projects 2 – in progress

WORKSHOP: Creative Programming Project


Week 13

Final Project

work on cp2

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

T April 2

WORKSHOP: Creative Programming Project 2

Creative Programming Projects 2 – in progress

DUE: Creative Programming Project

Creative Programming Projects 2

Final Project: 20%

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 both 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

Develop Final Project idea

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

T April 9

Nick Acker visit – JavaScript Development talk

WORKSHOP: Final Project

Final Projects (in-progress) 

Nick Acker visit – web dev discussion

Final Projects (in-progress) 


Week 15

Critique/Device Testing

April 16

WORKSHOP: Final Project

Final Projects (in-progress) 

Projects – Critique

Final Projects (in-progress) 

WORKSHOP: Final Project


Week 16

Final Presentations

T April 23

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

Final Projects Due on Tuesday December 11

Final Projects