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
we first need to find the <ul> element 
in the tree (we gave it an id of \u201cplaylist\u201d to make that easy) and 
then to add the <li>, we tell the <ul> element to add a new 
child to itself. Here\u2019s how we do that:
li
Blue Suede Strings, 
by Elvis Pagely
...we want to make 
our new <li> element 
the child of <ul>.
var ul = document.getElementById(&quot;playlist&quot;);
ul.appendChild(li);
Use getElementById to get a reference to the 
<ul> element with id=\u201cplaylist\u201d.
Ask the <ul> element to add the <li> element as a child. Once 
this completes, the DOM will have <li> as a child of <ul> and 
the browser will update the display to reflect the new <li>.
document
head
html
title script
body
form
input input
ul id=\u201dplaylist\u201d
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
Each time you call 
appendChild, the new 
<li> element is added 
to the <ul> element 
after any other <li> 
elements that are 
already there.
www.it-ebooks.info
you are here 4 101
events and handlers
function handleButtonClick() {
 var textInput = document.getElementById(&quot;songTextInput&quot;);
 var songName = textInput.value;
 var li = document.createElement(&quot;li&quot;);
 li.innerHTML = songName;
 var ul = document.getElementById(&quot;playlist&quot;);
 ul.appendChild(li);
} Notice that we ask the parent element, ul, 
to add li as a new child.
Put it all together...
... and take it for a test drive
Now when we type in a song name and 
click add, the song is added to the 
DOM, so we see the page change and 
the new song in the list.
Let\u2019s put all that code together and add it to the handleButtonClick 
function. Go ahead and type it in if you haven\u2019t already so you can test it.
The <ul> with the id \u201cplaylist\u201d is the 
parent element for our new <li>. So we 
get that next.
Then we add the li object to the ul using appendChild. 
First, create the new <li> element where 
the song name is going to go.
Then, set the content of that element to 
the song name.
body
ul id=\u201dplaylist\u201d
li li li li li
And here\u2019s how the DOM looks now that 
we\u2019ve added all those new <li> elements.
Put Webville Tunes through its paces, add a few songs. 
Here are our results.
www.it-ebooks.info
102 Chapter 3
review of the playlist app
1 The first thing you did was set up an event handler 
to handle the user\u2019s click on the \u201cAdd Song\u201d button. 
You created a function, handleButtonClick, and set 
the onclick property of the \u201cAdd Song\u201d button to 
this function.
You did a lot in this chapter (and in a short amount of time!). You built 
a playlist app that you can use to enter a song, click a button and add 
that song to a list on the page, all using JavaScript code. 
Review\u2014what we just did
When the user clicks the \u201cAdd Song\u201d button, 
your handleButtonClick handler will be called.
body
ul id=\u201dplaylist\u201dform
input id=\u201daddButton\u201dinput id=\u201dsongTextInput\u201d 
value=\u201dBlue Suede Strings by Elvis Pagely\u201d
In handleButtonClick, you\u2019re getting the song name the user typed in, by using the input.value property to get the text from the DOM.
2 Next, you wrote code for the button click handler 
to get the song name from the input text field. You 
used the input.value property to get the text, and 
you even added a check to make sure the user had 
typed in a song. If they didn\u2019t, you alerted them.
li
Blue Suede Strings, 
by Elvis PagelyYou create a new <li> element 
and set the content of the <li> 
element to the song name.
3 To add the song to the playlist, you then created 
a <li> element using document.createElement, and 
set the content of the element to the song name 
using innerHTML.
4 Finally, you added the new <li> element to the DOM 
by adding it as a child of the parent <ul> element. 
You did this using appendChild, telling the <ul> 
element to \u201cappend the <li> element as a child\u201d, 
which added it to the DOM. When the element is 
added to the DOM, the browser updates the page 
the user sees, and the playlist contains the song.
Adding a new 
child to the DOM 
updates the page.
body
ul id=\u201dplaylist\u201d
li li
www.it-ebooks.info
you are here 4 103
events and handlers
Wait a sec, I get we\u2019re interacting with the 
DOM and all, but how is this a real web App? If I close 
my browser, all my songs are gone. Shouldn\u2019t my playlist 
items stick around if this is really an application?
We agree, the playlist should be persistent;
after all, what\u2019s the point of entering all those songs if they 
don\u2019t stick around? And there\u2019s a lot of other functionality 
you might want to add as well. You might, for instance, want 
to add an audio interface using the audio/video API so you 
can actually listen to the songs, share songs out to friends 
using a web service (like Facebook and Twitter), find other 
people in the local area that like the same artists (using the 
geolocation APIs), and we\u2019re sure you can come up with more.
But back to the playlist...we wanted to get you up and running 
by building a small interactive app, and the playlist does a 
good job of that. Plus, storing the songs requires the HTML5 
Web Storage API, which is a few chapters away.
Hmm, on the other hand we really don\u2019t want to 
under-deliver here... 
Turn page
www.it-ebooks.info
104 Chapter 3
Ready Bake 
Code
We\u2019ve gone ahead and baked a little code for 
you to save your playlists. For now you just 
need to type it in and make two tiny changes 
to your existing code and you\u2019ll have an 
HTML5-stored playlist.
We\u2019ll be covering all the specifics of storing 
things locally in your browser in the Web 
Storage chapter, but for now you can get 
your playlist up and running. 
Of course, it never hurts to look over the 
Ready Bake code. You might be surprised 
how much you already know, not to mention 
how much of it you can figure out if you 
don\u2019t know it. 
We pre-baked some 
code so you don\u2019t have to 
make it yourself.
 The Ready Bake
 Code 
won\u2019t work in IE 6 or 7.
IE versions 6 and 7 don\u2019t 
support localStorage. So if 
you\u2019re using IE, make sure 
you\u2019re using version 8 or above.
 The Ready Bake Code 
won\u2019t work in some 
browsers if you\u2019re 
serving your pages 
from file:// instead of a server like localhost:// or an 
online hosted server.
We\u2019ll deal with this situation more in 
future chapters (it pops up fairly often 
with new HTML5 features). For now, if you don\u2019t want to run a server or copy the files to a hosted server online, try 
using Safari or Chrome.
www.it-ebooks.info
you are here 4 105
events and handlers
function save(item) {
 var playlistarray = getStorearray
(&quot;playlist&quot;);
 playlistarray.push(item);
 localStorage.setItem(&quot;playlist&quot;, 
JSON.stringify(playlistarray));
}
function loadPlaylist() {
 var playlistarray = getSavedSongs
();
 var ul = document.getElementById(
&quot;playlist&quot;);
 if (playlistarray != null) {
 for (var i = 0; i < playlista
rray.length; i++) {
 var li = document.createE
lement(&quot;li&quot;);
 li.innerHTML = playlistar
ray[i];
 ul.appendChild(li);
 }
 }
}
function getSavedSongs() {
 return getStorearray(&quot;playlist&quot;);
}
function getStorearray(key) {
 var playlistarray = localStorage.
getItem(key);
 if (playlistarray == null || play
listarray == &quot;\u201d) {
 playlistarray = new array();
 }
 else {
 playlistarray = JSON.parse(pl
aylistarray);
 }
 return playlistarray;
}
Here\u2019s the Ready Bake code for you to add to your Webville Tunes app 
so you can save that fabulous playlist you\u2019ve created. All you have to do