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
the same thing, but 
everyone refers to object 
functions as methods.
To call a method on a object we use the object name along with the 
method using our dot notation, and supply any arguments needed.
you are here 4 143
javascript functions and objects
var movie1 = {
 title: "Plan 9 from Outer Space",
 genre: "Cult Classic",
 rating: 5,
 showtimes: ["3:00pm", "7:00pm", "11:00pm"],
 getNextShowing: function(movie) {
 var now = new Date().getTime();
 for (var i = 0; i < movie.showtimes.length; i++) {
 var showtime = getTimeFromString(movie.showtimes[i]);
 if ((showtime - now) > 0) {
 return &quot;Next showing of &quot; + movie.title + &quot; is &quot; + movie.showtimes[i];
 return null;
Now that your knowledge of objects is expanding we can go back and 
improve the cinema code. We\u2019ve already written a getNextShowing 
function that takes a movie as an argument, but we could instead make this 
part of the movie object by making it a method. Let\u2019s do that:
Meanwhile back at Webville Cinema...
No argument should be needed here, it\u2019s clear which movie 
we want the next showing of, that is, we want movie1.
We actually can\u2019t just throw the function in this object because 
getNextShowing takes a movie argument, and what we really want is to call 
getNextShowing like this:
But we know that can\u2019t be quite right...
var nextShowing = movie1.getNextShowing();
Alright, so how do we fix this? We\u2019ve got to remove the parameter from the 
getNextShowing method definition, but then we need to do something with all 
the references to movie.showtimes in the code because, once we remove the 
parameter, movie will no longer exist as a variable. Let\u2019s take a look...
We\u2019ve taken our code and placed it in a 
method of the movie1 object with the 
property name getNextShowing.
144 Chapter 4
reworking a function as a method
We\u2019ve taken the liberty of removing the movie parameter, and all the references 
to it. Which leaves us with this code:
Let\u2019s get the movie parameter out of there...
var movie1 = {
 title: &quot;Plan 9 from Outer Space&quot;,
 genre: &quot;Cult Classic&quot;,
 rating: 5,
 showtimes: [&quot;3:00pm&quot;, &quot;7:00pm&quot;, &quot;11:00pm&quot;],
 getNextShowing: function() {
 var now = new Date().getTime();
 for (var i = 0; i < showtimes.length; i++) {
 var showtime = getTimeFromString(showtimes[i]);
 if ((showtime - now) > 0) {
 return &quot;Next showing of &quot; + title + &quot; is &quot; + showtimes[i];
 return null;
We\u2019ve highlighted the changes below...
This all looks pretty reasonable, but we need 
to think through how the getNextShowing 
method will use the showtimes property...
...we\u2019re used to either local variables 
(which showtimes isn\u2019t) and global 
variables (which showtimes isn\u2019t). 
Alright, here\u2019s the conundrum: we\u2019ve got these references to the properties showtimes and 
title. Normally in a function we\u2019re referencing a local variable, a global variable, or a parameter 
of the function, but showtimes and title are properties of the movie1 object. Well maybe this 
just works... it seems like JavaScript might be smart enough to figure this out? 
Nope. It doesn\u2019t work. Feel free to give it a test drive; JavaScript will tell you the showtimes and 
title variables are undefined. How can that be? 
Okay, here\u2019s the deal: these variables are properties of an object, but we aren\u2019t telling JavaScript 
which object. You might say to yourself, \u201cWell, obviously we mean THIS object, this one right 
here! How could there be any confusion about that?\u201d And, yes, we want the properties of this 
very object. In fact, there\u2019s a keyword in JavaScript named this, and that is exactly how you tell 
JavaScript you mean this object we\u2019re in.
Now, the situation is actually a little more complicated than it appears here, and we\u2019re going to get 
to that in a second, but for now we\u2019re going to add the this keyword and get this code working.
Now what? 
Oh, and here\u2019s another 
one, the title property.
you are here 4 145
javascript functions and objects
Let\u2019s add this each place we specify a property, so that we\u2019re telling JavaScript 
we want the property in this object:
Adding the \u201cthis\u201d keyword
var movie1 = {
 title: &quot;Plan 9 from Outer Space&quot;,
 genre: &quot;Cult Classic&quot;,
 rating: 5,
 showtimes: [&quot;3:00pm&quot;, &quot;7:00pm&quot;, &quot;11:00pm&quot;],
 getNextShowing: function() {
 var now = new Date().getTime();
 for (var i = 0; i < this.showtimes.length; i++) {
 var showtime = getTimeFromString(this.showtimes[i]);
 if ((showtime - now) > 0) {
 return &quot;Next showing of &quot; + this.title + &quot; is &quot; + this.showtimes[i];
 return null;
Here we\u2019ve added a this keyword 
before every property to signify we 
want the movie1 object reference.
var nextShowing = movie1.getNextShowing();
nextShowing = movie2.getNextShowing();
Go ahead and type in the code above and also add the getNextShowing function to 
your movie2 object (just copy and paste it in). Then make the changes below to your 
previous test code. After that give it a spin! Here\u2019s what we got:
A test drive with \u201cthis\u201d
Note that we\u2019re now calling getNextShowing ON the 
object. Makes more sense, doesn\u2019t it?
146 Chapter 4
code reuse and methods
Ah, good eye.
You have great instincts if you recognized 
that we are duplicating code when we copy 
getNextShowing into more than one movie 
object. One of the aims of \u201cobject-oriented\u201d 
programming is to maximize code reuse\u2014here 
we\u2019re not reusing any code, in fact we\u2019re creating 
every object as a one-off, and our movie objects 
just happen to be the same by convention (and 
copying and pasting!). Not only is that a waste, it 
can be error prone. 
There\u2019s a much better way to do this using a 
constructor. What\u2019s a constructor? It\u2019s just a special 
function we\u2019re going to write that can create 
objects for us, and make them all the same. Think 
of it like a little factory that takes the property 
values you want to set in your object, and then 
hands you back a nice new object with all the 
right properties and methods.
Let\u2019s create a constructor...
It seems like we\u2019re duplicating 
code with all the copying and 
pasting of the getNextShowing 
method. Isn\u2019t there a better way?
you are here 4 147
javascript functions and objects
How to create a constructor
Let\u2019s make a constructor for dogs. We already know what we want our 
dog objects to look like: they have name, breed and weight properties, 
and they have a bark method. So what our constructor needs to do is 
take the property values as parameters and then hand us back a dog 
object all ready to bark. Here\u2019s the code:
function Dog(name, breed, weight) { = name;
 this.breed = breed;
 this.weight = weight;
 this.bark = function() {
 if (this.weight > 25) {
 alert( + &quot; says Woof!&quot;);
 } else {
 alert( + &quot; says Yip!&quot;);
A constructor function looks 
a lot like a regular function. 
But by convention, we give 
the name of the function a 
capital letter.
The parameters of the constructor take values for the properties we want our object to have. 
Here, we\u2019re initializing the properties 
of the object to the values that were 
passed to the constructor. 
We can include the bark method in the object we\u2019re constructing by initializing the bark property to