This assignment tests basic javascript skills
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Part1
Part2
Reflection
test
.gitignore
.jshintrc
.travis.yml
README.org
package.json

README.org

Javascript Assignment: Goal

This is an assignment for Digital History, a digital humanities course taught in the History Department at the University of Toronto. If you’re a teacher, feel free to fork and repurpose for your own courses. If you’re a student, keep reading!

You do not have to become a coder to do well in this course. However, you will have to be willing to explore technical skills that you might not otherwise develop as a humanities scholar. In this assignment, you will learn very basic javascript coding skills and apply them to a few simple problems. The goal of the assignment is to provide you with basic technical knowledge that you will need for later assignments.

Note: if you’re reading this in Atom, the org-mode syntax probably won’t display properly. Sorry about that! It’s likely easiest to read these instructions online instead.

Expectations

This assignment is graded pass/fail. You will only get credit if all of your code runs as required. To pass the assignment, you must:

  • successfully copy this repository on github and clone a local copy
  • complete at least the first two parts of this assignment (plus the third part if you hope to get an A in the class), such that both the student-visible tests and the instructor/machine-visible tests all pass.
  • commit your work to git as you go, so that a query of the git history will show multiple steps. Please note that git commits are timestamped and unique; they are an excellent defense against accusations of cheating, so please use them extensively. Tests will fail unless you make at least 6 commits to the repository.
  • push all your changes to Github
  • the last commit pushed to the master branch by the assignment deadline becomes your submisison automatically

Checking Out And Handing In the Assignment

Create your personal copy of this repository by following this link. The new repository will appear at the URL https://github.com/DigitalHistory/02-javascript-YOURGITHUBID (as always, replace with your own github ID!). Clone this new repository locally via the “Clone or Download” process discussed in your first assignment and also described here, and do your work in Atom.

When your assignment passes all tests and you are satisfied with your work, please be sure that you have also pushed all your commits to the repository. This will ensure that I receive your work.

Details

As you know, web pages are composed of three components: HTML, CSS, and Javascript. HTML provides the structure and content of a web page; CSS controls the style of presentation; and Javascript permits dynamic modification of both. In this assignment, we finally turn to Javascript, a.k.a. “the fun part”.

Part 1 - Javascript in the Console

For Javascript, we will use the excellent online book Eloquent Javascript as a resource textbook. Read Chapters 1-4 and, importantly, do all the exercises using the code sandbox or some other sandbox environment, such as the Atom JS Console or the amazing Firefox Scratchpad tool. Some of the discussion in the book, especially in chapter 3, may be hard to follow. The exercises may also be quite hard. It is fair to give up and look at the solutions; but be sure you understand the solutions once you’ve looked at them.

Let me stress this strongly: you can try to do this assignment without the textbook & practice exercises, but it will be much, much harder.

Once you have read the textbook and done the exercises, you should find this part of the assignment very straightforward. Complete the code in ./Part1/01-functions-and-variables.js and ./Part2/-2-objects-tests-loops.js according to the instruction-comments in those file. Check your code by testing it in the EJ code sandbox, Firefox Scratchpad, the Chrome console, or the js-console package in Atom (the latter should have been installed automatically if you installed the history-hack-pack). I have also written tests for you which will produce the appropriate output when your code is correct.

Part 2 - Javascript in the Browser

Continue to read Eloquent Javascript, this time chapters 12 and 13. Again, read the chapters and do the exercises; if the exercises are too hard, look at the answers but be sure you understand them.

./Part2/index.html is a very simple HTML file that contains a table of prime ministers. Your task is write one or more functions that will add links to the Wikipedia pages of all the prime ministers.

Look at the structure of the table. Each row looks like this:

<tr>
  <td class="PM">John Sparrow David Thompson</td>
  <td class="Party">Conservative</td>
  <td class="From">1892</td>
  <td class="To">1894</td>
</tr>

Your code should change that to this:

<tr>
  <td class="PM"><a href="https://en.wikipedia.org/wiki/John_Sparrow_David_Thompson">John Sparrow David Thompson</a></td>
  <td class="Party">Conservative</td>
  <td class="From">1892</td>
  <td class="To">1894</td>
</tr>

Rather than asking you to write your code directly in index.html, I have provided a script tag at the end of the file which loads the file ministers.js. After the page has loaded completedly, the function updatePage() will run; your job is to make sure that updatePage() does what it’s supposed to.

There is some template code in link-ministers.js already; complete the template and test your code by (re)loading index.html in your browser. You can also use the built-in tests (see below).

Hints: In this exercise we are beginning to actually do a form of digital history. Notice that we are treating text as data: transforming names into “pointers” that give us access to further information.

This is made possible because the web page itself is already well-structured. Notice the class attribute on each <td> element:

<td class="PM">John Sparrow David Thompson</td>

Now, consider the structure of Wikipedia links:

https://en.wikipedia.org/wiki/John_Sparrow_David_Thompson

Note they always consist of “https://en.Wikipedia.org/wiki/” + A_Name_With_Spaces_Replaced_By_Underscores. But, lucky you, Wikipedia will rewrite spaces as underscores for you! If you would still like to try to do the replacement yourself, take a look at the Javascript string replace method.

We will use skills developed in the exercises from chapter 13. Your function will have to:

  • find and collect all the elements with the class “PM”. The method you will need to use is mentioned only once in chapter 13, under “Finding Elements.”
  • clear the existing text from the node.
  • add a child node of type “a” with text content that comes from the original text, and a link that is constructed from the Wikipedia address prefix + the original content (you can keep the spaces or replace them by underscores, as you wish).

If you find this is too easy: wikify all the fields in each row. Now click on the “party” links. What could you do to fix them? Also, can you change the background color of one or more classes?

One more challenge for the eager. Right now, the wiki links are added immediately when the page loads. Can you defer adding the links until a button is clicked? You will need to add a button element with an “onClick” attribute to index.html, and move the execution of updatePage() out of the page load and into the button. This is the only part of the assignment that requires you to make changes to index.html, and it is completely optional & just for fun!

P.S. – you may find it useful or interesting to look at the script I used to generate the table. You will find it in ./Part2/make-minister-table.js

Part 3: Reflection

If and only if you are aiming to achieve an A in the course, you must also complete the Reflection section of the assignment. I’m simplifying things a bit this time – no need to copy or rename a file. Simply answer the questions in Reflection/reflection.md. Follow the directions in the file.

Tests

As in our other assignments, this one conmes with a set of bundled tests designed to make your life a little easier. To run them, first execute npm install -d from this directory. Then run npm run test or, to watch the directory continuously, npm run watch