[an error occurred while processing this directive]
Exercise : Address Book, Client-Side (by Alex Miller)
Write the JS code to connect to a server-side JSON address book called
.
Start from this .
()
()
-
A GET request to
addressbook.php with no parameters outputs an array of names:
{"names": ["Suzie", "Billy", ...]}
-
A GET request with a
name parameter outputs that person's address:
{"name": "Billy", "address": "123 4th St."}
-
A POST request with a
name and address parameter saves that person in the address book.
Exercise : Garbage Collector (by Morgan Doocy)
Write the necessary JavaScript code to add effects and drag-and-drop behavior to a page.
Start from this /JS.
()
()
()
- When the page loads up, the IE icons should appear using an animated effect.
- When an IE icon is dragged and dropped onto the trash can, perform an animated effect and vanish it from the page.
Use Prototype/Scriptaculous or jQuery to add the effects and drag-and-drop behavior.
Exercise : Photo Gallery (by Sylvia Tashev)
Write an animated photo gallery using Scriptaculous. Start with the skeleton
and
. Click the image to run our sample solution:
:
Right now, when you double-click an image, it shows in the large
mainimage area. But it's boring! Add Scriptaculous effects such as
the following...
Exercise : Photo Gallery
-
When the page first loads up, the thumbnail of the current
mainimage
image (the first one) should scale up to 200% of its normal size, and the
mainimage image should have a visual effect, such as shaking.
-
When the user double-clicks a thumbnail to show a new image, the same effects
as just described should occur. The new thumbnail should grow to 200% size,
and the
mainimage image should shake as it changes. Also the old
selected thumbnail should shrink back to its previous size. Note that if you
double-click on the same thumbnail twice in a row, it shouldn't break.
-
When the previous/next, left/right arrows are clicked, the corresponding
previous or next image should be placed into the large area. It should be as
though the user double-clicked on the previous or next thumbnail, complete with
the same effects.
Exercise : Photo Gallery
-
Make the list of images so that its order can be rearranged by dragging the
images left and right. See the
for ideas and options such as
tag and constraint.
-
Make it so that when the user drags a thumbnail image to the
mainimage
area, the large image will update. (This is the same behavior as when the
thumbnail is double-clicked. See the Scriptaculous Wiki pages about
and
.
-
If you finish the previous effects, add other bling to the page. For example,
when the images are rearranged by dragging them to sort them, make effects
occur on the affected thumbnails. Or add sequences of effects that occur on
the same element; for example, when the large
mainimage is updated,
make it have two effects in a row, such as highlighting and then shaking.
Exercise Photo Gallery
You can view the solution javascript .
Exercise : Address Book, Server-Side (by Alex Miller)
Write the PHP code to manage an address book using JSON.
You are given the and .
The JS code sends requests to your addressbook.php web service that reads and saves address data.
()
()
Write the PHP file, addressbook.php, that provides the following behavior:
-
A GET request to
addressbook.php with no parameters outputs an array of names:
{"names": ["Suzie", "Billy", ...]}
-
A GET request with a
name parameter outputs that person's address:
{"name": "Billy", "address": "123 4th St."}
-
A POST request with a
name and address parameter saves that person in the address book.
You may assume that any necessary parameters are passed and are in valid formats.
Exercise : Prime Factors XML (by Eli White)
Write a PHP web service factors-xml.php that computes and outputs prime factorization of integers as XML.
()
()
Provide the following behavior:
-
A GET request to
factors.php with an n parameter outputs the prime factors of that integer.
For example, the request factors.php?n=264 would output:
<integer value="264">
<factor>2</factor>
<factor>2</factor>
<factor>2</factor>
<factor>3</factor>
<factor>11</factor>
</integer>
One algorithm for prime factorization of n is to loop through each integer i from 2-n, and for each time n is divisible by i, add i to your list of prime factors.
-
A GET request without a proper
n parameter should return an HTTP error code 400 (Invalid Request) with an instructive error message.
Exercise : Prime Factors JSON (by Eli White)
Write a PHP web service factors-json.php that computes and outputs prime factorization of integers as JSON.
()
()
Provide the following behavior:
-
A GET request to
factors.php with an n parameter outputs the prime factors of that integer.
For example, the request factors.php?n=264 would output:
{"value": 264, "factors": [2, 2, 2, 3, 11]}
One algorithm for prime factorization of n is to loop through each integer i from 2-n, and for each time n is divisible by i, add i to your list of prime factors.
-
A GET request without a proper
n parameter should return an HTTP error code 400 (Invalid Request) with an instructive error message.
[an error occurred while processing this directive]
