Homework 04

Part 1: Continue Practicing JavaScript

1 hour

Continue your lessons on Code Academy. Spend at least another hour going through the activities.

Part 2: Continue Reading JavaScript: The Good Parts

1 hour

If you haven't already, download these books on JavaScript. Last week the assigned reading was the first 3 chapters of JavaScript: The Good Parts. This week you should read chapter 4 (on functions).

Part 3: Create a Backbone Model and View

2 hours

The MVC (model, view, controller) design pattern is the dominant architecture for web applications. Backbone is organized around this pattern, so in order to make our site we must master models and views.

In the coming-soon branch of our repository I have added the directory web/homework4/. We went over example1.html in class. For this week's homework you are going to fill out the employee model and view shown in example2.html.

First, switch to your personal development branch (which should be your name) and download the lastest changes from the coming-soon branch:
git checkout <your personal development branch>
git pull origin coming-soon

For example, I would do:
git checkout barry
git pull origin coming-soon

If you don't yet have a personal development branch you can create one. You only need to create this branch once.
git checkout coming-soon
git branch <your personal development branch>
git checkout <your personal development branch>
git pull origin coming-soon

For example, I would do:
git checkout coming-soon
git branch barry
git checkout barry
git pull origin coming-soon

Now you can make changes without worrying about overwriting your classmates' homework. Study web/homework4/example1.html, especially how we create our own models and views by extending the base Backbone.Model and Backbone.Marionette.ItemView classes. You can see the results of this code by launching your web browser and opening the example1.html file. Most browsers allow you to open local files with the keys ctrl-o or the menu command File > Open.

Once you understand the code in example1.html, open example2.html. This file creates a very basic employee model and view. Your task is to enhance the employee to have more realistic properties. In 5 places in example2.html there is a TODO assigned. Follow the instructions in this file to add the required functionality to your model and view. URLs of reference pages are included to help you if you get stuck. As before, you can see the results of your changes by opening example2.html in a web browser.

When you've made the requested changes you should commit and push them to github so I can check your work. Go to the base of your projects folder (some/file/path/kinu-web-development) and type:
git status (to make sure you're on your personal development branch)
git add web/homework4
git status (to verify that your files are being tracked by git)
git commit -m "Enhanced the employee model for homework 4."
git push origin <your personal development branch>

Good luck, and have fun.