JSONPing Flickr

For today's exercise you will write a webpage with javascript ajax call to flickr that will retrieve the data for their currently interesting public photos and display these to the user.

You should start by examining how I did a very similar thing, but with delicious, in this slide. Then you will want to vist the flickr API, especially their REST request and response pages, and their JSON response format page (especially towards the end). You might also need to re-familiarize yourself with the jQuery ajax function, especially its dataType and jsonp options.

Finally, if you don't want to create a flickr account, you can use this key: b13a756540df31453ad014e399056af6.

Get the Gears Going

Today's exercise is to do the gears tutorial. You must show me that you have an offline-capable site by the end of class. Remember the instructions I gave for installing gears on Iceweasel on the lab machines.

Functional Calculator

For today's exercise you will use the Google visualization API to draw a line chart that plots the line y= x*x for -10 < x < 10 . The final result should look a lot like the figure at the right. Email me your code by the end of class.

If you do finish early, change the event handler function so the popup that appears when the user clicks on one of the dots (data points) in the graph now shows both the x and the y values, as such: f(x) = x*x, 49 = 7 * 7.

SVG Exercise

For today's exercise you will re-do the clock from the canvas exercise but this time using the jQuery SVG plugin, as I demonstrate here. Note that you will need to use both jQuery and the jQuery SVG plugin. Also notice that the plugin has an animate function which might be useful to you. Check it out under the "Animations" tab.

This exercise is due at the end of class.

Canvas Exercise

For today's exercise you will write a simple canvas application: an analog timer. You will email me what you have done by the end of class. What you need to do is:

1. Draw a circle.
2. Draw a line from the center of that circle to the 12'clock position.
3. Implement a simple animation which erases the whole thing then re-draws it every second, but with the line moving to the next position. That is, make the line move like the second-hand in a clock.

The third point might require some basic geometry. Remember that if t is the angle (in radians) then the point (x,y) in the unit circle (centered at 0,0) that is an angle t from (1,0) is given by: x = cos(t) and y = sin(t), as illustrated by the diagram you see here.

JQuery Mastery Check

You will answer the following questions and email me your answer by 10:30am today. Implement all these in one html page. You will be using the jQuery and the jQuery-ui libraries, so make sure you load both. You will want to consult the jQuery documentation.

1. Implement a paragraph of text that when you click on its color changes from black to red: first click red, second click black, third click red, and so on.
2. Implement photo (am img) that the user can drag around the screen.
3. Implement a table (say, 2x10) and then color the background of every other row as light green.
4. A square box that you can drag around with a number in it. The number counts the number of times the user has clicked on the box.
5. A progress bar that counts 60 seconds.

Brain Age Excercise

We now start to mix our JavaScript with DOM manipulation. For this exercise you will implement a version of one of the games from the Brain Age game (no I don't get a kickback if you buy one). Our version will be slightly different from the one shows in the screenshot; instead of drawing a ling from circle to circle, the user will click on every box in turn. The game follows these steps:

1. You display the set of numbers 0 thru 9 and the set of letters A thru J, each one in a box and each one in a random location. Make sure that they all fit within the viewable window. Make sure that none of the boxes overlap.
2. The game then begins, you will show a clock that counts the number of seconds that have elapsed. The clock is updated every second.
3. The user must click on the boxes in the order A, 1, B, 2, C, 3.... When he gets to 9 the clock stops and the game ends.
4. If the user clicks on a wrong box, say A then B, you will make the background of the box red, for one second, then turn it back to transparent. Also, 3 seconds will be added to the clock for every wrong click.

One thing you will need to use is the onclick attribute, which we have not discussed yet. Just note that you can add this attribute to an a as follows:
<a href="..." onclick="javascriptFunction()">.

Cards, Closures, and Code, Oh My!

1. Create a Card(suit, number) constructor with data members suit and number. Make it so that it is impossible to change the suit and number of a card (yes, you will need to use closures). Create the following functions for this prototype:
   1. toString(): returns a string representation of the card, for example: AD, 4C, 2D.
   2. equal(otherCard): returns true if this card equals otherCard.
   3. cmp(otherCard): returns -1 if the number of this card is less than otherCard, 1 if it is greater, and 0 if they are the same.
2. Create Deck constructor with data members cards which is initially an empty array. It should also have the following member functions:
   1. shuffle: shuffles the cards. Extra credit: what is the minimum number of swaps required to ensure that a deck is shuffled?
   2. addCards(x): takes as input x which can either be an array of Cards, or a Deck, or just a Card, and adds it to the deck.
   3. deal(): returns a card from the top of the deck and removes it from the deck.

JavaScript Basics

We start with a few basic exercises to get you comfortable with writing, and debugging, short JavaScript programs.

1. Implement the function isPalindrome(x) which returns true if and only if x is a string that is a palindrome, that is, it reads the same forward an backwards: A man, a plan, a canal, Panama!
2. Implement a function called chechISBN(id) which takes as input a string (id) and returns true if and only if the id is a valid ISBN number. Please read wikipedia section which gives you the equation for verifying the check digit in an ISBN number.
3. Implement a function called isNPI(x) which takes as input a 10-digit number x and returns true if that number is an NPI number. There procedure for checking if a number is an NPI number is described here, see the "Example of Check Digit Calculation" section. Note that the check bit is the last (10th) digit in the number.
4. Implement a function createDeck which returns a JSON object that represents all the cards in a deck of cards. The object return should be an array with 52 object, each one of which should have a suit and a value property. The suits are: hearts, diamonds, clubs, spades. The values are, Ace, 2, 43, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King.

CSS Exercise

In this exercise we will explore the power of CSS by changing the look of a plain XHTML without modifying any of its XHTML, only by using a style sheet. The exercise is inspired by css zen garden, but we will keep it simpler and build it step by step.

You will need to download css-exercise.html to your public_html. Open that file in your editor and you will see that it uses a style sheet file called mystyle.css. You will write that file. You cannot modify css-exercise.html, only add information to your mystyle.css in order to achieve the following effects:

1. Lets start by giving it some color. Change the background color of the page to a nice off-white and change all the headers to a contrasting color. You can also use a background image if you feel inspired.
2. Make the quickSummary a separate box on the left such that all the rest of the text flows around it.
3. The contents of the quickSummary should stand out from the rest of the text. Change the text in there to italics and use a different font. Also, change the color to a really dark color and the text color to a light color (so we can read it!).
4. The preamble, supportingText, and participation are still boring. Change their titles to a sans-serif font. Change the background of the titles to a different color so the titles stand out. Spread out the letters in the titles.
5. The previous three elements should be separated from each other, and their headers should have some extra whitespace on top of them, but not on the bottom.
6. The footer should not draw attention to itself. Make the text small, and make it flush with the right margin. Also, draw a horizontal line before the text.
7. The linklist is really a menu that should appear at the top-left of the page, move it there. Change its style so it is clearly recognized as a menu and the hyperlinks look like buttons that change color when the user hovers over them.
8. Finish up your design with whatever flourishes you need to make the page look nice. The final page must look nice.

XHTML Exercise

Figure 1: The four tables you must reproduce.

These exercises will help you become more fluent in XHTML. Note that your files must be validated correct in order to receive full credit.

1. Write a sample web page that uses all the following elements correctly:
   1. The p and br tags
   2. The h1, h2 and h3 tags.
   3. Shows usage of the b, em, and i tags.
   4. Has hyperlinks to named targets.
   5. The q and blockquote tags.
   6. The ul and ol tags, with elements. Also, show nested lists.
   7. The code and pre tags.
2. Use the table tag to reproduce the four tables in Figure 1.

Basic Internet Excercise

In this exercise we test your understanding of HTTP and extract information using firebug. You must answer all the following questions and email me the answers. I will be asking you to show me how you found the answers to these questions.

1. Who is the administrative contact for microsoft.com?
2. Who is the administrative contact for csce242.com?
3. How can you see which websites everyone in the lab is visiting?
   1. What are you assuming?
   2. Could you see the wall messages they type to facebook.com?
   3. Why will this work for checking up on users at a different building? Explain.
4. What web server does www.google.com use?
5. What web server does www.live.com use?
6. Use telnet to speak HTTP directly with www.yahoo.com and get their main page.
7. What is the Content-Encoding that yahoo returns? what does it mean?
8. Why is it that the page you received (via your telnet session) from yahoo is not gzipped?
9. How do you get the browser to automatically load a different page from the one it asked for?
10. How many GET's are needed to load all of www.google.com?
11. How many GET's are needed to load all of www.yahoo.com?
12. When doing a search at yahoo.com, what other parameters are sent?

Linux Practice

Today you will become familiar with our Linux environment. You must perform the following tasks:

1. Login.
2. Login with different enviroments.
3. Run bluefish editor.
4. Run quanta plus editor.
5. Write "Hello world" html file and publish to public_html.
6. Use ls, cp and mv.
7. Use man.
8. Use chown and chmod.
9. Run firefox (iceweasel). Install firebug.