- 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()?
推薦閱讀
- 從零開始:Photoshop CC 2019中文版基礎教程
- Procreate插畫入門必修課
- AI圖像處理:Photoshop+Firefly后期處理技術基礎與實戰
- ChronoForms 3.1 for Joomla! site Cookbook
- 中文版AutoCAD 2022基礎教程
- 中文版AutoCAD 2014高手之道
- 零基礎學數碼攝影后期
- AutoCAD 2018中文版基礎教程
- Premiere視頻編輯項目教程:Premiere Pro 2020(微課版)
- AutoCAD 2022中文版完全自學一本通
- SharePoint Designer Tutorial: Working with SharePoint Websites
- 攝影師的后期必修課(RAW格式篇)
- 數碼攝影修圖師完全手冊(第2卷)
- 玩轉掌上生活 手機網上生活達人秘笈
- Photoshop CC 2015中文版實用教程(第7版)