Let us add an element to the HTML Document Object Model (DOM).
There is no oldie that is more goodie than greeting the world around us. There is an elemental power to our first Hello World, a power that proclaims, "We have the power to code syntactically correct. We have the power to change things on the screen. We have the power to accomplish business goals using this language. And, we are friendly and outgoing; 'Hello'."
Here is an example that demonstrates MooTools' syntax and power:
<script type="text/javascript" src="mootools-1.3.0.js"></script>
</head>
<body>
<div id="mycanvas">
Knock Knock, Who's there?
Hello, who?
</div>
<script type="text/javascript">
var whocanitbenow = 'Hello World!';
var readymsg = 'Okay to make the magic happen?';
if (confirm(readymsg,true,false)) {
// sexy part:
$('mycanvas').set('html',whocanitbenow);
} else {
// well, since they're being silly...
setTimeout(fallback_plan, 1000);
}
function fallback_plan() {
$('mycanvas').set( 'html', 'orange you glad there is a backup message?');
}
</script>
So, as usual in our favorite MooTools cookbook, the alluring part is set with spacing above and below. Here is the 1, 2, 3 of what is happening in that nugget of goodness:
We use the MooTools dollar, $, to select our div
We use the MooTools method
set()We send two arguments to
set()Note
MooTools $ has a counterpart, the double dollar sign: $$, which is used for sending CSS selectors and returns a multiple element collection.
The single $, originally reserved for grabbing DOM unique,
idattributed elements takes no punctuation not already inherent in the name of theidattribute.
Using MooTools dollar not only empowers us with cross-browser compatible code to humbly abstract and replace the infamous, JavaScript built-in, getElementById() method to get the element, but it also enhances the returned object with Moo-methods like get() and set().
Tip
Using Multiple Frameworks
It is imperative to use document.id(<id>) instead of its alias, $(<id>), when working with multiple frameworks. Reviewing the Moo-source shows that document.id is used exclusively. When another framework is using the dollar syntax, MooTools attempts to sense that and not extend the object.
The get() method returns the attribute or property value requested while the set() method takes the attribute/property argument and a value to which the property should change. In this example we could use $('mycanvas').set('text',whocanitbenow);. That would do the same thing as our example, since we have only altered text, but would prevent us from injecting HTML and would strip all existing HTML from our text.
We now see that our goal with this recipe is to try it out; be sure to change the whocanitbenow variable to something with HTML in it like this:
<script type="text/javascript">
var whocanitbenow = '<strong>Hello <em>World</em></strong>!';
var readymsg = 'Okay to make the magic happen?';
if (confirm(readymsg,true,false)) {
// "alluring" part:
$('mycanvas').set('html',whocanitbenow);
} else {
// well, since they're being silly...
setTimeout(fallback_plan, 1000);
}
function fallback_plan() {
$('mycanvas').set( 'html', 'orange you glad there is a backup message?');
}
</script>
For more information on CSS selectors see http://www.w3.org/TR/CSS2/selector.html.