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

Use a Cabeça! HTML5 Programming Ingles


DisciplinaDesenvolvimento de Software2.059 materiais17.812 seguidores
Pré-visualização50 páginas
to access the DOM. And, as you\u2019ve just seen, it is actually a property of the 
window object. Of course we haven\u2019t used it like window.document because we 
don\u2019t need to. Let\u2019s take a quick peek under the covers to see its more interesting 
properties and methods:
document
domain 
title 
URL
getElementById 
getElementsByTagName 
getElementsByClassName
createElement
We can use the title property to get the title of the document using document.title.properties
methods
As you know, this method grabs an element by its id.
We used this method in Chapter 3 to create new playlist items. As you know it creates elements suitable for inclusion in the DOM.
We promised in the begining of this chapter that you'd understand 
document.getElementById by the end of the chapter. Well, you 
made it through functions, objects, and methods, and now you\u2019re ready! 
Check it out:
What was a confusing looking string of syntax now has a lot more meaning, 
right? Now, that div variable is also an object: an element object. Let\u2019s take a 
closer look at that too.
var div = document.getElementById("myDiv");
document is the document object, a built-in 
JavaScript object that gives you access to the DOM.
getElementById is a 
method that...
... takes one argument, the 
id of a <div> element, and 
returns an element object.
These two are similar to getElementById, except they retrieve elements using tags and classes.
The domain property is the domain of the 
server the document is being served from, 
like wickedlysmart.com.
The URL is just the URL of the document.
A closer look at document.getElementById
www.it-ebooks.info
158 Chapter 4
the element object
One more object to think about: your element objects
We shouldn\u2019t forget when we\u2019re working with methods like getElementById that the 
elements they return are also objects! Okay, you might not have realized this, but now that 
you know, you might be starting to think everything in JavaScript is an object, and, well, 
you\u2019re pretty much right.
You\u2019ve already seen some evidence of element properties, like the innerHTML property; 
let\u2019s look at some of the more notable properties and methods:
p
innerHTML 
childElementCount firstChild
appendChild 
insertBefore 
setAttribute 
getAttribute
You know about innerHTML; two other 
properties are childElementCount (how 
many children the element has) and 
firstChild (the first child, if there is one).
You can use the methods appendChild and 
insertBefore to insert new elements into the 
DOM as children of this element.
We\u2019ll use setAttribute and getAttribute to set and 
get attributes, like \u201csrc\u201d, \u201cclass\u201d and \u201cid\u201d, in elements. 
Here are the 
properties and 
methods for 
the <p> element, 
but all elements 
support these.
Q: Since window is the global object, that means I can use 
its properties and all of its methods without specifying window 
first right?
A: That\u2019s right. And whether you prepend the window object\u2019s 
properties and methods with window is up to you. For things like 
alert, everyone knows what that is, and no one uses window with 
it. On the other hand, if you\u2019re using the lesser known properties 
or methods you might want to to make your code more easily 
understandable, and use window.
Q: So, technically, I could write onload = init 
instead of window.onload = init, right?
A: Yes. But we don\u2019t recommend it in this particular case, because 
there are a lot of objects that have onload properties, so your code is 
going to be much clearer if you use window. in front of onload.
Q: The reason we don\u2019t say window.onload = init() 
is because that would call the function, instead of using its 
value?
A: That\u2019s right. When you use parentheses after the function name, 
like init(), you saying you want to call the function init. If you use its 
name without parentheses, then you\u2019re assigning the function value 
to the onload property. It\u2019s a subtle difference when you\u2019re typing it 
in, but the ramifications are large, so pay careful attention.
www.it-ebooks.info
you are here 4 159
javascript functions and objects
Q: Which of the two ways of creating a window.onload 
handler is better, using a function name or an anonymous 
function?
A: One isn\u2019t better than the other, they both do basically the same 
thing: set the value of window.onload to a function that will run 
when the page has loaded. If you need to call init from another 
function later in your program for some reason, then you\u2019ll need to 
define an init function. Otherwise, it doesn\u2019t matter which way 
you do it.
Q: What\u2019s the difference between built-in objects like window 
and document, and the ones we make?
A: One difference is that built-in objects follow the guidelines 
set by specifications, so you can refer to the W3C specifications to 
understand all their properties and methods. In addition, many of the 
built-in objects, like String, may have properties that are immutable 
and can not be changed. Other than that, objects are objects. The 
nice thing about built-in objects is they\u2019re already built for you.
So take a little R&R after 
this chapter, but before you 
go please take a quick look at the 
bullet points, and do the crossword 
to make it all stick.
Yes, String is an object! Check out a good 
JavaScript reference to get all the details 
of its properties and methods.
Congrats! You\u2019ve completed our tour 
of objects, and made it through several 
chapters of JavaScript bootcamp. Now it\u2019s 
time to use all that knowledge to program with 
HTML5 and all the new JavaScript APIs, 
starting in the very next chapter!
You\u2019re leaving this 
chapter knowing more about objects 
and functions than many people out 
there. Of course, you can always learn 
more and we encourage you to explore 
(after you finish this book)!
www.it-ebooks.info
160 Chapter 4
review of functions and objects
 ƒ To create a function, use the function keyword with 
parentheses to hold parameters, if there are any.
 ƒ Functions can be named, or be anonymous.
 ƒ Naming rules for functions are the same as naming 
rules for variables.
 ƒ The body of a function goes between curly braces, 
and contains statements that do the work of the 
function.
 ƒ A function can return a value with the return 
statement. 
 ƒ To invoke (or call) a function, use its name and pass 
any arguments it needs.
 ƒ JavaScript uses pass-by-value parameter passing.
 ƒ When you pass an object, like a dog, as an 
argument to a function, the parameter gets a copy of 
the reference to the object.
 ƒ Variables defined in functions, including parameters, 
are known as local variables.
 ƒ Variables defined outside of functions are known as 
global variables.
 ƒ Local variables are not visible outside the function in 
which they are defined. This is known as the scope 
of a variable.
 ƒ If you declare a local variable with the same name 
as a global variable, the local variable shadows the 
global variable.
 ƒ When you link to multiple JavaScript files from your 
page, all the global variables are defined in the same 
global space.
 ƒ If you assign a new variable without using the var 
keyword, that variable will be global, even if you are 
first assigning it in a function.
 ƒ Functions are values that can be assigned to 
variables, passed to other functions, stored in 
arrays, and assigned to object properties.
 ƒ Objects are collections of properties.
 ƒ You access an object\u2019s properties using dot notation 
or the [ ] notation.
 ƒ If you use [ ] notation, enclose the property\u2019s name 
as a string; for example, myObject[\u201cname\u201d].
 ƒ You can change a property\u2019s value, delete 
properties, or add new properties to an object.
 ƒ You can enumerate an object\u2019s properties using a 
for-in loop.