Schedule – Fall 2019

Week 1

Introduction

T August 20

Intro notes

Software, Tools and Resources

Eloquent JavaScript

TH August 22

Intro notes

Review HTML/CSS, introduce Forms

Intro to Programming Concepts


Week 2

Javascript 1

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

Read (optional): Eloquent Javascript

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

T August 27

JavaScript Starter file

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

JavaScript Objects : Math, Date, Array

TH August 29

JavaScript Talk:

Student Pairings

Mini-project#1:  Change  Circles Script

Circles

Mini-projects Fall 2019

previous Mini-projects List


Week 3

JavaScript 2

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

Read: Eloquent Javascript

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

T September 3

Mini-projects Fall 2019

JavaScript Talk:

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

TH September 5

Working with strings:

Regex (regular expressions) Basics:

  • new line after period: $ \ replace with: \.\n
  • add quotes at start of lines:  ^ replace with “
  • add quotes and comma at end of lines: $ and replace with “,
  • to remove line breaks:  \n\s+ and replace with nothing

Taroko Gorge

Student Pairings

Mini-project#2: Create an interactive text toy

mini-project-2 template – story-generator

previous Mini-projects List


Week 4

Javascript 3

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

Read: Eloquent Javascript:

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

T September 10

Mini-projects Fall 2019

JavaScript and the DOM
traversing
event listener
dom events

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

TH September 12

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)

 


Week 5

Javascript 4 / Google Maps API

Assignment: View Mapbox API

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

T September 17

Mini-projects Fall 2019

What Are You Quizzes

JavaScript Quiz Study Guide

Map Project Intro – class notes

Map Story Project 

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.

 

TH September 19

GitHub Intro

  • GitHub – a social and collaborative platform for develpopment
  • Git – version control system for tracking changes in computer files and coordinating work on those files among multiple people. (command-line install)
  • desktop.github  no command line needed
  • Github guide
  • 477 test-repository

Git Terms from Github Glossary

  • Repository
  • Branch
  • Merge
  • Clone
  • Pull
  • Pull request
  • Fork
  • Fetch
  • Push
  • Commit
  • Markdown

WORKSHOP -Map Project 

 


Week 6

jQuery 1

CodeAcademy: No tutorial

Reading: Read this W3Schools tutorial instead: jQuery: jQuery Tutorial (all chapters) & jQuery Effects (all chapters)rs)

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

T September 24

I have Jury Duty! Christian Denny (DTC student and awesome programmer) will be helping you with your map project. Take advantage of her to ask the questions you are afraid to ask me. See below for schedule changes.

Map Project Intro – class notes

Map Story Project 

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.

TH September 26

Quiz #1: JavaScript – 

CodeAcademy Javascript complete!

jQuery  intro on w3schools

Events
Effects

jQuery starter page

 


Week 7

jQuery 2

CodeAcademy: No tutorial

Reading: Read this W3Schools tutorial instead: jQuery HTML (all chapters)jQuery Traversing (all chapters)

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

T October 1

Mini-project#5 : Build a Slideshow

jQuery Slideshow Template

You Don’t Need jQuery

jQuery Slideshow with arraysSlideshow with html images

 

TH October 3

jQuery Quiz overview

Maps Intro

WORKSHOP: Map Project


Week 8

Objects and Classes

Assignments: CodeAcademy |Introduction to Javascript : “Classes”  **EXTRA CREDIT**

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

T October 8

Quiz#2:  jQuery

Mini-projects Fall 2019

WORKSHOP: Map Project

TH October 10

Due: Map Project

View projects

Objects and Classes

Javascript Object, Class > Mealplanner

Student Pairings

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

Mini-projects Fall 2019

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

 

 


Week 9

Creative Programming 

 T October 15

View miniproject-5 Class
Mini-projects Fall 2019

Creative Programming: Notes

Creative Programming (10%)

This project is intended to loosen you up with programming and to test some ideas towards your final project. You may think of this as the preliminary phase of the the final project or as just an experiment to improve your programming. 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.

Creative Programming: Notes

WORKSHOP: Creative Programming

 

TH October 17

WORKSHOP: Creative Programming

Canvas Element
Javascript Drawing and Animation

drawing a circle: arc();

Canvas Games

canvas face

Student Pairings

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

Timing EventsSetTimeoutSetInterval

Mini-projects Fall 2019

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


Week 10

Creative Programming 

T October 22

Mini-projects Fall 2019  Animation with Canvas

Server Requests/Ajax:

  • why jQuery 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.

Weather App:

TH October 24

HTML5 geolocation api

geolocation template

Student Pairings

Mini-project#8 : Create a Weather App

Mini-projects Spring 2019

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

WORKSHOP: Creative Programming Project

 


Week 11

Creative Programming

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

T October 29

Mini-projects Fall 2019  weather apps/geolocation

Audio/Video and JavaScript
jQuery and the DOM

video-audio
video-audio-zip

miro converter
freesound

WORKSHOP: Creative Programming

TH October 31

Final Project: 20%

The Final Project is quite open, but it must include your own scripting in JavaScript (jQuery is optional) 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. 

  • I encourage future developers to learn a JavaScript framework (such as the very popular React) for this project. I will take into account the effort to learn a new framework.
  • I encourage designers to explore methods of animation and interactivity that use JavaScript with jQuery or another framework.  An interactive learning module or animated infographic would be good in your portfolio.
  • I encourage game developers to work in teams. Please talk to me about this as I can point you to tutorials for building HTML5  games with Canvas.
  • You will be graded on your own scripting using JavaScript (30%), interface and interaction design (30%) and the completion of the content (30%).
  • Small group projects (max 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.
  • 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.

BRAINSTORM: Final Project

React Tutorials:

For next week: email me your Final project description

WORKSHOP: Creative Programming

 


Week 12

Final Project

email me your Final project description

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

T November 5

localStorage example

WORKSHOP: Final Project

TH November 7

DUE: Creative Programming Project

cp projects

localStorage example

WORKSHOP: Final Project


Week 13

Final Project

Develop Final Project idea

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

T November 12

front-end-handbook/2018/

WORKSHOP: Final Project

TH November 14

Nick Acker visit – web dev discussion

Final Projects (in-progress) 

 


Week 14

Critique/Device Testing

November 19

Next Steps in Development

Front-Development- resource page

WORKSHOP: Final Project

Final Projects (in-progress) 

TH November 21

Final Projects (in-progress) 

WORKSHOP: Final Project


Week 15

THANKSGIVING

work on final projects

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

T November 26

NO CLASS

TH November 28

NO CLASS


Week 16

Final Presentations

T December 3

Class Evaluations

**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 Project

 

TH December 5

Final Projects Due on Tuesday December 10

Final Projects