|
We have already talked about objects. Form inputs are objects, forms are objects, really about anything you can see in the browser window is an object which you can manipulate in one way or another. But, what you may not realize is that imaginary things can be objects too. We already used a car as an example, so let's take it one step further. As you saw with the illustration, the gas tank of a car has properties because it is an object. For the sake of finding obvious properties, let's remember that we learned that objects have properties, but apply that knowledge to a car. What do you notice when you see a cool sports car (say a Ferrari) cruise by your house. Most likely, you see that it is red, right? Color is a property of a car. What else? Well, it's a Ferrari. Perhaps it's a Ferrari 348. Make and Model of a car are properties aren't they? Sure. So, let's suppose that we want to make a JavaScript representation of a car that only has those three properties (I know that cars have more properties, but let's stick with these three and not over-complicate things.) From what you know about objects already, you know that you can call up those properties using dot notation. For instance, if you want the property 'value' of a text input, you do something like this:
And, as you also know, the blue part is the property name, 'value'. We want to have something similar for our car. So, we need to create an object for that car. To do this, we first have to create a template for that object. Defining templates is easy. It should remind you a lot of when we talked about passing parameters to functions at run time. Here's how you might do it for our car (go ahead and type this in):
Now, this function doesn't do anything visible. But it does do something kind of intangible. What it does is it take parameter values that you pass to it, and make them constants within itself. The 'this' keyword means "within itself". Let's illustrate what I mean. You're looking at this thing and saying, "That UserActive guy must be stupid. This new function doesn't say anything about our Red Ferrari 348." You're absolutely correct. But, what it does do is define a template - otherwise known as an object - for not only our Ferrari, but any car. Let's make this template specify our Ferrari. Add the red stuff:
Guess what we have now. That's right, we have created an instance (a new object of a specific type) of type 'car' named 'ferrari'. Our 'ferrari' object has some properties named "make", "model", and "color". Let's look at this new line and break it down:
In green is the keyword 'new'. This keyword tells the browser that we are creating a new object that we will reference later. The part in blue should look familiar - it's the name of the function that defines our 'car' template. We treat this just like any other function, and pass the necessary parameters - which are in purple - to the function with the specific traits that make our Ferrari a Red Ferrari 348. So, we've got it. Now what do we do with it? Well, since this Ferrari is an object, we can call it's name and get it's properties, right? Sure. Add this stuff to your document:
Go try it and see what it does even though you probably already know. OK, let's take it just one step further, and then we'll move on to why you care about this. We want to have more types of car objects. Add the red stuff:
Go try it. Enter the make of the car that you want to see information about and click 'Do It'. Whoaaaaa. It doesn't work! Instead, it returns "undefined undefined undefined". What's that all about? Well, first, let's fix it. Add the red stuff:
Now, let's analyze exactly what we did. First, we defined three instances of our car object ("ferrari", "porsche", and "acura") all of which have the "make", "model", and "color" properties. Then, in our script, we did some things. This parts a little weird at first, so bear with me. First, forget about that "eval()" method and look at the parameter that we passed to it. We got the value of the form input and converted it to lower case. We did this because the names of our car instances are lower case, and someone might enter their desired make in any number of capitalization possibilities. Now, for that "eval()" method. You know that variables contain values. Normally (that is - if we hadn't used the "eval()" method), if we called the "carname" variable, it would provide it's contents which would be the lower case version of whatever the user had typed in - which is a string and not an object. But, we don't exactly want to do that. In this case, we need to be able to use the "carname" variable as if we were typing the name of a car object. The "eval()" method makes whatever variable is set to it the same as the parameter that was passed to the "eval()" method. Another way to think of it would be this. When "Variable A" is set to the evaluated value of "Variable B", "Variable A" becomes "Variable B". Finally, we displayed the properties of the chosen car object in an alert. Make sense? User-Defined Objects probably seem kind of useless to you right now, but as you'll see in the next lesson, they can be very powerful. See you in Lesson 14!! |