Скачать или смотреть JavaScript For Kids For Dummies: Chapter Seventeen (Peer - Programming)(Choose Your Own Adventure).

Choose Your Own
Adventure
Imagine you’re climbing a tree. If you climb up one
branch, you’ll see certain things, such as a bird’s nest or a
balloon that got stuck up there during your birthday party. If
you climb a different branch, you might see other things, like
the neighbor’s garage. In JavaScript, the technique of using
if...else or switch statements to choose between two or
more paths is called branching.
In this chapter, we use branching to write a choose‐your‐own‐
adventure game that asks for user input at key moments to
change the story.
Planning the Story
Any good story needs a plot. The plot is the outline of events that
happen over the course of the story. When writing a story where
the user’s input influences the plot, the writer needs to pay close
attention to managing the different plot lines. Each plot line has
the same beginning, but the middle and ending are different based
on input from the user.
Creating a flow chart
Considering all of the different options — and planning for each
possibility — in a branching program is a valuable skill to have as
a programmer.
We’ll begin by creating a simple story that poses a question. This
creates two branches. Each of these branches will have a question
that creates two more branches. Eventually, every choice will lead
back to one of two possible endings.
A useful tool for visualizing branches of a story or of a program is a
flowchart. Figure 16-1 shows a flow chart for our interactive story.
The next step in developing our story and program is to fill in the
plot with some details.
Figure 16-1: A flow chart showing the basic outline of the story.
Chapter 16: Choose Your Own Adventure 269
Writing the story
Our story takes place on a spaceship in the not‐too‐distant future.
You’re the captain of the ship, and your mission is to fly to Mars
to pick up an old robot that has stopped functioning so that it, and
its valuable experiments, can be returned to Earth and studied.
The launch of the ship goes perfectly, but one week into the 260‐
day voyage, you discover that your cat has stowed away on your
ship. Unless something changes, you might not have enough food
for the both of you. You need to decide whether to turn your ship
around, or keep going for Mars and hope for the best.
If you turn the ship around, the mission ends with the cat being
returned to Earth and your boss yelling at you because you don’t
have the Mars robot.
If you continue toward Mars, you get very nervous about your
food situation, but you feed the cat half of your meals each day,
because you’re a good person. You reach Mars and discover that
the last person to visit the Mars robot left a large cooler full of
delicious sandwiches. You pack them into the spaceship along
with the robot and head home, where you’re greeted as a hero.
Playing the Game
The most fun part about a game like this one, in which your
choices decide how the story unfolds, is in exploring all the different possibilities. Interactive stories tend to be short, because
reading and writing each of the different possibilities takes much
more effort and time than writing or reading a story with just a
single storyline.

Tiptoeing through the HTML and CSS
The HTML and CSS for Martian Rescue! are finished in the starter
program. Let’s take a look at them now before we move on to finishing the JavaScript. We’ll start with the HTML pane.
The HTML is made up of two parts, separated by an HTML comment. The first part of the HTML creates the top section, where
the story will be displayed, and the bottom section, where questions and answers will be displayed.
Listing 16-1 shows this top section of the HTML.

Everything that you see in the Result pane when the program first
starts is the result of these lines of HTML, combined with the CSS.
Figure 16-3 shows the Result pane for the Martian Rescue! project
before the JavaScript has been completed.
Notice that there are three differently colored sections:
✓ The top, dark gray part where the story will display
✓ The light gray part, where the question will display
✓ The white part, where the form and user input area will
display
Listing 16-1 The Beginning of the HTML

Chapter 16: Choose Your Own Adventure 273
If you look at the HTML and compare it with the Result pane, however, you’ll notice that something’s not right. The HTML clearly
contains an input field and button, but those aren’t displaying in
the Result pane. Why?
Turning off elements with display: none
Because we only want to show the input field and button when
we’re asking a question, we’ve hidden the user input field and
button using CSS.
Listing 16-2 shows the complete CSS for Martian Rescue!