,

Lab :

Except where otherwise noted, the contents of this document are Copyright 2012 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.

original lab idea and code by Victoria Kirst and Jeff Prouty; revised by Brian Le and Marty Stepp

Basic lab instructions

• You may want to bring your textbook to labs to look up syntax and examples.
• Have a question? Ask a TA for help, or look at the book or lecture slides.
• We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
• You are not expected to finish all of the exercises. Just do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab.
• Before you leave, check in with a TA to get credit for your work.

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.)

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":

• https://webster.cs.washington.edu/cse190m/labs/8/urban.php?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 jQuery library.

• urban.html

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.

• Listen for clicks on the button with id of lookup. Relevant HTML:

  <button id="lookup">Lookup</button>

• Fetch the data by creating an $.ajax object to fetch data from our Urban Dictionary service for the appropriate term. NOTE: You must upload your files to Webster to test them.

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.)

• API
• bling
• booyah
• Ferengi
• fnord
• hoopty
• Internet Explorer
• JavaScript
• kardash
• The Neverending Story

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.

• Show it inside a div on the page with id of result, rather than as an alert.

  <div id="controls">
  	Term: <input type="text" id="term" />
  	      <button id="lookup">Lookup</button>
  </div>
  <div id="result">  <!-- definition should go here -->  </div>
  

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:

• https://webster.cs.washington.edu/cse190m/labs/8/urban.php?term=API&all=true

<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

• Fetch a word's first definition as XML, and insert three new paragraphs into the result div:
  1. the definition text
  2. the word's example usage (give it a class attribute of "example")
  3. the author who submitted the definition (preceded by a dash)
• Use the Ajax request's data parameter and methods getElementsByTagName, getAttribute.

Exercise : All definitions (~15 min)

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

• Use the DOM to create an ordered list (ol) and add that list to the page.
• Inside your list, place a list item for each entry with the 3 paragraphs from last exercise.

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:

• https://webster.cs.washington.edu/cse190m/labs/8/urban.php?author=Wolfy

{
	"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.)

• Display the terms as a paragraph inside the page in the div with the id of related.
• For each term, display the term itself followed by the date it was submitted in parentheses. Separate terms by commas.
• Above the paragraph of terms, create an h2 heading saying, "All entries by Wolfy".
• Specify that the data type is JSON so that jQuery will convert the returned information into a JSON object.

Exercise : JSON, All definitions by any author

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

• Give them a class of author to trigger the provided CSS for colors and underlining.
• When a username is clicked, Use Ajax to fetch the JSON data for that username and display the list of all definitions that have been submitted by that user.

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:

• Make the page display a reasonable error message if the user asks for a definition of a word that is not found in the dictionary.
• Make the page clear out any previous definitions if the user searches for a new word.
• Add a "Loading" animation image that will temporarily occupy the result area while the data is being fetched via Ajax. You can either use this image or create your own from the Ajax loading image site, ajaxload.info.

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!