HTML and CSS Reference
In-Depth Information
Now it's time to put it all together and see what happens (see UserObject.html in this
chapter's folder at www.wiley.com/go/smashinghtml5 ):
<! DOCTYPE HTML >
< html >
< head >
< script type = ”text/javascript” >
AddingMachine = new Object ();
//Object properties
AddingMachine . firstNumber = 4 ;
AddingMachine . secondNumber=66 ;
//Object method
AddingMachine . total = function ()
{
document . write ( this . firstNumber + this . secondNumber );
}
//Fire off the method!
AddingMachine . total ();
</script>
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Simple Object </ title >
</ head >
</ html >
Note that the method AddingMachine.total() uses the method document.write() .
(You can spot methods in JavaScript by looking for the parentheses.) Also, note that to i re of
the method, the name of the object and function are listed and of it goes. When you test it,
you'll see that the results are the total of the two properties.
251
Back to the Document Object Model and browser objects
h is chapter has covered a lot of territory very quickly. In fact, the last section is the i rst step
in Object-Oriented Programming (OOP). So, if you didn't pick up everything, don't worry.
h e purpose is to make you more comfortable with the DOM in HTML5. If you understand
terms like properties and methods, they won't seem as foreign.
As we get into many of the newer features in HTML5, you'll be better able to navigate through
all the terms and understand what's going on. In other words, it'll be easier to learn. h at
doesn't mean you have to become an OOP programmer to understand this stuf . It just means
that a little OOP goes a long way toward helping you understand the DOM and browser
objects that come in handy when using elements like canvas .
h roughout the topic, you've seen objects that belong to the browser. I didn't discuss them as
such, but that's what they are. h e browser has the following objects that are important to
using HTML5. Included are the following:
History
Location
 
Search WWH ::




Custom Search