Week 1
Introduction
T January 14
Intro notes
Software, Tools and Resources
TH January 16
Intro notes
Review HTML/CSS, introduce Forms
Week 2
Javascript 1
Assignments: CodeAcademy | Introduction to Javascript : “Introduction”, “Conditionals”
Read (optional): Eloquent Javascript:
———————————————
T January 21
JavaScript Exercises: statements, comments, data, strings, numbers, operators, conditionals
JavaScript Objects : Math, Date, Array
TH January 23
JavaScript Talk:
Mini Projects (4 points x 5 = 20 points) :
Mini-projects are short examples of how to do something with Javascript. In class, with a partner, you will expand and play with the code to understand how the script works. For grading, I will ask you to take home 5 of the 8 in-class mini-projects presented throughout the semester to develop and rework on your own. Grading of each mini-project you submit will be based on how much you changed the script based on your growing understanding of Javascript. You will have one week after we work on each mini-project in class to complete your own reworking of the script. The mini-projects will become progressively more complex, so it it will be a good idea to try working on each mini-project early on. I will give 4 points extra credit for a 6th mini-project.
Mini-project#1: Change Circles Script
previous
Mini-projects Spring 2019
Week 3
JavaScript 2
Assignments: CodeAcademy |Introduction to Javascript : “Functions”, “Scope”, “Arrays”, “Loops”
Read: Eloquent Javascript:
——————————————————–
T January 28
JavaScript Talk:
- functions
- for loops, while loops
- nested arrays and loops
TH January 30
Traversing the DOM (getting and manipulating elements on the page):
Working with strings (manipulating text:
- strings
- string methods
- regular expressions…
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
- practice file
Mini-project#2: Create an interactive text toy
mini-project-2 template – story-generator
mini-project-2 template – line scramble poem
previous Mini-projects List
Week 4
Javascript 3
Assignments: CodeAcademy |Introduction to Javascript : “Iterators”, “Objects”
Read: Eloquent Javascript:
———————————————–
T February 4
JavaScript and the DOM
traversing
event listener
dom events
dom style reference
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(), reverse() // 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
TH February 6
JavaScript Quiz Study Guide
complete JavaScript CodeAcademy by next Tuesday!
Switch vs Conditionals
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 February 11
Quiz #1: JavaScript
CodeAcademy Javascript complete!
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.
What Are You Quizzes
TH February 13
Optional in-class workshop with Christian Denny and Greg Philbrook
You can work on the “What Thing Are You Quiz” and/or your Map Project
Week 6
jQuery 1
FreeCodeCamp: Find the jQuery tutorial on https://www.freecodecamp.org/learn
Reading: As a resource consult the W3Schools tutorial: jQuery: jQuery Tutorial & jQuery Effects
————————————————-
T February 18
Map Project Intro – class notes
WORKSHOP: Maps Project
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.
jQuery:
- jQuery intro on w3schools
- Events
- Effects
- jQuery starter page
- jQuery examples page
TH February 20
Mini-project#4 : Build a Slideshow
jQuery Slideshow with arrays | Slideshow with html images
WORKSHOP: Map Project
Week 7
jQuery 2
FreeCodeCamp: https://www.freecodecamp.org/learn
Reading: As a resource consult the W3Schools tutorial: jQuery HTML & jQuery Traversing
————————————————-
T February 25
jQuery Slideshow with arrays | Slideshow with html images
WORKSHOP: Map Project
TH February 27
jQuery Tutorial due Tuesday – 5%
WORKSHOP: Map Project
Week 8
Objects and Classes
Assignments: CodeAcademy |Introduction to Javascript : “Classes” **EXTRA CREDIT** 5 points
——————————————————-
T March 3
Quiz#2: jQuery
CodeAcademy jQuery complete!
WORKSHOP: Map Project
TH March 5
Objects and Classes
Mini-project#5 : Build a Javascript Class with Constructor
Week 9
Creative Programming
T March 10
Due: Map Project
View projects
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 March 12
View miniproject-5 Class
Mini-projects Spring 2020
WORKSHOP: Creative Programming
Canvas Element
Javascript Drawing and Animation
drawing a circle: arc();
triangles canvas script
canvas face
Mini-project#6 : Create a Drawing/Animation with Canvas
Timing Events | SetTimeout, SetInterval
previous: Mini-projects Fall2018 | Mini-projects Spring 2018 | Mini-projects Spring 2019
Week 10
SPRING BREAK
T March 17
No Class
TH March 19
No Class
Week 11
Creative Programming
T March 24
Mini-projects Spring 2020 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 March 26
Mini-project#7 : Create a Weather App
previous: Mini-projects Fall2018 | Mini-projects Spring 2018
WORKSHOP: Creative Programming Project
Week 12
Creative Programming
——————————————————-
T March 31
Mini-projects Spring 2020 weather apps/geolocation
Audio/Video and JavaScript
jQuery and the DOM
WORKSHOP: Creative Programming
TH April 2
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:
- https://www.youtube.com/watch?v=DLX62G4lc44&feature=youtu.be
- https://www.youtube.com/watch?v=pgAvVxowaYU&feature=youtu.be
- Free Code Camp
For next week: email me your Final project description
WORKSHOP: Creative Programming
Week 13
Final Project
email me your Final project description
—————————————————————————————
T April 7
WORKSHOP: Final Project
TH April 9
DUE: Creative Programming Project
WORKSHOP: Final Project
Week 14
Final Project
Develop Final Project idea
—————————————————————————————
T April 14
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: Final Project
TH April 16
Nick Acker visit – web dev discussion
Week 15
Critique/Device Testing
T April 21
Next Steps in Development
Front-Development- resource page
WORKSHOP: Final Project
TH April 23
WORKSHOP: Final Project
Week 16
Final Presentations
T April 28
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 April 30
Final Projects Due TBA