• Abstract and Figures
• Public Full-text

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 • Constructors are special pseudo- methods • Implicit Global Scope • 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 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 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 = Developer.prototype = new F(); function(hours) { Developer.prototype.__super = var hoursOfWork = 5 * hours; 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)

Load more

  54

Copy Link