A M I C R O - I N T R O D U C T I O N T O T H E

J AV A S C R I P T W E B F R A M E W O R K ,

M O O T O O L S !

JAVASCRIPT != JAVA

• Everybody thinks Java and Javascript are related

• “Java and Javascript are similar like Car and Carpet are

similar.” – Greg Hewgill

• They are not

• They share a similar name for marketing purposes

JAVASCRIPT RUNS…

• Javascript is run in a browser, but can be found other places like…

• Photoshop widgets

• AIR Applications

• Text-editor extensions

• Flash

• Unlike Java, there is no official runtime; each browser has its own

implementation

• SquirelFish, SpiderMonkey, JagerMonkey, V8 & more…

SOME JIFFERENCES DIFFERENCES

J A V A S C R I P T

• Untyped variables

• Function Based Scope

• Prototypical Inheritance

• Constructors are regular

functions

• Implicit Global Scope

J A V A

• Typed variables

• Block Based Scope

• Classical Class-based

Inheritance

• Constructors are special

pseudo-methods

• Implicit this attached to

non-static member

methods

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};

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.

A JAVASCRIPT MASTER

Can you believe you’ve mastered

Javascript already?

That’s all there is to JS since you already know

Java.

Questions?

DIVIDERS AS BLOCKS

• There 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?

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

DONE WITH HTML ALREADY!

You’re not a master with HTML yet, but this is

enough to get the job done for now.

Questions?

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

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

THE MOOSHELL

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.

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");

BUTTON FUN…

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");

});

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. (This is a bit

harder.)

$("myBox").addEvent("mouseenter", function(){

this.tween("opacity", 0); // fade out

});

$("myBox").addEvent("mouseleave", function(){

this.tween("opacity", 1); // fade in

});

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?

MOOTOOLS CLASSES

Since Java Script does not have classes as we (Java Programmers) know,

MooTools allows us to write as if Java Script did.

var Animal = new Class({

initialize: function(name) {

this.name = name;

this.isAlive = true;

}

});

MOOTOOLS CLASSES / 2

If you have your Animal class, you could make a Cat class.var Animal = new Class({

initialize: function(name) {

this.name = name;

this.isAlive = true;

}

});

var Cat = new Class({Extends: Animal,

initialize: function(name) {this.parent(name);this.energy = 10;

}

eat: function(animal) {if (animal.isAlive == false) return false;this.energy++;animal.isAlive = false;

}

});

MOOTOOLS CLASSES / 3

A handy feature of MooTools is that you can add methods to an inheritance

chain without rewriting the original script. For instance, if we want to

add a reproduce method to animal, we can simply implement the new

method on.

Animal.implement({

reproduce: function() {

return Math.random() < .5;

}

});

The original Animal class is intact, but the subclasses of Animal all now

have a reproduce method.

MOOTOOLS CLASSES / 4

MooTools really shines when it comes to classes

It allows for reusability and organization

The familiar new Class(…) style makes it easier for people

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

WEB DEVELOPMENT

Web Development is a jack-of-many-trades kind of craft; you have HTML,

CSS, Java Script, PHP, Java, ASP.net, Photoshop, Flash and many other

aspects.

Knowing basic HTML, CSS and Java Script is all you really need to get

started though.

MATH DEPARTMENT WARMUPS

CENTRAL HP DEMO

BUT A QUICK QUIZ IS BETTER!

1. 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. What slide is this (as in number)?

5. Did you think the presentation was over?

6. Do you think the presentation is over?

THANKS FOR LISTENING

ifupdown.com

ryan.rampersad@gmail.com

twitter.com/ryanmr

facebook.com/ryan.rampersad