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

Use a Cabeça! HTML5 Programming Ingles


DisciplinaDesenvolvimento de Software2.058 materiais17.812 seguidores
Pré-visualização50 páginas
to execute when the function 
is called within the braces.
Right now we\u2019re just going 
to display an alert when this 
function is called.
Let\u2019s step back for a second before we lose ourselves in handlers and events. 
The goal here is to click on \u201cAdd Song\u201d and have a song added to a playlist on 
the page. Let\u2019s attack the task like this:
If these steps aren\u2019t clear to you, don\u2019t worry, we\u2019ll explain it as we go... for now, 
just get a feel for the steps and follow along as we get that handler written. Go 
ahead an open up a new file, playlist.js for all your JavaScript code.
To ask the button to let us know when a click event occurs, we first need to get 
access to the button. Luckily we created the button using HTML markup and 
that means...you guessed it, it is represented in the DOM, and you already 
know how to get elements in the DOM. If you look back at the HTML you\u2019ll 
see we gave the button an id of addButton. So, we\u2019ll use getElementById 
to get a reference to the button:
Now we just need to give the button some code to call when a click occurs. 
To do that we\u2019re going to create a function, named handleButtonClick, 
that will handle the event. We\u2019ll get into functions in a bit; for now, here\u2019s the 
function:
www.it-ebooks.info
you are here 4 91
events and handlers
Giving the button a click handler
window.onload = init;
function init() {
 var button = document.getElementById("addButton");
 button.onclick = handleButtonClick;
}
function handleButtonClick() {
 alert("Button was clicked!");
}
Okay, we\u2019ve got a button and we\u2019ve got a function that will act as a handler, 
handleButtonClick, so let\u2019s put them together. To do that we\u2019re going to use a 
property of the button, onclick. We set the onclick property like this:
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;
With a button in hand, after calling getElementById, we set the onclick 
property to the function we want called when a click event occurs.
You might remember that we did something similar when we used the 
window.onload property to call a function after the window was loaded. In this 
case though, we\u2019ll call the function when the button is clicked. Now let\u2019s put all of 
this together: Just like we did in the last chapter, we\u2019re 
using an init function that won\u2019t be called 
and executed until the page is fully loaded.
After the page loads we\u2019ll 
grab the button and set up 
its onclick handler.
And the click handler will display an alert when we click on the button.
Putting it to a test...
Go ahead and type in the code above (in your playlist.js file), 
load the page, click on that button as much as you want and you\u2019ll 
see an alert each time.
After you\u2019re finished testing your new button 
click handler, sit back and study the code and 
think through how all this works.
When you think you\u2019ve got it in your head, 
turn the page and we\u2019ll step through the 
details to make sure it really sticks.
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
92 Chapter 3
how add song works
function init() {
 var button = document.getElementById("addButton");
 button.onclick = handleButtonClick;
}
function handleButtonClick() {
 alert("Button was clicked!");
}
Don\u2019t worry, if and when 
I\u2019m clicked on, you\u2019ll literally 
be the first to know.
We set up the button 
click event handler in 
the init function (that 
is, after the page has 
finished loading).
When the user clicks on the button, 
the \u201cclick\u201d event is triggered, and the 
handleButtonClick function is called.
The button object 
has an onclick 
property that 
we set to the 
handleButtonClick 
function.
We just introduced a lot of new ideas over the last few pages, let\u2019s step through 
the code again and make sure we\u2019ve got it clear in our heads. Here we go:
A closer look at what just happened...
The handler 
with your code
1 The first thing you did was throw a button in your HTML form. 
And with that in place, you needed a way to capture a user\u2019s click 
on that button so that you could have some code executed. To do 
that we created a handler and assigned it to the onclick property 
of our button.
2 You also wrote a simple handler that just alerts the user that the 
button was clicked. We\u2019ll be writing the real code for the handler 
in a sec, but this one works well for testing.
www.it-ebooks.info
you are here 4 93
events and handlers
function handleButtonClick() {
 alert("Button was clicked!");
}
Yes! Somone clicked on the 
button. I get to run the 
handleButtonClick function.
Come on... click the 
button... just do it...
3 With the code written, the page is loaded 
and displayed by the browser, the handler 
is installed...it\u2019s all up to the user now...
4 Finally, the user clicks on your button, the 
button springs into action, notices it has a 
handler, and calls it...
Time to 
wake up, there\u2019s 
a click from the user.
I see I have a 
handler for this, 
better let him know.
I was asked 
to alert you that the 
button was clicked... I 
know, for an alert dialog 
that\u2019s a little underwhelming, 
but anyway, just doing my 
job.
www.it-ebooks.info
94 Chapter 3
getting the song from the dom
Getting the song name
Here\u2019s the body part 
of the DOM.
Using the getElementById method, we can get a handle to the songTextInput input element in the form.
body
ul id=\u201dplaylist\u201dform
input id=\u201daddButton\u201dinput id=\u201dsongTextInput\u201d 
value=\u201dBlue Suede Strings, by Elvis Pagely\u201d
We\u2019re ready to move on to the second step of our task: getting the song name that 
the user has typed in. Once we have that, we can think about how we\u2019re going to 
display the playlist in the browser. 
But how are we going to get the song name? That\u2019s something the user has typed 
in, right? Ah, but anything that happens in the web page gets reflected in the 
DOM, so the text the user typed must be there too.
To get the text from a form text input element, you first have to get the input 
element from the DOM, and you know how to do that: getElementById. And, 
once you\u2019ve done that you can use the value property of the text input element to 
access the text the user types into the form field, here\u2019s how:
This is the element we 
want to get from the 
DOM. We\u2019ll use its id, 
\u201csongTextInput\u201d, to 
get it.
Then we can use the value property of the input 
element to get the text the user typed into 
the input field.
function handleButtonClick() {
 var textInput = document.getElementById(" ");
 var songName = .value; 
 alert("adding " + );
}
Rework the handleButtonClick function below to obtain the name of 
the song the user has typed into the form input element. Check your 
answer with the solution on page 96. 
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
you are here 4 95
events and handlers
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? (Again, find the 
solution on page 96.)
Q: What is the value of the value property of the text 
input if the user didn\u2019t type anything? Is the value null? 
Or does the \u201cAdd Song\u201d button not invoke the handler if 
the user hasn\u2019t entered anything?
A: The \u201cAdd Song\u201d button isn\u2019t that smart. If you want to 
determine if the user typed something, that\u2019s up to your code. 
And, to know if the text input is empty (that is, the user didn\u2019t