Difference between revisions of "Introduction to JavaScript Fall 2011"

esse quam videri
Jump to: navigation, search
(→‎Class Schedule)
(→‎Class Schedule)
 
(25 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
* Class 04 (2011-09-27): [[Introduction_to_JavaScript_Fall_2011_Class_4|Objects, Arrays, & Loops]]
 
* Class 04 (2011-09-27): [[Introduction_to_JavaScript_Fall_2011_Class_4|Objects, Arrays, & Loops]]
 
* Class 05 (2011-10-04): [[Introduction_to_JavaScript_Fall_2011_Class_5|Libraries, jQuery]]
 
* Class 05 (2011-10-04): [[Introduction_to_JavaScript_Fall_2011_Class_5|Libraries, jQuery]]
−
* Class 06 (2011-10-11): I'll figure something out
+
* Class 06 (2011-10-11): [[Introduction_to_JavaScript_Fall_2011_Class_6|Core Methods & jQuery examples]]
−
* Class 07 (2011-10-18): Project 1 Critique
+
* Class 07 (2011-10-18): [[Introduction_to_JavaScript_Fall_2011_Class_7|Project 1 Critique]]
−
* Class 08 (2011-10-25): Midterm Exam
+
* Class 08 (2011-10-25): [[Introduction_to_JavaScript_Fall_2011_Class_8|Midterm Exam]]
−
* Class 09 (2011-11-01): AJAX and JSON
+
* Class 09 (2011-11-01): [[Introduction_to_JavaScript_Fall_2011_Class_9|AJAX and JSON]]
−
* Class 10 (2011-11-08): Client Storage, HTML5 APIs
+
* Class 10 (2011-11-08): [[Introduction_to_JavaScript_Fall_2011_Class_10|Client Storage, location hash]]
−
* Class 11 (2011-11-15): Object Oriented Programming
+
* Class 11 (2011-11-15): [[Introduction_to_JavaScript_Fall_2011_Class_11|Object Oriented Programming]]
−
* Class 12 (2011-11-22): Scripting the Canvas
+
* Class 12 (2011-11-22): [[Introduction_to_JavaScript_Fall_2011_Class_12|Scripting the Canvas]]
−
* Class 13 (2011-11-29): Performance Optimization
+
* Class 13 (2011-11-29): [[Introduction_to_JavaScript_Fall_2011_Class_13|Best Practices]]
−
* Class 14 (2011-12-06): Project 2 Critique
+
* Class 14 (2011-12-06): [[Introduction_to_JavaScript_Fall_2011_Class_14|Project 2 Critique]]
−
* Class 15 (2011-12-13): Final Exam
+
* Class 15 (2011-12-13): [[Introduction_to_JavaScript_Fall_2011_Class_15|Final Exam]]
  
 
==Student portfolio sites==
 
==Student portfolio sites==
Line 20: Line 20:
 
[http://iam.colum.edu/students/Daniel.Barness/javascript/ http://iam.colum.edu/students/Daniel.Barness/javascript/]
 
[http://iam.colum.edu/students/Daniel.Barness/javascript/ http://iam.colum.edu/students/Daniel.Barness/javascript/]
  
−
[http://iam.colum.edu/students/Quincy.Bingham/javascript/ http://iam.colum.edu/students/Quincy.Bingham/javascript/]
+
<!-- [http://iam.colum.edu/students/Quincy.Bingham/javascript/ http://iam.colum.edu/students/Quincy.Bingham/javascript/] -->\
−
 
 
 
[http://iam.colum.edu/students/Ricardo.Elias/javascript/ http://iam.colum.edu/students/Ricardo.Elias/javascript/]
 
[http://iam.colum.edu/students/Ricardo.Elias/javascript/ http://iam.colum.edu/students/Ricardo.Elias/javascript/]
  
Line 132: Line 131:
  
 
Use jQuery code for selecting the element, and for applying it's appearance changes too.
 
Use jQuery code for selecting the element, and for applying it's appearance changes too.
 +
 +
====In-Class 7====
 +
 +
Due: 2011-11-01
 +
 +
Using the in class example, make a twitter feed. 
 +
 +
Find an interesting user to pull data in from.
 +
 +
Experiment and see if you can pull in by a hashtag instead of by username
 +
 +
====In-Class 8====
 +
 +
Due: 2011-11-08
 +
 +
Do something using browser cookies
 +
 +
====In-Class 9====
 +
 +
Due: 2011-11-22
 +
 +
Display a box and some text in the canvas tag.
  
 
===Assignments===
 
===Assignments===
Line 236: Line 257:
  
 
You are essentially building the image gallery example from the DOM Scripting book, except instead of writing the HTML for it, you're having javascript build that HTML by using the data in a JSON object.
 
You are essentially building the image gallery example from the DOM Scripting book, except instead of writing the HTML for it, you're having javascript build that HTML by using the data in a JSON object.
 +
 +
[http://iam.colum.edu/brian/javascript/week5/assignment4.htm example]
 +
  
 
====Assignment 5====
 
====Assignment 5====
Line 251: Line 275:
  
 
See how much better you can make the experience, and how much less code you can do it in.
 
See how much better you can make the experience, and how much less code you can do it in.
 +
 +
 +
====Assignment 6====
 +
AJAX and JSON: flikr API project
 +
 +
Due:2011-11-08
 +
 +
Get the flikr example working and expand on it.
 +
 +
Look at all the other information returned by the API and think of something interesting to do with it.
 +
 +
Pull in from a mix of tags, make a gallery, allow the user to enter keywords.  Mix and match user selected keywords and your own preselected keywords.
 +
 +
====Assignment 7====
 +
History management: adding state
 +
 +
Due:2011-11-15
 +
 +
Go back to your assignment for the non-linear narrative or for the photo gallery.
 +
 +
Make a new copy of this assignment (don't overwrite your old one) and add location.has code to make it so you can skip to a specific image with the URL string.
 +
 +
Bonus points for making the browsers back/forward buttons work with the experience.
 +
 +
====Assignment 8====
 +
Graphics: 2D drawing
 +
 +
Due:2011-11-29
 +
 +
Pick a demo of the canvas tag from [http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html Josh Marinacci]'s page and build it.
 +
 +
Alternatively, explore resources for doing similar things with SVG.  My favorite tool is [http://raphaeljs.com/ Raphaël]
  
 
===Projects===
 
===Projects===
Line 275: Line 331:
  
 
If you're taken the php class, you could use javascript to verify form submissions before sending the request to your database.
 
If you're taken the php class, you could use javascript to verify form submissions before sending the request to your database.
 +
 +
====Project 2====
 +
AJAX and WebServices: working with data
 +
 +
Deliverable 1 due: 2011-11-01
 +
 +
*Collect a list of apis
 +
 +
Deliverable 2 due: 2011-11-08
 +
 +
*see which APIs from your list you can successfully get data back from.  Either log the data to the console, or write it to the page
 +
 +
Deliverable 3 due: 2011-11-15
 +
 +
*Now that you are successfully collecting data from an API, write a full proposal on the project you want to build using that data
 +
 +
Deliverable 4 due: 2011-11-15
 +
 +
* Finish as much as the hard/unknown parts of the code as possible.  You can work on making things look nice and display right later, but get the core functionality done first.
 +
 +
*Next week is Thanksgiving, and as much as you tell yourself you're going to catch up on stuff then, you know you're not actually going to get anything done, so the more you can get done now the better.
 +
 +
Finished Project Due: 2011-12-06
 +
 +
Build a web page that pulls in data to the page asynchronously.
 +
 +
I imagine most students will want to pull data from a public API, and will have to pull in JSONP to accomplish this.
 +
 +
Alternatively, you can write your own web service if you have the php / asp.net chops
 +
 +
You could also use php / asp.net to pull in XML or JSON from a public API, then pass that information to your javascript to avoid cross-site scripting errors
 +
 +
As long as you pull in data with out refreshing the page, you will fulfill the project requirements, but if you want to make a really cool project, pull in data from multiple sources, and create a mash-up
 +
 +
 +
===Extra Credit===
 +
 +
If you need extra credit I will allow you to update Project 1, and up to one of the Assignments.
 +
 +
The amount of points you are actually awarded will reflect the amount of effort you put into the improvements.
 +
 +
Make a copy of your original experience to update, do not overwrite the current experience in your portfolio.
 +
 +
====Option 1====
 +
 +
Update Project 1
 +
 +
possible points: 75
 +
 +
====Option 2====
 +
 +
Update any one of the 8 assignments
 +
 +
possible points: 20
  
 
== Course Resources ==
 
== Course Resources ==

Latest revision as of 00:26, 14 December 2011

Class Schedule

Student portfolio sites

http://iam.colum.edu/students/Daniel.Barness/javascript/

\ http://iam.colum.edu/students/Ricardo.Elias/javascript/

http://iam.colum.edu/students/Karen.Gioia/javascript/

http://iam.colum.edu/students/Vanessa.Grass/javascript/

http://iam.colum.edu/students/Sergei.Habel/javascript/

http://iam.colum.edu/students/Haejin.Jeon/javascript/

http://iam.colum.edu/students/Kimberly.Kim/javascript/

http://iam.colum.edu/students/Kyle.Lamble/javascript/

http://www.nicklauftw.com/classwork/javascript/

http://iam.colum.edu/students/Judie.LeThi/javascript/

http://iam.colum.edu/students/Rachael.Moore/javascript/

http://iam.colum.edu/students/Nicole.Premo/javascript/

http://iam.colum.edu/students/Kyle.Reden/javascript/

http://iam.colum.edu/students/Aaron.WilliamsBanks/javascript/

Contact the instructor

bnielsen@colum.edu.

Course Deliverables

In-Class Work

10 points each

In-Class 1

Course Portfolio Site:

Due: 2011-09-06

Make a new folder in you pub folder called javascript.

Make a default.htm or index.htm file in that folder.

With that htm file, make a simple one page website in HTML5 to list all of your work for this class.

I should be able to find your portfolio by going to:

http://iam.colum.edu/students/your.login/javascript/

I recommend putting in place holder links for assignments so you know what how much text will be there when it's full. It's going to be full, right? Everyone is going to do ALL their homework?

Get the structure done first, then spice it up with some CSS3.

example

In-Class 2

Console Testing:

Due: 2011-09-13

Make some variables.

Preform some operations on those variables (addition, multiplication, concatenation)

Output those variables to the console at various points in the operations

In-Class 3

Conditional Code Testing:

Due: 2011-09-13

Take user input from a form field.

Compare that input to a variable

Display different output based on the condition

Feel good bonus: do it again with a switch statement

In-Class 4

Events and functions:

Due: 2011-09-20

Create an element (of your choice on the page) that changes it's appearance based on onMouseOver and onMouseOut events

In-Class 5

Objects, arrays and loops:

Due: 2011-09-27

Think of a collection of things that can be organized into an array of objects.

Create the array of objects, and include at least one property that differentiates the objects

Create a for loop to go though the array, and make a list item for each item in the array.

Have the loop check the differentiating property of the current item, and append the list item to an appropriate list on the page.

Feel good bonus: attach an event handler to the list items, that will display additional information about the list item when clicked.

In-Class 6

Due: 2011-10-04

Create an element (of your choice) on the page that changes it's appearance based on jQuery mouse events.

Use jQuery code for selecting the element, and for applying it's appearance changes too.

In-Class 7

Due: 2011-11-01

Using the in class example, make a twitter feed.

Find an interesting user to pull data in from.

Experiment and see if you can pull in by a hashtag instead of by username

In-Class 8

Due: 2011-11-08

Do something using browser cookies

In-Class 9

Due: 2011-11-22

Display a box and some text in the canvas tag.

Assignments

40 points each

Assignment 1

Hello Javascript: dynamically creating markup

Due:2011-09-13

Make an HTML page that has no content.

Add a page title with javascript.

Including answers to the following questions with Javascript (I'd put them in a unordered list, but that's just me):

  • Your legal name (what I'll see on the class roster)
  • The name you prefer to be called (if you don't like your legal name, or if it's long or confusing for me)
  • Any prior programming classes or experience you have (remember, html/css is not programing
  • Any prior Web Development or Web Design experience you have
  • Are you here because you want to learn Javascript, or just because you needed this credit? (or a little bit of both?)

example

Assignment 2

Conditional Statements: Choose your own adventure

Due:2011-09-20

Create a webpage that displays some options to the user.

Use JavaScript to evaluate the user's selection and display additional content based on their selection

Give the user AT LEAST 3 opportunities to make a selection.

Every opportunity to select an option, must include AT LEAST two options to pick from.

I would do this one of two ways:

  • Make all the display elements with HTML and put in the default content.
  • On form submission, run the selected value through a switch statement
  • Have the switch statement overwrite the default values for the display elements based on what option was selected

OR

  • Look up how to show/hide elements with JavaScript
  • Make a div for each branch of the adventure
  • Hide each all divs except the first branch by default
  • Use the switch to hide all divs and show the appropriate one

example

Assignment 3

Functions, Events, and the DOM: Visually compelling experimental experience

Due:2011-09-27

Create a webpage with at least 5 elements (but up to as many as you want)

(also, I think using absolute positioning and z-index to overlap the elements on top of each-other will make this a cooler experience)

The elements could have images in them, or they could just be colored blocks on the page.

Have the elements respond to events by altering their appearance (or even the appearance of other elements on the page instead of their own)

Experiment with different DOM elements to see what visual effects you can create.

If moving elements around and manipulating their basic CSS properties isn't exciting enough, then go read up on CSS3 visual effects, transitions, and transforms. Have the events add additional classes to elements that implement some CSS3 eye candy or animation.

example

Useful links:

DOM properties and methods

adding and removing classes from an element

javascript css styles

css3 for web designers

Assignment 4

Objects, Arrays, and Loops: Javascript Image Gallery

Due:2011-10-04

find at least 5 images, and create thumbnails for each.

Create an array of objects, where each array item has properties for the path to both the thumbnail image, and the full-size image.

Make a for loop that goes though each item in the array. The loop should do the following on each iteration:

  • make a list item
  • make an anchor
  • make an image
  • set the image src attribute to the image path of the thumbnail image
  • set anchor href attribute to the image path of the full-sized image
  • append the image into the anchor
  • append the anchor into the list item
  • append the list item into a pre-existing list on the page
  • add an onclick even listener to the anchor

Have the event triggered by the onclick event for each list item prevent the default behavior.

Instead, have it modify the src value of an image tag on the page, and replace it with the href value from the anchor.

You are essentially building the image gallery example from the DOM Scripting book, except instead of writing the HTML for it, you're having javascript build that HTML by using the data in a JSON object.

example


Assignment 5

jQuery: Visually compelling experimental experience

Due:2011-10-11

Re-create something similar to Assignment 3 from scratch.

Use loops now if appropriate

More importantly, use jQuery everywhere you can.

If you already used CSS3 transitions, try creating the same effects in jQuery. (not nearly as clean, but now it will work in browsers all the way back to IE6!)

See how much better you can make the experience, and how much less code you can do it in.


Assignment 6

AJAX and JSON: flikr API project

Due:2011-11-08

Get the flikr example working and expand on it.

Look at all the other information returned by the API and think of something interesting to do with it.

Pull in from a mix of tags, make a gallery, allow the user to enter keywords. Mix and match user selected keywords and your own preselected keywords.

Assignment 7

History management: adding state

Due:2011-11-15

Go back to your assignment for the non-linear narrative or for the photo gallery.

Make a new copy of this assignment (don't overwrite your old one) and add location.has code to make it so you can skip to a specific image with the URL string.

Bonus points for making the browsers back/forward buttons work with the experience.

Assignment 8

Graphics: 2D drawing

Due:2011-11-29

Pick a demo of the canvas tag from Josh Marinacci's page and build it.

Alternatively, explore resources for doing similar things with SVG. My favorite tool is Raphaël

Projects

125 points each

Project 1

Progressive Enhancement / Graceful Degradation:

Proposal due: 2011-09-27

Finished Project Due: 2011-10-18

Build a fully functional website in HTML & CSS on a subject that you find interesting.

Any (classroom appropriate) subject you like. Games, Music, TV shows, Power tools, Stamps, Useless USB peripherals, etc.

You must either use original content, or provide written permission to use content you did not create.

When designing your webpage, think about how traditional HTML features that could be enhanced with javascript.

Where would it be a better experience to display additional content with out a page refresh?

Would a javascript image gallery improve usability?

If you're taken the php class, you could use javascript to verify form submissions before sending the request to your database.

Project 2

AJAX and WebServices: working with data

Deliverable 1 due: 2011-11-01

  • Collect a list of apis

Deliverable 2 due: 2011-11-08

  • see which APIs from your list you can successfully get data back from. Either log the data to the console, or write it to the page

Deliverable 3 due: 2011-11-15

  • Now that you are successfully collecting data from an API, write a full proposal on the project you want to build using that data

Deliverable 4 due: 2011-11-15

  • Finish as much as the hard/unknown parts of the code as possible. You can work on making things look nice and display right later, but get the core functionality done first.
  • Next week is Thanksgiving, and as much as you tell yourself you're going to catch up on stuff then, you know you're not actually going to get anything done, so the more you can get done now the better.

Finished Project Due: 2011-12-06

Build a web page that pulls in data to the page asynchronously.

I imagine most students will want to pull data from a public API, and will have to pull in JSONP to accomplish this.

Alternatively, you can write your own web service if you have the php / asp.net chops

You could also use php / asp.net to pull in XML or JSON from a public API, then pass that information to your javascript to avoid cross-site scripting errors

As long as you pull in data with out refreshing the page, you will fulfill the project requirements, but if you want to make a really cool project, pull in data from multiple sources, and create a mash-up


Extra Credit

If you need extra credit I will allow you to update Project 1, and up to one of the Assignments.

The amount of points you are actually awarded will reflect the amount of effort you put into the improvements.

Make a copy of your original experience to update, do not overwrite the current experience in your portfolio.

Option 1

Update Project 1

possible points: 75

Option 2

Update any one of the 8 assignments

possible points: 20

Course Resources

Text Editors

Cross Platform

  • Aptana (free, built on top of eclipse)

For Windows

For OS X

Browser Tools

Tools for Firefox

Books

DOM Scripting: Web Design with JavaScript and the Document Object Model: this book is very gentle introduction to JavaScript that focus on practical examples of scripting websites.

Eloquent JavaScript: A Modern Introduction to Programming: this book (also available as a free eBook) goes into more detail about programming with JavaScript, and doesn't even touch DOM Scripting until the end. Some of it's DOM Scripting practices seem a bit out of date to me, still a great read though.

JavaScript: the Definitive Guide: this is THE JavaScript reference book in my opinion. It is thick, and dry. I wouldn't try and read it cover to cover until you're already comfortable with JavaScript and you want to poke though every nitty gritty detail.

eBooks

References and Tutorials

Web Development Toolbox

Tutor

Which tutors know some JavaScript?

Interesting JavaScript Websites


Suggested reading

Class 01 (2011-09-06): Introduction

Class 02 (2011-09-13): Programming Syntax and Concepts

Class 03 (2011-09-20): Functions and Events

Class 04 (2011-09-27): Objects, Arrays, & Loops

Retrieved from "http://imamp.colum.edu/mediawiki/index.php?title=Introduction_to_JavaScript_Fall_2011&oldid=20192"