Project 1

Due on Monday February 4 before midnight


This project must be done individually. No copying is permitted. The goal of this project is to learn client-side web programming using JavaScript. More specifically, you will create an XMLHttpRequest object to communicate with a web service asynchronously.

Please look at the javascript.html that uses the XMLHttpRequest object.


For this project, you may use any web browser that supports JavaScript (such as Firefox or MS Explorer). You may use a plain text editor on your PC to write one HTML file that has embedded JavaScript. Do not post your HTML file on a web server; you should let your browser read the HTML file as a local file.


The following web pages contain various tutorials. Use them as a reference only.

The Web Server

For this project, you will use the Dictionary Service provided by available at DictService. In particular, you will use the HTTP GET request with dictid=wn (WordNet 2.0).

Project Requirements

Your HTML page should have three sections: an input textarea, a text display section, and a dictionary description section. At the beginning, the user writes an English text inside the input textarea. When she presses a button, the web page displays the content of the input textarea in the text display section. When the user moves the mouse on top of a word in the text display section, the browser sends a query to the DictService and displays the result (the word description) in the dictionary description section.

The input textarea may look like:

   <textarea id="text" rows="10" cols="100"></textarea><br/>
   <input type="button" onclick="process();" value="Process Text">
You need to write a function process() that reads the content of the textarea using document.getElementById("text").value, and inserts it into the text display section.

In order to make the words of the text display section mouse-sensitive, you need to provide a JavaScript action to each word. For example, if the textarea contains two words: "computer science", you can generate the form:

<span onmouseover="describe('computer')">computer</span>
<span onmouseover="describe('science')">science</span>
where the function describe sends an HTTP GET request to the DictService and displays the result in the dictionary description section. To generate these wrapped words, you need to split the text of the textarea into words (using split()) and wrap each word with the appropriate HTML code.

Note that the interaction between your HTML page and the DictService should be done asynchronously, using the XMLHttpRequest object, without redrawing the web page.

What to Submit

Use the form below to submit your HTML file. You may submit your file as many times as you like, but only the most recently submitted file will be retained and evaluated.

Submit this file:

Last modified: 01/24/08 by Leonidas Fegaras