By the end of today, you will be able to:
top-downand
bottom-upprogramming.
We learned about arrays and slideshows. We'll talk about slideshows a bit later.
.length
property that we can use.
Suppose we want to define a array of the grades on the last homework. Which is correct:
hw6 = [ 10, 9.5, 9.1, 10, 10 ];
var hw6 = ( 10, 9.5, 9.1, 10, 10 );
var hw6 = { 10, 9.5, 9.1, 10, 10 };
var hw6 = [ 10, 9.5, 9.1, 10, 10 ];
What's the syntax error in the following array creation?
var hw6 = [ 10, 9.5 9.1, 10, 10 ];
missing comma
uses var
when it shouldn't
uses []
when it should use ()
should use line breaks
Suppose we want to correct the first score to be 9.9 instead of 10. Which is correct:
hw6[1] = 9.9;
hw6.1 = 9.9;
hw6["1"] = 9.9;
hw6[0] = 9.9;
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:
(Theoutput
tag is likespan
, 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:
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
Here's one way to think about it:
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:
Here's how that might look, side-by-side:
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.
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 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) );
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) );
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:
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);
As we know from the readings, the ingredients of a slideshow are:
src
attribute will be
modified so that it displays the desired slide.
setInterval
to automatically invoke the event
handler at the desired frequency.
What's the correct way to display the current slide?
$("#slide").attr("src",slideURLs[currIndex]);
$("#slide").html("<img src=",slideURLs[currIndex]+">");
$("#slide").append("<img src=",slideURLs[currIndex]+">");
$("#slide").src(slideURLs[currIndex]);
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);
How would you implement a button to go to the start of the show?
We hope that after these activities you have a good understanding of:
Will be posted later, visit again after .
Quiz answers:
1. D 2. A 3. D 4. A