MooTools: A Web Experience

MooToolsA Web Developer ExperienceAn Introduction to the javascript framework, MooTools!1JavaScript != JavaJava and Javascript are similar like Car and Carpet are similar. Greg Hewgill

Everybody thinks Java and Javascript are relatedThey are notThey share a similar name for marketing purposes

2JavaScript RunsJavascript is run in a browser, but can be found other places likeApple Dashboard widgets, Adobe Apps, Text-editor extensions, Flash & More...Unlike Java, there is no official runtime; each browser has its own implementationTraceMonkey (Firefox 3.5), V8 (Chrome), SquirrelFish (Safari), Carakan (Opera 10.50), Chakra (IE9)Some Jifferences DifferencesJavaScriptJavaUntyped variablesFunction Based ScopePrototypical InheritanceConstructors are regular functionsImplicit Global ScopeTyped variablesBlock Based ScopeClassical Class-based InheritanceConstructors are special pseudo-methodsImplicit this attached to non-static member methodsJavaScript Syntax OverviewJust enough to get aroundVariablesVariables 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;

FunctionsFunctions 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 MasterCan you believe youve mastered Javascript already?Thats all there is to JS since you already know Java.

Questions?

A Quick HTML Stop Dividers as BlocksThere are HTML elements, they make up webpages.Elements have IDs and Classes. These are used as hooks.

My really cool stuff div!

Notice the div part, thats 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 and the div?LinksLinks are important in HTML.They can be clicked.

Search Google for Pirates

That makes an underlined clickable piece of text: Search Google for PiratesInputInput is easy too.

Done with HTML Already!Youre not a master with HTML yet, but this is enough to get the job done for now.

Questions?My Object Oriented ToolsI mean, MooToolsThe MooTools WebsiteMootools.net

The MooTools DocsMootools.net/docs

The Moo in MooToolsMOO: My Object Oriented ToolsMooTools 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. Thats 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.comThe 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 boxLets say its a div with the ID of myBox.your little boxWhat if we wanted that box to become red? Wed 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 Variablesvar box = $("myBox"); // You can store your reference in a variableInteractionLets say theres a button (link)GreenifyWe 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 BoxNow, 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});

Youve Experienced the 3 Es of JSThe Three Es 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 ElementsAdding text to elements is easy too.

$("myBox").set("html", "Hi there, how are you?");

Adding Lots of Dynamic TextBut 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() this.votingAge) return true; return false; }});MooTools Classes / 4 / Optionsvar 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 inheritanceBut keeps some nifty aspects of prototypical inheritance (implements)And gives you flexibility through Options

Where to Go From HereAnd How to Get ThereResourcesHTML: www.w3schools.com/html/html_intro.aspCSS: www.w3schools.com/css/css_intro.aspJava Script: www.w3schools.com/js/js_intro.asp

mootools.netwalkthrough.ifupdown.comWeb DevelopmentWeb 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 MooToolsMath Department Warmups

Central HP Demo

Thats About ItBut Its Been FunBut not quite, heres a little quizName the 5 browsers that were used in this presentation.What is ryans domain name?What does the MOO stand for in MooTools?Does Gmail use Java Script?Did you think the quiz was going to be longer?Questions?Srsly, there is only 1 slide left now!Thanks For Listeningifupdown.comryan.rampersad@gmail.comtwitter.com/ryanmrfacebook.com/ryan.rampersad