,

Lab :

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.

Valid HTML5 Valid CSS

Basic lab instructions

Today's lab

Many web sites like Google, Flickr, and Facebook allow you to access their data as text, XML, and/or JSON. For this lab we will use Ajax to access data from Urban Dictionary, a web list of slang and social terminology. (NOTE: Some content on Urban Dictionary may be considered offensive.)

expected output

Exercise : Regular Expressions 1

Write a regular expression (slides) that would match the following kinds of patterns. You can use the site Rubular to test your regex.

Exercise : Regular Expressions 2

Write a regular expression (slides) that would match the following kinds of patterns. You can use the site Rubular to test your regex.

Info about Urban Dictionary

We have created a service urban.php that serves Urban Dictionary content. Pass it a term parameter, and it outputs the term's definition as text. For example, for the term "API":

The service returns an HTTP error 410 if the term is not found.

We're providing you the urban.html file for a page to search Urban Dictionary. Download it to your machine; you will not need to modify it. Write JavaScript code in a file urban.js. The page already links to this file and to the Prototype library.

Exercise : alert a single definition (~10-15 min)

Write JavaScript code so that when a user clicks "Search", the definition of "fnord" appears as an alert.

expected output

Our custom Urban Dictionary words

(NOTE: The real Urban Dictionary API is down, so our urban.php is a minimal subset that knows only the following terms. You can use these terms for testing your program.)

Exercise : Any word's first definition (~5-10 min)

Modify your code so that the definition of the word typed in the text box (not always "fnord") is displayed.

expected output

Exercise : Single definition/author from XML (~20 min)

Our Urban Dictionary lookup service can also send data in XML format. The XML data can return multiple definitions, and each definition comes with an example usage and the author's name. To get XML data, pass our service a parameter all, set to true. The following is an example call and its output:

<entries term="API">
	<entry author="Nathanmx" submitted="May 26, 2004">
		<definition>
			An API is a series of functions that programs can use ...
		</definition>
		<example>
			Windows uses an api called the Win32 API.  You can access ...
		</example>
	</entry>

	<entry author="Tyler Menezes" submitted="Oct 24, 2007">
		<definition>
			Adaptive Pie Interface. Used by various sites to interact with ...
		</definition>
		<example>
			$urb = new Urban::API;
			$urb->ServePie('me');
		</example>
	</entry>
</entries>

Exercise , continued

expected output

Exercise : All definitions (~15 min)

Now modify your code to show three paragraphs about each of the definitions of the word.

expected output

Exercise : JSON, all definitions by Wolfy (~20 min)

Our Urban Dictionary lookup service can also send data in JSON format that lists all terms for which there is a definition submitted by a given author. To get this JSON data, instead of term, pass our service a parameter author, set to the username of the author of interest. The following is an example call and its output:

{
	"author": "Wolfy",
	"dictionary": "Urban Dictionary",
	"entries": [
		{"term": "API", "number": 3, "submitted": "Jul 23, 2010"},
		{"term": "fnord", "number": 3, "submitted": "Jun 6, 2004"},
		{"term": "kardash", "number": 2, "submitted": "Dec 26, 2011"},
		{"term": "The Neverending Story", "number": 3, "submitted": "Feb 28, 2009"}
	],
	"school": "University of Washington",
	"timestamp": "May 17, 2012, 1:21 AM"
}

Exercise , continued

Alter your page so that whenever a term is looked up, it will also fetch JSON data listing all of the terms for which the user "Wolfy" has submitted a definition. (Always look up "Wolfy" for now; in the next exercise we will make it more flexible.)

expected output

Exercise : JSON, All definitions by any author

Instead of showing data about "Wolfy", change your page so that the usernames are clickable.

expected output

Exercise : (h4x0rz only): Tidy up; loading animation

If you finish all of the previous exercises, do some additional work to make the page more robust:

If you finish them all...

If you finish all the exercises, you can add any other content or code you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

Great work!