HW6: JavaScript Practice

This homework is a short stand-alone JavaScript+HTML program that will give you some practice with the JavaScript basics. You will write one HTML page and one JavaScript file that together implement a simple game (well, game-like thing). Specifically:

1. You will write an HTML with 100 buttons in a 10 by 10 table. Every button has the number 1 in it.
2. When the user clicks a button the number in that button gets distributed among its North, East, South, and West neighbors, with wraparound. For example, if the button has the number 2 button to the North will have its number increased by one, as well as the number to the East. The button that had the 2 will now have 0.
3. There is a score button which always contains the number of zeroes in the game board.
4. You will use closures for implementing the onclick methods. I know that this homework can be done without using closures, but I want you to practice using closures. Specifically, you will write one function that generates a function for each button.
5. You cannot use any JavaScript libraries. We will be using jQuery in the next homework, but not for this one.

You can turn it in here. The deadline is Monday, February 28 @11am. Also, make you you post it on your appspot.com site. You can just put in in a /test directory and add that directory as a static_dir in your app.yaml. Make sure you put the url to your published code in the source code you turn in.

Required Reading

1. The videos from the previous post.
2. The JavaScript Guide.

Here is a quick demo of what it should look like:

JavaScript: The Most Used Programming Language in the Universe

Next week we begin our journey into the magical realm of JavaScript. I will be trying to show you some of the most important bits about the language in class, but I highly recommend you also listen to the lectures below by Douglas Crockford: Master Yoda of JavaScript.

Douglas Crockford: "Advanced JavaScript" (1 of 3) @ Yahoo! Video

Introduction to JavaScript Lectures

• Part 1: 31 minutes | M4V download
• Part 2: 31 minutes | M4V download
• Part 3: 29 minutes | M4V download
• Part 4: 20 minutes | M4V download
• Download slides (zipped PowerPoint file)

Advanced JavaScript Lectures

• Part 1: 31 minutes | M4V download
• Part 2: 25 minutes | M4V download
• Part 3: 11 minutes | M4V download
• Download slides (zipped PowerPoint file)

These videos come from the YUI theater, which we will be attending often. The Mozilla foundation has some really good tutorials on JavaScript, in case you want some online reading material. I also recommend you read the two recommended JavaScript books if you can afford it. You can skim over the big JavaScript book, but you are cheating yourself if you don't savor every page of "The Good Parts" (except for those strange diagrams, I don't know what Doug was thinking).

App Engine Datastore in Depth

Below are two talks which give more details on building good sophisticated apps using the datastore.

Above is Building Scalable Complex Apps in the App Engine

Above is Next Gen queries for the app engine.

HW4 Grades Out

I emailed your grades for HW4 last night. I have a couple of general comments.

1. Use template inheritance. It is not just that I am pig-headed (I am), it is also because as we add more and more pages to the webapp you will want an easy way to change the <head> of all your pages, as well as the general layout, CSS, etc. This is trivial to do if you have one main template from which all others inherit. It is really hard to do if you have 40 different html files.
2. Re-use your URL space. Remember that you can both GET and POST to the same url. As I explained in class, the standard way of organizing a website (following ye ole REST principles) is:
   • GET /resources: returns a list of resources
   • GET /resources/42: returns resource 42
   • POST /resources/42: creates or updates resource 42
   I will try to follow this general pattern in the webapp in the homeworks.

Datastore Code Samples

The various revisions of the code I'm using today can be found at the github. The slides are here.

HW5: Survey Question Management

In this homework you will implement the basic survey question creation, listing, answering, and summarizing capabilities. Specifically, you will extend the previous webapp to have the following features.

1. Any logged-in user will be able to create a survey question at /survey. A question consist of the text of the question and up to five different answer choices. If the user leaves some of the choices blanks then the question will ignore these and have fewer answer choices. Only logged-in users can create questions.
2. You will give each question its own unique url of the form /1234, for any integer number. That is, use a counter that is incremented by 1 every time a question is created. Use a transaction, as explained in class, to increment this counter. If you are feeling up to it, try implementing a counter that uses A-Za-z0-9 as the digits (this is optional).
3. The /user/<username> page will list all the questions that username has created, along with his name. This page is viewable by anyone. If someone clicks on one of the questions he is taken to the page for that question.
4. If a user visits the page of one of the questions he created (/1234) then he sees the question but he cannot submit the answers. Instead, next to each choice is the number of times others have submitted that choice. Also at the end of the page, the owner of the question will see a 'Delete' button. If he clicks on it the question is deleted.
5. If either an anonymous (non-logged in) or a non-owner user visits a question page he can provide an answer. However, if he has already provided an answer he cannot give another answer and instead sees the number of submitted answers. You can use the IP number of the client to keep track of who has already submitted a question, see self.request.remote_addr.

This homework is due Monday, February 21 @11am, you can turn it in here. You do not need to upload your CSS files.

App Engine Datastore Lecture

Next week I will be going over the datastore in a bit more detail. The video below goes into some details about the app engine and how it works. It is really good. Watch it. Here are the slides.

Web Design Tools and Software Shows

In case you did not take notes in class, here a few very useful links Jason mentioned:

1. Color Scheme Designer: you will want to use this for this homework.
2. 960 Grid: you might want to switch over to this for your layout.
3. 5by5 TV: shows on web design and software development. The Dev Show looks cool. I'm going to check it out.

HW3 Grades Out

I have just emailed the HW3 grades. I do not have a solution for this homework and probably won't for future homeworks. If people want I can post the solution of a student who had a good, but not too good, implementation (too good sometimes makes for hard-to-read code).

Many of you should read about template inheritance, which I demoed in class, and re-write your templates using it. You want one base template and a couple of other templates which inherit from this base. It might be more work now but it will save you a lot of work as we add more and more pages to the app.

HW4: CSS and Mobile

You will now use what you have learned about web design and CSS and build two style sheets: one for the desktop and one for mobile, and incorporate these into your website. Specifically, you will:

1. Create a style sheet for the whole website. All the pages (/, /account, /user) should use this style. Note that you will need to modify your app.yaml for the stylesheets to be downloadable.
2. Your style should have a coherent color scheme, a logo (can be just text in a different font), distinct login bar, and, well, it should have a bit of style.
3. Create a new dummy page, /question which lists a sample question (in the next homework you will be implementing the question-entering form). Remember that this is a multiple-choice question, with radio buttons for answering. This new page should also use the style.
4. Create an alternate mobile style for the /question page. This style should be optimized for viewing in an iphone or android phone. If you don't have one, you can use safari to preview it, otherwise, just make your browser window really small.

This homework is due on Monday, February 14 @11am. You can upload it at i-am-done.appspot.com/242/HW4.

Required Reading

• CSS Beginner Tutorial
• HTML and CSS for mobile tutorial.
• Return of the mobile stylesheet tells of the problems with getting different mobile devices to recognize a mobile style sheet.

Recommended Reading

• The Principles of Beautiful Web Design

Always Check the Homework Comments

When you visit any of the homework pages always check the comments. I will add there any further clarifications or requirements to the homework. Also, if you have a questions about the homework you can post it there. These comments are emailed instantly to me so, it is just as fast as emailing me directly, but everyone else gets to see the question.

A Solution to HW2

The program I discussed in class today can be found here.