Module 6

In Module 4, you will learn about JavaScript, the prevailing client-side language, and AJAX, a method for performing asynchronous updates to a web page (without refreshing the page).

This article contains your assignments for Module 4.

Individual Assignments

JavaScript Calculator

In Module 2, you made a calculator using PHP. Now you will be making one using JavaScript.

Read the JavaScript guide first: Javascript and AJAX

• The web page should have two input fields and a radio button group for the operation, with the 4 basic math operations represented (add,subtract,multiply,divide).
• The javascript should monitor all three fields and display the current result whenever the user changes any value in any field, without refreshing the page.
• The calculator should be completely self-contained; i.e., you should not be making any requests to any other server-side or client-side scripts or web pages after the initial page load.

Tip: You can embed JavaScript code into an HTML document like this:

<script type="text/javascript">
// your code here
</script>

Tip: If your code isn't working the way you expect, use a JavaScript error console. In Chrome, for example, press Ctrl-Shift-I (or Cmd-Option-I) to open the WebKit inspector.

Weather Widget

In this section, you will make a web page that displays the weather forecast using AJAX requests to a weather server. You should complete this section without using JavaScript libraries like jQuery.

1. Make an empty HTML document; name it weather.html

   Refer to the HTML and CSS guide for the skeleton of an HTML document

2. Define a function in JavaScript; call it fetchWeather(). You may write your JavaScript in an embedded script in your head tag.
3. Inside your fetchWeather() function, make an AJAX request to the weather server.

   We have a server that outputs the current weather in JSON format. The format is documented in the #JSON Structure section below.

   URL: http://cloud.sffc1.com/wustl/weather_json.php

   We kindly thank Yahoo Weather for providing us with up-to-date weather information.

   • Note: You normally cannot perform AJAX requests cross-domain. We have set the Access-Control-Allow-Origin header on our server to allow requests from your EC2 instances.
4. In your callback, process the JSON and use JavaScript to manipulate the HTML DOM to display the following information on your page:
   • Location
     • City, in a <strong> tag
     • State, not in any tag
   • Humidity
   • Current Temperature
   • Image for Tomorrow's Forecast (see #Weather Condition Images below for more information)
   • Image for the Day After Tomorrow's Forecast
5. Finally, bind fetchWeather() to the DOMContentReady event so that your weather widget is automatically initialized when the page is loaded:

   document.addEventListener("DOMContentReady", fetchWeather, false);
   

Use the following HTML:

<div class="weather" id="weatherWidget">
	<div class="weather-loc"></div>
	<div class="weather-humidity"></div>
	<div class="weather-temp"></div>
	<img class="weather-tomorrow" />
	<img class="weather-dayaftertomorrow" />
</div>

Include the CSS file from here: http://cloud.sffc1.com/wustl/weather.css

When everything is working, the weather widget should look something like this:

Important: The widget in this section needs to work in only Firefox and Chrome. It does not need to work Internet Explorer.

Tips

JSON Structure

The JSON from our server looks like this:

{
   "updated": "Thu, 11 Oct 2012 5:54 pm CDT",
   "location": {
      "city": "St. Louis",
      "state": "MO"
   },
   "wind": {
      "chill": "62",
      "direction": "150",
      "speed": "3 mph"
   },
   "atmosphere": {
      "humidity": "50",
      "visibility": "10",
      "pressure": "30.12 in"
   },
   "current": {
      "code": "28",
      "text": "Mostly Cloudy",
      "temp": "62°F",
      "date": "Thu, 11 Oct 2012 5:54 pm CDT"
   },
   "tomorrow": {
      "code": "29",
      "text": "Clouds Early/Clearing Late",
      "low": "45°F",
      "high": "61°F"
   },
   "dayafter": {
      "code": "30",
      "text": "Partly Cloudy",
      "low": "53°F",
      "high": "65°F"
   },
   "credit": "http://us.rd.yahoo.com/dailynews/rss/weather/St._Louis__MO/*http://weather.yahoo.com/forecast/USMO0170_f.html"
}

Weather Condition Images

Each day's forecast has a code. There are images associated with these codes.

You can get images from here: http://us.i1.yimg.com/us.yimg.com/i/us/nws/weather/gr/##ds.png

Replace the ## with the forecast code. For example, for code 32, the URL would be: http://us.i1.yimg.com/us.yimg.com/i/us/nws/weather/gr/32ds.png

jQuery Dialogs

Helpful Resource: jQuery Documentation ... Some additional tips: jQuery

Create a simple page using jQuery dialogs.

• Create a page that has the words "Google" and "Yahoo".
• When the user clicks the "Google" text, open a jQuery dialog window with one jQuery dialog button. If the button is pressed, display the Google logo image (the image can be stored on your web server) on the web page, and if the dialog is closed any other way, do nothing.
• When the user clicks the "Yahoo" text, open a jQuery dialog window with one jQuery dialog button. If the button is pressed, display the Yahoo logo image (the image can be stored on your web server) on the web page, and if the dialog is closed any other way, do nothing.
• Initially there should be no image on the page (i.e., the img should be hidden with the CSS display attribute). After one of the two images is displayed, if the user clicks on the image, a jQuery dialog box should be opened with one dialog button, and if the button is pressed then the image should be hidden again. Otherwise, do nothing.

Group Project

You will work in pairs on this project.

Important Reminder: frequently commit your work to your subversion repository as a backup!

I forgot if I already mentioned this, but start early on this project! It will take longer than you think, I promise!

Calendar

Build a simple calendar that allows users to add and remove events dynamically.

You will use JavaScript to process user interactions at the web browser, without ever refreshing the browser after the initial web page load. You may use a JavaScript library of your choice, including jQuery. (No extra credit will be given for not using a JavaScript library.)

Your application should utilize AJAX to run server-side PHP scripts that query your database to save and retrieve information, including user accounts and events.

Examples

• https://calendar.google.com/
• http://www.zoho.com/calendar/

Requirements

• Support a month-by-month view of the calendar.

  Show one month at a time, with buttons to move forward or backward.

  There should be no limit to how far forward or backward the user can go.

• Users can register and log in to the website.

  You may leverage your MySQL project code and database from last week to get started.

  You may alternatively use OpenID for user authentication. Note that you will still need a Users table in order associate calendar events with a certain OpenID.

• Unregistered users should see no events on the calendar.
• Registered users can add events.

  All events should have a date and time, but do not need to have a duration.

  You do not need to support recurring events (where you add an event that repeats, for example, every monday).

• Registered users see only events that they have added.
• Registered users can delete their events, but not the events of others.
• All user and event data should be kept in a database.
• At no time should the main page need to be reloaded.

  User registration, user authentication, event addition, and event deletion should all be handled by JavaScript and AJAX requests to your server.

• Your page needs to work in the versions of Firefox and Chrome installed on the lab computers.

Tip: Run your database schema by a TA before implementing it.

Calendar Helper Library

To help you get started with your calendar, we have written some JavaScript helper functions. The code is available at:

• Full Version (for you to refer): http://cloud.sffc1.com/wustl/calendar.js
• Minified Version (to include in your pages): http://cloud.sffc1.com/wustl/calendar.min.js

For example, this is how you would make a button to load the next month and show alerts containing all the days in the weeks contained by that month.

// For our purposes, we can keep the current month in a variable in the global scope
var currentMonth = new Month(2012, 9); // October 2012

// Change the month when the "next" button is pressed
document.getElementById("next_month_btn").addEventListener("click", function(event){
	currentMonth = currentMonth.nextMonth(); // Previous month would be currentMonth.prevMonth()
	updateCalendar(); // Whenever the month is updated, we'll need to re-render the calendar in HTML
	alert("The new month is "+currentMonth.month+" "+currentMonth.year);
}, false);


// This updateCalendar() function only alerts the dates in the currently specified month.  You need to write
// it to modify the DOM (optionally using jQuery) to display the days and weeks in the current month.
function updateCalendar(){
	var weeks = currentMonth.getWeeks();
	
	for(var w in weeks){
		var days = weeks[w].getDates();
		// days contains normal JavaScript Date objects.
		
		alert("Week starting on "+days[0]);
		
		for(var d in days){
			// You can see console.log() output in your JavaScript debugging tool, like Firebug,
			// WebWit Inspector, or Dragonfly.
			console.log(days[d].toISOString());
		}
	}
}

Important: JavaScript starts the months of a year, and the days of a week, at index 0. This means that in JavaScript, January is month 0, and December is month 11. Our calendar helper functions maintain this JavaScript convention.

Web Security and Validation

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: Web Application Security, Part 3

In particular:

• Your application needs to prevent XSS attacks. The easiest way to prevent this is to continue sanitizing all of your output using htmlentities().
• Perform precautionary measures to prevent session hijacking attacks.

  You should specify your session cookie to be HTTP-Only. However, for the means of this module, you need not test for user agent consistency.

• Extra Credit: Validate your JavaScript code using JSHint

You should continue the practices that you have learned in past weeks:

• Pass tokens in forms to prevent CSRF attacks
• Use prepared queries to prevent SQL Injection attacks
• If storing passwords in a database, always store them encrypted
• Your page should validate with no errors through the W3C validator.

Grading

Due Date: _____ (both individual and group)

Assignment	Points
Calculator	2
Weather Widget	3
jQuery Dialogs	1
Group Portion:
Calendar month view correct	1
Move between months (without page reload)	1
User authentication and registration (without page reload)	1
Add events (new event shown in calendar without page reload)	1
Delete events (event removed from calendar without page reload)	1
User events are private	1
Safe from XSS	1
Safe from Session Hijacking	1
Validation, CSRF, Salted Passwords, Safe SQL Queries	1
Creative Portion	2
Extra Credit: JavaScript passes JSHint test	1