Time for action—creating an instance of Dog_MooTools 1.2 Beginner's Guide-QQ阅读女生幻言网

上QQ阅读APP看书，第一时间看更新

Time for action—creating an instance of Dog

Let's create an instance of a Dog class by deploying the following the steps:

Create an HTML document for this. Use the following code taken from our Dog class.

<html>
<head>
<script type="text/javascript" src="mootools-1.2.1-core-nc.js">
</script>
<script type="text/javascript">
var Dog = new Class(
{
Implements : [ Options ],
options : {
name : 'Barkee',
type : 'Poodle',
age : 4
},
initialize : function( options )
{
this.setOptions( options );
},
bark : function()
{
alert( this.options.name + ' is barking.' );
},
sit : function()
{
alert( this.options.name + ' is sitting.' );
}
});
</script>
</head>
<body>
</body>
</html>

Tip

Apart from taking out the comments, referencing the MooTools framework, and putting in the basic tags for an HTML document, nothing has changed so far.

Create an instance of our Dog class, you can call the class instance anything you like, but I'll call mine simply myDog. Place the following code right below our class declaration.
```
var myDog = new Dog({ });
```
You've now created an instance of Dog, but we didn't declare any values for options properties, so the options for myDog will be set to our default values that we declared in the class.
Let's make myDog bark. Right below the code that we just wrote, place the following code, which will pass the .bark() method to myDog:
```
myDog.bark();
```
Save your work and preview the HTML document in the web browser. It should immediately open up a dialog box like this:

What just happened?

We just created a new instance of the Dog class called myDog. We didn't give myDog any replacement options, so it used as the default option in our class. When we used the .bark() method on myDog, it alerted us that "Barkee", the default name, "is barking".

If you followed along, this is the entire code you should have thus far:

<html>
<head>
<script type="text/javascript" src="mootools-1.2.1-core-nc.js">
</script>
<script type="text/javascript">
var Dog = new Class(
{
Implements : [ Options ],
options : {
name : 'Barkee',
type : 'Poodle',
age : 4
},
initialize : function( options )
{
this.setOptions( options );
},
bark : function()
{
alert( this.options.name + ' is barking.' );
},
sit : function()
{
alert( this.options.name + ' is sitting.' );
}
});
var myDog = new Dog({ });
myDog.bark();
</script>
</head>
<body>
</body>
</html>

Have a go hero — — use the .sit() class method

We still haven't used the .sit() method. Why don't you modify our example to use the .sit() method on myDog instead of .bark()?