Course Website

In lecture on 11/17, we will learn about selector-based programming and how many JavaScript libraries take advantage of CSS selectors to select elements in the DOM and operate over them. While libraries like jQuery and D3 exist to simplify adding properties to elements, they can be done in straight JavaScript as well. For example, JavaScript’s Document.querySelector() function (see MDN article, esp. querySelectorAll() for a list) is the analog for jQuery’s $("") selector syntax.

The purpose of this assignment is to get you comfortable with selecting sets of entities from the DOM and reading/changing their properties.  The elements of the DOM can hold state (e.g. is this checkbox checked or not?), which can affect how functions operate over given data.

Look over this assignment before lecture on 11/17 to form questions to ask. The actual programming assignment itself is due on Monday, 11/23.

The Template

We’re using an HTML form to use as our base for our JavaScript exploration in this assignment.  These elements have unique IDs, some are contained within named divs, and a subset have a class associated with them.  Your goal is to use these identifiers to appropriately select relevant elements and operate over them (change or read their properties, based on user input).

It doesn’t do anything too fancy, here it is: http://jsbin.com/qevoka/edit?html,css,js,output

For your assignment, add the following functionality (some template code has been started in the JavaScript file):

• When the user clicks on the ‘Are you a student’ checkbox, enable all the student questions and disable all the non-student questions.
• If the user selects any odd option (1st, 3rd, 5th, etc.) option, fill in the ‘Does that make you tired’ text box with ‘Yes’.
• When the user clicks on the ‘Does your job have you interact with dust?’ question, fill in the below text box (‘Do you like your job?’) with ‘It’s too dusty!’  When the checkbox is cleared, clear the same text box, iff (if and only if) the text is the same as the checkbox entered.
• Similarly, when the user clicks on the ‘Do you use a desktop computer […]’, fill in the below text box with ‘No, I wish I were outside!’.  When the checkbox is cleared, clear the same text box iff the text is what was filled in by this checkbox (like above).

Turn-in mechanism

By Monday, 11/16 you need to have at least looked over the assignment – it’s a good way to bring questions to class.

By Monday, 11/23 you need to turn in your final program. You can turn in a link: either to a JSBin, or you can put it into your handin directory. For this assignment, there is a handin link – we won’t do it by discussion.

There will also be a discussion board. Post here if you have a question, or if you find a resource for learning how to do it, or can answer someone else’s question. To get credit for this assignment, you must both make a meaningful post in the discussion (a reasonable question counts) and hand in a working program.

• Canvas Hand-in
• Canvas Discussion

Notes

Selector-based programming can be very powerful, and data visualization libraries like D3 use it to bind data to elements on the page.  Though D3 binds data to SVG elements (which look like HTML elements!), the selection concepts stay the same: one can give SVG elements IDs, classes, and select based on the type of tag and its position in the object hierarchy.

Here’s a nice demo that shows how object selection works in D3: http://prcweb.co.uk/lab/selection/.  You can see that it is similar to jQuery and vanilla JavaScript, but the semantics are different.  If you want a peek ahead, running through the Object Pattern D3 tutorial shows how selector-based programming can make drawing data-driven objects easier.

Some people were having problems when they ran their P4 assignments from a secure JSBin or from their handin directory.

the problem is… the link for fakeserver was an http link, not a secure link (https). if your program is from a secure place (it was from https://), then it is a security error to load a non-secure thing

the answer:

load fakeserver via a secure link:

https://pages.cs.wisc.edu/~cs638-1/Puzzle4/fakeserver.js

This is a harder puzzle. It’s not that much bigger.

The idea is for you to see what it’s like to program using callbacks and the asynchronicity of working with web services. Except that we’ll fake the web service.

Your task is to make the “flight status board” like you see in the airport. You need to query the different airlines to get their flights, and present them to the user in a nice list/table.

The catch is, that the airlines all have different servers to provide you with the information. So you need to make requests to each airline to get their data, and assemble it all into a single list.

The web servers will be “faked” – you’ll be provided with a JavaScript module that generates random info. But it will behave like a web server. When you make a request, it might take a while. Or it might fail. Or it might take a while and fail. (actually, failures aren’t implemented in the current version).

What your program needs to do:

• It needs to make a request to each airline to get a list of its flights for the day.
• It needs to make a request to the airline to get the information about each of those flights.
• It needs to assemble all this information into a single table, sorted by time.
• Good feature: It should update the display as it comes – the servers might take different amounts of time to respond, and results will come in out of order. Your table should update as stuff comes in.
• Bad feature: do not do this serially, send out as many requests and take them as they come back. Otherwise, it will take too long

If you do this right, the table will start to fill in as you get more information.

Handing this in

The program is due on Monday, November 9th. Post a link to your solution in the discussion group. If you are not able to get it to work, post a question – and maybe look at other people’s assignments to get ideas. It’s your first posting that is due on the 9th. But you should post more than a placeholder. You should have a final program by Friday, November 13th.

You are required not only to submit your own solution, but also to comment on other peoples. Either give help, or give feedback. Each person must make at least 3 postings (beyond their own program).

You can put your program on JSBin. Or you can put your solution into your Puzzle2 handin directory (since most of you didn’t use that). Or put it on some other server you have access to. Wherever you put it, post a link in the Canvas discussion.

Canvas discussion for giving links to turn things in.

Evaluation

To get a passing grade you must turn in a working program, and comment on other people’s programs (or give them help).

But if you really wanted a decent grade, make it work asynchronously and have the table fill in as new thing come. But since we’re not giving grades, you should do this because you want to learn. And help others learn.

The “fake server”

The fake server provides a single object: Airlines. This object has one field “airlines” that provides a list of the airlines. It provides one “real” method: request, and one method for testing “testreq.” The data will not change during a run – airlines won’t come and go, and if you ask an airline for what flight it has, it will return the same list each time (although on different runs of the program, a different list of airlines and flights might be generated).

The request method takes two parameters: a string with a request, and a callback function that is called when the data from the request is returned. The callback function should take a single parameter that will hold a javascript object with the result of the query.

The testreq method takes one parameter: a string with a request. It returns the result of the request immediately. It does just what the request method does, just faster and without the callback interface. As its name implies, its there for testing. Don’t use it in your final program.

You can, of course, look into the code for the fake server. But please don’t part of the idea is for you to figure out how it works from the (intentionally limited) documentation, and by trying it out. This is like the real world: you want to use something, but it’s never as good as you had hoped.

Request format: All requests have the form “airline?query”. Where query is either “flights” (which produces an array of integers with flight numbers) or a flight number (which produces an object with information about the flights).

So here is an example dialog with the server. With each request, the answer is “returned” after a delay by calling the callback with the value. This assumes one of the airlines is called “united” (remember to check what airlines).

request(“united?flights”) –> [10, 20, 30]

request(“united?10”) –> { flight:10, from:”ORD”, to:”MSN”, arrive: 819192240000, airline:”UA”}

Note that times are in milliseconds since 1970 – see the JavaScript Date Documentation for info.

Getting Started

You can access fakeserver at: https://pages.cs.wisc.edu/~cs638-1/Puzzle4/fakeserver.jsNOTE: if you access it as “https://” then it will load whether your program is from an https source or not.

Note: you should load this script from that address – it might be updates as bugs are fixed. I’d like to have it do a little more realistic simulation of the delays, for example.

There’s a simple program that tries out a function or two on JSBin to help you get started. http://jsbin.com/zacaso/4/edit?js,output (notice that it loads the script in the HTML).

Start by making an HTML file that includes the “fakeserver.js” file. Then try to see what happen when you try different requests. If you get stuck, try using testreq instead of request.

Try just making an un-ordered list of all flights first. Then figure out how to put them in order.

Try just writing things out in an ugly way (see the example output below). Then make it prettier.

How big is this?

A minimal version that does not sort the flights can be done in about 10 lines of code! (plus an HTML file that puts it together – which has 2 lines of actual code). A version that does sort (but uses testreq) is a little longer.

A Sample output

Very ugly. And this was done using testreq. Make yours less ugly. And don’t use testreq.

DL121 from:LGA arrives:09:16:32
UA725 from:ORD arrives:09:28:32
DL982 from:MSP arrives:09:30:32
UA307 from:ORD arrives:11:26:32
DL622 from:DTW arrives:11:28:32
AA116 from:ORD arrives:12:11:32
UA637 from:DEN arrives:13:07:32
AA585 from:ORD arrives:14:21:32
UA747 from:EWR arrives:15:55:32
UA830 from:EWR arrives:16:03:32
DL365 from:MSP arrives:16:30:32
AA391 from:DFW arrives:17:23:32
DL768 from:LGA arrives:17:50:32
UA221 from:ORD arrives:17:54:32
UA857 from:ORD arrives:18:58:32
UA589 from:DEN arrives:19:14:32
DL285 from:DTW arrives:20:33:32
AA760 from:MIA arrives:21:11:32
DL297 from:DTW arrives:21:34:32
AA653 from:ORD arrives:21:36:32
AA339 from:DFW arrives:21:48:32
DL860 from:LGA arrives:22:15:32
DL549 from:ATL arrives:22:38:32