MooToolsA 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)

Some Jifferences Differences

JavaScript Java

• Untyped variables

• Function Based Scope

• Prototypical Inheritance

• Constructors are regular functions

• Implicit Global Scope

• Typed variables

• Block Based Scope

• Classical Class-based Inheritance

• Constructors are special pseudo-methods

• Implicit this attached to non-static member methods

JAVASCRIPT SYNTAX OVERVIEW

Just enough to get around

Variables

Variables have no named types, but there are types: strings, integers, floats, arrays, booleans and objects.

var aString = "stringy string string";var aNumber = 1337;var aFloat = 1337.314;var anArray = ["pirates", "ninjas", "penguins"];var aBoolean = true;var anObject = {name: "ryan", age: 17};var 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 FunctionsFunctions 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 LiteralsJava 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 KnowYou 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?

A QUICK HTML STOP<open> … </close>

Dividers as BlocksThere 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?

MY OBJECT ORIENTED TOOLS

I mean, MooTools

THE

MOOTO

OLS W

EBSIT

E

Mooto

ols.n

et

THE

MOOTO

OLS D

OCS

Mooto

ols.n

et/d

ocs

The Moo in MooToolsMOO: 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 RealThis 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/shellA 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.

SOURCE CODE TIMEYou know… Coding…?

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 ElementsYou 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 PeriodicalsYou 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?

WHY PROTOTYPICAL INHERITANCE SUCKS

Your eyes may bleed a little

You believe me, right?function Person(dob) {

this.dob = dob;

}

Person.prototype.votingAge = 21;

Person.prototype.doWork = function(hours) {

var hoursOfWork = 5 * hours;

return hoursOfWork;

}

function Developer(dob, skills) {

this.dob = dob;

this.skills = skills;

}

var F = function(){};

F.prototype = Person.prototype;

Developer.prototype = new F();

Developer.prototype.__super = Person.prototype;

Developer.prototype.votingAge = 18;

BUT MOOTOOLS SAVES US

And totally spoils us too

MooTools Classes / 1 / BaseSince 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 / SubclassUsing 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 / ImplementsAssuming 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 / ConclusionAs 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

WHERE TO GO FROM HERE

And How to Get There

Resources

HTML: www.w3schools.com/html/html_intro.asp

CSS: www.w3schools.com/css/css_intro.aspJava Script: www.w3schools.com/js/js_intro.asp

mootools.netwalkthrough.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.

A COUPLE OF DEMOSMy History with MooTools

Math Department Warmups

Central HP Demo

THAT’S ABOUT ITBut It’s Been Fun

But not quite, here’s a little quiz1.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?

QUESTIONS?Srsly, there is only 1 slide left now!

Thanks For Listening

ifupdown.comryan.rampersad@gmail.com

twitter.com/ryanmrfacebook.com/ryan.rampersad