Prototype

E' stata una delle prime librerie di Javascript che ha abbreviato la sintassi :

document.getElementById → $

quindi per esempio

…

<p id=”pippo”>paragrafo con id pippo</p>

…

var pPippo = document.getElementById(“pippo”);

si abbrevia con

var pPippo = $(“pippo”);

se poi devo creare un elenco (array) di elementi in base al loro id. Prendiamo il codice HTML seguente :

…

<ul id=”uno”>

<li>riga a1</li>

<li>riga a2</li>

<li>riga a3</li>

<li>riga a4</li>

</ul>

...

<ul id=due”>

<li>riga b1</li>

<li>riga b2</li>

<li>riga b3</li>

<li>riga b4</li>

</ul>

…

<ul id=”tre”>

<li>riga c1</li>

<li>riga c2</li>

<li>riga c3</li>

<li>riga c4</li>

</ul>

…

allora posso utilizzare il linguaggio Javascript già visto :

var elenchiArray = [];

elenchiArray[0] = document.getElementById(“uno”);

elenchiArray[1] = document.getElementById(“due”);

elenchiArray[2] = document.getElementById(“tre”);

abbreviato diventa :

var elenchiArray = $(“uno”,”due”,”tre”);

Poi ci sono le seguenti funzioni :

addClassName(element, className)

aggiunge una classe CSS a un elemento.

Es.

<div id="pippo" class="pluto minnie"></div>

$('pippo').addClassName('titto')

$('pippo').className
// -> 'pluto minnie titto'
//con la riga sotto visualizzo le classi abbinate all'elemento
$('pippo').classNames()
// -> ['pluto', 'minnie', 'titto']

hasClassName(element, className)

restituisce un valore booleano, serve per sapere se l'elemento è abbinato alla classe specificata.

Es.

<div id="pippo" class="pluto minnie titto"></div>

$('pippo').hasClassName(div,'minnie');
// -> true

$('pippo').hasClassName(div, 'totti');
// -> false

removeClassName(element, className)

cancella la classe o una delle classi abbinate all'elemento specificato.

Es.

<div id="pippo" class="pluto minnie titto"></div>

$('pippo').removeClassName(div, 'minnie');
// -> HTML Element

//con la riga sotto visualizzo le classi abbinate all'elemento
$('pippo').classNames();
// -> ['pluto', 'titto']

altre classi le trovate all'indirizzo :

http://prototypejs.org/doc/1.6.0/element.html