MooTools A Web Developer Experience. JavaScript != Java “Java and Javascript are similar like Car...
54
MooTools A Web Developer Experience An Introduction to the javascript framework, MooTools!
MooTools A Web Developer Experience. JavaScript != Java “Java and Javascript are similar like Car and Carpet are similar.” “Java and Javascript are similar
JavaScript != Java Java and Javascript are similar like Car and
Carpet are similar. Java and Javascript are similar like Car and
Carpet are similar. Greg Hewgill
Slide 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)
Slide 4
Some Jifferences Differences JavaScriptJava 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
Slide 5
JAVASCRIPT SYNTAX OVERVIEW Just enough to get around
Slide 6
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;
Slide 7
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.
Slide 8
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.
Slide 9
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.
Slide 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. var myObject = {aVar: "aValue"}; var
myObjectFns = { aProperty: "see?", aMethod: function(aParam) {
return aParam + "arr" + myObject.aVar; } };
Slide 11
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]; }
Slide 12
A Javascript Master Can you believe youve mastered Javascript
already? Thats all there is to JS since you already know
Java.Questions?
Slide 13
A QUICK HTML STOP
Slide 14
Dividers as Blocks There 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?
Slide 15
Links Links are important in HTML. They can be clicked. Search
Google for Pirates That makes an underlined clickable piece of
text: Search Google for Pirates Search Google for Pirates
Slide 16
Input Input is easy too.
Slide 17
Done with HTML Already! Youre not a master with HTML yet, but
this is enough to get the job done for now.Questions?
Slide 18
MY OBJECT ORIENTED TOOLS I mean, MooTools
Slide 19
THE MOOTOOLS WEBSITE Mootools.net
Slide 20
THE MOOTOOLS DOCS Mootools.net/docs
Slide 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).
Slide 22
Where to Learn This For Real
Slide 23
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.
Slide 24
SOURCE CODE TIME You know Coding?
Slide 25
Imagine a box Lets say its a div with the ID of myBox. your
little box What 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");
Slide 26
Elements in Variables var box = $("myBox"); // You can store
your reference in a variable
Slide 27
Interaction Lets say theres a button (link) Greenify MooMagic
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"); });
Slide 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 });
Slide 29
Youve Experienced the 3 Es of JS The 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?
Slide 30
Adding text to Elements Adding text to elements is easy too.
$("myBox").set("html", "Hi there, how are you?");
Slide 31
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()
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 / 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
Slide 45
WHERE TO GO FROM HERE And How to Get There
Slide 46
Resources
Slide 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.
Slide 48
A COUPLE OF DEMOS My History with MooTools
Slide 49
Math Department Warmups
Slide 50
Central HP Demo
Slide 51
THATS ABOUT IT But Its Been Fun
Slide 52
But not quite, heres a little quiz 1. Name the 5 browsers that
were used in this presentation. 2. What is ryans 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?
Slide 53
QUESTIONS? Srsly, there is only 1 slide left now!
Slide 54
Thanks For Listening ifupdown.com [email protected]
twitter.com/ryanmr facebook.com/ryan.rampersad
