October 20th, 2012: Objects, Parts 1

The following is a summary of my notes and examples I used during the meeting.

The Objectives of Today’s meeting:

• Learning to Define Objects.
• Creating Objects
• Understanding Predefined JavaScript Objects

What is an object?

• An object is a way of modeling something real, even thought the object is and abstract entity .

Why Objects are useful?

• Objects are useful because they give you another way to organize things within a script.
• In JavaScript you access object properties through the use of the dot operator, which is just a dot or period.

Creating Objects:

Naming conventions. 

 

• They are essentially the same rules you follow for naming variables and functions.
• Object names are case sensitive.  Thus an object named car would be different from an object named Car, CAR or caR.
• Avoiding Reserved Words/Objects You cannot use a JavaScript reserved word

 There are two ways to create objects in JavaScript:

• Constructor function
• Object initializer

Constructor Function

• A constructor function allows you to build an object using the same basic syntax as a regular function
• The keyword this in JavaScript is used to represent the current object being used, or "This object" so to speak.
• Once you have the object's properties set with the constructor function you need to create what is called an instance of the object in order to use it.
• To create  an instance of an object, you use another JavaScript keyword: new.

Object Initializer

• An object initializer is a little bit shorter than a constructor function.  The following is the syntax of an object initializer:

object_name=(property:value)

• An object created with the initializer function is already an instance of the object so you can just use the properties without the need to create a new instance of the object.

Here is the example I used during the SIG for Constructor Functions and an Object Initializer

//Constructor Function

function coat(material,style,fastener) {
this.material=material;
this.style=style;
this.fastener=fastener;
}

var eli_manning = new coat("Wool","Overcoat","Buttons");

var michael_vick = new coat("Nylon","Windbreaker","Zipper");
var tony_romo = new coat("Denium","Jacket","buttons");
var robert_griffin = new coat("Canvas","Frock","hook-and-loop");

document.write("Eli Manning is wearing a "+eli_manning.material+" "+eli_manning.style+" with "+eli_manning.fastener+"<br/>");

document.write("Michael Vick is wearing a "+michael_vick.material+" "+michael_vick.style+" with "+michael_vick.fastener+"<br/>");
document.write("Tony Romo is wearing a "+tony_romo.material+" "+tony_romo.style+" with "+tony_romo.fastener+"<br/>");
document.write("Robert Griffin is wearing a "+robert_griffin.material+" "+robert_griffin.style+" with "+robert_griffin.fastener+"<br/>");

//Obect Initializer

andrew_schooler={material:"Nylon", style:"Frock",fastener:"hook-and-loop"};

andrew_schooler={material:tony_romo.material, style:robert_griffin.style,fastener:robert_griffin.fastener}

document.write("Andrew Schooler is wearing a "+andrew_schooler.material+" "+andrew_schooler.style+" with "+andrew_schooler.fastener+"<br/>");

Adding Methods

You can use a  function to call various tasks that you might want to execute with the properties of the objects. This is referred to as a adding a method.

function get_cost(){

var the_cost=50;
the_cost += (this.material == "Wool") ? 100 : 50;
the_cost += (this.style == "Frock") ?  150 : 25;
the_cost += (this.fastener == "Buttons") ? 35 : 10;
return the_cost;
}

//Constructor Function

function coat(material,style,fastener) {
this.material=material;
this.style=style;
this.fastener=fastener;
this.cost_coat=get_cost;
}

var eli_manning = new coat("Wool","Overcoat","Buttons");

var michael_vick = new coat("Nylon","Windbreaker","Zipper");
var tony_romo = new coat("Denium","Jacket","buttons");
var robert_griffin = new coat("Canvas","Frock","hook-and-loop");

document.write("Eli Manning is wearing a "+eli_manning.material+" "+eli_manning.style+" with "+eli_manning.fastener+"<br/>");

document.write("Michael Vick is wearing a "+michael_vick.material+" "+michael_vick.style+" with "+michael_vick.fastener+"<br/>");
document.write("Tony Romo is wearing a "+tony_romo.material+" "+tony_romo.style+" with "+tony_romo.fastener+"<br/>");
document.write("Robert Griffin is wearing a "+robert_griffin.material+" "+robert_griffin.style+" with "+robert_griffin.fastener+"<br/>");
// var eli_coat_cost= eli_manning.cost_coat();
document.write("<br/>");

document.write("Eli Manning's coat cost $"+eli_manning.cost_coat()+"<br/>");

document.write("Michael Vick's coat cost $"+michael_vick.cost_coat()+"<br/>");
document.write("Tony Romo's coat cost $"+tony_romo.cost_coat()+"<br/>");
document.write("Robert Griffin's coat cost $"+robert_griffin.cost_coat()+"<br/>");

The Navigator Object / Predefined Object

The navigator object gives you access to various properties of the viewer's browser, such as its name, version number, and more.

navigator.property or method

Properties: appCodeName appName appVersion cookieEnabled onLine platform plugins userAgent

Methods:  javaEnabled() mozlsLocallyAvailable Preference() registerContentHandler() registerProtocolHandler() tainEnabled()

The History Object / Predefined Object

The history object, which is also part of the window object, provides information on the browser history of current window.

history.method

History.back

History.forward
History.go

For the example of the navigator object I created examples of each navigator property and put them into a js file.

document.write("The type of browser you are using is..."+navigator.appCodeName+"<br/>");

//The code name of the browser
document.write("The type of browser you are using is..."+navigator.appName+"<br/>");
//The name of the browser
document.write("The version of "+navigator.appName+" your using is "+navigator.appMinorVersion+"<br/>");
//A string representing the minor version of the browser (Internet Explorer only)
document.write("If that didn't work, it's because "+navigator.appName+" isn't Internet Explorer"+"<br/>");
document.write("What's the difference between "+navigator.appVersion+" and "+navigator.appMinorVersion+"<br/>");
//The version of the browser and some other information
document.write("This is the language I'm using...(IE and Opera) "+navigator.browserLanguage+"<br/>");
//The language of the broswer being used
document.write("This is the version of Firefox I'm using "+navigator.buildID+"<br/>");
//The build identifier of the browser being used
document.write("C is for Cookie "+navigator.cookieEnabled+"<br/>");
//Specifies whther or not the browser has cookes enabled
document.write("Your CPU is (IE ONLY) "+navigator.cpuClass+"<br/>");
//A string representing the class of the CPU
document.write("My browser is fluent in () "+navigator.language+"<br/>");
//The language of the browser being used
document.write("What MIMEs are supported "+navigator.mimeTypes+"<br/>");
//An array of MIME types supported by the browser
document.write("I'm connected? "+navigator.onLine+"<br/>");
//Specifies whether or not the browser is in "global offline mode"
document.write("My OS is (Firefox Only) "+navigator.oscpu+"<br/>");
//A string representing the product name of the browser being used
document.write("I'm creating this on a "+navigator.platform+"<br/>");
//The machine type for which the browser was created
document.write("I have the following plugins installed "+navigator.plugins+"<br/>");
//An array of the plugins the browser has installed on it
document.write("The browser I'm using (Firefox only) "+navigator.product+"<br/>");
//A string representing the product name of the browser being used
document.write("The build browser I'm using (Firefox only) "+navigator.productSub+"<br/>");
//The build number of the browser being used
document.write("???? (Firefox only) "+navigator.securityPolicy+"<br/>");
//An empty string-returned a value in Netscape 4.7
document.write("My default OS is using the following language(Internet Explorer only) "+navigator.systemLanguage+"<br/>");
//The default language used by the operating system
document.write("My natural OS is using the following language(Internet Explorer and Opera) "+navigator.userLangage+"<br/>");
//The natural language of the operating system
document.write("I'm using the following user agent "+navigator.userAgent+"<br/>");
//The user agent header for the browser
document.write("What is this? (Firefox only) "+navigator.vendor+"<br/>");
//An empty string-retruned a string representing the vendor of the browser being used
document.write("What is this? (Firefox only) "+navigator.vendor+"<br/>");
//An empty string-retruned the vendor version number of the browser being used