MooTools A Web Developer Experience

1. MooToolsA Web Developer Experience An Introduction to the javascript framework, MooTools!

2. JavaScript != Java “Java and Javascript are similar like Car and Carpet are similar.” – Greg Hewgill

3. 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)

4. 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 Some Jifferences Differences

5. Just enough to get around JavaScript Syntax Overview

6. Variables Variables have no named types, but there are types: strings, integers, floats, arrays, booleans and objects. varaString="stringy string string"; varaNumber=1337; varaFloat=1337.314; varanArray=["pirates","ninjas","penguins"]; varaBoolean=true; varanObject={name:"ryan",age:17}; varanElement=$("myBox"); Syntax: varvarName = varValue;

7. Functions Functions are globally accessible; methods are attached to an Object. functionmyMethod(param1,param2){ returnparam1+(param1*param2); } There are no return types, there are no parameter types. Obviously, this has something to do with numbers though.

8. Strange Functions Functions are actually like variables in a way; you can pass them into other functions. functionrunAFunctionToday(fn){ returnfn(2,4); } functionmyMethod(param1,param2){ returnparam1+(param1*param2); } runAFunctionToday(myMethod);// returns 10 The myMethod function is passed to the runAFunctionTodayfunction and inside, is supplied the proper parameters to run.

9. Look, No Hands Class! Again, variables and functions globally available. varsomeVar="ipad"; functionaFunction(){ varx="meet"; thing="verizon"; returnsomeVar+", "+x+thing; } // aFunction returns "ipad, meet verizon" // "x" variable is no longer accessible, but "thing" is a global variable now.

10. Object Literals Java Script provides an incredibly useful construct called an Object Literal (or “object” for short). This is similar to a Java HashMap. varmyObject={aVar:"aValue"}; varmyObjectFns={ aProperty:"see?", aMethod:function(aParam){ returnaParam+"arr"+myObject.aVar; } };

11. And all The Stuff You Already Know You already know about if/else and loops, because you know Java. varx=10,y=5; if(x<y){ // something }else{ // something else } vararr=["h","e","l","l","o"]; for(vari=0;i<arr.length;i++){ varletter=arr[i]; }

12. A Javascript Master Can you believe you’ve mastered Javascript already? That’s all there is to JS since you already know Java. Questions?

13. <open> … </close> A Quick HTML Stop

14. Dividers as Blocks There are HTML elements, they make up webpages. Elements have IDs and Classes. These are used as hooks. <divid="myDiv"class="myCoolStuff">Myreallycoolstuffdiv!</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?

15. Links Links are important in HTML. They can be clicked. <ahref="http://google.com/search?q=pirates">SearchGoogleforPirates</a> That makes an underlined clickable piece of text: SearchGoogleforPirates

16. Input Input is easy too. <inputtype="text"id="myname"/> <inputtype="submit"id="go"/>

17. Done with HTML Already! You’re not a master with HTML yet, but this is enough to get the job done for now. Questions?

18. I mean, MooTools My Object Oriented Tools

19. The MooTools Website Mootools.net

20. The MooTools Docs Mootools.net/docs

21. 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).

22. 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

23. The mooShell – mootools.net/shell A live testing environment for MooToolsjavascript, 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.

24. You know… Coding…? Source Code Time

25. Imagine a box… Let’s say it’s a div with the ID of myBox. <divid="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");

26. Elements in Variables varbox=$("myBox"); // You can store your <div id="myBox"> reference in a variable

27. Interaction Let’s say there’s a button (link) <aid="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"); });

28. 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 });

29. 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?

30. Adding text to Elements Adding text to elements is easy too. $("myBox").set("html","Hi there, how are you?");

31. Adding Lots of Dynamic Text… But if you have bunch of variables that help shape a string, how about a different method? varsubs={ name:"ryan", age:17, awesome:(Math.random()<.5?"is":"is not")+"awesome" }; varstr="{name} is {age} and {awesome}!"; $("myBox").set("html",str.substitute(subs));

32. Creating elements With MooTools, creating elements on demand is a breeze. varmyElement=newElement("div"); myElement.set("html","I am new"); myElement.setStyle("border","1px solid #519CE8"); $("myBox").grab(myElement);

33. 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]");

34. 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. functiongoRed(){ $("myBox").setStyle("background-color","red"); } functiongoGreen(){ $("myBox").setStyle("background-color","green"); } goRed.delay(2000); goGreen.periodical(5000);

35. Each You can use a regular loop in javascript, sure, but a MooTools each loop is so much more fun. varstudents=["ryan","nate","john","neal","hui","matt"]; // Obviously, comment one loop out for testing. for(vari=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"));

36. 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?

37. Your eyes may bleed a little Why prototypical Inheritance sucks

38. You believe me, right? functionPerson(dob){ this.dob=dob; } Person.prototype.votingAge=21; Person.prototype.doWork=function(hours){ varhoursOfWork=5*hours; returnhoursOfWork; } functionDeveloper(dob,skills){ this.dob=dob; this.skills=skills; } varF=function(){}; F.prototype=Person.prototype; Developer.prototype=newF(); Developer.prototype.__super=Person.prototype; Developer.prototype.votingAge=18;

39. And totally spoils us too But MooTools Saves Us

40. 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. varPerson=newClass({ votingAge:21, initialize:function(dob){ this.dob=dob; }, doWork:function(hours){ varhoursOfWork=5*hours; returnhoursOfWork; } });

41. MooTools Classes / 2 / Subclass Using the Person as a base class, it is easy to extend other classes with MooTools. varDeveloper=newClass({ Extends:Person, votingAge:18, initialize:function(dob,skills){ this.dob=dob; this.skills=skills; }, doWork:function(hours){ vartime=this.parent(hours); if($type(this.skills)!="array")return; returntime/this.skills.length; } });

42. 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)returntrue; returnfalse; } });

43. MooTools Classes / 4 / Options varStudent=newClass({ Implements:[Options], Extends:Person, options:{ classes:6, hours:7, lunch:.5, }, initialize:function(dob,options){ this.setOptions(options); }, getClasses:function(){ returnthis.options.classes; } /* and so on ... */ });

44. 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

45. And How to Get There Where to Go From Here

46. 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

47. 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.

48. My History with MooTools A Couple of Demos

49. Math Department Warmups

50. Central HP Demo