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

Use a Cabeça! HTML5 Programming Ingles


DisciplinaDesenvolvimento de Software2.062 materiais17.814 seguidores
Pré-visualização50 páginas
to 
understanding the DOM, to organizing your data, and they\u2019re even the 
fundamental way HTML5 JavaScript APIs are packaged up (and that\u2019s just 
our short list!). That said, objects are a difficult topic, right? Hah! We\u2019re going 
to just jump in head first and you\u2019ll be using them in no time.
Here\u2019s the secret to JavaScript objects: they\u2019re just a collection of properties. Let\u2019s 
take an example, say, a dog. A dog\u2019s got properties:
Most dogs have names, like Fido here.
All dogs have a weight.
And a breed. In this case we\u2019d 
call Fido a mixed breed.
All dogs have a list of activities 
they enjoy, like walking and 
fetching balls.
Dog
www.it-ebooks.info
132 Chapter 4
objects and properties
var fido = { 
 name: "Fido",
 weight: 40, 
 breed: "Mixed",
 loves: ["walks", "fetching balls"]
};
Dog
name: \u201cFido\u201d
weight: 40
breed: \u201cMixed\u201d
loves: [\u201cwalks\u201d, \u201cfetching balls\u201d]
And a set of properties... We\u2019ve got some strings 
representing the dog\u2019s 
name and breed.
And we\u2019ll collect the dog's 
\u201cloves\u201d in an array of strings, 
zero or more; here we\u2019ve got 
Fido\u2019s two interests.
As you probably 
guessed, we\u2019re going 
to have an object 
representing a dog.
Thinking about properties...
Of course Fido would be the first to admit there\u2019s a lot more to him than 
just a few properties, but for this example, those are going to be the ones we 
need to capture in software. Let\u2019s think about those properties in terms of 
JavaScript data types:
And we\u2019ve got an integer 
for the weight .
How to create an object in JavaScript
So we\u2019ve got a object with some properties; how do we create this using 
JavaScript? Here\u2019s how:
Start an object with just the left 
curly brace, then all the properties 
are going to go inside.
This object has four properties, 
name, weight, breed and loves.
Notice that the value of weight is a number, 40, and the values of breed and name are strings.
We\u2019re going to assign our 
object to the variable fido.
And of course we have an array to hold the dog\u2019s loves.
Notice that each property 
is separated by a comma. 
NOT a semicolon!
www.it-ebooks.info
you are here 4 133
javascript functions and objects
Some things you can do with objects
if (fido.weight > 25) {
 alert("WOOF");
} else {
 alert("yip");
}
Access object properties with \u201cdot\u201d notation:
Access properties using a string with [] notation:
Enumerate all an object\u2019s properties:
var prop;
for (prop in fido) {
 alert("Fido has a " + prop + " property ");
 if (prop == "name") {
 alert("This is " + fido[prop]);
 }
}
var breed = fido["breed"];
if (breed == "mixed") {
 alert("Best in show");
}
Change a property\u2019s value:
fido.weight = 27;
fido.breed = "Chawalla/Great Dane mix";
fido.loves.push("chewing bones");
Use the object along with a \u201c.\u201d 
and a property name to access 
the value of that property.
fido.weight
Here\u2019s the object...
Use a \u201c.\u201d
... and then the 
property name.
fido["weight"]
Here\u2019s the object...
Now we use [ ] around 
the property name.
... and the property 
name in quotes.
Use the object along 
with the property name 
wrapped in quotes and in 
brackets to access the 
value of that property.
We're changing Fido's weight...
... his breed...
... and adding a new item to his loves array.
push simply adds a new item 
to the end of an array.
To enumerate the properties we use a for-in loop.
Each time through the loop, the 
variable prop gets the string 
value of the next property name.
And we use the [ ] notation to 
access the value of that property.
We find dot notation the 
more readable of the two.
To enumerate is to go through all the 
properties of the object. 
Note the order of the properties is arbitrary, 
so don\u2019t count on a particular ordering.
1
2
3
4
www.it-ebooks.info
134 Chapter 4
what objects can do
The Dot Operator .
The dot operator (.) gives you access to an object\u2019s properties. 
In general it\u2019s easier to read than the [\u201cstring\u201d] notation:
 \u25cf fido.weight is the size of fido.
 \u25cf fido.breed is the breed of fido.
 \u25cf fido.name is the name of fido.
 \u25cf fido.loves is an array containing fido\u2019s interests.
Have fun with an object\u2019s array:
var likes = fido.loves;
var likesString = "Fido likes";
for (var i = 0; i < likes.length; i++) {
 likesString += &quot; &quot; + likes[i];
}
alert(likesString);
Pass an object to a function:
function bark(dog) {
 if (dog.weight > 25) {
 alert(&quot;WOOF&quot;);
 } else {
 alert(&quot;yip&quot;);
 }
}
bark(fido);
Here, we\u2019re assigning the value of fido\u2019s 
loves array to the variable likes.
We can loop through the likes array and 
create a likesString of all fido\u2019s interests.
And we can alert the string.
We can pass an object to 
a function just like any 
other variable.
And in the function, we 
can access the object\u2019s 
properties like normal, using 
the parameter name for the 
object, of course.
We\u2019re passing fido as our argument 
to the function bark, which expects 
a dog object.
5
6
www.it-ebooks.info
you are here 4 135
javascript functions and objects
Can we add properties 
to objects after we\u2019ve 
defined them? 
Yes, you can add or delete properties at any time.
To add a property to an object you simply assign a new property a 
value, like this:
and from that point on fido will have a new property: age. 
Likewise, you can delete any property with the delete keyword, 
like this:
When you delete a property, you\u2019re not just deleting the value of 
the property, you\u2019re deleting the property itself. In fact, if you use 
fido.age after deleting it, it will evaluate to undefined. 
The delete expression returns true if the property was deleted 
successfully (or if you delete a property that doesn\u2019t exist or if what 
you\u2019re trying to delete isn\u2019t a property of an object).
fido.age = 5;
delete fido.age;
www.it-ebooks.info
136 Chapter 4
objects as arguments
Let\u2019s talk about passing objects to functions
We\u2019ve already talked a bit about how arguments are passed to functions\u2014arguments 
are passed by value, so if we pass an integer, the corresponding function parameter 
gets a copy of the value of that integer for its use in the function. The same rules hold 
true for objects, however we\u2019ve got to look a little more closely at what a variable holds 
when it is assigned to an object to know what this means.
When an object is assigned to a variable, that variable holds a reference to the object, 
not the object itself. Think of a reference as a pointer to the object. 
So, when you call a function and pass it an object, you\u2019re passing the object 
reference\u2014not the object itself, just a \u201cpointer\u201d to it. A copy of the reference is 
passed into the parameter, which then points to the original object.
Dog
name: \u201cFido\u201d
weight: 40
breed: \u201cMixed\u201d
loves: [\u201cwalks\u201d, \u201cfetching balls\u201d]
fido
r
e
f
When an object is assigned to 
a variable, the variable is given 
a reference to the object. It 
doesn\u2019t \u201chold\u201d the object itself.
So, what does this all mean? Well, when you change a property of the object, 
you\u2019re changing the property in the original object, not a copy, and so, you\u2019ll 
see all the changes you make to an object within and outside of your function. 
Let\u2019s step through an example using a loseWeight function for dogs...
function bark(dog) {
 ... code here ...
}
r
e
fWhen we call bark and pass it fido as an argument, we get a 
copy of the reference to the 
dog object. 
www.it-ebooks.info
you are here 4 137
javascript functions and objects
fido.weight = 48;
 ...
loseWeight(fido);
Dog
name: \u201cFido\u201d