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?
There are HTML elements, they make up webpages. Elements have IDs and Classes. These are used as hooks.
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
Links are important in HTML. They can be clicked.
That makes an underlined clickable piece of text: Searc