CIS196

Assignment 3

Joe Paris — Thu, 16 Feb 2012 18:34:49 +0000

I'm going to give you today to work on this collaboratively. The assignment is due at the beginning of class on Tuesday, Feb. 21 Thursday, Feb. 23.

Using start.html (download here) as a starting point...

Add a button to the bottom of the page that will, when clicked, wire up a click event handler on the div with class box that will replicate the behavior from class on Tuesday; i.e. when the div is clicked on it inserts a new div on the page. These new div elements must also have the event handler wired to them. The catch is, you must write your event handler without using jQuery and it must work on IE, Firefox, Chrome, Opera and Safari.
Add another button that, when clicked, will wire up an event handler that replicates the right-click behavior of the original example. Again, you must use only JavaScript and it must work across all the browsers listed above. Add a third button that will remove the event handlers from #1 and #2 from all elements on the page.
Now that you have some appreciation for how difficult this kind of thing is without jQuery, uncomment the jQuery code at the bottom of the page and revel in its elegance.
Add a button to your page that, using jQuery, will stop subsequent div from getting the event handler applied to them when they are created.
Add a button that will trigger the div replication. That is, when the button is clicked a new div is inserted on the page.
Add a button that, when clicked, will wire up a new event handler to all existing and future div elements with class box. This new handler should change the color of the div to green when the user holds down the Alt key while clicking on its target.
Add a button to the page that will, when clicked, cycle all box elements between being 75px X 75px, 100px X 100px and 125px X 125px then back to 75px X 75px on each subsequent click.
Finally, move all your JavaScript and jQuery code to follow the notion of unobtrusive JavaScript. Be sure to test your page after doing so in all the browsers listed above.

Also, read Chapter 5 for next week. Send me your questions by 5:00 on Monday.

Your Resume Is Not This Cool

Joe Paris — Thu, 09 Feb 2012 23:01:40 +0000

Nick Kwiatek

Class Canceled

Joe Paris — Thu, 09 Feb 2012 17:50:28 +0000

Sorry folks, just got the call that my daughter is sick. I'll see you next week. Read Chapter 5 and send me your questions by 5:00 Monday.

Assignment 2 (Updated)

Joe Paris — Thu, 02 Feb 2012 21:34:01 +0000

Create a page about a hobby or interest of yours. Do not add any presentation-style formatting to the page. For example, you may wrap your content in div tags and size/position them, but do not change the appearance of the text (yet). The page should have a header be roughly as long as the "boldas" example site I provided earlier this week.
Apply styling to the elements on your page. For all heading and anchor tags, use jQuery's .toggleClass() function to change the formatting when the mouse moves over the element.
Add a button to your page that will, when clicked, prompt the user for their name and display the name near the top of the page in a greeting ("Hello there, name, welcome to my page!" for example). This greeting should not be visible until the user clicks the button. Use either .html() or .text() to do this.
Add a custom data element attribute to at least two of the elements on your page using jQuery.
Add a button to your page that, when clicked, will use jQuery to find all the elements that have your custom data attribute and apply a class named custom to them (the custom class need not have any rules defined, its existence in the list of classes applied to your element is enough for what we want). Finally, select all elements on the page, filter the wrapped set to contain only those elements with class custom and change their background color.

Look for opportunities to use jQuery's chaining functionality.

Due Tuesday, Feb. 7. Have your page ready for "show" at the beginning of class. We may use your pages in class to experiment further, however, so they won't be due for submission until the end of class. If you haven't yet, read Chapter 4 for next week.

Demo Files

Joe Paris — Tue, 31 Jan 2012 21:09:38 +0000

Some demo sites to play with

Reading for Next Week

Joe Paris — Thu, 26 Jan 2012 21:11:13 +0000

For next week please read Chapters 3 and 4. We will talk about Chapter on Tuesday so please be sure to have read it and sent me your questions by Monday night. We'll talk about Chapter 4 on Thursday so have it read and your questions submitted by Wednesday evening.

Epic 404 Page

Joe Paris — Thu, 26 Jan 2012 06:14:02 +0000

Page not found, but awesomeness abounds!

Corrected Sample Files

Joe Paris — Tue, 24 Jan 2012 21:33:59 +0000

Here are the corrected sample files with 100% less broken! Use these to attempt the first part of Assignment 1

Office Hours

Joe Paris — Sun, 22 Jan 2012 21:48:56 +0000

Sorry for the delay in posting these, my office hours are as follows:

Monday & Wednesday - 10:00 to 10:30
Tuesday & Thursday - 11:00 to 12:00
Other times by appointment.

Grades Have Been Posted

Joe Paris — Sun, 22 Jan 2012 21:48:33 +0000

You can use the links to the right to view them. Of course, you won't know who you are until I give out your hobo names in class this week.