ap computer science mootools presentation
TRANSCRIPT
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?
