Assignment "Scripting"

Learning goals

After the assignment the student should:

• understand the role of client-side scripting
• understand the notion of interactivity and events in Web pages
• be able to reuse existing JavaScript code to enhance Web pages
• be able to find programming errors made

Background: The purpose of the assignment is to illustrate client-side scripting. To this end the students explore three JavaScript widgets in some detail. The student is not required to learn syntactic details of JavaScript but should be able to look these up in the appropriate documentation. Make sure you have read the complete assignment, including the hints and tips, before you start.

The assignment

Your job is to adapt, with the help of a text editor such as jedit or emacs, the HTML document of the previous assignment and to make it more interactive. You can be as creative as you want, but the following features are required:

1. Add, at the top of your page, a 500x500 pixel geographical map marking at least two spots on the earth that are special to you and/or your partner in your group. If users click the markers, a short text explaining why this point is special to you should appear. Make sure the map is appropriately zoomed in or out to show all your markers when the page is loaded in the browser.
2. The HTML table(s) you created for the previous assignments should become sortable on all columns by clicking the table headers
3. The background color of your page should be adaptable by the end-user, include a color picker control at the top of your page so he or she can do this easily.
4. The HTML file with the answers to all the Lab questions so far should be extended to use the JavaScript libraries mentioned below. To this end, include URIs references to the appropriate CSS and JavaScript libraries in the head element of the HTML file. Use URIs refering to the original location on the Web, do not link to downloaded copied on your harddrive. Only submit your HTML file and CSS files, i.e. as you have done with the previous assignment. Do not submit files with third-party JavaScript libraries that you may have downloaded from the Web.
5. You may also use JavaScript in the body element.

Hints and Tips

• This assignment covers material of Chapter 4, 5 and 7 of Jackson.
• You are not the first one to discover that it would be nice to have interactive maps or to sort tables, but that this is not supported by XHTML! You are strongly encouraged not to reinvent the wheel, but to reuse as much as possible code that is already freely available on the Web.
• For the map: feel free to use the examples given in the Google Maps API documentation. Tip: you do not need a Google API key or even a Google account to make this assignment. Google will not check your key if you load the XHTML file with you map into the browser directly from your local file system. The key is only needed if you load your page via a Web server. Other tip: you will need to lookup the longitude/latitude of your favorite places. There are many web sites that help you to do this, including http://www.satsig.net/maps/lat-long-finder.htm. Note that the last site also uses Google Maps, so you could add similar coordinate-finding functionality to your own map (optional).
• For sortable table columns, you could use the JavaScript DataTable widget from the Yahoo! User Interface Library (YUI). Free feel to cut and paste JavaScript and XHTML code from the tutorials and examples provided by Yahoo! Tip: to simple reuse the table(s) you already have in XHTML, you can use YAHOO.util.DataSource.TYPE_HTMLTABLE
• For the colors, you may use the Color Picker control, also from the YUI. Free feel to cut and paste JavaScript and XHTML code from the tutorials and examples provided. Tip: reuse the event listener from the lab questions by associating it with the control's rgbChange event.
• Be creative. You will learn much more by also exploring the configuration options of the controls mentioned above and by experimenting with adding other controls to your page. Warning: such additional functionality will play only marginally influence your final mark. Invest your time well, do not spend too much effort creating a fancy page just to get a higher mark!
• If you make errors in your JavaScript, they may be hard to find. Learning how to debug JavaScript and understanding why this is often difficult is part of the goals of the assignment. To simplify debugging, you could make separate pages for the various modules and develop them independently, and only merge them into one single page after everything works as expected. Make sure you have the "Error Console" (under the "Tools" menu in Firefox) of your browser open to see syntax and other errors. You may also use JavaScript debuggers, use the Web to find out how.
• If you cannot find a bug, even after spending a significant amount of time, feel free to ask help from other students during the lab sessions. If you feel you cannot make this assignment without spending an unrealistic amount of time debugging, submit what you have, explain what does not work and explain what you have tried to get it working.

Submission details

Check the Blackboard site of the course for submission details.