Use a Cabeça! HTML5 Programming   Ingles
610 pág.

Use a Cabeça! HTML5 Programming Ingles


DisciplinaDesenvolvimento de Software2.062 materiais17.811 seguidores
Pré-visualização50 páginas
type anything), you can check to see if its value is equal to a 
string with nothing in it, otherwise known as the empty string, 
which is written as \u201c\u201d, or two double quotes with nothing in 
between. We see why you\u2019d think it might be null, because we 
said that is the value of a variable that has no value, but from 
the text input field\u2019s perspective, it isn\u2019t holding nothing, it\u2019s 
holding on to a string with nothing in it yet. Go figure. ;-)
Q: I thought that the text input \u201cvalue\u201d was an attribute. 
You\u2019re calling it a property, why?
A: You\u2019re right, value is an attribute of the HTML text input 
element. You can initialize the value of a text input element 
using the value attribute. But in JavaScript, to access the 
value that a user has typed in, you need to use the value 
property of the input element we get from the DOM. 
Q: What other kinds of events can I handle in 
JavaScript other than button clicks?
A: There are a whole slew of other mouse events you 
can handle. For instance, you can detect and handle a key 
press, a mouse moving over or out of an element, the mouse 
dragging, even a mouse press and hold (different from a 
mouse click). And then there are many other types of events 
we\u2019ve mentioned in passing, like events when new data is 
available, timer events, events related to the browser window, 
and so on. You\u2019ll see quite a few other kinds of event handling 
in the rest of the book; once you know how to do one, you can 
pretty much do them all!
Q: What is JavaScript doing while it\u2019s waiting for 
events?
A: Unless you\u2019ve programmed your JavaScript to do 
something, it sits idle until something happens (the user 
interacts with the interface, data comes in from the Web, a 
timer goes off, and so on). This is a good thing; it means the 
processing power of your computer is going to other things, 
like making your browser responsive. Later in the book, you\u2019ll 
learn how to create tasks that run in the background so your 
browser can run the task code and respond to events at the 
same time.
www.it-ebooks.info
96 Chapter 3
exercise solutions
function handleButtonClick() {
 var textInput = document.getElementById("songTextInput");
 var songName = textInput.value; 
 alert("adding " + songName);
}
Rework the handleButtonClick function below to obtain the name 
of the song the user has typed into the form input element. Here\u2019s 
our solution:
First we need to get a reference to the text 
input element in the form. We\u2019ve given this 
element an id of \u201csongTextInput\u201d so we can use 
that with getElementById to get a reference.
 The value property of the text input element holds whatever 
is typed into the text input, 
which is just a string. Here we\u2019re 
assigning that text to the 
variable songName.And now let\u2019s just pop up an ale
rt, which should 
display \u201cAdding\u201d and the song name.
function handleButtonClick() {
 var textInput = document.getElementById("songTextInput");
 var songName = textInput.value; 
 if (songName == "") {
 alert("Please enter a song");
 } else {
 alert("adding " + songName);
 }
}
We can use an if statement and compare 
the songName string to an empty string 
to make sure the user typed something. 
If they didn\u2019t type anything we\u2019ll alert 
them and ask them to enter a song.
BONUS
What if you wanted to test to make sure the user actually entered some text 
before clicking the button? How might you do that? Here\u2019s our solution:
www.it-ebooks.info
you are here 4 97
events and handlers
We\u2019ve already got a lot working! You can type a song name into a 
form, click the Add Song button and get the text you typed into the 
form, all within your code. Now we\u2019re going to display the playlist on 
the page itself. Here\u2019s what it\u2019s going to look like:
How do we add a song to the page?
You might have noticed that we already 
put an empty list in the HTML markup 
(an empty <ul> element to be exact) back 
when we first typed it in. Given that, 
here\u2019s what the DOM looks like right now.
Here\u2019s what we need to do:
Every time we enter a new song, we want 
to add a new item to the unordered list. 
To do that, we\u2019ll create a new <li> element 
that will hold the song name. Then we\u2019ll 
take the new <li> element and add it to 
the <ul> in the DOM. Once we do that, the 
browser will do its thing and you\u2019ll see the 
page update, just like the <li> was there 
all along. And of course, we\u2019ll do all this in 
code. Check out the DOM one more time 
and make sure you understand what we 
need to do.
When you click \u201cAdd Song\u201d, 
your JavaScript will add 
the song to a list of songs 
on the page.
When you enter a 
song, we\u2019ll create 
a new list item 
(<li> element) 
and add it to 
the <ul> list.
Here\u2019s the list in 
the DOM. Right 
now it\u2019s empty.
body
ul id=\u201dplaylist\u201d
body
ul id=\u201dplaylist\u201d
li
1
2
1. Set up a handler to handle the user\u2019s click
2. Write the handler to get the song name
3. Create a new element to hold the new song
4. Add the element to the page\u2019s DOM
www.it-ebooks.info
98 Chapter 3
creating new elements
For the playlist shown here, draw the DOM as it looks 
after you\u2019ve added all these songs. Notice the order in 
which the songs are added to the page, and make sure 
the elements are in the right places in the DOM too. 
We\u2019ve gone ahead and done one for you. Check the 
solution at the end of the chapter before you go on.
Draw the rest of the DOM here for the playlist above.
Did you have to make any assumptions about the order in which the 
<li> elements are added to the parent?
li
Blue Suede Strings, 
by Elvis Pagely
document
head
html
title script
body
form
input input
ul id=\u201dplaylist\u201d
www.it-ebooks.info
you are here 4 99
events and handlers
How to create a new element
You\u2019ve already seen how to get access to existing elements through the 
DOM. But you can also use the DOM to create new elements (and then 
as a second step, add them to the DOM, which we\u2019ll get to in a sec).
Let\u2019s say we want to create a <li> element. Here\u2019s how we do that:
We better get 
to work building these 
elements, Betty. They\u2019re 
updating the DOM again.
var li = document.createElement(&quot;li&quot;);
So now we have a new <li> element with nothing in it. You 
already know one way to get text into an element:
Pass the kind of element 
you want to create as a 
string to createElement.
Use document.createElement to create new elements. A 
reference to the new element is returned.
li
Here we\u2019re assigning 
the new element to 
the variable li.
createElement creates a brand new element. Note that it isn\u2019t inserted into the DOM just yet. 
Right now it is just a free-floating element in 
need of a place in the DOM.
li.innerHTML = songName; 
li
Blue Suede Strings, 
by Elvis Pagely
This sets the content of 
the <li> to the song title.
Here\u2019s our new li element 
object ready to go. But 
it\u2019s not part of the 
DOM yet!
Our li variable.
www.it-ebooks.info
100 Chapter 3
adding new elements
Adding an element to the DOM
To add a new element to the DOM you have to know where you 
want to put it. Well, we do know where to put it: we\u2019re going to 
put the <li> element in the <ul> element. But how do we do 
that? Let\u2019s take another look at the DOM. Remember how we 
said it was like a tree? Think family tree:
document is like the grand 
matriarch of the family, at 
the top of the tree. html is the only child in
 
this generation. html\u2019s 
parent is document.
html has two children, 
head and body. body\u2019s 
parent is html.
And here\u2019s our ul. ul\u2019s parent is body, and ul doesn\u2019t have any children, yet...
So, to add our <li> element, we need to make it a child of the 
<ul> element. To do that,