MooTools A Web Developer Experience

An Introduction to the framework, MooTools! JavaScript !=

“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 ( 3.5), V8 (Chrome), SquirrelFish (), Carakan ( 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?

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

My really cool stuff 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 and the div? Links

Links are important in HTML. They can be clicked.

Search Google for Pirates

That makes an underlined clickable piece of text: Searc