Elvenware Logo



Learn about JavaScripts callbacks. We will cover this in class on Thursday, so you can wait until then to do it, if you wish.

Step01: Create an Express Project

Create an Express project called Week02-Callbacks.

    express Week02-Callbacks
    cd Week02-Callbacks
    npm install

Step02: Bower and jQuery

Either Create or Copy a bower.json file. Here is how to copy it:

    cp $ELF_TEMPLATES/bower.json .    

Alternatively, here is how to create it using an interactive utility:

    bower init

And then copy in our .bowerrc file so the components are installed in the public directory:

cp $ELF_TEMPLATES/.bowerrc .

Now install jQuery:

bower install jquery --save

Step03: Create a Custom JavaScript file

Open your project in WebStorm or your IDE/editor of choice.

Choose File | New | JavaScript File. Add a JavaScript file called callbacks.js and place it in the public/javascripts.

In views/layout.jade, use a script statement to link jQuery and your custom file into your project.


From the command line, run the project, load it into Chrome, open the Developer Tools with F12, confirm that both jquery and callbacks.js are loading properly.

Step05: Setup Display Controls

Edit views/index.jade to that it contains an empty list object.


This jade code produces the following HTML:


In Callbacks.js create a simple function that uses jquery to display information to the user:

function showMessage(message) {
  • " + message + "
  • "); }

    The above code appends a list item to our HTML list.

    Prove that it works by appending this code to the bottom of your custom JavaScript file:

    $(document).ready(function() {    
        showMessage("We can display messages.");

    The jquery function called document ready will be called when your HTML page has loaded. It is similar to the built in JavaScript function called window.onload, but it can be called multiple times.

    In Chrome/Chromium, press F5 to refresh the page. You should see our message displayed on the main page of your web app.

    Alternatively, you can use a captioned showMessage function:

    function showCaptionMessage(caption, message) {
        $("#myList").append("<li><strong>" + caption + "</strong>: " + message + "</li>");

    Use it like this:

    showCaptionMessage("Caption", "We can display messages with captions");

    Step06: Create and Exercise Callbacks

    create a function named callbackHandler that takes three parameters. The first parameter is a callback (that is, a function), the other two parameters are integers.

    Now call the callbackHandler function three times:

    1. First pass a function that adds the second and third parameters. (plus operator)

    JavaScript doesn't care whether you pass in or use a parameter. To see this in action:

    Even though the above code works, create two more callbackHandlers, one for functions that take one parameter and one for functions that take zero parameters. Call them:

    Pass in getNine to zeroParamCallbackHandler and milesToFeet to oneParamCallbackHandler

    To get you started, I'll show how to complete the first step shown above.

    function callbackHandler(func, a, b) {
        return func(a, b);
    function add(a, b) {
        return a + b;
    $(document).ready(function() {    
        showMessage("We can display messages.");
        var addResult = callbackHandler(add, 2, 3);

    Note that the result of the call to the callbackHandler is displayed to the user by our jQuery based showMessage function.

    Step Seven: Debugger

    Step through the code in the Chrome debugger.

    Turn it in

    Be sure you have placed your work in your git folder under the name Week02-Callbacks. Submit the URL of your repository, or optionally provide a link to your folder inside your Git project.

    Don't forget to attach your screenshot to your assignment.

    NOTE: When naming your folder, small things like casing and dashes rather than underscores matter. Remember, I'm grading multiple assignments, and I want to automate the process as best I can. This means I need to know the exact name of your folder, which I specify above.


    Here is a script to set up a project of this type from scratch:

    express Week02-Callbacks
    cd Week02-Callbacks
    npm install
    cp $ELF_TEMPLATES/bower.json .
    cp $ELF_TEMPLATES/.bowerrc .
    bower install bootstrap --save
    sed -i -- 's/3000/30025/g' bin/www
    sed -i -- 's/node\s/nodemon /g' package.json

    Here is a more complete script that allows you to pass in the name of the file you want to create:

    express $1
    cd $1
    npm install
    cp $ELF_TEMPLATES/bower.json .
    cp $ELF_TEMPLATES/.bowerrc .
    bower install bootstrap --save
    sed -i -- 's/3000/30025/g' bin/www
    sed -i -- 's/node\s/nodemon /g' package.json

    This script is maintained in JsObjects/Utilities/DeveloperUtilities.