The ToDo application that we began to look at in class uses your browser’s local storage to keep track of ToDo items even after a browser refresh. To make the application a little easier to understand, there are two versions of it posted here:

  • An ephemeral version where the ToDo items are not stored. The code is a bit shorter, so that you can focus on how callback functions are registered with the JS Engine.

  • A stored version where the ToDo items are stored in local storage. This is the version we were looking at in class.

You can run either app on Linux, Mac, or Windows1. Simply download both files to the same folder and the .html file with your browser. Just browse to it using your file explorer (Finder, Thunar, whatever) and double click on it.

For each of the apps, consider the following learning exercises:

  • Have a look at what happens to your browser when window.confirm() is called2. What is happening to the stack, queue, JavaScript Engine, and event loop?
  • Comment the source code to see if you can describe what is happening.
  • Describe what happens when each button on the page is pressed.
    • What function(s) are executed?
    • How does the browser’s JavaScript Engine know to run those function(s)?

Note that you won’t be expected to regurgitate these samples on the JavaScript test. However, you need understand how callback functions are registered and executed. Remember that the browser runtime is the same as Node.js’s. Think about the stack, queue, JavaScript Engine (Node – the big box), and the event loop.

ToDo App with Ephemeral List

The ephemeral version of the app is broken into two files

If you’re using Linux, you may find wget to be handy.

# Download todo.html to the current directory
wget http://cpl.mwisely.xyz/modules/js/demo/ephemeral-todo.html

# Download todo.js to the current directory
wget http://cpl.mwisely.xyz/modules/js/demo/ephemeral-todo.js

# Save SHA sums of files to 'todo.checksums'
echo "0f36e4eeb23ed327d606e7e05be47ee6ce6d90b7d9bfab001cd261777012be5f  ephemeral-todo.html" >> todo.checksums
echo "e6ae70c70979c661c5883d1acd35afe0aa78642d92e317099ad6ce7463465450  ephemeral-todo.js" >> todo.checksums

# Check file integrity, why not.
shasum -c todo.checksums

ToDo App with Stored List

The stored version of the app is also broken into two files

If you’re using Linux, you may find wget to be handy.

# Download todo.html to the current directory
wget http://cpl.mwisely.xyz/modules/js/demo/todo.html

# Download todo.js to the current directory
wget http://cpl.mwisely.xyz/modules/js/demo/todo.js

# Save SHA sums of files to 'todo.checksums'
echo "ca89f98f210e830b0cb6adfc5aa467120fa59ff315f64c1e21c91660d3f5b0f3  todo.html" >> todo.checksums
echo "ae48ee55fba6971a7a19bf2f56eeacc365e8b21b01dbe4308232e2f7dbdfedd1  todo.js" >> todo.checksums

# Check file integrity, why not.
shasum -c todo.checksums
  1. I think. I never use such nonsense. 

  2. For example, when you press a “Clear” button.