Week 1
Introduction
T August 20
Intro notes
Software, Tools and Resources
TH August 22
Intro notes
Review HTML/CSS, introduce Forms
Week 2
Javascript 1
Assignments: CodeAcademy | Introduction to Javascript : “Introduction”, “Conditionals”
Read (optional): Eloquent Javascript:
———————————————
T August 27
JavaScript Exercises: statements, comments, data, strings, numbers, operators, conditionals
JavaScript Objects : Math, Date, Array
TH August 29
JavaScript Talk:
Mini-project#1: Change Circles Script
previous Mini-projects List
Week 3
JavaScript 2
Assignments: CodeAcademy |Introduction to Javascript : “Functions”, “Scope”, “Arrays”, “Loops”
Read: Eloquent Javascript:
——————————————————–
T September 3
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
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
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
TH September 12
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
What Are You Quizzes
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
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 with arrays | Slideshow with html images
TH October 3
WORKSHOP: Map Project
Week 8
Objects and Classes
Assignments: CodeAcademy |Introduction to Javascript : “Classes” **EXTRA CREDIT**
——————————————————-
T October 8
Quiz#2: jQuery
WORKSHOP: Map Project
TH October 10
Due: Map Project
Objects and Classes
Javascript Object, Class > Mealplanner
Mini-project#6 : Build an Javascript Class with Constructor
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();
Mini-project#7 : Create a Drawing/Animation with Canvas
Timing Events | SetTimeout, SetInterval
previous: Mini-projects Fall2018 | Mini-projects Spring 2018 | Mini-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
Mini-project#8 : Create a Weather App
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
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:
- 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 12
Final Project
email me your Final project description
—————————————————————————————
T November 5
WORKSHOP: Final Project
TH November 7
DUE: Creative Programming Project
WORKSHOP: Final Project
Week 13
Final Project
Develop Final Project idea
—————————————————————————————
T November 12
WORKSHOP: Final Project
TH November 14
Nick Acker visit – web dev discussion
Week 14
Critique/Device Testing
T November 19
Next Steps in Development
Front-Development- resource page
WORKSHOP: Final Project
TH November 21
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