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
we write out 
ourselves and ones we create with a constructor? 
A: The main difference is how you create them. Objects you 
write out yourself using curly braces and comma separated 
properties are known as \u201cobject literals.\u201d You literally type them 
into your code! If you want another one like it, you have to 
type it in yourself and make sure it\u2019s got the same properties. 
Objects created by a constructor are created by using new and 
a constructor function, which returns the object. You can use the 
constructor function to create many objects that have the same 
properties, but different property values if you want.
www.it-ebooks.info
152 Chapter 4
exercise solution
function ____________(___________, ____________, rating, showtimes) {
 this.title = ___________;
 this.genre = genre;
 this.________________ = rating;
 this.showtimes = ________________;
 this.getNextShowing = function() {
 var now = new Date().getTime();
 for (var i = 0; i < ____________________.length; i++) {
 var showtime = getTimeFromString(this._________________[i]);
 if ((showtime - now) > 0) {
 return &quot;Next showing of &quot; + _____________ + &quot; is &quot; + this.showtimes[i];
 }
 }
 } ______
}
titleMovie genre
rating
showtimes
this.showtimes
this.title
this
Woof
bark()
function
;
,
title
this.showtimes
Leftover magnets.
Code Magnets
A working Movie constructor function was on the fridge, but some of 
the magnets fell on the floor. Can you help get it back together? Be 
careful, some extra magnets may have already been on the ground 
and might distract you.
showtimes
This is a constructor so we\u2019re 
using \u201cMovie\u201d for the name. 
We pass in values for the properties we 
want to customize: title, genre, rating 
and showtimes...
... and initialize the properties.
To refer to properties in the object, 
we need to use the this keyword.
Don\u2019t forget to end this 
statement with a semicolon!
www.it-ebooks.info
you are here 4 153
javascript functions and objects
var banzaiMovie = new Movie(&quot;Buckaroo Banzai&quot;,
 &quot;Cult Classic&quot;,
 5,
 [&quot;1:00pm&quot;, &quot;5:00pm&quot;, &quot;7:00pm&quot;, &quot;11:00pm&quot;]); 
var plan9Movie = new Movie(&quot;Plan 9 from Outer Space&quot;,
 &quot;Cult Classic&quot;,
 2,
 [&quot;3:00pm&quot;, &quot;7:00pm&quot;, &quot;11:00pm&quot;]);
var forbiddenPlanetMovie = new Movie(&quot;Forbidden Planet&quot;,
 &quot;Classic Sci-fi&quot;,
 5,
 [&quot;5:00pm&quot;, &quot;9:00pm&quot;]);
alert(banzaiMovie.getNextShowing());
alert(plan9Movie.getNextShowing());
alert(forbiddenPlanetMovie.getNextShowing());
Now that you\u2019ve got a Movie constructor, it\u2019s time to make some Movie objects! 
Go ahead and type in the Movie constructor function and then add the code 
below and take your constructor for a spin. We think you\u2019ll agree this a much 
easier way to create objects.
Test drive your constructor right off the factory floor
First we\u2019ll create a movie object for the movie Buckaroo Banzai (one of our cult classic favorites). We pass in the values for the parameters.
And next, Plan 9 from Outer Space...
And of course, Forbidden Planet.
Once we\u2019ve got all our objects created, we 
can call the getNextShowing method and 
alert the user for the next showing times.
Notice we can put the array 
value for showtimes right in 
the function call.
www.it-ebooks.info
154 Chapter 4
tour of common objects
movie
title 
genre 
rating 
showtimes 
 
getNextShowing
Congrats, you\u2019ve made it 
through functions and objects! Now that 
you know all about them, and before we end the 
chapter, let\u2019s take a few moments to check out 
JavaScript objects in the wild; that is, in their 
native habitat, the browser!
document
domain 
title 
URL
getElementById 
getElementsByTagName 
getElementsByClassName
createElement button
onclickwindow
document 
location 
onload 
status
alert 
prompt 
open 
close 
setTimeout 
setInterval
Now, you might have started to notice...
...that objects are all around you. For instance, 
document and window are objects, as are the elements 
we get back from document.getElementById. 
And, these are just a few of many objects we\u2019ll be 
encountering\u2014when we get to the HTML5 APIs, we\u2019ll 
be seeing objects everywhere!
Let\u2019s take a second look at some of the objects you\u2019ve 
been using all along in this book:
input
value
ul
innerHTML 
childElementCount firstChild
appendChild 
insertBefore
We draw objects like this to 
show properties at the top...
...and methods at the 
bottom, so you get a quick summary of the object, its properties and methods at one glance. 
Here\u2019s our 
own object 
movie.
Some of the 
objects we've 
already run into.
www.it-ebooks.info
you are here 4 155
javascript functions and objects
When you\u2019re writing code for the browser, the window 
object is always going to be part of your life. The window 
object represents both the global environment for your 
JavaScript programs and the main window of your 
app, and as such, it contains many core properties and 
methods. Let\u2019s take a look at it:
What is the window object anyway?
Here\u2019s our window object with a few notable 
properties and methods you\u2019ll want to know 
about. There are many more...
Location holds the UR
L 
of the page. If you ch
ange 
it the browser retriev
es 
the new URL!
Status holds the string 
that is displayed in the 
status area of your browser. 
You\u2019ve certainly seen this before: onload is a property that holds the function to call when the page is fully loaded.
You\u2019ve seen the alert 
method, it displays 
an alert. Prompt is like alert, 
except it gets information 
from the user.Opens a new browser window.
Closes the window. Invoke
s a handler after a 
specified time interval.
Invokes a handler on a specified time interval, over and over.
window
location 
status 
onload 
document
alert 
prompt 
open 
close 
setTimeout 
setInterval
The document property holds 
the DOM!
www.it-ebooks.info
156 Chapter 4
how window.onload works
We\u2019ve been writing 
\u201calert\u201d, not \u201cwindow.alert\u201d... 
how does the browser know we 
want the window alert method?
Window is the global object.
It may seem a little weird, but the window object 
acts as your global environment, so the names of any 
properties or methods from window are resolved even 
if you don\u2019t prepend them with window.
In addition, any global variables you define are also 
put into the window namespace, so you can reference 
them as window.myvariable.
One thing we\u2019ve used often so far in this book is a window.onload event handler. 
By assigning a function to the window.onload property, we can ensure our code 
isn\u2019t run until the page is loaded and the DOM is completely set up. Now, there\u2019s a 
lot going on in the window.onload statement, so let\u2019s have another look and it will 
all start to come together for you:
window.onload = function() {
 // code here
};
Here\u2019s our global 
window object.
onload is a property of 
the window object.
This is an anonymous function, which is 
assigned to the onload property.
And of course the body of the function is executed once the window fully loads the page and invokes our anonymous function!
A closer look at window.onload
www.it-ebooks.info
you are here 4 157
javascript functions and objects
Another look at the document object
The document object is another familar face; it\u2019s the object we\u2019ve been using