JS Framework Tutorial

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 »

jQuery Introduction Step By Step Tutorial - Part 1: JQuery is a popular JavaScript library. With jQuery, you can build more interesting and interactive web page easy. jQuery automate common tasks and simplify complicated writing code. jQuery have ability to assist in wide range of task. This is one reason this library become popular choice.


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.