Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Get Started With MooTools

/skill level/
/viewed/
0 Times

(�Select by Class)
(�Where to Go Next?)
(2 intermediate revisions not shown.)
Line 17: Line 17:
* Knowledge of HTML and CSS
* Knowledge of HTML and CSS
* Intermediate knowledge of JavaScript
* Intermediate knowledge of JavaScript
-
* A copy of a [http://mootools.net/download MooTools source file]. Name it <code>mootools.js</code> (at least for these examples).
+
* A copy of a [http://mootools.net/download MooTools source file]. Name it <code>mootools.js</code> (at least for these examples)
-
 
+
==Start With Some HTML==
==Start With Some HTML==
Line 95: Line 94:
At the heart of every JavaScript framework is a way to select objects on the page. We need to access these objects in order to do anything with them. In this section, I'll show some ways to select objects using MooTools.
At the heart of every JavaScript framework is a way to select objects on the page. We need to access these objects in order to do anything with them. In this section, I'll show some ways to select objects using MooTools.
-
To follow along, you can grab the code now from our codelibrary.
+
To follow along, you can grab the code now from our code library.
* [[Codelibrary:Highlight_Spans_with_MooTools]]
* [[Codelibrary:Highlight_Spans_with_MooTools]]
-
If you'd rather write the code yourself, I'll also walk you through the code at each step. Add the code to your blank document as we go.
+
If you'd rather write the code yourself, I'll also walk you through the code at each step. Add the code to your blank HTML document as we go.
===Select by ID===
===Select by ID===
-
To select a single object using its ID, you just pass that ID to the dollar sign function. For example, our basic HTML file has a div with id="second". To select that div, we just need this one line: $("second")
+
To select a single object using its ID, you just pass that ID to the dollar sign function. For example, our basic HTML file has a div with <code>id="second"</code>. To select that div, we just need this one line: <code>$("second")</code>
To test this out in our example HTML file, add the following underneath the "toggles" section near the bottom of the HTML:
To test this out in our example HTML file, add the following underneath the "toggles" section near the bottom of the HTML:
Line 111: Line 110:
<br />
<br />
-
This line adds a button to the page that, when clicked, calls the /test_byid()/ function. Where is that function? We need to add it between the script tags in your example HTML file:
+
This line adds a button to the page that, when clicked, calls the <code>test_byid()</code> function. Where is that function? We need to add it between the script tags in your example HTML file:
<pre>
<pre>
function test_byid()
function test_byid()
Line 120: Line 119:
<br />
<br />
-
Reload the file and click the new button. The second span (the one with id="second") highlights.
+
Reload the file and click the new button. The second span (the one with <code>id="second"</code>) highlights.
Line 142: Line 141:
<br />
<br />
-
Reload the file and click the new button. The two right boxes (the ones with class="test") highlight.
+
Reload the file and click the new button. The two right boxes (the ones with <code>class="test"</code>) highlight.
===Select by Tag===
===Select by Tag===
-
The last example used CSS to grab objects by class name. You can do the same thing by tag name. Just put the tag name inside the double dollar sign function, like so: $$("span")
+
The last example used CSS to grab objects by class name. You can do the same thing by tag name. Just put the tag name inside the double dollar sign function, like so: <code>$$("span")</code>
In our example HTML file, paste this code for the button to test getting objects by tag:
In our example HTML file, paste this code for the button to test getting objects by tag:
Line 165: Line 164:
Reload and click the new button. You'll see the two left boxes (the ones that are span tags) highlight.
Reload and click the new button. You'll see the two left boxes (the ones that are span tags) highlight.
-
You can use more specific CSS, too. Change $$("span") to $$("span.test") in the test_bytag function and you'll only select the object that is a span tag with class="test".
+
You can use more specific CSS, too. Change <code>$$("span")</code> to <code>$$("span.test")</code> in the <code>test_bytag</code> function and you'll only select the object that is a span tag with <code>class="test"</code>.
===Selecting the First Object of Many===
===Selecting the First Object of Many===
-
Sometimes you don't want every result, but instead just want the first. There are several ways to achieve this, but the easiest is through the <em>first-child</em> psuedo-selector. To use it, just add a color and first-child after the CSS-like call: $$("span:first-child")
+
Sometimes you don't want every result, but instead just want the first. There are several ways to achieve this, but the easiest is through the <em>first-child</em> psuedo-selector. To use it, just add a color and first-child after the CSS-like call: <code>$$("span:first-child")</code>
Here's the HTML:
Here's the HTML:
Line 192: Line 191:
===Calling Your Own Function on Results===
===Calling Your Own Function on Results===
-
Sometimes straight MooTools isn't enough to get what you want. That's when it's time to harness some of its extensibility. To iterate through all the results, you call the each function. For example, $$("span").each() will go through every span object.
+
Sometimes straight MooTools isn't enough to get what you want. That's when it's time to harness some of its extensibility. To iterate through all the results, you call the each function. For example, <code>$$("span").each()</code> will go through every span object.
Check out the code and then we'll look at the specific pieces.
Check out the code and then we'll look at the specific pieces.
Line 220: Line 219:
Inside the function, it checks the ID of the object it was passed. If the ID is not "second," we highlight the object the same way we have in previous examples.
Inside the function, it checks the ID of the object it was passed. If the ID is not "second," we highlight the object the same way we have in previous examples.
-
Reload and click the new button to see this in action. Just the far left box (the only span that does not have id="second") highlights.
+
Reload and click the new button to see this in action. Just the far left box (the only span that does not have <code>id="second"</code>) highlights.
==Where to Go Next?==
==Where to Go Next?==
Line 229: Line 228:
<div id="series">
<div id="series">
-
<div class="series_hdr">From the Django Tutorial series</div>
+
<div class="series_hdr">From the MooTools Tutorial series</div>
{| width="620" style="background:#e5f9ff;"
{| width="620" style="background:#e5f9ff;"
|
|

Revision as of 19:33, 25 September 2008

Programming with JavaScript can sometimes make me feel disorganized. I end up with bits of code floating around for various purposes. What was missing for a long time was some way to keep everything organized.

Now we're being helped out by JavaScript frameworks, like MooTools, Prototype and JQuery. These frameworks sit on top of JavaScript and makes some common tasks a whole lot easier. When you use MooTools, as you will in this tutorial, you're still writing JavaScript, but hopefully it's a little more organized.

If you are still a beginning programmer, other frameworks might be a better choice. For example, see our jQuery tutorial. The way MooTools does things is a bit more for programmers than designers.

The MooTools way of doing things focuses on helping you not write the same thing over and over again. While the core of the library doesn't do everything for you (as some frameworks do), MooTools gives you the structure to do it for yourself once, then use is many times.

In this tutorial I'll introduce you to the MooTools way of writing JavaScript. Then we'll select objects from the page in a few different ways.

Let's get going and learn how to use the MooTools JavaScript framework.

This article is a wiki. If you know a thing or two about MooTools and would like to share it with the common man, or developer in this case, log in and edit this article.

Contents

What You Need

  • Knowledge of HTML and CSS
  • Intermediate knowledge of JavaScript
  • A copy of a MooTools source file. Name it mootools.js (at least for these examples)

Start With Some HTML

Before we get to using MooTools, let's get the example HTML ready to go. Copy the code below into an empty document in the same directory as your mootools.js: 

<html>
<head>
	<title>Testing MooTools</title>
	<script src="mootools.js"></script>
	<style>
		// CSS goes here
	</style>
	<script>
		// JavaScript goes here
	</script>
</head>
<body>

</body>
</html>


Opened in a browser, the above is blank. That's because it's only a starting place for the code we'll be adding into it. Even though it's empty, MooTools is being loaded. Check out the script line where src="mootools.js". This line will autmatically load the MooTools source JavaScript in the file.

Another note about scripts. The JavaScript code we create in this tutorial will be written alongside HTML within one main .html file. Normally, we'd link to an external JavaScript file instead the same way we link to the MooTools source code. The same goes for our CSS style, which we'll put in the document between the style tags. Normally, all of these files would be in another directory too. For this tutorial I'm including scripts and styles inline (with the exception of mootools.js) because I want to make the code easy to read and manipulate.

Before we move on to the code, let's set up the HTML and CSS we'll be using in the next section. First thing's first. Start up a typical HTML file. If you don't have one handy or forgot how to write one, use the blank HTML file from our codelibrary.

Add this between the body tags: 

<div id="container">
<span>SPAN<br />No id</br />No class</span>
<span class="test" id="second">SPAN<br />id="second"</br />class "test"</span>
<div class="test">DIV<br />No id</br />class "test"</div>
</div>
<p>
<strong>Toggles:</strong>
</p>


And put this between the style tags: 

#container div, #container span
{
	width: 150px;
	height: 150px;
	display: block;
	float: left;
	border: 1px solid black;
}
#container .highlight
{
	border: 3px solid orange;
}
p
{
	clear: left;
}
p input
{
	display: block;
}


Reload the HTML file you created and you'll see a few squares on your screen. Yay! Now let's bring on the MooTools magic.


Be Selective With MooTools

At the heart of every JavaScript framework is a way to select objects on the page. We need to access these objects in order to do anything with them. In this section, I'll show some ways to select objects using MooTools.

To follow along, you can grab the code now from our code library.

If you'd rather write the code yourself, I'll also walk you through the code at each step. Add the code to your blank HTML document as we go.

Select by ID

To select a single object using its ID, you just pass that ID to the dollar sign function. For example, our basic HTML file has a div with id="second". To select that div, we just need this one line: $("second")

To test this out in our example HTML file, add the following underneath the "toggles" section near the bottom of the HTML: 

<input type="button" onClick="javascript:test_byid();" value="id='second'" />


This line adds a button to the page that, when clicked, calls the test_byid() function. Where is that function? We need to add it between the script tags in your example HTML file: 

function test_byid()
{
	$("second").toggleClass("highlight");
}


Reload the file and click the new button. The second span (the one with id="second") highlights.


Select by Class

Selecting by ID is useful, but perhaps more useful is being able to select by CSS class. In this case, we're selecting more than one item. We use the double dollar sign function. The syntax is similar to CSS, where we put a period in front of the class name. To select an object of class "test," use this code: $$(".test")

Let's test it in our example HTML file. Here's the code for the testing button: 

<input type="button" onClick="javascript:test_byclass();" value="class='test'" />


And now the JavaScript, which you should paste below the previous function: 

function test_byclass()
{
	$$(".test").toggleClass("highlight");
}


Reload the file and click the new button. The two right boxes (the ones with class="test") highlight.

Select by Tag

The last example used CSS to grab objects by class name. You can do the same thing by tag name. Just put the tag name inside the double dollar sign function, like so: $$("span")

In our example HTML file, paste this code for the button to test getting objects by tag: 

<input type="button" onClick="javascript:test_bytag();" value="tag is 'span'" />


And the JavaScript function: 

function test_bytag()
{
	$$("span").toggleClass("highlight");
}


Reload and click the new button. You'll see the two left boxes (the ones that are span tags) highlight.

You can use more specific CSS, too. Change $$("span") to $$("span.test") in the test_bytag function and you'll only select the object that is a span tag with class="test".


Selecting the First Object of Many

Sometimes you don't want every result, but instead just want the first. There are several ways to achieve this, but the easiest is through the first-child psuedo-selector. To use it, just add a color and first-child after the CSS-like call: $$("span:first-child")

Here's the HTML: 

<input type="button" onClick="test_byfirstresult();" value="the first object where tag is 'span'" />


And the script: 

function test_byfirstresult()
{
	$$("span:first-child").toggleClass("highlight");
}


Reload and click the new button. You'll see just the far left box (the first span tag) highlight.


Calling Your Own Function on Results

Sometimes straight MooTools isn't enough to get what you want. That's when it's time to harness some of its extensibility. To iterate through all the results, you call the each function. For example, $$("span").each() will go through every span object.

Check out the code and then we'll look at the specific pieces.

Here's the HTML: 

<input type="button" onClick="test_byfunction();" value="tag is 'span', but id is not 'second'" />


And the script: 

	function test_byfunction()
	{
		$$("span").each(function(spanobj) {
			if (spanobj.id != 'second')
			{
			  spanobj.toggleClass("highlight");
			}
		});
	}


You'll notice there's a big chunk of stuff inside the parentheses of the each function. That's an anonymous function, written inline. You cannot call it directly (it has no name!), but it still acts like a normal function. In this case, it is called automatically with each object found passed as an argument.

Inside the function, it checks the ID of the object it was passed. If the ID is not "second," we highlight the object the same way we have in previous examples.

Reload and click the new button to see this in action. Just the far left box (the only span that does not have id="second") highlights.

Where to Go Next?

You now know the basics of selecting in MooTools and have seen an anonymous function. Both of these will play a large role in the examples throughout the next part of this tutorial.

In part two of our tutorial, we talk about events and how MooTools handles them. We'll write code that waits for events (such as clicking or typing), then I'll show how to add your own new functions. At the end, you'll be able to create a self-formatting telephone number input box that you can start using in forms immediately.

From the MooTools Tutorial series

Lesson 1: Get Started With MooTools
Lesson 2: Add Events With MooTools

Retrieved from "http://www.webmonkey.com/tutorial/Get_Started_With_MooTools"
Edit this article
Reddit Digg
 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year