In questo articolo vedremo un simpatico e semplice script che permette di animare un testo facendolo comparire come se questo venisse digitato tramite una macchina da scrivere.
In altre parole realizzeremo una funzione Javascript che acquisito in input un testo, lo scriverà, un carattere per volta, all’interno di un contenitore: div, textarea o altro.
In fondo all’articolo è possibile provare o scaricare il codice completo.

La funzione che vedremo prende in input 3 parametri:
1 – id del campo dove stampare il testo
2 – il testo da stampare
3 – la velocità (espressa in millisecondi) di digitazione
Inoltre forniremo allo script un quarto parametro opzionale (numerico) ad indicare la posizione nella quale scrivere il prossimo carattere.

Vediamo subito il codice della funzione macchinaDaScrivere:

<script type='text/javascript>
function macchinaDaScrivere(id_campo, testo, velocita, posizione){
    var lunghezza = testo.length;
    posizione = posizione || 0;
    if(posizione<lunghezza){
        var carattere = testo.substring(posizione,posizione+1);
        document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,posizione) + carattere + "_";
        setTimeout('macchinaDaScrivere("'+id_campo+'", "'+testo+'", '+velocita+', '+(posizione+1)+');', velocita);
    }else{
        document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,lunghezza);
    }
}
</script>

Analizziamo in maniera dettagliata la funzione Javascript macchinaDaScrivere.
Calcolo la lunghezza del testo da stampare e quindi imposto una variabile posizione ad indicare la posizione nel quale digitare il prossimo carattere.
Il cuore della funzione è chiuso all’interno di un if, valido fino a quando la posizione è minore della lunghezza del testo.
Nella variabile carattere imposto il prossimo carattere da stampare, utilizzando una substring:

var carattere = testo.substring(posizione,posizione+1);

A questo punto accodo il carattere in questione al testo già presente nel box contenitore identificato da id_campo:

document.getElementById(id_campo).innerHTML = document.getElementById(id_campo).innerHTML.substring(0,posizione) + carattere + "_";

La funzione è praticamente conclusa, non prima che questa venga richiamata con l’incremento della posizione. A tal proposito è ora chiaro il perchè della presenza del quarto parametro opzionale nella chiamata alla funzione; tale parametro alla prima chiamata varrà 0 (di default) e crescerà man mano che si avanzerà nel testo da digitare.
La funzione setTimeout utilizzerà il valore della variabile velocità per ritardare la scrittura del successivo carattere:

setTimeout('macchinaDaScrivere("'+id_campo+'","'+testo+'",'+velocita+','+(posizione+1)+');',velocita);

Infine è necessario notare la presenza di un carattere di underscore basso alla fine di ciascuna digitazione. E’ chiaro come questo carattere sia esclusivamente “ornamentale” e può essere facilmente rimosso dal codice.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Coloro che sviluppano quotidianamente in Javascript si saranno imbattuti almeno una volta in un problema piuttosto semplice da risolvere con linguaggi di programmazione come Java, PHP, C ecc.. ma non così immediato in Javascript: sostituire tutte le occorrenze di una stringa all’interno di un’altra stringa.
In Javascript non esiste una funzione pronta che effettui questo tipo di “lavoro“, infatti la replace(stringa, new_stringa) sostituisce solo la prima occorrenza di “stringa” e non le eventuali successive. In rete, fortunatamente, sono presenti svariate soluzioni le quali, solitamente, utilizzando espressioni regolari per determinare la sostituzione.

In questo articolo vedremo una possibile soluzione che non utilizza espressioni regolari bensì un semplice ciclo while combinato con le funzioni indexOf, substring e replace di Javascript. Il codice della funzione str_replace è il seguente:

<script type='text/javascript'>
function str_replace(s_search, s_replace, s_subject){
    var pointer = 0;
    while(s_subject.indexOf(s_search,pointer)!=-1){
        pointer = s_subject.indexOf(s_search,pointer);
        s_subject = s_subject.substring(0,pointer) + s_subject.substring(pointer).replace(s_search,s_replace);
        pointer = pointer + s_replace.length;
    }
    return s_subject;
}
</script>

La funzione può essere così richiamata:

var new_stringa = str_replace(str_da_cercare,str_da_sostituire,str_originale);

Analizziamo brevemente il codice della funzione str_replace.

Acquisisco tre parametri: stringa da cercare, stringa da sostituire, stringa su cui operare.
Imposto una variabile pointer a 0 (inizio stringa).
Ciclo sulla stringa fino a che indexOf è vera. Bisogna ricordare che indexOf restituisce la posizione della prima occorrenza di stringa da cercare:

s_subject.indexOf(s_search,pointer)

Con l’aiuto della variabile pointer effetto il taglio in due della stringa originale andando a sostituire con una replace la sotto-stringa trovata nella seconda parte di stringa originale:

s_subject = s_subject.substring(0,pointer)+s_subject.substring(pointer).replace(s_search, s_replace);

nel frattempo incremento pointer avanzando nella stringa:

pointer = pointer + s_replace.length;

La funzione può sembrare complessa nel suo insieme ma svolge in maniera adeguata il suo compito. Inutile sottolineare che questa è solo una possibile soluzione.
N.B. La funzione appena realizzata è case sensitive.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

In questo articolo risolveremo la problematica del maxlength di una textarea html utilizzando poche semplici righe di codice Javascript.
Come tutti sapranno, l’attributo maxlength è accettato esclusivamente dai campi di tipo testo e non dalle aree di testo.
Realizzeremo una funzione che chiameremo appunto maxlength che accetta in input 2 parametri obbligatori ed un terzo opzionale:

• riferimento alla textarea
• numero massimo di caratteri
• id campo contatore caratteri mancanti (opzionale)

Prima di vedere il codice chiariamo il concetto del terzo campo opzionale. Vorremmo ad esempio poter predisporre un contatore affiancato alla textarea che visualizzi il numero di caratteri cancora disponibili.
In fondo all’articolo è possibile scaricare il codice completo e testare una demo.

Ecco il codice della funzione maxlength:

function maxlength(area,max,id_campo){
    var conta = max - area.value.length;
    if(id_campo!=null){
        document.getElementById(id_campo).innerHTML=conta;
    }
    if(conta < 0){
        area.value = area.value.substring(0,max);
        if(id_campo!=null){
            document.getElementById(id_campo).innerHTML = '0';
        }
    }
}

Il codice della funzione è molto semplice:

• calcoliamo quanti caratteri sono ancora disponibili (var conta)
• se tale valore è minore di 0 allora cancelliamo i caratteri in più (substring)

Una volta definita la funzione, questa va così richiamata all’evento onKeyUp:

<!-- Soluzione base -->
<textarea rows="7" cols="40" onkeyup="maxlength(this,160)">
</textarea>

Qualora volessimo presentare all’utente anche il contatore dei caratteri ancora disponibili:

<!-- Soluzione con contatore caratteri disponibili -->
Hai a disposizione ancora <span id='conta'>160</span> caratteri:<br/>
<textarea rows="7" cols="40" onkeyup="maxlength(this,160,'conta')">
</textarea>

Da notare che nella seconda soluzione abbiamo aggiunto l’ID di un elemento di tipo span adibito a contatore.
In conclusione la sintassi della funzione maxlength è la seguente:

maxlength(this,max_caratteri,[id_contatore])

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

In questo articolo realizzeremo un plugin jQuery che ci permetta di implementare una tabella HTML con le righe di due colori alternati.
In altre parole la nostra tabella avrà tutte le righe pari (2,4,6 ecc..) di un colore e quelle dispari (1,3,5 ecc..) di un altro colore.
Personalizzeremo, inoltre, il plugin con ulteriori caratteristiche. Ad esempio al passaggio del mouse su una riga, questa si animerà cambiando di colore e font.

Iniziamo subito lo sviluppo del plugin, che chiameremo “tzebra“, determinando quali saranno i parametri da passare alla funzione:

• Colore per righe dispari
• Colore per righe pari
• Colore per animazione riga

Una volta terminato il lavoro vorremmo poter invocare il plugin con questa sintassi:

$('#myTable').tzebra({
	color1: '#e0ffff',
	color2: '#add8e6',
	focusColor: '#00ffff'
});

Ottenendo quindi il seguente risultato:

Introduciamo il codice del plugin:

(function($){
	$.fn.tzebra = function(options) {

	var defaults = {
	   color1: "#FFFFFF",
	   color2: "#CCCCCC",
	   focusColor: ''
	};

	var options = $.extend(defaults, options);

	return this.each(function() {
		var id_table = $(this).attr('id');

		$('#'+id_table+ ' tbody tr:odd').css('background-color',options.color1);
		$('#'+id_table+ ' tbody tr:even').css('background-color',options.color2);

		if(options.focusColor!=''){
			$('#'+id_table+ ' tbody tr').css('cursor','pointer');

			$('#'+id_table+ ' tbody tr:odd').mouseover(function() {
				$(this).css('background-color',options.focusColor);
				$(this).css('font-weight','bold');
			}).mouseout(function(){
				$(this).css('background-color',options.color1);
				$(this).css('font-weight','normal');
			});

			$('#'+id_table+ ' tbody tr:even').mouseover(function() {
				$(this).css('background-color',options.focusColor);
				$(this).css('font-weight','bold');
			}).mouseout(function(){
				$(this).css('background-color',options.color2);
				$(this).css('font-weight','normal');
			});
		}

		return false;
	});

	};
})(jQuery);

Analizziamo il codice focalizzando l’attenzione sulle istruzioni fondamentali che lo compongono.
Innanzitutto passiamo alla funzione i parametri all’interno dell’array “options“, per intenderci i tre colori da noi scelti. Nell’array “default” abbiamo invece impostato i tre colori di default qualora i parametri in input siano nulli.
Nella variabile “id_table” scriviamo l’ID della tabella, utilizzando il metodo attr; l’ID ci servirà per accedere alla nostra tabella.
I passi successivi creano l’effetto zebrato:

$('#'+id_table+ ' tbody tr:odd').css('background-color',options.color1);
$('#'+id_table+ ' tbody tr:even').css('background-color',options.color2);

Tramite un opportuno selettore impostiamo rispettivamente il colore per le righe pari(odd) e poi per quelle dispari(even), manipolando la proprietà background-color grazie al metodo css di jQuery.
Le righe pari avranno come colore di sfondo options.color1, mentre le righe dispari avranno come colore options.color2
A questo punto abbiamo reso zebrata la nostra tabella, resta da animare le righe al passaggio del mouse.
Da notare che di default abbiamo settato il focusColor a blank per permettere una maggiore personalizzazione del nostro plugin, infatti potremo evitare di passare come parametro il terzo colore (il colore del focus riga) lasciando la tabella al semplice stato zebrato.
Una volta controllato che sia stato impostato il focusColor aggiungiamo gli eventi mouseover e mouseout sulle righe della nostra tabella, modificando il css prima per le righe dispari e poi per quelle pari.
I seguenti passi, ad esempio, aggiungono l’animazione sulle righe pari:

$('#'+id_table+ ' tbody tr:odd').mouseover(function() {
	$(this).css('background-color',options.focusColor);
	$(this).css('font-weight','bold');
 }).mouseout(function(){
	$(this).css('background-color',options.color1);
	$(this).css('font-weight','normal');
});

Al passaggio del mouse su una riga questa cambia di colore e il font diventa grassetto, quando il muose lascia la riga si ritorna allo stato precedente ripristinando colore e font.

Il plugin è concluso e pronto per l’uso.
Prima però è necessario salvare il codice in un file con estensione .js che chiameremo jquery.tzebra.js rispettando così la sintassi proposta da jQuery (jquery.[nome del plugin].js).

Richiamiamo il codice del plugin, realizziamo una semplice tabella e invochiamo il metodo tzebra:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Tabella zebrata</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.tzebra.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $('#myTable').tzebra({
		color1: '#e0ffff',
		color2: '#add8e6',
		focusColor: '#00ffff'
	});
});
</script>

</head>
<body>

<table id='myTable' border='0' cellpadding="0" cellspacing="0">
<thead>
<tr><th>Nome</th><th>Cognome</th><th>Voto Informatica</th><th>Voto Lettere</th></tr>
</thead>
<tbody>
<tr><td>Marco</td><td>Rossi</td><td>30</td><td>21</td></tr>
<tr><td>Luigi</td><td>Bianchi</td><td>22</td><td>26</td></tr>
<tr><td>Marco</td><td>Neri</td><td>24</td><td>24</td></tr>
<tr><td>Giuseppe</td><td>Rossi</td><td>18</td><td>20</td></tr>
<tr><td>Enrico</td><td>Giallo</td><td>20</td><td>18</td></tr>
<tr><td>Fabio</td><td>Neroni</td><td>27</td><td>30</td></tr>
</tbody>
</table>

</body>
</html>

L’unica attenzione che dobbiamo riporre nello scrivere il codice HTML della tabella è di racchiudere l’intestazione nel tag thead e il corpo nel tag tbody.
Al caricamento della pagina invochiamo tzebra passando i tre colori scelti, oppure volendo solo i primi due per gestire unicamente l’effetto zebrato.

Cliccando qui è possibile vedere in azione il plugin tzebra.

Cliccando qui è possibile scaricare il codice del plugin tzebra.

Il metodo remove() del framerwork jQuery permette di rimuovere un elemento html dal DOM della pagina.
Diversamente da tutti i metodi che modificando il css rendono “invisibile” un elemento, il metodo remove() elimina in maniera quasi del tutto definitiva l’elemento, rendendo nulli tutti i successivi riferimenti ad esso.
La sintassi, come è buona abitudine di jQuery, è molto semplice e grazie all’uso dei vari selettori disponibili le possibilità di utilizzo del metodo .remove() sono pressochè infinite.
Potremo ad esempio associare il metodo ad alcuni bottoni o link delle nostre pagine, permettendo agli utenti di “eliminare” i contenuti che non desiderano consultare. Pensiamo ad esempio ad una finestra in sovraimpressione che mostra al suo interno un banner: sarebbe elengante e cortese fornire un icona di chiusura che ne permetta la rimozione definitiva dalla pagina.

La sintassi di base del metodo .remove() è la seguente:

$('id_elemento').remove();

Tramite il selettore ID andremo a rimuovere l’elemento il cui id è uguale a “id_elemento“. Dopo l’esecuzione del semplice codice proposto, vedremo “scomparire”, in maniera quasi brutale, l’elemento dalla pagina web e nel DOM non ne resterà più traccia.
Vediamo ora qualche altro esempio utilizzando gli altri selettori disponibili:

// Selettore di classe
$('.nome_classe').remove();

// Selettore di tag
$('p').remove();

// Selettore di contenuto
$("p:contains('Ciao')").remove();

Negli esempi proposti, i vari selettori operano su più elementi (ad esempio tutti gli elementi appartenenti ad una determinata classe, tutti i blocchi di tipo <p> oppure tutti gli elementi di tipo <p> che contengono la parola ‘Ciao’), quindi invocando il metodo remove() elimineremo tutti questi elementi grazie ad una sola riga di codice.
Prima di concludere prendiamo in considerazione due aspetti del metodo remove():

• un elemento rimosso non può essere recuperato;
• la rimozione degli elementi tramite class comporta la rimozione di tutti gli elementi appartenenti a quella classe, indipendetemente dal tipo di elemento (DIV, SPAN, P, ecc);

Per porre, in parte, rimedio al primo caso possiamo memorizzare l’elemento (in una sorta di cache) prima che questo venga rimosso:

// Memorizzo l'elemento in una variaibile
var elemento = $('#id_elemento');

// Rimuovo l'elemento
$('#id_elemento').remove();

Il blocco nonostante sia stato eliminato dalla pagina web, è ancora presente in una variabile (var elemento), e può essere riutilizzato e volendo riposizionato all’interno del DOM, magari in un’altra posizione.
Per il secondo caso in analisi, invece, è necessario utilizzare il metodo remove() in maniera leggermente differente da come si è visto fino ad ora; possiamo così filtrare solo alcuni elementi da rimuovere che hanno una classe in comune, evitando la rimozione complessiva di tutti i blocchi:

// Rimozione solo dei div con classe 'nome_classe'
$('div').remove('.nome_classe');

Grazie alla riga di codice proposta, andremo ad eliminare gli elementi che hanno come nome classe “nome_classe” ma solo se di tipo DIV. Da notare, quindi la differenza con il codice proposto all’inizio dell’articolo, quando effettuavamo la rimozione di tutti gli elementi tramite selettore di classe.
Le funzioni viste sono state raccolte in una pagina web d’esempio.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

In un articolo precedente abbiamo visto le potenzialità e gli usi pratici del metodo .html() di jQuery.
Esiste però un metodo che per certi aspetti somiglia molto a quello appena citato, sia per funzionalità che per sintassi, il metodo .text().

Questo metodo ci permette di leggere e scrivere il contenuto di un elemento HTML che compone la pagina. A differenza però di .html(), il metodo .text() accede esclusivamente ai textNode, operando quindi solo sul testo e tralasciando i tag HTML.
Chiariamo questo concetto introducendo la sintassi del metodo .text():

$('#id_blocco').text();

Con questa linea di codice stiamo accedendo ai contenuti testuali dell’elemento identificato tramite id. Se ad esempio avessimo un DIV così definito:

<div id='my_div'>
    Questo è un blocco di esempio.<br/>
    Contiene un elenco:
    <ul>
        <li>Voce 1</li>
        <li>Voce 2</li>
    </ul>
</div>

richiamando il metodo text() sul div con la seguente sintassi:

var testo = $('#my_div').text();

avvaloreremo la variabile “testo” con la seguente stringa:

Questo è un blocco di esempio. Contiene un elenco: Voce 1 Voce 2

Ciò che è importante notare è che il metodo restituisce esclusivamente i nodi di testo. I tag HTML non vengono considerati testo e dell’elenco che abbiamo definito è stato restuito solo il testo, quindi il contenuto dei tag <li>.

Come detto ad inizio articolo, il metodo .text() può essere utilizzato anche per scrivere testo all’interno di un blocco HTML. La sintassi è semplice e del tutto simile a quella del metodo .html():

$('#id_blocco').text('Testo da inserire');

Il metodo accetta come parametro una stringa, la quale verrà scritta all’interno dell’elemento identificato tramite ID.
Una caratteristica importante da tenere in considerazione è che l’istruzione precedente, se richiamata su un elemento contenente a sua volta altri elementi HTML, sovrascrive tutto il contenuto, realizzando quindi un semplice nodo di testo.
E’ interessante notare, inoltre, cosa accade quando la stringa in input al metodo contiene codice HTML, in questo caso il codice non verrà interpretato, bensì verrà convertito in una semplice stringa di testo.

Infine vediamo tre funzioni parametrizzate che utilizzano il metodo .text():

// Funzione che restituisce il testo contenuto in un elemento
function GetText(id){
    var testo = $('#'+id).text();
    alert('Il testo contenuto è:\n\n'+testo);
}
// Funzione che scrive un testo in un elemento
function SetText(id,testo){
    $('#'+id).text(testo);
}
// Funzione che aggiunge testo ad un elemento
function AddText(id,new_testo){
    var testo = $('#'+id).text();
    $('#'+id).text(testo+new_testo);
}

Nonostante il metodo .text() possa risultare meno utile del metodo .html(), offre molteplici spunti progettuali.
Le funzioni viste sono state raccolte in una pagina web d’esempio.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Il metodo .html() del framework jQuery permette di immettere in maniera dinamica codice html  in un elemento esistente della pagina, inoltre il metodo è utilizzabile anche per leggere e prelevare il contenuto html di un elemento.

La duplice funzione che svolge ne fa un ottimo alleato in tutti quei casi in cui lo sviluppatore ha necessità di modificare “a volo” la pagina web, in relazione ad esempio ad un azione dell’utente o ad una chiamata Ajax.

In questo articolo analizzeremo l’utilizzo del metodo html() nei seguenti casi:

• prelevare il contenuto di un elemento della pagina;
• sovrascrivere il contenuto di un elemento della pagina;
• aggiungere contenuti ad un elemento della pagina;
• modifica di elementi da chiamata Ajax;
• modifica contemporanea del contenuto di più elementi.

Vediamo subito la sintassi base del metodo html():

$('#id_blocco').html();

Con questa semplice linea di codice stiamo accedendo, tramite ID, al contenuto di un blocco HTML. Possiamo, partendo da questa istruzione base, creare una funzione parametrizzata che restituisce a video il codice HTML contenuto in un elemento:

function GetHtml(id){
    var codice = $('#'+id).html();
    alert('Il codice HTML è:\n\n'+codice);
}

La funzione GetHtml(id) stampa, tramite un alert, il codice HTML prelevato tramite il metodo .html(). Possiamo pensare di personalizzare questa funzione per rendere le nostre pagine più dinamiche e le possibilità sono svariate.
Ma, come detto in fase di introduzione all’articolo, il metodo .html() permette anche di modificare il contenuto di un elemento della pagina. La sintassi è molto semplice, basta aggiungere un parametro in input al metodo:

$('#id_blocco').html(new_codice);

La varibile “new_codice” conterrà il nuovo codice HTML da applicare all’elemento selezionato tramite ID. In alternativa è possibile accodare il codice della variabile “new_codice” a quello esistente, senza quindi sovrascrivvere quello esistente:

var codice_attuale = $('#id_blocco').html();
$('#id_blocco').html(codice_attuale+new_codice);

Possiamo racchiudere queste linee di codice in una funzione che chiameremo AddHtml, la quale opportunamente parametrizzata permetta di aggiungere contenuti ad un elemento della pagina. La funzione può tornare molto utile in tutti quei casi in cui lo sviluppatore ha necessità di “completare” la pagina in step successivi:

function AddHtml(id,codice_html){
    var codice_attuale = $('#'+id).html();
    $('#'+id).html(codice_attuale+codice_html);
}

Per migliorare la funzione precedente è necessario introdurre Ajax (leggi articolo Ajax con jQuery). Il nuovo codice HTML sarà generato da uno script lato server, opportunamente richiamato:

function SetHtmlAjax(id){
    $.ajax({
     type: "GET",
     dataType: "html",
     cache: false,
     url: "data.php",
     data: "",
     success: function(msg){
        $('#'+id).html(msg);
     }
     });
}

La funzione, una volta invocata, effettua una chiamata Ajax ad uno script (nel nostro esempio data.php) che dopo opportune elaborazioni genera ed invia al client una porzione di codice HTML. Sarà compito del metodo .html() di jQuery sovrascrivere il contenuto del blocco identificato tramite ID. Eventualmente è possibile modificare la funzione in modo tale che aggiunga il codice invece di sovrascriverlo.

Infine vediamo come il metodo .html() risulti utile e immediato per aggiornare il contenuto di più elementi contemporaneamente:

$('div').html('Nuovo contenuto');

$('h1').html('Nuovo titolo');

Possiamo modificare il contenuto di tutti i blocchi di tipo DIV oppure i titoli di livello H1 e così via.
Le funzioni viste sono state raccolte in una pagina web d’esempio.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Il metodo val() è indubbiamente uno degli strumenti più utili ed efficienti che il framework jQuery mette a disposizione di tutti gli sviluppatori web.
Quante volte ci siam trovati dinnanzi all’esigenza di controllare i campi di un form html, con la necessità di dover accedere al contenuto di campi di testo, select, radio button, checkbox, focalizzando l’attenzione sulla sintassi e le metodologie da adottare.

Il metodo .val() permette di accedere al contenuto di tutti gli elementi che caratterizzano un form. Le sue potenzialità non finiscono qui, infatti è inoltre possibile impostare il valore che ogni elemento deve assumere. Tutto con un solo metodo.
In questo articolo mostreremo:

• come leggere il valore di un campo di testo;
• come scrivere nei campi di testo;
• come leggere la voce selezionata in una select;
• come impostare una voce di una select;
• come verificare il check di un set di radio button;
• come impostare il check di un set di radio button;
• come verificare il check di una checkbox;
• come impostare il check di una checkbox;

Vediamo innanzitutto la sintassi di base del metodo .val():

// Se accediamo ad un campo tramite ID
$("#id_campo").val();

// Se accediamo ad un campo tramite type-name
$("input[type=text][name=nome_campo]").val();

Con queste prime due linee di codice introduciamo il metodo val in modalità lettura (get). La prima accede al campo di testo tramite ID, il secondo invece tramite la coppia type – name. Scrivendo quindi il seguente codice:

var contenuto = $("#id_campo").val();

avvaloriamo la variabile contenuto con il contenuto del campo “id_campo“.
Supponiamo invece di voler impostare un valore ad un campo di testo, utilizzando il metodo .val() in modalità scrittura (set):

// Se accediamo ad un campo tramite ID
$("#id_campo").val("Nuovo contenuto!");

// Se accediamo ad un campo tramite type-name
$("input[type=text][name=nome_campo]").val("Nuovo contenuto!");

La sintassi resta invariata rispetto alla modalità lettura, logicamente il metodo val accetta in ingresso la stringa da impostare nel campo di testo.

Vediamo adesso come accedere ad una select html.
Chi conosce bene Javascript sa che non è immediato il controllo di una select, è necessario individuare la select, quindi individuare la voce selezionata tramite indice e finalmente accedere al valore. Più complesso è selezionare una voce in maniera dinamica.
Con il metodo val() tutto si riduce a ciò:

// Se accediamo ad una select tramite ID
var valore = $('#id_select').val();

// Se accediamo ad una select tramite name
var valore = $("select[name=nome_campo]").val();

Selezionare una voce della select è altrettanto immediato:

// Se accediamo alla select tramite ID
$("@id_select").val(new_valore);

// Se accediamo alla select tramite name
$("select[name=nome_campo]").val(new_valore);

L’unica considerazione a riguardo è che il contenuto della variabile “new_valore” deve essere, logicamente, una voce presente in select.

Passiamo ora ai radio button.
Anche in questo caso il metodo val() ci aiuta a verificare quale radio button del gruppo è selezionato e ad effettuare il check dinamico di uno di essi.

// Accediamo al radio button tramite la coppia type - name
var valore = $("input[type=radio][name=nome_campo]:checked").val();

// Immpostiamo il check di un radio button
$("input[type=radio][name=nome_campo]").val([new_valore]);

In fase di lettura, la variabile “valore” conterrà il value del radio button selezionato; qualora nessuno sia selezionato il risultato sarà “null“.
Per impostare il check di un radio button è necessario prestare un pò di attenzione al parametro del metodo val(), “new_valore” si riferisce al value di uno dei radio button del gruppo, racchiuso tra parentesi quadre ,val([new_valore]).

Infine accediamo agli elementi di tipo checkbox.

// Se accediamo al checkbox tramite ID
var valore = $("#id_checkbox:checked").val();

// Se accediamo al checkbox tramite coppia type - name
var valore = $("input[type=checkbox][name=nome_campo]:checked").val();

La variabile “valore” conterrà il value del checkbox se questo è selezionato, altrimenti “null“.
Per effettuare il check invece:

// Se accediamo al checkbox tramite ID
$("#id_checkbox").val([new_valore]);

// Se accediamo al checkbox tramite coppia type - name
$("input[type=checkbox][name=nome_campo]").val([new_valore]);

Come per i radio button, anche il checkbox prevede come “new_valore” il value del checkbox racchiuso tra parentesi quadre.

Per dimostrare le capacità del metodo .val() di jQuery ho racchiuso il codice presentato in alcune funzioni parametrizzate e richiamate su un form di esempio.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

In un articolo precedente abbiamo analizzato uno script Javascript che ci permetteva di inserire righe in maniera dinamica in una tabella html preesistente.
In questo nuovo articolo realizzeremo alcune funzioni che ci aiuteranno a ricercare un valore o una stringa all’interno di una tabella.
Utilizzando il DOM, accederemo alle singole celle che compongono la tabella e qualora il contenuto sia uguale al valore cercato evidenzieremo la cella con un colore differente.
Ad esempio può risultare molto utile, in presenza di grandi tabelle contenenti dati di varia natura, fornire all’utente un form tramite il quale effettuare ricerche su tutti i dati o in alternativa su una singola colonna.

Realizzeremo quindi tre funzioni:
- Cercare un valore in tabella (ricercaInTable)
- Cercare un valore in una singola colonna della tabella (ricercaInCol)
- Ripristinare lo stato iniziale della tabella (ripristinaTable)

In fondo all’articolo è possibile provare o scaricare il codice completo.

Vediamo subito il codice Javascript:

// FUNZIONE PER RICERCA IN TABELLA
function ricercaInTable(id_table){
     ripristinaTable(id_table);
     var valore = document.ricerca.campo.value;
     var table = document.getElementById(id_table);
     var celle = table.getElementsByTagName('td');
     var contatore = 0;
     for(var j=0; j<celle.length; j++){
          if(celle[j].innerHTML==valore){
               celle[j].className='trovato';
               contatore++;
          }
     }
     document.getElementById('responso').innerHTML='Trovati: '+contatore;
}

// FUNZIONE PER RICERCA IN SINGOLA COLONNA DI TABELLA
function ricercaInCol(id_table,colonna){
     ripristinaTable(id_table);
     var valore = document.ricerca.campo.value;
     var table = document.getElementById(id_table);
     var n_colonne = table.getElementsByTagName('th').length;
     var celle = table.getElementsByTagName('td');
     var contatore = 0;
     for(var j=(colonna-1); j<celle.length; j=(j+n_colonne)){
          if(celle[j].innerHTML==valore){
               celle[j].className='trovato';
	  contatore++;
          }
     }
     document.getElementById('responso').innerHTML='Trovati: '+contatore;
}

// FUNZIONE CHE RIPRISTINA LO STILE INIZIALE DELLA TABELLA
function ripristinaTable(id_table){
     var table = document.getElementById(id_table);
     var celle = table.getElementsByTagName('td');
     for(var j=0; j<celle.length; j++){
          celle[j].className='default';
     }
     document.getElementById('responso').innerHTML='';
}

Innanzitutto chiariamo alcuni concetti che ci aiutino a comprendere il codice:
- La tabella ha uno stile di defaul tramite CSS
- Un ciclo for ci permette di ciclare su tutte le celle <td> della tabella
- Il valore contenuto nella cella viene confrontato con quello ricercato
- Quando un valore viene trovato la cella corrispondete cambia il suo stile

La funzione ricercaInTable acquisisce come parametro un id tabella.
Innanzitutto preleviamo da un form html il testo da ricercare:
var valore = document.ricerca.campo.value;
Dopo aver identificato la tabella, otteniamo l’array contenente tutti gli elementi con nome tag <td>:
var celle = table.getElementsByTagName(‘td’);
Ciclando su questo array verifichiamo il contenuto della cella:
if(celle[j].innerHTML==valore){…
Se la condizione è verificata allora cambia lo stile della cella:
celle[j].className=’trovato’;

La funzione che permette la ricerca su una singola colonna prenderà come parametro un valore numerico per identificare la colonna da esaminare.
Se ad esempio volessimo cercare un valore nella terza colonna della tabella id_table:

ricercaInCol('id_table',3);

La funzione ricercaInCol opera come la funzione ricercaInTable con l’unica differenza che esamina solo le celle che (tramite opportuno incremento dell’indice) ricadono nella colonna in esame.
Infine la funzione ripristinaTable ha il compito di riportare la tabella allo stile iniziale prima di effettuare una nuova ricerca.

Vediamo ora il codice CSS utilizzato:

th.intestazione{
     background-color:#0000FF;
     color:#FFFFFF;
     font-weight:bold;
     padding:3px;
}

td.default{
     background-color:#7FFFD4;
}

td.trovato{
     background-color:#FF0000;
     font-weight:bold;
}

Il td.default è utilizzato per tutte le celle della tabella mentre td.trovato è lo stile applicato solo alle celle il cui valore corrisponde con quello ricercato.

Infine è necessario logicamente realizzare una tabella html e richiamare le funzioni tramite un form.

Il codice proposto è da intendersi esclusivamente come la base per realizzare una ricerca in una tabella html. Le metodologie di ricerca e gli stili sono perfezionabili.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Dopo aver visto una finestra con news a comparsa, implementeremo ora una barra orizzontale contenente news scorrevoli da destra verso sinistra (un cosiddetto news ticker) .
In questo caso è preferibile che il testo di ogni news sia composto esclusivamente dal titolo, il quale rimandi poi, tramite link, al testo completo.
In fondo all’articolo è possibile provare e scaricare il codice completo.

Per realizzare il box e l’effetto desiderato utilizzeremo jQuery e il plugin denominato liScroll che trasforma qualsiasi elenco in un news ticker a scorrimento.

A tal proposito vediamo il codice html:

<ul id="news">
     <li><span>News 1</span>
          <a href="#">Quel ramo del lago di Como ...</a>
     </li>
     <li><span>News 2</span>
          <a href="#">Si racconta che il principe di ...</a>
     </li>
     <li><span>News 3</span>
          <a href="#">Lucia entrò nella stanza ...</a>
     </li>
     <li><span>News 4</span>
          <a href="#">Il sole non era ancor tutto ...</a>
     </li>
     <li><span>News 5</span>
          <a href="#">Da i Promessi Sposi ...</a>
     </li>
</ul>

Grazie alle potenzialità di questo plugin il codice html si riduce ad un semplice elenco non ordinato. La regola generale è che: ogni voce dell’elenco è una news.
Per far si che sia possibile animare il news ticker è necessario assegnare un id all’elemento <ul>.
Prima di poter animare le news dobbiamo richiamare jQuery e il plugin. All’interno dell’head scriveremo:

<script type='text/javascript' src='jquery-1.4.3.min.js'></script>
<script type='text/javascript' src='jquery.li-scroller.1.0.js'></script>

Il codice Javascript per dare il via allo scorrere delle news è il seguente (si ricorda che va definito dopo il codice html dell’elenco o richiamato al completo caricamento della pagina):

<script type='text/javascript'>
     $("ul#news").liScroll({travelocity: 0.06});
</script>

Il metodo da invocare sull’elenco è liScroll a cui è possibile passare come parametro un valore che esprima la velocità di scorrimento del testo.
Il codice completo fornisce infine un file css modificabile per ottenere lo stile desiderato.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Sito ufficiale del plugin liScroll: http://www.gcmingati.net/