Learning Web Design, 6th Edition

Chapter 23. Functions, Conditionals, and Loops

23

Functions, Conditionals, and Loops

by Aaron Gustafson

In This Chapter

How to declare and call a function

Passing values to and from functions

Testing for conditions with if and if...else statements

How to program defensively

Creating and using arrays

Making code more efficient with loops

Up until now, all the JavaScript code we’ve created has been in a series of statements that are run in the order we wrote them. Here is a review of the final code you wrote in Exercise 22-4 in the previous chapter that demonstrates this approach perfectly:

// Find the first paragraph (p) element in the page// and assign it to the new variable $plet $p = document.querySelector( "p" ); // Find the number of words in that paragraphlet words = $p.innerText.split(" ").length; // Calculate the time required to read that many wordslet duration = words / 250 // Add the reading time to the end of the paragraph$p.innerText += " (Reading time: " + duration + " minutes)";

As you’ll recall, this finds a paragraph and figures out how long it would take the average adult to read it. Code like this is straightforward and logical. Where it comes up short, however, is that it’s not particularly reusable.

If we wanted to calculate the reading time for other paragraphs on the page, we’d have to repeat this code over and over, swapping out the target each time. That’s a lot of repetition, and developers hate to repeat themselves. In fact, they even came up ...