mootools a web developer experience
DESCRIPTION
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… - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/1.jpg)
MooToolsA Web Developer Experience
An Introduction to the javascript framework, MooTools!
![Page 2: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/2.jpg)
JavaScript != Java
“Java and Javascript are similar like Car and Carpet are similar.” – Greg Hewgill
![Page 3: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/3.jpg)
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)
![Page 4: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/4.jpg)
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
![Page 5: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/5.jpg)
JAVASCRIPT SYNTAX OVERVIEW
Just enough to get around
![Page 6: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/6.jpg)
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;
![Page 7: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/7.jpg)
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.
![Page 8: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/8.jpg)
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.
![Page 9: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/9.jpg)
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.
![Page 10: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/10.jpg)
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; }};
![Page 11: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/11.jpg)
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];}
![Page 12: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/12.jpg)
A Javascript Master
Can you believe you’ve mastered Javascript already?
That’s all there is to JS since you already know Java.
Questions?
![Page 13: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/13.jpg)
A QUICK HTML STOP<open> … </close>
![Page 14: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/14.jpg)
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?
![Page 15: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/15.jpg)
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
![Page 16: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/16.jpg)
Input
Input is easy too.
<input type="text" id="myname" /><input type="submit" id="go" />
![Page 17: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/17.jpg)
Done with HTML Already!You’re not a master with HTML yet, but this is
enough to get the job done for now.
Questions?
![Page 18: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/18.jpg)
MY OBJECT ORIENTED TOOLS
I mean, MooTools
![Page 19: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/19.jpg)
THE
MOOTO
OLS W
EBSIT
E
Mooto
ols.n
et
![Page 20: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/20.jpg)
THE
MOOTO
OLS D
OCS
Mooto
ols.n
et/d
ocs
![Page 21: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/21.jpg)
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).
![Page 22: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/22.jpg)
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
![Page 23: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/23.jpg)
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.
![Page 24: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/24.jpg)
SOURCE CODE TIMEYou know… Coding…?
![Page 25: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/25.jpg)
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");
![Page 26: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/26.jpg)
Elements in Variables
var box = $("myBox"); // You can store your <div id="myBox"> reference in a variable
![Page 27: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/27.jpg)
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"); });
![Page 28: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/28.jpg)
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
});
![Page 29: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/29.jpg)
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?
![Page 30: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/30.jpg)
Adding text to Elements
Adding text to elements is easy too.
$("myBox").set("html", "Hi there, how are you?");
![Page 31: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/31.jpg)
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));
![Page 32: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/32.jpg)
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);
![Page 33: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/33.jpg)
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]");
![Page 34: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/34.jpg)
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);
![Page 35: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/35.jpg)
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"));
![Page 36: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/36.jpg)
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?
![Page 37: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/37.jpg)
WHY PROTOTYPICAL INHERITANCE SUCKS
Your eyes may bleed a little
![Page 38: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/38.jpg)
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;
![Page 39: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/39.jpg)
BUT MOOTOOLS SAVES US
And totally spoils us too
![Page 40: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/40.jpg)
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; }});
![Page 41: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/41.jpg)
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; } });
![Page 42: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/42.jpg)
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; }});
![Page 43: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/43.jpg)
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 ... */ });
![Page 44: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/44.jpg)
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
![Page 45: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/45.jpg)
WHERE TO GO FROM HERE
And How to Get There
![Page 46: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/46.jpg)
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
![Page 47: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/47.jpg)
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.
![Page 48: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/48.jpg)
A COUPLE OF DEMOSMy History with MooTools
![Page 49: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/49.jpg)
Math Department Warmups
![Page 50: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/50.jpg)
Central HP Demo
![Page 51: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/51.jpg)
THAT’S ABOUT ITBut It’s Been Fun
![Page 52: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/52.jpg)
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?
![Page 53: MooTools A Web Developer Experience](https://reader038.vdocument.in/reader038/viewer/2022110212/56813ae3550346895da33b6c/html5/thumbnails/53.jpg)
QUESTIONS?Srsly, there is only 1 slide left now!