Transcript MooTools - Ryan Rampersad

MooTools
A Web Developer Experience
An Introduction to the javascript framework,
MooTools!
JavaScript != Java
“Java and Javascript are similar like Car
and Carpet are similar.”
– Greg Hewgill
JavaScript Runs…
•
Javascript is run in a browser, but can be
found other places like…
Apple Dashboard widgets, Adobe Apps, Text-editor extensions, Flash & More...
•
Unlike Java, there is no official runtime;
each browser has its own implementation
TraceMonkey (Firefox 3.5),V8 (Chrome), SquirrelFish (Safari), Carakan (Opera 10.50), Chakra
(IE9)
JavaScript
Java
•
Untyped variables
•
Typed variables
•
Function Based Scope
•
Block Based Scope
•
Prototypical Inheritance
•
Classical Class-based Inheritance
•
Constructors are regular functions
•
•
Implicit Global Scope
Constructors are special pseudomethods
•
Implicit this attached to non-static
member methods
Some Jifferences Differences
Just enough to get around
JAVASCRIPT SYNTAX
OVERVIEW
Variables
Variables have no named types, but there are
types: strings, integers, floats, arrays, booleans
and objects.
var
var
var
var
var
var
var
aString = "stringy string string";
aNumber = 1337;
aFloat = 1337.314;
anArray = ["pirates", "ninjas", "penguins"];
aBoolean = true;
anObject = {name: "ryan", age: 17};
anElement = $("myBox");
Syntax: var varName = varValue;
Functions
Functions are globally accessible; methods
are attached to an Object.
function myMethod(param1, param2) {
return param1 + (param1 * param2);
}
There are no return types, there are no
parameter types. Obviously, this has
something to do with numbers though.
Strange Functions
Functions are actually like variables in a way;
you can pass them into other functions.
function runAFunctionToday(fn) {
return fn(2, 4);
}
function myMethod(param1, param2) {
return param1 + (param1 * param2);
}
runAFunctionToday(myMethod); // returns 10
The myMethod function is passed to the
runAFunctionToday function and inside, is
supplied the proper parameters to run.
Look, No Hands Class!
Again, variables and functions globally
available.
var someVar = "ipad";
function aFunction() {
var x = "meet";
thing = "verizon";
return someVar + ", " + x + thing;
}
// aFunction returns "ipad, meet verizon"
// "x" variable is no longer accessible, but "thing" is a
global variable now.
Object Literals
Java Script provides an incredibly useful
construct called an Object Literal (or “object”
for short). This is similar to a Java HashMap.
var myObject = {aVar: "aValue"};
var myObjectFns = {
aProperty: "see?",
aMethod: function(aParam) {
return aParam + "arr" +
myObject.aVar;
}
};
And all The Stuff You Already Know
You already know about if/else and loops, because
you know Java.
var x = 10, y = 5;
if (x < y) {
// something
} else {
// something else
}
var arr = ["h", "e", "l", "l", "o"];
for (var i = 0; i < arr.length; i++) {
var letter = arr[i];
}
A Javascript Master
Can you believe you’ve mastered Javascript
already?
That’s all there is to JS since you already know Java.
Questions?
<open> … </close>
A QUICK HTML STOP
Dividers as Blocks
There are HTML elements, they make up webpages.
Elements have IDs and Classes. These are used as hooks.
<div id="myDiv" class="myCoolStuff">My really cool stuff div!</div>
Notice the div part, that’s a block, or a square. It holds things.
myDiv is the ID of the div, myCoolStuff is the class of the div.
Notice that you <open> and </close> the div?
Links
Links are important in HTML.
They can be clicked.
<a href="http://google.com/search?q=pirates">Search Google for Pirates</a>
That makes an underlined clickable piece of text: Search Google for Pirates
Input
Input is easy too.
<input type="text" id="myname" />
<input type="submit" id="go" />
Done with HTML Already!
You’re not a master with HTML yet, but this is enough to
get the job done for now.
Questions?
I mean, MooTools
MY OBJECT ORIENTED
TOOLS
The Moo in MooTools
MOO: My Object Oriented – Tools
MooTools is a library that allows
developers to write code in a familiar Object
Oriented manner (because javascript is not
object oriented in the way we know it).
MooTools also adds loads and loads of
enhancements to otherwise boring webpages,
such as dynamic loading and fancy effects
(think fades, rescaling and so on).
Where to Learn This For Real
This Mirco-Introduction will not tell you
everything you need to know, like HTML, CSS
and Java Script. But it will get you started.
That’s all.
Two years ago, I started the mooWalkthrough,
a walk-through-style wiki designed to guide
beginners in their MooTools endeavors. Check
it out!
walkthrough.ifupdown.com
The mooShell – mootools.net/shell
A live testing environment for MooTools javascript, complete with tabbing and
highlighting support, completely browser based.
All of the examples during this presentation can be tested-out-live by using
the MooShell: enter the code into the correct box and hit run & watch the
result.
You know… Coding…?
SOURCE CODE TIME
Imagine a box…
Let’s say it’s a div with the ID of myBox.
<div id="myBox">your little box</div>
What if we wanted that box to become
red? We’d do this:
$("myBox").setStyle("background-color", "red");
What if we wanted that box to have blue
borders?
$("myBox").setStyle("border", "1px solid blue");
How about some white text now?
$("myBox").setStyle("color", "white");
Elements in Variables
var box = $("myBox");
// You can store your <div id="myBox"> reference in a variable
Interaction
Let’s say there’s a button (link)
<a id="myButton" href="#">Greenify</a>
We want this button to make our box become
green when we click the link. How? MooMagic™.
$("myButton").addEvent("click", function(){
$("myBox").setStyle("background-color", "green");
});
A Fading Box…
Now, instead of having a button, we want
the box to fade away when the mouse is
over it and fade in when the mouse is not
over it. (Imagine this in Greenfoot!)
$("myBox").addEvent("mouseenter", function(){
this.tween("opacity", 0); // fade out
});
$("myBox").addEvent("mouseleave", function(){
this.tween("opacity", 1); // fade in
});
You’ve Experienced the 3 – E’s of JS
The Three E’s of Java Script are: Elements,
Events and Effects.
 $("get-an-element"); // gets an element by ID
 $("someElement").addEvent("someEvent", function(){/* some kind of event */});
 $("someElement").tween("some-style", "some new end-result style");
Questions?
Adding text to Elements
Adding text to elements is easy too.
$("myBox").set("html", "Hi there, how are you?");
Adding Lots of Dynamic Text…
But if you have bunch of variables that help
shape a string, how about a different
method?
var subs = {
name: "ryan",
age: 17,
awesome: ( Math.random()<.5?"is":"is not") +
"awesome"
};
var str = "{name} is {age} and {awesome}!";
$("myBox").set("html", str.substitute(subs));
Creating elements
With MooTools, creating elements on
demand is a breeze.
var myElement = new Element("div");
myElement.set("html", "I am new");
myElement.setStyle("border", "1px solid #519CE8");
$("myBox").grab(myElement);
Getting Elements
You already know about the regular method to get
an element:
$("someElementID"); // returns the reference to the element that id=someElementId
Instead of giving IDs to every single element you
want to target, you can use some auxiliary
methods.
$("anyElement").getElement("any css selector");
// examples
.getElement("span");
.getElement("a");
.getElement("input[type=text]");
Delays and Periodicals
You can set a function or method to execute after a
set period of time, using delay.You can also have a
function or method execute repeatedly after a set
period of time, using periodical.
function goRed() {
$("myBox").setStyle("background-color", "red");
}
function goGreen() {
$("myBox").setStyle("background-color", "green");
}
goRed.delay(2000);
goGreen.periodical(5000);
Each
You can use a regular loop in javascript,
sure, but a MooTools each loop is so much
more fun.
var students = ["ryan", "nate", "john", "neal", "hui", "matt"];
// Obviously, comment one loop out for testing.
for (var i = 0; i < students.length; i++) {
$("myBox").set("html", $("myBox").get("html") + "<br />" + students[i]);
}
students.each(function(student){
this.set("html", this.get("html") + "<br />" + student);
}, $("myBox"));
Finished Utils, Now Classes
You’ve covered a lot of the Utilities now like “each” and
“delay”. MooTools offers a lot of convenience, but it also
offers the classical class approach that we all love.
Questions?
Your eyes may bleed a little
WHY PROTOTYPICAL
INHERITANCE SUCKS
You believe me, right?
function Person(dob) {
this.dob = dob;
}
var F = function(){};
Person.prototype.votingAge = 21;
F.prototype = Person.prototype;
Person.prototype.doWork =
function(hours) {
Developer.prototype = new F();
var hoursOfWork = 5 * hours;
Developer.prototype.__super =
Person.prototype;
return hoursOfWork;
Developer.prototype.votingAge = 18;
}
function Developer(dob, skills) {
this.dob = dob;
this.skills = skills;
}
And totally spoils us too
BUT MOOTOOLS SAVES
US
MooTools Classes / 1 / Base
Since Java Script does not have classes as we
(Java Programmers) know, MooTools allows us
to write as if Java Script did.
var Person = new Class({
votingAge: 21,
initialize: function(dob) {
this.dob = dob;
},
});
doWork: function(hours) {
var hoursOfWork = 5 * hours;
return hoursOfWork;
}
MooTools Classes / 2 / Subclass
Using the Person as a base class, it is easy to extend
other classes with MooTools.
var Developer = new Class({
Extends: Person,
votingAge: 18,
initialize: function(dob, skills) {
this.dob = dob;
this.skills = skills;
},
doWork: function(hours) {
var time = this.parent(hours);
if ( $type(this.skills) != "array" ) return;
return time / this.skills.length;
}
});
MooTools Classes / 3 / Implements
Assuming the two classes we made still
exist, what if we wanted to modify the
functionality without modifying the original
code?
Person.implement({
shouldVote: function() {
if (this.dob > this.votingAge) return true;
return false;
}
});
MooTools Classes / 4 / Options
var Student = new Class({
Implements: [Options],
Extends: Person,
options: {
classes: 6,
hours: 7,
lunch: .5,
},
initialize: function(dob, options) {
this.setOptions(options);
},
getClasses: function() {
return this.options.classes;
}
/* and so on ... */
});
MooTools Classes / 5 / Conclusion
As you have seen, MooTools gives you:
◦ A simple and concise method for classical
class based inheritance
◦ But keeps some nifty aspects of prototypical
inheritance (implements)
◦ And gives you flexibility through Options
And How to Get There
WHERE TO GO FROM
HERE
Resources
HTML: www.w3schools.com/html/html_intro.asp
CSS: www.w3schools.com/css/css_intro.asp
Java Script: www.w3schools.com/js/js_intro.asp
mootools.net
walkthrough.ifupdown.com
Web Development
Web Development is a jack-of-all-trades kind of craft; you have HTML,
CSS, Java Script, PHP, Java, ASP.net, Photoshop, Flash, Windows, OSX,
Linux, Apache, SQL, Google, Advertising, Marketing, User Experience,
Administration and so much more.
Knowing basic HTML, CSS and Java Script is all you really need to get
started though. The low entry cost for web development is appealing,
all you need is a text editor, a browser and an optional server.
My History with MooTools
A COUPLE OF DEMOS
Math Department Warmups
Central HP Demo
But It’s Been Fun
THAT’S ABOUT IT
But not quite, here’s a little quiz
1. Name
the 5 browsers that were used in
this presentation.
2. What is ryan’s domain name?
3. What does the MOO stand for in
MooTools?
4. Does Gmail use Java Script?
5. Did you think the quiz was going to be
longer?
Srsly, there is only 1 slide left now!
QUESTIONS?
Thanks For Listening
ifupdown.com
[email protected]
twitter.com/ryanmr
facebook.com/ryan.rampersad