HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [162]
♦ Use this to define any methods you want: If you want your object to have methods, define them using the this operator followed by the function(){ keyword. You can add as many functions as you wish.
The way JavaScript defines and uses objects is easy but a little nonstandard. Most other languages that support object-oriented programming (OOP) do it in a different way than the technique described here. Some would argue that JavaScript is not a true OOP language, as it doesn’t support a feature called inheritance, but instead uses a feature called prototyping. The difference isn’t all that critical because most uses of OOP in JavaScript are very simple objects like the ones described here. Just appreciate that this introduction to object-oriented programming is very cursory, but enough to get you started.
Using your shiny new objects
After you define a class, you can reuse it. Look again at the main function to see how I use my newly minted Critter class:
function main(){
//build two critters
critterA = new Critter(“Alpha”, 1);
critterB = new Critter(“Beta”, 2);
critterB.name = “Charlie”;
critterB.age = 3;
//have ‘em talk
critterA.talk();
critterB.talk();
} // end main
main();
After you define a class, you can use it as a new data type. This is a very powerful capability. Here’s how it works:
♦ Be sure you have access to the class: A class isn’t useful unless JavaScript knows about it. In this example, the class is defined within the code.
♦ Create an instance of the class with the new keyword: The new keyword means you want to make a particular critter based on the definition. Normally, you assign this to a variable. My constructor expects the name and age to be supplied, so it automatically creates a critter with the given name and age.
♦ Modify the class properties as you wish: You can change the values of any of the class properties. In my example, I change the name and age of the second critter just to show how it’s done.
♦ Call class methods: Because the critter class has a talk() method, you can use it whenever you want the critter to talk.
Introducing JSON
JavaScript objects and arrays are incredibly flexible. In fact, they are so well known for their power and ease of use that a special data format called JavaScript Object Notation (JSON) has been adopted by many other languages.
JSON is mainly used as a way to store complex data (especially multidimension arrays) and pass the data from program to program. JSON is essentially another way of describing complex data in a JavaScript object format. When you describe data in JSON, you generally do not need a constructor because the data is used to determine the structure of the class.
JSON data is becoming a very important part of Web programming, because it allows an easy mechanism for transporting data between programs and programming languages.
Storing data in JSON format
To see how JSON works, look at this simple code fragment:
var critter = {
“name”: “George”,
“age”: 10
};
This code describes a critter. The critter has two properties, a name and an age. The critter looks much like an array, but rather than using a numeric index like most arrays, the critter has string values to serve as indices. It is in fact an object.
You can refer to the individual elements with a variation of array syntax, like this:
alert(critter[“name”]);
You can also use what’s called dot notation (as used in objects) like this:
alert(critter.age);
Both notations work the same way. Most of the built-in JavaScript objects use dot notation, but either is acceptable.
The reason JavaScript arrays are so useful is that they are in fact objects. When you create an array in JavaScript, you are building an object with numeric property names. This is why you can use either array or object syntax for managing JSON object properties.
Look at jsonDistance.html on the Web site to see the code from this section in action. I don’t show a screenshot