Head First JavaScript Programming Eric T. Freeman, Elisabeth Robson Java Script A Brain Friendly Guide (2014%

User Manual:

Open the PDF directly: View PDF .
Page Count: 704 [warning: Documents this large are best viewed by clicking the View PDF Link!]

Intro: How to use this book
Chapter 1: Getting your feet wet
Chapter 2: Going further
Chapter 3: Getting functional
Chapter 4: Arrays
Chapter 5: A trip to Objectville
Chapter 6: Getting to know the DOM
Chapter 7: Serious types
Chapter 8: Building an app
Chapter 9: Handling events
Chapter 10: Liberated functions
Chapter 11: Serious functions
Chapter 12: Creating objects
Chapter 13: Extra strength objects
Appendix: The top ten topics (we didn't cover)
Colophon
Index

Praise for

Head First JavaScript Programming

“Warning: Do not read Head First JavaScript Programming unless you want to learn the

fundamentals of programming with JavaScript in an entertaining and meaningful fashion.

There may be an additional side effect that you may actually recall more about JavaScript than

after reading typical technical books.”

— Jesse Palmer, Senior Software Developer, Gannett Digital

“If every elementary and middle school student studied Elisabeth and Eric’s Head First HTML

and CSS, and if Head First JavaScript Programming and Head First HTML5 Programming were part of

the high school math and science curriculum, then our country would never lose its competitive

edge.”

— Michael Murphy, senior systems consultant, The History Tree

“The Head First series utilizes elements of modern learning theory, including constructivism, to

bring readers up to speed quickly. The authors have proven with this book that expert-level content

can be taught quickly and efﬁciently. Make no mistake here, this is a serious JavaScript book, and

yet, fun reading!”

— Frank Moore, Web designer and developer

“Looking for a book that will keep you interested (and laughing) but teach you some serious

programming skills? Head First JavaScript Programming is it!”

— Tim Williams, software entrepreneur

“Add this book to your library regardless of your programming skill level!”

— Chris Fuselier, engineering consultant

“Robson and Freeman have done it again! Using the same fun and information-packed style

as their previous books in the Head First series, Head First JavaScript Programming leads you

through entertaining and useful projects that, chapter-by-chapter, allow programmers—even

nonspecialists like myself—to develop a solid foundation in modern JavaScript programming

that we can use to solve real problems.”

— Russell Alleen-Willems, digital archeologist, DiachronicDesign.com

“Freeman and Robson continue to use innovative teaching methods for communicating complex

concepts to basic principles.”

— Mark Arana, Strategy & Innovation, The Walt Disney Studios

Praise for other books by Eric T. Freeman and Elisabeth Robson

“Just the right tone for the geeked-out, casual-cool guru coder in all of us. The right reference for

practical development strategies—gets my brain going without having to slog through a bunch of tired,

stale professor-speak.”

— Travis Kalanick, CEO Uber

“This book’s admirable clarity, humor and substantial doses of clever make it the sort of book that helps

even non-programmers think well about problem-solving.”

— Cory Doctorow, co-editor of Boing Boing, Science Fiction author

“I feel like a thousand pounds of books have just been lifted off of my head.”

— Ward Cunningham, inventor of the Wiki

“One of the very few software books I’ve ever read that strikes me as indispensable. (I’d put maybe 10

books in this category, at the outside.)”

— David Gelernter, Professor of Computer Science, Yale University

“I laughed, I cried, it moved me.”

— Daniel Steinberg, Editor-in-Chief, java.net

“I can think of no better tour guides than Eric and Elisabeth.”

— Miko Matsumura, VP of Marketing and Developer Relations at Hazelcast

Former Chief Java Evangelist, Sun Microsystems

“I literally love this book. In fact, I kissed this book in front of my wife.”

— Satish Kumar

“The highly graphic and incremental approach precisely mimics the best way to learn this stuff...”

— Danny Goodman, author of 

“Eric and Elisabeth clearly know their stuff. As the Internet becomes more complex, inspired construction

of web pages becomes increasingly critical. Elegant design is at the core of every chapter here, each

concept conveyed with equal doses of pragmatism and wit.”

— Ken Goldstein, former CEO of Shop.com and author of



Other related books from O’Reilly

Head First HTML5 Programming



JavaScript Enlightenment

Other O’Reilly books by Eric T. Freeman and Elisabeth Robson

Head First Design Patterns

Head First HTML and CSS

Head First HTML5 Programming

Other books in O’Reilly’s Head First series

Head First HTML and CSS

Head First HTML5 Programming

Head First Design Patterns

Head First Servlets and JSP

Head First SQL

Head First Software Development

Head First C#

Head First Java

Head First Object-Oriented Analysis and Design (OOA&D)

Head First Ajax

Head First Rails

Head First PHP & MySQL

Head First Web Design

Head First Networking

Head First iPhone and iPad Development





Eric T. Freeman

Elisabeth Robson

Head First

JavaScript

Programming











Head First JavaScript Programming

by Eric T. Freeman and Elisabeth Robson

Printed in the United States of America.

Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions

are also available for most titles (). For more information, contact our corporate/

institutional sales department: (800) 998-9938 or .

Editors: Meghan Blanchette, Courtney Nash

Cover Designer: Randy Comer

Code Monkeys: Eric T. Freeman, Elisabeth Robson

Production Editor: Melanie Yarbrough

Indexer: Potomac Indexing

Proofreader: Rachel Monaghan

Page Viewer: Oliver

Printing History:

March 2014: First Edition.

Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly

Media, Inc. The Head First series designations, Head First JavaScript Programming, and related trade dress are

trademarks of O’Reilly Media, Inc.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as

trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark

claim, the designations have been printed in caps or initial caps.

While every precaution has been taken in the preparation of this book, the publisher and the authors assume no

responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

In other words, if you use anything in Head First JavaScript Programming to, say, run a nuclear power plant, you’re

on your own. We do, however, encourage you to visit Webville.

No variables were harmed in the making of this book.

ISBN: 978-1-449-34013-1

[M]

To JavaScript—you weren’t born with a silver spoon in

your mouth, but you’ve outclassed every language that’s

challenged you in the browser.

viii

the authors

Authors of Head First JavaScript Programming

Elisabeth is a software engineer, writer, and trainer.

She has been passionate about technology since her

days as a student at Yale University, where she earned a

Masters of Science in Computer Science and designed

a concurrent, visual programming language and

software architecture.

Elisabeth’s been involved with the Internet since the

early days; she co-created the award-winning Web site,

The Ada Project, one of the ﬁrst Web sites designed

to help women in computer science ﬁnd career and

mentorship information online.

She’s currently co-founder of WickedlySmart, an online

education experience centered on web technologies,

where she creates books, articles, videos and more.

Previously, as Director of Special Projects at O’Reilly

Media, Elisabeth produced in-person workshops and

online courses on a variety of technical topics and

developed her passion for creating learning experiences

to help people understand technology. Prior to her work

with O’Reilly, Elisabeth spent time spreading fairy dust

at The Walt Disney Company, where she led research

and development efforts in digital media.

When not in front of her computer, you’ll ﬁnd Elisabeth

hiking, cycling or kayaking in the great outdoors, with

her camera nearby, or cooking vegetarian meals.

You can send her email at beth@wickedlysmart.com

or visit her blog at http://elisabethrobson.com.

Eric Freeman

Eric is described by Head First series co-creator Kathy

Sierra as “one of those rare individuals ﬂuent in the language,

practice, and culture of multiple domains from hipster

hacker, corporate VP, engineer, think tank.”

Professionally, Eric recently ended nearly a decade as a media

company executive—having held the position of CTO of

Disney Online & Disney.com at The Walt Disney Company.

Eric is now devoting his time to WickedlySmart, a startup he

co-created with Elisabeth.

By training, Eric is a computer scientist, having studied with

industry luminary David Gelernter during his Ph.D. work

at Yale University. His dissertation is credited as the seminal

work in alternatives to the desktop metaphor, and also as the

ﬁrst implementation of activity streams, a concept he and Dr.

Gelernter developed.

In his spare time, Eric is deeply involved with music; you’ll

ﬁnd Eric’s latest project, a collaboration with ambient music

pioneer Steve Roach, available on the iPhone app store

under the name Immersion Station.

Eric lives with his wife and young daughter on Bainbridge

Island. His daughter is a frequent vistor to Eric’s studio, where

she loves to turn the knobs of his synths and audio effects.

Write to Eric at eric@wickedlysmart.com or visit his site

at http://ericfreeman.com.

Elisabeth Robson

Intro

Your brain on JavaScript. Here you are trying to learn something, while here

your brain is doing you a favor by making sure the learning doesn’t stick. Your brain’s

thinking, “Better leave room for more important things, like which wild animals to avoid

and whether naked snowboarding is a bad idea.” So how do you trick your brain into

thinking that your life depends on knowing JavaScript programming?

Table of Contents (summary)

Intro xxv

1 A quick dip into JavaScript:  1

2 Writing real code:  43

3 Introducing functions:  79

4 Putting some order in your data:  125

5 Understanding objects:  173

6 Interacting with your web page:  229

7 Types, equality, conversion, and all that jazz:  265

8 Bringing it all together:  317

9 Asynchronous coding:  381

10 First-class functions:  429

11 Anonymous functions, scope, and closures:  475

12 Advanced object construction:  521

13 Using prototypes:  563

Appendix: The Top Ten Topics (we didn’t cover):  623

Table of Contents (the real thing)

table of contents

Who is this book for? xxvi

We know what you’re thinking. xxvii

We think of a “Head First” reader as a learner. xxviii

Metacognition: thinking about thinking xxix

Here’s what WE did: xxx

Here’s what YOU can do to bend your brain into submission xxxi

Read Me xxxii

Tech Reviewers xxxv

Acknowledgments* xxxvi

1Getting your feet wet

a quick dip into javascript

JavaScript gives you superpowers. The true programming

languageadd behavior









position to create totally new

The way JavaScript works 2

How you’re going to write JavaScript 3

How to get JavaScript into your page 4

JavaScript, you’ve come a long way baby... 6

How to make a statement 10

Variables and values 11

Back away from that keyboard! 12

Express yourself 15

Doing things more than once 17

How the while loop works 18

Making decisions with JavaScript 22

And, when you need to make LOTS of decisions 23

Reach out and communicate with your user 25

A closer look at console.log 27

Opening the console 28

Coding a Serious JavaScript Application 29

How do I add code to my page? (let me count the ways) 32

We’re going to have to separate you two 33

table of contents

HTML

CSS

Browser

You’ve got a lot of flexibility in

choosing your variable names, so here

are a few Webville tips to make your

naming easier:

Choose names that mean something.

Variable names like _m, $, r and foo

might mean something to you but they

are generally frowned upon in Webville.

Not only are you likely to forget them

over time, your code will be much

More on this

as we progress

through the book.

80 Chapter 3

code analysis

A. The code seems very



B. If we want to change the



another weight for dogs, this is







ever seen.

E. ___________________________

_____________________________

var dogName = "rover";

var dogWeight = 23;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "spot";

dogWeight = 13;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "spike";

dogWeight = 53;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "lady";

dogWeight = 17;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

Do a little analysis of the code below. How does it look? Choose as many of

the options below as you like, or write in your own analysis:

you are here 4 81

introducing functions

var dogName = "rover";

var dogWeight = 23;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

...

dogName = "lady";

dogWeight = 17;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

What’s wrong with the code anyway?

We just looked at some code that got used over and over. What’s wrong

with that? Well, at face value, nothing. After all, it works, right? Let’s

have a closer look at the code in question:

What we're doing here is comparing

the dog's weight to 20, and if it's

greater than 20, we're outputting a

big WOOF WOOF. If it's less than 20,

we’re outputting a smaller woof woof.

And this code is... d’oh! It's

doing EXACTLY the same

thing. And so on, many times

over in the rest of the code.

Sure, this code looks innocent enough, but it’s tedious to write, a

pain to read and will be problematic if your code needs to change,

over time. That last point will ring true more and more as you gain

experience in programming—all code changes over time and the

code above is a nightmare waiting to happen because we’ve got the

same logic repeated over and over, and if you need to change that

logic, you’ll have to change it in multiple places. And the bigger the

program gets, the more changes you’ll have to make, leading to more

opportunities for mistakes. What we really want is a way to take

redundant code like this and to put it in one place where it can be

easily re-used whenever we need it.

How can we improve this code? Take a few





dogName = "spike";

dogWeight = 53;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "lady";

dogWeight = 17;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

82 Chapter 3

reuse

use

retyping

name

one





you are here 4 83

introducing functions

function bark(name, weight) {

}

By the way, did we happen to

mention FUNCTIONS?

Meet . JavaScript functions allow you to take a bit of code, give it a

name, and then refer to it over and over whenever we need it. That sounds like

just the medicine we need.

Say you’re writing some code that does a lot of “barking.” If your code is

dealing with a big dog then the bark is a big “WOOF WOOF”. And if it’s

a small dog, the bark is a tiny “woof woof ”. You’re going to need to use this

barking functionality many times in your code. Let’s write a bark function you

can use over and over:

The function

keyword begins a

function definition.

function bark(name, weight) {

if (weight > 20) {

console.log(name + " says WOOF WOOF");

} else {

console.log(name + " says woof woof");

}

Next we give the

function a name,

like bark.

And we're going to hand it two

things when we get around to using

it: a dog name and a dog weight.

Next we're going to write some code that

gets executed when we use the function.

Now we need to write the code for the function; our code will check the weight and

output the appropriate sized bark.

First we need to check

the weight, and...

...then output the dog's name with

WOOF WOOF or woof woof.

Notice the variable names

used in the code match the

parameters of the function.

We call these the parameters of the

function. We put these in parentheses

after the function name.

We'll call this the body of the

function. It’s everything inside

the { and the }.

Now you have a function you can use in your code.

Let’s see how that works next...

84 Chapter 3

how the function works

function bark(name, weight) {

if (weight > 20) {

console.log(name + " says WOOF WOOF");

} else {

console.log(name + " says woof woof");

}

bark("rover", 23);

bark("spot", 13);

bark("spike", 53);

bark("lady", 17);

Okay, but how does it actually work?

First, let’s rework our code using the new function bark:

Wow, that’s a lot less code—and it’s so much more readable to your co-worker who

needs to go into your code and make a quick change. We’ve also got all the logic in

one convenient location.

Okay, but how exactly does it all come together and actually work? Let's go through it

step by step.

function bark(name, weight) {

if (weight > 20) {

console.log(name + " says WOOF WOOF");

} else {

console.log(name + " says woof woof");

}

First we have the function.

So we’ve got the bark function right at the

top of the code. The browser reads this code,

sees it’s a function and then takes a look at the

statements in the body. The browser knows

it isn’t executing the function statements

now; it’ll wait until the function is called from

somewhere else in the code.

Notice too that the function is parameterized,

meaning it takes a dog’s name and weight when

it is called. That allows you to call this function

for as many different dogs as you like. Each

time you do, the logic applies to the name and

weight you pass to the function call.

Again, these are parameters;

they are assigned values when

the function is called.

And everything inside the function

is the body of the function.

Wow, now

that's simple!

Ahh, this is nice,

all the logic of

the code is here in

one place.

Now all that code becomes just a few calls to the

bark function, passing it each dog's name and weight.

you are here 4 85

introducing functions

function bark(name, weight) {

if (weight > 20) {

console.log(name + " says WOOF WOOF");

} else {

console.log(name + " says woof woof");

}

Now let's call the function.

To call, or , a function, just use its

name, followed by an open parenthesis,

then any values you need to pass it,

separated by commas, and finally a

closing parenthesis. The values in the

parentheses are . For the bark

function we need two arguments: the

dog’s name and the dog’s weight.

Here’s how the call works:

bark("rover", 23);

Here we’re passing

two arguments, the

name and the weight.

When we call the bark function,

the arguments are assigned to the

parameter names.

And any time the parameters

appear in the function, the

values we passed in are used.

Our function name.

"rover"

After you call the function, the

body of the function does all

the work.

After we know the value for each parameter—

like name is “rover” and weight is 23—then

we’re ready to execute the function body.

Statements in the function body are executed

from top to bottom, just like all the other code

you’ve been writing. The only difference is that

the parameter names name and weight have

been assigned the values of the arguments you

passed into the function.

After we've assigned the argument values

to the parameter names, we then execute

the statements in the body.

function bark(name, weight) {

if (weight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

"rover"

The parameters act like variables in the

body, which have been assigned the values

of the arguments you passed in.

“Invoking a function” is just a fancy way of

saying “calling a function.” Feel free to mix and

match, especially when your new boss is around.

86 Chapter 3

function execise

And when it's done... The logic of the body

has been carried out (and, in this example, you’ll see

that Rover, being 23 pounds, sounds like “WOOF

WOOF”), and the function is done. After the function

completes, then control is returned to the statement

following our call to bark.

function bark(name, weight) {

if (weight > 20) {

console.log(name + " says WOOF WOOF");

} else {

console.log(name + " says woof woof");

}

bark("rover", 23);

bark("spot", 13);

bark("spike", 53);

bark("lady", 17);

"rover says WOOF WOOF"

When the function completes, the browser starts executing

the next line of code after where we called the function.

Here, we're calling the function again, with different

arguments, so the process starts all over again!

We just

did this...

...so do

this next.

bark("juno", 20);

bark("scottie", -1);

bark("dino", 0, 0);

We’ve got some more calls to bark below. Next to each call, write what you think the

output should be, or if you think the code will cause an error. Check your answer at the

end of the chapter before you go on.

Write what

you think the

console log will

display here.

Hmm, any ideas

what these do?

bark("fido", "20");

bark("lady", 10);

bark("bruno", 21);

Use your browser’s Developer Tools to access

the console so you can see the output of bark.

you are here 4 87

introducing functions

JavaScript console

Wear a jacket

Wear a t-shirt

Wear a sweater

Code Magnets

This working JavaScript code is all scrambled up on

the fridge. Can you reconstruct the code snippets to

make a working program that produces the output

listed below? Notice, there may be some extra code

on the fridge, so you may not use all the magnets.

Check your answer at the end of the chapter.

function

}

{

(

)

whatShallIWear

whatShallIWear(50);

whatShallIWear(80);

whatShallIWear(60);

else {

console.log("Wear t-shirt");

}

else if (temp < 70) {

console.log("Wear a sweater");

}

if (temp < 60) {

console.log("Wear a jacket");

}

temp

temperature

We’re using this to represent

a generic console.

88 Chapter 3

interview with a function

Head First: Welcome Function! We’re looking

forward to digging in and finding out what you’re all

about.

Function: Glad to be here.

Head First: Now we’ve noticed many JavaScript

newbies tend to ignore you. They just get in and write

their code, line by line, top to bottom, no functions at

all. Are you really needed?

Function: Those newbies are missing out. That’s

unfortunate because I’m powerful. Think about me

like this: I give you a way to take code, write it once,

and then reuse it over and over.

Head First: Well, excuse me for saying this, but

if you’re just giving them the ability to do the same

thing, over and over... that’s a little boring isn’t it?

Function: No no, functions are parameterized—in

other words, each time you use the function, you

pass it arguments so it can compute something that’s

relevant to what you need.

Head First: Err, example?

Function: Let’s say you need to show a

user how much the items in his shopping

cart are going to cost, so you write a function

computeShoppingCartTotal. Then you can pass

that function the shopping carts of many users and

each time I compute the amount of each specific

shopping cart.

Head First: If you’re so great, why aren’t more new

coders using you?

Function: That’s not even a true statement; they

use me all the time: alert, prompt, Math.random,

document.write. It’s hard to write anything

meaningful without using functions. It’s not so much

that new users don’t use functions, they just aren’t

defining  functions.

Head First: Well, right, alert and prompt, those

make sense, but take Math.random—that doesn’t

look quite like a function.

Function: Math.random is a function, but it

happens to be attached to another powerful thing

new coders don’t make a lot of use of: .

Head First: Oh yes, objects. I believe our readers

are learning about those in a later chapter.

Function: Fair enough, I’ll save my breath on that

one for later.

Head First: Now this argument/parameter stuff all

seems a little confusing.

Function: Think about it like this: each parameter

acts like a variable throughout the body of the

function. When you call the function, each value you

pass in is assigned to a corresponding parameter.

Head First: And arguments are what?

Function: Oh, that’s just another name for

the values you pass into a function… they’re the

arguments of the function call.

Head First: Well you don’t seem all that great; I

mean, okay you allow me to reuse code, and you have

this way of passing values as parameters. Is that it? I

don’t get the mystery around you.

Function: Oh, that’s just the basics, there’s so much

more: I can return values, I can masquerade around

your code anonymously, I can do a neat trick called

closures, and I have an intimate relationship with

objects.

Head First: Ohhhhh REALLY?! Can we get an

exclusive on that relationship for our next interview?

Function: We’ll talk…

The Function Exposed

This week’s interview: the intimate

side of functions...

you are here 4 89

introducing functions

What can you pass to a function?

When you call a function you pass it arguments and those arguments

then get matched up with the parameters in the function definition.

You can pass pretty much any JavaScript value as an argument, like a

string, a boolean, or a number:

saveMyProfile("krissy", 1991, 3.81, false);

function saveMyProfile(name, birthday, GPA, newuser) {

if (birthday >= 2004) {

// code for handling a child

}

// rest of code for this function here

}

Pass any JavaScript value as an argument.

Each argument is passed to

its corresponding parameter

in the function.

And each parameter acts as a

variable within the function.

You can also pass variables as arguments, and that’s often the

more common case. Here’s the same function call using variables:

var student = "krissy";

var year = 1991;

var GPA = 381/100;

var status = "existinguser";

var isNewUser = (status == "newuser");

saveMyProfile(student, year, GPA, isNewUser);

And, you can even use expressions as arguments:

var student = "krissy";

var status = "existinguser";

var year = 1991;

saveMyProfile(student, year, 381/100, status == "newuser");

Now, each of the values we’re passing

is stored in a variable. When we call

the function, the variable’s values are

passed as the arguments.

So, in this case we’re passing the value

in the variable student, “krissy”, as the

argument to the name parameter.

And we’re also using variables

for these other arguments.

Yes, even these

expressions will work

as arguments!

In each case we first evaluate the

expression to a value, and then that

value is passed to the function.

We can evaluate a

numeric expression...

... or a boolean expression, like this one that

results in passing false to the function.

90 Chapter 3

parameters vs. arguments









No, they’re different.

When you define a function you can  it with one or

more parameters.

function cook(degrees, mode, duration) {

// your code here

}

Here we’re defining three parameters:

degrees, mode and duration.

When you call a function, you  it with :

cook(425.0, "bake", 45);

These are arguments. There are three arguments: a floating

point number, a string and an integer.

cook(350.0, "broil", 10);

So you’ll only define your parameters once, but you’ll probably call

your function with many different arguments.



function doIt(param) {

param = 2;

}

var test = 1;

doIt(test);

console.log(test);

you are here 4 91

introducing functions

Below you’ll find some JavaScript code, including variables, function definitions

and function calls. Your job is to identify all the variables, functions, arguments and

parameters. Write the names of each in the appropriate boxes on the right. Check

your answer at the end of the chapter before you go on.

Variables

Functions

Parameters

Arguments

function dogYears(dogName, age) {

var years = age * 7;

console.log(dogName + " is " + years + " years old");

}

var myDog = "Fido";

dogYears(myDog, 4);

function makeTea(cups, tea) {

console.log("Brewing " + cups + " cups of " + tea);

}

var guests = 3;

makeTea(guests, "Earl Grey");

function secret() {

console.log("The secret of life is 42");

}

secret();

function speak(kind) {

var defaultSound = "";

if (kind == "dog") {

alert("Woof");

} else if (kind == "cat") {

alert("Meow");

} else {

alert(defaultSound);

}

var pet = prompt("Enter a type of pet: ");

speak(pet);

Built-in functions

92 Chapter 3

pass by value

JavaScript is pass-by-value.

It’s important to understand how JavaScript passes arguments. JavaScript passes arguments to a

function using . What that means is that each argument is copied into the parameter

variable. Let’s look at a simple example to see how this works.

That means pass-by-copy.

function addOne(x) {

x = x + 1;

}

var age = 7;

addOne(age);

function addOne(x) {

x = x + 1;

}

age







3



4



This is a

COPY of age.

age doesn’t change

even if x does.

x has been

incremented

within addOne.

We’re

incrementing

you are here 4 93

introducing functions











We’re glad you’re thinking about it. Understanding

how JavaScript passes values to functions is important. On the

one hand it is pretty straightforward: when an argument is

passed to a function its value is first copied and then assigned to

the corresponding parameter. But, if you don’t understand this,

you can make some wrong assumptions about how functions,

arguments and parameters all work together.

The real impact of pass-by-value is that any changes to a

parameter’s value within the function will affect 

not the original variable passed to the function. That’s pretty

much it.

But of course, there’s an exception to every rule, and we’re going

to have to talk about this topic again when we learn objects,

which we’ll talk about in a couple of chapters. But no worries,

with a solid understanding of pass-by-value, you’re in good shape

to have that discussion.

And, for now, just remember that because of pass-by-value,

Kinda

like Vegas.







function doIt(param) {

param = 2;

}

var test = 1;

doIt(test);

console.log(test);

Revisited

94 Chapter 3

more about function arguments

JavaScript console

Brewing 3 cups of undefined

Notice that the value of the

parameter tea is undefined

because we didn’t pass in a value.

Weird Functions

So far





function makeTea(cups, tea) {

console.log("Brewing " + cups + " cups of " + tea);

}

makeTea(3);

EXPERIMENT #1: what happens when we

don’t pass enough arguments?





JavaScript console

Brewing 3 cups of Earl Grey

Works fine, the function

ignores the extras.

function makeTea(cups, tea) {

console.log("Brewing " + cups + " cups of " + tea);

}

makeTea(3, "Earl Grey", "hey ma!", 42);

EXPERIMENT #2: what happens when we

pass too many argments?



There's actually a way to get at the extra arguments, but we won't worry about that just now...

EXPERIMENT #3: what happens when we have NO parameters?



function barkAtTheMoon() {

console.log("Woooooooooooooo!");

}

barkAtTheMoon();

JavaScript console

Woooooooooooooo!

you are here 4 95

introducing functions

Functions can return things too

You know how to communicate with your functions in one direction;

that is, you know how to pass arguments . But what about

the other way? Can a function communicate back? Let’s check out

the return statement:

function bake(degrees) {

var message;

if (degrees > 500) {

message = "I'm not a nuclear reactor!";

} else if (degrees < 100) {

message = "I'm not a refrigerator!";

} else {

message = "That's a very comfortable temperature for me.";

setMode("bake");

setTemp(degrees);

}

return message;

}

var status = bake(350);

Here we've got a new bake function

that takes the temperature in

degrees for the oven.

It then sets a variable to a string

that depends on the temperature

requested in the degrees parameter.

And presumably some real work is

getting done here, but we won't

worry about those details for now...

What we care about is that a

return statement is returning

the message as the result of

this function.

Now, when the function is called and returns,

the string that is returned as a result will be

assigned to the status variable.

And in this case, if the status variable was

printed, it would hold the string “That's a

very comfortable temperature for me." Work

through the code and make sure you see why!

350 degrees is the perfect temperature

for good cookies. Feel free to make

some and return to the next page.

96 Chapter 3

the return statement

Tracing through a function with a return statement

function calculateArea(r) {

var area;

if (r <= 0) {

return 0;

} else {

area = Math.PI * r * r;

return area;

}

Now that you know how arguments and parameters work, and how you can return a value

from a function, let’s trace through a function call from start to finish to see what happens at

every step along the way. Be sure to follow the steps in order.

Developers often call this “tracing the

flow of execution” or just “tracing.” As

you can see the flow can jump around when

you’re calling functions and returning values.

Just take it slow, one step at a time.

var radius = 5.2;

First, we declare a variable radius

and initialize it to 5.2.

Next, we call the calculateArea

function, and pass the radius

variable as the argument.

The argument is sent to the

parameter r, and the calculateArea

function begins executing with r

containing the value 5.2.

The body of the function executes

starting with declaring a variable,

area. We then test to see if the

parameter r has a value <= 0.

We execute the else clause instead.

We compute the area of the circle

using the value 5.2 in the parameter r.

We return the value of area from the

function. This stops the execution of

the function and returns the value.

The value returned from the

function is stored in the variable

theArea.

Execution continues on the next

line.

If r <= 0, then we return 0 from

the function and the function

stops executing. But we passed in

5.2 so this line does NOT execute.

JavaScript console

The area is: 84.94866535306801

Output here!

var theArea = calculateArea(radius);

console.log("The area is: " + theArea);

you are here 4 97

introducing functions

Now that you know how to define and call a function, let’s make sure we’ve got

the syntax down cold. Here are all the parts of a function’s anatomy:

Anatomy of a Function

function addScore ( level , score ) {

var bonus = level * score * .1;

return score + bonus;

}

Always start with the

keyword “function”.

Follow the function keyword with

the name of your function.

Even if your function has

no parameters, you still

need an opening and closing

set of parentheses, like ().

And then zero or more

comma-separated parameters

between parentheses.

The body sits between

two curly braces and

contains a set of

statements (just like

the statements you’re

used to).

A function can include a

return statement, but it

doesn’t have to.

The return statement includes a

value or an expression, which is

returned as a result of calling

the function.

Here’s the closing

brace of the body.

Variables you need

inside the function

are declared within

the function body.

Q: What happens if I mix up the order

of my arguments, so that I’m passing the

wrong arguments into the parameters?

A: All bets are off; in fact, we’d guess

you’re pretty much guaranteed either an

error at run time or incorrect code. Always

take a careful look at a function’s parameters,

so you know what arguments the function

expects to be passed in.

Q: Why don’t the parameter names

have var in front of them? A parameter is

a new variable right?

A: Effectively yes. The function does all

the work of instantiating the variable for you,

so you don’t need to supply the var keyword

in front of your parameter names.

Q: What are the rules for function

names?

A: The rules for naming a function are the

same as the rules for naming a variable. Just

like with variables, you’ll want to use names

that make sense to you when you read

them, and provide some indication of what

the function does, and you can use camel

case (e.g. camelCase) to combine words in

function names, just like with variables.

Q: What happens if I use the same

name for an argument variable as the

parameter? Like if I use the name x for

both?

A: Even if your argument and parameter

have the same name, like x, the parameter

x gets a copy of the argument x, so they are

two different variables. Changing the value

of the parameter x does not change the

value of the argument x.

Q: What does a function return if it

doesn’t have a return statement?

A: A function without a return statement

returns undefined.

98 Chapter 3

local variable declarations

Good catch. Yes and no.

These declarations work exactly the same within a

function as they do outside a function, in the sense

that you are initializing a new variable to a value.

However, the difference between a variable declared

 and a variable declared 

is where that variable can be used—in other words,

where in your JavaScript code you can reference the

variable. If the variable is declared outside a function,

then you can use it  in your code. If a variable

is declared inside a function, then you can use it only

. This is known as a variable’s scope.

There are two kinds of scope: global and local.









you are here 4 99

introducing functions

Global and local variables

You already know that you can declare a variable by using

the var keyword and a name anywhere in your script:

function getScore(points) {

var score;

var i = 0;

while (i < levelThreshold) {

//code here

i = i + 1;

}

return score;

}

The points, score and i

variables are all declared

within a function.

var avatar;

var levelThreshold = 1000;

And you’ve seen that you can also declare

variables inside a function:

But what does it matter? Variables are variables, right?

Well,  you declare your variables determines 

they are to other parts of your code, and, later,

understanding how these two kinds of variables operate

will help you write more maintainable code (not to

mention, help you understand the code of others).

These are global variables;

they’re accessible everywhere

in your JavaScript code.

Know the difference or risk humiliation

If a variable is

declared outside

a function, it’s

GLOBAL. If it’s

declared inside a

function, it’s LOCAL.

We call them local variables

because they are known

locally only within the

function itself.





Even if we use levelThreshold inside

the function, it’s global because it’s

declared outside the function.

100 Chapter 3

variable name conventions

Another good catch.

There’s a long history of using the letter i as the

variable you iterate with. This convention developed

back in the days when space was limited (like when

we used punched cards to write code), and there

was an advantage to short variable names. Now it’s

a convention all programmers understand. You’ll

also commonly see j, k, and sometimes even x and y

used in this manner. However, this is one of the only

exceptions to the best practice of choosing meaningful

variable names.











you are here 4 101

introducing functions

var avatar = "generic";

var skill = 1.0;

var pointsPerLevel = 1000;

var userPoints = 2008;

function getAvatar(points) {

var level = points / pointsPerLevel;

if (level == 0) {

return "Teddy bear";

} else if (level == 1) {

return "Cat";

} else if (level >= 2) {

return "Gorilla";

}

function updatePoints(bonus, newPoints) {

var i = 0;

while (i < bonus) {

newPoints = newPoints + skill * bonus;

i = i + 1;

}

return newPoints + userPoints;

}

userPoints = updatePoints(2, 100);

avatar = getAvatar(2112);

Knowing the scope of your local and global variables

Where you define your variables determines their scope; that is, where they’re visible to

your code and where they aren’t. Let’s look at an example of both locally and globally

scoped variables—remember, the variables you define outside a function are globally

scoped, and the function variables are locally scoped:

These four variables are

globally scoped. That means

they are defined and visible

in all the code below.

Note that if you link to

additional scripts in your

page, they will see these global

variables, and you will see their

global variables too!

The level variable here is

local and is visible only

to the code within the

getAvatar function. That

means only this function can

access the level variable.

Note that getAvatar makes

use of the pointsPerLevel

global variable too.

And let’s not forget the

points parameter, which

also has local scope in the

getAvatar function.

In updatePoints we have a local

variable i. i is visible to all of

the code in updatePoints.

And here in our code we can

use only the global variables,

we have no access to any

variables inside the functions

because they’re not visible in

the global scope.

bonus and newPoints are also

local to updatePoints, while

userPoints is global.

102 Chapter 3

variable scope

The short lives of variables

 







When you’re a variable, you work hard and

life can be short. That is, unless you’re a global

variable, but even with globals, life has its limits.

But what determines the life of a variable? Think

about it like this:

Globals live as long as the page. A global

variable begins life when its JavaScript is loaded

into the page. But, your global variable’s life ends

when the page goes away. Even if you reload the

same page, all your global variables are destroyed

and then recreated in the newly loaded page.

Local variables typically disappear

when your function ends. Local variables

are created when your function is first called and

live until the function returns (with a value or

not). That said, you can take the values of your

local variables and return them from the function

before the variables meet their digital maker.

So, there really is NO escape from the page is

there? If you’re a local variable, your life comes

and goes quickly, and if you’re lucky enough to

be a global, you’re good as long as that browser

doesn’t reload the page.

We say “typically” because there are some

advanced ways to retain locals a little longer,

but we’re not going to worry about them now.

you are here 4 103

introducing functions

Don’t forget to declare your locals!

If you use a variable without declaring it first, that variable

will be global. That means that even if you use a variable

for the first time inside a function (because you meant

for it to be local), the variable will actually be global, and

be available outside the function too (which might cause

confusion later). So, don’t forget to declare your locals!

If you forget to

declare a variable

before using it, the

variable will always

be global (even if the

first time you use it is

in a function).

function playTurn(player, location) {

points = 0;

if (location == 1) {

points = points + 100;

}

return points;

}

var total = playTurn("Jai", 1);

alert(points);

var points = 0;

function playTurn(player, location) {

points = 0;

if (location == 1) {

points = points + 100;

}

return points;

}

var total = playTurn("Jai", 1);

alert(points);

We forgot to declare

points with “var” before

we used it. So points is

automatically global.

That means we can use points outside the

function! The value doesn’t go away (like it

should) when the function is done executing.

This program behaves as if you’d written this instead:

JavaScript assumes that we meant for points to be

global because we forgot to use “var”, and behaves

as if points were declared at the global level.

Forgetting to declare

your local variables can

cause problems if you use

the same name as another

global variable. You might

overwrite a value you

didn’t mean to.

104 Chapter 3

shadowing variables

You “shadow” your global.

Here’s what that means: say you have a global variable

beanCounter and you then declare a function, like this:

When you do this, any references to beanCounter within

the function refer to the local variable and not the global.

So we say the global variable is in the shadow of the local

variable (in other words we can’t see the global variable

because the local version is in our way).









var beanCounter = 10;

function getNumberOfItems(ordertype) {

var beanCounter = 0;

if (ordertype == "order") {

// do some stuff with beanCounter...

}

return beanCounter;

}

Note that the local and global

variables have no effect on each

other: if you change one, it has

no effect on the other. They

are independent variables.

We’ve got a global

and a local!

you are here 4 105

introducing functions

var x = 32;

var y = 44;

var radius = 5;

var centerX = 0;

var centerY = 0;

var width = 600;

var height = 400;

function setup(width, height) {

centerX = width/2;

centerY = height/2;

}

function computeDistance(x1, y1, x2, y2) {

var dx = x1 - x2;

var dy = y1 - y2;

var d2 = (dx * dx) + (dy * dy);

var d = Math.sqrt(d2);

return d;

}

function circleArea(r) {

var area = Math.PI * r * r;

return area;

}

setup(width, height);

var area = circleArea(radius);

var distance = computeDistance(x, y, centerX, centerY);

alert("Area: " + area);

alert("Distance: " + distance);

Arguments

Parameters

Globals

Locals

Below you’ll find some JavaScript code, including variables, function definitions and function

calls. Your job is to identify the variables used in all the arguments, parameters, local

variables and global variables. Write the variable names in the appropriate boxes on the right.

Then circle any variables that are shadowed. Check your answer at the end of the chapter.

106 Chapter 3

fireside chat

Tonight’s talk: Global and Local variables argue over who is

most important in a program.

Global variable:

Hey Local, I’m really not sure why you’re here

because I can handle any need for a variable a

coder might have. After all, I’m visible everywhere!

You have to admit that I could replace all your

previous local variables with global ones and your

functions would work just the same.

It wouldn’t have to be a mess. Programmers could

just create all the variables they need up at the top

of a program, so they’d all be in one place…

Well, if you’d use better names, then you might be

able to keep track of your variables more easily.

True. But why bother with arguments and

parameters if you’ve got all the values you need in

globals?

Local variable:

Yes but using globals everywhere is just bad style.

Lots of functions need variables that are local. You

know, their own private variables for their own use.

Globals can be seen everywhere.

Well, yes and no. If you’re extremely careful, sure.

But being that careful is difficult, and if you make

a mistake, then we’ve got functions using variables

that other functions are using for different purposes.

You’d also be littering the program with global

variables that you only need inside one function

call… that would just make a huge mess.

Yeah, and so what happens if you need to call a

function that needs a variable, like, oh I dunno,

x, and you can’t remember what you’ve used x

for before. You have to go searching all over your

code to see if you’ve used x anywhere else! What a

nightmare.

And what about parameters? Function parameters

are always local. So you can’t get around that.

Excuse me, do you hear what you’re saying? The

whole point of functions is so we can reuse code to

compute different things based on different inputs.

you are here 4 107

introducing functions

Face it. It’s just good programming practice to use

local variables unless you absolutely need globals.

And globals can get you into real trouble. I’ve seen

JavaScript programs that barely use globals at all!

Of inexperienced programmers, sure. But as

programmers learn to correctly structure their

code for correctness, maintainability, and just good

coding style, they learn how to stop using globals

except when necessary.

They let globals drink? Now, we’re  in

dangerous territory.

Local variable:

Global variable:

But your variables are just so... temporary. Locals

come and go at a moment’s notice.

Not at all? Globals are the mainstay of JavaScript

programmers!

I think I need a drink.









A Function

Another Function

108 Chapter 3

questions about variables

Q: Keeping track of the scope of all these locals and

globals is confusing, so why not just stick to globals? That’s

what I’ve always done.

A: If you’re writing code that is complex or that needs to be

maintained over a long period of time, then you really have to

watch how you manage your variables. When you’re overzealous

in creating global variables, it becomes difficult to track where

your variables are being used (and where you’re making changes

to your variables’ values), and that can lead to buggy code. All

this becomes even more important when you’re writing code with

co-workers or you’re using third-party libraries (although if those

libraries are written well, they should be structured to avoid these

issues).

So, use globals where it makes sense, but use them in

moderation, and whenever possible, make your variables local.

As you get more experience with JavaScript, you can investigate

additional techniques to structure code so that it’s more

maintainable.

Q: I have global variables in my page, but I’m loading in

other JavaScript files as well. Do those files have separate

sets of global variables?

A: There is only one global scope so every file you load sees

the same set of variables (and creates globals in the same

space). That’s why it is so important you be careful with your

use of variables to avoid clashes (and reduce or eliminate global

variables when you can).

Q: If I use the same name for a parameter as I do for a

global variable, does the parameter shadow the global?

A: Yes. Just like if you declare a new, local variable in a

function with the same name as a global, if you use the same

name for a parameter as a global, you’re also going to shadow

the global with that name. It’s perfectly fine to shadow a global

name as long as you don’t want to use the global variable inside

your function. But it’s a good idea to document what you’re doing

with comments so you don’t get confused later when you’re

reading your code.

Q: If I reload a page in the browser, do the global

variables all get re-initialized?

A: Yes. Reloading a page is like starting over from scratch

as far as the variables are concerned. And if any code was in

the middle of executing when you reload the page, any local

variables will disappear, too.

Q: Should we always declare our local variables at the

top of a function?

A: Just like with global variables, you can declare local

variables when you first need to use them in a function. However,

it’s a good programming practice to go ahead and declare them

at the top of your function so someone reading your code can

easily find those declarations and get a sense at a glance of all

the local variables used within the function. In addition, if you

delay declaring a variable and then decide to use that variable

earlier in the body of the function than you originally anticipated,

you might get behavior that you don’t expect. JavaScript creates

all local variables at the beginning of a function whether you

declare them or not (this is called “hoisting” and we’ll come

back to it later), but the variables are all undefined until they are

assigned a value, which might not be what you want.

Q: Everyone seems to complain about the overuse

of global variables in JavaScript. Why is this? Was the

language badly designed or do people not know what they’re

doing, or what? And what do we do about it?

A: Globals are often overused in JavaScript. Some of this is

because the language makes it easy to just jump in and start

coding—and that’s a good thing—because JavaScript doesn’t

enforce a lot of structure or overhead on you. The downside

is when people write serious code this way and it has to be

changed and maintained over the long term (and that pretty much

describes all web pages). All that said, JavaScript is a powerful

language that includes features like objects you can use to

organize your code in a modular way. Many books have been

written on that topic alone, and we’re going to give you a taste of

objects in Chapter 5 (which is only a couple of chapters away).

you are here 4 109

introducing functions















Actually, you can put your functions

anywhere in your JavaScript file.

JavaScript doesn’t care if your functions are declared before or

after you use them. For instance, check out this code:

var radius = 5;

var area = circleArea(radius);

alert(area);

function circleArea(r) {

var a = Math.PI * r * r;

return a;

}

Notice that

we’re using

the circleArea

function before

we’re defining it!

The circleArea function isn’t

actually defined until after we’ve

called it, in the code above. How on

earth does this work?

This might seem really odd, especially if you remember

when the browser loads your page, it starts executing the

JavaScript from the top to the bottom of your file. But, the

truth is JavaScript actually makes two passes over your

page: in the first pass it reads all the function definitions,

and in the second it begins executing your code. So, that

allows you to place functions anywhere in your file.

110 Chapter 3

function exercise

function clunk(times) {

var num = times;

while (num > 0) {

display("clunk");

num = num - 1;

}

function thingamajig(size) {

var facky = 1;

clunkCounter = 0;

if (size == 0) {

display("clank");

} else if (size == 1) {

display("thunk");

} else {

while (size > 1) {

facky = facky * size;

size = size - 1;

}

clunk(facky);

}

function display(output) {

console.log(output);

clunkCounter = clunkCounter + 1;

}

var clunkCounter = 0;

thingamajig(5);

console.log(clunkCounter);

The Thing-A-Ma-Jig

Your output

here!

The Thing-A-Ma-Jig is quite a contraption—it clanks and clunks and even thunks,

but what it really does, well, you’ve got us stumped. Coders claim they know how it

works. Can you uncrack the code and find its quirks?

The Thing-A-Ma-Jig

We recommend passing the Thing-A-Ma-Jig the numbers

0, 1, 2, 3, 4, 5, etc. See if you know what it's doing.

JavaScript console

you are here 4 111

introducing functions

Webville Guide to Code Hygiene

In Webville we like to keep things clean, organized and ready for expansion.

There’s no place that needs to be better maintained than your code, and

JavaScript can seem pretty loosey-goosey when it comes to organizing your

variables and functions. So we’ve put together a neat little guide for you that makes

a few recommendations for those new to Webville. Take one, they’re FREE.

Global variables, right at the TOP!

It’s a good idea to keep your globals grouped together as much as possible, and if

they’re all up at the top, it’s easy to find them. Now you don’t have to do this, but

isn’t it easier for you and others to locate the variables used in your code if they’re

all at the top?

Functions like to sit together.

Well, not really; they actually don’t care, they’re just functions. But, if you keep

your functions together, it’s a lot easier to locate them. As you know, the browser

actually scans your JavaScript for the functions before it does anything else. So you

can place them at the top or bottom of the file, but if you keep them in one place

your life will be easier. Here in Webville, we often start with our global variables

and then put our functions next.

Let your local variables be declared at the TOP of the function they’re

in.

Put all your local variable declarations at the beginning of the function body. This

makes them easy to find and ensures they are all declared properly before use.



112 Chapter 3

who am i exercise

Who am I?

I get passed into a function.

I send values back to the calling code.

I’m the all important keyword.

I’m what receives arguments.

It really means ‘make a copy’.

I’m everywhere.

Another phrase for invoking a function.

Example of a function attached to an object.

alert and prompt are examples.

What functions are great for.

Where I can be seen.

I’m around when my function is.

A bunch of JavaScript attendees, in full costume, are playing a

party game, “Who am I?” They give you a clue, and you try to

guess who they are, based on what they say. Assume they always

tell the truth about themselves. Fill in the blank next to each

sentence with the name of one attendee.

Tonight’s attendees:

function, argument, return, scope, local variable, global

variable, pass-by-value, parameter, function call,

Math.random, built-in functions, code reuse.

you are here 4 113

introducing functions

The case of the attempted robbery not worth investigating

Sherlock finished his phone call with the bumbling chief of police, Lestrade, and sat

down in front of the fireplace to resume reading the newspaper. Watson looked at him

expectantly.

“What?” said Sherlock, not looking up from the paper.

“Well? What did Lestrade have to say?” Watson asked.

“Oh, he said they found a bit of rogue code in the bank account where the

suspicious activity was taking place.”

“And?” Watson said, trying to hide his frustration.

“Lestrade emailed me the code, and I told him it wasn’t worth pursuing. The

criminal made a fatal flaw and will never be able to actually steal the money,”

Sherlock said.

“How do you know?” Watson asked.

“It’s obvious if you know where to look,” Sherlock exclaimed. “Now stop bothering me

with questions and let me finish this paper.”

With Sherlock absorbed in the latest news, Watson snuck a peek at Sherlock’s phone and

pulled up Lestrade’s email to look at the code.

Five Minute

Mystery

var balance = 10500;

var cameraOn = true;

function steal(balance, amount) {

cameraOn = false;

if (amount < balance) {

balance = balance - amount;

}

return amount;

cameraOn = true;

}

var amount = steal(balance, 1250);

alert("Criminal: you stole " + amount + "!");







This is the real, actual bank

balance in the account.

114 Chapter 3

chapter summary

Declare a function using the function

keyword, followed by the name of the

function.

Use parentheses to enclose any parameters

a function has. Use empty parentheses if

there are no parameters.

Enclose the body of the function in curly

braces.

The statements in the body of a function are

executed when you call a function.

Calling a function and invoking a function

are the same thing.

You call a function by using its name

and passing arguments to the function’s

parameters (if any).

A function can optionally return a value using

the return statement.

A function creates a local scope for

parameters and any local variables the

function uses.

Variables are either in the global scope

(visible everywhere in your program) or in

the local scope (visible only in the function

where they are declared).

Declare local variables at the top of the body

of your function.

If you forget to declare a local variable using

var, that variable will be global, which could

have unintended consequences in your

program.

Functions are a good way to organize your

code and create reusable chunks of code.

You can customize the code in a function by

passing in arguments to parameters (and

using different arguments to get different

results).

Functions are also a good way to reduce or

eliminate duplicate code.

You can use JavaScript’s many built-in

functions, like alert, prompt, and

Math.random, to do work in your programs.

Using built-in functions means using existing

code you don’t have to write yourself.

It’s a good idea to organize your code so

your functions are together, and your global

variables are together, at the top of your



you are here 4 115

introducing functions

JavaScript cross

In this chapter you got functional. Now use some

brain functions to do this crossword.

1 2

4 5

6 7 8

9 10

11 12

14 15

ACROSS

4. A parameter acts like a _________ in the body of a





















be treated like ________.



variable.

DOWN





again.







statement.





re-initialized.







______ on his phone.



can.



116 Chapter 3

exercise solutions

var dogName = "rover";

var dogWeight = 23;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "spot";

dogWeight = 13;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "spike";

dogWeight = 53;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

dogName = "lady";

dogWeight = 17;

if (dogWeight > 20) {

console.log(dogName + " says WOOF WOOF");

} else {

console.log(dogName + " says woof woof");

}

We chose all of them!

Do a little analysis of the code below. How does it look?

Choose as many of the options below as you like, or

write in your own analysis. Here’s our solution.

A. The code seems very



B. If we wanted to change how



add another weight for dogs,



reworking.



D. Not the most readable code I've

ever seen.

E. ___________________________

___________________________

Looks like the developer thought

the weights might change over time.

you are here 4 117

introducing functions

bark("juno", 20);

bark("scottie", -1);

bark("dino", 0, 0);

We’ve got some more calls to bark below. Next to each call, write what you think the

output should be, or if you think the code will cause an error. Here’s our solution.

Our bark function doesn’t check to make

sure dog weights are greater than 0. So

this works because -1 is less than 20.

bark("fido", "20");

bark("lady", 10);

bark("bruno", 21);

juno says woof woof

scottie says woof woof

dino says woof woof

fido says woof woof

lady says woof woof

bruno says WOOF WOOF

The bark function just ignores the extra

argument, 0. And using 0 as the weight

doesn’t make sense, but it still works.

We compare the string “20” to the number 20. “20” isn’t

greater than 20, so fido says “woof woof”. (You’ll find

out later how JavaScript compares “20” and 20.)

118 Chapter 3

exercise solutions

JavaScript console

Wear a jacket

Wear a t-shirt

Wear a sweater

Code Magnets Solution

This working JavaScript code is all scrambled up on

the fridge. Can you reconstruct the code snippets to

make a working program that produces the output

listed below? Notice, there may be some extra code

on the fridge, so you may not use all the magnets.

Here’s our solution.

function

}

whatShallIWear

whatShallIWear(50);

whatShallIWear(80);

whatShallIWear(60);

if (temp < 60) {

console.log("Wear a jacket");

}

temp

temperature

(

)

{

else if (temp < 70) {

console.log("Wear a sweater");

}

else {

console.log("Wear t-shirt");

}

Leftover magnets.

you are here 4 119

introducing functions

Below you’ll find some JavaScript code, including variables, function definitions and

function calls. Your job is to identify all the variables, functions, arguments and parameters.

Write the names of each in the appropriate boxes on the right. Here’s our solution.

Variables

Functions

Parameters

Arguments

myDog, guests, pet,

years, defaultSound

dogYears, makeTea,

secret, speak,

dogName, age,

cups, tea, kind

myDog, 4, guests,

“Earl Grey”, pet,

plus all the string

arguments to alert

and console.log

Built-in functions

alert, console.log,

prompt

function dogYears(dogName, age) {

var years = age * 7;

console.log(dogName + " is " + years + " years old");

}

var myDog = "Fido";

dogYears(myDog, 4);

function makeTea(cups, tea) {

console.log("Brewing " + cups + " cups of " + tea);

}

var guests = 3;

makeTea(guests, "Earl Grey");

function secret() {

console.log("The secret of life is 42");

}

secret();

function speak(kind) {

var defaultSound = "";

if (kind == "dog") {

alert("Woof");

} else if (kind == "cat") {

alert("Meow");

} else {

alert(defaultSound);

}

var pet = prompt("Enter a type of pet: ");

speak(pet);

120 Chapter 3

exercise solutions

Below you’ll find some JavaScript code, including variables, function definitions and function

calls. Your job is to identify the variables used in all the arguments, parameters, local

variables and global variables. Write the variable names in the appropriate boxes on the right.

Then circle any variables that are shadowed. Here’s our solution.

var x = 32;

var y = 44;

var radius = 5;

var centerX = 0;

var centerY = 0;

var width = 600;

var height = 400;

function setup(width, height) {

centerX = width/2;

centerY = height/2;

}

function computeDistance(x1, y1, x2, y2) {

var dx = x1 - x2;

var dy = y1 - y2;

var d2 = (dx * dx) + (dy * dy);

var d = Math.sqrt(d2);

return d;

}

function circleArea(r) {

var area = Math.PI * r * r;

return area;

}

setup(width, height);

var area = circleArea(radius);

var distance = computeDistance(x, y, centerX, centerY);

alert("Area: " + area);

alert("Distance: " + distance);

Arguments

Parameters

Globals

Locals

x, y, radius,

centerX, centerY,

width, height, area,

distance

dx, dy, d2, d,

area

width, height,

x1, y1, x2, y2, r

width, height, radius,

x, y, centerX,

centerY,

“Area: ” + area,

“Distance: ”+ distance

Don’t forget the

arguments to the

alert function.

The local variable

area shadows the

global variable area

Don’t forget area

and distance. These

are globals too.

you are here 4 121

introducing functions

The Thing-A-Ma-Jig

JavaScript console

(120) clunk

120

Here’s our solution:

If you pass 5 to thingamajig, you’ll

see “clunk” in the console 120 times

(or you might see your console

abbreviate 120 clunks, like above),

and then the number 120 at the end.

JavaScript console

clank

JavaScript console

thunk

JavaScript console

(2) clunk

JavaScript console

(6) clunk

JavaScript console

(24) clunk

JavaScript console

(120) clunk

120

Thing-A-Ma-Jig of 0

Thing-A-Ma-Jig of 1

Thing-A-Ma-Jig of 2

Thing-A-Ma-Jig of 3

Thing-A-Ma-Jig of 4

Thing-A-Ma-Jig of 5

What about the

other values?

What does it all mean? We hear the Thing-A-Ma-Jig was invented by a curious chap

who was fascinated by rearranging words. You know like DOG rearranged is GOD, OGD,

DGO, GDO and ODG. So if a word has three letters the Thing-A-Ma-Jig says you

can make six total combinations from those letters. If you use the word “mixes” you

can make 120 combinations of letters, wow! Anyway, that’s what we heard. And here

we just thought it computed mathematical factorials! Who knew!?

Check out ‘factorial’ in wikipedia for more info!

The Thing-A-Ma-Jig is quite a contraption—it clanks and clunks and even thunks,

but what it really does, well, you’ve got us stumped. Coders claim they know how it

works. Can you uncrack the code and find its quirks?

122 Chapter 3

exercise solutions

Five Minute

Mystery

Solution









var balance = 10500;

var cameraOn = true;

function steal(balance, amount) {

cameraOn = false;

if (amount < balance) {

balance = balance - amount;

}

return amount;

cameraOn = true;

}

var amount = steal(balance, 1250);

alert("Criminal: you stole " + amount + "!");

balance is a global variable...

... but it’s shadowed

by this parameter.

So when you change the

balance in the function steal,

you’re not changing the actual

bank balance!

We’re returning the

amount stolen...

... but we’re not using it to

update the real balance in

the account. So the balance

of the bank account is the

same as it was originally.

The criminal thinks he stole

the money, but he didn’t!

And, in addition to not actually stealing any money,

the criminal forgets to turn the camera back

on, which is a dead giveaway to the police that

something nefarious is going on. Remember, when you

return from a function, the function stops executing,

so any lines of code after the return are ignored!

you are here 4 123

introducing functions

Who am I?

I get passed into a function.

I send values back to the calling code.

I’m the all important keyword.

I’m what receives arguments.

It really means ‘make a copy’.

I’m everywhere.

Another phrase for invoking a function.

Example of a function attached to an object.

alert and prompt are examples.

What functions are great for.

Where I can be seen.

I’m around when my function is.

argument

return

function

parameter

pass-by-value

global variable

function call

Math.random

built-in functions

code reuse

scope

local variable

A bunch of JavaScript attendees, in full costume, are playing a

party game, “Who am I?” They give you a clue, and you try to

guess who they are, based on what they say. Assume they always

tell the truth about themselves. Fill in the blank next to each

sentence with the name of one attendee. Here’s our solution.

Tonight’s attendees:

function, argument, return, scope, local variable, global

variable, pass-by-value, parameter, function call,

Math.random, built-in functions, code reuse.

Solution

124 Chapter 3

exercise solutions

JavaScript cross Solution

3C E

4A R

5I A B L E O U

E R P

7S S B Y 8A L U E

9T A

10 N Y E R E A

R U M G R

A R E U

11 N D E

12 F I N E D

C F

13 U N C T I O N M M A

I E E A B L

14 I

N R N I L O G

16 L O B A L S T L E C N

S S

17 A D O

L R

this is a new chapter 125

Arrays

putting some order in your data

There’s more to JavaScript than numbers, strings and

booleans. So primitives—



more data. Say,

all the items in a shopping cart, or all the songs in a playlist, or a set of stars and



more ummph. The type of choice for this kind of ordered data is a JavaScript array,





ways to structure your data

 

126 Chapter 4

introducing bubbles-r-us

Can you help Bubbles-R-Us?

Meet the Bubbles-R-Us company. Their tireless research makes sure

bubble wands & machines everywhere blow the best bubbles. Today

they’re testing the “bubble factor” of several variants of their new

bubble solution; that is, they’re testing how many bubbles a given

solution can make. Here’s their data:

Each bubble solution was tested for the number of

bubbles it can create.

Each test tube

is labelled 0 to

9 and contains a

slightly different

bubble solution.

And here’s the

bubble factor

score for each

solution.

60 50 60 58 54 54 58 50 52 54

0 1 2 3 4 5 6 7 8 9

Of course you want to get all this data into JavaScript so you can

write code to help analyze it. But that’s a lot of values. How are you

going to construct your code to handle all these values?

you are here 4 127

putting some order in your data









How to represent multiple values in JavaScript

You know how to represent single values like strings, numbers and booleans with JavaScript,

but how do you represent  values, like all the bubble factor scores from the ten

bubble solutions? To do that we use JavaScript . An array is a JavaScript type that can

hold many values. Here’s a JavaScript array that holds all the bubble factor scores:

var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54];

Here’s all ten values, grouped together into

an array, and assigned to the scores variable.

You can treat all the values as a whole, or you can access the individual scores when

you need to. Check this out:

var solution2 = scores[2];

alert("Solution 2 produced " + solution2 + " bubbles.");

Notice that arrays are zero-based. So the first

bubble solution is solution #0 and has the score in

scores[0], and likewise, the third bubble solution is

solution #2 and has the score in scores[2].

To access an item of the array we use

this syntax: the variable name of the

array followed by the index of the item,

surrounded by square brackets.

One of the

Bubbles-R-Us

bubbleologists.

128 Chapter 4

intro to arrays

   

"vanilla"

"butterscotch"

"lavender"

"chocolate"

"cookie dough"

How arrays work



Before we get on to helping Bubbles-R-Us, let’s make sure we’ve got

arrays down. As we said, you can use arrays to store  values

(unlike variables that hold just one value, like a number or a string). Most

often you’ll use arrays when you want to group together similar things,

like bubble factor scores, ice cream flavors, daytime temperatures or

even the answers to a set of true/false questions. Once you have a bunch

of values you want to group together, you can create an array that holds

them, and then access those values in the array whenever you need them.

var flavors = ["vanilla", "butterscotch", "lavender", "chocolate", "cookie dough"];

Each value has

an index number,

starting at 0.

The array

collects all these

values together.

Every index in the

array holds a value.

The array is assigned

to a variable.

How to create an array

Let’s say you wanted to create an array that holds ice cream flavors.

Here’s how you’d do that:

Notice that each

item in the array is

separated by a comma.

Let’s assign the

array to a variable

named flavors.

To begin the array,

use the [ character...

... and end the array

with the ] character.

When you create an array, each item is placed at a location, or index, in

the array. With the flavors array, the first item, “vanilla”, is at index 0, the

second, “butterscotch”, is at index 1, and so on. Here’s a way to think

about an array:

and then list each

item of the array...

you are here 4 129

putting some order in your data

How to access an array item

Each item in the array has its own index, and that’s your key to both accessing and

changing the values in an array. To access an item just follow the array variable

name with an index, surrounded by square brackets. You can use that notation

anywhere you’d use a variable:

var flavorOfTheDay = flavors[2];

This evaluates to the value of the flavors array at

index 2 (which is “lavender”), which is then assigned

to the variable flavorOfTheDay.

Updating a value in the array

You can also use the array index to change a value in an array:

flavors[3] = "vanilla chocolate chip";

This sets the value of the item at index

3 (previously “chocolate”) to a new value,

“vanilla chocolate chip”.

So, after this line of code, your array will look like this:

   

"vanilla"

"butterscotch"

"lavender"

"vanilla chocolate chip"

"cookie dough"



The value of the item at

index 3 has been changed.

To get an element from an array, you

need both the name of the array,

and the index of the value you want.

   

"vanilla"

"butterscotch"

"lavender"

"chocolate"

"cookie dough"





"lavender"

flavorOfTheDay is assigned the value in flavors[2].

And remember, because the index starts at 0,

flavors[2] is the third item in the array.

130 Chapter 4

getting the length of an array

   

"vanilla"

"butterscotch"

"lavender"

"vanilla

chocolate chip"

"cookie dough"



How big is that array anyway?

Say someone hands you a nice big array with important data in it. You know

what’s in it, but you probably won’t know exactly how big it is. Luckily, every

array comes with its own property, length. We’ll talk more about properties

and how they work in the next chapter, but for now, a property is just a value

associated with an array. Here’s how you use the length property:

var numFlavors = flavors.length;

Every array has a property, length,

that contains the number of items

currently in the array.

To get the length of an

array, you use the name

of the array, then a “.”,

and then length.

Now numFlavors holds the number of

items in the array, in this case 5.

Notice that because we start numbering the

indices of the array at 0, the length of the

array will always be one more than the last index.

The length is 5 because there are 5 items.

var products = ["Choo Choo Chocolate", "Icy Mint", "Cake Batter", "Bubblegum"];

var last = ________________;

var recent = products[last];

The products array below holds the Jenn and Berry’s ice cream

flavors. The ice cream flavors were added to this array in the

order of their creation. Finish the code to determine the most

recent ice cream flavor they created.

you are here 4 131

putting some order in your data

<!doctype html>

<head>

<title>Phrase-o-matic</title>

function makePhrases() {

var words1 = ["24/7", "multi-tier", "30,000 foot", "B-to-B", "win-win"];

var words2 = ["empowered", "value-added", "oriented", "focused", "aligned"];

var words3 = ["process", "solution", "tipping-point", "strategy", "vision"];

var rand1 = Math.floor(Math.random() * words1.length);

var rand2 = Math.floor(Math.random() * words2.length);

var rand3 = Math.floor(Math.random() * words3.length);

var phrase = words1[rand1] + " " + words2[rand2] + " " + words3[rand3];

alert(phrase);

}

makePhrases();

</script>

</head>

</html>











You didn’t think our serious business

application from Chapter 1 was serious

enough? Fine. Try this one, if you need

something to show the boss.

Check out this code for the

hot new Phrase-o-Matic app

and see if you can figure out

what it does before you go on...

132 Chapter 4

phrase-o-matic code walk-through

function makePhrases() {

}

makePhrases();

The Phrase-O-Matic

We hope you figured out this code is the perfect tool for creating

your next start-up marketing slogan. It has created winners like

“Win-win value-added solution” and “24/7 empowered process”

in the past and we have high hopes for more winners in the

future. Let’s see how this thing really works:

First, we define the makePhrases function, which we can call as many times as

we want to generate the phrases we want:

We call makePhrases once here, but we could call it

multiple times if we want more than one phrase.

With that out of the way we can write the code for the makePhrases function. Let’s start by

setting up three arrays. Each will hold words that we’ll use to create the phrases. In the next

step, we’ll pick one word at random from each array to make a three word phrase.

var words1 = ["24/7", "multi-tier", "30,000 foot", "B-to-B", "win-win"];

var words2 = ["empowered", "value-added", "oriented", "focused", "aligned"];

var words3 = ["process", "solution", "tipping-point", "strategy", "vision"];

We create a variable named words1, that we

can use for the first array.

All the code for makePhrases goes here, we’ll get to it in a sec...

We’re defining a function named

makePhrases, that we can call later.

We’re putting five strings in the array. Feel free to

change these to the latest buzzwords out there.

And here are two more arrays of words, assigned

to two new variables, words2 and words3.

you are here 4 133

putting some order in your data

We’re almost done; we have the phrase, now we just have to display it. We’re going

to use alert as usual.

alert(phrase);

3Now we generate three random numbers, one for each of the three random words

we want to pick to make a phrase. Remember from Chapter 2 that Math.random

generates a number between 0 and 1 (not including 1). If we multiply that by the

length of the array, and use Math.floor to truncate the number, we get a number

between 0 and one less than the length of the array.

Okay, finish that last line of code, have one more look over it all

and feel that sense of accomplishment before you load it into your

browser. Give it a test drive and enjoy the phrases.

Here’s what ours

looks like!

var rand1 = Math.floor(Math.random() * words1.length);

var rand2 = Math.floor(Math.random() * words2.length);

var rand3 = Math.floor(Math.random() * words3.length);

var phrase = words1[rand1] + " " + words2[rand2] + " " + words3[rand3];

4Now we create the slick marketing phrase by taking each randomly chosen word and

concatenating them all together, with a nice space in between for readability:

We define another variable to hold the phrase.

We use each random number to

index into the word arrays...

rand1 will be a number

between 0 and the last index

of the words1 array.

And likewise for rand2,

and rand3.

Just reload the page for endless start-up possibilities

(okay, not endless, but work with us here, we’re

trying to make this simple code exciting!).

134 Chapter 4

questions about arrays

Q: Does the order of items in an array

matter?

A: Most of the time, yes, but it depends.

In the Bubbles-R-Us scores array, the

ordering matters a lot, because the index of

the score in the array tells us which bubble

solution got that score—bubble solution

0 got score 60, and that score is stored

at index 0. If we mixed up the scores in

the array, then we’d ruin the experiment!

However, in other cases, the order may

not matter. For instance, if you’re using an

array just to keep a list of randomly selected

words and you don’t care about the order,

then it doesn’t matter which order they’re in

the array. But, if you later decide you want

the words to be in alphabetical order, then

the order will matter. So it really depends on

how you’re using the array. You’ll probably

find that ordering matters more often than

not when you use an array.

Q: How many things can you put into

an array?

A: Theoretically, as many as you want.

Practically, however, the number is limited

by the memory on your computer. Each

array item takes up a little bit of space in

memory. Remember that JavaScript runs in

a browser, and that browser is one of many

programs running on your computer. If you

keep adding items to an array, eventually

you’ll run out of memory space. However,

depending on the kind of items you’re putting

in your array, the maximum number of items

you can put into an array is probably in the

many thousands, if not millions, which you’re

unlikely to need most of the time. And keep

in mind that the more items you have the

slower your program will run, so you’ll want

to limit your arrays to reasonable sizes—say

a few hundred—most of the time.

Q: Can you have an empty array?

A: You can, and in fact, you’ll see an

example of using an empty array shortly. To

create an empty array, just write:

var emptyArray = [ ];

If you start with an empty array, you can add

things to it later.

Q: So far we’ve seen strings and

numbers in an array; can you put other

things in arrays too?

A: You can; in fact, you can put just about

any value you’ll find in JavaScript in an array,

including numbers, strings, booleans, other

arrays, and even objects (we’ll get to this

later).

Q: Do all the values in an array have

to be the same type?

A: No they don’t; although typically we

do make the values all of the same type.

Unlike many other languages, there is no

requirement in JavaScript that all the values

in an array be of the same type. However,

if you mix up the types of the values in an

array, you need to be extra careful when

using those values. Here’s why: let’s say you

have an array with the values [1, 2, “fido”, 4,

5]. If you then write code that checks to see

if the values in the array are greater than,

say, 2, what happens when you check to see

if “fido” is greater than 2? To make sure you

aren’t doing something that doesn’t make

sense, you’d have to check the type of each

of the values before you used it in the rest

of your code. It’s certainly possible to do this

(and we’ll see later in the book how), but in

general, it’s a lot easier and safer if you just

use the same type for all the values in your

arrays.

Q: What happens if you try to access

an array with an index that is too big or

too small (like less than 0)?

A: If you have an array, like:

var a = [1, 2, 3];

and you try to access a[10] or a[-1], in either

case, you’ll get the result undefined. So,

you’ll either want to make sure you’re using

only valid indices to access items in your

array, or you’ll need to check that the value

you get back is not undefined.

Q: So, I can see how to get the first

item in an array using index 0. But how

would I get the last item in an array? Do I

always have to know precisely how many

items are in my array?

A: You can use the length property to

get the last item of an array. You know that

length is always one greater than the last

index of the array, right? So, to get the last

item in the array, you can write:

myArray[myArray.length - 1];

JavaScript gets the length of the array,

subtracts one from it, and then gets the item

at that index number. So if your array has 10

items, it will get the item at index 9, which is

exactly what you want. You’ll use this trick all

the time to get the last item in an array when

you don’t know exactly how many items are

in it.

you are here 4 135

putting some order in your data

Meanwhile, back at Bubbles-R-Us...















The Bubbles-R-Us CEO

var scores = [60, 50, 60, 58, 54, 54,

58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51,

69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18,

41, 53, 55, 61, 51, 44];

New bubble scores.

Hey, I really need this report to be able to make quick decisions

about which bubble solution to produce! Can you get this coded?

- Bubbles-R-Us CEO

Bubbles-R-Us

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

Bubbles tests: 36

Highest bubble score: 69

Solutions with highest score: #11, #18

rest of scores here...

What we need to build.

136 Chapter 4

thinking about the bubble scores report

We need to start

by listing all the

solutions and their

corresponding scores.







Then we need to print

the total number of

bubble scores.

Let’s take a closer look at what the CEO is looking for:

Hey, I really need this report to be able to make quick decisions

about which bubble solution to produce! Can you get this coded?

- Bubbles-R-Us CEO

Bubbles-R-Us

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

Bubbles tests: 36

Highest bubble score: 69

Solutions with highest score: #11, #18

rest of scores here...

Followed by the

highest score and

each solution that

has that score.

you are here 4 137

putting some order in your data

Cubicle Conversation

Judy: The first thing we need to do is display every

score along with its solution number.

Joe: And the solution number is just the index of the

score in the array, right?

Judy: Oh, yeah, that’s totally right.

Frank: Slow down a sec. So we need to take each

score, print its index, which is the bubble solution

number, and then print the corresponding score.

Judy: You’ve got it, and the score is just the

corresponding value in the array.

Joe: So, for bubble solution #10, its score is just scores[10].

Judy: Right.

Frank: Okay, but there are a lot of scores. How do we write code to output all of them?

Judy: Iteration, my friend.

Frank: Oh, you mean like a while loop?

Judy: Right, we loop through all the values from zero to the length... oh, I mean the length

minus one of course.

Joe: This is starting to sound very doable. Let’s write some code; I think we know what we’re

doing.

Judy: That works for me! Let’s do it, and then we’ll come back to the rest of the report.







Frank

Judy

Joe

138 Chapter 4

array iteration

var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51, 69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18, 41, 53, 55, 61, 51, 44];

var output;

var i = 0;

while (i < scores.length) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

i = i + 1;

}

Create a variable to keep track

of the current index.

60 50 60 58 54 54 58 50 52 54

0 1 2 3 4 5 6 7 8 9

How to iterate over an array

Your goal is to produce some output that looks like this:

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

Bubble solution #35 score: 44

Scores 3 through 34 will be

here... we’re saving some trees

(or bits depending on which

version of the book you have).

We’ll do that by outputting the score at index zero, and then we’ll do the

same for index one, two, three and so on, until we reach the last index in

the array. You already know how to use a while loop; let’s see how we can

use that to output all the scores:

And then we’ll show you a

better way in a sec...

And keep looping while our index is less

than the length of the array.

Then create a string to use as

a line of output that includes

the bubble solution number

(which is just the array index)

and the score.

Then we’ll use console.log

to output the string.

And finally, increment the index

by one before looping again.

We're using this variable in the loop below to create a string to output.

you are here 4 139

putting some order in your data

while (i < hasBubbleGum.length)

var products = ["Choo Choo Chocolate",

"Icy Mint", "Cake Batter",

"Bubblegum"];

i = i + 1;

var hasBubbleGum = [false,

false,

true];

var i = 0;

i = i + 2;

{

}

if (hasBubbleGum[i])

{

console.log(products[i] +

" contains bubble gum");

Code Magnets

while (i > hasBubbleGum.length)

Rearrange the magnets here.

We’ve got code for testing to see which ice

cream flavors have bubblegum pieces in

them. We had all the code nicely laid out

on our fridge using fridge magnets, but the

magnets fell on the floor. It’s your job to put

them back together. Be careful; a few extra

magnets got mixed in. Check your answer at

the end of the chapter before you go on.

JavaScript console

Bubblegum contains bubble gum

Here’s the output

we’re expecting.

140 Chapter 4

using a for loop for iteration

for (var i = 0; i < scores.length; i = i + 1) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

}

But wait, there’s a better way to

iterate over an array

We should really apologize. We can’t believe it’s already Chapter 4 and we haven’t even

introduced you to the for loop. Think of the for loop as the while loop’s cousin. The two

basically do the same thing, except the for loop is usually a little more convenient to use.

Check out the while loop we just used and we’ll see how that maps into a for loop.

A for loop

starts with the

keyword for.

In the parentheses, there

are three parts. The

first part is the loop

variable INITIALIZATION.

This initialization happens

only once, before the for

loop starts.

The second part is the

CONDITIONAL test. Each

time we loop, we perform this

test, and if it is false, we stop.

And the third part is

where we INCREMENT

the counter. This happens

once per loop, after all the

statements in the BODY.

The BODY goes here.

Notice there are no

changes other than

moving the increment of i

into the for statement.

var i = 0;

while (i < scores.length) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

i = i + 1;

}

First we INITIALIZED a counter.

Then we tested that counter in a CONDITIONAL expression.

We also had a BODY to execute; that is, all the

statements between the { and }.

And finally, we INCREMENTED the counter.

Now let’s look at how the for loop makes all that so much easier:

you are here 4 141

putting some order in your data

Rewrite your fridge magnet code (from two pages

back) so that it uses a for loop instead of a while

loop. If you need a hint, refer to each piece of the

while loop on the previous page and see how it

maps to the corresponding location in the for loop.

Your code goes here.

var products = ["Choo Choo Chocolate",

"Icy Mint", "Cake Batter",

"Bubblegum"];

var hasBubbleGum = [false,

false,

true];

var i = 0;

while (i < hasBubbleGum.length)

{

if (hasBubbleGum[i])

{

console.log(products[i] +

" contains bubble gum");

}

i = i + 1;

}

142 Chapter 4

putting the code together

<!doctype html>

<head>

<title>Bubble Factory Test Lab</title>

var scores = [60, 50, 60, 58, 54, 54,

58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51,

69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18,

41, 53, 55, 61, 51, 44];

var output;

for (var i = 0; i < scores.length; i = i + 1) {

output = "Bubble solution #" + i +

" score: " + scores[i];

console.log(output);

}

</script>

</head>

</html>

We’ve got the standard HTML stuff

here for a web page. We don’t need

much; just enough to create a script.

Here’s our bubble scores array.

Here's the for loop we're using to iterate

through all the bubble solution scores.







Each time through the loop, we create

a string with the value of i, which is the

bubble solution number, and scores[i], which

is the score that bubble solution got.

Then we display the string in the

console. And that's it! Time to

run this report.

(Also notice we split the string up across

two lines here. That's okay as long as you

don't create a new line in between the

quotes that delimit a string. Here, we did it

after a concatenation operator (+), so it's

okay. Be careful to type it in exactly as

you see here.)

you are here 4 143

putting some order in your data

Test drive the bubble report

Save this file as “bubbles.html” and load it into your

browser. Make sure you’ve got the console visible (you

might need to reload the page if you activate the console

after you load the page), and check out the brilliant

report you just generated for the Bubbles-R-Us CEO.

Just what the CEO ordered.

JavaScript console

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

Bubble solution #3 score: 58

Bubble solution #4 score: 54

Bubble solution #5 score: 54

Bubble solution #6 score: 58

Bubble solution #7 score: 50

Bubble solution #8 score: 52

Bubble solution #9 score: 54

Bubble solution #10 score: 48

Bubble solution #11 score: 69

Bubble solution #12 score: 34

Bubble solution #13 score: 55

Bubble solution #14 score: 51

Bubble solution #15 score: 52

Bubble solution #16 score: 44

Bubble solution #17 score: 51

Bubble solution #18 score: 69

Bubble solution #19 score: 64

Bubble solution #20 score: 66

Bubble solution #21 score: 55

Bubble solution #22 score: 52

Bubble solution #23 score: 61

Bubble solution #24 score: 46

Bubble solution #25 score: 31

Bubble solution #26 score: 57

Bubble solution #27 score: 52

Bubble solution #28 score: 44

Bubble solution #29 score: 18

Bubble solution #30 score: 41

Bubble solution #31 score: 53

Bubble solution #32 score: 55

Bubble solution #33 score: 61

Bubble solution #34 score: 51

Bubble solution #35 score: 44

It's nice to see all the bubble

scores in a report, but it's

still hard to find the highest

scores. We need to work

on the rest of the report

requirements to make it a

little easier to find the winner.

144 Chapter 4

fireside chat between for and while

Tonight’s talk: The while and

for loop answer the question

“Who’s more important?”

The WHILE loop

What, are you kidding me? Hello? I’m the 

looping construct in JavaScript. I’m not married to

looping with a silly counter. I can be used with any

type of conditional. Did anyone notice I was taught

first in this book?

And that’s another thing, have you noticed that the

FOR loop has no sense of humor? I mean if we all

had to do skull-numbing iteration all day I guess

we’d all be that way.

Oh, I don’t think that could possibly be true.

This book just showed that FOR and WHILE loops

are pretty much the same thing, so how could that

be?

The FOR loop

I don’t appreciate that tone.

Cute. But have you noticed that nine times out of

ten, coders use FOR loops?

Not to mention, doing iteration over, say, an array

that has a fixed number of items with a WHILE

loop is just a bad, clumsy practice.

Ah, so you admit we’re more equal than you let on

huh?

I’ll tell you why...

you are here 4 145

putting some order in your data

The WHILE loop

Well, isn’t that nice and neat of you. Hey, most of

the iteration I see doesn’t even include counters; it’s

stuff like:

while (answer != "forty-two")

try that with a FOR loop!

Hah, I can’t believe that even works.

Lipstick on a pig.

Not only better, prettier.

The FOR loop

When you use a WHILE loop you have to initialize

your counter and increment your counter in

separate statements. If, after lots of code changes,

you accidentally moved or deleted one of these

statements, well, then things could get ugly. But with

a FOR loop, everything is packaged right in the

FOR statement for all to see and with no chance of

things getting changed or lost.

Okay:

for (;answer != "forty-two";)

Oh, it does.

So that’s all you got? You’re better when you’ve got

a general conditional?

Oh, I didn’t realize this was a beauty contest as well.

146 Chapter 4

post increment

It's that time again....

Can we talk about your verbosity?

You’ve been writing lots of code that looks like this:

myImportantCounter = myImportantCounter + 1;

After this statement completes, myImportantCounter is one greater than before.

Here we're taking the variable

and incrementing it by one.

In fact, this statement is so common there’s a shortcut for it in JavaScript. It’s called the post-increment

operator, and despite its fancy name, it is quite simple. Using the post-increment operator, we can replace

the above line of code with this:

myImportantCounter++;

After this statement completes, myImportantCounter is one greater than before.

Just add “++" to the variable name.

Of course it just wouldn’t feel right if there wasn’t a post-decrement operator as well. You can use the post-

decrement operator on a variable to reduce its value by one. Like this:

myImportantCounter--;

After this statement completes, myImportantCounter is one less than before.

Just add “--" to the variable name.

And why are we telling you this now? Because it’s commonly used with for statements. Let’s clean up our

code a little using the post-increment operator…

Assume myImportantCounter

contains a number, like 0.

you are here 4 147

putting some order in your data

var scores = [60, 50, 60, 58, 54, 54,

58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51,

69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18,

41, 53, 55, 61, 51, 44];

for (var i = 0; i < scores.length; i++) {

var output = "Bubble solution #" + i +

" score: " + scores[i];

console.log(output);

}

Redoing the for loop with the

post-increment operator

Let’s do a quick rewrite and test to make sure the code works

the same as before:

All we’ve done is update where we

increment the loop variable with

the post-increment operator.

Quick test drive

Time to do a quick test drive to make sure the change to use the

post-increment operator works. Save your file, “bubbles.html”, and

reload. You should see the same report you saw before.

The report looks exactly the same.

JavaScript console

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

...

Bubble solution #34 score: 51

Bubble solution #35 score: 44

We’re saving a few trees

and not showing all the

bubble solution scores, but

they are all there.

148 Chapter 4

planning the rest of the report

Cubicle Conversation

Continued...

Judy: Right, and the first

thing we need to do is

determine the total number

of bubble tests. That’s easy;

it’s just the length of the scores

array.

Joe: Oh, right. We’ve got to

find the highest score too, and

then the solutions that have the

highest score.

Judy: Yeah, that last one is going to be the toughest. Let’s work out

finding the highest score first.

Joe: Sounds like a good place to start.

Judy: To do that I think we just need to maintain a highest score variable that keeps

track as we interate through the array. Here, let me write some pseudocode:











Hey, I really need this report to be able to make quick decisions

about which bubble solution to produce! Can you get this coded?

- Bubbles-R-Us CEO

Bubbles-R-Us

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

Bubbles tests: 36

Highest bubble score: 69

Solutions with highest score: #11, #18

rest of scores here...

DECLARE a variable highScore and set to zero.

FOR: var i=0; i < scores.length; i++

DISPLAY the bubble solution score[i]

IF scores[i] > highScore

SET highScore = scores[i];

END IF

END FOR

DISPLAY highScore

Joe: Oh nice; you did it with just a few lines added to our existing code.

Judy: Each time through the array we look to see if the current score is greater than

highScore, and if so, that’s our new high score. Then, after the loop ends we just

display the high score.

Add a variable to hold the high score.

Check each time through the loop to

see if we have a higher score, and if

so that's our new high score.

After the loop we just display the high score.

you are here 4 149

putting some order in your data

var scores = [60, 50, 60, 58, 54, 54,

58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51,

69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18,

41, 53, 55, 61, 51, 44];

var highScore = _____;

var output;

for (var i = 0; i < scores.length; i++) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

if (_____________ > highScore) {

_____________ = scores[i];

}

console.log("Bubbles tests: " + ____________);

console.log("Highest bubble score: " + _____________);

Go ahead and implement the pseudocode on the previous page to find the

highest score by filling in the blanks in the code below. Once you’re done,

give it a try in the browser by updating the code in “bubbles.html” and

reloading the page. Check the results in the console, and fill in the blanks in

our console display below with the number of bubble tests and the highest

score. Check your answer at the end of the chapter before you go on.

JavaScript console

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

...

Bubble solution #34 score: 51

Bubble solution #35 score: 44

Bubbles tests: ________

Highest bubble score: _______

Fill in the blanks to complete the code here...

... and then fill in the blanks showing the

output you get in the console.

150 Chapter 4

adding the highest score

Hey, I really need this report to be able to make quick decisions

about which bubble solution to produce! Can you get this coded?

- Bubbles-R-Us CEO

Bubbles-R-Us

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

Bubbles tests: 36

Highest bubble score: 69

Solutions with highest score: 11, 18

rest of scores here...











Remember here's

what we have left.

"More than one"...hmmm. When we

need to store more than one thing what do

we use? An array, of course. So can we iterate

through the scores array looking for only scores

that match the highest score, and then add

them to an array that we can later display in

the report? You bet we can, but to do that we’ll

have to learn how to create a brand new, empty

array, and then understand how to add new

elements to it.

you are here 4 151

putting some order in your data

Creating an array from scratch

(and adding to it)

Before we take on finishing this code, let’s get a sense for how to create

a new array, and how to add new items to it. You already know how to

create an array with values, like this:

var genres = ["80s", "90s", "Electronic", "Folk"];

This is called an array literal, because

we're literally writing out what goes

in the array.

But you can also omit the initial items and just create an empty array:

var genres = [];

A new array, all ready to go with no

items and a length of zero.

This is an array literal

too, it just doesn’t have

anything in it (yet).

And you already know how to add new values to an array. To do that you

just assign a value to an item at an index, like this:

var genres = [];

genres[0] = "Rockabilly";

genres[1] = "Ambient";

var size = genres.length;

A new array item is created and it

holds the string “Rockabilly".

And a second array item is created

that holds the string “Ambient".

And here size holds the value 2, the

length of the array.

Now when adding new items you have to be careful about which index you’re

adding. Otherwise you’ll create a sparse array, which is an array with “holes” in

it (like an array with values at 0 and 2, but no value at 1). Having a sparse array

isn’t necessarily a bad thing, but it does require special attention. For now, there’s

another way to add new items without worrying about the index, and that’s push.

Here’s how it works:

var genres = [];

genres.push("Rockabilly");

genres.push("Ambient");

var size = genres.length;

Creates a new item in the next available index (which

happens to be 0) and sets its value to “Rockabilly".

Creates another new item in the next open index

(in this case, 1) and sets the value to “Ambient".

152 Chapter 4

questions about iteration and arrays

Q: The for statement contains a

variable declaration and initialization in

the first part of the statement. You said

we should put our variable declarations

at the top. So, what gives?

A: Yes, putting your variable

declarations at the top (of your file, if they

are global, or of your function if they are

local) is a good practice. However, there

are times when it makes sense to declare

a variable right where you’re going to use

it, and a for statement is one of those times.

Typically, you use a loop variable, like i,

just for iterating, and once the loop is done,

you’re done with that variable. Now, you

might use i later in your code, of course,

but typically you won’t. So, in this case, just

declaring it right in the for statement keeps

things tidy.

Q: What does the syntax myarray.

push(value) actually mean?

A: Well, we’ve been keeping a little

secret from you: in JavaScript, an array is

actually a special kind of object. As you’ll

learn in the next chapter, an object can

have functions associated with it that act on

the object. So, think of push as a function

that can act on myarray. In this case, what

that function does is add a new item to

the array, the item that you pass as an

argument to push. So, if you write

genres.push("Metal");

you’re calling the function push and

passing it a string argument, “Metal”. The

push function takes that argument and

adds it as a new value on the end of the

genres array. When you see

myarray.push(value) just think, “I’m

pushing a new value on the end of my

array.”

Q: Can you say a little more about

what a sparse array is?

A: A sparse array is just an array that

has values at only a few indices and no

values in between. You can create a sparse

array easily, like this:

var sparseArray = [ ];

sparseArray[0] = true;

spraseArray[100] = true;

In this example, the sparseArray has only

two values, both true, at indices 0 and

100.The values at all the other indices are

undefined. The length of the array is 101

even though there are only two values.

Q: Say I have an array of length 10,

and I add a new item at index 10000,

what happens with indices 10 through

9999?

A: All those array indices get the value

undefined. If you remember, undefined

is the value assigned to a variable that

you haven’t initialized. So, think of this as

if you’re creating 9989 variables, but not

initializing them. Remember that all those

variables take up memory in your computer,

even if they don’t have a value, so make

sure you have a good reason to create a

sparse array.

Q: So, if I’m iterating through an

array, and some of the values are

undefined, should I check to make sure

before I use them?

A: If you think your array might be

sparse, or even have just one undefined

value in it, then yes, you should probably

check to make sure that the value at an

array index is not undefined before you use

it. If all you’re doing is displaying

the value in the console, then it’s no big

deal, but it’s much more likely that you’ll

actually want to use that value somehow,

perhaps in a calculation of some kind. In

that case, if you try to use undefined, you

might get an error, or at the very least,

some unexpected behavior. To check for

undefined, just write:

if (myarray[i] = = undefined) {

...

}

Notice there are no quotes around

undefined (because it’s not a string, it’s a

value).

Q: All the arrays we’ve created so far

have been literal. Is there another way to

create an array?

A: Yes. You may have seen the syntax:

var myarray = new Array(3);

What this does is create a new array, with

three empty spots in it (that is, an array

with length 3, but no values yet). Then you

can fill them, just like you normally would,

by providing values for myarray at indices 0,

1, and 2. Until you add values yourself, the

values in myarray are undefined.

An array created this way is just the same

as an array literal, and in practice, you’ll

find yourself using the literal syntax more

often, and that’s what we’ll tend to use in

the rest of the book.

And don’t worry about the details of the

syntax above for now (like “new” and why

Array is capitalized); we’ll get to all that

later!

you are here 4 153

putting some order in your data

Judy: Yes, we’ll start with an empty array to hold the solutions with the

highest scores, and add each solution that has that high score one at a time

to it as we iterate through the scores array.

Frank: Great, let’s get started.

Judy: But hold on a second… I think we might need a separate loop.

Frank: We do? Seems like there should be a way to do it in our existing

loop.

Judy: Yup, I’m sure we do. Here’s why. We have to know what the highest

score is  we can find all the solutions that have that highest score. So

we need two loops: one to find the highest score, which we’ve already

written, and then a second one to find all the solutions that have that score.

Frank: Oh, I see. And in the second loop, we’ll compare each score to

the highest score, and if it matches, we’ll add the index of the bubble

solution score to the new array we’re creating for the solutions with the

highest scores.

Judy: Exactly! Let’s do it.













Can you write the loop to find all the scores that match the high score? Give it a

shot below before you turn the page to see the solution and give it a test drive.

var bestSolutions = [];

for (var i = 0; i < scores.length; i++) {

}

Your code here.

Remember, the variable highScore has the highest

score in it; you can use that in the code below.

Here’s the new array we’ll use to store the bubble

solutions with the highest score.

154 Chapter 4

exercise solution

var bestSolutions = [];

for (var i = 0; i < scores.length; i++) {

if (scores[i] == highScore) {

bestSolutions.push(i);

}

console.log("Solutions with the highest score: " + bestSolutions);

Again, we're starting by creating a

new array that will hold all the bubble

solutions that match the highest score.

Each time through the loop, we

compare the score at index i with

the highScore and if they are equal,

then we add that index to the

bestSolutions array using push.

And finally, we can display the bubble solutions with the highest scores. Notice we’re

using console.log to display the bestSolutions array. We could create another loop to

display the array items one by one, but, luckily, console.log will do this for us (and, if

you look at the output, it also adds commas between the array values!).

Can you write the loop to find all the scores that match the high score?

Here’s our solution.

Next, we iterate through the entire

scores array, looking for those items

with the highest score.





you are here 4 155

putting some order in your data

Test drive the final report

var scores = [60, 50, 60, 58, 54, 54,

58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51,

69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18,

41, 53, 55, 61, 51, 44];

var highScore = 0;

var output;

for (var i = 0; i < scores.length; i++) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

if (scores[i] > highScore) {

highScore = scores[i];

}

console.log("Bubbles tests: " + scores.length);

console.log("Highest bubble score: " + highScore);

var bestSolutions = [];

for (var i = 0; i < scores.length; i++) {

if (scores[i] == highScore) {

bestSolutions.push(i);

}

console.log("Solutions with the highest score: " + bestSolutions);

Go ahead and add the code to generate the bubble solutions with the highest score to your

code in “bubbles.html” and run another test drive. All the JavaScript code is shown below:

JavaScript console

Bubble solution #0 score: 60

Bubble solution #1 score: 50

...

Bubble solution #34 score: 51

Bubbles tests: 36

Highest bubble score: 69

Solutions with the highest score: 11,18

And the winners are...

Bubble solutions #11 and #18 both have a high score of 69! So they are

the best bubble solutions in this batch of test solutions.

156 Chapter 4

rethinking the code with functions









You're right, we should be. Given

you just learned functions, we wanted to get

the basics of arrays out of the way before

employing them. That said, you always want

to think about which parts of your code you

can abstract away into a function. Not only

that, but say you wanted to reuse, or let others

reuse, all the work that went into writing the

bubble computations—you’d want to give other

developers a nice set of functions they could

work with.

Let’s go back to the Bubble Score code and

 it into a set of functions. By refactor we

mean we’re going to rework how it’s organized,

to make it more readable and maintainable, but

we’re going to do it without altering what the

code does. In other words, when we’re done,

the code will do exactly what it does now but

it’ll be a lot better organized.

you are here 4 157

putting some order in your data

A quick survey of the code...

Let’s get an overview of the code we’ve written and figure

out which pieces we want to abstract into functions:

<!doctype html>

<head>

<title>Bubble Factory Test Lab</title>

var scores = [60, 50, 60, 58, 54, 54,

58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51,

69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18,

41, 53, 55, 61, 51, 44];

var highScore = 0;

var output;

for (var i = 0; i < scores.length; i++) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

if (scores[i] > highScore) {

highScore = scores[i];

}

console.log("Bubbles tests: " + scores.length);

console.log("Highest bubble score: " + highScore);

var bestSolutions = [];

for (var i = 0; i < scores.length; i++) {

if (scores[i] == highScore) {

bestSolutions.push(i);

}

console.log("Solutions with the highest score: " + bestSolutions);

</script>

</head>

</html>

Here’s the Bubbles-R-Us code.

We don’t want to declare scores inside the

functions that operate on scores because these are

going to be different for each use of the functions.

Instead, we’ll pass the scores as an argument into

the functions, so the functions can use any scores

array to generate results.

We use this first chunk

of code to output each

score and at the same time

compute the highest score in

the array. We could put this

in a printAndGetHighScore

function.

And we use this second chunk of code

to figure out the best results given

a high score. We could put this in a

getBestResults function.

158 Chapter 4

refactoring code with functions

Writing the printAndGetHighScore function

We’ve got the code for the printAndGetHighScore function already. It’s just

the code we’ve already written, but to make it a function we need to think through

what arguments we’re passing it, and if it returns anything back to us.

Now, passing in the scores array seems like a good idea because that way, we can

reuse the function on other arrays with bubble scores. And we want to return the

high score that we compute in the function, so the code that calls the function can

do interesting things with it (and, after all, we’re going to need it to figure out the

best solutions).

Oh, and another thing: often you want your functions to do one thing well. Here

we’re doing two things: we’re displaying all the scores in the array and we’re also

computing the high score. We might want to consider breaking this into two

functions, but given how simple things are right now we’re going to resist the

temptation. If we were working in a professional environment we might reconsider

and break this into two functions, printScores and getHighScore. But for

now, we’ll stick with one function. Let’s get this code refactored:

function printAndGetHighScore(scores) {

var highScore = 0;

var output;

for (var i = 0; i < scores.length; i++) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

if (scores[i] > highScore) {

highScore = scores[i];

}

return highScore;

}

We’ve created a function that expects

one argument, the scores array.

This code is exactly the same.

Well, actually it LOOKS exactly

the same, but it now uses the

parameter scores rather than the

global variable scores.

And we’ve added one line here to

return the highScore to the code

that called the function.

you are here 4 159

putting some order in your data

Now, we need to change the rest of the code to use our new function. To do so, we

simply call the new function, and set the variable highScore to the result of the

printAndGetHighScore function:

Refactoring the code using printAndGetHighScore

<!doctype html>

<head>

<title>Bubble Factory Test Lab</title>

var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51, 69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18, 41, 53, 55, 61, 51, 44];

function printAndGetHighScore(scores) {

var highScore = 0;

var output;

for (var i = 0; i < scores.length; i++) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

if (scores[i] > highScore) {

highScore = scores[i];

}

return highScore;

}

var highScore = printAndGetHighScore(scores);

console.log("Bubbles tests: " + scores.length);

console.log("Highest bubble score: " + highScore);

var bestSolutions = [];

for (var i = 0; i < scores.length; i++) {

if (scores[i] == highScore) {

bestSolutions.push(i);

}

console.log("Solutions with the highest score: " + bestSolutions);

</script>

</head>

</html>

Here's our new

function, all ready

to use.

And now we just call the function,

passing in the scores array. We

assign the value it returns to the

variable highScore.

Now we need to refactor this

code into a function and make

the appropriate changes to the

rest of the code.

160 Chapter 4

exercise in refactoring code

function getBestResults(__________, ____________) {

var bestSolutions = ______;

for (var i = 0; i < scores.length; i++) {

if (___________ == highScore) {

bestSolutions.__________;

}

return _______________;

}

var bestSolutions = _____________(scores, highScore);

console.log("Solutions with the highest score: " + bestSolutions);

var bestSolutions = [];

for (var i = 0; i < scores.length; i++) {

if (scores[i] == highScore) {

bestSolutions.push(i);

}

console.log("Solutions with the highest score: " + bestSolutions);

Here's the original

code in case you need

to refer to it.

We've already started this but we

need your help to finish it!

Let’s work through this next one together. The goal is to write a function to create an

array of bubble solutions that have the high score (and there might be more than one, so

that's why we're using an array). We’re going to pass this function the scores array and the

highScore we computed with printAndGetHighScore. Finish the code below. You’ll find the

answer on the next page but don’t peek! Do the code yourself first, so you really get it.

you are here 4 161

putting some order in your data

Once you’ve completed refactoring your code, make all the changes to “bubbles.html”, just

like we have below, and reload the bubble report. You should get exactly the same results

as before. But now you know your code is more organized and reusable. Create your own

scores array and try some reuse!

Putting it all together...

<!doctype html>

<head>

<title>Bubble Factory Test Lab</title>

var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51, 69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18, 41, 53, 55, 61, 51, 44];

function printAndGetHighScore(scores) {

var highScore = 0;

var output;

for (var i = 0; i < scores.length; i++) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

if (scores[i] > highScore) {

highScore = scores[i];

}

return highScore;

}

function getBestResults(scores, highScore) {

var bestSolutions = [];

for (var i = 0; i < scores.length; i++) {

if (scores[i] == highScore) {

bestSolutions.push(i);

}

return bestSolutions;

}

var highScore = printAndGetHighScore(scores);

console.log("Bubbles tests: " + scores.length);

console.log("Highest bubble score: " + highScore);

var bestSolutions = getBestResults(scores, highScore);

console.log("Solutions with the highest score: " + bestSolutions);

</script>

</head>

</html>

Okay, here's the new

getBestResults function.

And we use the result of

that function to display the

best solutions in the report.

162 Chapter 4

more bubble computing

var costs = [.25, .27, .25, .25, .25, .25,

.33, .31, .25, .29, .27, .22,

.31, .25, .25, .33, .21, .25,

.25, .25, .28, .25, .24, .22,

.20, .25, .30, .25, .24, .25,

.25, .25, .27, .25, .26, .29];

var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69, ..., 44];

var costs = [.25, .27, .25, .25, .25, .25, .33, .31, .25, .29, .27, .22, ..., .29];

So, what’s the job here? It’s to take the leading bubble solutions—that is, the ones

with the highest bubble scores—and choose the lowest cost one. Now, luckily, we’ve

been given a costs array that mirrors the scores array. That is, the bubble solution

score at index 0 in the scores array has the cost at index 0 in the costs array (.25),

the bubble solution at index 1 in the scores array has a cost at index 1 in the costs

array (.27), and so on. So, for any score you’ll find its cost in the costs array at the

same index. Sometimes we call these  arrays:

The cost at 0 is the cost of

the bubble solution at 0...

And likewise for the other cost

and score values in the arrays.













Here’s the array. Notice that it has a cost

for each of the corresponding solutions in the

scores array.

Scores and costs are parallel arrays

because for each score there is a

corresponding cost at the same index.

you are here 4 163

putting some order in your data









Judy: Well, we know the highest score already.

Frank: Right, but how do we use that? And we have these two arrays,

how do we get those to work together?

Judy: I’m pretty sure either of us could write a simple for loop that

goes through the scores array again and picks up the items that

match the highest score.

Frank: Yeah, I could do that. But then what?

Judy: Anytime we hit a score that matches the highest score, we need

to see if its cost is the lowest we’ve seen.

Frank: Oh I see, so we’ll have a variable that keeps track of the index of the “lowest cost

high score.” Wow, that’s a mouthful.

Judy: Exactly. And once we get through the entire array, whatever index is in that variable

is the index of the item that not only matches the highest score, but has the lowest cost.

Frank: What if two items match in cost?

Judy: Hmm, we have to decide how to handle that. I’d say, whatever one we see first is the

winner. Of course we could do something more complex, but let’s stick with that unless

the CEO says differently.

Frank: This is complicated enough I think I want to sketch out some pseudocode before

writing anything.

Judy: I agree; whenever you are managing indices of multiple arrays things can get tricky.

Let’s do that; in the long run I’m sure it will be faster to plan it first.

Frank: Okay, I’ll take a first stab at it…

164 Chapter 4

translating pseudocode to code

function getMostCostEffectiveSolution(scores, costs, highscore) {

}

var mostCostEffective = getMostCostEffectiveSolution(scores, costs, highScore);

console.log("Bubble Solution #" + mostCostEffective + " is the most cost effective");

FUNCTION GETMOSTCOSTEFFECTIVESOLUTION (SCORE, COSTS, HIGHSCORE)

DECLARE a variable cost and set to 100.

DECLARE a variable index.

FOR: var i=0; i < scores.length; i++

IF the bubble solution at score[i] has the highest score

IF the current value of cost is greater than the cost of the bubble solution

THEN

SET the value of index to the value of i

SET the value of cost to the cost of the bubble solution

END IF

END FOR

RETURN index

Translate the

pseudocode to

JavaScript here.









you are here 4 165

putting some order in your data

#11

The last bit of code you wrote really helped determine the TRUE winner; that

is, the solution that produces the most bubbles at the lowest cost. Congrats

on taking a lot of data and crunching it down to something Bubbles-R-Us

can make real business decisions with.

Now, if you're like us, you’re dying to know what is in Bubble Solution #11.

Look no further; the Bubble-R-Us CEO said he’d be delighted to give you the

recipe after all your unpaid work.

So, you’ll find the recipe for Bubble Solution #11 below. Take some time to let

your brain process arrays by making a batch, getting out, and blowing some

bubbles before you begin the next chapter. Oh, but don’t forget the bullet

points and the crossword before you go!

The WINNER: SOLUTION #11

2/3 cup dishwashing soap

1 gallon water

2 to 3 tablespoons of glycerine (available at the

pharmacy or chemical supply house.)

INSTRUCTIONS: Mix ingredients together in a

large bowl and have fun!

Bubble Solution #11

DO try this at HOME!

166 Chapter 4

chapter summary

Arrays are a data structure for ordered

data.

An array holds a set of items, each with its

own index.

Arrays use a zero-based index, where the



All arrays have a length property, which

holds a number representing the number

of items in the array.

You can access any item using its index.

For example, use myArray[1] to access

item one (the second item in the array).

If an item doesn’t exist, trying to access it



Assigning a value to an existing item will

change its value.

Assigning a value to an item that doesn’t

exist in the array will create a new item in

the array.

You can use a value of any type for an

array item.

Not all the values in an array need to be

the same type.

Use the array literal notation to create a

new array.

You can create an empty array with

var myArray = [ ];

The for loop is commonly used to iterate

through arrays.

A for loop packages up variable

initialization, a conditional test, and

variable increment into one statement.

The while loop is most often used when

you don’t know how many times you

need to loop, and you’re looping until a

condition is met. The for loop is most often

used when you know the number of times

the loop needs to execute.

Sparse arrays occur when there are



You can increment a variable by one with

the post-increment operator ++.

You can decrement a variable by one with

the post-decrement operator --.

You can add a new value to an array using

push.

you are here 4 167

putting some order in your data

JavaScript cross

Let arrays sink into your brain as you do the crossword.

1 2 3

5 6 7

10 11 12

14 15 16

ACROSS



array.











easier to read and maintain.



DOWN



______.





4. The last index of an array is always one ______ than

the length of the array.





_______ property to know when to stop.

8. The index of the first item in an array is ________.











brackets.

168 Chapter 4

exercise solutions

We’ve got code for testing to see which ice cream flavors have bubblegum pieces

in them. We had all the code nicely laid out on our fridge using fridge magnets,

but the magnets fell on the floor. It’s your job to put them back together. Be

careful; a few extra magnets got mixed in. Here’s our solution.

var products = ["Choo Choo Chocolate", "Icy Mint", "Cake Batter", "Bubblegum"];

var last = products.length - 1;

var recent = products[last];

The products array below holds the Jenn and Berry’s ice cream flavors. The ice

creams were added to this array in the order of their creation. Finish the code to

determine the most recent ice cream flavor they created. Here’s our solution.

We can use the length of the array, minus

one to get the index of the last item. The

length is 4, and the index of the last item

is 3, because we start from 0.

var products = ["Choo Choo Chocolate",

"Icy Mint", "Cake Batter",

"Bubblegum"];

i = i + 1;

var hasBubbleGum = [false,

false,

true];

var i = 0;

i = i + 2;

{

}

{

console.log(products[i] +

" contains bubble gum");

Code Magnets Solution

while (i > hasBubbleGum.length)

Rearrange the magnets here.

JavaScript console

Bubblegum contains bubble gum!

Here’s the output

we’re expecting.

while (i < hasBubbleGum.length)

{

if (hasBubbleGum[i])

Leftover magnets.

you are here 4 169

putting some order in your data

Rewrite your fridge magnet code (from two pages

back) so that it uses a for loop instead of a while

loop. If you need a hint, refer to each piece of the

while loop on the previous page and see how it

maps to the corresponding location in the for loop.

Here’s our solution.

Your code goes here.

var products = ["Choo Choo Chocolate",

"Icy Mint", "Cake Batter",

"Bubblegum"];

var hasBubbleGum = [false,

false,

true];

var i = 0;

while (i < hasBubbleGum.length)

{

if (hasBubbleGum[i])

{

console.log(products[i] +

" contains bubble gum");

}

i = i + 1;

}

var products = ["Choo Choo Chocolate",

"Icy Mint", "Cake Batter",

"Bubblegum"];

var hasBubbleGum = [false,

false,

true];

for (var i = 0; i < hasBubbleGum.length; i = i + 1) {

if (hasBubbleGum[i]) {

console.log(products[i] + " contains bubble gum");

}

170 Chapter 4

exercise solutions

var scores = [60, 50, 60, 58, 54, 54,

58, 50, 52, 54, 48, 69,

34, 55, 51, 52, 44, 51,

69, 64, 66, 55, 52, 61,

46, 31, 57, 52, 44, 18,

41, 53, 55, 61, 51, 44];

var highScore = _____;

var output;

for (var i = 0; i < scores.length; i++) {

output = "Bubble solution #" + i + " score: " + scores[i];

console.log(output);

if (_____________ > highScore) {

_____________ = scores[i];

}

console.log("Bubbles tests: " + ____________);

console.log("Highest bubble score: " + _____________);

Go ahead and implement the pseudocode on the previous page to find the

highest score by filling in the blanks in the code below. Once you’re done,

give it a try in the browser by updating the code in “bubbles.html”, and

reloading the page. Check the results in the console, and fill in the blanks in

our console display below with the number of bubble tests and the highest

score. Here’s our solution.

JavaScript console

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

...

Bubble solution #34 score: 51

Bubble solution #35 score: 44

Bubbles tests: ________

Highest bubble score: _______

Fill in the blanks to complete the code here...

... and then fill in the blanks showing the

output you get in the console.

highScore

scores[i]

scores.length

highScore

36 69

you are here 4 171

putting some order in your data

function getMostCostEffectiveSolution(scores, costs, highscore) {

var cost = 100;

var index;

for (var i = 0; i < scores.length; i++) {

if (scores[i] == highscore) {

if (cost > costs[i]) {

index = i;

cost = costs[i];

}

return index;

}

var mostCostEffective = getMostCostEffectiveSolution(scores, costs, highScore);

console.log("Bubble Solution #" + mostCostEffective + " is the most cost effective");

The final report showing bubble solution #11 as

the winner of the bubble tests for having the

highest bubble factor at a low cost.

Here’s our solution for the getMostCostEffectiveSolution function, which takes an

array of scores, an array of costs, and a high score, and finds the index of the bubble

solution with the highest score and lowest cost. Go ahead and test drive all your code

in “bubbles.html” and make sure you see the same results.

JavaScript console

Bubble solution #0 score: 60

Bubble solution #1 score: 50

Bubble solution #2 score: 60

...

Bubble solution #34 score: 51

Bubble solution #35 score: 44

Bubbles tests: 36

Highest bubble score: 69

Solutions with the highest score: 11,18

Bubble Solution #11 is the most cost effective

The getMostCostEffectiveSolution takes the array

of scores, the array of costs, and the high score.

We’ll keep track of the lowest cost solution in cost...

... and the index of the lowest cost solution in index.

We start cost at a high

number, and we’ll lower it each

time we find a lower cost

solution (with a high score).

We iterate through the scores

array like before...

... and check to see if the score has the high score.

If it does, then we can check its cost. If the current cost is

greater than the solution’s cost, then we’ve found a lower cost

solution, so we’ll make sure we keep track of which solution

it is (its index in the array) and store its cost in the cost

variable as the lowest cost we’ve seen so far.

Once the loop is complete, the index of solution

with the lowest cost is stored in index, so we return

that to the code that called the function.

And then display the index (which is

the bubble solution #) in the console.

BONUS: We could also implement this using the bestSolutions

array so we wouldn’t have to iterate through all the scores

again. Remember, the bestSolutions array has the indices of the

solutions with the highest scores. So in that code, we’d use the

items in the bestSolutions array to index into the costs array

to compare the costs. The code is a little more efficient than

this version, but it’s also a little bit more difficult to read and

understand! If you’re interested, we’ve included the code in the

book code download at wickedlysmart.com.

172 Chapter 4

exercise solutions

JavaScript cross Solution

Let arrays sink into your brain as you do the crossword.

U O L

5P A R S E L P

S T 8O E

9S S I G N E S N

P R T G

10 U

11 B B L E O

12 L O G I S T

N E R N

D O

13 G C

E R

14 E F A C T

15 O R I

F D N E N

I E I O M D

N R E E

E E E I

17 N D E

D D T

this is a new chapter 173

A trip to Objectville

understanding objects

So far you’ve been using primitives and arrays in your

code. And, procedural manner



exactly object-oriented at all!





behind to create some objects



programming senseand













174 Chapter 5

introducing objects

Did someone say “Objects”?!

Cars have a make,

like “Chevy”.

And a model. In this case we’d

call this car a “Bel Air”.

Some cars are convertibles.

This one isn’t.

Ah, our favorite topic! Objects are going to take your JavaScript

programming skills to the next level—they’re the key to managing

complex code, to understanding the browser’s document model

(which we’ll do in the next chapter), to organizing your data, and

they’re even the fundamental way many JavaScript libraries are

packaged up (more on that much later in the book). That said, objects

are a difficult topic, right? Hah! We’re going to jump in head first

and you’ll be using them in no time.

: they’re just a collection of properties.

Let’s take an example, say, a car. A car’s got properties:

A car has a color.

Cars can hold a

maximum number

of passengers.

A car has the year

it was manufactured,

in this case, 1957.

Cars have a mileage number

that represents how many

miles they've been driven.

Cars don’t just have properties, they do things too.

We’ll talk about the behavior of objects a little bit

later. For now let’s get back to properties...

you are here 4 175

understanding objects





for a car and write them below. Remember, only some real-world



Car Object

make: “Chevy”

model: “Bel Air”

year: 1957

The car has a set of properties.

Here’s our Car

represented as a

software object.

Thinking about properties...

Of course there’s a lot more to a real car than just a few properties, but

for the purposes of coding, these are the properties we want to capture in

software. Let’s think about these properties in terms of JavaScript data types:

color: “red”

passengers: 2

convertible: false

mileage: 1021

The make, model and color

properties have string values.

The year, passengers and

mileage are numbers.

And the property

convertible is a boolean.

Each property has a name and a value.

Those fuzzy dice

may look nice, but

would they really be

useful in an object?

176 Chapter 5

object properties

,,,,,,,` We’ve started making a table of property names and values for a car. Can you help

complete it? Make sure you compare your answers with ours before moving on!

{

__________ : ______________,

__________ : ______________

};

model

make “Chevy”

Put your answers here.

Feel free to expand

the list to include

your own properties.

Put your property

names here.

And put the corresponding

values over here.

When you’re done notice the syntax we’ve placed around

the properties and values. There might be a pop-quiz at

some point... just sayin’.

year

color

passengers

convertible



might they differ? What additional properties might it have (or not have)?

mileage

you are here 4 177

understanding objects

var chevy = {

make: "Chevy",

model: "Bel Air",

year: 1957,

color: "red",

passengers: 2,

convertible: false,

mileage: 1021

};

How to create an object

Here’s the good news: after the last Sharpen your Pencil exercise, you’re

already most of the way to creating an object. All you really need to

do is assign what you wrote on the previous page to a variable (so

you can do things with your object after you’ve created it). Like this:

Next, start an object with a left curly brace.

Each property has a name, a colon and then a value. Here

we have strings, numbers and one boolean as property values.

Add a variable declaration for the object.

We end the object with a closing curly brace, and just like any

other variable declaration, we end this one with a semicolon.

Notice that each property is separated by a comma.

Then all the object’s properties go inside.

You can now take your object, pass it around, get values from it,

change it, add properties to it, or take them away. We’ll get to

how to do all that in a second. For now, let’s create some more

objects to play with…

make: "Chevy"

model: "Bel Air"

year: 1957

color: "red"

passengers: 2

convertible: false

mileage: 1021

chevy

We’ve taken the textual description of

the object above and created a real

live JavaScript object from it.

The result of all this? A brand new object of course. Think of the

object as something that holds all your names and values (in other

words, your properties) together.

Now you’ve got a live object complete with a set of

properties. And you’ve assigned your object to a variable

that you can use to access and change its properties.

178 Chapter 5

exercise specifying object

Its mileage is 12,892.

You don’t have to be stuck with just one object. The real power of objects (as you’ll see soon

enough) is having lots of objects and writing code that can operate on whatever object you give

it. Try your hand at creating another object from scratch… another car object. Go ahead and

work out the code for your second object.

var cadi = {

};

Put the properties

for your Cadillac

object here.

This is a 1955 GM Cadillac.

We’ll call this a tan color.

It’s not a convertible,

and it can hold five

passengers (it’s got a

nice big bucket seat in

the back).

you are here 4 179

understanding objects





Make sure you enclose your object in curly braces:

var cat = {

};

Separate the property name and property value with a colon:

var planet = {

diameter: 49528

};

A property name can be any string, but we usually stick with valid variable names:

var widget = {

cost$: 3.14,

"on sale": true

};

No two properties in an object can have the same name:

var forecast = {

highTemp: 82,

highTemp: 56

};

Separate each property name and value pair with a comma:

var gadget = {

isHeavy: true

};

Don’t use a comma after the last property value:

var superhero = {

alias: "Caped Crusader"

};

Notice that if you use a string with a

space in it for a property name, you

need to use quotes around the name.

WRONG! This won’t work.

No comma

needed here!

Webville

180 Chapter 5

what is object oriented



































What do you like about OO?

What is Object-Oriented Anyway?

Up ‘til now, we’ve been thinking of a problem as a set of variable

declarations, conditionals, for/while statements, and function calls. That’s

thinking : first do this, then do this and so on. With 

programming we think about a problem in terms of objects. Objects that

have state (like a car might have an oil and a fuel level), and behavior (like a

car can be started, driven, parked and stopped).

What’s the point? Well, object-oriented programming allows you to free your

mind to think at a higher level. It’s the difference between having to toast

your bread from first principles (create a heating coil out of wire, hook it to

electricity, turn the electricity on and then hold your bread close enough to

toast it, not to mention watch long enough for it to toast and then unhook the

heating coil), and just using a toaster (place bread in toaster and push down on

the toast button). The first way is procedural, while the second way is object-

oriented: you have a toaster object that supports an easy method of inserting

bread and toasting it.









Ball Object

Paddle Object

Player Object

Pong!

you are here 4 181

understanding objects

How properties work

So you’ve got all your properties packaged up in an object. Now what? Well, you

can examine the values of those properties, change them, add new properties,

take away properties, and in general, compute using them. Let’s try a few of these

things out, using JavaScript of course.

var fiat = {

make: "Fiat",

model: "500",

year: 1957,

color: "Medium Blue",

passengers: 2,

convertible: false,

mileage: 88000

};

How to access a property. To access a property in an object, start with

the object name, follow it with a period (otherwise known as a “dot”) and then use

the property name. We often call that “dot” notation and it looks like this:

Use the name of

the object first...

Smallest car in Webville!

fiat.mileage

...then a “dot”...

...then the name of

the property.

The “dot” is just a period.

And then we can use a property in any expression, like this:

var miles = fiat.mileage;

if (miles < 2000) {

buyIt();

}

Start with the variable that holds your

object, add a period (otherwise known

as a dot) and then your property name.

Dot Notation .

●



properties.

●For example, iat.color

is a property in iat with

the name color and the



182 Chapter 5

using object properties

make: "Fiat"

model: "500"

year: 1957

color: "Medium Blue"

passengers: 2

convertible: false

mileage: 88000

needsWashing: true

fiat.mileage = 10000;

fiat.needsWashing = true;

Just specify the property you want to change

and then give it a new value. Note: in some

states this may be illegal!

As long as the property doesn’t already

exist in the object, it’s added to the

object. Otherwise, the property with this

name is updated.

How to change a property. Yo u can change the value of a

property at any time. All you need to do is assign the property to a new

value. Like, let’s say we wanted to set the mileage of our nifty Fiat to an

even 10,000. You’d do it like this:

How to add a new property. Yo u can extend your object at

any time with new properties. To do this you just specify the new property

and give it a value. For instance, let’s say we want to add a boolean that

indicates when the Fiat needs to be washed:

The new property is added to your object.

if (fiat.year < 1965) {

classic = true;

}

for (var i = 0; i < fiat.passengers; i++) {

addPersonToCar();

}

How to compute with properties. Computing with

properties is simple: just use a property like you would any variable (or any

value). Here are a few examples:

You can use an object’s property just like you use

a variable, except you need to use dot notation

to access the property in the object.

you are here 4 183

understanding objects

The dog

object.

var dog = {

_________: 20.2

age: ________

________: "mixed",

activity: ____________

};

var bark;

if (_____________ > 20) {

bark = "WOOF WOOF";

} else {

bark = "woof woof";

}

var speak = __________ + " says " + ________ + " when he wants to " + ____________;

console.log(speak);

weight: 20.2

age: 4

breed: "mixed"

activity: "fetch balls"

Object Magnets

dog.weight

dog.bark

bark

dog.name

dog.activity

"Fido"

Fido

age

breed

"fetch balls"

20.2

weight

Use these magnets to

complete the code.

Fido is hoping you get

all his properties right.

This code got all scrambled up on the fridge. Practice your object creating

and dot notation skills by getting it all back together. Be careful, some

extra magnets might have got mixed in!

184 Chapter 5

deleting properties







Yes, you can add or delete properties

at any time. As you know, to add a property to

an object you simply assign a value to a new property,

like this:

and from that point on fido will have a new property

dogYears. Easy enough.

To delete a property, we use a special keyword, wait

for it... delete. You use the delete keyword like

this:

When you delete a property, you’re not just deleting

the value of the property, you’re deleting the property

itself. And, if you try to use fido.dogYears after

deleting it, it will evaluate to undefined.

The delete expression returns true if the property

was deleted successfully. delete will return false only

if it can’t delete a property (which could happen for,

say, a protected object that belongs to the browser). It

will return true even if the property you’re trying to

delete doesn’t exist in the object.

fido.dogYears = 35;

delete fido.dogYears;

you are here 4 185

understanding objects

Q: How many properties can an object have?

A: As few or as many as you want. You can have an object

with no properties, or you can have an object with hundreds of

properties. It’s really up to you.

Q: How can I create an object with no properties?

A: Just like you create any object, only leave out all the

properties. Like this:

var lookMaNoProps = { };

Q: I know I just asked how to create an object with no

properties, but why would I want to do this?

A: Well, you might want to start with an entirely empty object

and then add your own properties dynamically, depending on the

logic of your code. This way of creating an object will become clear

as we continue to use objects.

var lookMaNoProps = { };

lookMaNoProps.age = 10;

if (lookMaNoProps.age > 5) {

lookMaNoProps.school = "Elementary";

}

Q: What’s better about an object than just using a bunch

of variables? After all, each of the properties in the fiat object

could just be its own variable, right?

A: Objects package up the complexity of your data so that you

can focus on the high level design of your code, not the nitty gritty

details. Say you want to write a traffic simulator with tens of cars;

you’ll want to focus on cars and streetlights and road objects and

not hundreds of little variables. Objects also make your life easier

because they encapsulate, or hide, the complexity of the state

and behavior of your objects so you don’t have to worry about

them. How all that works will become much clearer as you gain

experience with objects.

Q: If I try to add a new property to my object, and the

object already has a property with that name, what happens?

A: If you try to add a new property, like needsWashing, to fiat

and fiat already has a property needsWashing, then you’ll be

changing the existing value of the property. So if you say:

fiat.needsWashing = true;

but fiat already contains a property needsWashing with the value

false, then you’re changing the value to true.

Q: What happens if I try to access a property that doesn’t

exist? Like if I said,

if (fiat.make) { ... }

but fiat didn’t have a property make?

A: The result of the expression fiat.make will be undefined if fiat

doesn’t have a property named make.

Q: What happens if I put a comma after the last property?

A: In most browsers it won’t cause an error. However, in older

versions of some browsers this will cause your JavaScript to halt

execution. So, if you want your code to work in as many browsers

as possible, keep away from extraneous commas.

Q: Can I use console.log to display an object in the

console?

A: You can. Just write:

console.log(fiat);

in your code, and when you load the page with the console open,

you’ll see information about the object displayed in the console.

JavaScript console

> console.log(fiat)

Object {make: "Fiat", model: "500", year: 1957,

color: "Medium Blue", passengers: 2…}

186 Chapter 5

object references

You’ve already seen that a variable is like a container and it

holds a value. But numbers, strings and booleans are pretty small

values. What about objects? Can a variable hold any sized object

no matter how many properties you put in it?

Variables don’t actually hold objects.

Instead they hold a reference to an object.

The reference is like a pointer or an address to the

actual object.

In other words, a variable doesn’t hold the object

itself, but it holds something like a pointer. And, in

JavaScript we don’t really know

what

is inside a

reference variable. We

know that whatever it is, it

points to our object.

When we use dot notation, the JavaScript

interpreter takes care of using the reference to get

the object and then accesses its properties for us.

So, you can’t stuff an object into a variable, but we often think

of it that way. It’s not what happens though—there aren’t giant

expandable cups that can grow to the size of any object. Instead,

an object variable just holds a reference to the object.

Here’s another way to look at it: a primitive variable represents

the actual  of the variable while an object variable represents

. In practice you’ll only need to think of

objects as, well, objects, like dogs and cars, not as references, but

knowing variables contain  to objects will come in handy

later (and we’ll see that in just a few pages).

And also think about this: you use the dot notation (.) on a

reference variable to say, “use the reference the dot to get

me the object that has the property the dot.” (Read that

sentence a few times and let it sink in.) For example:

car.color;

means “use the object referenced by the variable car

to access the color property.”



make: "Chevy"

model: "Bel Air"

year: 1957

color: "red"

passengers: 2

convertible: false

mileage: 1021

chevy















chevy

make: "Chevy"

model: "Bel Air"

year: 1957

color: "red"

passengers: 2

convertible: false

mileage: 1021

Behind

the Scenes

How does a variable hold an object?

Inquiring minds want to know...

you are here 4 187

understanding objects

var x = 3;







var myCar = {...};





The Car object itself does

not go into the variable!

A number

primitive value.

Reference value





















Comparing primitives and objects

Think of an object reference as just another variable value, which

means that we can put that reference in a cup, just like we can

primitive values. With primitive values, the value of a variable is…

the , like 5, -26.7, “hi”, or false. With reference variables, the

value of the variable is a : a value that represents a way to

get to a specific object.

Behind

the Scenes









These are all primitive variables.

Each holds the value you stored

in the variable.

This is a reference variable,

and holds a value that is a

reference to an object.

Initializing a primitive variable

Initializing an object (a reference) variable

When you declare and initialize a primitive, you give it a value,

and that value goes right in the cup, like this:

When you declare and initialize an object, you make the object

using object notation, but that object won’t fit in the cup. So what

goes in the cup is a  to the object.

We don’t know (or care)

how the JavaScript

interpreter represents

object references.

We just know we can

access an object and

its properties using dot

notation.

188 Chapter 5

passing objects to functions

function prequal(car) {

if (car.mileage > 10000) {

return false;

} else if (car.year > 1960) {

return false;

}

return true;

}

You’re going to pass it a car object.

Just use dot notation on the car

parameter to access the mileage and

year properties.

Test each property value against the

prequalification criteria.

If either of the disqualification

tests succeeds we return false.

Otherwise we return true, meaning

we’ve successfully prequalified!

Doing even more with objects...

Let’s say you’re looking for a good car for your stay in Webville. Your criteria?

How about:

❏Built in 1960 or before.

❏10,000 miles or less.

You also want to put your new coding skills to work (and make your life easier)

so you want to write a function that will “prequalify” cars for you—that is, if the car meets your

criteria then the function returns true; otherwise the car isn’t worth your time and the function

returns false.

More specifically, you’re going to write a  that and puts that

car through the test, returning a boolean value. Your function is going to work for .

Let’s give it a shot:

var taxi = {

make: "Webville Motors",

model: "Taxi",

year: 1955,

color: "yellow",

passengers: 4,

convertible: false,

mileage: 281341

};

Now let’s give this function a try. First you need a car object. How about this one:

What do you think? Should we consider this

yellow taxi? Why or why not?

Here’s the function.

you are here 4 189

understanding objects

var taxi = {

make: "Webville Motors",

model: "Taxi",

year: 1955,

color: "yellow",

passengers: 4,

convertible: false,

mileage: 281341

};

function prequal(car) {

if (car.mileage > 10000) {

return false;

} else if (car.year > 1960) {

return false;

}

return true;

}

var worthALook = prequal(taxi);

if (worthALook) {

console.log("You gotta check out this " + taxi.make + " " + taxi.model);

} else {

console.log("You should really pass on the " + taxi.make + " " + taxi.model);

}

JavaScript console

You should really pass on the Webville Motors Taxi

Here's what we got... let's quickly trace

through the code on the next page to see

how the Taxi got rejected...

Doing some pre-qualification

We’ve done enough talking about objects. Let’s actually create one and put it through its

paces using the prequal function. Grab your favorite, basic HTML page (“prequal.html”)

and throw in the code below, load the page and see if the taxi qualifies:

Does the taxi cut it?

190 Chapter 5

how pre-qualification works

Stepping through pre-qualification

First we create the taxi object and assign it to the

variable taxi. Of course, the taxi variable holds

a reference to the taxi object, not the object itself.

Next we call prequal, passing it the argument taxi,

which is bound to the parameter car in the function.

make: "Webville..."

model: "Taxi

year: 1955

color: "yellow"

passengers: 4

convertible: false

mileage: 281341

function prequal(car) {

...

}

We then perform the tests in the body of the function,

using the taxi object in the car parameter.

if (car.mileage > 10000) {

return false;

} else if (car.year > 1960) {

return false;

}

Unfortunately the taxi has a lot of miles, so the first test of car.mileage > 10000 is

true. The function returns false, and so worthALook is set to false. We then get

“You should really pass on the Webville Motors Taxi” displayed in the console.

var worthALook = prequal(taxi);

if (worthALook) {

console.log("You gotta check out this " + taxi.make + " " + taxi.model);

} else {

console.log("You should really pass on the " + taxi.make + " " + taxi.model);

}

In this case, the taxi’s mileage is way above

10,000 miles, so prequal returns false.

Too bad; it’s a cool ride.

The prequal function returns

false, and so we get...

JavaScript console

You should really pass on the Webville Motors Taxi

var taxi = { ... };

make: "Webville..."

model: "Taxi

year: 1955

color: "yellow"

passengers: 4

convertible: false

mileage: 281341

make: "Webville..."

model: "Taxi

year: 1955

color: "yellow"

passengers: 4

convertible: false

mileage: 281341



car points to the same object as taxi!

you are here 4 191

understanding objects

Your turn. Here are three more car objects; what is the result of passing

each car to the prequal function? Work the answer by hand, and then

write the code to check your answers:

var cadi = {

make: "GM",

model: "Cadillac",

year: 1955,

color: "tan",

passengers: 5,

convertible: false,

mileage: 12892

};

prequal(cadi);

var chevy = {

make: "Chevy",

model: "Bel Air",

year: 1957,

color: "red",

passengers: 2,

convertible: false,

mileage: 1021

};

prequal(chevy);

var fiat = {

make: "Fiat",

model: "500",

year: 1957,

color: "Medium Blue",

passengers: 2,

convertible: false,

mileage: 88000

};

prequal(fiat);

Write the

value of

prequal here.

192 Chapter 5

passing object references

Let’s talk a little more about passing

objects to functions

We’ve already talked a bit about how arguments are passed to functions—arguments are

passed , which means pass-. So if we pass an integer, the corresponding function

parameter gets a copy of the value of that integer for its use in the function. The same rules

hold true for objects, however, we should look a little more closely at what pass-by-value

means for objects to understand what happens when you pass an object to a function.

You already know that when an object is assigned to a variable, that variable holds a 

to the object, not the object itself. Again, think of a reference as a pointer to the object:

So, when you call a function and pass it an object, you’re passing the 

, not the object itself. So using our pass by value semantics, a copy of the

reference is passed into the parameter, and that reference remains a pointer to

the original object.

Dog









When an object is assigned to

a variable, the variable is given

a reference to the object. It

doesn’t “hold” the object itself.

So, what does this all mean? Well, one of the biggest ramifications is that if you change a

property of the object in a function, you’re changing the property in the  object. So

any changes you make to the object inside a function will still be there when the function

completes. Let’s step through an example...

When we call bark and pass it fido

as an argument, the dog parameter

variable gets a copy of the reference.





function bark(dog) {

... code here ...

}

bark(fido); 

The dog parameter variable points

to the same object as fido.



you are here 4 193

understanding objects

loseWeight(fido, 10);

fido is a reference to an

object, which means the

object doesn’t live in the fido

variable, but is pointed to by

the fido variable.

Putting Fido on a diet....

Let’s say we are testing a new method of weight loss for dogs, which we

want to neatly implement in a function loseWeight. All you need to

do is pass loseWeight your dog object and an amount to lose, and like

magic, the dog’s weight will be reduced. Here’s how it works:

function loseWeight(dog, amount) {

dog.weight = dog.weight - amount;

}

alert(fido.name + " now weighs " + fido.weight);

So, when we subtract 10 pounds

from dog.weight, we’re changing

the value of fido.weight.

When we pass fido into loseWeight, what gets

assigned to the dog parameter is a copy of

the reference, not a copy of the object. So

fido and dog point to the same object.

When we pass fido

to a function, we are

passing the reference

to the object.

1



2







The dog reference

is a copy of the

fido reference.

dog

fido

Dog









Here’s the dog object.

194 Chapter 5

object exercise

function getSecret(file, secretPassword) {

_______.opened = _______.opened + 1;

if (secretPassword == _______.password) {

return ______.contents;

}

else {

return "Invalid password! No secret for you.";

}

function setSecret(file, secretPassword, secret) {

if (secretPassword == _______.password) {

______.opened = 0;

______.contents = secret;

}

var superSecretFile = {

level: "classified",

opened: 0,

password: 2,

contents: "Dr. Evel's next meeting is in Detroit."

};

var secret = getSecret(_______________, _____);

console.log(secret);

setSecret(_________________, _____, "Dr. Evel's next meeting is in Philadelphia.");

secret = getSecret(_______________, _____);

console.log(secret);

You’ve been given a super secret file and two functions that allow access to

get and set the contents of the file, but only if you have the right password.

The first function, getSecret, returns the contents of the file if the password

is correct, and logs each attempt to access the file. The second function,

setSecret, updates the contents of the file, and resets the access tracking

to 0. It’s your job to fill in the blanks below to complete the JavaScript and

test your functions.

you are here 4 195

understanding objects

<!doctype html>

<head>

<title>Object-o-matic</title>

function makeCar() {

var makes = ["Chevy", "GM", "Fiat", "Webville Motors", "Tucker"];

var models = ["Cadillac", "500", "Bel-Air", "Taxi", "Torpedo"];

var years = [1955, 1957, 1948, 1954, 1961];

var colors = ["red", "blue", "tan", "yellow", "white"];

var convertible = [true, false];

var rand1 = Math.floor(Math.random() * makes.length);

var rand2 = Math.floor(Math.random() * models.length);

var rand3 = Math.floor(Math.random() * years.length);

var rand4 = Math.floor(Math.random() * colors.length);

var rand5 = Math.floor(Math.random() * 5) + 1;

var rand6 = Math.floor(Math.random() * 2);

var car = {

make: makes[rand1],

model: models[rand2],

year: years[rand3],

color: colors[rand4],

passengers: rand5,

convertible: convertible[rand6],

mileage: 0

};

return car;

}

function displayCar(car) {

console.log("Your new car is a " + car.year + " " + car.make + " " + car.model);

}

var carToSell = makeCar();

displayCar(carToSell);

</script>

</head>

</html>









The Auto-O-Matic is similar

to the Phrase-O-Matic from

Chapter 4, except that the

words are car properties,

and we're generating a new

car object instead of a

marketing phrase!

Check out what it

does and how it works.

196 Chapter 5

how auto-o-matic works

The Auto-O-Matic

Brought to you by the same guy who brought you the Phrase-O-Matic,

the Auto-O-matic creates knock-off cars all day long. That is, instead of

generating marketing messages, this code generates makes, models, years

and all the properties of a car object. . Let’s

take a closer look at how it works.

var makes = ["Chevy", "GM", "Fiat", "Webville Motors", "Tucker"];

var models = ["Cadillac", "500", "Bel-Air", "Taxi", "Torpedo"];

var years = [1955, 1957, 1948, 1954, 1961];

var colors = ["red", "blue", "tan", "yellow", "white"];

var convertible = [true, false];

var rand1 = Math.floor(Math.random() * makes.length);

var rand2 = Math.floor(Math.random() * models.length);

var rand3 = Math.floor(Math.random() * years.length);

var rand4 = Math.floor(Math.random() * colors.length);

var rand5 = Math.floor(Math.random() * 5) + 1;

var rand6 = Math.floor(Math.random() * 2);

1First, we have a makeCar function that we can call whenever we want to make

a new car. We’ve got four arrays with the makes, models, years and colors of

cars, and an array with true and false options for whether a car is a convertible.

We generate five random numbers so we can pick a make, a model, a year, a

color, and whether a car is a convertible randomly from these five arrays. And we

generate one more random number we’re using for the number of passengers.

We have several makes, models, years and

colors to choose from in these four arrays...

We’re going to combine

values from the arrays

randomly using these

four random numbers.

2Instead of creating a string by mixing and matching the various car properties, like

we did with Phrase-O-Matic, this time we’re creating a new object, car. This car has

all the properties you’d expect. We pick values for the make, model, year and color

properties from the arrays using the random numbers we created in step 1, and also add

the passengers, convertible and mileage properties:

We’ll use this random number for the

number of passengers. We’re adding 1

to the random number so we can have

at least one passenger in the car.

... and we’ll use this array to choose a convertible

property value, either true or false.

... and we’ll use this random number to choose

whether a car is convertible or not.

you are here 4 197

understanding objects

var car = {

make: makes[rand1],

model: models[rand2],

year: years[rand3],

color: colors[rand4],

passengers: rand5,

convertible: convertible[rand6],

mileage: 0

};

3The last statement in makeCar returns the new car object:

Returning an object from a function is just like returning any other value. Let’s

now look at the code that calls makeCar:

var carToSell = makeCar();



Don’t forget; what you’re

returning (and assigning to

the carToSell variable) is a

reference to a car object.

return car;

We’re creating a new car object, with property

values made from the values in the arrays.

We're also setting the number of passengers to

the random number we created, and setting the

convertible property to true or false using the

convertible array.

Finally, we're just setting the mileage property

to 0 (it is a new car, after all).

function displayCar(car) {

console.log("Your new car is a " + car.year + " " +

car.make + " " + car.model);

}

var carToSell = makeCar();

displayCar(carToSell);

First we call the makeCar function and assign the value it returns to

carToSell. We then pass the car object returned from makeCar

to the function displayCar, which simply displays a few of its

properties in the console.

JavaScript console

Your new car is a 1957 Fiat Taxi

Your new car is a 1961 Tucker 500

Your new car is a 1948 GM Torpedo

Here’s your new car! We think a ‘57

Fiat Taxi would be a cool car to have.

4Go ahead and load up the Auto-O-Matic in your browser (“autoomatic.html”) and

give it a whirl. You’ll find no shortage of new cars to generate, and remember there’s

a sucker born every minute.

Reload the page a

few times like we did!

198 Chapter 5

adding behavior

Oh Behave! Or, how to add behavior to your objects

var fiat = {

make: "Fiat",

model: "500",

year: 1957,

color: "Medium Blue",

passengers: 2,

convertible: false,

mileage: 88000,

drive: function() {

alert.log("Zoom zoom!");

}

};

fiat.drive();

You didn’t think objects were just for storing numbers and strings did you? Objects are active.

Objects can do things. Dogs don’t just sit there... they bark, run, and play catch, and a dog

object should too! Likewise, we drive cars, park them, put them in reverse and make them

brake. Given everything you’ve learned in this chapter, you’re all set to add behavior to your

objects. Here’s how we do that:

To call the drive function—excuse us—to call the drive method, you use dot notation again,

this time with the object name fiat and the property name drive, only we follow the

property name with parentheses (just like you would when you call any other function).

We use the dot notation to access

the function in fiat, just like we

would any other property. We say

we're “calling the drive method in

the fiat object”.

You can add a function directly

to an object like this.

And a bit of nomenclature: we typically refer

to functions inside an object as methods.

That is a common object-oriented term for

a function in an object.

Notice we don’t supply a name in the

function definition, we just use the function

keyword followed by the body. The name of

the function is the name of the property.

All you do is assign a function definition to a

property. Yup, properties can be functions too!

The result of calling the

fiat’s drive method.

you are here 4 199

understanding objects

Improving the drive method

var fiat = {

make: "Fiat",

model: "500",

year: 1957,

color: "Medium Blue",

passengers: 2,

convertible: false,

mileage: 88000,

started: false,

start: function() {

started = true;

stop: function() {

started = false;

drive: function() {

if (started) {

alert("Zoom zoom!");

} else {

alert("You need to start the engine first.");

}

};

Let’s make the fiat a little more car-like in behavior. Most cars can’t be driven

until the engine is started, right? How about we model that behavior? We’ll

need the following:

❏ A boolean property to hold the state of the car

(the engine is either on or off).

❏A couple of methods to start and stop the car.

❏A conditional check in the drive method to make

sure the car is started before we drive it.

We’ll begin by adding a boolean started property along with methods to start

and stop the car, then we’ll update the drive method to use the started property.

Here's the property to hold the current

state of the engine (true if it is started

and false if it is off).

And here's a method to start the car.

All it does (for now) is set the started

property to true.

And here's a method to stop the

car. All it does is set the started

property to false.

And here's where the interesting behavior happens: when you try to

drive the car, if it is started we get a “Zoom zoom!" and if not, we

get a warning that we should start the car first.

200 Chapter 5

encapsulating behavior

 



started





Good catch. You’re right; to start the car we could have

replaced the code:

with:

That would have saved us from writing a method to start the

car.

So why did we create and call the start method instead

of just changing the started property directly? Using

a method to change a property is another example

of encapsulation whereby we can often improve the

maintainability and extensibility of code by letting an object

worry about how it gets things done. It’s better to have a

start method that knows how to start the car than for

you to have to know “to start the car we need to take the

started variable and set it to true.”

Now you may still be saying “What’s the big deal? Why

not just set the property to true to start the car?!” Consider

a more complex start method that checks the seatbelts,

ensures there is enough fuel, checks the battery, checks the

engine temperature and so on, all before setting started to

true. You certainly don’t want to think about all that every

time you start the car. You just want a handy method to

call that gets the job done. By putting all those details into a

method, we’ve created a simple way for you to get an object

to do some work while letting the object worry about how it

gets that work done.

fiat.start();

fiat.started = true;

you are here 4 201

understanding objects

Take the fiat for a test drive

fiat.drive();

fiat.start();

fiat.drive();

fiat.stop();

First, we’ll try to drive the car, which should

give us a message to start the car. Then we’ll

start it for real, and we’ll drive it. Finally,

when we're done we'll stop the car.

Go ahead and load the page in your browser and let the road trip begin!

JavaScript console

ReferenceError: started is not defined

Uh oh, not so fast...

If you can’t drive your fiat, you’re not alone. In fact, find

your way to your JavaScript console and you’re likely to

see an error message similar to the one we got saying that

started is not defined.

So, what’s going on? Let’s listen in on the drive method

and see what’s happening as we try to drive the car with

fiat.drive():

drive: function() {

if (started) {

...

}









started













started















Let’s take our new and improved fiat object for a test drive. Let’s give it a good

testing—we’ll try to drive it before it’s started, and then start, drive and stop it. To

do that make sure you have the code for the fiat object typed into a simple HTML

page (“carWithDrive.html”), including the new methods start, stop and drive,

and then add this code below the object:

202 Chapter 5

the this keyword

Here’s the conundrum: we’ve got references to the property started in the

fiat object’s methods, and normally when we’re trying to resolve a variable

in a function, that variable turns out to be a local variable, a parameter of the

function or a global variable. But in the drive method, started is none of

those things; instead, it’s a  of the fiat object.

Shouldn’t this code just work, though? In other words, we wrote started in

the fiat object; shouldn’t JavaScript be smart enough to figure out we mean

the started property?

Nope. As you can see it isn’t. How can that be?

Okay, here’s the deal: what looks like a variable in the method is really a

property of the object, but we aren’t telling JavaScript which object. You

might say to yourself, “Well, obviously we mean THIS object, this one right

here! How could there be any confusion about that?” And, yes, we want the

property of this very object. In fact, there’s a keyword in JavaScript named

this, and that is exactly how you tell JavaScript you mean .

So, let’s add the this keyword and get this code working:

Why doesn’t the drive method know

about the started property?





started



var fiat = {

make: "Fiat",

// other properties are here, we're just saving space

started: false,

start: function() {

this.started = true;

stop: function() {

this.started = false;

drive: function() {

if (this.started) {

alert("Zoom zoom!");

} else {

alert("You need to start the engine first.");

}

};

Use this along with dot notation

before each occurrence of the

started property to tell the

JavaScript interpreter you mean

the property of THIS very object,

rather than having JavaScript

think you're referring to a variable.

drive: function() {

if (started) {

...

}

you are here 4 203

understanding objects

Go ahead and update your code, and

take it for a spin! Here’s what we got:

A test drive with “this”

Below, you’ll find JavaScript code with some mistakes in it. Your job is to

play like you’re the browser and find the errors in the code. After you’ve

done the exercise look at the end of the chapter to see if you

found them all.

BE the Browser

var song = {

artist: "Run-D.M.C.",

minutes: 4,

seconds: 3,

genre: "80s",

playing: false,

play: function() {

if (!playing) {

this = true;

console.log("Playing "

+ name + " by " + artist);

}

pause: function() {

if (playing) {

this.playing = false;

}

};

this.play();

this.pause();

Go ahead and mark up the code

right here...

204 Chapter 5

understanding this

How this works

make: "Fiat"

model: "500"

... more properties here...

started: false

start: function() {

this.started = true;

}

stop: function() { ... }

drive: function() {

... }

You can think of this like a variable that is assigned to the object

whose method was just called. In other words, if you call the fiat

object’s start method, with fiat.start(), and use this in the

body of the start method, then this will refer to the fiat object.

Let’s look more closely at what happens when we call the start

method of the fiat object.

start: function() {

this.started = true;

}

Here’s the fiat object with all

its property names and values,

including the start method.

Whenever we call a method in an object, this will refer to

that object. So here, this refers to the fiat object.



fiat.start();

First, we have an object representing the Fiat car, which is assigned to

the fiat variable:

Then, when we call the start method, JavaScript takes care of

assigning this to the fiat object.

The real key to understanding this is that whenever a method is called,

in the body of that method you can count on this to be assigned to

the . Just to drive the point home, let’s try it

on a few other objects…

In this case, this refers to the

fiat object, because we called

the fiat object's start method.

this

you are here 4 205

understanding objects

var eightBall = { index: 0,

advice: ["yes", "no", "maybe", "not a chance"],

shake: function() {

this.index = ________.index + 1;

if (_________.index >= _________.advice.length) {

_________.index = 0;

}

look: function() {

return _________.advice[_________.index];

}

};

eightBall.shake();

console.log(eightBall.look());

make: "Chevy"

model: "Bel Air"

... more properties here...

started: false

start: function() {

this.started = true;

}

stop: function() { ... }

drive: function() {

... }

start: function() {

this.started = true;

}

chevy.start();

If you call the chevy object’s start method, then this will refer to

the chevy object in the body of the method.

And, in the start method of the taxi object, this refers to the taxi.

taxi.start();

start: function() {

this.started = true;

}

make: "Webville..."

model: "Taxi"

... more properties here ...

started: false

start: function() {

this.started = true;

}

stop: function() { ... }

drive: function() {...}

Use your new this skills to help us finish this code. Check your answer at the

end of the chapter.

JavaScript console

maybe

not a chance

Repeat this sequence several times to

test your code.

206 Chapter 5

questions about functions





Answer: Nothing! this refers to “this object,” the one whose method we’re calling.

Q: What’s the difference between a

method and a function?

A: A method is just a function that’s been

assigned to a property name in an object.

You call functions using the function name,

while you call methods using the object dot

notation and the name of the property. You

can also use the keyword this in a method to

refer to the object whose method was called.

Q: I noticed that when using the

function keyword within an object we

don’t give the function an explicit name.

What happened to the function name?

A: Right. To call methods, we use the

property name in the object rather than

explicitly naming the function, and using

that name. For now, just take this as the

convention we use, but later in the book we’ll

dive into the topic of anonymous functions

(which is what you call functions that don’t

explicitly have names).

Q: Can methods have local variables,

like functions can?

A: Yes. A method is a function. We just

call it a method because it lives inside an

object. So, a method can do anything a

function can do precisely because a method

is a function.

Q: So, you can return values from

methods too?

A: Yes. What we said in the last answer!

Q: What about passing arguments to

methods? Can we do that too?

A: Err, maybe you didn’t read the answer

two questions back? Yes!

Q: Can I add a method to an object

after it’s created like I can with a

property?

A: Yes. Think of a method as a function

assigned to a property, so you can add a

new one at any time:

// add a turbo method

car.engageTurbo =

function() { ... };

Q: If I add a method like engageTurbo

above, will the this keyword still work?

A: Yes. Remember this is assigned to

the object whose method is called at the

time it is called.

Q: When is the value of this set to

the object? When we define the object, or

when we call the method?

A: The value of this is set to the object

when you call the method. So when you call

fiat.start(), this is set to fiat, and when you

call chevy.start(), this is set to chevy. It

looks like this is set when you define the

object, because in fiat.start, this is always

set to fiat, and in chevy.start, this is always

set to chevy. But as you’ll see later, there is

a good reason the value of this is set when

you call the method and not when you define

the object. This is an important point we’ll be

coming back to a few different times.

you are here 4 207

understanding objects

It’s time to get the whole fleet up and running. Add the drive method to each car object. When

you’ve done that, add the code to start, drive and stop each of them. Check your answer at the

end of the chapter.

var chevy = {

make: "Chevy",

model: "Bel Air",

year: 1957,

color: "red",

passengers: 2,

convertible: false,

mileage: 1021

};

var cadi = {

make: "GM",

model: "Cadillac",

year: 1955,

color: "tan",

passengers: 5,

convertible: false,

mileage: 12892

};

var taxi = {

make: "Webville Motors",

model: "Taxi",

year: 1955,

color: "yellow",

passengers: 4,

convertible: false,

mileage: 281341

};

started: false,

start: function() {

this.started = true;

stop: function() {

this.started = false;

drive: function() {

if (this.started) {

alert(this.make + " " +

this.model + " goes zoom zoom!");

} else {

alert("You need to start the engine first.");

}

cadi.start();

cadi.drive();

cadi.stop();

chevy.start();

chevy.drive();

chevy.stop();

taxi.start();

taxi.drive();

taxi.stop();

Add the started property and the

methods to each car. Then use the

code below to give them a test drive.

Throw this code

after the car object

definitions to give

them all a test drive.

Don’t forget to add a

comma after mileage when

you add the new properties!

We improved the drive

method just a bit so make

sure you get this new code.

208 Chapter 5

avoiding code duplication

Ah, good eye.

Ye s , when we copy start, stop and drive into each

car object we’re definitely duplicating code. Unlike the

other properties, which have values that depend on

which car object they’re in, the methods are the same for

all of the objects.

Now if you’re saying “Great, we’re reusing code!”... not

so fast. Sure, we’re reusing it, but we’re doing that by

copying it, not just once, but many times! What happens

now if we want drive to work differently? Then you’ve

got to redo the code in every single car. Not good. Not

only is that a waste, it can be error prone.

But you’re identifying a problem even larger than simple

copying and pasting; we’re assuming that just because

we put the same properties in all our objects, that makes

them all car objects. What if you accidentally leave out

the mileage property from one of the objects—is it still

a car?

These are all real problems with our code so far, and

we’re going to tackle all these questions in an upcoming

chapter on advanced objects where we’ll talk about some

techniques for properly reusing the code in your objects.









you are here 4 209

understanding objects







One thing you can do is iterate through

an object’s properties. To do that you can use

a form of iteration we haven’t seen yet called for in.

The for in iterator steps through every property in

an object in an arbitrary order. Here’s how you could

display all the properties of the chevy object:

for (var prop in chevy) {

console.log(prop + ": " + chevy[prop]);

}

for in steps through the object's

properties one at time, assigning each

one in turn to the variable prop.

You can use prop as a way to access the

property using bracket notation.

This brings up another topic: there’s another way to

access properties. Did you catch the alternative syntax we just used to

access the properties of the chevy object? As it turns out, you’ve got two options

when accessing a property of an object. You already know dot notation:

chevy.color

But there’s another way: bracket notation, which looks like this:

chevy["color"]

The thing to know about both of these forms, is they are equivalent and do the same thing. The only difference

you need to know about is the bracket notation sometimes allows a little more flexibility because you can make the

property name an expression like this:

We just use the object name followed by a

dot and a property name.

Here we use the object name followed by brackets

that enclose a property name in quotes.

chevy["co" + "lor"]

As long as the expression evaluates to a property

name represented by a string, you can put any

expression you want inside the backets.

JavaScript console

make: Chevy

model: Bel Air

year: 1957

color: red

passengers: 2

convertible: false

mileage: 1021

Looks a bit like how we

access array items.

210 Chapter 5

behavior and state

var fiat = {

make: "Fiat",

model: "500",

// other properties go here, we're saving some paper...

started: false,

fuel: 0,

start: function() {

this.started = true;

stop: function() {

this.started = false;

drive: function() {

if (this.started) {

alert(this.make + " " + this.model + " goes zoom zoom!");

} else {

alert("You need to start the engine first.");

}

addFuel: function(amount) {

this.fuel = this.fuel + amount;

}

};

How behavior affects state...

Adding some Gas-o-line

Objects contain state and . An object’s properties allow us to keep state about the

object—like its fuel level, its current temperature or, say, the current song that is playing

on the radio. An object’s methods allow us to have behavior—like starting a car, turning

up the heat or fast-forwarding the playback of a song. Have you also noticed these two

interact? Like, we can’t start a car if it doesn’t have fuel, and the amount of fuel should

get reduced as we drive the car. Kinda like real life, right?

Let’s play with this concept a little more by giving our car some fuel, and then we can

start to add interesting behavior. To add fuel, we’ll add a new property, fuel, and a new

method, addFuel. The addFuel method will have a parameter, amount, which we’ll

use to increase the amount of fuel in the fuel property. So, add these properties to the

fiat object:

We’ve added a new property, fuel, to hold

the amount of fuel in the car. The car

will begin life on empty.

Let’s also add a method, addFuel, to add fuel to the

car. We can add as much fuel as we like by specifying

the amount when we call the method.

Remember, fuel is an object property,

so we need the this keyword...

But amount is a function parameter,

so we don’t need this to use it.

you are here 4 211

understanding objects

var fiat = {

// other properties and methods here...

drive: function() {

if (this.started) {

if (this.fuel > 0) {

alert(this.make + " " +

this.model + " goes zoom zoom!");

this.fuel = this.fuel - 1;

} else {

alert("Uh oh, out of fuel.");

this.stop();

}

} else {

alert("You need to start the engine first.");

}

addFuel: function(amount) {

this.fuel = this.fuel + amount;

}

};

Go ahead and update your code, and take it for a spin!

Here’s what we got with the following test code:

Gas up for a test drive

Now let’s affect the behavior with the state

So now that we have fuel, we can start to implement some interesting behaviors. For

instance, if there’s no fuel, we shouldn’t be able to drive the car! So, let’s start by tweaking

the drive method a bit to check the fuel level to make sure we’ve got some, and then we’ll

subtract one from fuel each time the car is driven. Here’s the code to do that:

Now we can check to make sure there’s

fuel before we drive the car. And, if we

can drive the car, we should reduce the

amount of fuel left each time we drive.

If there’s no fuel left, we display a

message and stop the engine. To drive

the car again, you’ll have to add fuel

and restart the car.

fiat.start();

fiat.drive();

fiat.addFuel(2);

fiat.start();

fiat.drive();

fiat.stop();

First, we tried to drive it with no

fuel, so then we added some fuel

and drove it until we ran out of

fuel again! Try adding your own

test code and make sure it works

like you think it should.

212 Chapter 5

exercise in integrating fuel

We still have some more work to do to fully integrate the fuel property into the car. For instance,

should you be able to start the car if there’s no fuel? Check out the start method:

It certainly looks like we can.

Help us integrate the fuel property into this code by checking the fuel level before the car is

started. If there’s no fuel, and the start method is called, let the driver know with a handy alert,

like "The car is on empty, fill up before starting!" Rewrite your start method

below, and then add it to your code and test it. Check your answer at the end of the chapter

before you go on.

start: function() {

this.started = true;

}







Your code

here.

you are here 4 213

understanding objects

You’ve made it through the ﬁrst objects chapter and you’re ready to move forward.

Remember how you began with JavaScript? You were thinking of the world in

terms of low-level numbers and strings and statements and conditionals and for

loops and so on. Look how far you’ve come. You’re starting to think at a higher

level, and in terms of objects and methods. Just look at this code:







Congrats on your first objects!

fiat.addFuel(2);

fiat.start();

fiat.drive();

fiat.stop();

It’s so much easier to understand what’s going on in this code, because it describes

the world as a set of objects with state and behavior.

And this is just the beginning. You can take it so much further, and we will. Now

that you know about objects we’re going to keep developing your skills to write

truly object-oriented code using even more features of JavaScript and quite a few

best practices (which become oh-so-important with objects).

There’s one more thing you should know, before you leave this chapter…

214 Chapter 5

even more objects

Console

Math

Window

Document

Date

You’ve already seen how to use the Math

object to generate random numbers. It

can do a lot more than that!

Use the Date object to

manipulate dates and times.

All these objects are

provided with JavaScript. You’ll find all these objects provided

by your browser. They’re the key to

writing browser-based apps!

You’ve been using the

console object’s log

method to display

messages in the console.

Window provides

some key browser-

related properties

and methods your

code can use.

Now that you know a bit about objects, a whole new world is going to open up for you because

JavaScript provides you with lots of objects (for doing math computations, manipulating strings

and creating dates and times, to name a few) that you can use in your own code. JavaScript also

provides some really key objects that you need to write code for the browser (and we’re going to

take a look at one of those objects in the next chapter). For now, take a second to get acquainted

with a few more of these objects, and we’ll touch on these throughout the rest of the book:

Guess what? There are objects all around you!

(and they’ll make your life easier)

We’ll be using the document

object in the next chapter

to write to your web page

from your code.

RegExp JSON

With JSON you can

exchange JavaScript objects

with other applications.

This object

lets you find

patterns in

strings.

you are here 4 215

understanding objects

Head First: Welcome Object, it’s been a fascinating chapter.

It’s a real head-spinner thinking about code as objects.

Object: Oh, well… we’ve only just begun.

Head First: How so?

Object: An object is a set of properties, right? Some of those

properties are used to keep the state of the object, and some

are actually functions—or rather, methods—that give an object

behavior.

Head First: I’m with you so far. I hadn’t actually thought

about the methods being properties too, but I guess they are just

another name and value, if you can call a function a value?

Object: Oh you can! Believe me, you can. In fact, that’s a huge

insight, whether you realize it or not. Hold on to that thought;

I’m guessing there’s a lot in store for you on that topic.

Head First: But you were saying…

Object: So, you’ve looked at these objects with their properties

and you’ve created lots of them, like a bunch of different types

of cars.

Head First: Right…

Object: But it was very ad hoc. The real power comes when

you can create a template of sorts, something that can basically

stamp out uniform objects for you.

Head First: Oh, you mean objects that all have the same type?

Object: Sort of… as you’ll see the concept of type is an

interesting one in JavaScript. But you’re on the right track. You’ll

see that you have real power when you can start to write code

that deals with objects of the same kind. Like you could write

code that deals with vehicles and you wouldn’t have to care if

they are bicycles, cars or buses. That’s power.

Head First: It certainly sounds interesting. What else do we

need to know to do that?

Object: Well, you have to understand objects a little better, and

you need a way to create objects of the same kind.

Head First: We just did that, didn’t we? All those cars?

Object: They’re sort of the same kind by convention, because

you happened to write code that creates cars that look alike. In

other words, they have the same properties and methods.

Head First: Right, and in fact we talked a little about how

we are replicating code across all those objects, which is not

necessarily a good thing in terms of maintaining that code.

Object: The next step is to learn how to create objects that

really are all guaranteed to be the same, and that make use of

the same code—code that’s all in one place. That’s getting into

how to design object-oriented code. And you’re pretty much

ready for that now that you know the basics.

Head First: I’m sure our readers are happy to hear that!

Object: But there are a few more things about objects to be

aware of.

Head First: Oh?

Object: There are many objects already out there in the wild

that you can use in your code.

Head First: Oh? I hadn’t noticed, where?

Object: How about console.log. What do you think

console is?

Head First: Based on this discussion, I’m guessing it’s an

object?

Object: BINGO. And log?

Head First: A property… err, a method?

Object: BINGO again. And what about alert?

Head First: I haven’t a clue.

Object: It has to do with an object, but we’ll save that for a bit

later.

Head First: Well, you’ve certainly given us a lot to think about

Object, and I’m hoping you’ll join us again.

Object: I’m sure we can make that work.

Head First: Great! Until next time then.

The Object Exposed

This week’s interview:

In Object’s own words...

216 Chapter 5

In his quest for world domination, Dr. Evel has accidentally exposed an internal web page with the



as soon as Dr. Evel discovered the page was live on the Internet, he quickly took it down. Luckily, our

agents made a record of the page. The only problem is, our agents don’t know HTML or JavaScript.



could be quite costly to Queen and Country.

Crack the Code Challenge

<!doctype html>

<head>

<title>Dr. Evel's Secret Code Page</title>

</head>

<body>

<p id="code1">The eagle is in the</p>

<p id="code3">snuck into the garden last night.</p>

<p id="code4">They said it would rain</p>

<p id="code5">Does the red robin crow at</p>

<p id="code6">Where can I find Mr.</p>

<p id="code7">I told the boys to bring tea and</p>

<p id="code8">Where's my dough? The cake won't</p>

<p id="code9">My watch stopped at</p>

<p id="code10">barking, can't fly without umbrella.</p>

<p id="code11">The green canary flies at</p>

<p id="code12">The oyster owns a fine</p>

</body>

</html>

Here’s the JavaScript.

Top Secret

var access =

document.getElementById("code9");

var code = access.innerHTML;

code = code + " midnight";

alert(code);

What pass code will

you see in the alert?

Write your answer in the

alert dialog box below.

Here’s the HTML.

The above JavaScript code

is being included here.

Looks like this code is using

a document object.

you are here 4 217

understanding objects

An object is a collection of properties.

To access a property, use dot notation: the

name of the variable containing the object,

then a period, then the name of the property.

You can add new properties to an object

at any time, by assigning a value to a new

property name.

You can also delete properties from objects,

using the delete operator.

Unlike variables that contain primitive

values, like strings, numbers, and booleans,

a variable can’t actually contain an object.

Instead, it contains a reference to an object.

We say that objects are “reference variables”.

When you pass an object to a function, the

function gets a copy of the reference to the

object, not a copy of the object itself. So, if

you change the value of one of the object’s

properties, it changes the value in the original

object.

Object properties can contain functions.

When a function is in an object, we call it a

method.

You call a method by using the dot

notation: the object name, a period, and the

property name of the method, followed by

parentheses.

A method is just like a function except that it

is in an object.

You can pass arguments to methods, just like

you can to regular functions.

When you call an object’s method, the

keyword this refers to the object whose

method you are calling.

To access an object’s properties in an

object’s method, you must use dot notation,

with this in place of the object’s name.

In object-oriented programming, we think in

terms of objects rather than procedures.

An object has both state and behavior. State

can affect behavior, and behavior can affect

state.

Objects encapsulate, or hide, the complexity

of the state and behavior in that object.

A well-designed object has methods that

abstract the details of how to get work done

with the object, so you don’t have to worry

about it.

Along with the objects you create, JavaScript

has many built-in objects that you can use.

We’ll be using many of these built-in objects

throughout the rest of the book.

If you skipped the last page, go back and do the

challenge. It is vitally important to Chapter Six!

<!doctype html>

<html>

<head>

<title>Dr. Evel's Secret Code Page</title>

</head>

<body>

<p id="code1">The eagle is in the</p>

<p id="code3">snuck into the garden last night.</p>

<p id="code4">They said it would rain</p>

<p id="code5">Does the red robin crow at</p>

<p id="code6">Where can I find Mr.</p>

<p id="code7">I told the boys to bring tea and</p>

<p id="code8">Where's my dough? The cake won't</p>

<p id="code9">My watch stopped at</p>

<p id="code10">barking, can't fly without umbrella.</p>

<p id="code11">The green canary flies at</p>

<p id="code12">The oyster owns a fine</p>

</body>

</html>

Here’s the JavaScript.

Top Secret

var access =

document.getElementById("code9");

var code = access.innerHTML;

code = code + " midnight";

alert(code);

What pass code

will you see in

the alert?

Write your answer

in the alert dialog

box below.

Here’s the HTML.

The above JavaScript

code is being

included here.

Looks like this code is using

a document object.

218 Chapter 5

javascript crossword

JavaScript cross

How about a crossword object? It’s got lots of clue

properties that will help objects stick in your brain.

2 3 4 5

10 11 12

Across Down

ACROSS



6. The method log is a property in the _________ object.

8. this



notation.







a car object.





DOWN



______ to access the started property.







contains a _______ to the object.





separated by a _____.



except the last one.



behavior.

you are here 4 219

understanding objects

,,,,,,,` We’ve started making a table of property names and values for a car. Can you

help complete it? Here’s our solution:

{

__________ : ______________,

__________ : ______________

};

model

make “Chevy”

Put your answers here.

Feel free to expand

the list to include

your own properties.

Put your property

names here.

And put the corresponding

values over here.

year

color

passengers

convertible

mileage

“Bel Air”

1957

false

We’re using strings,

booleans and numbers

where appropriate.

“red”

accessories “Fuzzy Dice”

whitewalls true

1021

var eightBall = { index: 0,

advice: ["yes", "no", "maybe", "not a chance"],

shake: function() {

this.index = this.index + 1;

if (this.index >= this.advice.length) {

this.index = 0;

}

look: function() {

return this.advice[this.index];

}

};

eightBall.shake();

console.log(eightBall.look());

Use your new this skills to help us finish this code. Here’s our solution.

JavaScript console

maybe

not a chance

Repeat this sequence several times to

test your code.

220 Chapter 5

exercise solution

Its mileage is 12,892.

You don’t have to be stuck with just one object. The real power of objects (as you’ll see soon

enough) is having lots of objects and writing code that can operate on whatever object you give

it. Try your hand at creating another object from scratch… another car object. Go ahead and

work out the code for your second object. Here’s our solution.

var cadi = {

make: "GM",

model: "Cadillac",

year: 1955,

color: "tan",

passengers: 5,

convertible: false,

mileage: 12892

};

Here are the

properties for the

Cadillac.

This is a 1955 GM Cadillac.

We’ll call this a tan color.

It’s not a convertible,

and it can hold five

passengers (It’s got a

nice big bucket seat in

the back).

you are here 4 221

understanding objects

The dog

object.

var dog = {

_________: 20.2

age: ________

________: "mixed",

activity: ____________

};

var bark;

if (_____________ > 20) {

bark = "WOOF WOOF";

} else {

bark = "woof woof";

}

var speak = __________ + " says " + ________ + " when he wants to " + ______________;

console.log(speak);

weight: 20.2

age: 4

breed: "mixed"

activity: "fetch balls"

Object Magnets Solution

Practice your object creating and dot notation skills by completing

the code below with the fridge magnets. Be careful, some extra

magnets got mixed in! Here's our solution.

dog.weight

dog.bark

bark

dog.name

dog.activity

Fido

age

breed

"fetch balls"

20.2

weight

Leftover magnets

Fido is hoping you get

all his properties right.

"Fido"

222 Chapter 5

exercise solution

Your turn. Here are three more car objects; what is the result of passing

each car to the prequal function? Work the answer by hand, and then

write the code to check your answers. Here’s our solution:

var cadi = {

make: "GM",

model: "Cadillac",

year: 1955,

color: "tan",

passengers: 5,

convertible: false,

mileage: 12892

};

prequal(cadi);

var chevy = {

make: "Chevy",

model: "Bel Air",

year: 1957,

color: "red",

passengers: 2,

convertible: false,

mileage: 1021

};

prequal(chevy);

var fiat = {

make: "Fiat",

model: "500",

year: 1957,

color: "Medium Blue",

passengers: 2,

convertible: false,

mileage: 88000

};

prequal(fiat);

Write the

value of

prequal here.

false false

true

you are here 4 223

understanding objects

function getSecret(file, secretPassword) {

_______.opened = _______.opened + 1;

if (secretPassword == _______.password) {

return ______.contents;

}

else {

return "Invalid password! No secret for you.";

}

function setSecret(file, secretPassword, secret) {

if (secretPassword == _______.password) {

______.opened = 0;

______.contents = secret;

}

var superSecretFile = {

level: "classified",

opened: 0,

password: 2,

contents: "Dr. Evel's next meeting is in Detroit."

};

var secret = getSecret(_______________, _____);

console.log(secret);

setSecret(_________________, _____, "Dr. Evel's next meeting is in Philadelphia.");

secret = getSecret(_______________, _____);

console.log(secret);

file file file

file

superSecretFile 2

superSecretFile 2 2superSecretFile

The superSecretFile object is passed into

the getSecret function, and gets the

parameter name file. So we need to make

sure we use the object name, file and dot

notation to access the object's properties,

like opened, and password.

Same here.

We can pass the supserSecretFile

object to the getSecret and

setSecret functions.

You’ve been given a super secret file and two functions that allow access to get and

set the contents of the file, but only if you have the right password. The first function,

getSecret, returns the contents of the file if the password is correct, and logs each

attempt to access the file. The second function, setSecret, updates the contents of

the file, and resets the access tracking back to 0. It’s your job to fill in the blanks below

to complete the JavaScript, and test your functions. Here’s our solution.

224 Chapter 5

exercise solution

var song = {

artist: "Run-D.M.C.",

minutes: 4,

seconds: 3,

genre: "80s",

playing: false,

play: function() {

if (!this.playing) {

this.playing = true;

console.log("Playing "

+ this.name + " by " + this.artist);

}

pause: function() {

if (this.playing) {

this.playing = false;

}

};

this song.play();

this song.pause();

Below, you’ll find JavaScript code

with some mistakes in it. Your job

is to play like you’re the

browser and find the

errors in the code. Here’s

our solution.

BE the Browser Solution

We were missing a this here.

And missing the playing

property name here.

We need to use this to access

both these properties, too.

Again here, we need this to access the playing property.

We don't use this outside of a method; we call

an object using the object’s variable name.

you are here 4 225

understanding objects

It’s time to get the whole fleet up and running. Add the drive method to each car object. When

you’ve done that, add the code to start, drive and stop each of them. Here’s our solution.

var cadi = {

make: "GM",

model: "Cadillac",

year: 1955,

color: "tan",

passengers: 5,

convertible: false,

mileage: 12892,

started: false,

start: function() {

this.started = true;

stop: function() {

this.started = false;

drive: function() {

if (this.started) {

alert(this.make + " " +

this.model + " goes zoom zoom!");

} else {

alert("You need to start the engine first.");

}

};

var chevy = {

make: "Chevy",

model: "Bel Air",

year: 1957,

color: "red",

passengers: 2,

convertible: false,

mileage: 1021,

started: false,

start: function() {

this.started = true;

stop: function() {

this.started = false;

drive: function() {

if (this.started) {

alert(this.make + " " +

this.model + " goes zoom zoom!");

} else {

alert("You need to start the engine first.");

}

};

var taxi = {

make: "Webville Motors",

model: "Taxi",

year: 1955,

color: "yellow",

passengers: 4,

convertible: false,

mileage: 281341,

started: false,

start: function() {

this.started = true;

stop: function() {

this.started = false;

drive: function() {

if (this.started) {

alert(this.make + " " +

this.model + " goes zoom zoom!");

} else {

alert("You need to start the engine first.");

}

};

cadi.start();

cadi.drive();

cadi.stop();

chevy.start();

chevy.drive();

chevy.stop();

taxi.start();

taxi.drive();

taxi.stop();

Make sure you add a

comma after any new

properties you add.

We copied and pasted the

code into each object, so

every car has the same

properties and methods.

Now we can start, drive

and stop each of the

cars, using the same

method names.

226 Chapter 5

exercise solution

var fiat = {

make: "Fiat",

model: "500",

year: 1957,

color: "Medium Blue",

passengers: 2,

convertible: false,

mileage: 88000,

fuel: 0,

started: false,

start: function() {

if (this.fuel == 0) {

alert("The car is on empty, fill up before starting!");

} else {

this.started = true;

}

stop: function() {

this.started = false;

drive: function() {

if (this.started) {

if (this.fuel > 0) {

alert(this.make + " " +

this.model + " goes zoom zoom!");

this.fuel = this.fuel - 1;

} else {

alert("Uh oh, out of fuel.");

this.stop();

}

} else {

alert("You need to start the engine first.");

}

addFuel: function(amount) {

this.fuel = this.fuel + amount;

}

};

We still have some more work to do to fully integrate the fuel property into the car. For instance,

should you really be able to start the car if there’s no fuel? Help us integrate the fuel property

into this code by checking the fuel level before the car is started. If there’s no fuel, and the start

method is called, let the driver know with a handy alert, like "The car is on empty, fill

up before starting!" Rewrite the start method below, and then add it to your code and

test it. Check your answer at the end of the chapter before you go on. Here’s our solution.

you are here 4 227

understanding objects

JavaScript cross Solution

How about a crossword object? It’s got lots of clue

properties that will help objects stick in your brain.

2E A 3I O R

45I

A E C

6O N S O L E

L F C

U8E Y O R D

9E R L

10 O T M

11 E T O D S

M N N T

M C M

13 A E

14 D D F U E L T

this is a new chapter 229

interacting with your web page

Getting to know the DOM

You’ve come a long way with JavaScript. 

from a newbie to a scripter to, well, a programmer





to be able to write pages that are dynamic, pages that react, that respond, that



DOM, otherwise known as the document object model. In















230 Chapter 6

reviewing the crack the code challenge

<!doctype html>

<head>

<title>Dr. Evel's Secret Code Page</title>

</head>

<body>

<p id="code1">The eagle is in the</p>

<p id="code3">snuck into the garden last night.</p>

<p id="code4">They said it would rain</p>

<p id="code5">Does the red robin crow at</p>

<p id="code6">Where can I find Mr.</p>

<p id="code7">I told the boys to bring tea and</p>

<p id="code8">Where's my dough? The cake won't</p>

<p id="code9">My watch stopped at</p>

<p id="code10">barking, can't fly without umbrella.</p>

<p id="code11">The green canary flies at</p>

<p id="code12">The oyster owns a fine</p>

</body>

</html>

Yo u were given some HTML with code in an external file, captured from

Dr. Evel’s web site, that looked like this:

In our last chapter, we left you with a little

challenge. The “crack the code challenge.”

Here’s the

JavaScript....

var access =

document.getElementById("code9");

var code = access.innerHTML;

code = code + " midnight";

alert(code);

And you needed to figure out Dr. Evel’s passcode using your deductive

powers on this code.

Notice that each paragraph

is identified by an id.

Here’s the HTML.

document is a global object.

And getElementById is a method.

And look, we have

dot notation,

this looks like

an object with

an innerHTML

property.

Make sure you get the case right

on the letters in the method name

getElementById, otherwise it

won’t work!

you are here 4 231

interacting with your web page

So what does the code do?

var access =

document.getElementById("code9");

var code = access.innerHTML;

code = code + " midnight";

alert(code);



innerHTML

code

Let’s walk through this code to see how Dr Evel is generating his passcodes. After we break

down each step you’ll start to see how this all works:



code

code

<p id="code9">My watch stopped at</p>

Get the element that has

an id of “code9”. That

would be this element...

var access =

document.getElementById("code9");

var code = access.innerHTML;

code = code + " midnight";

alert(code);

The element with id “code9” is a

paragraph element and that element’s

content (or rather its “innerHTML”) is

the text “My watch stopped at”.

var access =

document.getElementById("code9");

var code = access.innerHTML;

code = code + " midnight";

alert(code);

So we add “ midnight” to “My watch

stopped at” to get “My watch stopped

at midnight” and then put up an alert

to display this code.

accessdocument

getElementById

We'll learn all about

document and element

objects in this chapter.

232 Chapter 6

how the crack the code challenge works

So, what did we just do? Well, we had some JavaScript that reached into the

page (otherwise known as the ), grabbed an element (the one with

the id equal to "code9"), took that element’s content (which is "My watch

stopped at"), slapped a " midnight" on the end, and then displayed the

result as a passcode.

A quick recap

The eagle is in the

The fox is in the

snuck into the garden last night.

They said it would rain

Does the red robin crow at

Where can I find Mr.

I told the boys to bring tea and

Where's my dough? The cake won't

My watch stopped at

barking, can't fly without umbrella.

The green canary flies at

The oyster owns a fine

Dr. Evel’s page contains all the possible

passcodes, each in a paragraph element

labeled with an HTML id.

Behind the scenes JavaScript grabs

the element with the id="code9"

And takes the content of that

element, adds " midnight" to it,

and displays an alert.

"My watch stopped at" + " midnight"

The Browser

<p id="code9">My watch stopped at</p>

Now, more power to Dr. Evel and his JavaScript skills, and we wish him the best

in his security schemes, but what is important here is to notice that the web page

is a living, breathing that your JavaScript can interact with—you can

access and read the content of the elements in your page. You can also go the

other way, and use JavaScript to change the content or structure of your page.

To do all that, let’s step back for a moment and understand better how JavaScript

and HTML work together.

you are here 4 233

interacting with your web page

How JavaScript really interacts with your page

JavaScript and HTML are . HTML is markup and JavaScript is code.

So how do they interact? It all happens through a representation of your page, called

the , or the DOM for short. Where does the DOM come from? It’s

created when the browser loads your page. Here’s how:

We call this the

Document Object Model...





 



 



Your browser

When you load a page into the

browser, not only does the browser

parse the HTML and then render it

to the display, it also creates a set of

objects that represent your markup.

These objects are stored in the DOM.

Your JavaScript can interact with the

DOM to get access to the elements

and the content in them. JavaScript

can also use the DOM to create or

remove elements.

...or DOM, for short.

2When JavaScript

modifies the DOM, the

browser updates the

page dynamically, so

you see new content on

your page.

234 Chapter 6

making a dom

Ingredients

One well-formed HTML5 page

One modern web browser, pre-heated and

ready to go

Instructions

1. Start by creating a document node at the top.

2. Next, take the top level element of your HTML

page, in our case the <html> element, call it

the current element and add it as a child of the

document.

3. For each element nested in the current element,

add that element as a child of the current

element in the DOM.

4. Return to (3) for each element you just added,

and repeat until you are out of elements.

How to bake your very own DOM

Let’s take some markup and create a DOM for it. Here’s a simple

recipe for doing that:

<!doctype html>

<head>

</head>

<body>

<h2>Great day bird watching</h2>

<p>

Today I saw three ducks!

I named them

Huey, Louie, and Dewey.

</p>

<p>

I took a couple of photos...

</p>

</div>

</body>

</html>







 



We’ve already fully

baked this DOM for you.



the next page.

you are here 4 235

interacting with your web page

document is always at the top.

document is a special part of

the tree that you can use in

JavaScript to get access to the

entire DOM.

These are like the

branches of the tree.

These are like the leaves

of the tree (because there

are no elements inside them,

just text).





 





 

  

document is also like the root

of an upside down tree.





















The DOM includes the content of the page as well as the

elements. (We don’t always show all the text content when

we draw the DOM, but it’s there).





A first taste of the DOM

If you follow the recipe for creating a DOM you’ll end up with a structure like

the one below. Every DOM has a document object at the top and then a tree

complete with branches and leaf nodes for each element in the HTML markup.

Let’s take a closer look.







We compare this structure to a

tree because a “tree” is a data

structure that comes from

computer science, and because

it looks like an upside down

tree, with the root at the top

and the leaves at the bottom.

236 Chapter 6

exercise for making a dom

<!doctype html>

<head>

<title>Movies</title>

</head>

<body>

<h1>Movie Showtimes</h1>

<h2 id="movie1">Plan 9 from Outer Space</h2>

<p>Playing at 3:00pm, 7:00pm.

<span>

Special showing tonight at <em>midnight</em>!

</span>

</p>

<h2 id="movie2">Forbidden Planet</h2>

<p>Playing at 5:00pm, 9:00pm.</p>

</body>

</html>

Your job is to act like

you’re the browser. You

need to parse the HTML

and build your very own

DOM from it. Go ahead

and parse the HTML to

the right, and draw your

DOM below. We’ve already

started it for you.

BE the Browser

Draw your DOM here.





Check your answer with

our solution at the end

of the chapter before

you go on.

you are here 4 237

interacting with your web page

Or, how two totally different technologies hooked up.

HTML and JavaScript are from different planets for sure.

The proof? HTML’s DNA is made of declarative markup

that allows you to describe a set of nested elements that

make up your pages. JavaScript, on the other hand, is

made of pure algorithmic genetic material, meant for

describing computations.

Are they so far apart they can’t even communicate? Of

course not, because they have something in common: the

DOM. Through the DOM, JavaScript can communicate

with your page, and vice versa. There are a few ways to

make this happen, but for now let’s concentrate on one—

it’s a little wormhole of sorts that allows JavaScript to get

access to any element in your page. That wormhole is

getElementById.

238 Chapter 6

using getelementbyid to get an element

Let’s start with a DOM. Here’s a simple DOM; it’s got a few HTML paragraphs, each with

an id identifying it as the green, red or blue planet. Each paragraph has some text as well. Of

course there’s a <head> element too, but we’ve left the details out to keep things simpler.

Now let’s use JavaScript to make things more interesting. Let’s say we want to change

the greenplanet’s text from “All is well” to “Red Alert: hit by phaser fire!” Down the road you

might want to do something like this based on a user’s actions, or even based on data from a

web service. We’ll get to all that; for now let’s just get the greenplanet’s text updated. To do that

we need the element with the id “greenplanet”. Here’s some code that does that:

document.getElementById("greenplanet");

Here we’re asking the document to

get us an element by finding the

element that matches the given id.

The document represents the

entire page in your browser and

contains the complete DOM, so

we can ask it to do things like

find an element with a specific id.



getElementById(“greenplanet”) returns

the paragraph element corresponding

to “greenplanet”...

...and then the

JavaScript code

can do all sorts

of interesting

things with it.



  



















you are here 4 239

interacting with your web page

Once getElementById gives you an element, you’re ready do something with it

(like change its text to “Red Alert: hit by phaser fire!”). To do that, we typically assign the

element to a variable so we can refer to the element thoughout our code. Let’s do that

and then change the text:

var planet = document.getElementById("greenplanet");

planet.innerHTML = "Red Alert: hit by phaser fire!";

Here’s our call to getElementById,

which seeks out the “greenplanet”

element and returns it.

We’re assigning the element to a

variable named planet.

And in our code we can now just

use the variable planet to refer

to our element.

We change the content of the greenplanet

element to our new text... which results in

the DOM (and your page) being updated

with the new text.







  















We can use the

innerHTML property of

our planet element to

change the content of

the element.

We’ll talk more about

properties of elements

shortly...

Any changes to the DOM are reflected in the

browser’s rendering of the page, so you’ll see the

paragraph change to contain the new content!

240 Chapter 6

how getelementbyid works

So, what did we just do? Let’s step through it in a little more detail. We’re using the

document object to get access to the DOM from our code. The document object

is a built-in object that comes with a bunch of properties and methods, including

getElementById, which we can use to grab an element from the DOM. The

getElementById method takes an id and returns the element that has that id.

Now in the past you’ve probably used ids to select and style elements with CSS.

But here, what we’re doing is using an id to grab an element—the <p> element

with the id “greenplanet”—from the DOM.

Once we have the right element, we

can modify it. We’ll get to that in just

a moment; for now, let’s focus on how

getElementById works by tracing

through these steps:

Getting an element with getElementById

var planet = document.getElementById("greenplanet");







 









  



















Here’s our call to getElementById.

And we’re looking for the element

with an id of “greenplanet”.

We’ll assign the element that

is returned to the planet

variable for later use.

We’re using document to get

access to the DOM.









Follow the steps 1, 2, 3.

you are here 4 241

interacting with your web page

Get the content (text or HTML).

Read an attribute.

Change the content.

Add an attribute.

Change an attribute.

Remove an attribute.

Things you can do with an

element object.

When you grab an element from the DOM using getElementById, what you get is

an , which you can use to read, change or replace the element’s content and

attributes. And here’s the magic: when you change an element, 

.

But, first things first. Let’s take another look at the element object we just grabbed from

the DOM. We know that this element object represents the <p> element in our page that

has the id “greenplanet” and that the text content in the element is “All is well”. Just like

other kinds of JavaScript objects, an element object has properties and methods. In the

case of an element object, we can use these properties and methods to read and change

the element. Here are a few things you can do with element objects:

What, exactly, am I getting from the DOM?









What we want to do with our <p> element—which, remember, is the <p> element with

the id “greenplanet”—is change the content “All is well” to “Red Alert: hit by phaser

fire!”. We’ve got the element object stashed in the planet variable in our code; let’s use

that to modify one of its properties, innerHTML:

var planet = document.getElementById("greenplanet");

planet.innerHTML = "Red Alert: hit by phaser fire!";

The planet variable contains an element

object-the element object that is the

“greenplanet” <p> element.

We can use the innerHTML property of the element

object to change the content of the element!

242 Chapter 6

using innerhtml

Finding your inner HTML

Red Alert: hit by

phaser fire!

JavaScript console

All is well

JavaScript console

And the web page

changes too!

The innerHTML property is an important property that we can use to read or

replace the content of an element. If you look at the value of innerHTML then

you’ll see the content contained  the element, not including the HTML

element tags. The “withIN” is why it’s called “inner” HTML. Let’s try a little

experiment. We’ll try displaying the content of the planet element object in the

console by logging the innerHTML property. Here’s what we get:

var planet = document.getElementById("greenplanet");

console.log(planet.innerHTML);

We’re just passing the planet.innerHTML

property to console.log to log to the console.

The content of the innerHTML property is

just a string, so it displays just like any other

string in the console.

Now let’s try changing the value of the innerHTML property. When we

do this, we’re changing the content of the “greenplanet” <p> element in

the page, so you’ll see your page change too!

var planet = document.getElementById("greenplanet");

planet.innerHTML = "Red Alert: hit by phaser fire!";

console.log(planet.innerHTML);

Now we’re changing the content of the element

by setting its innerHTML property to the string

“Red Alert: hit by phaser fire!”

So when we log the value of the

innerHTML property to the

console we see the new value.

you are here 4 243

interacting with your web page

Hey, sit down; take a quick break. You might be saying to yourself, “Wait, I remember

something about ids and classes but I don’t remember the specifics, and don’t they have

something to do with CSS anyway?” No, problem, let’s just have a quick refresher, get some

context, and we’ll have you back on your way in no time...

Let’s look at an example:

...

</div>

And once we have that, we can select it with CSS to style it. Like this:

div#menu {

background-color: #aaa;

}

And we can access this element through its id in JavaScript too:

We’re giving this <div> a unique id of

“menu”. It should be the only element in

your page with the id “menu”.

div#menu selects the <div>

with the id menu, so we can

apply style to that element,

and only that element.

div#menu

is an id

selector.

<h3 class="drink">Strawberry Blast</h3>

<h3 class="drink">Lemon Ice</h3>

Both <h3> elements are in the

class “drink”. A class is like a

group; you can have multiple

elements in the same group.

Don’t forget, there’s another way to label your elements: with classes. Classes give us

a way to label a set of elements, like this:

With HTML, ids give us a way to uniquely identify an element, and, once an

element is unique, we can use that to select it with CSS for styling. And, as you’ve

seen, we can get an element by its id in JavaScript as well.

A Quick Refresher

var myMenu = document.getElementById("menu");

And we can select elements by classes too, both in CSS and JavaScript. We’ll see how

to make use of classes with JavaScript in a bit. And, by the way, if this reminder isn’t

quite enough, check out Chapter 7 of Head First HTML and CSS, or your favorite

HTML & CSS reference guide.

244 Chapter 6

changing the dom







  















Any changes to the DOM are reflected in the

browser’s rendering of the page, so you’ll see the

paragraph change to contain the new content!

So, what exactly happens when you change the content of an element using innerHTML?

What you’re doing is changing actual content of your web page, on the fly. And when you

change the content in the DOM, you’ll see that change immediately in your web page, too.

What happens when you change the DOM







  















This is the element whose

content we’re going to change...

The web page you see and the

DOM behind the scenes before

you change the content with

innerHTML...

... and the web page you see and

the DOM behind the scenes

after you change the content

with innerHTML.

Before...

... and after.

you are here 4 245

interacting with your web page

Q: What happens if I use document.

getElementById and pass in an id that doesn’t exist?

A: If you try to get an element from the DOM by id,

and that id doesn’t exist in an element, then the call to

getElementById returns a null value. Testing for null is

a good idea when you use getElementById to ensure

that the element is there before you try to access its

properties. We’ll talk more about null in the next chapter.

Q: Can we use document.getElementById to get

elements by class as well—for instance, say I have a

bunch of elements in the class “planets”?

A: No, but you’re thinking along the right lines. You

can only use getElementById with an id. But there is

another DOM method named getElementsByClassName

that you can use to get elements by class name.

With this method, what you get back is a collection

of elements that belong to the class (because

multiple elements can be in the same class). Another

method that returns a collection of elements is

getElementsByTagName, which returns all elements

that match the tag name you specify. We’ll see

getElementsByTagName a little later in the book and

see how to handle the collection of elements it returns.

Q: What exactly is an element object anyway?

A: Great question. An element object is the browser’s

internal representation of what you type into your HTML

file, like <p>some text</p>. When the browser loads and

parses your HTML file, it creates an element object for

every element in your page, and adds all those element

objects to the DOM. So the DOM is really just a big

tree of element objects. And, keep in mind that, just like

other objects, element objects can have properties, like

innerHTML, and methods, too. We’ll explore a few more

of the properties and methods of element objects later

in the book.

Q: I would have expected a property named

“content” or maybe “html” in the element object.

Why is it called innerHTML instead?

A: We agree, it’s kind of a weird name. The

innerHTML property represents all the content contained

in your element, including other nested elements (like

a paragraph might include <em> and <img> elements

in addition to the text in the paragraph). In other words,

it’s the HTML that’s “INside” your element. Is there an

outerHTML property? Yes! And that property gets you

all the HTML inside the element, as well as the element

itself. In practice you won’t see outerHTML used very

often, but you will see innerHTML used frequently to

update the content of elements.

Q: So by assigning something to innerHTML

I can replace the content of any element with

something else. What if I used innerHTML to change,

say, the <body> element’s content?

A: Right, innerHTML gives you a convenient way to

replace the content of an element. And, yes, you could

use it to replace the content of the <body> element,

which would result in your entire page being replaced

with something new.

246 Chapter 6

Here’s a DOM with a secret message

hidden in it. Evaluate the code below to

reveal the secret! The answer is upside

down on this page.

document.getElementById("e7")

document.getElementById("e8")

document.getElementById("e16")

document.getElementById("e9")

document.getElementById("e18")

document.getElementById("e13")

document.getElementById("e12")

document.getElementById("e2")

Write the element each line of code

selects, as well as the content of the

element to reveal the secret message!





 















 

  





 























 



























 



Answer: “you can turn back pages but not time”

you are here 4 247

interacting with your web page

<!doctype html>

<head>

<title>Planets</title>

var planet = document.getElementById("greenplanet");

planet.innerHTML = "Red Alert: hit by phaser fire!";

</script>

</head>

<body>

<h1>Green Planet</h1>

<h1>Red Planet</h1>

<p id="redplanet">Nothing to report</p>

<h1>Blue Planet</h1>

<p id="blueplanet">All systems A-OK</p>

</body>

</html>

A test drive around the planets

Okay, you know how to use document.getElementById to get access

to an element, and how to use innerHTML to change the content of that

element. Let’s do it for real, now.

Here’s the HTML for the planets. We’ve got a <script> element in the

<head> where we’ll put the code, and three paragraphs for the green, red,

and blue planets. If you haven’t already, go ahead and type in the HTML

and the JavaScript to update the DOM:

Here's our script

element with the code.

Here’s the <p> element

you’re going to change

with JavaScript.

After you’ve got it typed in, go ahead and load the page

into your browser and see the DOM magic happen on the

green planet.

UH OH! Houston, we’ve got a

problem, the green planet still

shows “All is well”. What’s wrong?

Just like you saw before, we’re

getting the <p> element with

the id “greenplanet” and

changing its content.

248 Chapter 6

thinking about why the code doesn’t work

Oh yeah, we forgot to mention one thing.

When you’re dealing with the DOM it’s important to

execute your code only  the page is . If

you don’t, there’s a good chance the DOM won’t be

created by the time your code executes.

Let’s think about what just happened: we put code in

the <head> of the page, so it begins executing before

the browser even sees the rest of the page. That’s a big

problem because that paragraph element with an id of

“greenplanet” doesn’t exist, yet.

So what happens exactly? The call to

getElementById returns null instead of the element

we want, causing an error, and the browser, being the

good sport that it is, just keeps moving and renders

the page anyway, but without the change to the green

planet’s content.

How do we fix this? Well, we could move the code to

the bottom of the <body>, but there’s actually a more

foolproof way to make sure this code runs at the right

time; a way to tell the browser “run my code after

you’ve fully loaded in the page and created the DOM.”

Let’s see how to do that next.









Check out your

console when this

page loads, you'll

see the error in

most browsers.

The console tool is

good for debugging.

Uncaught TypeError:

Cannot set property

'innerHTML' of null

JavaScript console

you are here 4 249

interacting with your web page

function init() {

var planet = document.getElementById("greenplanet");

planet.innerHTML = "Red Alert: hit by phaser fire!";

}

window.onload = init;

</script>

Don’t even think about running my code

until the page is fully loaded!

Ah, but how? Besides moving the code to the bottom of the body, there’s

another—and, one might argue—cleaner way to do it: .

Here’s how it works: first create a function that has the code you’d like

executed . After you’ve done that, you take the

window object, and assign the function to its onload property.

What does that do? The window object will call any function you’ve

assigned to its onload property, but only  the page is fully loaded. So,

thank the designers of the window object for giving you a way to supply

the code that gets called after the page has loaded. Check this out:

First, create a function named

init and put your existing code

in the function.

Here's the code we had

before, only now it’s in the

body of the init function.

Here, we’re assigning the function init to the

window.onload property. Make sure you don't

use parentheses after the function name! We're

not calling the function; we're just assigning the

function value to the window.onload property.

Let's try that again...

Go ahead and reload the page with the new init function and the

onload property. This time the browser will load the page completely,

build the entire DOM and  call your init function.

Ah, there we go, now the

green planet shows the Red

Alert, just like we wanted.

You can call this function

anything you want, but it’s

often called init by convention.

The window object is built-in

to JavaScript. It represents

the browser window.

250 Chapter 6

the browser and an event handler

You say “event hander,” I say “callback”

Let’s think about how onload works just a bit more, because it uses a common

coding pattern you’ll see over and over again in JavaScript.

Let’s say there’s a big important event that’s going to occur, and you  want

to know about it. Say that event is the “page is loaded” event. Well, a common way

to deal with that situation is through a , also known as an 

A callback works like this: give a function to the object that knows about the event.

When the event occurs, that object will call you back, or notify you, by calling that

function. You’re going to see this pattern in JavaScript for a variety of events.



























The callback, or event

handler, if you prefer.

The browser, or,

more specifically, the

window object.

you are here 4 251

interacting with your web page



















And once init is called, we

see the update to our page!













252 Chapter 6

thinking about functions and event handlers











That’s right, and there are many kinds

of events you can handle if you want

to. Some events, like the load event, are generated

by the browser, while others are generated by a

user interacting with the page, or even by your own

JavaScript code.

You’ve seen an example of “the page is loaded” event,

which we handle by setting the onload property of the

window object. You can also write event handlers that

handle things like “call this function every five seconds,”

or “some data arrived from a web service that we need

to deal with,” or “the user clicked a button and we need

to get some data from a form,” and there are many more.

All these types of events are heavily used when you’re

creating pages that act more like applications than static

documents (and who doesn’t want that). Right now, we’ve

had just a brief glimpse of event handlers, but we’ll be

spending a lot more time on them a bit later given their

important role in JavaScript programming.

you are here 4 253

interacting with your web page

<!doctype html>

<head>

<title>My Playlist</title>

____________ addSongs() {

var song1 = document.______________("________");

var _____ = _______________________("________");

var _____ = ________.getElementById("________");

________.innerHTML = "Blue Suede Strings, by Elvis Pagely";

__________________ = "Great Objects on Fire, by Jerry JSON Lewis";

song3.____________ = "I Code the Line, by Johnny JavaScript";

}

window.___________ = ____________;

</script>

</head>

<body>

<h1>My awesome playlist</h1>

</ul>

</body>

</html>

Here’s some HTML for a playlist of songs, except that the list is

empty. It’s your job to complete the JavaScript below to add the

songs to the list. Fill in the blank with the JavaScript that will do

the job. Check your answer with our solution at the end of the

chapter before you go on.

When you get the

JavaScript working, this is

what the web page will look

like after you load the page.

Fill in the blanks with the missing

code to get the playlist filled out.

Here’s the HTML

for the page.

Here’s our script. This code should fill in

the list of songs below, in the <ul>.

Here’s the empty list of songs. The

code above should add content to

each <li> in the playlist.

254 Chapter 6

modifying the page style with javascript

Why stop now? Let’s take it further

Let’s think for a second about what you just did: you took a static

web page and you dynamically changed the content of one of its

paragraphs . It seems like a simple step, but this is really

the beginning of making a  page.

Let’s take the second step: now that you know how to get your

hands on an element in the DOM, let’s set an  of an

element with code.

Why would that be interesting? Well, take our simple planets

example. When we set the paragraph to read “Red Alert,” we

could also set the paragraph’s color to red. That would certainly

more clearly communicate our message.

Here’s how we’re going to do that:

1We’ll define a CSS rule for the class "redtext" that

specifies a red color for the text of the paragraph.

That way any element we add to this class will have

red text.

2Next, we’ll add code to take the greenplanet paragraph

element and add the class “redtext”.

That’s it. All we need now is to learn how to set an attribute of an

element and then we can write the code.

How about getting another part of your brain working? We’re going to need the

CSS style for the class “redtext” that sets the color to “red” for the text in the planet

paragraph. If it’s been a while since you wrote CSS, don’t worry; give it a shot anyway.

If you can do it in your sleep, awesome. Either way, you'll find the answer at the end of

this chapter.

And that’s our goal, which we’ll

fully realize in Chapter 8.

you are here 4 255

interacting with your web page

How to set an attribute with setAttribute

Element objects have a method named setAttribute that you can call to set the

value of an HTML element’s attribute. The setAttribute method looks like this:

planet.setAttribute("class", "redtext");

The method takes two arguments,

the name of the attribute you

want to set or change...

And we use its setAttribute method

to either add a new attribute or

change an existing attribute.

... and the value you'd like

to set that attribute to.

Before...

And here’s the element after we call

setAttribute. Now you can see it’s got

two attributes, id and class.

Here's the element before we

call the setAttribute method

on it. Notice this element

already has one attribute, id.







  





















  















Remember, when we call

the setAttribute method,

we’re changing the element

object in the DOM, which

immediately changes what you

see displayed in the browser.

We take our element object.

Note if the attribute

doesn’t exist a new one will

be created in the element.

And After

We can call setAttribute on any element to change the value of an existing

attribute, or, if the attribute doesn’t already exist, to add a new attribute to the element.

As an example, let’s check out how executing the code above affects our DOM.

256 Chapter 6

getting the value of an attribute

More fun with attributes!

(you can GET attributes too)

var scoop = document.getElementById("raspberry");

var altText = scoop.getAttribute("alt");

console.log("I can't see the image in the console,");

console.log(" but I'm told it looks like: " + altText);

Need to know the value of an attribute

in an element? No problem, we have a

getAttribute method that you can call to get

the value of an HTML element’s attribute.

What happens if my attribute doesn’t

exist in the element?

Get a reference to the element with

getElementById, then use the element's

getAttribute method to get the attribute.

Pass in the name of

the attribute you

want the value of.

Remember what happens when you call getElementById

and the id doesn’t exist in the DOM? You get null. Same

thing with getAttribute. If the attribute doesn’t exist,

you’ll get back null. Here’s how you test for that:

var scoop = document.getElementById("raspberry");

var altText = scoop.getAttribute("alt");

if (altText == null) {

console.log("Oh, I guess there isn't an alt attribute.");

} else {

console.log("I can't see the image in the console,");

console.log(" but I'm told it looks like " + altText);

}

Test to make sure there actually

is an attribute value returned.









Don’t forget getElementById can return null too!

Any time you ask for something, you need to make sure you got back what

you expected...

If there’s no attribute

value, we do this...

... and if there is one,

we can show the text

content in the console.

you are here 4 257

interacting with your web page

Meanwhile, back at the ranch solar system...

It’s time to put all the code for the planets together and do a final test drive.

<!doctype html>

<head>

<title>Planets</title>

<style>

.redtext { color: red; }

</style>

function init() {

var planet = document.getElementById("greenplanet");

planet.innerHTML = "Red Alert: hit by phaser fire!";

planet.setAttribute("class", "redtext");

}

window.onload = init;

</script>

</head>

<body>

<h1>Green Planet</h1>

<h1>Red Planet</h1>

<p id="redplanet">Nothing to report</p>

<h1>Blue Planet</h1>

<p id="blueplanet">All systems A-OK</p>

</body>

</html>

Test driving the planets one last time...

Load this page up in your browser and you’ll see the

green planet has been hit by phaser fire, and now we see

the message in bright red, so we’ll be sure not to miss it!

Here’s all the HTML, CSS and

JavaScript for the planets.

We’ve got the redtext class included here so

when we add “redtext” as the value for the class

attribute in our code, it turns the text red.

And to review: we’re getting

the greenplanet element, and

stashing the value in the

planet variable. Then we’re

changing the content of the

element, and finally adding a

class attribute that will turn

the text of the element red.

We’re calling the init function only

when the page is fully loaded!

258 Chapter 6

things you can do with the dom

Look up and

retrieve one or

more elements

from the DOM.

So what else is a DOM good for anyway?

The DOM can do a fair bit more than we’ve seen so far and we’ll be seeing

some of its other functionality as we move forward in the book, but for now

let’s just take a quick look so you’ve got it in the back of your mind:



  



















Get elements from the DOM.



Create and add elements to the DOM.













Remove elements from the DOM.













 

Traverse the elements in the DOM.















Create new

elements...

... and add them

to the DOM

by attaching

them to another

element in the

tree.

Get all the

children of

an element...

Remove

existing

elements.

 



... or get the

parent of

an element.

... get an element’s siblings...

you are here 4 259

interacting with your web page

The Document Object Model, or DOM, is

the browser’s internal representation of your

web page.

The browser creates the DOM for your page

as it loads and parses the HTML.

You get access to the DOM in your

JavaScript code with the document object.

The document object has properties and

methods you can use to access and modify

the DOM.

The document.getElementById method

grabs an element from the DOM using its id.

The document.getElementById method

returns an element object that represents an

element in your page.

An element object has properties and

methods you can use to read an element’s

content, and change it.

The innerHTML property holds the text

content, as well as all nested HTML content,

of an element.

You can modify the content of an element by

changing the value of its innerHTML property.

When you modify an element by changing its

innerHTML property, you see the change in

your web page immediately.

You can get the value of an element’s

attributes using the getAttribute method.

You can set the value of an element’s

attributes using the setAttribute method.

If you put your code in a <script> element in

the <head> of your page, you need to make

sure you don’t try to modify the DOM until the

page is fully loaded.

You can use the window object’s onload

property to set an event handler, or callback,

function for the load event.

The event handler for the window’s onload

property will be called as soon as the page is

fully loaded.

There are many different kinds of events we

can handle in JavaScript with event handler

functions.

260 Chapter 6

javascript crossword

JavaScript cross

Load the DOM into your brain with this puzzle.

1 2 3

5 6

7 8

12 13

ACROSS



________.



id _____.



handle the load event.



change the HTML inside an element.



object.



DOWN





code.





the page.

4. The getElementById method gets an element by its

___.



method.

8. The ______ object is always at the top of the DOM

tree.



getElementById.



creates a ____ representing all the elements and content

in the page.



object.

you are here 4 261

interacting with your web page

Your job is to act like

you’re the browser. You

need to parse the HTML

and build your very own

DOM from it. Go ahead

and parse the HTML to

the right, and draw your

DOM below. We’ve already

started it for you.

Here’s our DOM











   



<!doctype html>

<head>

<title>Movies</title>

</head>

<body>

<h1>Movie Showtimes</h1>

<h2 id="movie1" >Plan 9 from Outer Space</h2>

<p>Playing at 3:00pm, 7:00pm.

<span>

Special showing tonight at <em>midnight</em>!

</span>

</p>

<h2 id="movie2">Forbidden Planet</h2>

<p>Playing at 5:00pm, 9:00pm.</p>

</body>

</html>

BE the Browser

Solution





262 Chapter 6

exercise solutions

<!doctype html>

<head>

<title>My Playlist</title>

____________ addSongs() {

var song1 = document.______________("________");

var _____ = _______________________("________");

var _____ = ________.getElementById("________");

________.innerHTML = "Blue Suede Strings, by Elvis Pagely";

__________________ = "Great Objects on Fire, by Jerry JSON Lewis";

song3.____________ = "I Code the Line, by Johnny JavaScript";

}

window.___________ = ____________;

</script>

</head>

<body>

<h1>My awesome playlist</h1>

</ul>

</body>

</html>

Here’s some HTML for a playlist of songs, except that the list is

empty. It’s your job to complete the JavaScript below to add the

songs to the list. Fill in the blank with the JavaScript that will do

the job. Here’s our solution.

This is what the web

page looks like after

you load the page.

Fill in the blanks with the missing

code to get the playlist filled out.

Here’s the HTML

for the page.

Here’s our script. This code should fill in

the list of songs below, in the <ul>.

Here’s the empty list of songs. The

code above should add content to

each <li> in the playlist.

function

getElementById

song1

song2

song3

song1

song2.innerHTML

innerHTML

onload addSongs

song2

song3

document.getElementById

document

you are here 4 263

interacting with your web page

JavaScript cross Solution

Load the DOM into your brain with this puzzle.

How about getting another part of your brain working? We’re going to need the

CSS style for the class “redtext” that sets the color to “red” for the text in the planet

paragraph. If it’s been a while since you wrote CSS, don’t worry; give it a shot anyway. If

you can do it in your sleep, awesome. Here’s our solution.

.redtext { color: red; }

4R O A

5A N D L E R S

6N G

E E S C

7O D

8E 9

9U N C T I O N O

P A L C

L T E N

10 U

A T U D

11 M

12 N N E R T M

13 L O E

E I E

14 L E M E N T

T B T T

T O

15 R E E D

this is a new chapter 265

Serious types

types, equality, conversion and all that jazz

It’s time to get serious about our types. One of the great

things

master the language, get that promotion

types.







…

idiosyncrasies





266 Chapter 7

thinking about types

Numbers

Booleans

Strings

Primitive Types Objects

Car

Dog

Song

Element

Math

Document

Now that you’ve had a lot of experience working with JavaScript

types—there’s your primitives with numbers, strings, and booleans,

and there’s all the objects, some supplied by JavaScript (like the

Math object), some supplied by the browser (like the document

object), and some you’ve written yourself—aren’t you just basking

in the glow of JavaScript’s simple, powerful and consistent type

system?

JavaScript also supplies a lot of useful objects,

but you can also create your own or use

objects other developers have written.

These are all supplied by JavaScript.

The truth is out there...

Low-level basic types for

numbers, strings, booleans.

High-level objects used to represent

the things in your problem space.

After all what else would you expect from the official language of

Webville? In fact, if you were a mere scripter, you might think about

sitting back, sipping on that Webville Martini, and taking a much

needed break…

But you’re not a mere scripter, and something is amiss. You have that

sinking feeling that behind Webville’s picket fences something bizarre

is at work. You’ve heard the reports of sightings of strings that

are acting like objects, you’ve read in the blogs about a (probably

radioactive) null type, you’ve heard the rumors that the JavaScript

interpreter as of late has been doing some weird type conversion.

What does it all mean? We don’t know, but the truth is out there and

we’re going to uncover it in this chapter, and when we do, we might

just turn what you think of true and false upside down.

you are here 4 267

types, equality, conversion and all that jazz

Who am I?

I get returned from a function when there

is no return statement.

I’m the value of a variable when I haven’t

been assigned a value.

I’m the value of an array item that doesn’t

exist in a sparse array.

I’m the value of a property that doesn’t

exist.

I’m the value of a property that’s been

deleted.

I’m the value that can’t be assigned to a

property when you create an object.

zero

empty object

null

undefined

NaN

infinity

area 51

...---...

{}

[]

A bunch of JavaScript values and party crashers, in full costume, are

playing a party game, “Who am I?” They give you a clue, and you try to

guess who they are, based on what they say. Assume they always tell

the truth about themselves. Draw an arrow from each sentence to the

name of one attendee. We’ve already guessed one of them for you.

Check your answers at the end of the chapter before you go on.

If you nd this exercise dicult, it’s okay to cheat and look at the answers.

Tonight’s

attendees:

268 Chapter 7

undefined

Watch out, you might bump into undefined

when you aren’t expecting it...

As you can see, whenever things get shaky—you need a variable that’s not been

initialized yet, you want a property that doesn’t exist (or has been deleted), you

go after an array item that isn’t there—you’re going to encounter undefined.

But what the heck is it? It’s not really that complicated. Think of undefined as the

value assigned to things that don’t yet have a value (in other words they haven’t been

initialized).

So what good is it? Well, undefined gives you a way to test to see if a variable (or

property, or array item) has been given a value. Let’s look at a couple of examples,

starting with an unassigned variable:

You can check to see if a variable

like x is undefined. Just compare

it to the value undefined.

var x;

if (x == undefined) {

// x isn’t defined! just deal with it!

}

var customer = {

};

if (customer.phoneNumber == undefined) {

// get the customer's phone number

}

Or, how about an object property:

You can check to see if

a property is undefined,

again by comparing it to

the value undefined.

Note that we’re using the value

undefined here, not to be confused

with the string “undefined”.

Q: When do I need to check if a variable (or property or array

item) is undefined?

A: Your code design will dictate this. If you’ve written code so that

a property or variable may not have a value when a certain block of

code is executed, then checking for undefined gives you a way to

handle that situation rather than computing with undefined values.

Q: If undefined is a value, does it have a type?

A: Yes, it does. The type of undefined is undefined. Why? Well

our logic (work with us here) is this: it isn’t an object, or a number or

a string or a boolean, or really anything that is defined. So why not

make the type undefined, too? This is one of those weird twilight

zones of JavaScript you just have to accept.

you are here 4 269

types, equality, conversion and all that jazz

IN THE LABORATORY

In the laboratory





typeof to





The typeof





var subject = "Just a string";

var probe = typeof subject;

console.log(probe);

JavaScript console

string

The typeof operator takes an

operand, and evaluates to the

type of the operand.

The type here is “string". Note

that typeof uses strings to

represent types, like “string",

“boolean", “number", “object",

“undefined", and so on.



following experiments:

var test1 = "abcdef";

var test2 = 123;

var test3 = true;

var test4 = {};

var test5 = [];

var test6;

var test7 = {"abcdef": 123};

var test8 = ["abcdef", 123];

function test9(){return "abcdef"};

console.log(typeof test1);

console.log(typeof test2);

console.log(typeof test3);

console.log(typeof test4);

console.log(typeof test5);

console.log(typeof test6);

console.log(typeof test7);

console.log(typeof test8);

console.log(typeof test9);

JavaScript console

Here's the test data,

and the tests.

Put your results here. Are

there any surprises?

270 Chapter 7

thinking about null











Ah yes, this causes a lot of confusion. There are many

languages that have the concept of a value that means “no object.”

And, it’s not a bad idea—take the document.getElementById

method. It’s supposed to return an object right? So, what happens

if it can’t? Then we want to return something that says “I would

have been an object if there was one, but we don’t have one.” And

that’s what null is.

You can also set a variable to null directly:

var killerObjectSomeday = null;

What does it mean to assign the value null to a variable? How about

“We intend to assign an object to this variable at some point, but we

haven’t yet.”

Now, if you’re scratching your head and saying “Hmm, why didn’t

they just use undefined for that?” then you’re in good company.

The answer comes from the very beginnings of JavaScript. The idea

was to have one value for variables that haven’t been initialized to

anything yet, and another that means the lack of an object. It isn’t

pretty, and it’s a little redundant, but it is what it is at this point. Just

remember the intent of each (undefined and null), and know that

it is most common to use null in places where an object should be

but one can’t be created or found, and it is most common to find

undefined when you have a variable that hasn’t been initialized, or

an object with a missing property, or an array with a missing value.

BACK IN THE LABORATORY



var test10 = null;

console.log(typeof test10);

JavaScript console

Put your results here.

you are here 4 271

types, equality, conversion and all that jazz

There are many functions and methods out there in the world that return

objects, and you’ll often want to make sure what you’re getting back is a full-

fledged object, and not null, just in case the function wasn’t able to find one

or make one to return to you. You’ve already seen examples from the DOM

where a test is needed:

var weather = document.getElementById("weatherDiv");

if (weather != null) {

// create content for the weather div

}

How to use null

Keep in mind that getting null doesn’t necessarily mean something is wrong.

It may just mean something doesn’t exist yet and needs to be created, or

something doesn’t exist and you can skip it. Let’s say users have the ability

to open or close a weather widget on your site. If a user has it open there’s

a <div> with the id of “weatherDiv”, and if not, there isn’t. All of a sudden

null becomes quite useful:

var header = document.getElementById("header");

if (header == null) {

// okay, something is seriously wrong if we have no header

}

Blaine, Missouri

It is always 67

degrees with a 40%

chance of rain.

Let’s look for the all-

important header element.

Uh oh, it doesn’t exist. Abandon ship!

Let’s see if the element

with id “weatherDiv” exists.

If the result of getElementById isn’t null, then

there is such an element in the page. Let’s create a

nice weather widget for it (presumably getting the

weather for the local area).

Remember, null is intended to represent

an object that isn’t there.

We can use null to check

to see if an object exists

yet or not.

272 Chapter 7

NaN is weird

NaN != NaN

Believe It or Not!!

Believe it or not, there are numeric

values  impossible to represent















var a = 0/0;

var b = "food" * 1000;

var c = Math.sqrt(-9);

In mathematics this has no

direct answer, so we can't

expect JavaScript to know

the answer either!

We don't know what this

evaluates to, but it is

certainly not a number!

If you remember high school

math, the square root of

a negative number is an

imaginary number, which

you can’t represent in

JavaScript.

NaN





































you are here 4 273

types, equality, conversion and all that jazz

Dealing with NaN

Now you might think that dealing with NaN is a rare event, but if you’re working

with any kind of code that uses numbers, you’d be surprised how often it

shows up. The most common thing you’ll need to do is test for NaN, and given

everything you’ve learned about JavaScript, how to do this might seem obvious:

if (myNum == NaN) {

myNum = 0;

}

WRONG!

Any sensible person would assume that’s how you test to see if a variable holds a

NaN value, but it doesn’t work. Why? Well, NaN isn’t equal to anything, not even

itself, so, any kind of test for equality with NaN is off the table. Instead you need

to use a special function: isNaN. Like this:

if (isNaN(myNum)) {

myNum = 0;

}

RIGHT!

You'd think this would work,

but it doesn't.

Use the isNaN function, which

returns true if the value

passed to it is not a number.

It gets even weirder

So, let’s think through this a bit more. If NaN stands for “Not a Number”, what

is it? Wouldn’t it be easier if it were named for what it is rather than what it isn’t?

What do you think it is? We can check its type for a hint:

var test11 = 0 / 0;

console.log(typeof test11);

JavaScript console

number

If your mind isn’t blown,

you should probably just

use this book for some

good kindling.

Here’s what we got.

What on earth? NaN is of type number? How can something that’s not a number

have the type number? Okay, deep breath. Think of NaN as just a poorly named

value. Someone should have called it something more like “Number that can’t

be represented” (okay, we agree the acronym isn’t quite as nice) instead of “Not

a Number”. If you think about it like that, then you can think of NaN as being a

value that is a number but can’t be represented (at least, not by a computer).

Go ahead and add this one to your JavaScript twilight zone list.

274 Chapter 7

questions about NaN and null

Q: If I pass isNaN a string, which isn’t a number, will it return

true?

A: It sure will, just as you’d expect. You can expect a variable

holding the value NaN, or any other value that isn’t an actual

number to result in isNaN returning true (and false otherwise). There

are a few caveats to this that you’ll see when we talk about type

conversion.

Q: But why isn’t NaN equal to itself?

A: If you’re deeply interested in this topic you’ll want to seek out

the IEEE floating point specification. However, the layman’s insight

into this is that just because NaN represents an unrepresentable

numeric value, does not mean that those unrepresentable numbers

are equal. For instance, take the sqrt(-1) and sqrt(-2). They are

definitely not the same, but they both produce NaN.

Q: When we divide 0/0 we get NaN, but I tried dividing 10/0

and got Infinity. Is that different from NaN?

A: Good find. The Infinity (or -Infinity) value in JavaScript

represents all numbers (to get a little technical) that exceed the upper

limit on computer floating point numbers, which is

1.7976931348623157E+10308 (or -1.7976931348623157E+10308

for -Infinity). The type of Infinity is number and you can test for it if

you suspect one of your values is getting a little large:

if (tamale == Infinity) {

alert("That's a big tamale!");

}

Q: You did blow my mind with that “NaN is a number” thing.

Any other mind blowing details?

A: Funny you should ask. How about Infinity minus Infinity

equals.... wait for it........ NaN. We’ll refer you to a good

mathematician to understand that one.

Q: Just to cover every detail, did we say what the type of null

is?

A: A quick way to find out is by using the typeof operator on null. If

you do that you’ll get back the result “object”. And this makes sense

from the perspective that null is used to represent an object that isn’t

there. However, this point has been heavily debated, and the most

recent spec defines the type of null as null. You’ll find this an area

where your browser’s JavaScript implementation may not match the

spec, but, in practice, you’ll rarely need to use the type of null in code.

We’ve been looking at some rather, um, interesting, values so far in this chapter.

Now, let’s take a look at some interesting behavior. Try adding the code below

to the <script> element in a basic web page and see what you get in the console

when you load up the page. You won’t get why yet, but see if you can take a

guess about what might be going on.

if (99 == "99") {

console.log("A number equals a string!");

} else {

console.log("No way a number equals a string");

}

JavaScript console

> false

Write what you get here.

you are here 4 275

types, equality, conversion and all that jazz

We have a confession to make

There is an aspect of JavaScript we’ve deliberately been holding

back on. We could have told you up front, but it wouldn’t have made

as much sense as it will now.

It’s not so much that we’ve been pulling the wool over your eyes, it’s

that there is more to the story than we’ve been telling you. And what

is this topic? Here, let’s take a look:

var testMe = 99;

if (testMe == 99) {

// good things happen

}

At some point a variable gets set, in

this case to the number 99.

And later it gets compared with a

number in a conditional test.

Straightforward enough? Sure, what could be easier? However, one

thing we’ve done at least once so far in this book, that you might

not have noticed, is something like this:

var testMe = "99";

if (testMe == 99) {

// good things happen

}

At some point a variable gets set, in

this case to the string “99".

And later it gets compared with a

number in a conditional test.

Did we mention we're

using a string this time?

Now we have a string being

compared to a number.

So what happens when we compare a number to a string? Mass

chaos? Computer meltdown? Rioting in the streets?

No, JavaScript is smart enough to determine that 99 and “99” are

the same for all practical purposes. But what exactly is going on

behind the scenes to make this work? Let’s take a look…

var x = 99;

= is the assignment operator.

It is used to assign a value to

a variable.

x = = 99

== is a comparison operator.

It is used to compare one

value with another to see if

they’re equal.

Just a quick reminder about

the difference between

assignment and equality:

276 Chapter 7

the equality operator

You’d think that understanding equality would be a simple topic. After

all, 1 == 1, “guacamole” == “guacamole” and true == true. But, clearly

there is more at work here if “99” == 99. What could be going on inside

the equality operator to make that happen?

It turns out the == operator takes the types of its operands (that is, the

two things you’re comparing) into account when it does a comparison.

You can break this down into two cases:

99 == 99

Understanding the equality operator

(otherwise known as ==)

99 == "99"

When you’re comparing a number and a

string, JavaScript converts the string

to a number (if possible)...

... and then tries the comparison again.

Now, if they're equal, the expression

results in true, false otherwise.

If the two values you are comparing have the same type, like two

numbers or two strings, then the comparison works just like you would

expect: the two values are compared against each other and the result is

true if they are the same value. Easy enough.

If the two values have the same type, just compare them

This is the more interesting case. Say you have two values with different types

that you want to compare, like a number and a string. What JavaScript does is

convert the string into a number, and then compares the two values. Like this:

If the two values have different types,

try to convert them into the same type and then compare them

Okay, that makes some intuitive sense, but what are the rules here? What

if I compare a boolean to a number, or null to undefined, or some other

combination of values? How do I know what’s going to get converted into

what? And, why not convert the number into a string instead, or use some

other scheme to test their equality? Well, this is defined by a fairly simple set

of rules in the JavaScript specification that determine how the conversion

happens when we compare two values with different types. This is one of

those things you just need to internalize—once you’ve done that, you’ll be on

top of how comparisons work the rest of your JavaScript career.

Note that the conversion is

only temporary, so that the

comparison can happen.

This will also set you above

your peers, and help you nail

your next interview.

you are here 4 277

types, equality, conversion and all that jazz

99 == "vanilla"

99 == NaN

Once again, we’re comparing a number and a

string. But this time, when we try to convert

the string to a number, we fail.

When we try to convert “vanilla” to a

number, we get NaN, and NaN isn’t equal

to anything. And so the result is false.

How equality converts its operands

(sounds more dangerous than it actually is)

So what we know is that when you compare two values that have different types,

JavaScript will convert one type into another in order to compare them. If you’re

coming from another language this might seem strange given this is typically

something you’d have to code explicitly rather than have it happen automatically.

But no worries, in general, it’s a useful thing in JavaScript 

. And, that’s what we’ve got to figure out now: when it happens and

how it happens.

Here we go (in four simple cases):

CASE#1: Comparing a number and a string.

If you’re comparing a string and a number the same thing happens every time: the

string is converted into a number, and the two numbers are then compared. This

doesn’t always go well, because not all strings can be converted to numbers. Let’s see

what happens in that case:

false

CASE#2: Comparing a boolean with any other type.

In this case, we convert the boolean to a number, and compare. This might seem a little

strange, but it’s easier to digest if you just remember that true converts to 1 and false converts

to 0. You also need to understand that sometimes this case requires doing more than one type

conversion. Let’s look at a few examples:

1 == true

1 == 1

We’re comparing a number and a boolean. The

true value is converted to the number 1.

And then we compare 1 to 1, which is true.

true

278 Chapter 7

comparing values

CASE#3: Comparing null and undefined.

Comparing these values evalutates to true. That might seem odd as well, but it’s the rule.

For some insight, these values both essentially represent “no value” (that is, a variable

with no value, or an object with no value), so they are considered to be equal.

undefined == null

Undefined and null are always equal.

true

"1" == true

"1" == 1

We’re comparing a string and a boolean. The

true value is converted to the number 1.

And then we compare the string “1" to 1...

true

Here’s another case; this time a boolean is compared to a string. Notice how more

steps are needed.

1 == 1

Now we use the rule from case#1 and the

string is converted into a number.

And now we can finally compare a number to

a number, and in this case, the result is true.

CASE#4: Oh, actually there is no case #4.

That’s it. You can pretty much determine the value of any equality with these rules.

That said, there are a few edge cases and caveats. One caveat is that we still need to

talk about comparing objects, which we’ll talk about in a bit. The other is around

conversions that might catch you off guard. Here’s one example:

1 == ""

1 == 0

We’re comparing a number and a string.

Use rule #1.

The empty string is converted to the

number 0. Believe it or not!

false

Ah, too bad, 1 and 0 are not the same. So

this evaluates to false.

you are here 4 279

types, equality, conversion and all that jazz



equality















280 Chapter 7

the strict equality operator







Editor's note: Make sure we

have a photo release on file

from Doug Crockford.

How to get strict

with equality

While we’re making confessions, here’s another one: there are not

one, but . You’ve already been introduced to

== (equality), and the other operator is === (strict equality).

That’s right, three equals. You can use === in place of ==

anytime you want, but before you start doing that, let’s make sure

you understand how they differ.

With ==, you now know all the complex rules around how the

operands are converted (if they’re different types) when they’re

compared. With ===, the rules are even more complicated.

Just kidding, actually there is with ===:

Read that again. What that means is, if two values have the same type

we compare them. If they don’t, forget it, we’re calling it false no matter

what—no conversion, no figuring out complex rules, none of that. All

you need to remember is that === will find two values equal  

.

Two values are strictly equal only if they have

the same type and the same value.

For each comparison below write true or false below the

operators == and === to represent the result of the comparison:

"42" == 42

== ===

"0" == 0

"0" == false

"true" == true

true == (1 == "1")

true

Tricky!

"42" === 42

"0" === 0

"0" === false

"true" === true

true === (1 === "1")

Tricky!

you are here 4 281

types, equality, conversion and all that jazz

Q: What happens if I compare a number, like 99, to

a string, like “ninety-nine”, that can’t be converted to a

number?

A: JavaScript will try to convert “ninety-nine” to a number,

and it will fail, resulting in NaN. So the two values won’t be

equal, and the result will be false.

Q: How does JavaScript convert strings to numbers?

A: It uses an algorithm to parse the individual characters

of a string and try to turn each one of them into a number.

So if you write “34”, it will look at “3”, and see that can be

a 3, and then it will look at “4” and see that can be a 4. You

can also convert strings like “1.2” to floating point numbers—

JavaScript is smart enough to recognize a string like this can

still be a number.

Q: So, what if I try something like “true” == true?

A: That is comparing a string and a boolean, so according

to the rules, JavaScript will first convert true to 1, and then

compare “true” and 1. It will then try to convert “true” to a

number, and fail, so you’ll get false.

Q: So if there is both a == and a === operator, does

that mean we have <= and <==, and >= and >==?

A: No. There are no <== and >== operators. You can use

only <= and >=. These operators only know how to compare

strings and numbers (true <= false doesn’t really make sense),

so if you try to compare any values other than two strings

or two numbers (or a string and a number), JavaScript will

attempt to convert the types using the rules we’ve discussed.

Q: So if I write 99 <= “100” what happens?

A: Use the rules: “100” is converted to a number, and then

compared with 99. Because 99 is less than or equal to 100

(it’s less than), the result is true.

Q: Is there a !==?

A: Yes, and just like === is stricter than ==, !== is stricter

than !=. You use the same rules for !== as you do for ===,

except that you’re checking for inequality instead of equality.

Q: Do we use the same rules when we’re comparing

say, a boolean and a number with < and >, like 0 < true?

A: Yup! And in that case, true gets converted to 1, so you’ll

get true because 0 is less than 1.

Q: It makes sense for a string to be equal to another

string, but how can a string be less than or greater than

another string?

A: Good question. What does it mean to say “banana” <

“mango”? Well, with strings, you can use alphabetical order

to know if one string is less than or greater than another.

Because “banana” begins with a “b” and “mango” with an “m”,

“banana” is less than “mango” because “b” comes before “m”

in the alphabet. And “mango” is less than “melon” because,

while the first letters are the same, when we compare the

second letters, “a” comes before “e”.

This alphabetical comparison can trip you up, however; for

instance, “Mango” < “mango” is true, even though you might

think that “M” is greater than “m” because its “M” is capitalized.

The ordering of strings has to do with the ordering of the

Unicode values that are used to represent each character

in the computer (Unicode is a standard for representing

characters digitally), and that ordering might not always be

what you expect! For all the details, try googling “Unicode”.

But most of the time, the basic alphabetical ordering is all you

need to know if one string is less than or greater than another.

282 Chapter 7

fireside chat between equality and strict equality

Tonight’s talk: The equality and

strict equality operators let us

know who is boss.

Ah look who it is, Mr. Uptight.

I’m up for a count of == versus === across all

JavaScript code out in the world. You’re going to

come in way behind. It won’t even be close.

I don’t think so. I provide a valuable service. Who

doesn’t want to, say, compare user input in the form

of a string to a number every once in a while?

When you were in grade school did you have to

walk to school in the snow, every day, uphill, in both

directions? Do you always have to do things the

hard way?

The thing is, not only can I do the same

comparisons you do, I add value on top of that by

doing some nice conversions of types.

You’d rather just throw your hands up, call it false

and go home?

===

Just keep in mind that several leading JavaScript

gurus say that developers should use me, and only

me. They think you should be taken out of the

language altogether.

You know, you might be right, but folks are slowly

starting to get it, and those numbers are changing.

And with it come all the rules you have to keep in

mind to even use ==. Keep life and code simple;

use === and if you need to convert user input to a

number there are methods for that.

Very funny. There’s nothing wrong with being

strict and having clear-cut semantics around your

comparisons. Bad, unexpected things can happen if

you don’t keep all the rules in mind.

Every time I look at your rules I throw up in my

mouth a little. I mean comparing a boolean to

anything means I convert the boolean to a number?

That doesn’t seem very sensical to me.

you are here 4 283

types, equality, conversion and all that jazz

It’s working so far. Look at all the code out there, a

lot written by mere… well, scripters.

You mean like taking a shower after one of these

conversations with you?

Hmm. Well, ever considered just buying me out? I’d

be happy to go spend my days on the beach, kicking

back with a margarita in hand.

Arguing about == versus === gets old. I mean

there are more interesting things to do in life.

Look, here’s the thing you have to deal with: people

aren’t going to just stop using ==. Sometimes

it’s really convenient. And people can use it in an

educated way, taking advantage of it when it makes

sense. Like the user input example—why the heck

not use ==?

My new attitude is if people want to use you, great.

I’m still here when they need me, and by the way, I

still get a check every month no matter what they

do! There’s enough legacy code with == in the

world—I’m never going off payroll.

===

No, but one can get a little too lax around your

complex rules.

That’s fine but pages are getting more complex,

more sophisticated. It’s time to take on some best

practices.

No, like sticking to ===. It makes your code clearer

and removes the potential for weird edge cases in

comparisons.

I didn’t see that coming, I thought you’d defend

your position as THE equality operator until the

end. What gives?

I don’t even know how to respond.

Well like I said, you never know when something is

going to happen.

284 Chapter 7

thinking about equality











Deep breath. There’s a lot of debate around

this topic, and different experts will tell you different

things. Here’s our take: traditionally, coders have used

mostly == (equality) because, well, there wasn’t a great

awareness of the two operators and their differences.

Today, we’re more educated and for most purposes ===

(strict equality) works just fine and is in some ways the

safer route because you know what you’re getting. With

==, of course, you also know what you’re getting, but

with all the conversions it’s hard sometimes to think

through all the possibilities.

Now, there are times when == provides some nice

convenience (like when you’re comparing numbers to

strings) and of course you should feel free to use == in

those cases, especially now that, unlike many JavaScript

coders, you know exactly what == does. Now that we’ve

talked about ===, you’ll see us mostly shift gears in this

book and predominantly use ===, but we won’t get

dogmatic about it if there’s a case where == makes our

life easier and doesn’t introduce issues.

You’ll also hear

developers refer to

=== (strict equality)

as the “identity”

operator.

you are here 4 285

types, equality, conversion and all that jazz

Compares values to see if they are equal. This

guy won’t even consider values that have

different types.

We had our descriptions for these operators all figured out, and then they

got all mixed up. Can you help us figure out who does what? Be careful,

we’re not sure if each contender matches zero, one or more descriptions.

We’ve already figured one out, which is marked below:

=== Assigns a value to a variable.

Compares values to see if they are equal. This

is the considerate equality operator. He’ll go

to the trouble of trying to convert your types

to see if you are really equal.

Compares object references and returns

true if they are the same and false otherwise.

====

286 Chapter 7

type conversion

Even more type conversions...

Conditional statements aren’t the only place you’re going to see type

conversion. There are a few other operators that like to convert types when

they get the chance. While these conversions are meant to be a convenience

for you, the coder, and often they are, it’s good to understand exactly where

and when they might happen. Let’s take a look.

var mini = "10" - 5;

Here the string “10” is converted to

the number 10. Then 80 is divided by

the number 10, resulting in 8.

With minus, the “10” is converted to the

number 10, so we have 10 minus 5, which is 5.

Another look at concatenation, and addition

You’ve probably figured out that when you use the + operator with numbers you

get addition, and when you use it with strings you get concatenation. But what happens

when we mix the types of +’s operands? Let’s find out.

If you try to add a number and a string, JavaScript converts the number to a string

and concatenates the two. Kind of the opposite of what it does with equality:

var addi = 3 + "4";

When we have a string added to a number,

we get concatenation, not addition.

Same here... we get “43".

The result variable is set

to “34" (not 7).

var plusi = "4" + 3;

What about the other arithmetic operators?

When it comes the other arithmetic operators—like multiplication, division and subtraction—

JavaScript prefers to treat those as arithmetic operations, not string operations.

If you put the string first and then use the + operator with a number, the same thing

happens: the number is converted to a string and the two are joined by concatenation.

var multi = 3 * "4";

Here, JavaScript converts the

string “4” to the number 4, and

multiplies it by 3, resulting in 12.

var divi = 80 / "10";

you are here 4 287

types, equality, conversion and all that jazz

Q: Is + always interpreted as string concatenation when one

of the operands is a string?

A: Yes. However, because + has what is called left-to-right

associativity, if you have a situation like this:

var order = 1 + 2 + " pizzas";

you’ll get “3 pizzas”, not "12 pizzas" because, moving left to right, 1

is added to 2 first (and both are numbers), which results in 3. Next

we add 3 and a string, so 3 is converted to a string and concatenated

with "pizza". To make sure you get the results you want, you can

always use parentheses to force an operator to be evaluated first:

var order = (1 + 2) + " pizzas";

ensures you’ll get 3 pizzas, and

var order = 1 + (2 + " pizzas");

ensures you’ll get 12 pizzas.

Q: Is that it? Or are there more conversions?

A: There are some other places where conversion happens. For

instance, the unary operator - (to make a negative number) will turn

-true into -1. And concatenating a boolean with a string will create a

string (like true + “ love” is “true love”). These cases are fairly rare,

and we’ve personally never needed these in practice, but now you

know they exist.

Q: So if I want JavaScript to convert a string into a number to

add it to another number, how would I do that?

A: There’s a function that does this named Number (yes, it has a

uppercase N). Use it like this:

var num = 3 + Number("4");

This statement results in num being assigned the value 7. The

Number function takes an argument, and if possible, creates a

number from it. If the argument can’t be converted to a number,

Number returns.... wait for it..... NaN.

Time to test that conversion knowledge. For each expression below, write the result in the blank

next to it. We’ve done one for you. Check your answers at the end of the chapter before you go on.

Infinity - "1"

"42" + 42

2 + "1 1"

99 + 101

"1" - "1"

console.log("Result: " + 10/2)

3 + " bananas " + 2 + " apples"

“4242”

288 Chapter 7

object equality









We’re glad you’re thinking about it. When

it comes to object equality there’s a simple answer and

there’s a long, deep answer. The simple answer tackles

the question: is this object equal to that object? That

is, if I have two variables referencing objects, do they

point to precisely the same object? We’ll walk through

that on the next page. The complex question involves

object types, and the question of how two objects

might or might not be the same type. We’ve seen that

we can create objects that look like the same type, say

two cars, but how do we know they really are? It’s an

important question, and one we’re going to tackle head

on in a later chapter.

you are here 4 289

types, equality, conversion and all that jazz

How to determine if two objects are equal

Your first question might be: are we talking about == or ===? Here’s the good

news:  ! That is, if both operands are

objects, then you can use either == or === because they work in exactly the

same way. Here’s what happens when you test two objects for equality:

When we test equality of two object variables,

we compare the references to those objects

This reference...

... is NOT equal to

this reference. They

are two different

references.

Two references are equal only if they reference

the same object

The only way a test for equality between two variables

containing object references returns true is when the two

references point to the same object.

Remember, variables hold references to objects, and so whenever

we compare two objects, we’re comparing object references.

if (var1 == = var2) {

// wow, these are the same object!

}





if (var1 == = var3) {

// wow, these are the same object!

}

This reference...

... is equal to this reference. They are

equal and the same object!

 



Not in this case!

Finally, two object

references that are equal.

Notice, it doesn’t matter

what’s in these objects. If the

references aren’t the same,

then the objects aren’t equal.

290 Chapter 7

exercise in equality

Earl, from

Earl’s Autos.

function findCarInLot(car) {

for (var i = 0; i < lot.length; i++) {

if (car === lot[i]) {

return i;

}

return -1;

}

var chevy = {

make: "Chevy",

model: "Bel Air"

};

var taxi = {

make: "Webville Motors",

model: "Taxi"

};

var fiat1 = {

make: "Fiat",

model: "500"

};

var fiat2 = {

make: "Fiat",

model: "500"

};

var lot = [chevy, taxi, fiat1, fiat2];

var loc1 = findCarInLot(fiat2);

var loc2 = findCarInLot(taxi);

var loc3 = findCarInLot(chevy);

var loc4 = findCarInLot(fiat1);

Here's a little code that helps find cars in Earl’s Autos parking lot. Trace

through this code and write the values of loc1 through loc4 below.

Your answers here.

you are here 4 291

types, equality, conversion and all that jazz

var testThis;

if (testThis) {

// do something

}

var element = document.getElementById("elementThatDoesntExist");

if (element) {

// do something

}

if (0) {

// do another thing

}

if ("") {

// does code here ever get evaluated? Place your bets.

}

if (NaN) {

// Hmm, what's NaN doing in a boolean test?

}

The truthy is out there...

Okay that’s weird, we know this variable will

be undefined in the conditional test. Does this

work? Is this legal JavaScript? (Answer: yes.)

Here the value of element is null.

What's that going to do?

We're testing 0?

Now we're doing a conditional test on an

empty string. Anyone want to place bets?

Wait, now we're using NaN in a boolean condition?

What's that going to evaluate to?

That’s right, we said truthy not truth. We’ll say falsey too. What on earth

are we talking about? Well, some languages are rather precise about

true and false. JavaScript, not so much. In fact, JavaScript is kind of

loose about true and false. How is it loose? Well, there are values in

JavaScript that aren’t true or false, but that are nevertheless treated

as true or false in a conditional. We call these values truthy and falsey

precisely because they aren’t technically true or false, but they behave

like they are (again, inside a conditional).

Now here’s the secret to understanding truthy and falsey: concentrate on

. Let’s look

at some examples of using these falsey values in a conditional:

Some people

write it “falsy.”

292 Chapter 7

truthy and falsey

if ([]) {

// this will happen

}

var element = document.getElementById("elementThatDoesExist");

if (element) {

// so will this

}

if (1) {

// gonna happen

}

var string = "mercy me";

if (string) {

// this will happen too

}

What JavaScript considers falsey

Again, the secret to learning what is truthy and what is falsey is to

learn what’s falsey, and then consider everything else truthy.

There are five falsey values in JavaScript:

undefined is falsey.

null is falsey.

0 is falsey.

The empty string is falsey.

So, every conditional test on the previous page evaluated to

false. Did we mention every other value is truthy (except for

false, of course)? Here are some examples of truthy values:

To remember which values

are truthy and which

are falsey, just memorize

the five falsey values—

undefined, null, 0, "” and

NaN—and remember that

everything else is truthy.

This is an array. It's not undefined, null,

zero, “” or NaN. It has to be true!

This time we have an actual element object.

That's not falsy either, so it's truthy.

Only the number 0 is falsey, all others are truthy.

Only the empty string is falsey,

all other strings are truthy.

NaN is falsey.

you are here 4 293

types, equality, conversion and all that jazz

Time for a quick lie detector test. Figure out how many lies the perp tells, and

whether the perp is guilty as charged, by determining which values are truthy

and which values are falsey. Check your answer at the end of the chapter before

you go on. And of course feel free to try these out in the browser yourself.

function lieDetectorTest() {

var lies = 0;

var stolenDiamond = { };

if (stolenDiamond) {

console.log("You stole the diamond");

lies++;

}

var car = {

keysInPocket: null

};

if (car.keysInPocket) {

console.log("Uh oh, guess you stole the car!");

lies++;

}

if (car.emptyGasTank) {

console.log("You drove the car after you stole it!");

lies++;

}

var foundYouAtTheCrimeScene = [ ];

if (foundYouAtTheCrimeScene) {

console.log("A sure sign of guilt");

lies++;

}

if (foundYouAtTheCrimeScene[0]) {

console.log("Caught with a stolen item!");

lies++;

}

var yourName = " ";

if (yourName) {

console.log("Guess you lied about your name");

lies++;

}

return lies;

}

var numberOfLies = lieDetectorTest();

console.log("You told " + numberOfLies + " lies!");

if (numberOfLies >= 3) {

console.log("Guilty as charged");

}

A string with one space.

294 Chapter 7

all about strings

The Secret Life of Strings

Types always belong to one of two camps: they’re either a primitive type or an

object. Primitives live out fairly simple lives, while objects keep state and have

behavior (or said another way, have properties and methods). Right?

Well, actually, while all that is true, it’s not the whole story. As it turns out,

strings are a little more mysterious. Check out this code:







var text = "YOU SHOULD NEVER SHOUT WHEN TYPING";

var presentableText = text.toLowerCase();

if (presentableText.length > 0) {

alert(presentableText);

}

var emot = "XOxxOO";

var hugs = 0;

var kisses = 0;

emot = emot.trim();

emot = emot.toUpperCase();

for(var i = 0; i < emot.length ; i++) {

if (emot.charAt(i) === "X") {

hugs++;

} else if (emot.charAt(i) == "O") {

kisses++;

}

This looks like a normal, primitive string.

Wait a sec, calling a method on a string?

More methods?

And a string with a property?

you are here 4 295

types, equality, conversion and all that jazz

How a string can look like a primitive

and an object

How does a string masquerade as both a primitive and an object? Because

JavaScript supports both. That is, with JavaScript you can create a string that

is a primitive, and you can also create one that is an object (which supports

lots of useful string manipulation methods). Now, we’ve never talked about

how to create a string that is an object, and in most cases you don’t need to

explicitly do it yourself, because the JavaScript interpreter 

, as needed.

Now, where and why might it do that? Let’s look at the life of a string:

var name = "Jenny";

var phone = "867-5309";

var fact = "This is a prime number";

var songName = phone + "/" + name;

var index = phone.indexOf("-");

if (fact.substring(10, 15) === "prime") {

alert(fact);

}

Here we've created three

primitive strings and

assigned them to variables.

And here we're just

concatenating some

strings together to create

another primitive string.

Here we're using a method. This

is where, behind the scenes,

JavaScript temporarily converts

phone to a string object.

Same here, the fact string

is temporarily converted to

an object to support the

substring method.

And, we're using

fact again, but this

time there is no

need for an object,

so it's back to being

a boring primitive.

BORING PRIMITIVE

OBJECT WITH SUPER POWERS

296 Chapter 7

questions about strings











You don’t need to. In general you can just think of your

strings as objects that have lots of great methods to help you

manipulate the text in your strings. JavaScript will take care

of all the details. So, look at it this way: you now have a better

understanding of what is under the covers of JavaScript, but in

your day to day coding most developers just rely on JavaScript to

do the right thing (and it does).

Q: Just making sure, do I ever have

to keep track of where my string is a

primitive and where it’s an object?

A: Most of the time, no. The JavaScript

interpreter will handle all the conversion for

you. You just write your code, assuming a

string supports the object properties and

methods, and things will work as expected.

Q: Why does JavaScript support a

string as both a primitive and an object?

A: Think about it this way: you get the

efficiency of the simple string primitive

type as long as you are doing basic string

operations like comparison, concatenation,

writing string to the DOM, and so on. But

if you need to do more sophisticated string

processing, then you have the string object

quickly at your disposal.

Q: Given an arbitary string, how do I

know if it is an object or primitive?

A: A string is always a primitive unless

you create it in a special way using an

object constructor. We’ll talk about object

constructors later. And you can always use

the typeof operator on your variable to see if

it is of type string or object.

Q: Can other primitives act like

objects?

A: Yes, numbers and booleans can also

act like objects at times. However, neither of

these has nearly as many useful properties

as strings do, so you won’t find you’ll use

this feature nearly as often as you do with

strings. And remember, this all happens for

you behind the scenes, so you don’t really

have to think about it much. Just use a

property if you need to and let JavaScript

handle the temporary conversion for you.

Q: How can I know all the methods

and properties that are available for

String objects?

A: That’s where a good reference comes

in handy. There are lots of online references

that are helpful, and if you want a book,

JavaScript: The Definitive Guide has a

reference guide with information about every

string property and method in JavaScript.

Google works pretty well too.

you are here 4 297

types, equality, conversion and all that jazz

Given that we’re in the middle of talking about strings and you’ve

just discovered that strings also support methods, let’s take a little

break from talking about weirdo types and look at a few of the

more common string methods you might want to use. A few string

methods get used over and over, and it is highly worth your time to

get to know them. So on with the tour.

A five-minute tour of string

methods (and properties)

A little pep talk: we could pull you aside

and write an entire chapter on every

method and property that strings

support. Not only would that make this

book 40 lbs and 2000 pages long, but

at this point, you really don’t need it—

you already get the basics of methods

and objects, and all you need is a good

reference if you really want to dive

into the details of string processing.

the length property

the charAt method

The length property holds the number of characters in the string. It’s quite handy

for iterating through the characters of the string.

The charAt method takes an integer number between zero and the length of the string

(minus one), and returns a string containing the single character at that position of

the string. Think of the string a bit like an array, with each character at an index of the

string, with the indices starting at 0 (just like an array). If you give it an index that is

greater than or equal to the length of the string, it returns the empty string.

var input = "jenny@wickedlysmart.com";

for(var i = 0; i < input.length; i++) {

if (input.charAt(i) === "@") {

console.log("There's an @ sign at index " + i);

}

Note that JavaScript doesn’t have a character

type. So characters are returned as new strings

containing one character.

We use the length property

to iterate over each

character in the string.

And the charAt method to get

the character at a particular

index in the string.

 

charAt(0)

is “a”.

charAt(5)

is “f”.

  d

JavaScript console

There's an @ sign at index 5

298 Chapter 7

the indexOf method

This method takes a string as an argument and returns the index of the first

character of the first occurrence of that argument in the string.

the indexOf method

var phrase = "the cat in the hat";

var index = phrase.indexOf("cat");

console.log("there's a cat sitting at index " + index);

JavaScript console

There's a cat sitting at index 4

Here's the string we're going to

call indexOf on.

And our goal is to find the first

occurence of “cat" in phrase.

The index of the first cat is returned.

index = phrase.indexOf("the", 5);

console.log("there's a the sitting at index " + index);

You can also add a second argument, which is

the starting index for the search.

JavaScript console

There's a the sitting at index 11

index = phrase.indexOf("dog");

console.log("there's a dog sitting at index " + index);

JavaScript console

There's a dog sitting at index -1

Note if the string can't be found, then -1 is

returned as the index.

Because we're starting the search at index 5,

we're skipping the first “the" and finding the

second “the” at index 11.

you are here 4 299

types, equality, conversion and all that jazz

the substring method

Give the substring method two indices, and it will extract and return the string

contained within them.

var data = "name|phone|address";

var val = data.substring(5, 10);

console.log("Substring is " + val);

You can omit the second index and substring will extract a string that starts at the

first index and then continues until the end of the original string.

JavaScript console

Substring is phone

Here's the string we're going to

call substring on.

We'd like the string from index

5 and up to (but not including)

10 returned.

We get back a new string with the

characters from index 5 to 10.

val = data.substring(5);

console.log("Substring is now " + val);

JavaScript console

Substring is now phone|address

the split method

The split method takes a character that acts as a delimiter, and breaks the string into

parts based on the delimiter.

var data = "name|phone|address";

var vals = data.split("|");

console.log("Split array is ", vals);

JavaScript console

Split array is ["name", "phone", "address"]

Split uses the delimiter to

break the original string into

pieces, which are returned in

an array.

Notice here we’re passing two

arguments to console.log separated

by a comma. This way, the vals array

doesn’t get converted to a string

before it’s displayed in the console.

300 Chapter 7

string methods

There’s really no end to learning all

the things you can do with strings.

Here are a few more methods

available to you. Just get a

passing familiarity right now, and

when you really need them you

can look up the details...

substring

match

toUpperCase

replace

concat

slice

lastIndexOf

trim

toLowerCase

String

Soup

Returns a string with

all uppercase characters

changed to lowercase.

Returns a new string

that has part of the

original string removed.

Returns a portion

of a string.

Removes whitespace from

around the string. Handy

when processing user input.

Searches for matches in a

string using regular expressions.

Returns a string with

all lowercase characters

changed to uppercase.

Joins strings together.

Finds substrings and replaces

them with another string.

Just like indexOf, but

finds the last, not the

first, occurrence.

you are here 4 301

types, equality, conversion and all that jazz

Take a phone number of the form:

and write code to accept or reject it.

To be accepted the number should

have seven digits, 0 through 9, with

a dash in the middle.

“123-4567”

function validate(phoneNumber) {

if (phoneNumber.length !== 8) {

return false;

}

for (var i = 0; i < phoneNumber.length; i++) {

if (i === 3) {

if (phoneNumber.charAt(i) !== '-') {

return false;

}

} else if (isNaN(phoneNumber.charAt(i))) {

return false;

}

return true;

}

Larry uses the length property of

the string object to see how many

characters it has.

He uses the charAt method to examine

each character of the string.

First, he makes sure

character three has a dash.

Chair Wars

(or How Really Knowing Types Can Change Your Life)

Once upon a time in a software shop, two programmers were given

the same spec and told to “build it.” The Really Annoying Project

Manager forced the two coders to compete, by promising that

whoever delivers first gets one of those cool Aeron™ chairs all the

Silicon Valley guys have. Brad, the hardcore hacker scripter, and

Larry, the college grad, both knew this would be a piece of cake.

Larry, sitting in his cube, thought to himself, “What are the things

this code has to do? It needs to make sure the string is long enough,

it needs to make sure the middle character is a dash, and it needs to

make sure every other character is a number. I can use the string’s

length property and I know how to access its characters using the

charAt method.”

Brad, meanwhile, kicked back at the cafe and thought to himself,

“What are the things this code has to do?” He first thought, “A string

is an object, and there are lots of methods I can use to help validate

the phone number. I’ll brush up on those and get this implemented

quickly. After all, an object is an object.” Read on to see how Brad

and Larry built their programs, and for the answer to your burning

question: 

The spec

The chair

Larry set about writing code based on the string methods. He wrote

the code in no time:

In Larry’s cube

Then he makes sure each character

zero through two and four

through six has a number in it.

302 Chapter 7

using and manipulating strings

Brad wrote code to check for two numbers and a dash:

function validate(phoneNumber) {

if (phoneNumber.length !== 8) {

return false;

}

var first = phoneNumber.substring(0,3);

var second = phoneNumber.substring(4);

if (phoneNumber.charAt(3) !== "-" || isNaN(first) || isNaN(second)) {

return false;

}

return true;

}

Brad starts just like Larry...

But he uses his knowledge of the

string methods.

He uses the substring method to

create a string containing three

characters from zero up to

character three.

And again to start at character index four

up to the end of the string.

Then he tests all the

conditions for being a

correct phone number

in one conditional.

Take a phone number of the form:

and write code to accept or reject it.

To be accepted the number should

have seven digits, 0 through 9, with

an optional dash in the middle.

“123-4567”

In Brad’s cube

What got added to the spec

But wait! There’s been a spec change.

“Okay, you were first, Larry, because Brad was looking up how to

use all those methods,” said the Manager, “but we have to add just one tiny

thing to the spec. It’ll be no problem for crack programmers like you two.”

“If I had a dime for every time I’ve heard that one”, thought Larry, knowing

that spec-change-no-problem was a fantasy. “And yet Brad looks strangely

serene. What’s up with that?” Still, Larry held tight to his core belief that

Brad’s fancy way, while cute, was just showing off. And that he’d win again

in this next round and produce the code first.

And interestingly, knowing it or not, he’s

depending on some type conversions here to

convert a string to a number, and then making

sure it’s a number with isNaN. Clever!







isNaN?

you are here 4 303

types, equality, conversion and all that jazz

Back in Larry’s cube

Brad smiled, sipped his margarita and quickly made his changes He

simply got the second part of the number using the length of the phone

number minus four as the starting point for the substring, instead of

hardcoding the starting point at a position that assumes a dash. That

almost did it, but he did need to rewrite the test for the dash because it

applies only when the phone number has a length of eight.

At Brad’s laptop at the beach

function validate(phoneNumber) {

if (phoneNumber.length > 8 ||

phoneNumber.length < 7) {

return false;

}

for (var i = 0; i < phoneNumber.length; i++) {

if (i === 3) {

if (phoneNumber.length === 8 &&

phoneNumber.charAt(i) !== '-') {

return false;

} else if (phoneNumber.length == = 7 &&

isNaN(phoneNumber.charAt(i))) {

return false;

}

} else if (isNaN(phoneNumber.charAt(i))) {

return false;

}

return true;

}

Larry had to make a

few additions to his logic.

Not a lot of code, but

it's getting a bit hard

to decipher.

Larry thought he could use most of his existing code; he just had to

work these edge cases of the missing dash in the number. Either the

number would be only seven digits, or it would be eight digits with a

dash in the third position. Quickly Larry coded the additions (which

took a little testing to get right):

304 Chapter 7

thinking about strings

But the smirk on Larry’s face melted when the Really

Annoying Project Manager said, “Brad, your code is

very readable and maintainable. Good job.”

But Larry shouldn’t be too worried, because, as we

know, there is more than just code beauty at work. This

code still needs to get through QA, and we’re not quite

sure Brad’s code works in all cases. What about you?

Who do you think deserves the chair?

The suspense is killing me.

Who got the chair?

Amy from the second floor.

(Unbeknownst to all, the Project

Manager had given the spec to three

programmers.)

function validate(phoneNumber) {

return phoneNumber.match(/^\d{3}-?\d{4}$/);

}

Wow, a one-liner! Check out how

this works in the appendix!

Larry snuck in just ahead of Brad.

function validate(phoneNumber) {

if (phoneNumber.length > 8 ||

phoneNumber.length < 7) {

return false;

}

var first = phoneNumber.substring(0,3);

var second = phoneNumber.substring(phoneNumber.length - 4);

if (isNaN(first) || isNaN(second)) {

return false;

}

if (phoneNumber.length === 8) {

return (phoneNumber.charAt(3) === "-");

}

return true;

}

Now Brad’s getting the second number

using the total length of the phone

number to get the starting point.

And he's validating the dash only

if the number is eight characters.





Here's Amy's code.

About the same number of changes

as Larry, but Brad’s code is still

easier to read.





Here we’re returning the result

of evaluating the conditional,

which will be true or false.

you are here 4 305

types, equality, conversion and all that jazz

IN THE LABORATORY, AGAIN

The lab crew typeof





new operator, instanceof



Warning: this is



function Duck(sound) {

this.sound = sound;

this.quack = function() {console.log(this.sound);}

}

var toy = new Duck("quack quack");

toy.quack();

console.log(typeof toy);

console.log(toy instanceof Duck);

JavaScript console

Here's the code. Read it, run it, alter

it, massage it, see what it does...

Put your results here. Are

there any surprises?

How strange. Doesn't this look a bit like

a mix of a function and an object?

Hmm “new". We've haven't seen that before. But

we're guessing we should read this as, create a new

Duck and assign it to the toy variable.

If it looks like an object, and walks like an object...

let's test it.

Okay, and here is instanceof...

Be sure to check your output with the answers at

the end of the chapter. But just what does this

all mean? Ah, we’ll be getting to all that in just a

couple of chapters. And, in case you didn’t notice,

you are well on your way to being a pretty darn

advanced JavaScript coder. This is serious stuff!

306 Chapter 7

chapter summary

There are two groups of types in JavaScript:

primitives and objects. Any value that isn’t a

primitive type is an object.

The primitives are: numbers, strings,



is an object.

undeined means that a variable (or property

or array item) hasn’t yet been initialized to a

value.

null means “no object”.

“NaN” stands for “Not a Number”, although

a better way to think of NaN is as a number

that can’t be represented in JavaScript. The

type of NaN is number.

NaN never equals any other value, including

itself, so to test for NaN use the function

isNaN.

Test two values for equality using == or ===.

If two operands have different types, the

equality operator (==) will try to convert one

of the operands into another type before

testing for equality.

If two operands have different types, the strict

equality operator (===) returns false.

You can use === if you want to be sure

no type conversion happens, however,

sometimes the type conversion of == can

come in handy.

Type conversion is also used with other

operators, like the arithmetic operators and

string concatenation.

falsey

null, 0, “” (the empty string) and false. All

other values are truthy.

Strings sometimes behave like objects. If

you use a property or method on a primitive

string, JavaScript will convert the string to

an object temporarily, use the property, and

then convert it back to a primitive string. This

happens behind the scenes so you don’t

have to think about it.

The string has many methods that are useful

for string manipulation.

Two objects are equal only if the variables

containing the object references point to the

same object.

you are here 4 307

types, equality, conversion and all that jazz

JavaScript cross

You’re really expanding your JavaScript skills. Do a crossword

to help it all sink in. All the answers are from this chaper.

1 2 3

5 6

8 9 10 11

12 13 14

16 17

ACROSS



anything.

5. The type of Infinity is ________.



8. Who got the Aeron?





object.



















DOWN











_________.











the operands to the same type.







308 Chapter 7

exercise solutions

Who am I?

I get returned from a function when there

is no return statement.

I’m the value of a variable when I haven’t

been assigned a value.

I’m the value of an array item that doesn’t

exist in a sparse array.

I’m the value of a property that doesn’t

exist.

I’m the value of a property that’s been

deleted.

I’m the value that can’t be assigned to a

property when you create an object.

zero

empty object

null

undefined

NaN

infinity

area 51

...---...

{}

[]

A bunch of JavaScript values and party crashers, in full costume, are

playing a party game, “Who am I?” They give you a clue, and you try to

guess who they are, based on what they say. Assume they always tell

the truth about themselves. Fill in the blank next to each sentence with

the name of one attendee. We’ve already guessed one of them.

Here’s our solution:

Tonight’s

attendees:

you are here 4 309

types, equality, conversion and all that jazz

IN THE LABORATORY

In the





typeof to





The typeof



var subject = "Just a string";

var probe = typeof subject;

console.log(probe);

JavaScript console

string

The typeof operator takes an

operand, and evaluates to the

type of the operand.

The type here is “string". Note

that typeof uses strings to

represent types, like “string",

“boolean", “number", “object",

“undefined" and so on.



following experiments:

var test1 = "abcdef";

var test2 = 123;

var test3 = true;

var test4 = {};

var test5 = [];

var test6;

var test7 = {"abcdef": 123};

var test8 = ["abcdef", 123];

function test9(){return "abcdef"};

console.log(typeof test1);

console.log(typeof test2);

console.log(typeof test3);

console.log(typeof test4);

console.log(typeof test5);

console.log(typeof test6);

console.log(typeof test7);

console.log(typeof test8);

console.log(typeof test9);

JavaScript console

Here's the test data,

and the tests.

SOLUTION

string

number

boolean

object

undefined

object

function

Here are our results.

310 Chapter 7

exercise solutions

BACK IN THE LABORATORY

Oops, we 

var test10 = null;

console.log(typeof test10);

JavaScript console

Here’s our result.

We’ve been looking at some rather, um, interesting, values so far in this chapter.

Now, let’s take a look at some interesting behavior. Try adding the code below

to the <script> element in a basic web page and see what you get in the console

when you load up the page. You won’t get why yet, but see if you can take a

guess about what might be going on.

if (99 == "99") {

console.log("A number equals a string!");

} else {

console.log("No way a number equals a string");

}

JavaScript console

A number equals a string!

Here’s what we got.

object

SOLUTION

you are here 4 311

types, equality, conversion and all that jazz

Compares values to see if they are equal. This

guy won’t even consider values that have

different types.

We had our descriptions for these operators all figured out, and then they got all mixed up. Can

you help us figure out who does what? Be careful, we’re not sure if each contender matches zero,

one or more descriptions. Here’s our solution:

=== Assigns a value to a variable.

Compares values to see if they are equal. This

is the considerate equality operator. He’ll go

to the trouble of trying to convert your types

to see if you are really equal.

Compares object references and returns

true if they are the same and false otherwise.

====

For each comparison below write true or false below the

operators == or == = to represent the result of the comparison:

Both these

work if you're

comparing two

objects!

There is

no such

operator.

SOlUTion

"42" == 42

== ===

"0" == 0

"0" == false

"true" == true

true == (1 == "1")

true

Tricky!

"42" === 42

"0" === 0

"0" === false

"true" === true

true === (1 === "1")

true

false

true false

false

If you replace both == with

===, then the result is false.

false

312 Chapter 7

exercise solutions

For each expression below, write the result in the blank next to it. We’ve done one

for you. Here’s our solution.

Infinity - "1"

"42" + 42

2 + "1 1"

99 + 101

"1" - "1"

console.log("Result: " + 10/2)

3 + " bananas " + 2 + " apples"

Infinity

“4242”

“21 1”

200

“Result: 5”

“3 bananas 2 apples”

“1” is converted to 1, and

Infinity - 1 is Infinity.

Both strings are

converted to 1, and

1-1 is 0.

10/2 happens first,

and the result is

concatenated to the

string “Result: ”

Each + is concatenation because

for both, one operand is a string.

you are here 4 313

types, equality, conversion and all that jazz

Time for a quick lie detector test. Figure out how many lies the perp tells, and

whether the perp is guilty as charged, by determining which values are truthy

and which values are falsey. Here’s our solution. Did you try these out in the

browser yourself?

function lieDetectorTest() {

var lies = 0;

var stolenDiamond = { };

if (stolenDiamond) {

console.log("You stole the diamond");

lies++;

}

var car = {

keysInPocket: null

};

if (car.keysInPocket) {

console.log("Uh oh, guess you stole the car!");

lies++;

}

if (car.emptyGasTank) {

console.log("You drove the car after you stole it!");

lies++;

}

var foundYouAtTheCrimeScene = [ ];

if (foundYouAtTheCrimeScene) {

console.log("A sure sign of guilt");

lies++;

}

if (foundYouAtTheCrimeScene[0]) {

console.log("Caught with a stolen item!");

lies++;

}

var yourName = " ";

if (yourName) {

console.log("Guess you lied about your name");

lies++;

}

return lies;

}

var numberOfLies = lieDetectorTest();

console.log("You told " + numberOfLies + " lies!");

if (numberOfLies >= 3) {

console.log("Guilty as charged");

}

A string with one space.

JavaScript console

You stole the diamond

A sure sign of guilt

Guess you lied about your name

You told 3 lies!

Guilty as charged

Any object is truthy,

even an empty one.

This perp didn't steal the car because

the value of the keysInPocket property

is null, which is falsey.

And the perp didn't drive

the car either, because the

emptyGasTank property is

undefined, which is falsey.

But [ ] (an empty array)

is truthy, so the perp was

caught on the scene.

There is no item in the array, so

the array item at 0 is undefined,

which is falsey. Hmm, the perp must

have hidden the stash already.

Any non-empty string is truthy,

even if it just has one space!

The number of lies is 3 so we think the perp is guilty.

314 Chapter 7

exercise solutions

Earl, from

Earl’s Autos.

function findCarInLot(car) {

for (var i = 0; i < lot.length; i++) {

if (car === lot[i]) {

return i;

}

return -1;

}

var chevy = {

make: "Chevy",

model: "Bel Air"

};

var taxi = {

make: "Webville Motors",

model: "Taxi"

};

var fiat1 = {

make: "Fiat",

model: "500"

};

var fiat2 = {

make: "Fiat",

model: "500"

};

var lot = [chevy, taxi, fiat1, fiat2];

var loc1 = findCarInLot(fiat2);

var loc2 = findCarInLot(taxi);

var loc3 = findCarInLot(chevy);

var loc4 = findCarInLot(fiat1);

Here's a little code that helps find cars in Earl’s Used Autos parking lot.

Trace through this code and write the values of loc1 through loc4 below.

Here are our answers.

you are here 4 315

types, equality, conversion and all that jazz

IN THE LABORATORY, AGAIN

The lab crew typeof





new operator, instanceof



Warning: this is



function Duck(sound) {

this.sound = sound;

this.quack = function() {console.log(this.sound);}

}

var toy = new Duck("quack quack");

toy.quack();

console.log(typeof toy);

console.log(toy instanceof Duck);

JavaScript console

Here's the code. Read it, run it, alter

it, massage it, see what it does...

Here are our results.

How strange. Doesn't this look a bit like

a mix of a function and an object?

Hmm “new". We've haven't seen that before. But

we're guessing we should read this as, create a new

Duck and assign it to the toy variable.

If it looks like an object, and walks like an object...

let's test it.

Okay, and here is instanceof...

SOLUTION

quack quack

object

true

The toy acts like an

object... we can call

its method.

And the type is object.

But it is an “instanceof”

a Duck, whatever that

means... Hmm.

Just what does this all mean? Ah, we’ll be getting

to all that in just a few chapters. And, in case you

didn’t notice, you are well on your way to being a

pretty darn advanced JavaScript coder. This is

serious stuff!

316 Chapter 7

exercise solutions

JavaScript cross Solution

You’re really expanding your JavaScript skills. Do a

crossword to help it all sink in. All the answers are

from this chaper. Here’s our solution.

2A N E

Y A O

P N

6M B E R

7I E N L

O D E S

9Y R

10 E

11 F E R E N C E

E Q F T

T N

12 U L L I S

13 P L I T

15 A N R

O B

16 L A I N E N

17 U L L

D A I D E

18 T R I C T

A Y

this is a new chapter 317

Building an app

bringing it all together

Put on your toolbelt. That is, 



web

application. No more silly toy games with one battleship and a single row of

entire experience: a nice big























318 Chapter 8

building the real battleship game

Sure, you can feel good because back in Chapter 2 you built a nice little battleship game

from scratch, but let’s admit it: that was a bit of a  game—it worked, it was playable,

but it wasn’t exactly the game you’d impress your friends with, or use to raise your first

round of venture capital. To really impress, you’ll need a visual game board, snazzy

battleship graphics, and a way for players to enter their moves right in the game (rather

than a generic browser dialog box). You’ll also want to improve the previous version by

supporting all three ships.

In other words, you’ll want to create something like this:

This time, let’s build a REAL Battleship game

Highly visual game

board right in the

web page, complete

with a grid.

Enter your guesses

right in the page.

Your hits and

misses are placed

right on the

game board as

you take your

shots.

And now we’ve

got all three ships

ducking your shots.







you are here 4 319

bringing it all together

Stepping back... to HTML and CSS

To create a modern, interactive web page, or app, you need to

work with three technologies: HTML, CSS and JavaScript. You

already know the mantra “HTML is for structure, CSS is for

style and JavaScript is for behavior.” But rather than just stating

it, in this chapter we’re going to fully embody it. And we’re

going to start with the HTML and CSS first.

Our first goal is going to be to reproduce the look of the game

board on the previous page. But not  reproduce it; we need

to implement the game board so it has a structure we can use

in JavaScript to take player input and place hits, misses and

messages on the page.

To pull that off we’re going to do things like use an image in the

background to give us the slick grid over a radar look, and then

we’ll lay a more functional HTML table over that so we can

place things (like ships) on top of it. We’ll also use an HTML

form to get the player input.

board.jpg

ship.png

miss.png

INVENTORY includes...

This toolkit contains three images,







is a small ship for placement on



image with transparency, so it will





which is also meant to be placed on



when we hit a ship we place a ship

in the corresponding cell, and when

we miss we place a miss graphic

there.

GET YOUR

Battleship Toolkit

GET YOUR

Battleship Toolkit

And then add an

HTML table that

overlays the grid.

We’ll place an

image in the

background of

the page that

depicts the grid

of the game.

Download everything you need for the

game at http://wickedlysmart.com/hfjs



this new version of Battleship.

Then we can place the ship or MISS

graphic in the table cells as needed.

So, let’s build this game. We’re going to take a step back and

spend a few pages on the crucial HTML and CSS, but once

we have that in place, we’ll be ready for the JavaScript.

320 Chapter 8

planning the html for the game

1First we’ll concentrate on the background

of the game, which includes setting the

background image to black and placing the

radar grid image in the page.

2Next we’ll create an HTML table and lay

it on top of the background image. Each

cell in the table will represent a board

cell in the game.

3Then we’ll add an HTML form element

where players can enter their guesses,

like “A4”. We’ll also add an area to

display messages, like “You sank my

battleship!”

Creating the HTML page: the Big Picture

Here’s the plan of attack for creating the Battleship HTML page:

Finally, we’ll figure out how to use

the table to place the images of a

battleship (for a hit) and a MISS (for a

miss) into the board.

An HTML form

for player input.

We’re placing an image in

the background to give

the game its cool, green

phosphorus radar feel.

An HTML table

on top of the

background creates

a game board for

the game to play

out in.

We’ll use these

images and place

them into the

table as needed.

Step 1: The Basic HTML

Let’s get started! First we need an HTML

page. We’re going to start by creating a simple

HTML5-compliant page; we’ll also add some

styling for the background image. In the page

we’re going to place a <body> element that

contains a single <div> element. This <div>

element is going to hold the game grid.

Go ahead and check out the next page that

contains our starter HTML and CSS.

A little rusty?

If you’re feeling a bit rusty

on your HTML and CSS,

Head First HTML and

CSS was written to be the

companion to this book.

you are here 4 321

bringing it all together

<!doctype html>

<head>

<title>Battleship</title>

<style>

body {

background-color: black;

}

div#board {

position: relative;

width: 1024px;

height: 863px;

margin: auto;

background: url("board.jpg") no-repeat;

}

</style>

</head>

<body>

</div>

</body>

</html>

Just a regular HTML page.

We want the game board to stay in the

middle of the page, so we’re setting the

width to 1024px (the width of the game

board), and the margins to auto.

And we want the background

of the page to be black.

Here’s where we add the

“board.jpg” image to the page, as

the background of the “board”

<div> element. We’re positioning

this <div> relative, so that we can

position the table we add in the

next step relative to this <div>.

We’re going to put the

table for the game

board and the form for

getting user input here.

Here’s what the web

page looks like so far...

A Test Drive Go ahead and enter the code above (or download all the code for the book from

http://wickedlysmart.com/hfjs) into the file “battleship.html” and then load it in your

browser. Our test run is below.

We’ll put our code in the file

“battleship.js”. Go ahead and

create a blank file for that.

322 Chapter 8

creating the html for the game

Step 2: Creating the table

<table>

<tr>

</td><td id="04"></td> <td id="05"></td><td id="06"></td>

</tr>

<tr>

</tr>

...

<tr>

</tr>

</table>

</div>

Next up is the table. The table will overlay the visual grid in the background image, and

provide the area to place the hit and miss graphics where you play the game. Each cell (or

if you remember your HTML, each <td> element) is going to sit right on top of a cell

in the background image. Now here is the trick: we’ll give each cell its own id, so we can

manipulate it later with CSS and JavaScript. Let’s check out how we’re going to create

these ids and add the HTML for the table:

Each cell of the grid

corresponds to a <td>

in the table.

Each id represents the

cell’s location in the grid.

So, the top-left cell gets

the id of “00” and the

bottom-right cell gets

the id “66”. In the game, the rows are represented

with letters (A, B, C, etc.) but for our

ids, we’re going to replace the letter

with its corresponding number (0, 1, 2,

etc.) So the first row of the grid is row

0 (for A), and the last one is 6 (for G).

This is cell is id “66”

Here’s the HTML for the table. Go ahead and add this between the <div> tags:

We’re nesting the table inside the “board” <div>.

Make sure each <td>

gets the correct id

corresponding to its row

and column in the grid.

We’ve left out a few rows to

save some trees, but we’re sure

you can fill these in on your own.

This cell has id=“06”

you are here 4 323

bringing it all together

Step 3: Player interaction

Okay, now we need an HTML element to enter guesses (like “A0” or “E4”), and an

element to display messages to the player (like “You sank my battleship!”). We’ll use a

<form> with a text <input> for the player to submit guesses, and a <div> to create an

area where we can message the player:

<table>

...

</table>

<form>

</form>

</div>

We'll notify players

when they’ve sunk

battleships with a

message up in the top

left corner.

And here’s where

players can enter

their guesses.

The messageArea <div> will be used to

display messages from code.

The <form> has two inputs: one

for the guess (a text input) and

one for the button. Note the

ids on these elements. We’ll need

them later when we write the

code to get the player’s guess.

Notice that the message area <div>, the <table>, and

the <form> are all nested within the “board” <div>.

This is important for the CSS on the next page.

324 Chapter 8

adding CSS to the game

Adding some more style

If you load the page now (go ahead, give it a try), most of the

elements are going to be in the wrong places and the wrong

size. So we need to provide some CSS to put everything in the

right place, and make sure all the elements, like the table cells,

have the right size to match up with the game board image.

To get the elements into the right places, we’re going to use

CSS positioning to lay everything out. We’ve positioned the

“board” <div> element using position relative, so we can now

position the message area, table, and form at specific places

within the “board” <div> to get them to display exactly where

we want them.

Let’s start with the “messageArea” <div>. It’s nested inside the

“board” <div>, and we want to position it at the very top left

corner of the game board:

body {

background-color: black;

}

div#board {

position: relative;

width: 1024px;

height: 863px;

margin: auto;

background: url("board.jpg") no-repeat;

}

div#messageArea {

position: absolute;

top: 0px;

left: 0px;

color: rgb(83, 175, 19);

}

We're positioning

the message area

at the top left of

the board.

The “board” <div> is positioned

relative, so everything nested

within this <div> can be

positioned relative to it.

We want the message area to

be positioned at the top left

corner of the game board.

“position: relative” positions an

element at its normal location in the



“position: absolute” positions an

element based on the position of its

most closely positioned parent.

The top and left properties can

be used to specify the number

of pixels to offset a positioned

element from its default position.

The messageArea <div> is nested inside the board

<div>, so its position is specified relative to the

board <div>. So it will be positioned 0px from

the top and 0px from the left of the top left

corner of the board <div>.

you are here 4 325

bringing it all together

body {

background-color: black;

}

div#board {

position: relative;

width: 1024px;

height: 863px;

margin: auto;

background: url("board.jpg") no-repeat;

}

div#messageArea {

position: absolute;

top: 0px;

left: 0px;

color: rgb(83, 175, 19);

}

table {

position: absolute;

left: 173px;

top: 98px;

border-spacing: 0px;

}

td {

width: 94px;

height: 94px;

}

form {

position: absolute;

bottom: 0px;

right: 0px;

padding: 15px;

background-color: rgb(83, 175, 19);

}

form input {

background-color: rgb(152, 207, 113);

border-color: rgb(83, 175, 19);

font-size: 1em;

}

We can also position the table and the form within the “board” <div> , again

using absolute positions to get these elements precisely where we want them.

Here’s the rest of the CSS:

We position the <table> 173 pixels from

the left of the board and 98 pixels

from the top, so it aligns with the grid

in the background image.

Each <td> gets a specific width and

height so that the cells of the <table>

match up with the cells of the grid.

We’re placing the <form> at the bottom

right of the board. It obscures the

bottom right numbers a bit, but that’s

okay (you know what they are). We’re also

giving the <form> a nice green color to

match the background image.

And finally, a bit of styling on the two

<input> elements so they fit in with the

game theme, and we’re done!

326 Chapter 8

using CSS for hits and misses

A Test Drive It’s time for another game checkpoint. Get all the HTML and CSS entered into your

HTML file and then reload the page in your browser. Here’s what you should see:

Step 4: Placing the hits and misses

The game board is looking great don’t you think? However, we still need to figure

out how to visually add hits and misses to the board—that is, how to add either

a “ship.png” image or a “miss.png” image to the appropriate spot on the board

for each guess. Right now we’re only going to worry about how to craft the right

markup or style to do this, and then later we’ll use the same technique in code.

So how do we get a “ship.png” image or a “miss.png” image on the board? A

straightforward way is to add the appropriate image to the background of a <td>

element using CSS. Let’s try that by creating two classes, one named “hit” and

the other “miss”. We’ll use the background CSS property with these images so

an element styled with the “hit” class will have the “ship.png” in its background,

and an element styled with the “miss” class will have the “miss.png” image in its

background. Like this:

.hit {

background: url("ship.png") no-repeat center center;

}

.miss {

background: url("miss.png") no-repeat center center;

}

Even though you can’t see

it (because it’s invisible), the

table is sitting right on top

of the grid.

The form input is ready to

take your guesses, although

nothing will happen until we

write some code.

ship.png

miss.png

Each CSS rule

places a single,

centered image

in the selected

element.

If an element is in the hit class it gets the ship.png image. If the

element is in the miss class, it gets the miss.png image in its background.

you are here 4 327

bringing it all together

Practice DrillsPractice Drills

Ship 1: A6, B6, C6

Ship 2: C4, D4, E4

Ship 3: B0, B1, B2

and here are the player’s guesses:

A0, D4, F5, B2, C5, C6

Check your answer at the end of the chapter before you go on.

Before we write the code that’s going to place hits and misses on the game board, get a little more

practice to see how the CSS works. Manually play the game by adding the “hit” and “miss” classes into

your markup, as dictated by the player’s moves below. Be sure to check your answers!

Using the hit and miss classes

<tr>

</tr>

Make sure you’ve added the hit and miss class definitions to your CSS.

You may be wondering how we’re going to use these classes. Let’s do

a little experiment right now to demonstrate: imagine you have a ship

hidden at “B3”, “B4” and “B5”, and the user guesses “B3”—a hit! So,

you need to place a “ship.png” image at B3. Here’s how you can do

that: first convert the “B” into a number, 1 (since A is 0, B is 1, and so

on), and find the <td> with the id “13” in your table. Now, add the

class “hit” to that <td>, like this:

Now when you reload the page, you’ll see a battleship at location

“B3” in the game board.

What we see when we add the

class “hit” to element with id “13”.

Make sure you’ve added the

hit and miss classes from the

previous page to your CSS.

When you’re done,

remove any classes

that you’ve added to

your <td> elements so

you’ll have an empty

board to use when we

start coding.

Remember, you’ll

need to convert the

letters to numbers,

with A = 0, ... G = 6.

Here we’ve added the “hit” class to the <td>.

328 Chapter 8

questions about the game

Q: I didn’t know it was okay to use a

string of numbers for the id attributes in

our table?

A: Yes. As of HTML5, you are allowed

to use all numbers as an element id. As

long as there are no spaces in the id value,

it’s fine. And for the Battleship application,

using numbers for each id works perfectly

as a way to keep track of each table

position, so we can access the element at

that position quickly and easily.

Q: So just to make sure I understand,

we’re using each td element as a cell

in the gameboard, and we’ll mark a cell

as being a hit or a miss with the class

attribute?

A: Right, there are a few pieces here:

we have a background image grid that is

just for eye candy, we have a transparent

HTML table overlaying that, and we use

the classes “hit” and “miss” to put an image

in the background of each table cell when

needed. This last part will all be done from

code, when we’re going to dynamically add

the class to an element.

Q: It sounds like we’re going to

need to convert letters, as in “A6”, to

numbers so we get “06”. Will JavaScript

do this automatically for us?

A: No, we’re going to have to do that

ourselves, but we have an easy way to

do it—we’re going to use what you know

about arrays to do a quick conversion…

stay tuned.

Q: I’m not sure I completely

remember how CSS positioning works.

A: Positioning allows you to specify an

exact position for an element. If an element

is positioned “relative”, then the element

is positioned based on its normal location

in the flow of the page. If an element is

positioned “absolute”, then that element is

positioned at a specific location, relative

to its most closely positioned parent.

Sometimes that’s the entire page, in which

case the position you specify could be its

top left position based on the corner of the

web browser. In our case, we’re positioning

the table and message area elements

absolutely, but in relation to the game board

(because the board is the most closely

positioned parent of the table and the

message area).

If you need a more in-depth refresher on

CSS positioning, check out Chapter 11 of

Head First HTML and CSS.

Q: When I learned about the HTML

form element, I was taught there is an

action attribute that submits the form.

Why don’t we have one?

A: We don’t need the action attribute in

the <form> because we’re not submitting

the form to a server-side application. For

this game, we’re going to be handling

everything in the browser, using code.

So, instead of submitting the form, we’re

going to implement an event handler to be

notified when the form button is clicked,

and when that happens, we’ll handle

everything in our code, including getting

the user’s input from the form. Notice that

the type of the form button is “button”, not

“submit”, like you might be used to seeing

if you’ve implemented forms that submit

data to a PHP program or another kind of

program that runs on the server. It’s a good

question; more on this later in the chapter.

you are here 4 329

bringing it all together

How to design the game

With the HTML and CSS out of the way, let’s get to the real game design. Back in Chapter 2, we

hadn’t covered functions or objects or encapsulation or learned about object-oriented design, so

when we built the first version of the Battleship game, we used a procedural design—that is, we

designed the game as a series of steps, with some decision logic and iteration mixed in. You also

hadn’t learned about the DOM, so the game wasn’t very interactive. This time around, we’re

going to organize the game into a set of objects, each with its own responsibilities, and we’re

going to use the DOM to interact with the user. You’ll see how this design makes approaching the

problem a lot more straightforward.

Let’s first get introduced to the objects we’re going to design and implement. There are three:

the , which will hold the state of the game, like where each ship is located and where it’s

been hit; the , which is responsible for updating the display; and the , which glues

everything together by handling the user input, making sure the game logic gets played and

determining when the game is over.

Model

View

Controller

























330 Chapter 8

exercise to build the view

Here’s a message.

Messages will be things like

“HIT!”, “You missed.” and

“You sank my battleship!”

Here the display has

a MISS placed on

the grid.

And here the display has a

ship placed on the grid.

It’s time for some object design. We’re going to start with the view object. Now,

remember, the view object is responsible for updating the view. Take a look at the

view below and see if you can determine the methods we want the view object to

implement. Write the declarations for these methods below (just the declarations;

we’ll code the bodies of the methods in a bit) along with a comment or two about

what each does. We’ve done one for you. Check your answers before moving on:

var view = {

// this method takes a string message and displays it

// in the message display area

displayMessage: function(msg) {

// code to be supplied in a bit!

}

};

Your methods go here!

Notice we’re defining an object and

assigning it to the variable view.

you are here 4 331

bringing it all together

var view = {

displayMessage: function(msg) {

displayHit: function(location) {

displayMiss: function(location) {

}

};

Implementing the View

If you checked the answer to the previous exercise, you’ve

seen that we’ve broken the view into three separate methods:

displayMessage, displayHit and displayMiss. Now,

there is no one right answer. For instance, you might have just

two methods, displayMessage and displayPlayerGuess,

and pass an argument into displayPlayerGuess that

indicates if the player’s guess was a hit or a miss. That is a

perfectly reasonable design. But we’re sticking with our design

for now... so let’s think through how to implement the first

method, displayMessage:

Here’s our view object.

We’re going to start here.

How displayMessage works

To implement the displayMessage method you need to

review the HTML and see that we have a <div> with the id

“messageArea” ready for messages:

...

</div>

We’ll use the DOM to get access to this <div>, and then

set its text using innerHTML. And remember, whenever you

change the DOM, you’ll see the changes immediately in the

browser. Here’s what we’re going to do…

If not, shame on you. Do it now!

332 Chapter 8

thinking about object design











That’s one great thing about objects.

We can make sure objects fulfill their responsibility

without worrying about every other detail of the

program. In this case the view just needs to know

how to update the message area and place hit and

miss markers on the grid. Once we’ve correctly

implemented that behavior, we’re done with the view

object and we can move on to other parts of the code.

The other advantage of this approach is we can test

the view in isolation and make sure it works. When we

test many aspects of the program at once, we increase

the odds something is going to go wrong and at the

same time make the job of finding the problem more

difficult (because you have to examine more areas of

the code to find the problem).

To test an isolated object (without having finished the

rest of the program yet), we’ll need to write a little

testing code that we’ll throw away later, but that’s

okay.

So let’s finish the view, test it, and then move on!

Use the DOM to get the element with the id “messageArea”.

Set that element’s innerHTML to the message passed to the

displayMessage method.

Implementing displayMessage

Let’s get back to writing the code for displayMessage. Remember it needs to:

you are here 4 333

bringing it all together

var view = {

displayMessage: function(msg) {

var messageArea = document.getElementById("messageArea");

messageArea.innerHTML = msg;

displayHit: function(location) {

displayMiss: function(location) {

}

};

So open up your blank “battleship.js” file, and add the view object:

The displayMessage method

takes one argument, a msg.

We get the messageArea

element from the page...

...and update the text of the messageArea

element by setting its innerHTML to msg.

Now before we test this code, let’s go ahead and write the other two

methods. They won’t be incredibly complicated methods, and this

way we can test the entire object at once.

How displayHit and displayMiss work

So we just talked about this, but remember, to have an image appear on

the game board, we need to take a <td> element and add either the “hit”

or the “miss” class to the element. The former results in a “ship.png”

appearing in the cell and the latter results in “miss.png” being displayed.

<tr>

<td id="10"></td> <td class="hit" id="11"></td> <td id="12"></td> ...

</tr>

Now in code, we’re going to use the DOM to get access to a

<td>, and then set its class attribute to “hit” or “miss” using the

setAttribute element method. As soon as we set the class

attribute, you’ll see the appropriate image appear in the browser.

Here’s what we’re going to do:

Get a string id that consists of two numbers for the

location of the hit or miss.

Use the DOM to get the element with that id.

Set that element’s class attribute to “hit” if we’re in

displayHit, and “miss” if we’re in displayMiss.

We can affect the display by

adding the “hit” or “miss” class to

the <td> elements. Now we just

need to do this from code.

334 Chapter 8

implementing the view

We’re using the id we created from

the player's guess to get the correct

element to update.

var view = {

displayMessage: function(msg) {

var messageArea = document.getElementById("messageArea");

messageArea.innerHTML = msg;

displayHit: function(location) {

var cell = document.getElementById(location);

cell.setAttribute("class", "hit");

displayMiss: function(location) {

var cell = document.getElementById(location);

cell.setAttribute("class", "miss");

}

};

And then setting the class of

that element to “hit”.

We do the same thing in displayMiss,

only we set the class to “miss” which

adds a miss image to the element.

Remember the location is created

from the row and column and

matches an id of a <td> element.

Make sure you add the code for displayHit and displayMiss to your “battleship.js” file.

Implementing displayHit and displayMiss

Both displayHit and displayMiss are methods that take the location of a hit or

miss as an argument. That location should match the id of a cell (or <td> element) in

the table representing the game board in the HTML. So the first thing we need to do is

get a reference to that element with the getElementById method. Let’s try this in the

displayHit method:

Now let’s add this code to the view object, and write displayMiss as well:

We then set the class of that element

to “hit”. This will immediately add a

ship image to the <td> element.

displayHit: function(location) {

var cell = document.getElementById(location);

The next step is to add the class “hit” to the cell, which we can do with the

setAttribute method like this:

displayHit: function(location) {

var cell = document.getElementById(location);

cell.setAttribute("class", "hit");

you are here 4 335

bringing it all together

Another Test Drive...

Let’s put the code through its paces before moving on…in fact,

let’s take the guesses from the previous Practice Drills exercise and

implement them in code. Here’s the sequence we want to implement:

To represent that sequence in code, add this to the bottom of

your “battleship.js” JavaScript file:

HIT

A0, D4, F5, B2, C5, C6

MISS MISS HIT MISS HIT

view.displayMiss("00");

view.displayHit("34");

view.displayMiss("55");

view.displayHit("12");

view.displayMiss("25");

view.displayHit("26");

Remember, displayHit and displayMiss take

a location in the board that's already been

converted from a letter and a number to

a string with two numbers that corresponds

to an id of one of the table cells.

“A0”

“D4”

“F5”

“B2”

“C5”

“C6”

And, let’s not forget to test displayMessage:

view.displayMessage("Tap tap, is this thing on?");

Any message will do for

simple testing...

After all that, reload the page in your browser and check out the

updates to the display.

The “tap tap” message is

displayed up here at the

top left of the view.

And the hits and misses we

displayed using the view object

are displayed in the game board.

Check each one to make sure

it’s in the right spot.

One of the benefits

of breaking up the

code into objects

and giving each

object only one

responsibility is

that we can test

each object to make

sure it’s doing its

job correctly.

336 Chapter 8

planning the model

The Model

With the view object out of the way, let’s move on to the model. The model is where we

keep the state of the game. The model often also holds some  relating to how the state

changes. In this case the state includes the location of the ships, the ship locations that have

been hit, and how many ships have been sunk. The only logic we’re going to need (for now)

is determining when a player’s guess has hit a ship and then marking that ship with a hit.

Here’s what the model object is going to look like:

Model

ships

shipsSunk



fire



These are all

properties that hold

the current state of

the game.

And this is a method that

handles firing upon the ships.

When the state of the game changes—that is, when you hit a ship, or miss—then the view

needs to update the display. To do this, the model needs to talk to the view, and luckily we

have a few methods the model can use to do that. We’ll get our game logic set first in the

model, then we’ll add code to update the view.

How the model interacts with the view

Model

View

















The model notifies the view of a

change in state, so the view can

take care of updating the display.

numShips



shipLength



boardSize



you are here 4 337

bringing it all together

0 1 2 3 4 5 6

Ship3

Ship2

Ship1

Each ship takes up three

cells on the 2D board.

This ship sits at locations

“B0”, “C0”, “D0”.

Here’s another ship at

D2 through D4. We also need to be able to

keep track of hits. Each

ship has three locations, so

we need to store three hits

for each ship too.

You’re gonna need a bigger boat... and game board

Before we start writing model code, we need to think about how to represent the state of

the ships in the model. Back in Chapter 2 in the simple Battleship game, we had a single

ship that sat on a 1x7 game board. Now things are a little more complex: we have three

ships on a 7x7 board. Here’s how it looks now:

Given how we’ve described the new game board above, how would you

represent the ships in the model (just the locations, we’ll worry about

hits later). Check off the best solution below.

❏Use nine variables for the ship locations,

similar to the way we handled the ships in

Chapter 2.

❏Use an array with an item for each cell in

entire board (49 items total). Record the ship

number in each cell that holds part of a ship.

❏Use an array to hold all nine locations. Items

0-2 will hold the first ship, 3-5 the second, and

so on.

❏Use three different arrays, one for each ship,

with three locations contained in each.

❏Use an object named ship with three location

properties. Put all the ships in an array named

ships.

❏______________________________________

______________________________________

HIT

And a third ship at G3-G5.

You’ll note that the ships don’t

overlap on the board. That

would be impossible on a physical

Battleship board and would lead

to weird game play. We’ll come

back later to see how to make

sure ships don't overlap when

we talk about how to randomly

place ships on the board.

Or write in your own answer.

338 Chapter 8

a data structure for the ships

var ships = [{ locations: ["10", "20", "30"], hits: ["", "", ""] },

{ locations: ["32", "33", "34"], hits: ["", "", ""] },

{ locations: ["63", "64", "65"], hits: ["", "", "hit"] }];

As you can see there are many ways we can represent ships, and you may have

even come up with a few other ways of your own. You’ll find that no matter

what kind of data you’ve got, there are many choices for storing that data,

with various tradeoffs depending on your choice—some methods will be space

efficient, others will optimize run time, some will just be easier to understand,

and so on.

We’ve chosen a representation for ships that is fairly simple—we’re representing

each ship as an object that holds the locations it sits in, along with the hits it’s

taken. Let’s take a look at how we represent one ship:

How we’re going to represent the ships

And, rather than managing three different variables to hold the ships,

we’ll create a single array variable to hold them all, like this:

Each ship has an array of three

locations and an array to track hits.

Note the plural name, ships.

Here’s the first ship...

...and the second...

...and the third.

var ship1 = { locations: ["10", "20", "30"], hits: ["", "", ""] };

var ship2 = { locations: ["32", "33", "34"], hits: ["", "", ""] };

var ship3 = { locations: ["63", "64", "65"], hits: ["", "", "hit"] };

var ship1 = {

locations: ["10", "20", "30"],

hits: ["", "", ""]

};

Here’s what all three ships would look like:

Each ship is an object.

The ship has a locations

property and a hits property.

The locations property is

an array that holds each

location on the board.

The hits property is also an array that holds whether

or not a ship is hit at each location. We'll set the

array items to the empty string initially, and change

each item to “hit" when the ship has taken a hit in

the corresponding location.

We're assigning to ships an array

that holds all three ships.

Note this ship has a hit at

location “65" on the grid.

Note that we've converted

the ship locations to two

numbers, using 0 for A, 1 for

B, and so on.

you are here 4 339

bringing it all together

var ships = [{ locations: ["06", "16", "26"], hits: ["hit", "", ""] },

{ locations: ["24", "34", "44"], hits: ["", "", ""] },

{ locations: ["10", "11", "12"], hits: ["", "", ""] }];

Ship Magnets

Use the following player moves, along with the data structure for the

ships, to place the ship and miss magnets onto the game board. Does

the player sink all the ships? We’ve done the first move for you.

Here are the moves:

A6, B3, C4, D1, B0, D4, F0, A1, C6, B1, B2, E4, B6

Execute these moves

on the game board.

Here is the data

structure. Mark each

ship with a hit as the

game is played.

And here's the board and your magnets.

You might have leftover magnets.

340 Chapter 8

exercise in data structures

Let’s practice using the ships data structure to simulate some ship activities.

Using the ships definition below, work through the questions and the code

below and fill in the blanks. Make sure you check your answers before moving

on, as this is an important part of how the game works:

The player guesses "D4", does that hit a ship?______ If so, which one? __________

The player guesses "B3", does that hit a ship?______ If so, which one? __________

Which ships are already hit?____________ And, at what locations? ______________

Finish this code to access the second ship's middle location and print its value

with console.log.

var ship2 = ships[____];

var locations = ship2.locations;

console.log("Location is " + locations[____]);

Finish this code to see if the third ship has a hit in its first location:

var ship3 = ships[____];

var hits = ship3._____;

if (_____ === "hit") {

console.log("Ouch, hit on third ship at location one");

}

Finish this code to hit the first ship at the third location:

var ______ = ships[0];

var hits = ship1._______;

hits[____] = ________;

var ships = [{ locations: ["31", "41", "51"], hits: ["", "", ""] },

{ locations: ["14", "24", "34"], hits: ["", "hit", ""] },

{ locations: ["00", "01", "02"], hits: ["hit", "", ""] }];

you are here 4 341

bringing it all together

var model = {

boardSize: 7,

numShips: 3,

shipLength: 3,

shipsSunk: 0,

ships: [{ locations: ["06", "16", "26"], hits: ["", "", ""] },

{ locations: ["24", "34", "44"], hits: ["", "", ""] },

{ locations: ["10", "11", "12"], hits: ["", "", ""] }]

};

Implementing the model object

Now that you know how to represent the ships and the hits, let’s get some

code down. First, we’ll create the model object, and then take the ships

data structure we just created, and add it as a property. And, while we’re at it,

there are a few other properties we’re going to need as well, like numShips,

to hold the number of ships we have in the game. Now, if you’re

asking, “What do you mean, we know there are three ships, why

do we need a numShips property?” Well, what if you wanted

to create a new version of the game that was more difficult

and had four or five ships? By not “hardcoding” this value,

and using a property instead (and then using the property

throughout the code rather than the number), we can save

ourselves a future headache if we need to change the number

of ships, because we’ll only need to change it in one place.

Now, speaking of “hardcoding”, we are going to hardcode the

ships’ initial locations, for now. By knowing where the ships are,

we can test the game more easily, and focus on the core game logic for

now. We’ll tackle the code for placing random ships on the game board a

little later.

So let’s get the model object created:

The model is an object.

These three properties keep us from hardcoding values.

They are: boardSize (the size of the grid used for the

board), numShips (the number of ships in the game), and

shipLength (the number of locations in each ship, 3).

The property ships is the array of

ship objects that each store the

locations and hits of one of the

three ships. (Notice that we’ve

changed ships from a variable,

which we used before, to a

property for the model object.)

We've got

quite a bit of

state already!

Later on, we’ll generate these locations

for the ships so they’re random, but

for now, we’ll hardcode them to make

it easier to test the game.

Model

ships



shipsSunk





numShips





fire







shipLength





boardSize



shipsSunk (initialized to 0 for the start of the game) keeps

the current number of ships that have been sunk by the player.

Note we’re also hardcoding the sizes of the locations and hits arrays.

You’ll learn how to dynamically create arrays later in the book.

342 Chapter 8

planning the fire method

Setting up the fire method

Let’s get a basic skeleton of the fire method set up. The method will take a guess as an

argument, and then iterate over each ship to determine if that ship was hit. We won’t write

the hit detection code just yet, but let’s get the rest set up now:

Examine each ship and see if it occupies that location.

If it does, you have a hit, and we’ll mark the corresponding item

in the hits array (and let the view know we got a hit). We’ll also

return true from the method, meaning we got a hit.

If no ship occupies the guessed location, you’ve got a miss. We’ll let

the view know, and return false from the method.

Thinking about the fire method

The fire method is what turns a player’s guess into a hit or a miss. We already

know the view object is going to take care of displaying the hits and misses,

but the fire method has to provide the game logic for determining if a

hit or a miss has occurred.

Knowing that a ship is hit is straightforward: given a player’s guess,

you just need to:

Now the fire method should also determine if a ship isn’t just hit, but if it’s sunk. We’ll

worry about that once we have the rest of the logic worked out.

var model = {

boardSize: 7,

numShips: 3,

shipsSunk: 0,

shipLength: 3,

ships: [{ locations: ["06", "16", "26"], hits: ["", "", ""] },

{ locations: ["24", "34", "44"], hits: ["", "", ""] },

{ locations: ["10", "11", "12"], hits: ["", "", ""] }],

fire: function(guess) {

for (var i = 0; i < this.numShips; i++) {

var ship = this.ships[i];

}

};

The method accepts a guess.

Then, we iterate through the array

of ships, examining one ship at a time.

Here we have our hands on a ship. We need to see if the guess matches any of its locations.

Model

ships



shipsSunk





numShips





fire







shipLength





boardSize



Don't forget to

add a comma here!

you are here 4 343

bringing it all together

for (var i = 0; i < this.numShips; i++) {

var ship = this.ships[i];

locations = ship.locations;

var index = locations.indexOf(guess);

if (index >= 0) {

// We have a hit!

}

Looking for hits

So now, each time through the loop, we need to see if the guess is one of the

locations of the ship:

for (var i = 0; i < this.numShips; i++) {

var ship = this.ships[i];

locations = ship.locations;

}

What we need is the code that

determines if the guess is in this

ship's locations.

And we're stepping

through each ship.

And we've accessed the ship's set of

locations. Remember this is a property

of the ship that contains an array.

Notice that the indexOf method for an array is similar

to the indexOf string method. It takes a value and

returns the index of that value in the array (or -1 if

it can't find the value).

So if we get an index greater than or

equal to zero, the user's guess is in the

location's array, and we have a hit.

Using indexOf isn’t any more efficient than writing a loop, but it is a little clearer and it’s

definitely less code. We’d also argue that the intent of this code is clearer than if we wrote

a loop: it’s easier to see what value we’re looking for in an array using indexOf. In any

case, you now have another tool in your programming toolbelt.

So, using indexOf, we can write the code to find a hit like this:

Here’s the situation: we have a string, guess, that we’re looking for in an array,

locations. If guess matches one of those locations, we know we have a hit:

guess = "16";

locations = ["06", "16", "26"];

We could write yet another loop to go through each item in the locations array,

compare the item to guess, and if they match, we have a hit.

But rather than write another loop, we have an easier way to do this:

We need to find out if the value

in guess is one of the values in

the ship's locations array.

var index = locations.indexOf(guess);

The indexOf method searches an array for a matching

value and returns its index, or -1 if it can't find it.

344 Chapter 8

implementing the fire method

var model = {

boardSize: 7,

numShips: 3,

shipsSunk: 0,

shipLength: 3,

ships: [ { locations: ["06", "16", "26"], hits: ["", "", ""] },

{ locations: ["24", "34", "44"], hits: ["", "", ""] },

{ locations: ["10", "11", "12"], hits: ["", "", ""] } ],

fire: function(guess) {

for (var i = 0; i < this.numShips; i++) {

var ship = this.ships[i];

var locations = ship.locations;

var index = locations.indexOf(guess);

if (index >= 0) {

ship.hits[index] = "hit";

return true;

}

return false;

}

};

For each ship...

If the guess is in the locations

array, we have a hit.

So mark the hits array

at the same index.

Oh, and we need to return

true because we had a hit.

Otherwise, if we make it through all the ships and

don't have a hit, it's a miss, so we return false.

Putting that all together...

To finish this up, we have one more thing to determine here: if we

have a hit, what do we do? All we need to do, for now, is mark the hit

in the model, which means adding a “hit” string to the hits array.

Let’s put all the pieces together:

That’s a great start on our model object. There are only a couple of

other things we need to do: determine if a ship is sunk, and let the

view know about the changes in the model so it can keep the player

updated. Let’s get started on those…

you are here 4 345

bringing it all together

Wait, can we talk about your verbosity again?

Sorry, we have to bring this up again. You’re being a bit verbose in some of

your references to objects and arrays. Take another look at the code:

Some would call this code overly verbose. Why? Because some of these references can be

shortened using chaining. Chaining allows us to string together object references so that we

don’t have to create temporary variables, like the locations variable in the code above.

Now you might ask why locations is a temporary variable? That’s because we’re using

locations only to temporarily store the ship.locations array so we can then turn

around and call the indexOf method on it to get the index of the guess. We don’t need

locations for anything else in this method. With chaining, we can get rid of that temporary

locations variable, like this:

How chaining works...

Which has a method

named indexOf.

Chaining is really just a shorthand for a longer series of steps to access properties and

methods of objects (and arrays). Let’s take a closer look at what we just did to combine

two statements with chaining.

We can combine the bottom two statements by chaining together the expressions

(and getting rid of the variable locations):

ship.locations.indexOf(guess)

Which has a

locations property,

which is an array.

And then using it to access the indexOf method.

Evaluates

to the ship

object.

123

for (var i = 0; i < this.numShips; i++) {

var ship = this.ships[i];

var locations = ship.locations;

var index = locations.indexOf(guess);

...

}

First we get the ship...

Then we get the locations

in the ship...

Then we get the index of

the guess in the locations.

var index = ship.locations.indexOf(guess);

We’ve combined the two lines

highlighted above into a single line.

var ship = { locations: ["06", "16", "26"], hits: ["", "", ""] };

var locations = ship.locations;

var index = locations.indexOf(guess);

We were grabbing the locations array from the ship

Here's a ship object.

346 Chapter 8

is a ship sunk?

isSunk: function(ship) {

for (var i = 0; i < this.shipLength; i++) {

if (ship.hits[i] !== "hit") {

return false;

}

return true;

}

fire: function(guess) {

for (var i = 0; i < this.numShips; i++) {

var ship = this.ships[i];

var index = ship.locations.indexOf(guess);

if (index >= 0) {

ship.hits[index] = "hit";

if (this.isSunk(ship)) {

this.shipsSunk++;

}

return true;

}

return false;

isSunk: function(ship) { ... }

Meanwhile back at the battleship...

Now we need to write the code to determine if a ship is sunk. You know

the rules: a battleship is sunk when all of its locations are hit. We can add

a little helper method to check to see if a ship is sunk:

This method takes a ship, and

then checks every possible

location for a hit.

If there's a location that doesn't

have a hit, then the ship is still

floating, so return false.

Otherwise this ship is

sunk! Return true.

We'll call the method isSunk. It's going to take a ship and

return true if it's sunk and false if it is still floating.

We'll add the check here,

after we know for sure we

have a hit. If the ship is sunk,

then we increase the number of

ships that are sunk in model's

shipsSunk property.

Now, we can use that method in the fire method to find out if a ship is sunk:

Go ahead and add this method to

your model object, just below fire.

Here's where we added the new isSunk method, just below

fire. Don't forget to make sure you've got a comma

between each of the model's properties and methods!

you are here 4 347

bringing it all together

A view to a kill...

That’s about it for the model object. The model maintains the state of the game, and

has the logic to test guesses for hits and misses. The only thing we’re missing is the code

to notify the view when we get a hit or a miss in the model. Let’s do that now:

var model = {

boardSize: 7,

numShips: 3,

shipsSunk: 0,

shipLength: 3,

ships: [ { locations: ["06", "16", "26"], hits: ["", "", ""] },

{ locations: ["24", "34", "44"], hits: ["", "", ""] },

{ locations: ["10", "11", "12"], hits: ["", "", ""] } ],

fire: function(guess) {

for (var i = 0; i < this.numShips; i++) {

var ship = this.ships[i];

var index = ship.locations.indexOf(guess);

if (index >= 0) {

ship.hits[index] = "hit";

view.displayHit(guess);

view.displayMessage("HIT!");

if (this.isSunk(ship)) {

view.displayMessage("You sank my battleship!");

this.shipsSunk++;

}

return true;

}

view.displayMiss(guess);

view.displayMessage("You missed.");

return false;

isSunk: function(ship) {

for (var i = 0; i < this.shipLength; i++) {

if (ship.hits[i] !== "hit") {

return false;

}

return true;

}

};

Notify the view that we got

a hit at the location in guess.

And ask the view to display the message “HIT!”.

Notify the view that we got

a miss at the location in guess.

And ask the view to display

the message “You missed.”.

Let the player know that

this hit sank the battleship!

This is the whole model object so you

can see the entire thing in one piece.

Remember that the methods in the

view object add the “hit” or “miss”

class to the element with the id at

row and column in the guess string. So

the view translates the “hit” in the

hits array into a “hit” in the HTML.

But keep in mind, the “hit” in the

HTML is just for display; the “hit” in

the model represents the actual state.

348 Chapter 8

exercise for the model

A Test Drive Add all the model code to “battleship.js”. Test it by calling the model’s fire method,

passing in a row and column of a guess each time. Our ships are hardcoded still, so

it’ll be easy for you to hit them all. Try adding some of your own as well (a few more

misses). (Download “battleship_tester.js” to see our version of the test code.)

model.fire("53");

model.fire("06");

model.fire("16");

model.fire("26");

model.fire("34");

model.fire("24");

model.fire("44");

model.fire("12");

model.fire("11");

model.fire("10");

Reload “battleship.html”. You should see your hits and

misses appear on the game board.

Q: Is using chaining to combine statements better than

keeping statements separate?

A: Not necessarily better, no. Chaining isn’t much more efficient

(you save one variable), but it does make your code shorter. We’d

argue that short chains (2 or 3 levels at most) are easier to read than

multiple lines of code, but that’s our preference. If you want to keep

your statements separate, that’s fine. And if you do use chaining,

make sure you don’t create really long chains; they will be harder to

read and understand if they’re too long.

Q: We have arrays (locations) inside an object (ship) inside

an array (ships). How many levels deep can you nest objects

and arrays like this?

A: Pretty much as deep as you want. Practically, of course, it’s

unlikely you’ll ever go too deep (and if you find yourself with more

than three or four levels of nesting, it’s likely your data structure is

getting too complex and you should rethink things a bit).

Q: I noticed we added a property named boardSize to the

model, but we haven’t used it in the model code. What is that

for?

A: We’re going to be using model.boardSize, and the other

properties in model, in the code coming up. The model’s

responsibility is to manage the state of the game, and boardSize

is definitely part of the state. The controller will access the state it

needs by accessing the model’s properties, and we’ll be adding more

model methods later that will use these properties too.

You’ll need to remove

or comment out the

previous view testing

code to get the same

results as we show

here. You can see

how to do that in

battleship_tester.js.

you are here 4 349

bringing it all together

Implementing the Controller

Now that you have the view and the model complete, we’re going to start to bring

this app together by implementing the controller. At a high level, the controller glues

everything together by getting a guess, processing the guess and getting it to the model.

It also keeps track of some administrative details, like the current number of guesses

and the player’s progress in the game. To do all this the controller relies on the model

to keep the state of the game and on the view to display the game.

More specifically, here’s the set of responsibilities we’re giving the controller:

Get and process the player’s guess (like “A0” or “B1”).

Keep track of the number of guesses.

Ask the model to update itself based on the latest guess.

Determine when the game is over (that is, when all ships

have been sunk).

Controller

guesses

processGuess





Let’s get started on the controller by first defining a property, guesses, in the controller

object. Then we’ll implement a single method, processGuess, that takes an alpha-

numeric guess, processes it and passes it to the model.

Here’s the skeleton of the controller code; we’ll fill this in over the next few pages:

var controller = {

guesses: 0,

processGuess: function(guess) {

// more code will go here

}

};

Here we're defining our controller object, with

a property, guesses, initialized to zero.

And here's the beginning of the processGuess method,

which takes a guess in the form “A0".

350 Chapter 8

processing the player’s guess

"A3"

"3""A"

0 3

"03"

You know the Battleship-style guess

format at this point: it’s a letter

followed by a number.

Processing the player’s guess

The controller’s responsibility is to get the player’s guess, make sure it’s valid, and then get

it to the model object. But, where does it get the player’s guess? Don’t worry, we’ll get to

that in a bit. For now we’re just going to assume, at some point, some code is going to call

the controller’s processGuess method and give it a string in the form:

Now after you receive a guess in this form (an alpha-numeric set of characters, like

“A3”), you’ll need to transform the guess into a form the model understands (a string

of two numeric characters, like “03”). Here’s a high level view of how we’re going to

convert a valid input into the number-only form:

Surely a player would

never enter in an invalid

guess, right? Ha! We’d

better make sure we’ve

got valid input.

Assume we've been handed a

string in alphanumeric form:

Let's then break the string apart,

into the row and the column.

We'll convert this to a number

and just check to make sure this

number is between 0 and six.

We'll convert the

letter to a number

and check to make

sure it is between

zero and six.

Finally we'll put the two numbers

together back into a string.

"A3"

This is a great

technique when you are

coding. Focus on the

requirements for the

specific code you’re

working on. Thinking

about the whole

problem at once is

often a less successful

technique.

But first things first. We also need to check that the input is valid. Let’s plan this all

out before we write the code.

you are here 4 351

bringing it all together

Rather than putting all this guess-processing code into the

processGuess method, we’re going to write a little helper

function (after all we might be able to use this again). We’ll

name the function parseGuess.

Let’s step through how it is going to work before we start

writing code:

Planning the code...

1





2





3











































6

null

4



5



6







352 Chapter 8

parsing the player’s guess

function parseGuess(guess) {

var alphabet = ["A", "B", "C", "D", "E", "F", "G"];

if (guess === null || guess.length !== 2) {

alert("Oops, please enter a letter and a number on the board.");

} else {

firstChar = guess.charAt(0);

var row = alphabet.indexOf(firstChar);

}

We have a solid plan for coding this, so let’s get started:

Implementing parseGuess

1







function parseGuess(guess) {

if (guess === null || guess.length !== 2) {

alert("Oops, please enter a letter and a number on the board.");

}

The guess is passed into the guess parameter.

And then we check for null and to

make sure the length is 2 characters.

If not, we alert the player.

3







An array loaded with each letter that

could be part of a valid guess.

Grab the first

character of the guess.

Then, using indexOf, we get back a number between zero

and six that corresponds to the letter. Try a couple of

examples to see how this works.

you are here 4 353

bringing it all together

45





function parseGuess(guess) {

var alphabet = ["A", "B", "C", "D", "E", "F", "G"];

if (guess === null || guess.length != = 2) {

alert("Oops, please enter a letter and a number on the board.");

} else {

firstChar = guess.charAt(0);

var row = alphabet.indexOf(firstChar);

var column = guess.charAt(1);

if (isNaN(row) || isNaN(column)) {

alert("Oops, that isn't on the board.");

} else if (row < 0 || row >= model.boardSize ||

column < 0 || column >= model.boardSize) {

alert("Oops, that's off the board!");

}

Here we've added code to grab the

second character in the string, which

represents the column.

And we're checking to see if either

of the row or column is not a number

using the isNAN function.

We're also making sure that the

numbers are between zero and six. Actually we're being even more general here.

Instead of hardcoding the number six, we're

asking the model to tell us how big the board

is and using that number for comparison.







Notice we're using type conversion like

crazy here! column is a string, so when

we check to make sure its value is 0-6,

we rely on type conversion to convert it

to a number for comparison.

354 Chapter 8

finishing up the parseGuess function

function parseGuess(guess) {

var alphabet = ["A", "B", "C", "D", "E", "F", "G"];

if (guess === null || guess.length !== 2) {

alert("Oops, please enter a letter and a number on the board.");

} else {

firstChar = guess.charAt(0);

var row = alphabet.indexOf(firstChar);

var column = guess.charAt(1);

if (isNaN(row) || isNaN(column)) {

alert("Oops, that isn't on the board.");

} else if (row < 0 || row >= model.boardSize ||

column < 0 || column >= model.boardSize) {

alert("Oops, that's off the board!");

} else {

return row + column;

}

return null;

}

6





At this point, everything

looks good, so we can return

a row and column.

If we get here, there was a failed

check along the way, so return null.

A Test Drive Okay, make sure all this code is entered into “battleship.js” and

then add some function calls below it all that look like this:

console.log(parseGuess("A0"));

console.log(parseGuess("B6"));

console.log(parseGuess("G3"));

console.log(parseGuess("H0"));

console.log(parseGuess("A7"));

Reload “battleship.html”, and make sure your console

window is open. You should see the results of parseGuess

displayed in the console and possibly an alert or two.

JavaScript console

null

Notice we're

concatenating the

row and column

together to make

a string, and

returning that

string. We're using

type conversion

again here: row is a

number and column

is a string, so we'll

end up with a

string.

you are here 4 355

bringing it all together

Get and process the player’s guess (like “A0” or “B1”).

Keep track of the number of guesses.

Ask the model to update itself based on the latest guess.

Determine when the game is over (that is, when all ships

have been sunk).

Now that we have the parseGuess helper function written we

move on to implementing the controller. Let’s first integrate the

parseGuess function with the existing controller code:

Meanwhile back at the controller...

var controller = {

guesses: 0,

processGuess: function(guess) {

var location = parseGuess(guess);

if (location) {

}

};

That completes the first responsibility of the controller. Let’s see

what’s left:

We’ll use parseGuess to

validate the player’s guess.

And as long as we don’t get null back, we

know we’ve got a valid location object. Remember null is a

falsey value.

And the rest of the code for the

controller will go here.

We’ll tackle

these next.

The next item on our list is straightforward: to keep track of the

number of guesses we just need to increment the guesses property

each time the player makes a guess. As you’ll see in the code, we’ve

chosen not to penalize players if they enter an invalid guess.

Next, we’ll ask the model to update itself based on the guess by calling

the model’s fire method. After all, the point of a player’s guess is to

fire hoping to hit a battleship. Now remember, the fire method takes

a string, which contains the row and column, and by some luck we get

that string by calling parseGuess. How convenient.

Let’s put all this together and implement the next step…

Counting guesses and firing the shot

356 Chapter 8

when is the game over?

var controller = {

guesses: 0,

processGuess: function(guess) {

var location = parseGuess(guess);

if (location) {

this.guesses++;

var hit = model.fire(location);

}

};

var controller = {

guesses: 0,

processGuess: function(guess) {

var location = parseGuess(guess);

if (location) {

this.guesses++;

var hit = model.fire(location);

if (hit && model.shipsSunk === model.numShips) {

view.displayMessage("You sank all my battleships, in " +

this.guesses + " guesses");

}

};

If the player entered a

valid guess we increase the

number of guesses by one.

And then we pass the row and column in the form

of a string to the model’s fire method. Remember,

the fire method returns true if a ship is hit.

All we have left is to determine when the game is complete. How do we do that? Well,

we know that when three ships are sunk the game is over. So, each time the guess is

a hit, we’ll check to see if there are three sunken ships, using the model.shipsSunk

property. Let’s generalize this a bit, and instead of just comparing it to the number 3,

we’ll use the model’s numShips property for the comparison. You might decide later

to set the number of ships to, say, 2 or 4, and this way, you won’t need to revisit this

code to make it work correctly.

Game over?

If the guess was a hit, and the

number of ships that are sunk is

equal to the number of ships in the

game, then show the player a message

that they’ve sunk all the ships.

We’ll show the player the total number

of guesses they took to sink the ship.

The guesses property is a property of

“this” object, the controller.

Remember, this.guesses++

just adds one to the value

of the guesses property. It

works just like i++ in for

loops.

Also notice if the player

enters an invalid board

location, we don’t penalize

them by counting the guess.

you are here 4 357

bringing it all together

A Test Drive Okay, make sure all the controller code is entered into your “battleship.js” file

and then add some function calls below it all to test your controller. Reload

your “battleship.html” page and note the hits and misses on the board. Are

they in the right places? (Download “battleship_tester.js” to see our version.)

We let the player know the game ended in the message area, after







controller.processGuess("A0");

controller.processGuess("A6");

controller.processGuess("B6");

controller.processGuess("C6");

controller.processGuess("C4");

controller.processGuess("D4");

controller.processGuess("E4");

controller.processGuess("B0");

controller.processGuess("B1");

controller.processGuess("B2");

We’re calling the controller’s

processGuess method and passing in

guesses in Battleship format.

Again, you’ll need to remove or comment out the previous

testing code to get the same results as we show here.

You can see how to do that in battleship_tester.js.

358 Chapter 8

getting a value from a form

“

”

function handleFireButton() {

// get the player's guess from the form

// and get it to the controller.

}



2

Getting a player’s guess

Now that you’ve implemented the core game logic and display, you

need a way to enter and retrieve a player’s guesses so the game can

actually be played. You might remember that in the HTML we’ve

already got a <form> element ready for entering guesses, but how

do we hook that into the game?

To do that we need an . We’ve talked a little about event

handlers already. For now, we’re going to spend just enough time with

event handlers again to get the game working, and we’ll undertake

learning the nitty-gritty details of event handlers in the next chapter.

Our goal is for you to get a high-level understanding of how event

handlers work with form elements, but not necessarily understand

everything about how it works at the detailed level, right now.

Here’s the big picture:

Here’s our HTML form

element, ready to take

user input.

3



you are here 4 359

bringing it all together

How to add an event handler to the Fire! button

function handleFireButton() {

var guessInput = document.getElementById("guessInput");

var guess = guessInput.value;

}

To get this all rolling the first thing we need to do is add an event handler to the Fire!

button. To do that, we first need to get a reference to the button using the button’s id.

Review your HTML again, and you’ll find the Fire! button has the id “fireButton”.

With that, all you need to do is call document.getElementById to get a reference to

the button. Once we have the button reference, we can assign a handler function to the

onclick property of the button, like this:

First, we get a reference to the Fire!

button using the button’s id:

function init() {

var fireButton = document.getElementById("fireButton");

fireButton.onclick = handleFireButton;

}

function handleFireButton() {

// code to get the value from the form

}

window.onload = init;

Then we can add a click handler function

named handleFireButton to the button.

Here’s the handleFireButton function.

This function will be called whenever

you click the Fire! button.

The Fire! button is what initiates the guess, but the player’s guess is actually

contained in the “guessInput” form element. We can get the value from the form

input by accessing the input element’s value property. Here’s how you do it:

Getting the player’s guess from the form

First, we get a reference to the input form

element using the input element’s id, “guessInput”.

Then we get the guess from

the input element. The guess is

stored in the value property of

the input element.

We have the value, now all we need is to do something

with it. Luckily we have lots of code already that’s

ready to do something with it. Let’s add that next.

And let’s not forget to get a

handleFireButton function started:

We need somewhere for this code to

go, so let’s create an init function.

Just like we learned in Chapter 6, we

want the browser to run init when

the page is fully loaded.

We’ll write this code in just a sec.

360 Chapter 8

testing the controller

Here’s where it all comes together. We have a controller waiting—just

dying—to get a guess from the player. All we need to do is pass the

player’s guess to the controller. Let’s do that:

Passing the input to the controller

function handleFireButton() {

var guessInput = document.getElementById("guessInput");

var guess = guessInput.value;

controller.processGuess(guess);

guessInput.value = "";

}

A Test Drive This is no mere test drive. You’re finally ready to play the real game! Make

sure you’ve added all the code to “battleship.js”, and reload “battleship.html”

in your browser. Now, remember the ship locations are hardcoded, so you’ll

have a good idea of how to win this game. Below you’ll find the winning

moves, but be sure to fully test this code. Enter misses, invalid guesses and

downright incorrect guesses.

These are the winning

guesses, in order by ship.

But you don’t have to enter

them all in order. Try mixing

them up a bit. Enter some

invalid guesses in between

the correct ones. Enter

misses too. That’s all part

of the Quality Assurance

testing for the game.

We’re passing the player’s guess to

the controller, and then everything

should work like magic!

This little line just resets the form input element

to be the empty string. That way you don’t have

to explicitly select the text and delete it before

entering the next guess, which would be annoying.

you are here 4 361

bringing it all together

Serious Coding

Finding it clumsy to have to click the Fire! button with every guess? Sure,

clicking works, but it’s slow and inconvenient. It would be so much easier

if you could just press RETURN, right? Here’s a quick bit of code to handle

a RETURN key press:

function handleKeyPress(e) {

var fireButton = document.getElementById("fireButton");

if (e.keyCode === 13) {

fireButton.click();

return false;

}

Add a new handler. This one handles key

press events from the HTML input field.

function init() {

var fireButton = document.getElementById("fireButton");

fireButton.onclick = handleFireButton;

var guessInput = document.getElementById("guessInput");

guessInput.onkeypress = handleKeyPress;

}

Update your init function and add the handleKeyPress function anywhere

in your code. Reload and let the game play begin!

Here's the key press handler. It's

called whenever you press a key in

the form input in the page.

The browser passes an event object

to the handler. This object has info

about which key was pressed.

If you press the RETURN key, the

event's keyCode property will be set to

13. If that's the case, then we want to

cause the Fire! button to act like it

was clicked. We can do that by calling

the fireButton's click method (basically

tricking it into thinking it was clicked).

And we return false so the

form doesn't do anything else

(like try to submit itself).

362 Chapter 8

planning positions for the ships

What’s left? Oh yeah, darn it,

those hardcoded ships!

0 1 2 3 4 5 6

Ship

Each ship needs to go

in a location where it

doesn’t overlap the

other ships.

We’ve got room

for a ship here.

Ships can be

placed vertically

or horizontally.

And another here.

But this isn’t going to work, we’ve got

an overlap or collision with an existing

ship. We’ll have to rethink this ship.

Okay, here’s a third position

for a ship that works.

At this point you’ve got a pretty amazing browser-based game created

from a little HTML, some images, and roughly 100 lines of code. But,

the one aspect of this game that is a little unsatisfying is that the ships

are always in the same location. You still need to write the code to

generate random locations for the ships every time we start a new game

(otherwise, it’ll be a pretty boring game).

Now, before we start, we want to let you know that we’re going to cover

this code at a slightly faster clip—you’re getting to the point where you

can read and understand code better, and there aren’t a lot of new

things in this code. So, let’s get started. Here’s what we need to consider:

you are here 4 363

bringing it all together

Add the new ship's locations

to the ships array.

Generate a random direction

(vertical or horizontal)

for the new ship.

Generate a random

location for the new ship.

Loop for the number of

ships we want to create.

Test to see if the new ship's

locations collide with any

existing ship's locations.

Code Magnets

An algorithm to generate ships is all scrambled up on the fridge. Can you put the

magnets back in the right places to produce a working algorithm? Check your

answer at the end of the chapter before you go on.

An algorithm is just a fancy

word for a sequence of steps

that solve a problem.

364 Chapter 8

methods to place the ships

How to place ships

There are two things you need to consider when placing ships on the game board. The

first is that ships can be oriented either vertically or horizontally. The second is that ships

don’t overlap on the board. The bulk of the code we’re about to write handles these two

constraints. Now, as we said, we’re not going to go through the code in gory detail, but

you have everything you need to work through it, and if you spend enough time with the

code you’ll understand each part in detail. There’s nothing in it that you haven’t already

encountered so far in the book (with one exception that we’ll talk about). So let’s dive in…

We’re going to organize the code into three methods that are part of the model object:

generateShipLocations: function() {

var locations;

for (var i = 0; i < this.numShips; i++) {

do {

locations = this.generateShip();

} while (this.collision(locations));

this.ships[i].locations = locations;

}

The generateShipLocations function

For each ship we want to

generate locations for.

We generate a new set of locations...

... and check to see if those locations

overlap with any existing ships on the

board. If they do, then we need to try

again. So keep generating new locations

until there's no collision.

Once we have locations that work, we

assign the locations to the ship’s locations

property in the model.ships array.

We’re using

a do while

loop here!

generateShipLocations: This is the master method. It creates a ships array in

the model for you, with the number of ships in the model’s numShips property.

generateShip: This method creates a single ship, located somewhere on the board.

The locations may or may not overlap other ships.

collision: This method takes a single ship and makes sure it doesn’t overlap with a

ship already on the board.

Let’s get started with the generateShipLocations method. This method iterates, creating

ships, until it has filled the model’s ships array with enough ships. Each time it generates a

new ship (which it does using the generateShip method), it uses the collision method

to make sure there are no overlaps. If there is an overlap, it throws that ship away and keeps

trying.

One thing to note in this code is that we’re using a new iterator, the do while loop. The do

while loop works almost exactly like while, except that you  execute the statements in

the body, and then check the condition. You’ll find certain logic conditions, while rare, work

better with do while than with the while statement.

We’re adding this method to the model object.

you are here 4 365

bringing it all together

generateShip: function() {

var direction = Math.floor(Math.random() * 2);

var row, col;

if (direction === 1) {

// Generate a starting location for a horizontal ship

} else {

// Generate a starting location for a vertical ship

}

var newShipLocations = [];

for (var i = 0; i < this.shipLength; i++) {

if (direction === 1) {

// add location to array for new horizontal ship

} else {

// add location to array for new vertical ship

}

return newShipLocations;

Writing the generateShip method

The generateShip method creates an array with random locations for one

ship without worrying about overlap with other ships on the board. We’ll go

through this method in a couple of steps. The first step is to randomly pick a

direction for the ship: will it be horizontal or vertical? We’re going to determine

this with a random number. If the number is 1, then the ship is horizontal;

if it’s 0, then the ship is vertical. We’ll use our friends the Math.random and

Math.floor methods to do this as we’ve done before:

We use Math.random to generate a

number between 0 and 1, and multiply

the result by 2, to get a number

between 0 and 2 (not including 2).

We then turn that into a 0 or a 1

using Math.floor.

Generating a

random 0 or 1

is kind of like

tossing a coin.

We’re saying that if the

direction is a 1, that means

we’ll create a horizontal ship...

... and if direction is 0, that

means we’ll create a vertical ship.

For the new ship locations, we’ll start with an

empty array, and add the locations one by one.

First, we’ll create a starting location, like row = 0 and

column = 3, for the new ship. Depending on the direction, we

need different rules to create the starting location (you’ll

see why in just a sec).

We’ll loop for the number

of locations in a ship...

... and add a new location

to the newShipLocations

array each time through the

loop. Again we need slightly

different code to generate

a location depending on the

direction of the ship.

We’ll be filling in the rest of this

code starting on the next page...

Once we’ve generated all the

locations, we return the array.

This method also is added to the model object.

366 Chapter 8

computing positions for the ships

Generate the starting location for the new ship

row = Math.floor(Math.random() * this.boardSize);

col = Math.floor(Math.random() * (this.boardSize - 3));

Now that you know how the ship is oriented, you can generate the locations for the

ship. First, we’ll generate the starting location (the first position for the ship) and then

the rest of the locations will just be the next two columns (if the ship is horizontal) or

the next two rows (if it’s vertical).

To do this we need to generate two random numbers—a row and a column—for

the starting location of the ship. The numbers both have to be between 0 and 6, so

the ship will fit on the game board. But remember, if the ship is going to be placed

, then the starting  must be between 0 and 4, so that we have room

for the rest of the ship:

A horizontal ship can be located in any row...

... but the first column must

leave room for the other two

locations of the ship.

So we subtract 3 from the

boardSize (7), so the starting

column is always between 0 and

4. (Remember, boardSize is a

property of the model.)

row = Math.floor(Math.random() * (this.boardSize - 3));

col = Math.floor(Math.random() * this.boardSize);

And, likewise, if the ship is going to be placed , then

the starting  must be between 0 and 4, so that we have

room for the rest of the ship:

A vertical ship must start at row 0-4 to leave room for

the next two locations...

... but can be located in any column.

you are here 4 367

bringing it all together

generateShip: function() {

var direction = Math.floor(Math.random() * 2);

var row, col;

if (direction === 1) {

row = Math.floor(Math.random() * this.boardSize);

col = Math.floor(Math.random() * (this.boardSize - this.shipLength));

} else {

row = Math.floor(Math.random() * (this.boardSize - this.shipLength));

col = Math.floor(Math.random() * this.boardSize);

}

var newShipLocations = [];

for (var i = 0; i < this.shipLength; i++) {

if (direction === 1) {

newShipLocations.push(row + "" + (col + i));

} else {

newShipLocations.push((row + i) + "" + col);

}

return newShipLocations;

Completing the generateShip method

Plugging that code in, now all we have to do is make sure we add the starting location

along with the next two locations to the newShipLocations array.

Here’s the code to generate a starting

location for the ship on the board.

We replaced 3 (from the previous

page) with this.shipLength to

generalize the code, so we can use it

for any ship length.

This is the code for a horizontal ship.

Let’s break it down...

We’re pushing a new

location onto the

newShipLocations array. That location is a string

made up of the row (the

starting row we just

computed above)...

... and the column + i. The first time through the

loop, i is 0, so it’s just the starting column. The

second time, it’s the next column over, and the

third, the next column over again. So we’ll get

something like “01”, “02”, “03” in the array.

Here, we use parentheses to make sure i is

added to col before it’s converted to a string.

Same thing here only

for a vertical ship. So now, we’re increasing the

row instead of the column,

adding i to the row each

time through the loop.

For a vertical ship, we’ll get something

like “31”, “41”, “51” in the array.

Once we’ve filled the array

with the ship’s locations, we

return it to the calling method,

generateShipLocations.

Remember, when we add a string

and a number, + is concatenation

not addition, so we get a string.

368 Chapter 8

the collision method

collision: function(locations) {

for (var i = 0; i < this.numShips; i++) {

var ship = model.ships[i];

for (var j = 0; j < locations.length; j++) {

if (ship.locations.indexOf(locations[j]) >= 0) {

return true;

}

return false;

}

Avoiding a collision!

The collision method takes a ship and checks to see if any of the locations

overlap—or collide—with any of the existing ships already on the board.

We’ve implemented this using two nested for loops. The outer loop iterates over all

the ships in the model (in the model.ships property). The inner loop iterates over

all the new ship’s locations in the locations array, and checks to see if any of those

locations is already taken by an existing ship on the board.

locations is an array of

locations for a new ship we’d

like to place on the board.

For each ship already on the board...

...check to see if any of the locations

in the new ship’s locations array are in

an existing ship’s locations array.

We’re using indexOf to check if the

location already exists in a ship, so if the

index is greater than or equal to 0, we

know it matched an existing location, so we

return true (meaning, we found a collision).

Returning from inside a loop

that’s inside another loop

stops the iteration of both

loops immediately, exiting the

function and returning true.

If we get here and haven’t returned,

then we never found a match for any

of the locations we were checking, so we

return false (there was no collision).









different loop variable names?

Look back at page 364 to see

where we call the collision method.

you are here 4 369

bringing it all together

function init() {

var fireButton = document.getElementById("fireButton");

fireButton.onclick = handleFireButton;

var guessInput = document.getElementById("guessInput");

guessInput.onkeypress = handleKeyPress;

model.generateShipLocations();

}

var model = {

boardSize: 7,

numShips: 3,

shipLength: 3,

shipsSunk: 0,

ships: [ { locations: ["06", "16", "26"], hits: ["", "", ""] },

{ locations: ["24", "34", "44"], hits: ["", "", ""] },

{ locations: ["10", "11", "12"], hits: ["", "", ""] } ],

ships: [ { locations: [0, 0, 0], hits: ["", "", ""] },

{ locations: [0, 0, 0], hits: ["", "", ""] },

{ locations: [0, 0, 0], hits: ["", "", ""] } ],

fire: function(guess) { ... },

isSunk: function(ship) { ... },

generateShipLocations: function() { ... },

generateShip: function() { ... },

collision: function(locations) { ... }

};

Two final changes

We’ve written all the code we need to generate random locations for the ships; now

all we have to do is integrate it. Make these two final changes to your code, and then

take your new Battleship game for a test drive!

Remove the hardcoded

ship locations...

... and replace

them with arrays

initialized with 0's

instead.

And of course, add the call

to generate the ship locations,

which will fill in those empty

arrays in the model.

We’re calling model.generateShipLocations

from the init function so it happens right

when you load the game, before you start

playing. That way all the ships will have

locations ready to go when you start playing.

Don’t forget you can download the complete code for

the Battleship game at http://wickedlysmart.com/hfjs.

370 Chapter 8

testing the battleship game

A Final Test Drive This is the FINAL test drive of the real game, with

random ship locations. Make sure you’ve got all the

code added to “battleship.js”, reload “battleship.html”

in your browser, and play the game! Give it a good run

through. Play it a few times, reloading the page each

time to generate new ship locations for each new game.

Oh, and how to cheat!

To cheat, open up the developer

console, and type model.ships.

Press return and you should see the

three ship objects containing the

locations and hits arrays. Now you

have the inside scoop on where the

ships are sitting in the game board.

But, you didn’t hear this from us!

JavaScript console

> model.ships

[ Object, Object, Object ]

hits: Array[3], hits: Array[3], hits: Array[3]

locations: Array[3], locations: Array[3], locations: Array[3]

0: "63" 0: "20" 0: "60"

1: "64" 1: "21" 1: "61"

2: "65" 2: "22" 2: "62"

Beat the computer every time.

you are here 4 371

bringing it all together

Congrats, It’s Startup Time!

You’ve just built a great web

application, all in 150 (or so) lines of

code and some HTML & CSS. Like

we said, the code is yours. Now all

that’s standing between you and your

venture capital is a real business plan.

But then again, who ever let that stand in

their way!?

So now, after all the hard work, you

can relax and play a few rounds of

Battleship. Pretty darn engaging,

right?

Oh, but we’re just getting

started. With a little more

JavaScript horse power we’re

going to be able to take on

apps that rival those written in

native code.

For now, we’ve been through a lot of

code in this chapter. Get some good

food and plenty of rest to let it all

sink in. But before you do that, you’ve

got some bullet points to review and

a crossword puzzle to do. Don’t skip

them; repetition is what really drives

the learning home!

372 Chapter 8

quality assurance

QA Notes

Found a bug, I think. When I get a hit on a ship, if

I re-enter that board location again, it results

another hit at the same spot. Try it, you’ll see!

So, is this a bug? Or the correct behavior?

Assuming it’s a bug, how would you fix it? Write

your notes here:

you are here 4 373

bringing it all together

We use HTML to build the structure of

the Battleship game, CSS to style it, and

JavaScript to create the behavior.

The id of each <td> element in the table is

used to update the image of the element to

indicate a HIT or a MISS.

The form uses an input with type “button”.

We attach an event handler to the button so

we can know in the code when a player has

entered a guess.

To get a value from a form input text element,

use the element’s value property.

CSS positioning can be used to position

elements precisely in a web page.

We organized the code using three objects: a

model, a view, and a controller.

Each object in the game has one primary

responsibility.

The responsibility of the model is to store the

state of the game and implement logic that



The responsibility of the view is to update the

display when the state in the model changes.

The responsibility of the controller is to glue

the game together, to make sure the player’s

guess is sent to the model to update the

state, and to check to see when the game is

complete.

By designing the game with objects that

each have a separate responsibility, we

can build and test each part of the game

independently.

To make it easier to create and test the

model, we initially hardcoded the locations

of the ships. After ensuring the model was

working, we replaced these hardcoded

locations with random locations generated

by code.

We used properties in the model, like

numShips and shipLength, so we don’t

hardcode values in the methods that we

might want to change later.

Arrays have an indexOf method that is

similar to the string indexOf method. The

array indexOf method takes a value, and

returns the index of that value if it exists in

the array, or -1 if it does not.

With chaining, you can string together

object references (using the dot operator),

thus combining statements and eliminating

temporary variables.

The do while loop is similar to the while loop,

except that the condition is checked after

the statements in the body of the loop have

executed once.

Quality assurance (QA) is an important part

of developing your code. QA requires testing

not just valid input, but invalid input as well.

374 Chapter 8

javascript crossword

JavaScript cross

Your brain is frying from the coding challenges in this



4 5

6 7

8 9

12 13 14

ACROSS



element.

4. To add a ship or miss image to the board, we place the





body at least once.



_________.



__________.



the game board.















DOWN



event ________ for the click event.













_____, and controller.





changes.

you are here 4 375

bringing it all together

Practice DrillsPractice Drills

.hit {

background: transparent url("ship.png") no-repeat center center;

}

.miss {

background: transparent url("miss.png") no-repeat center center;

}

In just a few pages, you’re going to learn how to add the MISS and ship images

to the game board with JavaScript. But before we get to the real thing, you need

to practice in the HTML simulator. We’ve got two CSS classes set up and ready

for you to practice with. Go ahead and add these two rules to your CSS, and

then imagine you’ve got ships hidden at the following locations:

Ship 1: A6, B6, C6

Ship 2: C4, D4, E4

Ship 3: B0, B1, B2

and that the player has entered the following guesses:

A0, D4, F5, B2, C5, C6

You need to add one of the two classes below to the correct cells in the grid (the

correct <td> elements in the table) so that your grid shows MISS and a ship in

the right places.

Make sure you’ve downloaded

everything you need,

including the two images

you’ll need for this exercise.

Here’s our solution. The right spots for the

.hit class are in <td>s with the ids: “00”, “34”,

“55”, “12”, “25” and “26”. To add a class to an

element, you use the class attribute, like this:

After adding the classes in

the right spots, your game

board should look like this.

SOLUTIONSOLUTION

376 Chapter 8

exercise solutions

Here’s a message.

Messages will be things like

“HIT!”, “You missed.” and

“You sank my battleship!”

Here the display has

a MISS placed on

the grid.

And here the display has a

ship placed on the grid.

var view = {

// this method takes a string message and displays it

// in the message display area

displayMessage: function(msg) {

// code to be supplied in a bit!

displayHit: function(location) {

// code will go here

displayMiss: function(location) {

// code will go here

}

};

Your methods go here!

Notice we’re defining an object and

assigning it to the variable view.

It’s time for some object design. We’re going to start with the view object. Now,

remember, the view object is responsible for updating the view. Take a look at the

view below and see if you can determine the methods we want the view object to

implement. Write the declarations for these methods below (just the declarations;

we’ll code the bodies of the methods in a bit) along with a comment or two about

what each does. Here’s our solution:

you are here 4 377

bringing it all together

Given how we’ve described the new game board above, how would you

represent the ships in the model (just the locations, we’ll worry about

hits later). Check off the best solution below.

❏Use nine variables for the ship locations,

similar to the way we handled the ships in

Chapter 2.

❏Use an array with an item for each cell in

entire board (49 items total). Record the ship

number in each cell that holds part of a ship.

❏Use an array to hold all nine locations. Items

0-2 will hold the first ship, 3-5 the second, and

so on.

❏Use three different arrays, one for each ship,

with three locations contained in each.

❏Use an object named ship with three location

properties. Put all the ships in an array named

ships.

❏______________________________________

______________________________________

Or write in your own answer. Any of these solutions could work! (In fact

we tried each one when we were figuring

out the best way to do it.) This is the one

we use in the chapter.

2E T A T T R I B U T E

4A C G R O U N D C

J L D

6O7I L E

E E N I

C J

8A V A S C R I

9P T T

T N R

D O

10 B J E C T

11 E L L

X L

12 V

13 E R

14 L A P

15 I R E

E T M

U M

17 O D E L

R D

18 O N S O L E

JavaScript

cross

solution

378 Chapter 8

exercise solutions

var ships = [{ locations: ["06", "16", "26"], hits: ["hit", "hit", "hit"] },

{ locations: ["24", "34", "44"], hits: ["hit", "hit", "hit"] },

{ locations: ["10", "11", "12"], hits: ["hit", "hit", "hit"] }];

Ship Magnets Solution

Use the following player moves, along with the data structure for the

ships, to place the ship and miss magnets onto the game board. Does

the player sink all the ships? We’ve done the first move for you.

Here are the moves:

A6, B3, C4, D1, B0, D4, F0, A1, C6, B1, B2, E4, B6

And here’s our solution:

Execute these moves

on the game board.

All three ships are sunk!

And here's the board and your magnets.

Leftover magnets.

you are here 4 379

bringing it all together

Let’s practice using the ships data structure to simulate some ship activities.

Using the ships definition below, work through the questions and the code

below and fill in the blanks. Make sure you check your answers before moving

on, as this is an important part of how the game works:

The player guesses "D4", does that hit a ship?______ If so, which one? __________

The player guesses "B3", does that hit a ship?______ If so, which one? __________

Which ships are already hit?______________ And at what locations? ______________

Finish this code to access the second ship’s middle location and print its value

with console.log.

var ship2 = ships[____];

var locations = ship2.locations;

console.log("Location is " + locations[____]);

Finish this code to see if the third ship has a hit in its first location:

var ship3 = ships[____];

var hits = ship3._____;

if (_______ === "hit") {

console.log("Ouch, hit on third ship at location one");

}

Finish this code to hit the first ship at the third location:

var ______ = ships[0];

var hits = ship1._______;

hits[____] = ________;

var ships = [{ locations: ["31", "41", "51"], hits: ["", "", ""] },

{ locations: ["14", "24", "34"], hits: ["", "hit", ""] },

{ locations: ["00", "01", "02"], hits: ["hit", "", ""] }];

Ships 2 and 3 C4, A0

yes Ship 2

hits

hits[0]

ship1

“hit”

hits

380 Chapter 8

exercise solutions

Add the new ship's locations

to the ships array.

Generate a random direction

(vertical or horizontal)

for the new ship.

Generate a random

location for the new ship.

Loop for the number of

ships we want to create.

Test to see if the new ship's

locations collide with any

existing ship's locations.

Code Magnets Solution

An algorithm to generate ships is all scrambled up on the fridge. Can you put the magnets

back in the right places to produce a working algorithm? Here’s our solution.

this is a new chapter 381

Handling events

asynchronous coding

After this chapter you’re going to realize you aren’t in

Kansas anymore. 

not how you typically write JavaScript code. Rather, most

JavaScript is written to react to events





all kinds of events are happening all the time





382 Chapter 9

exercise for events











loaded and displayed.



Keeps track of all the clicks





Watches the clock and

manages timers and timed

events.



a form.



presses keys on a keyboard.

Tracks when the page has been

resized or scrolled.

Knows when an element gets



Knows when the cookies are

finished baking.

Pick two of the events above. If the browser could notify your code when these

events occurred, what cool or interesting code might you write?

No, you can't use the cookie

event as one of your examples!

Retrieves additional data for



you are here 4 383

asynchronous coding

We’re sure you know by now that after the browser retrieves and displays your page, it

doesn’t just sit there. Behind the scenes, a lot is going on: users are clicking buttons, the

mouse location is being tracked, additional data is becoming available on the network,

windows are getting resized, timers are going off, the browser’s location could be changing,

and so on. All these things cause events to be triggered.

Whenever there’s an event, there is an opportunity for your code to ; that is, to

supply some code that will be invoked when the event occurs. Now, you’re not required to

handle any of these events, but you’ll need to handle them if you want interesting things

to happen when they occur—like, say, when the button click event happens, you might

want to add a new song to a playlist; when new data arrives you might want to process it

and display it on your page; when a timer fires you might want to tell a user the hold on a

front row concert ticket is going to expire, and so on.

What are events?

A browser’s geo-

location, as well as

a number of other

advanced types of

events, is something

we cover in Head

First HTML5

Programming. In this

book we’ll stick to

the bread & butter

foundational types of

events.

Browser





































Whenever there’s an event, there is an opportunity

for your code to handle it.

384 Chapter 9

event handlers

What’s an event handler?

We write  to handle events. Handlers are typically small

pieces of code that know what to do when an event occurs. In

terms of code, a handler is just a function. When an event occurs,

its handler function is called.

To have your handler called when an event occurs, you first need

to register it. As you’ll see, there are a few different ways to do that

depending on what kind of event it is. We’ll get into all that, but for

now let’s get started with a simple example, one you’ve seen before:

the event that’s generated when a page is fully loaded.













The handler, code

that will be run

later, when the page

is loaded.

You might also hear developers

use the name callback or

listener instead of handler.

The browser.











you are here 4 385

asynchronous coding

How to create your first event handler

There’s no better way to understand events than by writing a handler and wiring it up

to handle a real, live event. Now, remember, you’ve already seen a couple of examples

of handling events—including the page load event—but we’ve never fully explained

how event handling works. The page load event is triggered when the browser has

fully loaded and displayed all the content in your page (and built out the DOM

representing the page).

Let’s step through what it takes to write the handler and to make sure it gets invoked

when the page load event is triggered:

2







window.onload = pageLoadedHandler;

function pageLoadedHandler() {

alert("I'm alive!");

}







Here's our function, we'll name it

pageLoadedHandler, but you can

call it anything you like.

Remember we often refer to

this as a handler or a callback.

This event handler doesn't do

much. It just creates an alert.

In the case of the load event, we assign the name

of the handler to the window's onload property.

Now when the page load event is

generated, the pageLoadedHandler

function is going to be called.

3





We’re going to see that different

kinds of events are assigned

handlers in different ways.

A handler is just an ordinary function.

386 Chapter 9

testing an event handler



Test drive your event

Go ahead and create a new file, “event.html”, and add the code to test your load event

handler. Load the page into the browser and make sure you see the alert.

<!doctype html>

<head>

<title> I'm alive! </title>

window.onload = pageLoadedHandler;

function pageLoadedHandler() {

alert("I'm alive!");

}

</script>

</head>

<body>

</body>

</html>

First the browser loads your

page, and starts parsing the

HTML and building up the DOM.

When it gets to your script the

browser starts executing the code.

For now, the script just defines a

function, and assigns that function to

the window.onload property. Remember

this function will be invoked when the

page is fully loaded.

Then the browser continues

parsing the HTML.

When the browser is done parsing the HTML, and the

DOM is ready, the browser calls the page load handler.

Which in this case creates

the “I’m alive” alert.

you are here 4 387

asynchronous coding

As we already mentioned, up until now you’ve taken a rather, let’s say, linear

approach to writing code: you took an algorithm, like computing the best bubble

solution, or generating the 99 bottles song, and wrote the code stepwise, top to

bottom.

But remember the Battleship game? The code for that game didn’t quite fit the

linear model—sure, you wrote some code that set up the game, initialized the

model, and all that—but then the main part of the game operated in a .

Each time you wanted to fire at another ship you entered your guess into a form

input element and pressed the “Fire” button. That button then caused a whole

sequence of actions that resulted in the next move of the game being executed. In

that case your code was reacting to the user input.

Organizing code around reacting to events is a different way of thinking about

how you write your code. To write code this way, you need to consider the events

that can happen, and how your code should react. Computer science types like

to say that this kind of code is , because we’re writing code to be

invoked ,  and  an event occurs. This kind of coding also changes your

perspective from one of encoding an algorithm step-by-step into code, into one of

gluing together an application that is composed of many handlers handling many

different kinds of events.















388 Chapter 9

planning a game with events

Getting your head around events... by creating a game

The best way to understand events is with experience, so let’s get some more by writing

a simple game. The game works like this: you load a page and are presented with an

image. Not just any image, but a really blurred image. Your job is to guess what the

image is. And, to check your answer, you click on the image to unblur it.

Like this:

Here’s the

blurred version

of the image.

Hmmm, what

could it be?

When you think you

have it, click to reveal

the unblurred image.

Let’s start with the markup. We’ll use two JPG images. One is blurred and the other isn’t.

We’ve named them “zeroblur.jpg” and “zero.jpg” respectively. Here’s the markup:

<!doctype html>

<head>

<title> Image Guess </title>

</head>

<body>

</body>

</html>

And here’s the blurred image,

placed in the page. We’ll give

it an id of “zero”. You’ll see

how we use the id in a sec...

Just some basic HTML, with a <script>

element all ready for our code. Rather

than use a separate file for the

JavaScript, we’ll keep it simple and add

the script here. As you’ll see, there is

very little code needed to implement this.

Hum the

Jeopardy

theme song to

yourself as you

try to figure

it out...

you are here 4 389

asynchronous coding

Implementing the game

Go ahead and load this markup in your browser and you’ll see the

blurred image. To implement the game, we need to react to a click on

the image in order to display the unblurred version of the image.

Lucky for us, every time an HTML element in the page is clicked

(or touched on a mobile device), an event is generated. Your job is to

create a handler for that event, and in it write the code to display the

unblurred version of the image. Here’s how you’re going to do that:

Access the image object in the DOM and

assign a handler to its onclick property.

In your handler, write the code to change the

image src attribute from the blurred image to

the unblurred one.

We create a function init, and

assign it to the onload handler to

make sure this code doesn’t run

until the page is fully loaded.

window.onload = init;

function init() {

var image = document.getElementById("zero");

}

In the code of init, we’ll grab a

reference to the image with id=“zero”.

Let’s walk through these steps and write the code.

Step 1: access the image in the DOM

Getting access to the image is old hat for you; we just need to use our

old friend, the getElementById method, to get a reference to it.

var image = document.getElementById("zero");

Here we’re grabbing a reference

to the image element and

assigning it to the image variable.

Oh, but we also need this code to run only  the DOM for the

page has been created, so let’s use the window’s onload property

to ensure that. We’ll place our code into a function, init, that we’ll

assign to the onload property.

Remember in JavaScript the order

in which you define your functions

doesn’t matter. So we can define

init after we assign it to the

onload property.

Remember, we can’t get the image from the

DOM until the page has finished loading.

390 Chapter 9

adding an event handler

First, we have to get the

image from the DOM again.

function showAnswer() {

var image = document.getElementById("zero");

image.src = "zero.jpg";

}

Test drive

Let’s take this simple game for a test drive. Make sure you’ve

got all the HTML, CSS and JavaScript typed into a file named

“image.html”, and that you’ve got the images you downloaded

from http://wickedlysmart.com/hfjs in the same folder. Once all

that’s done, load up the file in your browser and give it a try!

Once we have the image, we can

change it by setting its src

property to the unblurred image.

Step 2: add the handler, and update

the image

To add a handler to deal with clicks on the image, we simply assign

a function to the image’s onclick property. Let’s call that function

showAnswer, and we’ll define it next.

window.onload = init;

function init() {

var image = document.getElementById("zero");

image.onclick = showAnswer;

}

Now we need to write the showAnswer function, which unblurs the

image by resetting the image element’s src property to the unblurred

image:

Click anywhere on the image to

have the showAnswer handler

called. When that happens, the

src of the image is changed to

reveal the answer.

Using the image object from the DOM, we’re

assigning a handler to its onclick property.

Remember the blurred version

is named “zeroblur.jpg” and the

unblurred is named “zero.jpg”.

you are here 4 391

asynchronous coding

Q: Is setting the src property of

the image the same as setting the src

attribute using setAttribute?

A: In this case, yes, it is. When you get

an HTML element from the DOM using

getElementById, you’re getting an element

object that has several methods and

properties. All element objects come with a

property, id, that is set to the id of the HTML

element (if you’ve given it one in your HTML).

The image element object also comes with

a src property that is set to the image file

specified in the src attribute of the <img>

element.

Not all attributes come with corresponding

object properties, however, so you will need

to use setAttribute and getAttribute for those.

And in the case of src and id, you can use

either the properties or get/set them using

getAttribute and setAttribute and it does the

same thing.

Q: So do we have a handler called

within a handler?

A: Not really. The load handler is the code

that is called when the page is fully loaded.

When the load handler is called, we assign a

handler to the image’s onclick property, but

it won’t be called until you actually click on

the image. When you do that (potentially a

long time after the page has loaded), the

showAnswer click handler is called. So the

two handlers get called at different times.

Ah, yes. It can get tricky to follow the

flow of execution in code with a lot of

event handlers. Remember, the init function is

called when the page is loaded. But the showAnswer

function isn’t called until later, when you click the

image. So these two event handlers get called at two

different times.

In addition, remember your scope rules. In the

init function we’re putting the object returned by

getElementById into a  variable image, which

means when that function completes, the variable

falls out of scope and is destroyed. So later, when the

showAnswer function is called, we have to get the

image object again from the DOM. Sure, we could

have put this in a global variable, but over use of

globals can lead to confusing and buggy code, which

we’d like to avoid.









392 Chapter 9

exercise on execution flow

Below, you’ll find your game code. Your job is to play like you’re the

browser and to figure out what you need to do after each event. After

you’ve done the exercise, look at the end of the chapter to see

if you got everything. We’ve done the first bit for you.

BE the Browser

window.onload = init;

function init() {

var image = document.getElementById("zero");

image.onclick = showAnswer;

}

function showAnswer() {

var image = document.getElementById("zero");

image.src = "zero.jpg";

}

First define the functions init and showAnswer

When page is

being loaded...

When page load

event occurs...

When image

click event

occurs...

Your answers go here.

Here’s the code you’re executing...

you are here 4 393

asynchronous coding





might be the naive way of implementing this? Is there a way to implement this with



Judy: Hey guys.

So far the image

guessing game works

great. But we really

should expand the

game to include more

images on the page.

Jim: Sure, Judy, that’s

exactly what I was

thinking.

Joe: Hey, I’ve already got a bunch of images

ready to go, we just need the code. I’ve followed

the naming convention of “zero.jpg”, “zeroblur.

jpg”, “one.jpg”, “oneblur.jpg”, and so on...

Jim: Are we going to need to write a new click

event handler for each image? That’s going to

be a lot of repetitive code. After all, every event

handler’s going to do exactly the same thing:

replace the blurred image with its unblurred

version, right?

Joe: That’s true. But I’m not sure I know how to

use the same event handler for multiple images.

Is that even possible?

Judy: What we can do is assign the same handler,

which really means the same function, to the

onclick property of every image in the game.

Joe: So the same function gets called for every

image that is clicked on?

Judy: Right. We’ll use showAnswer as the

handler for every image’s click event.

Jim: Hmm, but how will we know which image

to deblur?

Joe: What do you mean? Won’t the click handler

know?

Jim: How will it know? Right now, our

showAnswer function assumes we clicked on

the image with the id “zero”. But if we’re calling

showAnswer for every image’s click event, then

our code needs to work for any of the images.

Joe: Oh… right… so how do we know which

image was clicked?

Judy: Actually I’ve been reading up on events,

and I think there is a way for the click handler

to know the element the user clicked on. But

let’s deal with that part later. First let’s add some

more images to the game, and see how to set the

same event handler for all of them... then we’ll

figure out how to determine which image the

user clicked.

Joe, Jim: Sounds good!

Judy

Jim

Joe

394 Chapter 9

adding more images to the game

Let’s add some more images

<!doctype html>

<head>

<title> Image Guess </title>

<style>

body { margin: 20px; }

img { margin: 20px; }

</style>

window.onload = init;

function init() {

var image = document.getElementById("zero");

image.onclick = showAnswer;

}

function showAnswer() {

var image = document.getElementById("zero");

image.src = "zero.jpg";

}

</script>

</head>

<body>

</body>

</html>

We’ve got a whole set of new images, so let’s start by adding them

to the page. We’ll add five more images for a total of six. We’ll also

modify the CSS to add a little whitespace between the images:

We’re just adding a margin of 20px

between the images with this CSS property.

And here are the five new images we’re adding.

Notice we’re using the same id & src naming

scheme (and image naming scheme) for each one.

You’ll see how this is going to work in a bit...

If you give this a quick test drive,

your page should look like this:

You’ll find all the images

in the chapter9 folder you

downloaded from http://

wickedlysmart.com/hfjs.

Get the images

you are here 4 395

asynchronous coding

Now we need to assign the same event handler

to each image’s onclick property

Now we have more images in the page, but we have more work to do. Right now you can click on

the first image (of the Mona Lisa) and see the unblurred image, but what about the other images?

We  write a new, separate handler function for each image, but, from the discussion so far you

know that would be tedious and wasteful. Here, have a look:

window.onload = init;

function init() {

var image0 = document.getElementById("zero");

image0.onclick = showImageZero;

var image1 = document.getElementById("one");

image1.onclick = showImageOne;

...

}

function showImageZero() {

var image = document.getElementById("zero");

image.src = "zero.jpg";

}

function showImageOne() {

var image = document.getElementById("one");

image.src = "one.jpg";

}

...

We could get each image element

from the page and assign a

separate click handler to each one.

We’d have to do this six times...

we’re only showing two here.

And we’d need six

different click handlers,

one for each image.

The other four would be set here.

And we’d need four more handler functions here.

What are the disadvantages of writing a separate handler

for each image? Check all that apply:



each handler.

If we need to change the code in



to have to change them all.

 Hard to keep track of all the

images and handlers.

Hard to generalize for an



Harder for others to work on the

code.

396 Chapter 9

using the same event handler for multiple events

function init() {

var image = document.getElementById("zero");

image.onclick = showAnswer;

var images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

images[i].onclick = showAnswer;

}

};

Clearly writing a handler for each image isn’t a good way to solve this problem. So what

we’re going to do instead is use our existing handler, showAnswer, to handle all of the click

events for all the images. Of course, we’ll need to modify showAnswer a little bit to make

this work. To use showAnswer for all the images we need to do two things:

How to reuse the same handler for all the images

We’ll get rid of the old code to get

image “zero” and set its handler.

Now we’re getting elements from

the page using a tag name, img. This

finds every image in the page and

returns them all. We store the

resulting images in the images variable.

Then we iterate over the images,

and assign the showAnswer click

handler to each image in turn. Now

the onclick property of each image

is set to the showAnswer handler.

Assign the showAnswer click handler function

to every image on the page.

Rework showAnswer to handle unblurring any

image, not just zero.jpg.

Here’s our first hurdle: in the current code we use the getElementById method to grab

a reference to image “zero”, and assign the showAnswer function to its onclick property.

Rather than hardcoding a call to getElementById for each image, we’re going to show

you an easier way: we’ll grab all the images at once, iterate through them, and set up the

click handler for each one. To do that we’ll use a DOM method you haven’t seen yet:

document.getElementsByTagName. This method takes a tag name, like img or p or

div, and returns a list of elements that match it. Let’s put it to work:

And we’d like to do both these things in a generalized way that works even if we add more

images to the page. In other words, if we write the code right, we should be able to add images

to the page (or delete images from the page) without any code changes. Let’s get started.

Assigning the click handler to all images on the page

you are here 4 397

asynchronous coding

document.getElementsByTagName Up Close

var images = document.getElementsByTagName("img");

The document.getElementsByTagName method works a lot like document.getElementById,

except that instead of getting an element by its id, we’re getting elements by tag name, in

this case the tag name “img”. Of course, your HTML can include many <img> elements, so this

method may return many elements, or one element, or even zero elements, depending on how

many images we have in our page. In our image game example, we have six <img> elements,

so we’ll get back a list of six image objects.

What we get back is a list of element

objects that match the specified tag name.

Notice the “s” here. That means

we might get many elements back.

Put the tag name in

quotes here (and don’t

include the < and >!).

What’s returned is an array-like

list of objects. It’s not exactly an

array but has qualities similar to

an array.

Q: You said getElementsByTagName

returns a list. Do you mean an array?

A: It returns an object that you can treat

like an array, but it’s actually an object called

a NodeList. A NodeList is a collection of

Nodes, which is just a technical name for

the element objects that you see in the DOM

tree. You can iterate over this collection by

getting its length using the length property,

and then access each item in the NodeList

using an index with the bracket notation, just

like an array. But that’s pretty much where

the similarities of a NodeList and an array

end, so beyond this, you’ll need to be careful

in how you deal with the NodeList object.

You typically won’t need to know more about

NodeList until you want to start adding and

removing elements to and from the DOM.

Q: So I can assign a click handler to

any element?

A: Pretty much. Take any element on the

page, get access to it, and assign a function

to its onclick property. Done. As you’ve

seen, that handler might be specific to that

one element, or you might reuse a handler

for events on many elements. Of course

elements that don’t have a visual presence

in your page, like the <script> and <head>

elements, won’t support events like the click

event.

Q: Do handler functions ever get

passed any arguments?

A: Ah, good question, and very timely.

They do, and we’re just about to look at

the event object that gets passed to some

handlers.

Q: Do elements support other types of

events? Or is the click the only one?

A:There are quite a few others; in fact,

you’ve already seen another one in the code

of the battleship game: the keypress event.

There, an event handler function was called

whenever the user pressed Enter from the

form input. We’ll take a look at a few other

event types in this chapter.

398 Chapter 9

conversation about the event object

Judy: Yes I do. Whenever the click event handler is called,

it’s passed an  You can use that object to find out

details about the event.

Joe: Like which image was clicked on?

Judy: Well, more generally, the element on which the event

occurred, which is known as the target.

Joe: What’s the target?

Judy: Like I said, it’s the element that generated the event. Like if you

click on a specific image, the target will be that image.

Joe: So if I click on the image with the id “zero”, then the target will be set to that image?

Judy: More precisely, the element object that represents that image.

Joe: Come again?

Judy: Think of the element object as exactly the same thing you get if you call document.

getElementById with a value of “zero”. It’s the object that represents the image in the DOM.

Joe: Okay, so how do we get this target? It sounds like that’s what we need to know which image

was clicked on.

Judy: The target is just a property of the event object.

Joe: Great. That sounds perfect for showAnswer. We’ll be done in a snap… Wait, so showAnswer

is passed the event object?

Judy: That’s right.

Joe: So how did our code for the showAnswer function work up until now? It’s being passed this

event object, but we don’t have a parameter defined for the event object in the function!

Judy: Remember, JavaScript lets you ignore parameters if you want.

Joe: Oh, right.

Judy: Now Joe, don’t forget, you’ll need to figure out how to change the src of the image to the

correct name for the unblurred version. Right now we’re assuming the name of the unblurred

image is “zero.jpg”, but that won’t work any more.

Joe: Maybe we can use the id attribute of the image to figure out the unblurred image name. The

ids of all the images match the names of the unblurred version of each image.

Judy: Sounds like a plan!









you are here 4 399

asynchronous coding

When the click handler is called, it’s passed an —and in fact, for most

of the events associated with the document object model (DOM) you’ll be passed

an event object. The event object contains general information about the event,

such as what element generated the event and what time the event happened. In

addition, you’ll get information specific to the event, so if there was a mouse click,

for instance, you’ll get the coordinates of the click.

Let’s step through how event objects work:

How the event object works

function showAnswer(eventObj) {

...

}

Event

“

You click on an image...

...which causes an event object

to be created...

In the handler, you can use the event object to determine

things about the event, like what type of event occurred,

and which element generated the event, and so on.

So, what is in an event object? Like we said, both general and specific

information about the event. The specific information depends on the type of

the event, and we’ll come back to that a bit. The general information includes

the target property that holds a reference to the object that generated the

event. So, if you click on a page element, like an image, that’s the target, and

we can access it like this:

function showAnswer(eventObj) {

var image = eventObj.target;

}

The target tells

us what element

generated the

event.

...that is then passed

to the event handler.

There are other kinds of events

too (that is, other than DOM

events), and we’ll see an example

later in the chapter...

Take our game as an example.

which causes a click event...

If you’re

running IE8 or

older, check

the appendix.

With older versions

of IE, you need to set up the

event object a little differently.

400 Chapter 9

exercise for the event object

I hold the object on which the event occurred. I

can be different kinds of objects, but most often

I’m an element object.

You’ve already seen that the event object (for DOM events) has properties that give you more

information about the event that just happened. Below you’ll find other properties that the

event object can have. Match each event object property to what it does.

I’m a string, like “click” or “load”, that tells you

what just happened.

Want to know when your event happened? I’m

the property for you.

I’ll tell you what key the user just pressed.

Want to know how far from the left side of the

browser window the user clicked? Use me.

Want to know how far from the top of the

browser window the user clicked? Use me.

Using a touch device? Then use me to find out

how many fingers are touching the screen.

target

type

timeStamp

keyCode

clientX

clientY

touches

you are here 4 401

asynchronous coding

function showAnswer(eventObj) {

var image = eventObj.target;

var name = image.id;

name = name + ".jpg";

image.src = name;

}

The event object’s target property

is a reference to the image element

that was clicked.

We can then use the id property of that object

to get the name of the unblurred image.

Notice that the value of each image’s id corresponds to the name of the unblurred image

(minus the “.jpg” extension). Now, if we can access this id, then we can simply take that

name and add on “.jpg” to create the name of the corresponding unblurred image. Once

we have that we can change the image src property to the unblurred version of the image.

Let’s see how:

Putting the event object to work

<!doctype html>

...

<body>

</body>

</html>

Each of the images has an id, and the

id corresponds to the unblurred image

name. So the image with id “zero” has

an unblurred image of “zero.jpg”. And

the image with id “one” has an unblurred

image of “one.jpg” and so on...

Here’s the HTML again.

So, now that we’ve learned a little more about events—or more specifically, how the event

object is passed to the click handler—let’s figure out how to use the information in the event

object to deblur any image on the page. We’ll start by revisiting the HTML markup.

And finally, we’ll set the src

of the image to that name.

Remember you’re getting passed an event

object each time an image is clicked on.

As you know, once you change the src property of the image, the

browser will immediately retrieve that new image and display it in

the page in place of the blurred version.

402 Chapter 9

testing the image game

Test drive the event object and target

Make sure you’ve updated all the code in your “image.html” file, and take it for

a test drive. Guess the image, click, and see the unblurred version be revealed.

Think about how this app is designed not as a top-to-bottom running program,

but purely as a set of actions that result from an event being generated when you

click on an image. Also think about how you handled the events on all the images

with one piece of code that’s smart enough to know which image was clicked on.

Play around. What happens if you click twice? Anything at all?

Now we can click on any

of the images and see the

unblurred version. How well

did you do?







answer. How might that work?

Q: Does the onload event handler get passed an

event object too?

A: It does, and it includes information like the target,

which is the window object, the time it happened, and the

type of the event, which is just the type “load”. It’s safe to say

you don’t typically see the event object used much in load

handlers because there really isn’t anything that is useful in

it for this kind of event. You’re going to find that sometimes

the event object will be useful to you, and sometimes it won’t,

depending on the type of event. If you’re unsure what the

event object contains for a specific kind of event, just grab a

JavaScript reference.

you are here 4 403

asynchronous coding

Head First: Hey Browser, it’s always good to have your

time. We know how busy you are.

Browser: My pleasure, and you’re right, managing all

these events keeps me on my toes.

Head First: Just how do you manage them anyway?

Give us a behind-the-scenes look at the magic.

Browser: As you know, events are almost continually

happening. The user moves the mouse around, or makes a

gesture on a mobile device; things arrive over the network;

timers go off… it’s like Grand Central. That’s a lot to

manage.

Head First: I would have assumed you don’t need to

do much unless there happens to be a handler defined

somewhere for an event?

Browser: Even if there’s no handler, there’s still work to

do. Someone has to grab the event, interpret it, and see if

there is a handler waiting for it. If there is, I have to make

sure that handler gets executed.

Head First: So how do you keep track of all these

events? What if lots of events are happening at the same

time? There’s only one of you after all.

Browser: Well, yes, lots of events can happen over a

very short amount of time, sometimes too fast for me to

handle all in real time. So what I do is throw them all on a

queue as they come in. Then I go through the queue and

execute handlers where necessary.

Head First: Boy, that sounds like my days as a short-

order cook!

Browser: Sure, if you had orders coming in every

millisecond or so!

Head First: You have go through the queue one by one?

Browser: I sure do, and that’s an important thing to

know about JavaScript: there’s one queue and one “thread

of control,” meaning there is only one of me going

through the events one at a time.

Head First: What does that really mean for our readers

learning JavaScript?

Browser: Well, say you write a handler and it requires a

lot of computation—that is, something that takes a long

time to compute. As long as your handler is chugging

along computing, I’m sitting around waiting until it’s

done. Only then can I continue with the queue.

Head First: Oh wow. Does that happen a lot, that is, you

end up waiting on slow code?

Browser: It happens, but it also doesn’t take long

for a web developer to figure out the page or app isn’t

responsive because the handlers are slow. So, it’s not a

common problem as long as the web developers know

how event queues work.

Head First: And now all our readers do! Now, back to

events, are there lots of different kinds of events?

Browser: There are. We’ve got network-based events,

timer events, DOM events related to the page and a few

others. Some kinds of events, like DOM events, generate

event objects that contain a lot more detail about the

event—like a mouse click event will have information

about where the user clicked, and a keypress event will

have information about which key was pressed, and so on.

Head First: So, you spend a lot of time dealing with

events. Is that really the best use of your time? After all,

you’ve got to deal with retrieving, parsing and rendering

pages and all that.

Browser: Oh, it’s very important. These days you’ve

got to write code that makes your pages interactive and

engaging, and for that you need events.

Head First: Oh for sure, the days of simple pages are

gone.

Browser: Exactly. Oh shoot, this queue is about to

overflow. Gotta run!

Head First: Okay… until next time!

Events Exposed

This week’s interview:

Talking to the browser about events

404 Chapter 9

the event queue



















Event queue

You already know that the browser maintains a queue of events. And

that behind the scenes the browser is constantly taking events off that

queue and processing them by calling the appropriate event handler for

them, if there is one.

Events and queues

It’s important to know that the browser processes these events one at a time,

so, where possible, you need to keep your handlers short and efficient. If

you don’t, the whole event queue could stack up with waiting events, and

the browser will get backed up dealing with them all. The downside to you?

Your interface could really start to become slow and unresponsive.



















The browser steps

through the queue

from oldest to newest,

processing each event.

If things get really bad you’ll get

the slow script dialog box, which

means the browser is giving up!

The browser.

you are here 4 405

asynchronous coding

Here’s the map and X

marks the spot!

Your code will

display the

coordinates below

the map.

After your code is written, just

move the mouse over the X to see

the coordinates of the treasure.

Ahoy matey! You’ve got a treasure map in your possession and we

need your help in determining the coordinates of the treasure. To do

that you’re going to write a bit of code that displays the coordinates

on the map as you pass the mouse over the map. We’ve got some of

the code on the next page, but you’ll have to help finish it.

P.S. We highly

encourage you to

do this exercise,

because we don’t

think the pirates

are going to be

too happy if they

don’t get their

coordinates... Oh,

and you’ll need this

to complete your

code:

clientX, clientY: the x (and y) position in pixels of your mouse from the left side (and top) of the browser window.

screenX, screenY: the x (and y) position in pixels of your mouse from the left side (and top) of the user’s screen.

pageX, pageY: the x (and y) position in pixels of your mouse from the left side (and top) of the browser’s page.

The mousemove event

The mousemove event notifies your handler when a mouse moves over a particular element. You set up your

handler using the element’s onmousemove property. Once you’ve done that you’ll be passed an event object

that provides these properties:

406 Chapter 9

exercise for the mousemove event

<!doctype html>

<head>

<title>Pirates Booty</title>

window.onload = init;

function init() {

var map = document.getElementById("map");

_________________________________________

}

function showCoords(eventObj) {

var map = document.getElementById("coords");

________________________

map.innerHTML = "Map coordinates: "

+ x + ", " + y;

}

</script>

</head>

<body>

<p id="coords">Move mouse to find coordinates...</p>

</body>

</html>

Blimey! The code is below. So far it includes the map in the page

and creates a paragraph element to display the coordinates. You

need to make all the event code work. Good luck. We don’t want to

see you go to Davy Jones’ locker anytime soon...

Set up your handler here.

Grab the coordinates here.

When you’re done get this code in a real page, load it,

and write your coordinates here.

____________________________________

you are here 4 407

asynchronous coding

Even more events

So far we’ve seen three types of events: the load event, which occurs when the browser

has loaded the page; the click event, which occurs when a user clicks on an element in

the page and the mousemove event, which occurs when a user moves the mouse over

an element. You’re likely to run into many other kinds of events too, like events for data

arriving over the network, events about the geolocation of your browser, and time-

based events (just to name a few).

For all the events you’ve seen, to wire up a handler, you’ve always assigned the handler

to some property, like onload, onmouseover or onclick. But not all events work like

this—for example, with time-based events, rather than assigning a handler to a property,

you call a function, setTimeout, instead and pass it your handler.

Here’s an example: say you want your code to wait five seconds before doing something.

Here’s how you do that using setTimeout and a handler:

function timerHandler() {

alert("Hey what are you doing just sitting there staring at a blank screen?");

}

setTimeout(timerHandler, 5000);

First we write an event handler. This

is the handler that will be called

when the time event has occurred.

All we’re doing in this event handler is showing an alert.

And here, we call setTimeout, which takes two arguments:

the event handler and a time duration (in milliseconds).

Using setTimeout is

a bit like setting a

stop watch.

Test drive your timer

Don’t just sit there! It’s time to test this code! Throw this code into a basic

HTML page, and load the page. At first you won’t see anything, but after

five seconds you’ll see the alert.

Be patient, wait five seconds and you'll see

what we see. Now if you've been sitting there

a couple minutes you might want to give your

machine a little kick... just kidding, you’d

actually better check your code.

Here we’re asking

the timer to wait

5000 milliseconds

(5 seconds).

And then call the

handler timerHandler.



the alert appear every

5 seconds, over and

over?

408 Chapter 9

a setTimeout handler



How setTimeout works

Let’s step through what just happened.

















function timerHandler() {

alert("Hey what are you doing just sitting there staring at a blank screen?");

}







































The browser tracks

all timers (yes you can

have more than one at

a time) along with the

corresponding handlers

it needs to call.

The time event is triggered when the countdown is

complete. The browser executes the event handler by

calling the function you passed in.

When the browser executes our

event handler, we see the alert!

Your browser

manages timers.

you are here 4 409

asynchronous coding

Good catch! Remember we said up front that in this chapter

you’re going to feel like you aren’t in Kansas anymore? Well this

is that point in the movie where everything goes from black and

white to color. Back to your question; yes, we defined a function

and then took that function, and passed it to setTimeout (which

is actually a method).

Why would we do this and what does it mean? Let’s think through

this: the setTimeout function essentially creates a countdown

timer and associates a handler with that timer. That handler is

called when the timer hits zero. Now to tell setTimeout what

handler to call, we need to pass it a .

setTimeout stores the reference away to use later when the timer

has expired.

If you’re saying “That makes sense,” then great. On the other

hand, you might be saying “Excuse me? Pass a function to a

function? Say what?” In that case, you probably have experience

with a language like C or Java, where 

… well, in JavaScript, you do, and

in fact, being able to pass functions around is incredibly powerful,

especially when we’re writing code that reacts to events.

More likely at this point you’re saying, “I think I sort of get it,

but I’m not sure.” If so, no worries. For now, just think of this

as giving setTimeout a reference to the handler it’s going to

need to invoke when the timer expires. We’re going to be talking

a lot more about functions and what you can do with them (like

passing them to other functions) in the next chapter. So just go

with it for now.







setTimeout(timerHandler, 5000);

Here it is, a reference to a function passed

to setTimeout (another function).

410 Chapter 9

questions about events

Q: Is there a way to stop setInterval?

A: There is. When you call setInterval, it returns a timer object.

You can pass that timer object to another function, clearInterval, to

stop the timer.

Q: You said setTimeout was a method, but it looks like a

function. Where’s the object it’s a method of?

A: Good catch. Technically we could write window.setTimeout, but

because the window object is considered the global object, we can

omit the object name, and just use setTimeout, which we’ll see a lot

in practice.

Q: Can I omit window on the window.onload property too?

A: You can, but most people don’t because they are worried

onload is a common enough property name (other elements can have

the onload property too) that not specifying which onload property

might be confusing.

Q: With onload I’m assigning one handler to an event. But

with setTimeout, I seem to be able to assign as many handlers

as I want to as many timers as I want?

A: Exactly. When you call setTimeout, you are creating a timer

and associating a handler with it. You can create as many timers as

you like. The browser keeps track of associating each timer with its

handler.

Q: Are there other examples of passing functions to

functions?

A: Lots of them. In fact, you’ll find that passing around functions

is fairly common in JavaScript. Not only do lots of built-in functions,

like setTimeout and setInterval, make use of function passing, but

you’ll also discover there’s a lot code you’ll write yourself that accepts

functions as arguments. But that’s only part of the story, and in the

next chapter we’re going to dive deep into this topic and discover that

you can do all sort of interesting things with functions in JavaScript.

var tick = true;

function ticker() {

if (tick) {

console.log("Tick");

tick = false;

} else {

console.log("Tock");

tick = true;

}

setInterval(ticker, 1000);

Take a look at the code below and see if you can figure out what

setInterval does. It’s similar to setTimeout, but with a slight twist.

Check your answer at the end of the chapter.

Here’s the output.

JavaScript console

Tick

Tock

Tick

Tock

Tick

Tock

Tick

Tock

Here’s the code.

Your analysis goes here.

you are here 4 411

asynchronous coding

Joe: That sounds cool… I bet you’re using

setTimeout?

Frank: That’s my plan, although I’m not sure

how to know which image to reblur.

Jim: What do you mean?

Frank: I have my code so that when you click on

an image and reveal it, I set up a timer that fires

in two seconds. When the timeout event fires, it

calls a new handler I wrote called reblur.

Joe: And in reblur, you need to know which image

to reblur?

Frank: Right. I’m not passing any arguments to the handler, it’s just

being called by the browser when the time expires, and so I have no way to tell

my handler the correct image to reblur. I’m kinda stuck.

Jim: Have you looked at the setTimeout API?

Frank: No, I know only what Judy told me: that setTimeout takes a function

and a time duration in milliseconds.

Jim: You can add an argument to the call to setTimeout that is passed on to the

handler when the time event fires.

Frank: Oh that’s perfect. So I can just pass in a reference to the correct image to

reblur and that will get passed on to the handler when it is called?

Jim: You got it.

Frank: See what a little talking through code gets ya Joe?

Joe: Oh for sure. Let’s give this a try…











Frank

Jim

Joe

412 Chapter 9

using setTimeout in the image game

window.onload = function() {

var images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

images[i].onclick = showAnswer;

}

};

function showAnswer(eventObj) {

var image = eventObj.target;

var name = image.id;

name = name + ".jpg";

image.src = name;

setTimeout(reblur, 2000, image);

}

function reblur(image) {

var name = image.id;

name = name + "blur.jpg";

image.src = name;

}

Finishing the image game

Now it’s time to put the final polish on the image game. What we want is for

an image to automatically reblur a few seconds after it’s revealed. And, as

we just learned, we can pass along an argument for the event handler when

we call setTimeout. Let’s check out how to do this:

setTimeout does not support

extra arguments in IE8 and

earlier.

That’s right. This code is not going to

work for you or your users if you’re

using IE8 or earlier. But you shouldn’t be using

IE8 for this book anyway! That said, you’ll see

another way to do this a little later in the book

that will take care of this for IE8 (and earlier).

This code is just as we wrote it

before. No changes here...

But now when we show the user the

clear image, we also call setTimeout

to set up an event that will fire in

two seconds.

We'll use reblur (below) as our

handler, and pass it 2000

milliseconds (two seconds) and also

an argument, the image to reblur.

Now when this handler is called, it

will be passed the image.

The handler can take the image, get

the id of the image, and use that to

create the name of the blurred image.

When we set the src of the image to

that name, it will replace the clear

image with the blurred image.

you are here 4 413

asynchronous coding

Q: Can I pass just one argument to the

setTimeout handler?

A: No you can actually pass as many as

you like: zero, one or more.

Q: What about the event object?

Why doesn't setTimeout pass the event

handler one?

A: The event object is mostly used with

DOM-related event handlers. setTimeout

doesn't pass any kind of event object to

its handler, because it doesn’t occur on a

specific element.

Q: showAnswer is a handler, and yet it

creates a new handler, reblur, in its code.

Is that right?

A: You’ve got it. You’ll actually see this

fairly often in JavaScript. It's perfectly normal

to see a handler set up additional event

handlers for various events. And this is the

style of programming we were referring to in

the beginning of the chapter: asynchronous

programming. To create the image game we

didn’t just translate an algorithm that runs

top down. Rather we’re hooking up event

handlers to handle the execution of the

game as events occur. Trace through a few

different examples of clicking on images and

the various calls that get made to reveal and

reblur the image.

Q: So there are DOM-based events,

and timer events… are there lots of

different kinds of events?

A: Many of the events you deal with

in JavaScript are DOM events (like when

you click on an element), or timer events

(created with setTmeout or setInterval).

There are also API-specific events, like

events generated by JavaScript APIs

including Geolocation, LocalStorage, Web

Workers, and so on (see Head First HTML5

Programming for more on these). And finally,

there is a whole category of events related to

I/O: like when you request data from a web

service using XmlHttpRequest (again, see

Head First HTML5 Programming for more),

or Web Sockets.

Test driving the timer

That wasn’t much code to add, but it sure makes a big difference in how

the image game works. Now when you click, behind the scenes, the browser

(through the timer events) is tracking when it needs to call the reblur handler,

which blurs the image again. Note how  this feels—you’re in control

of when the images are clicked, but behind-the-scenes code is being invoked

at various times based on the click event and on timer events. There’s no über

algorithm driving things here, controlling what gets called and when; it’s just a

lot of little pieces of code that set up, create and react to events.

Now when you click, you'll see

the image revealed, and then

blurred again two seconds later.

Give this a good QA testing by

clicking on lots of images in quick

succession. Does it always work?

Refer back to the code and

wrap your brain around how the

browser keeps track of all the

images that need to be reblurred.

414 Chapter 9

using the mouseover event













Judy: To make this work you’ll want to make use of the mouseover event. You can

set a handler for this event on any element with the onmouseover property:

myElement.onmouseover = myHandler;

Judy: Also, the mouseout event tells you when the mouse leaves your element. You

can set its handler with the onmouseout property.

Rework your code so that an image is revealed and reblurred by

moving your mouse over and out of the image elements. Be sure to

test your code, and check your answer at the end of the chapter:

JavaScript code goes here.

you are here 4 415

asynchronous coding

<!doctype html>

<head>

<title>Don't resize me, I'm ticklish!</title>

function resize() {

var element = document.getElementById("display");

element.innerHTML = element.innerHTML + " that tickles!";

}

</script>

</head>

<body>

Whatever you do, don't resize this window! I'm warning you!

</p>

window.onresize = resize;

</script>

</body>

</html>

With the image game complete, Judy wrote some code to review

in the weekly team meeting. In fact, she started a little contest,

awarding the first person to describe what the code does with

lunch. Who wins? Jim, Joe, Frank? Or you?

Put your notes here describing what this code does.

What events are involved? How is the handler set

up? And when does the event happen? Don't just

make notes, give this a try in your browser.

416 Chapter 9

code lab on functions

We’ve found some highly suspicious code we need your help testing. While we’ve already done an

initial analysis on the code and it looks like 100% standard JavaScript, something about it looks odd.

Below you’ll find two code specimens. For each specimen you’ll need to identify what seems odd

about the code, test to make sure the code works, and then try to analyze what exactly it does. Go

ahead and make your notes on this page. You’ll find our analysis on the next page.

CODE LABORATORY

DO try this at HOME!

window.onload = function() {

alert("The page is loaded!");

}

Specimen #2

var addOne = function(x) {

return x + 1;

} ;

var six = addOne(5);

Specimen #1

you are here 4 417

asynchronous coding

CODE LABORATORY: ANALYSIS

DO try this at HOME!

window.onload = function() {

alert("The page is loaded!");

}

Specimen #2

var addOne = function(x) {

return x + 1;

} ;

var six = addOne(5);

Specimen #1

At first glance this code appears

to simply define a function that

adds the number one to any

parameter and return it.

Looking closer, this isn’t a normal

function definition. Rather, we

are declaring a variable and

assigning to it a function that

appears to be missing its name.

Further, we’re invoking the

function with the variable name,

not a name associated with the

function as part of its definition.

Odd indeed (although it reminds

us a bit of how object methods

are defined).

Here we appear to have something

similar. Instead of defining

a function separately and

assigning its name to the window.

onload property, we’re assigning

a function directly to that

property. And again, the function

doesn’t define its own name.

We added this code to an HTML page and tested it. The code appears to work as you

might expect. With specimen #1, when the function assigned to addOne is invoked, we get

a result that is one greater than the number we pass in, which seems right. With specimen

#2, when we load the page, we get the alert “The page is loaded!”.

From these tests it would appear as if functions can be defined without names, and used

in places where you’d expect an expression.

418 Chapter 9

chapter summary

Most JavaScript code is written to react to events.

There are many different kinds of events your code can

react to.

To react to an event, you write an event handler

function, and register it. For instance, to register a

handler for the click event, you assign the handler

function to the onclick property of an element.



choose to handle the events you’re interested in.

Functions are used for handlers because functions

allow us to package up code to be executed later (when

the event occurs).

Code written to handle events is different from code

that executes top to bottom and then completes. Event

handlers can run at any time and in any order: they are

asynchronous.

Events that occur on elements in the DOM (DOM

events) cause an event object to be passed to the event

handler.

The event object contains properties with extra

information about the event, including the type (like

“click” or “load”) and the target (the object on which the

event occurred).

Older versions of IE (IE 8 and older) have a different

event model from other browsers. See the appendix for

more details.

Many events can happen very close together. When too

many events happen for the browser to handle them as

they occur, the events are stored in an event queue (in

the order in which they occurred) so the browser can

execute the event handlers for each event in turn.

If an event handler is computationally complex, it will

slow down the handling of the events in the queue

because only one event handler can execute at a time.

The functions setTimeout and setInterval are used

to generate time-based events after a certain time has

passed.

The method getElementsByTagName returns zero,

one or more element objects in a NodeList (which is

array-like, so you can iterate over it).











you are here 4 419

asynchronous coding

Event Soup

We’ve scratched the surface

of events, using load, click,

mousemove, mouseover, mouseout,

resize and timer events. Check out

this delicious soup of events you’ll

encounter and will want to explore

in your web programming.

click

load

keypress

mouseover

mouseout

dragstart

drop

play

pause

unload

resize

touchstart

touchend

Get this event

when you click (or

tap) in a web page.

The event you get when

the browser has completed

loading a web page.

This event is generated

when you close the browser

window, or navigate away

from a web page.

Whenever you resize

your browser window,

this event is generated.

Got <video> in your page?

You’ll get this event when

you click the play button.

And this one when you

click the pause button.

This event is generated

every time you press a key.

When you put

your mouse over

an element, you’ll

generate this event.

And you’ll generate this

event when you move your

mouse off an element.

If you drag an element

in the page, you’ll

generate this event.

You’ll get this event when

you drop an element

you’ve been dragging.

On touch devices, you’ll

generate a touchstart

event when you touch and

hold an element.

And you’ll get this event

when you stop touching.

mousemove

When you move your

mouse over an element,

you’ll generate this event.

420 Chapter 9

javascript crossword

1 2

3 4 5

7 8 9

10 11 12

14 15

17 18

19 20

JavaScript cross

Practice your event reaction time by doing this crossword.

ACROSS



happened.



8. Events are handled ______________.





a tag name.



_______.







time.







events.





DOWN









any more.





6. If too many events happen close together,

the browser stores the events in an event

________.



not for baking __________.





event.











the image game.



this.

you are here 4 421

asynchronous coding

Pick two of the events above. If the browser could notify

your code when these events occurred, what cool or

interesting code might you write?

Let’s take an event that notifies us when a user submits a form.

If we’re notified of this event, then we could get all the data

the user filled into the form and check to make sure it’s valid (e.g.

the user put something that looks like a phone number into a phone

number field, or filled out the required fields). Once we’ve done

that check, then we could submit the form to the server.

How about the mouse movement event? If we’re notified whenever

a user moves the mouse, then we could create a drawing application

right in the browser.

If we’re notified when the user scrolls down the page, we could do

interesting things like reveal an image as they scroll down.

422 Chapter 9

exercise solutions

Below, you’ll find the image game code. Your job is to play like

you’re the browser and to figure out what you need to do after each

event. After you’ve done the exercise look at the end of the

chapter to see if you got everything. Here’s our solution.

BE the Browser Solution

window.onload = init;

function init() {

var image = document.getElementById("zero");

image.onclick = showAnswer;

}

function showAnswer() {

var image = document.getElementById("zero");

image.src = "zero.jpg";

}

First define the functions init and showAnswer

Set load handler to init

load handler, init, is called

we get the image with id “zero”

set image’s click handler to showAnswer

showAnswer is called

we get the image with id “zero”

we set the src attribute to “zero.jpg”

When page is

being loaded...

When page load

event occurs...

When image

click event

occurs...

you are here 4 423

asynchronous coding

I hold the object on which the event occurred. I

can be different kinds of objects, but most often

I’m an element object.

You’ve already seen that the event object (for DOM events) has properties that give you more

information about the event that just happened. Below you’ll find other properties that the

event object can have. Match each event object property to what it does.

I’m a string, like “click” or “load”, that tells you

what just happened.

Want to know when your event happened? I’m

the property for you.

I’ll tell you what key the user just pressed.

Want to know how far from the left side of the

browser window the user clicked? Use me.

Want to know how far from the top of the

browser window the user clicked? Use me.

Using a touch device? Then use me to find out

how many fingers are touching the screen.

target

type

timeStamp

keyCode

clientX

clientY

touches

SOlUTion

Note: timeStamp is not supported

in older versions of IE.

424 Chapter 9

exercise solutions

<!doctype html>

<head>

<title>Pirates Booty</title>

window.onload = init;

function init() {

var map = document.getElementById("map");

_________________________________________

}

function showCoords(eventObj) {

var map = document.getElementById("coords");

________________________

map.innerHTML = "Map coordinates: "

+ x + ", " + y;

}

</script>

</head>

<body>

<p id="coords">Move mouse to find coordinates...</p>

</body>

</html>

Ahoy matey! You’ve got a treasure map in your possession and we

need your help in determining the coordinates of the treasure. To do

that you’re going to write a bit of code that displays the coordinates on

the map as you pass the mouse over the map.

Blimey! The code is below. So far it includes the map in the page and

creates a paragraph element to display the coordinates. You need to

make all the event-based code works. Good luck. We don’t want to see

you go to Davy Jones’ locker anytime soon... And here’s our solution.

map.onmousemove = showCoords;

var x = eventObj.clientX;

var y = eventObj.clientY;

When we put our mouse right over

the X, we got the coordinates:

200, 190

you are here 4 425

asynchronous coding

var tick = true;

function ticker() {

if (tick) {

console.log("Tick");

tick = false;

} else {

console.log("Tock");

tick = true;

}

setInterval(ticker, 1000);

Take a look at the code below and see if you can figure out what

setInterval does. It’s similar to setTimeout, but with a slight twist.

Here’s our solution:

Here’s the output.

JavaScript console

Tick

Tock

Tick

Tock

Tick

Tock

Tick

Tock

Here’s the code.

Your analysis goes here.

Just like setTimeout, setInterval also takes an event handler function as its first

argument and a time duration as its second argument.

But unlike setTimeout, setInterval executes the event handler multiple times... in fact

it keeps going. Forever! (Actually, you can tell it to stop, see below). In this example,

every 1000 milliseconds (1 second), setInterval calls the ticker handler. The ticker

handler is checking the value of the tick variable to determine whether to display “Tick”

or “Tock” in the console.

So setInterval generates an event when the timer expires, and then restarts the timer.

var t = setInterval(ticker, 1000);

clearInterval(t);

To stop an interval timer, save the result

of calling setInterval in a variable...

...and then pass that to clearInterval

later, when you want to stop the timer.

426 Chapter 9

exercise solutions

Rework your code so that you can reveal and reblur an image by

passing your mouse over and out of the image elements. Be sure to

test your code. Here’s our solution:

window.onload = function() {

var images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

images[i].onclick = showAnswer;

images[i].onmouseover = showAnswer;

images[i].onmouseout = reblur;

}

};

function showAnswer(eventObj) {

var image = eventObj.target;

var name = image.id;

name = name + ".jpg";

image.src = name;

setTimeout(reblur, 2000, image);

}

function reblur(eventObj) {

var image = eventObj.target;

var name = image.id;

name = name + "blur.jpg";

image.src = name;

}

First, we remove the assignment of the

event handler to the onclick property.

Then we add the showAnswer

event handler to the onmouseover

property of the image...

And now we're going to use reblur

as the handler for the mouseout

event (instead of as a timer event

handler). So we assign reblur to the

onmouseout property of the image.

We won't use the timer anymore to reblur the

image; instead, we'll reblur it when the user

moves the mouse out of the image element.

Now we're using reblur as an event handler for

the mouseout event, so to get the correct

image to reblur, we have to use the event

object. Just like in showAnswer, we'll use the

target property to get the image object. Once

we have that, the rest of reblur is the same.

you are here 4 427

asynchronous coding

<!doctype html>

<head>

<title>Don't resize me, I'm ticklish!</title>

function resize() {

var element = document.getElementById("display");

element.innerHTML = element.innerHTML + " that tickles!";

}

</script>

</head>

<body>

Whatever you do, don’t resize this window! I'm warning you!

</p>

window.onresize = resize;

</script>

</body>

</html>

With the image game complete, Judy wrote some

code to review in the weekly team meeting. In fact,

she started a little contest, awarding the first person

to describe what the code does with lunch. Who wins?

Jim, Joe, Frank? Or you?

We set up the resize event in the script at the

bottom of the page. Remember, this script won't run

until the page is fully loaded, so that makes sure we

don't set up the event handler too early.

When you resize the browser window, the resize

event handler is called, which updates the page by

adding new text content (“ that tickles”) to the

“display” paragraph.

The event we’re interested in is the resize event, so we

set up a handler function (named resize), and assign it

to the onresize property of the window.

Our event handler is named resize. When it’s called, it just

adds some text to the paragraph with the id “display”.

428 Chapter 9

exercise solutions

1I M E S T A M

O O

3L I C 4U F

A C U Q

9Y N C R O N O U S L Y

O E S S C E I

O T A T T U S

10 J

11 I S A F

12 I V E A

I N I N R O

13 E T E L E M E N T S B Y T A G N A M E

S O E

14 A N D L E R T

15 I M E

16 R E A D V A

N17 A N D L

18 E R

D L I G

L N E

19 L I E N T X O

20 B J E C T

R A

21 I R D

JavaScript cross Solution

Practice your event reaction time by doing this

crossword. Here’s our solution.

this is a new chapter 429

Liberated functions

first class functions

Know functions, then rock. Every art, craft, and discipline has a key



functions that makes the difference.



design and organize

















We’ll spare you the

singing Oompa Loompas.













430 Chapter 10

intro to function expressions

Serious Coding

A function reference is exactly

what it sounds like: a reference

that refers to a function. You can use a

function reference to invoke a function

or, as you’ll see, you can assign them to

variables, store them in objects, and pass

them to or return them from functions

(just like object references).

The mysterious double life of the function keyword

So far we’ve been declaring functions like this:



function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}

quack(3);

There are no surprises here, but let’s get our terminology

down: formally, the first statement above is a 

which creates a function that has a name—in this case

quack—that can be used to  and  the function.

So far so good, but the story gets more mysterious because, as

you saw at the end of the last chapter, there’s another way to

use the function keyword:

var fly = function(num) {

for (var i = 0; i < num; i++) {

console.log("Flying!");

}

};

fly(3);

Now when we use the function keyword this way—that is,

within a statement, like an assignment statement—we call this

a. Notice that, unlike the function declaration,

this function doesn’t have a name. Also, the expression results

in a value that is then assigned to the variable fly. What is that

value? Well, we’re assigning it to the variable fly and then later

invoking it, so it must be a .

A standard function

declaration with the function

keyword, a name, a parameter

and a block of code.

This doesn’t look so standard: the function

doesn’t have a name, and it’s on the right

hand side of an assignment to a variable.

And we can invoke this function by using its name followed

by parentheses that enclose any needed arguments.

We can invoke this function too, this

time by using the variable fly.

function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}

you are here 4 431

first class functions

Function declarations versus function expressions

Whether you use a function declaration or a function expression you get the same thing: a function.

So what’s the difference? Is the declaration just more convenient, or is there something about

function expressions that makes them useful? Or are these just two ways to do the same thing?

At first glance, it might appear as if there isn’t a big difference between function declarations and

function expressions. But, actually, there is something fundamentally different about the two, and to

understand that difference we need to start by looking at how your code is treated by the browser at

runtime. So let’s drop in on the browser as it parses and evaluates the code in your page:

The browser.





var migrating = true;

var fly = function(num) {

for (var i = 0; i < num; i++) {

console.log("Flying!");

}

};

function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}

if (migrating) {

quack(4);

fly(4);

}







This variable declaration isn’t a

function declaration, so let’s keep

moving and ignore it for now.

Next we have a

function expression in

a statement. That’s

not a declaration...

let’s keep moving.

Ah, here’s a function

declaration. We need

to deal with that.

Let’s do that on the

next page....

After we deal with the declaration

above, we also won’t care about

this code because there aren’t any

function declarations here.

432 Chapter 10

how a function declaration is parsed

var migrating = true;

var fly = function(num) {

for (var i = 0; i < num; i++) {

console.log("Flying!");

}

};

function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}

if (migrating) {

quack(4);

fly(4);

}

 Here’s our function

stored away for later

use, such as when the

function gets invoked.

function quack(num) {

for (var i = 0; i < num; i++) {

console.log(“Quack!”);

}

function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}























Parsing the function declaration

When the browser parses your page—before it evaluates any code—it’s

looking for function declarations. When the browser finds one, it creates

a function and assigns the resulting reference to a variable with the same

name as the function. Like this:

Here’s the function

declaration in this code.

Let’s see what the

browser’s going to do

with it...

you are here 4 433

first class functions

What’s next? The browser executes the code

Now that all the function declarations have been taken care of, the browser

goes back up to the top of your code and starts executing it, top to bottom.

Let’s check in on the browser at that point in the execution:

We start with a simple

variable assignment. We’ve

seen how to do this kind

of thing before.

function(num) {

for (var i = 0; i < num; i++) {

console.log("Flying!");

}

Looks like

we’re going

to need

a variable

named fly.

Just like

before, we

store the

function

away for

later use.







Now we take the

reference to the

function and assign it

to the variable fly.

























var migrating = true;

var fly =

function

(num) {

for (var i = 0; i < num; i++) {

console.log("Flying!");

}

};

function

quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}

if (migrating) {

quack(4);

fly(4);

}













true

migrating



434 Chapter 10

invoking a function

Moving on... The conditional

Once the fly variable has been taken care of, the

browser moves on. The next statement is the function

declaration for quack, which was dealt with in the

first pass through the code, so the browser skips the

declaration and moves on to the conditional statement.

Let’s follow along…

quack(4);

function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}

function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}







Here’s the function created by the

function declaration for quack.

To invoke the function, we

pass a copy of the argument

value to the parameter...

...and then execute the

body of the function.



























var migrating = true;

var fly = function(num) {

for (i = 0; i < num; i++) {

console.log("Flying!");

}

};

function quack(num) {

for (i = 0; i < num; i++) {

console.log("Quack!");

}

if (migrating) {

quack(4);

fly(4);

}

var migrating = true;

var fly = function(num) {

for (i = 0; i < num; i++) {

console.log("Flying!");

}

};

function quack(num) {

for (i = 0; i < num; i++) {

console.log("Quack!");

}

if (migrating) {

quack(4);

fly(4);

}

Been there, done

that, moving on...



you are here 4 435

first class functions

And finishing up...

var migrating = true;

var fly = function(num) {

for (var i = 0; i < num; i++) {

console.log("Flying!");

}

};

function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}

if (migrating) {

quack(4);

fly(4);

}

All that’s left is to invoke the fly function created by the

function expression. Let’s see how the browser handles this:

fly(4);

function(num) {

for (vari = 0; i < num; i++) {

console.log("Flying!");

}

function(num) {

for (var i = 0; i < num; i++) {

console.log("Flying!");

}







Here’s the

function

referenced by

the fly variable.

To invoke the function, we

pass a copy of the argument

value to the parameter...

...and then execute the

body of the function.























436 Chapter 10

questions about function expressions

What deductions can you make about function declarations and

function expressions given how the browser treats the quack

and fly code? Check each statement that applies. Check your

answer at the end of the chapter before you go on.

❏Function declarations are evaluated

before the rest of the code is evaluated.

❏Function expressions get evaluated

later, with the rest of the code.

❏A function declaration doesn’t return a

reference to a function; rather it creates

a variable with the name of the function

and assigns the new function to it.

❏A function expression returns a

reference to the new function created

by the expression.

❏You can hold function references in

variables.

❏Function declarations are statements;

function expressions are used in

statements.

❏The process of invoking a function

created by a declaration is exactly the

same for one created with an expression.

❏Function declarations are the tried and

true way to create functions.

❏You always want to use function

declarations because they get evaluated

earlier.

Q: We’ve seen expressions like 3+4

and Math.random() * 6, but how can a

function be an expression?

A: An expression is anything that

evaluates to a value. 3+4 evaluates to 7,

Math.random() * 6 evaluates to a random

number, and a function expression evaluates

to a function reference.

Q: But a function declaration is not

an expression?

A: No, a function declaration is a

statement. Think of it as having a hidden

assignment that assigns the function

reference to a variable for you. A function

expression doesn’t assign a function

reference to anything; you have to do that

yourself.

Q: What good does it do me to have a

variable that refers to a function?

A: Well for one thing you can use it to

invoke the function:

myFunctionReference();

But you can also pass a reference to a

function or return a reference from a function.

But, we’re getting a little ahead of ourselves.

We’ll come back to this in a few pages.

Q: Can function expressions only

appear on the right hand side of an

assignment statements?

A: Not at all. A function expression can

appear in many different places, just like

other kind of expressions can. Stay tuned

because this is a really good question and

we’ll be coming back to this in just a bit.

Q: Okay, a variable can hold a

reference to a function. But what is the

variable really referencing? Just some

code that is in the body of the function?

A: That’s a good way to begin thinking

about functions, but think of them more as

a little crystallized version of the code, all

ready to pull out at any time and invoke.

You’re going to see later that this crystallized

function has a bit more in it than just the

code from the body.

you are here 4 437

first class functions











It is a little subtle. First of all, you’re right—

whether you use a function declaration or a function

expression, you end up with a function. But there are

some important differences between the two. For one,

with a declaration, a function is created and setup 

 . With a function expression,

a function is created as the code executes, at .

Another difference has to do with function naming—

when you use a declaration, the function name is used to

create and set up as a variable that refers to the function.

And, when you use a function expression, you typically

don’t provide a name for the function, so either you end

up assigning the function to a variable in code, or you

use the function expression in other ways.

Now take these differences and stash them in the back

of your brain as this is all going to become useful shortly.

For now, just remember how function declarations and

expressions are evaluated, and how names are handled.

We’ll take a look at

what those are later

in the chapter.

438 Chapter 10

exercise for function declarations and expressions

Below, you’ll find JavaScript code. Your job is to play like you’re the

browser evaluating the code. In the space to the right, record each

function as it gets created. Remember to make two passes over

the code: the pass that processes declarations, and the second

pass that handles expressions.

BE the Browser

var midi = true;

var type = "piano";

var midiInterface;

function play(sequence) {

// code here

}

var pause = function() {

stop();

}

function stop() {

// code here

}

function createMidi() {

// code here

}

if (midi) {

midiInterface = function(type) {

// code here

};

}

Write, in order, the names of the functions

as they are created. If a function is created

with a function expression put the name of

the variable it is assigned to. We've done the

first one for you.

play

you are here 4 439

first class functions

This is the

actual function.

Our two functions again. Remember quack is defined

with a function declaration, and fly with a function

expression. Both result in function references, which

are stored in the variables quack and fly, respectively.

Sure, we all think of functions as things we invoke, but you can think of

functions as  too. That value is actually a reference to the function, and

as you’ve seen, whether you define a function with a function declaration or

a function expression, you get a reference to that function.

How functions are values too

var superFly = fly;

superFly(2);

var superQuack = quack;

superQuack(3);



function(num) {

...

}

A variable can hold a

reference to a function.

function quack(num) {

for (var i = 0; i < num; i++) {

console.log("Quack!");

}

var fly = function(num) {

for (var i = 0; i < num; i++) {

console.log("Flying!");

}

After we assign the value in fly to superFly,

superFly holds the function reference, so by

adding some parentheses and an argument

we can invoke it!

And even though quack was created by a

function declaration, the value in quack is a

function reference too, so we can assign it to

the variable superQuack and invoke it.

JavaScript console

Flying!

Quack!

One of the most straightforward things we can do with functions is assign

them to variables. Like this:

The function declaration takes care of

assigning the reference to a variable with

the name you supply, in this case quack.

When you have a function expression, you need to

assign the resulting reference to a variable yourself.

Here we’re storing the reference in the fly variable.

In other words, references are references, no

matter how you create them (that is, with a

declaration or an expression)!

440 Chapter 10

exercise for function values

To get the idea of functions as values into your brain, let’s play a little game of

chance. Try the shell game. Will you win or lose? Give it a try and find out.

var winner = function() { alert("WINNER!") };

var loser = function() { alert("LOSER!") };

// let's test as a warm up

winner();

// let's assign to other variables for practice

var a = winner;

var b = loser;

var c = loser;

a();

b();

// now let's try your luck with a shell game

c = a;

a = b;

b = c;

c = a;

a = c;

a = b;

b = c;

a();

Execute the code (by

hand!) and figure out

if you won or lost.

Remember, these variables hold

references to the winner and loser

functions. We can assign and reassign

these references to other variables,

just like with any value.

Remember, at any time, we can

invoke a reference to a function.

Start thinking about functions as values, just like numbers, strings,

booleans or objects. The thing that really makes a function value

different from these other values is that we can invoke it.

you are here 4 441

first class functions

Head First: Function, we’re so happy to finally have

you back on this show. You’re quite a mystery and our

readers are dying to know more.

Function: It’s true, I’m deep.

Head First: Let’s start with this idea that you can

be created with a declaration, or created with an

expression. Why two ways of defining you? Wouldn’t

one be enough?

Function: Well, remember, these two ways of defining

a function do two slightly different things.

Head First: But the result is the same: a function,

right?

Function: Yes, but look at it this way. A function

declaration is doing a little bit of work behind the scenes

for you: it’s creating the function, and then also creating

a variable to store the function reference in. A function

expression creates the function, which results in a

reference and it’s up to you to do something with it.

Head First: But don’t we always just store the

reference we get from a function expression in a variable

anyway?

Function: Definitely not. In fact, we usually don’t.

Remember a function reference is a value. Think of the

kinds of things you can do with other kinds of values,

like an object reference for instance. I can do all those

things too.

Head First: But how can you possibly do everything

those other values can do? I declare a function, and I

call it. That’s about as much as any language allows,

right?

Function: Wrong. You need to start thinking of a

function as a value, just like objects or the primitive

types. Once you get a hold of a function you can do

all kinds of things with it. But there is one important

difference between a function and other kinds of values,

and that is what really makes me what I am: a function

can be invoked, to execute the code in its body.

Head First: That sounds very impressive and powerful,

but I’d have no idea what to do with you other than

define and call you.

Function: This is where we separate the six figure

coders from the scripters. When you can treat a

function like any other value, all kinds of interesting

programming constructs become possible.

Head First: Can you give us just one example?

Function: Sure. Say you want to write a function that

can sort . No problem. All you need is a function

that takes two things: the collection of items you need to

sort, and  that knows how to compare any

two items in your collection. Using JavaScript you can

easily create code like that. You write one sort function

for every kind of collection, and then just tell that

function how to compare items by passing it a function

that knows how to do the comparison.

Head First: Err…

Function: Like I said, this is where we separate the six

figure coders from the scripters. Again, we’re passing a

 that knows how to do the comparison to the other

. In other words we’re treating the function like a

value by passing it to a function .

Head First: And what does that get us other than

confused?

Function: It gets you less code, less hard work, more

reliability, better flexibility, better maintainability, a

higher salary.

Head First: That all sounds good, but I’m still not sure

how to get there.

Function: Getting there takes a little bit of work. This

is definitely an area where your brain has to expand a

bit.

Head First: Well, function, my head is expanding so

much it’s about to explode, so I’m going to go lie down.

Function: Any time. Thanks for having me!

Function Exposed

This week’s interview:

Understanding Function

442 Chapter 10

first class functions

Did we mention functions have

First Class status in JavaScript?

If you’re coming to JavaScript from a more traditional programming language

you might expect functions to be… well, just functions. You can declare them

and call them, but when you’re not doing either of those things they just sit

around doing nothing.

Now you know that functions in JavaScript are values—values that can be

assigned to variables. And you know that with values of other types, like

numbers, booleans, strings and even objects, we can do all sorts of things with

those values, like pass them to functions, return them from functions or even

store them in objects or arrays.

Computer scientists actually have a term for these kinds of values: they’re called

. Here’s what you can do with a first class value:

❏Assign the value to a variable (or store it in a data

structure like an array or object).

❏Pass the value to a function.

❏Return the value from a function.

Guess what? We can do all these things with functions too. In fact,

we can do  with a function that we can do with other values

in JavaScript. So consider functions first class values in JavaScript,

along with all the values of the types you already know: numbers,

strings, booleans and objects.

Here’s a more formal definition of first class:

First class: a value that can be treated like any other

value in a programming language, including the

ability to be assigned to a variable, passed as an

argument, and returned from a function.

We’re going to see that JavaScript functions easily qualify as first

class values—in fact, let’s spend a little time working through

just what it means for a function to be first class in each of these

cases. Here’s a little advice first: stop thinking about functions as

something special and different from other values in JavaScript.

There is great power in treating a function like a value. Our goal

in the rest of the chapter is to show you why.

We always thought VIP-access-

to-all-areas was a better name,

but they didn’t listen to us, so

we’ll stick with first class.

you are here 4 443

first class functions

Flying First Class

The next time you’re in a job interview and you get asked “What

makes JavaScript functions first class?” you’re going to pass with flying

colors. But before you start celebrating your new career, remember

that, so far, all your understanding of first class functions is 

. Sure, you can recite the definition of what you can do with

first class functions:

If that answer lands you the

big job, don’t forget about us!

We take donations in chocolate,

pizza or bitcoins.

All passengers are

kept in an array.

❏You can assign functions to variables.

❏You can pass functions to functions.

❏You can return functions from functions.

You’ve seen this already.

We're going to work on this now.

var passengers = [ { name: "Jane Doloop", paid: true },

{ name: "Dr. Evel", paid: true },

{ name: "Sue Property", paid: false },

{ name: "John Funcall", paid: true } ];

And we'll cover this in just a bit...

But can you use those techniques in your code, or know when it would

help you to do so? No worries; we’re going to deal with that now by

learning how to pass functions to functions. We’re going to start simple,

and take it from there. In fact, we’re going to start with just a simple

data structure that represents passengers on an airline flight:

And here we have four passengers

(feel free to expand this list

with friends and family).

And each passenger

is represented by an

object with a name

and a paid property.

The name is a simple text string. And paid is a boolean that represents whether

or not the passenger has paid for the flight.

Here our goal: write some code that looks at the passenger list

and makes sure that certain conditions are met before the flight

is allowed to take off. For instance, let’s make sure there are no

passengers on a no-fly list. And let’s make sure everyone has paid

for the flight. We might even want to create a list of everyone who

is on the flight.

Here's the data

structure representing

the passengers:



to perform these three tasks (no-fly



passengers)?

444 Chapter 10

using functions to check passengers

Now typically you’d write a function for each of these conditions: one to check the

no-fly-list, one to check that every passenger has paid, and one to print out all the

passengers. But if we wrote that code and stepped back to look at it, we’d find that

all these functions look roughly the same, like this:

Writing code to process and check passengers

function checkPaid(passengers) {

for (var i = 0; i < passengers.length; i++) {

if (!passengers[i].paid) {

return false;

}

return true;

}

function checkNoFly(passengers) {

for (var i = 0; i < passengers.length; i++) {

if (onNoFlyList(passengers[i].name)) {

return false;

}

return true;

}

function printPassengers(passengers) {

for (var i = 0; i < passengers.length; i++) {

console.log(passengers[i].name);

return false;

}

return true;

}

The only thing

different here is the

test for paid versus

being on a no fly list.

And print is different only in that there is no

test (instead we pass the passenger to console.log)

and we don't care about the return value, but

we're still iterating through the passengers.

That’s a lot of duplicated code: all these functions iterate through the passengers doing

something with each passenger. And what if there are additional checks needed in

the future? Say, checking to make sure laptops are powered down, checking to see if a

passenger has an upgrade, checking to see if a passenger has a medical issue, and so on.

That’s a lot of redundant code.

Even worse, what if the data structure holding the passengers changes from a simple

array of objects to something else? Then you might have to open every one of these

functions and rewrite it. Not good.

We can solve this little problem with first class functions. Here’s how: we’re going to

write one function that knows how to iterate through the passengers, and pass to that

function a second function that knows how to do the check we need (that is, to see if a

name is on a no-fly list, to check whether or not a passenger has paid, and so on).

you are here 4 445

first class functions

Let’s do a little pre-work on this by first writing a function that takes a passenger as

an argument and checks to see if that passenger’s name is on the no-fly-list. Return

true if it is and false otherwise. Write another function that takes a passenger and

checks to see if the passenger hasn’t paid. Return true if the passenger has not paid,

and false otherwise. We’ve started the code for you below; you just need to finish it.

You’ll find our solution on the next page, but don’t peek!

Hint: assume your no-fly list consists

of one individual: Dr. Evel.

function checkNoFlyList(passenger) {

}

function checkNotPaid(passenger) {

}

Let’s get your brain warmed up for passing your first function to another

function. Evaluate the code below (in your head) and see what you

come up with. Make sure you check your answer before moving on.

function sayIt(translator) {

var phrase = translator("Hello");

alert(phrase);

}

function hawaiianTranslator(word) {

if (word === "Hello") return "Aloha";

if (word === "Goodbye") return "Aloha";

}

sayIt(hawaiianTranslator);

446 Chapter 10

passing a function to a function

Iterating through the passengers

function processPassengers(passengers, testFunction) {

for (var i = 0; i < passengers.length; i++) {

if (testFunction(passengers[i])) {

return false;

}

return true;

}

The function

processPassengers has two

parameters. The first is an

array of passengers.

We iterate through all the

passengers, one at a time.

If the result of the function is true, then we return

false. In other words, if the passenger failed the test

(e.g. they haven’t paid, or they are on the no-fly list),

then we don’t want the plane to take off!

Otherwise, if we get here then all

passengers passed the test and we

return true.

We need a function that takes the passengers and another function that

knows how to test a single passenger for some condition, like being on the

no-fly list. Here’s how we do that:

And the second is a function

that knows how to look

for some condition in the

passengers.

And then we call the

function on each passenger.

Now all we need are some functions that can test passengers (luckily you

wrote these in the previous Sharpen Your Pencil exercise). Here they are:

function checkNoFlyList(passenger) {

return (passenger.name === "Dr. Evel");

}

function checkNotPaid(passenger) {

return (!passenger.paid);

}

Here’s the function to check to see if a

passenger is on the no-fly list. Our no-fly

list is simple: everyone except Dr. Evel can

fly. We return true if the passenger is Dr.

Evel; otherwise, we return false (that is, the

passenger is not on the no-fly list).

And here’s the function to check to see if a

passenger has paid. All we do is check the paid

property of the passenger. If they have not

paid, then we return true.

Pay attention: this is one passenger (an object) not

the array of passengers (an array of objects).

you are here 4 447

first class functions

var allCanFly = processPassengers(passengers, checkNoFlyList);

if (!allCanFly) {

console.log("The plane can't take off: we have a passenger on the no-fly-list.");

}

var allPaid = processPassengers(passengers, checkNotPaid);

if (!allPaid) {

console.log("The plane can't take off: not everyone has paid.");

}

Test drive flight

Passing a function to a function

Okay, we’ve got a function that’s ready to accept a function as an argument

(processPassengers), and we’ve got two functions that are ready to be passed as

arguments to processPassengers (checkNoFlyList and checkNotPaid).

It’s time to put this all together. Drum roll please…

Passing a function to a function

is easy. We just use the name of

the function as the argument.

Here, we’re passing the checkNoFlyList

function. So processPassengers will

check each passenger to see if they are

on the no-fly list.

If any of the passengers are on the no-fly list, we’ll get back

false, and we’ll see this message in the console.

Here, we’re passing the

checkNotPaid function. So

processPassengers will check each

passenger to see if they’ve paid.

If any of the passengers haven’t paid, we’ll get back

false, and we’ll see this message in the console.

To test drive your code, just add this JavaScript to a

basic HTML page, and load it into your browser.

JavaScript console

The plane can't take off: we have a passenger on

the no-fly-list.

The plane can't take off: not everyone has paid.

Well, looks like we won't be

taking off after all. We've got

problems with our passengers!

Good thing we checked...







448 Chapter 10

questions about first class functions

function printPassenger(passenger) {

}

processPassengers(passengers, printPassenger);

Your turn again: write a function that prints a passenger’s name and whether or not they

have paid to console.log. Pass your function to processPassengers to test it. We’ve started

the code for you below; you just need to finish it up. Check your answer at the end of the

chapter before you go on.

Q: Couldn’t we just put all this code into

processPassengers? We could just put all the checks we need

into one iteration, so each time through we do all the checks

and print the list. Wouldn’t that be more efficient?

A: If your code is short and simple, yes, that might be a

reasonable approach. However, what we’re really after is flexibility.

What if, in the future, you are constantly adding new checks (has

everyone put their laptop away?) or requirements for your existing

functions change? Or the underlying data structure for passengers

changes? In these cases, the design we used allows you to make

changes or additions in a way that reduces overall complexity and

that is less likely to introduce bugs into your code.

Q: What exactly are we passing when we pass a function to

a function?

A: We’re passing a reference to the function. Think of that

reference like a pointer that points to an internal representation of

the function itself. The reference itself can be held in a variable and

reassigned to other variables or passed as an argument to a function.

And placing parentheses after a function reference causes the

function to be invoked.

Write your code here.

Your code should

print out the list of

passengers when you

pass the function to

processPassengers.

you are here 4 449

first class functions

function fun(echo) {

console.log(echo);

}

function fun(echo) {

console.log(echo);

};

Below we’ve created a function and assigned it to the variable fun.

Work your way through this code and write the resulting output on this page.

Do this with your brain before you attempt it with your computer.

fun("hello");

function boo(aFunction) {

aFunction("boo");

}

boo(fun);

console.log(fun);

fun(boo);

var moreFun = fun;

moreFun("hello again");

function echoMaker() {

return fun;

}

var bigFun = echoMaker();

bigFun("Is there an echo?");

Super important: check and understand the answers before moving on!

Extra credit! (A

preview of what’s

coming up...)



450 Chapter 10

updating the passengers

Returning functions from functions

At this point we’ve exercised two of our first class requirements,

assigning functions to variables and passing functions to functions, but

we haven’t yet seen an example of returning a function from a function.

❏You can assign functions to variables.

❏You can pass functions to functions.

❏You can return functions from functions.

Let’s extend the airline example a bit and explore why and where we

might want to return a function from a function. To do that, we’ll add

another property to each of our passengers, the ticket property, which

is set to “coach” or “firstclass” depending on the type of ticket the

passenger has purchased:

We’re doing

this now.

function serveCustomer(passenger) {

// get drink order

// get dinner order

// pick up trash

}

var passengers = [ { name: "Jane Doloop", paid: true, ticket: "coach" },

{ name: "Dr. Evel", paid: true, ticket: "firstclass" },

{ name: "Sue Property", paid: false, ticket: "firstclass" },

{ name: "John Funcall", paid: true, ticket: "coach" } ];

With that addition, we’ll write some code that handles the

various things a flight attendant needs to do:

Here are all the things the flight

attendant needs to do to serve

each passenger.

Let's start by

implementing the

drink order.

Now as you might know, service in first class tends to be a little different

from the service in coach. In first class you’re able to order a cocktail or

wine, while in coach you’re more likely to be offered a cola or water.











At least that’s how it

looks in the movies...

you are here 4 451

first class functions

Writing the flight attendant drink order code

Now your first attempt might look like this:

function serveCustomer(passenger) {

if (passenger.ticket === "firstclass") {

alert("Would you like a cocktail or wine?");

} else {

alert("Your choice is cola or water.");

}

// get dinner order

// pick up trash

}

If the passenger's ticket is a

first class ticket then we issue

an alert to ask if they'd like a

cocktail or a wine.

If they have a coach ticket,

then ask if they want a cola

or water.

Not bad. For simple code this works well: we’re taking the passenger’s ticket and

then displaying an alert based on the type of ticket they purchased. But let’s

think through some potential downsides of this code. Sure, the code to take a

drink order is simple, but what happens to the serveCustomer function if the

problem becomes more complex. For instance, we might start serving three classes

of passengers (firstclass, business and coach. And what about premium economy,

that’s four!). What happens if the drink offerings get more complex? Or what if the

choice of drinks is based on the location of the originating or destination airport?

If we have to deal with these complexities then serveCustomer is quickly going

to become a large function that is a lot more about managing drinks than serving

customers, and when we design functions, a good rule of thumb is to have them do

only one thing, but do it really well.







For instance they

typically only serve

Maitais to first

class on trips to

Hawaii (or so we've

been told).

452 Chapter 10

organizing the code to check passengers

The flight attendant drink order code: a different approach

Our first pass wasn’t bad, but as you can see this code could be problematic over time as the

drink serving code gets more complex. Let’s rework the code a little, as there’s another way

we can approach this by placing the logic for the drink orders in a separate function. Doing so

allows us to hide away all that logic in one place, and it also gives us a well-defined place to go

if we need to update the drink order code:

function createDrinkOrder(passenger) {

if (passenger.ticket === "firstclass") {

alert("Would you like a cocktail or wine?");

} else {

alert("Your choice is cola or water.");

}

And we'll place all the logic for

the drink order here.

And we'll replace the original, inline

logic with a call to createDrinkOrder.

That’s definitely going to be more readable with a single function call replacing

all the inline drink order logic. It’s also conveniently put all the drink order code

in one, easy-to-find place. But, before we give this code a test drive, hold on,

we’ve just heard about another issue…

Now this code is no longer

polluting the serveCustomer

function with a lot of drink

order logic.

Here we're creating a new function

createDrinkOrder, which is passed a passenger.

Now we can revisit the serveCustomer function and remove all the drink order logic,

replacing it with a call to this new function.

function serveCustomer(passenger) {

if (passenger.ticket === "firstclass") {

alert("Would you like a cocktail or wine?");

} else {

alert("Your choice is cola or water.");

}

createDrinkOrder(passenger);

// get dinner order

// pick up trash

}

We're removing the logic from

serveCustomer...

The createDrinkOrder function

is passed the passenger that was

passed into serveCustomer.

you are here 4 453

first class functions

function serveCustomer(passenger) {

createDrinkOrder(passenger);

// get dinner order

createDrinkOrder(passenger);

// show movie

createDrinkOrder(passenger);

// pick up trash

}

We've updated the code to

reflect the fact we're calling

createDrinkOrder a lot

during the flight.

Now, on the one hand we designed our code well, because adding

additional calls to createDrinkOrder works just fine. But, on the

other hand, we’re unnecessarily recomputing what kind of passenger

we’re serving in createDrinkOrder every time we take an order.

“But it’s only a few lines of code.” you say? Sure, but this is a simple

example in a book. What if in the real world you had to check the ticket

type by communicating with a web service from a mobile device? That

gets time consuming and expensive.

Don’t worry though, because a first class function just rode in on a

white horse to save us. You see, by making use of the capability to

return functions from functions we can fix this problem.

Wait, we need more drinks!

Stop the presses, we’ve just heard that one drink order is not

enough on a flight. In fact, the flight attendants say a typical flight

looks more like this:













function addN(n) {

var adder = function(x) {

return n + x;

};

return adder;

}

Answer here.

454 Chapter 10

returning a function from a function

Taking orders with first class functions

Now it’s time to wrap your head around how a first class function can help this situation.

Here’s the plan: rather than calling createDrinkOrder multiple times per passenger, we’re

instead going to call it once, and have it hand us back a function that knows how to do a drink

order for that passenger. Then, when we need to take a drink order, we just call that function.

Let’s start by redefining createDrinkOrder. Now when we call it, it will package up the code

to take a drink order into a function and return the function for us to use when we need it.

function createDrinkOrder(passenger) {

var orderFunction;

if (passenger.ticket === "firstclass") {

orderFunction = function() {

alert("Would you like a cocktail or wine?");

};

} else {

orderFunction = function() {

alert("Your choice is cola or water.");

};

}

return orderFunction;

}

Here's the new createDrinkOrder. It's going to return a

function that knows how to take a drink order. First, create a

variable to hold

the function we

want to return.

If the passenger is first

class, we create a function

that knows how to take a

first class order.

Otherwise create a

function to take an

coach class order.

Now let’s rework serveCustomer. We’ll first call createDrinkOrder to get a function

that knows how to take the passenger’s order. Then, we’ll use that same function over and

over to take a drink order from the passenger.

function serveCustomer(passenger) {

var getDrinkOrderFunction = createDrinkOrder(passenger);

getDrinkOrderFunction();

// get dinner order

getDrinkOrderFunction();

// show movie

getDrinkOrderFunction();

// pick up trash

}

And return the function.

Now, we execute the

conditional code to check

the passenger’s ticket

type only once.

We use the function we get back

from createDrinkOrder whenever

we need to get a drink order for

this passenger.

getDrinkOrder now returns a

function, which we store in the

getDrinkOrderFunction variable.

you are here 4 455

first class functions

Test drive flight

function servePassengers(passengers) {

for (var i = 0; i < passengers.length; i++) {

serveCustomer(passengers[i]);

}

servePassengers(passengers);

Let’s test the new code. To do that we need to write a quick function to iterate

over all the passengers and call serveCustomer for each passenger. Once you’ve

added the code to your file, load it in the browser and take some orders.

All we’re doing here is iterating over the

passengers in the passengers array, and

calling serveCustomer on each passenger.

And of course we need to call

servePassengers to get it all going. (Be

prepared, there are a lot of alerts!)

Q: Just to make sure I understand...

when we call createDrinkOrder, we get

back a function that we have to call again

to get the drink order?

A: That’s right. We first call

createDrinkOrder to get back a function,

getDrinkOrderFunction, that knows how to

ask a passenger for an order, and then we

call that function every time we want to take

the order. Notice that getDrinkOrderFunction

is a lot simpler than createDrinkOrder: all

getDrinkOrderFunction does is alert, asking

for the passenger’s order.

Q: So how does

getDrinkOrderFunction know which alert

to show?

A: Because we created it specifically

for the passenger based on their ticket.

Look back at createDrinkOrder again. The

function we’re returning corresponds to the

passenger’s ticket type: if the passenger is

in first class, then getDrinkOrderFunction

is created to show an alert asking for a first

class order. But if the passenger is in coach,

then getDrinkOrderFunction is created to

show an alert asking for a coach order. By

returning the correct kind of function for that

specific passenger’s ticket type, the ordering

function is simple, fast, and easy to call each

time we need to take an order.

Q: This code serves one passenger a

drink, shows the movie, etc. Don't flight

attendants usually serve a drink to all the

passengers and show the movie to all

passengers and so on?

A: See we were testing you! You passed.

You’re exactly right; this code applies the

entire serveCustomer function to a single

passenger at a time. That’s not really how

it works in the real world. But, this is meant

to be a simple example to demonstrate a

complex topic (returning functions), and it’s

not perfect. But now that you’ve pointed out

our mistake… students, take out a sheet of

paper and:



the code to serve drinks,

dinner and a movie to

all the passengers, and





based on their ticket class?





456 Chapter 10

exercise for first class functions

Your job is to add a third class of service to our code. Add “premium economy” class

(“premium” for short). Premium economy gets wine in addition to cola or water. Also,

implement getDinnerOrderFunction with the following menu:

Check your answer at the end of the chapter! And don’t forget to test your code.

Make sure you use first class

functions to implement this!

First class: chicken or pasta

Premium economy: snack box or cheese plate

Coach: peanuts or pretzels

you are here 4 457

first class functions

var products = [ { name: "Grapefruit", calories: 170, color: "red", sold: 8200 },

{ name: "Orange", calories: 160, color: "orange", sold: 12101 },

{ name: "Cola", calories: 210, color: "caramel", sold: 25412 },

{ name: "Diet Cola", calories: 0, color: "caramel", sold: 43922 },

{ name: "Lemon", calories: 200, color: "clear", sold: 14983 },

{ name: "Raspberry", calories: 180, color: "pink", sold: 9427 },

{ name: "Root Beer", calories: 200, color: "caramel", sold: 9909 },

{ name: "Water", calories: 0, color: "clear", sold: 62123 }

];

Webville Cola

Webville Cola needs a little help managing the code for

their product line. To give them a hand, let’s take a look at

the data structure they use to hold the sodas they produce:

Looks like they're storing their products as an array

of objects. Each object is a product.

In each product they're storing a name, number of

calories, color and number of bottles sold per month.











Webville Cola's analytics guy

458 Chapter 10

conversation about sorting arrays

Frank: Hey guys, I got a call from Webville Cola and they

need help with their product data. They want to be able to

sort their products by any property, like name, bottles sold,

soda color, calories per bottle, and so on, but they want it

flexible in case they add more properties in the future.

Joe: How are they storing this data?

Frank: Oh, each soda is an object in an array, with

properties for name, number sold, calories…

Joe: Got it.

Frank: My first thought was just to search for a simple sort

algorithm and implement it. Webville Cola doesn’t have many

products so it just needs to be simple.

Jim: Oh, I’ve got a simpler way than that, but it requires you

use your knowledge of first class functions.

Frank: I like hearing simple! But how do first class functions fit in?

That sounds complicated to me.

Jim: Not at all. It’s as easy as writing a function that knows how to compare two

values, and then passing that to another function that does the real sorting for you.

Joe: How does the function we’re writing work exactly?

Jim: Well, instead of handling the entire sort, all you need to do is write a function that

knows how to compare two values. Say you want to sort by a product property like the

number of bottles sold. You set up a function like this:

function compareSold(product1, product2) {

// code to compare here

}

We can fill in the details of the code in a minute, but for now, the key is that once you

have this function you just pass it to a sort function and that sort function does the work

for you—it just needs you to help it know how to compare things.

Frank: Wait, where is this sort function?

Jim: It’s actually a method that you can call on any array. So you can call the sort

method on the products array and pass it this compare function we’re going to

write. And, when sort is done, the products array will be sorted by whatever criteria

compareSold used to sort the values.

Joe: So if I’m sorting how many bottles are sold, those are numbers, so the

compareSold function just needs to determine which value is less or greater?

Jim: Right. Let’s take a closer look at how the array sort works…

This function needs to

take two products and

then compare them.

Jim

Frank

Joe

you are here 4 459

first class functions

JavaScript arrays provide a sort method that, given a function that

knows how to compare two items in the array, sorts the array for you.

Here’s the big picture of how this works and how your comparison

function fits in: sort algorithms are well known and widely implemented,

and the great thing about them is that sorting code can be reused for

just about any set of items. But there’s one catch: to know how to sort

a specific set of items, the sort code needs to know how those items

compare. Think about sorting a set of numbers versus sorting a list

of names versus sorting a set of objects. The way we compare values

depends on the type of the items: for numbers we use <, > and == ,

for strings we compare them alphabetically (in JavaScript, you can do

that with <, > and ==) and for objects we’d have some custom way of

comparing them based on their properties.

Let’s look at a simple example before we move on to Webville Cola’s

products array. We’ll use a simple array of numbers and use the sort

method to put them in ascending order. Here’s the array:

How the array sort method works

function compareNumbers(num1, num2) {

if (num1 > num2) {

return 1;

} else if (num1 === num2) {

return 0;

} else {

return -1;

}

This array is made of numbers, so we’re going

to be comparing two numbers at a time.

We first check

to see if num1 is

greater than num2.

If it is, we return 1.

And finally, if num1 is less

than num2, we return -1.

var numbersArray = [60, 50, 62, 58, 54, 54];

Next we need to write our own function that knows how to compare two

values in the array. Now, this is an array of numbers, so our function

will need to compare two numbers at a time. Assume we’re going to sort

the numbers in ascending order; for that the sort method expects us to

return something greater than 0 if the first number is greater than the

second, 0 if they are equal, and something less than 0 if the first number

is less than the second. Like this:

If they are equal then

we return 0.

Serious Tip

JavaScript arrays have

many useful methods

you can use to manipulate

arrays in various ways. A great

reference on all these methods

and how to use them is

JavaScript: The Denitive Guide

by David Flanagan (O’Reilly).









0 depending on the two items



item is greater than second, we







is less than the second, we













less code?





460 Chapter 10

sorting an array of numbers

var numbersArray = [60, 50, 62, 58, 54, 54];

numbersArray.sort(compareNumbers);

console.log(numbersArray);

JavaScript console

[50, 54, 54, 58, 60, 62]

Now that we’ve written a compare function, all we need to do is call the sort

method on numbersArray, and pass it the function. Here’s how we do that:

Putting it all together

We call the sort method on

the array, passing it the

compareNumbers function.

And when sort is complete the array is

sorted in ascending order, and we display

that in the console as a sanity check.

Here’s the array sorted

in ascending order.

The sort method has sorted numbersArray in ascending order because when we return

the values 1, 0 and -1, we’re telling the sort method:

1: place the first item after the second item

0: the items are equivalent, you can leave them in place

-1: place the first item before the second item.

Changing your code to sort in descending order is a matter of inverting this logic

so that 1 means place the second item after the first item, and -1 means place the

second item before the first item (0 stays the same). Write a new compare function for

descending order:

function compareNumbersDesc(num1, num2) {

if (_____ > _____) {

return 1;

} else if (num1 === num2) {

return 0;

} else {

return -1;

}

Note that the sort method is destructive, in that it changes

the array, rather than returning a new array that is sorted.

you are here 4 461

first class functions

Meanwhile back at Webville Cola

It’s time to help out Webville Cola with your new knowledge of array sorting.

Of course all we really need to do is write a comparison function for them,

but before we do that let’s quickly review the products array again:

products.sort(compareSold);

function compareSold(colaA, colaB) {

if (colaA.sold > colaB.sold) {

return 1;

} else if (colaA.sold === colaB.sold) {

return 0;

} else {

return -1;

}

var products = [ { name: "Grapefruit", calories: 170, color: "red", sold: 8200 },

{ name: "Orange", calories: 160, color: "orange", sold: 12101 },

{ name: "Cola", calories: 210, color: "caramel", sold: 25412 },

{ name: "Diet Cola", calories: 0, color: "caramel", sold: 43922 },

{ name: "Lemon", calories: 200, color: "clear", sold: 14983 },

{ name: "Raspberry", calories: 180, color: "pink", sold: 9427 },

{ name: "Root Beer", calories: 200, color: "caramel", sold: 9909 },

{ name: "Water", calories: 0, color: "clear", sold: 62123 }

];

So what are we going to sort first? Let’s start with sorting by the number of bottles sold,

in ascending order. To do this we’ll need to compare the sold property of each object.

Now one thing you should take note of is, because this is an array of product objects,

the compare function is going to be passed two objects, not two numbers:

Remember, each item in the products array is an object. We don’t

want to compare the objects to one another, we want to compare

specific properties, like sold, in the objects.

compareSold takes two cola product

objects, and compares the sold

property of colaA to the sold

property of colaB.

This function will make the sort

method sort the colas by number of

bottles sold in ascending order.

And of course, to use the compareSold function to sort the products array, we

simply call the products array’s sort method:

Remember that the sort method can be used for any kind

of array (numbers, strings, objects), and for any kind of sort

(ascending or descending). By passing in a compare function, we

get flexibility and code reuse!

But we don’t have

to tell them that.

Feel free to simplify this code like you

did in the earlier exercise if you want!

462 Chapter 10

testing webville cola’s product sorting

JavaScript console

Name: Grapefruit, Calories: 170, Color: red, Sold: 8200

Name: Raspberry, Calories: 180, Color: pink, Sold: 9427

Name: Root Beer, Calories: 200, Color: caramel, Sold: 9909

Name: Orange, Calories: 160, Color: orange, Sold: 12101

Name: Lemon, Calories: 200, Color: clear, Sold: 14983

Name: Cola, Calories: 210, Color: caramel, Sold: 25412

Name: Diet Cola, Calories: 0, Color: caramel, Sold: 43922

Name: Water, Calories: 0, Color: clear, Sold: 62123

Here's our output running the code using the

compareSold sort function. Notice the products

are in order by the number of bottles sold.

Take sorting for a test drive

Time to test the first Webville Cola code. You’ll find all the code from the last few

pages consolidated below along with some extras to test this out properly. So, just

create a simple HTML page with this code (“cola.html”) and give it some QA:

var products = [ { name: "Grapefruit", calories: 170, color: "red", sold: 8200 },

{ name: "Orange", calories: 160, color: "orange", sold: 12101 },

{ name: "Cola", calories: 210, color: "caramel", sold: 25412 },

{ name: "Diet Cola", calories: 0, color: "caramel", sold: 43922 },

{ name: "Lemon", calories: 200, color: "clear", sold: 14983 },

{ name: "Raspberry", calories: 180, color: "pink", sold: 9427 },

{ name: "Root Beer", calories: 200, color: "caramel", sold: 9909 },

{ name: "Water", calories: 0, color: "clear", sold: 62123 }

];

function compareSold(colaA, colaB) {

if (colaA.sold > colaB.sold) {

return 1;

} else if (colaA.sold === colaB.sold) {

return 0;

} else {

return -1;

}

function printProducts(products) {

for (var i = 0; i < products.length; i++) {

console.log("Name: " + products[i].name +

", Calories: " + products[i].calories +

", Color: " + products[i].color +

", Sold: " + products[i].sold);

}

products.sort(compareSold);

printProducts(products);

Here’s the compare function

we’ll pass to sort...

... and here’s a new function

we wrote to print the

products so they look nice in

the console. (If you just write

console.log(products), you can

see the output, but it doesn’t

look very good).

So first we sort the products,

using compareSold...

... and then print the results.

you are here 4 463

first class functions



Now that we have a way to sort colas by the sold property, it’s time to write compare

functions for each of the other properties in the product object: name, calories, and color.

Check the output you see in the console carefully; make sure for each kind of sort, the

products are sorted correctly. Check the answer at the end of the chapter.

function compareName(colaA, colaB) {

}

function compareCalories(colaA, colaB) {

}

function compareColor(colaA, colaB) {

}

products.sort(compareName);

console.log("Products sorted by name:");

printProducts(products);

products.sort(compareCalories);

console.log("Products sorted by calories:");

printProducts(products);

products.sort(compareColor);

console.log("Products sorted by color:");

printProducts(products);

Write your solutions for the remaining

three sort functions below.

Hint: you can use <, > and ==

to sort alphabetically too!

For each new

compare function,

we call sort, and

display the results

in the console.

464 Chapter 10

chapter summary



a function: with a function

declaration and with a function

expression.

A function reference is a value that

refers to a function.

Function declarations are handled

before your code is evaluated.

Function expressions are evaluated

at runtime with the rest of your

code.

When the browser evaluates a

function declaration, it creates a

function as well as a variable with

the same name as the function, and

stores the function reference in the

variable.

When the browser evaluates a

function expression, it creates a

function, and it’s up to you what to

do with the function reference.

First class values can be assigned

to variables, included in data

structures, passed to functions, or

returned from functions.



value.

The array sort method takes a

function that knows how to compare

two values in an array.

The function you pass to the sort

method should return one of these

values: a number greater than 0, 0,

or a number less than 0.

you are here 4 465

first class functions

What deductions can you make about function declarations and

function expressions given how the browser treats the quack and fly

code? Check each statement that applies. Check your answer at the end

of the chapter before you go on.

❏Function declarations are evaluated

before the rest of the code is evaluated.

❏Function expressions get evaluated

later, with the rest of the code.

❏A function declaration doesn’t return a

reference to a function; rather it creates

a variable with the name of the function

and assigns the new function to it.

❏A function expression returns a

reference to the new function created

by the expression.

❏The process of invoking a function

created by a declaration is exactly the

same for one created with an expression.

❏You can hold function references in

variables.

❏Function declarations are statements;

function expressions are used in

statements.

❏Function declarations are the tried and

true way to create functions.

❏You always want to use function

declarations because they get evaluated

earlier.

Not necessarily!

Exercise Solutions

466 Chapter 10

exercise solutions

Below, you’ll find JavaScript code. Your job is to play like you’re the

browser evaluating the code. In the space to the right, record each

function as it gets created. Remember to make two passes over

the code: the pass that processes declarations, and the second

pass that handles expressions.

BE the Browser Solution

var midi = true;

var type = "piano";

var midiInterface;

function play(sequence) {

// code here

}

var pause = function() {

stop();

}

function stop() {

// code here

}

function createMidi() {

// code here

}

if (midi) {

midiInterface = function(type) {

// code here

};

}

Write, in order, the names of the functions

as they are created. If a function is created

with a function expression put the name of

the variable it is assigned to. We've done the

first one for you.

play

stop

createMidi

pause

midiInterface

you are here 4 467

first class functions

To get the idea of functions as values into your brain, let’s play

a little game of chance. Try the shell game. Did you win or lose?

Give it a try and find out. Here’s our solution.

var winner = function() { alert("WINNER!") };

var loser = function() { alert("LOSER!") };

// let's test as a warm up

winner();

// let's assign to other variables for practice

var a = winner;

var b = loser;

var c = loser;

a();

b();

// now let's try your luck with a shell game

c = a;

a = b;

b = c;

c = a;

a = c;

a = b;

b = c;

a();

c is winner

a is loser

b is winner

c is loser

a is loser

a is winner

b is loser

invoking a...

winner!!!

Remember, these variables hold

references to the winner and loser

functions. We can assign and reassign

these references to other variables,

just like with any value.

Remember, at any time, we can

invoke a reference to a function.

468 Chapter 10

exercise solutions

Your turn again: write a function that prints a passenger’s name and whether or not they

have paid to console.log. Pass your function to processPassengers to test it. We’ve started

the code for you below; you just need to finish it up. Here’s our solution.

function printPassenger(passenger) {

var message = passenger.name;

if (passenger.paid === true) {

message = message + " has paid";

} else {

message = message + " has not paid";

}

console.log(message);

return false;

}

processPassengers(passengers, printPassenger);

JavaScript console

Jane Doloop has paid

Dr. Evel has paid

Sue Property has not paid

John Funcall has paid

This return value doesn’t matter that

much because we’re ignoring the result

from processPassengers in this case.

Let’s get your brain warmed up for passing your first function to another

function. Evalute the code below (in your head) and see what you come

up with. Here’s our solution:

function sayIt(translator) {

var phrase = translator("Hello");

alert(phrase);

}

function hawaiianTranslator(word) {

if (word == "Hello") return "Aloha";

if (word == "Goodbye") return "Aloha";

}

sayIt(hawaiianTranslator);

We’re defining a function that

takes a function as an argument,

and then calls that function.

We’re passing the function

hawaiianTranslator to the

function sayIt.

you are here 4 469

first class functions

function fun(echo) {

console.log(echo);

}

function fun(echo) {

console.log(echo);

};

Below we’ve created a function and assigned it to the variable fun.

Work your way through this code and write the resulting output on this page.

Do this with your brain before you attempt it with your computer.

fun("hello");

function boo(aFunction) {

aFunction("boo");

}

boo(fun);

console.log(fun);

fun(boo);

var moreFun = fun;

moreFun("hello again");

function echoMaker() {

return fun;

}

var bigFun = echoMaker();

bigFun("Is there an echo?");

Super important: check and understand the answers before moving on!

Extra credit! (A

preview of what’s

coming up...)



hello

boo

function fun(echo) { console.log(echo); }

function boo(aFunction) { aFunction(“boo”); }

hello again

Is there an echo?

Warning note: your browser may

display different values in the

console for the fun and boo

functions. Try this exercise in a

couple of different browsers.

470 Chapter 10

exercise solutions

Your job is to add a third class of service to our code. Add “premium economy” class

(“premium” for short). Premium economy gets wine in addition to cola or water. Also,

implement getDinnerOrderFunction with the following menu:

First class: chicken or pasta

Premium economy: snack box or cheese plate

Coach: peanuts or pretzels

Here’s our solution.

var passengers = [ { name: "Jane Doloop", paid: true, ticket: "coach" },

{ name: "Dr. Evel", paid: true, ticket: "firstclass" },

{ name: "Sue Property", paid: false, ticket: "firstclass" },

{ name: "John Funcall", paid: true, ticket: "premium" } ];

function createDrinkOrder(passenger) {

var orderFunction;

if (passenger.ticket === "firstclass") {

orderFunction = function() {

alert("Would you like a cocktail or wine?");

};

} else if (passenger.ticket === "premium") {

orderFunction = function() {

alert("Would you like wine, cola or water?");

};

} else {

orderFunction = function() {

alert("Your choice is cola or water.");

};

}

return orderFunction;

}

We’ve upgraded John Funcall

to premium economy for this

flight (so we can test our

new code).

Here’s the new code to handle the

premium economy class. Now we’re

returning one of three different

order functions depending on the

ticket type of the passenger.

Notice how handy it is to have all this

logic encapsulated in one function that

knows how to create the right kind of

order function for a customer.

And when we make an order, we don’t

have to do this logic; we have an order

function that is customized for the

passenger already!

you are here 4 471

first class functions

function createDinnerOrder(passenger) {

var orderFunction;

if (passenger.ticket === "firstclass") {

orderFunction = function() {

alert("Would you like chicken or pasta?");

};

} else if (passenger.ticket === "premium") {

orderFunction = function() {

alert("Would you like a snack box or cheese plate?");

};

} else {

orderFunction = function() {

alert("Would you like peanuts or pretzels?");

};

}

return orderFunction;

}

function serveCustomer(passenger) {

var getDrinkOrderFunction = createDrinkOrder(passenger);

var getDinnerOrderFunction = createDinnerOrder(passenger);

getDrinkOrderFunction();

// get dinner order

getDinnerOrderFunction();

getDrinkOrderFunction();

// show movie

getDrinkOrderFunction();

// pick up trash

}

function servePassengers(passengers) {

for (var i = 0; i < passengers.length; i++) {

serveCustomer(passengers[i]);

}

servePassengers(passengers);

We’ve added

a completely

new function,

createDinnerOrder,

to create a dinner

ordering function for

a passenger.

It works in the

same way that

createDrinkOrder

does: by looking at the

passenger ticket type

and returning an order

function customized for

that passenger.

We create the right

kind of dinner order

function for the

passenger...

...and then call it whenever we want

to take a passenger’s dinner order.

472 Chapter 10

exercise solutions

The sort method has sorted

numbersArray in ascending order

because when we return the

values 1, 0 and -1, we’re telling

the sort method:

1: place the first item after the second item

0: the items are equivalent, you can leave them in place

-1: place the first item before the second item.

Changing your code to sort in descending order is a

matter of inverting this logic so that 1 means place the

second item after the first item, and -1 means place

the second item before the first item (0 stays the same).

Write a new compare function for descending order:

function compareNumbersDesc(num1, num2) {

if (_____ > _____) {

return 1;

} else if (num1 == num2) {

return 0;

} else {

return -1;

}

num2 num1

What do



function addN(n) {

var adder = function(x) {

return n + x;

};

return adder;

}

This function takes one argument n. It

then creates a function that also takes one

argument, x, and adds n and x together.

That function is returned.

var add2 = addN(2);

console.log(add2(10));

console.log(add2(100));

So we used it to create a function that

always adds 2 to a number. Like this:

function compareNumbers(num1, num2) {

return num1 - num2;

}

























We can make this function a single line

of code by simply returning the result of

substracting num2 from num1. Run through

a couple of examples to see how this works.

And remember sort is expecting a number

greater than, equal to, or less than 0, not

specifically 1, 0, -1 (although you’ll see a lot

of code return those values for sort).

you are here 4 473

first class functions



Now that we have a way to sort colas by the sold property, it’s time to write compare

functions for each of the other properties in the product object: name, calories, and color.

Check the output you see in the console carefully; make sure for each kind of sort, the

products are sorted correctly. Here’s our solution.

function compareName(colaA, colaB) {

if (colaA.name > colaB.name) {

return 1;

} else if (colaA.name === colaB.name) {

return 0;

} else {

return -1;

}

function compareCalories(colaA, colaB) {

if (colaA.calories > colaB.calories) {

return 1;

} else if (colaA.calories === colaB.calories) {

return 0;

} else {

return -1;

}

function compareColor(colaA, colaB) {

if (colaA.color > colaB.color) {

return 1;

} else if (colaA.color === colaB.color) {

return 0;

} else {

return -1;

}

products.sort(compareName);

console.log("Products sorted by name:");

printProducts(products);

products.sort(compareCalories);

console.log("Products sorted by calories:");

printProducts(products);

products.sort(compareColor);

console.log("Products sorted by color:");

printProducts(products);

Here’s our implementation

of each compare function.

For each new

compare function,

we call sort, and

display the results

in the console.

Totally!

this is a new chapter 475

Serious functions

anonymous functions, scope and closures

You’ve put functions through their paces, but there’s more

to learn. 

how to really handle









an anonymous function or a closure

And if you have heard of a closure, but

don’t quite know what it is, you’re even

Head First JavaScript Programming Eric T. Freeman, Elisabeth Robson Java Script A Brain Friendly Guide (2014%

Navigation menu

Versions of this User Manual:

Views

Navigation