Arrays and Slideshows


Goal

By the end of today, you will be able to:

  1. Understand how to create and use arrays.
  2. Understand the ideas behind top-down and bottom-up programming.
  3. Create a slideshow.
  4. Create an automatic slideshow (carousel).

Recap

We learned about arrays and slideshows. We'll talk about slideshows a bit later.

Arrays

  • A data structure for multiple values.
  • The values can be any datatype (strings, numbers, booleans, dates).
  • The values are accessed by their index.
  • The index is a number from zero to one less than the length of the array.
  • The array has a .length property that we can use.

Quiz Nr. 1

Suppose we want to define a array of the grades on the last homework. Which is correct:

  1. hw6 = [ 10, 9.5, 9.1, 10, 10 ];
  2. var hw6 = ( 10, 9.5, 9.1, 10, 10 );
  3. var hw6 = { 10, 9.5, 9.1, 10, 10 };
  4. var hw6 = [ 10, 9.5, 9.1, 10, 10 ];

Quiz Nr. 2

What's the syntax error in the following array creation?

var hw6 = [ 10, 9.5 9.1, 10, 10 ];
  1. missing comma

  2. uses var when it shouldn't

  3. uses [] when it should use ()

  4. should use line breaks

Quiz Nr. 3

Suppose we want to correct the first score to be 9.9 instead of 10. Which is correct:

  1. hw6[1] = 9.9;
  2. hw6.1 = 9.9;
  3. hw6["1"] = 9.9;
  4. hw6[0] = 9.9;

Day-Child Form

Many of us have heard the following Mother Goose rhyme:

Monday's child is fair of face,
Tuesday's child is full of grace;
Wednesday's child is full of woe,
Thursday's child has far to go;
Friday's child is loving and giving,
Saturday's child works hard for its living;
But the child that is born on the Sabbath day
is bonny and blithe and good and gay.

(We won't comment on just how silly it is.)

Let's implement a form that will tell someone which kind of child they are. Here's the form source code:

  

(The output tag is like span, but assistive browsers are notified that its contents might be updated. See the output element in How to Structure an HTML form.)

Here it is in action:

Top-Down and Bottom-up Programming

How shall we attack the programming of that form? Let's first step back and think about how we can use divide and conquer to break down the problem into parts that are

  • Easier
  • Modular (reusable)

Here's one way to think about it:

Breakdown of the dayChild problem
Breakdown of the problem of coding a form that inserts the relevant line of the poem into the form, given a particular date.

We've now divided the problem into three parts, each of which should be relatively straightforward, easier than the original, and collectivelyl solve the problem. Which should we do first? There are two major ways we could proceed, namely:

  • top-down: starting at the top function and then implementing the ones it invokes.
  • bottom-up: starting with the lower functions, and then implementing the one that invokes them.

Here's how that might look, side-by-side:

top-down breakdown of the dayChild problem bottom-up breakdown of the dayChild problem
On the left, we see a top-down approach to the implementation, and on the right, a bottom-up approach. The gray boxes are not yet implemented.

Top-Down

If you have built castles in the air, your work need not be lost; that is where they should be. Now put the foundations under them. — Henry David Thoreau

The top-down approach is perfectly good, but notice that in order to do its job, the event handler relies on the lower functions that it invokes. It's a castle in the air. This means you can't test anything until the lower levels are built. If there's a bug in the behavior, it could lurk in any of the three functions, because none of them have yet been debugged. That makes debugging harder.

Bottom-Up

With the bottom-up approach, we can test the lower functions as soon as we implement them. We can test them using the JavaScript console, providing inputs and looking at outputs there. If we get a bug, we know it can only be in the function we are currently testing, so it's easier to find and squash. Then, when we get to implementing the event handler, we know that it is built on a firm, bug-free foundation. Any bugs we find have to be in the event handler.

Consequently, in this course, we advocate and encourage you to build your code in a bottom-up fashion, testing early and often.

The dayName function

The first function we will implement is the dayName function. We saw a function just like this in the reading, so if you're stumped, feel free to review that. Abbreviate the names, to avoid lots of typing. Write your code here:


Your solution might look like this:

function dayName(day) {
    var en = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    return en[day];
}

/* testing */
alert( "day 0 is "+dayName(0) );
alert( "day 6 is "+dayName(6) );
  

Exercise: dayChild function

Now, implement the dayChild function. To avoid some tedious typing, I've given you some strings:


Your solution might look like this:

function dayChild(dayNum) {
    var descriptions = [ "bonny and blithe and good and gay",
                         "fair of face",
                         "full of grace",
                         "full of woe",
                         "well-traveled",
                         "loving and giving",
                         "hard working"];
    return descriptions[dayNum];
}

/* testing */
alert( "people born on Monday are "+dayChild(1) );
alert( "people born on Friday are "+dayChild(5) );
  

Exercise: the event handler

Let's finish the job and implement the event handler. This one we'll do using jsfiddle

Here are the steps your event handler should go through. Let's talk about these first:

  1. Get the birthdate from the form.
  2. Convert that string to a date object.
  3. Get the day number out of the date object.
  4. Use the day number and the two previous functions to get the name of the day of the week and the description..
  5. Construct a sentence and insert it into the page.

Package all that up into a function and attach it to the button on the page.

Here's my solution:

function handleTellButton () {
    var datestr = $("#birthdate").val();
    var birthdate = new Date(datestr);
    var n = birthdate.getDay();
    var day = dayName(n);
    var desc = dayChild(n);
    $("#child-description").html(day+"'s child is "+desc);
}

$("#tell-button").click(handleTellButton);
  

Slideshow

As we know from the readings, the ingredients of a slideshow are:

  • An array of filenames or URLs.
  • A global variable that keeps track of the index of the current slide.
  • A destination img whose src attribute will be modified so that it displays the desired slide.
  • An event handler that increments the global variable, possibly wrapping around to zero when it runs off the end of the array, and then displays the current slide.
  • A button or something that invokes the event handler when the user clicks it, or
  • Using setInterval to automatically invoke the event handler at the desired frequency.

Quiz Nr. 4

What's the correct way to display the current slide?

  1. $("#slide").attr("src",slideURLs[currIndex]);
  2. $("#slide").html("<img src=",slideURLs[currIndex]+">");
  3. $("#slide").append("<img src=",slideURLs[currIndex]+">");
  4. $("#slide").src(slideURLs[currIndex]);

Exercise: prev button

Here's the HTML for the working slideshow from the reading, but with more buttons:

  

Here's the JavaScript code. Make sure you understand it:



Here's the working slideshow:

Write some code to implement a previous button, allowing the user to back up.


Your solution might look like this:

function prevSlide() {
    currentSlideIndex -- ;
    if( currentSlideIndex < 0 ) {
        currentSlideIndex = slides.length - 1;
    }                            
    displaySlide();
}
$("#prevSlide").click(prevSlide);
  

Exercise: first slide button

How would you implement a button to go to the start of the show?

Summary

We hope that after these activities you have a good understanding of:

  • Arrays and how to use them.
  • Slideshow and how to set them up.

Solutions

Will be posted later, visit again after .

Quiz answers:

1. D
2. A
3. D
4. A

© Wellesley College Computer Science Staff. This work is licensed under a Creative Commons License. Date Modified: Wednesday, 11-Oct-2017 13:25:34 EDT