Mootools Basic Tutorial
What is Mootools?
Stand for My Object-Oriented "JavaScript" Tools
Lightweight, modular, object-oriented JavaScript Framwork
created by Valerio Proietti - who originally intended it to be an extension to the Prototype JavaScript Framework
MooTools provides a cleaner, easier, and more elegant way to manipulate the object to our will
MooTools helps make the JavaScript code cross-browser compatible
Why Mootools?
JavaScript isn't perfect
JavaScript doesn't have a lot of native functions and methods to deal with modern user demands
Independent, open-source,and very robust JavaScript framework
Solid team of core developers and thousands of users who support, contribute
Where You can get it?
You can download a copy of MooTools from the offician MooTools website, http://www.mootools.net
How to use Mootools?
Downloading and Installing MooTools Core
Using MooTools Builder
To be continued...
jQuery Introduction
jQuery: Installation »
What JQuery Does
Access parts of page. jQuery offers a robust and efficient selector mechanism for retrieving exactly the piece of the document that is to be inspected or manipulated.
Modify the appearance of a page. jQuery can bridge CSS browser standard gap.
Alter the content a page. jQuery can modify texts, images,list, and entire of the HTML. All with a single easy-to-use API.
Respond to a user's interaction with a page. The jQuery library have an elegant way to intercept a wide variety of events without the need to clutter the html code itself with event handlers.
Add animation. Implementing such interactive behaviors.
AJAX support. Retrieve information from server without refreshing a page.
Simplify common JavaScript task.
We want to modify page in order to be like this:
// JavaScript Document
$(document).ready(
function(){
$('.lyric-text').addClass('lyric-full');
}
);
What mean? The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. In this case, jQuery find lyric-text class. Then, jQuery inject new class named "lyric-full". This job use .addClass() method. So, we must add new class in our css, like this:
.lyric-full {
font-style: italic;
background-color:#FFFFCC;
border: 1px solid #FF0000;
padding: 0.5em;
}
Thus, open your mycss.css. Update like this:
@charset "utf-8";
/* CSS Document */
body {
font: 75% Arial, Helvetica, sans-serif;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.2em;
margin-bottom: .5em;
}
h3 {
font-size: 1.0em;
margin-bottom:0;
}
.lyric{
margin: 0 2em;
}
.lyric-full {
font-style: italic;
background-color:#FFFFCC;
border: 1px solid #FF0000;
padding: 0.5em;
}
Point your browser to http://localhost/test/jquery/myfirstjquery.html.
jQuery: Using Event Handler
JQuery Introduction Step By Step Tutorial - Part 4:We know, JavaScript have event handlers. Many handlers are available for user-initiated events, such as mouse clicks, key presses, load. In this post, we will see how to apply it.
In this practice, we use onload event at body. Like this:
// JavaScript Document
$(document).ready();
function lyricstyle(){
$('.lyric-text').addClass('lyric-full');
}
We create new function: lyricstyle(). We don't put in $(document).ready(). What is impact? This causes our code to run after the page is completely loaded.
