Скачать или смотреть JavaScript For Kids For Dummies: Chapter 13 (Peer - Programming)(Making Decisions, If...Else loops).

Introducing the Wish List Program
The Wish List application uses an HTML form to accept input
from a user, which it adds to an array and to an HTML list. A Print
button allows a user to create a nicely formatted and sorted list
that she can print out and deliver to the genie of her choice.
Viewing the finished program
To get an idea of how the finished Wish List program will look and
function, follow these steps:
1. Open our Public Dashboard in JSFiddle.net by going to
http:||jsfiddle.net/user/forkids/fiddles.
2. Find the program named “Chapter 13 – Wish List – Finished”
and click the title to open it.
You should see the finished Wish List program, as shown in
Figure 13-1.
Part IV: Arrays and Functions
3. Enter something into the HTML input field — World Peace, for
example — and click the Add It button.
The item you entered will be added as a list item and removed
from the input field.
4. Add a few more items to your list.
When you get to about five or six items, move on to the
next step.
5. Click the Print Your List button.
A nicely formatted list appears, sorted in alphabetical order, as
shown in Figure 13-2.

Forking the Code
Let’s get started! To start building the Wish List program, follow
these steps:
1. Go to our Public Dashboard in JSFiddle.net, locate the program
called “Chapter 13 – Wish List – Start” and click its title to
open it.
The starting point for building the Wish List application will
open, as shown in Figure 13-3.
Figure 13-2: The printable wish list.
Chapter 13: Creating a Wish List Program 209
2. Click the Fork link in the top menu bar to create your own
copy of the program.
3. Give your copy a new name by clicking the Fiddle Options
menu item on the left.
4. Click Update, and then click Set as base to save your work.
The starting point for this application is a bare‐bones HTML
document, some CSS styles, and some instructions and an outline
for the JavaScript that needs to be written.
If you want a challenge, try writing the program using only the
instructions found in the comments, how you saw the finished
version of the program working, and what you’ve learned elsewhere in this book. Go ahead and try it out before reading on!
We’ll still be here, and we’ll give you detailed instructions for
building this app when you return.

Writing the HTML
As with the other programs you’ve written, the first step in building the Wish As with the other programs you’ve written, the first step in building the Wish List program is to create the structure using HTML.
The first line of the HTML is the beginning tag of the (div)
element that will surround everything else in the program.
(div id="listPage")
We’ve already written this tag for you, so there’s no need to add
it. Follow these steps to complete the HTML:
1. Use an (h1) element to give the page a header.
(h1)My Wish List(/h1)
Notice that the beginning section, containing the form we’ll
use to input our wishes into, is already included in the HTML
pane. It looks like this:
(div id="formArea")
2. Within the section containing the form, put the text input field,
where users will enter list items. We’ll surround it with a
(label) element that puts the words “What I want:” to the
left of it.
(label)What I want:
(input type="text" id="iWant" /)
(/label
3. Next, type the first button element (labeled “Add It!”) onto the
next line.
(button type="button" id="addIt")Add It!(/button
This element puts a button on the same line as the input field.
4. Write the Print Your List button on the next line.
(button type="button" id="printable")Print Your List(/button)
Chapter 13: Creating a Wish List Program 211
5. In order to have the Print Your List button show up underneath your Add It button, type two (br /) elements after the
first button and before the next one:
(br /)(br /)
6. Next, create an empty (div) element with an ID of
"wishList".
(ul id="wishList")(/ul)
7. Finally, close the (div) element that you opened back in
Step 1 , that encloses all the program’s HTML.
(/div)
8. Click the Update button to save your work and to see the
HTML in the Result pane.
It should look like Figure 13-4.
If you haven’t already, you can remove the HTML comments that
were in the code as placeholders, or you can change them to anything you want that will help you to remember what the different
sections of the page are.
The finished HTML is shown in Listing 13-1.
Even if you entered everything correctly, your markup may not look
exactly like ours due to differences in spacing. Click the TidyUp link
in the top toolbar to make JSFiddle clean everything up a bit.
Figure 13-4: The Wish List progra