- MooTools 1.2 Beginner's Guide
- Jacob Gube Garrick Cheung
- 405字
- 2021-04-01 13:33:36
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>
- Create an instance of our
Dog
class, you can call the class instance anything you like, but I'll call mine simplymyDog
. 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 tomyDog:
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()?
推薦閱讀
- PS是這樣玩的:輕松掌握 Photoshop 通關秘籍
- Getting Started with Microsoft Application Virtualization 4.6
- 商用級AIGC繪畫創作與技巧(Midjourney+Stable Diffusion)
- 剪映:短視頻剪輯/字幕/動畫/AI從新手到高手(手機版+電腦版)
- Drupal: Creating Blogs, Forums, Portals, and Community Websites
- 剪映視頻后期剪輯零基礎入門到精通
- Python Testing: Beginner's Guide
- Excel公式、函數與圖表案例實戰從入門到精通(視頻自學版)
- ASP.NET 3.5 Social Networking
- 零基礎學會聲會影2018(全視頻教學版)
- Photoshop CC 2019 平面設計實例教程
- Photoshop CC入門與提高
- Altium Designer 20 中文版從入門到精通
- SketchUP草圖繪制從新手到高手
- Oracle Web Services Manager