Oltre che inviare dati in forma testuale, in base a scelte o stringhe digitate, spesso sorge l’esigenza di inviare dei file al server.
Immaginiamo ad esempio a quei siti che ci permettono di caricare le nostre foto preferite per farle visualizzare ai nostri amici, fornendo solitamente un modulo nel quale ci viene chiesto di scegliere il file (in questo caso l’immagine) dal nostro hard disk.
Il campo in questione prende il nome di file e la sintassi è la seguente:

<input type="file" name="..." />

Vediamo il codice completo:

<form action="pagin.php" method="GET" name="form">
Scegli il file da inviare:
    <input type="file" name="file" />
    <input type="submit" value="Conferma" />
</form>

Il browser visualizzerà a video un bottone con etichetta ‘Sfoglia…‘ e un campo di testo inizialmente vuoto che servirà a contenere il path del file prescelto. Cliccando sul bottone, si aprirà una finestra di dialogo per facilitare la selezione del file:

Un attributo utile del campo file è accept, che permette di specificare il tipo di file che è possibile caricare tramite il modulo.
L’attributo accept è così utilizzato qualora si vogliano caricare esclusivamente immagini in formato jpeg:

<input type="file" name="file" accept="image/jpeg" />

Altrimenti avremmo anche potuto accettare qualsiasi file di tipo immagine, indipendentemente dal formato:

<input type="file" name="file" accept="image/*" />

I campi nascosti

A volte è utile e necessario passare dei parametri di servizio, che non siano visibili all’utente, tra un form e il programma che elaborerà i dati.
Immaginiamo ad esempio ad un campo che contiene un ID che identifica l’utente che ha compilato il modulo, oppure un campo che contiene l’ora di apertura del modulo o semplicemente dati necessari all’elaborazione lato server.
A tale scopo sono utili i campi di tipo hidden (nascosto). La sintassi è molto semplice:

<input type="hidden" name="..." value="..." />

Il value conterrà il valore, che può essere una stringa, numero o altro, associato alla variabile nascosta. Ad esempio scrivendo come segue, si istanzia un campo nascosto che contiene la data odierna:

<input type="hidden" name="data" value="30-09-2010" />

In alternativa alle select multiple, è possibile utilizzare le checkbox per effettuare scelte multiple.
Una checkbox è da intendersi come un elenco di scelte ognuna contraddistinta da un box, ogni box spuntato equivale alla scelta della voce associata. In altre parole ogni casella di controllo (box) se spuntata indica si altrimenti no.
La sintassi per definire una checkbox è:

<input type="checkbox" name="..." value="..." />

Nonostante spesso le checkbox si presentino in gruppo è necessario assegnare ad ognuna un name diverso, sarà compito del programmatore lato server verificare tramite opportuno codice quale checkbox è stata selezionata.
Se la chekbox è selezionata, il value ad esso associato sarà passato al programma che gestirà la form. In caso contrario, se il box non è selezionato, il value non verrà passato.
Vediamo quindi il codice html per realizzare un elenco di chekbox:

</pre>
<form action="pagin.php" method="GET" name="form">
    Scegli i tuoi frutti preferiti:
    <input type="checkbox" name="mela" value="M" /> Mela
    <input type="checkbox" name="pera" value="P" /> Pera
    <input type="checkbox" name="banana" value="B" /> Banana
    <input type="checkbox" name="uva" value="U" /> Uva
    <input type="checkbox" name="arancia" value="A" /> Arancia
    <input type="submit" value="Conferma" />
</form>

Ad ogni checkbox abbiamo associato un name diverso ed un value indicativo che contiene l’iniziale del frutto.

Selezionare valori di default

Così come per la select, anche per un checkbox è possibile impostare di default la selezione. Scrivendo ad esempio:

<input type="checkbox" name="mela" value="M" checked="checked" />

si ottiene un chekbox spuntato. Inoltre cliccando su un box spuntato si otterrà la pulitura del box stesso.

Effettuare scelte esclusive

Qualora lo sviluppatore intenda invece fornire la possibilità di una singola scelta tra una serie di opzioni, è consigliabile l’uso dei rabio button. In questo caso quindi una scelta esclude l’altra, a condizione che i radio button abbiano lo stesso name ma valori diversi.
Il browser visualizza questi elementi come dei bottoni circolari, da ciò il nome radio button. La sintassi è la seguente:

<input type="radio" name="..." value="..." />

Il type è impostato alla parola chiave ‘radio‘ e il name sarà uguale al name degli altri radio button qualora questi appartengano ad una stessa lista.
Vediamo quindi il codice html completo per una lista radio button:

</pre>
<form action="pagin.php" method="GET" name="form">
    Scegli i tuoi frutti preferiti:
    <input type="radio" name="frutto" value="Mela" /> Mela
    <input type="radio" name="frutto" value="Pera" /> Pera
    <input type="radio" name="frutto" value="Banana" /> Banana
    <input type="radio" name="frutto" value="Uva" /> Uva
    <input type="radio" name="frutto" value="Arancia" /> Arancia
    <input type="submit" value="Conferma" />
</form>

Il risultato nella finestra del browser è il seguente:

E’ interessante notare come la selezione di un radio button della lista influisca su un’eventuale scelta precedente. Difatti come detto, i radio button prevedono una singola scelta così come le select viste precedentemente.

<select name='…'>
<option value='…'> … </option>
<option value='…'>…</option>
…
</select>

Come per gli altri campi di un form, anche la select necessita di un name per essere poi gestita correttamente dai linguaggi di programmazione.
All’interno della select sono presenti le varie opzioni che compariranno nel menu, e per ognuna di esse è necessario impostare un valore (value). Nel momento in cui l’utente seleziona una voce dal menu, il valore ad esso associato sarà passato al programma lato server.
Vediamo quindi un esempio completo:

<form name='form' action='pagin.php' method='GET'>
	Scegli il tuo frutto preferito:
	<select name='frutto'>
		<option value='A'>Mela</option>
		<option value='B'>Pera</option>
		<option value='C'>Banana</option>
		<option value='D'>Arancia</option>
	</select>
	<input type='submit' value='Conferma'>
</form>

Nel codice html proposto abbiamo definito una select con name ‘frutto’. All’interno quattro possibili scelte, ognuna contenente come testo il nome di un frutto e come valore una lettera dell’alfabeto.
In alternativa avremmo potuto scegliere come valore per ogni singola voce, un numero, oppure una stringa o semplicemente l’etichetta stessa della voce nel menu.

Attributi di una select

E’ possibile, tramite l’attributo size, specificare quanti elementi del menu visualizzare.
In altre parole il numero di righe che la select deve occupare all’interno della pagina html.
Scrivere ad esempio:

<select name='frutto' size=‘3’>
...
</select>

fa si che il menu visto in precedenza mostri inizialmente le prime tre voci, quindi poi tramite lo scroll laterale sarà possibile visualizzarne i successivi.

Tramite l’attributo selected, applicato ad uno degli option della select, si può definire a priori una scelta del menu come predefinita. In assenza di tale attributo, la select seleziona di default (lato html) la prima voce in menu.
Per impostare una voce in menu come scelta di default è necessario scrivere:

<option value='B' selected=‘selected’>Pera</option>

Nonostante la select nasca per effettuare una singola scelta tra un numero di voci in elenco, è possibile permettere all’utente di selezionare più opzioni.
Utilizzando l’attributo multiple all’interno del tag select è possibile forzare una select ad accettare più di una voce da parte dell’utente. Di conseguenza ciò influisce anche sull’aspetto grafico di una select e sul modo in cui è possibile interagire con essa.
Vediamo il seguente codice html:

<form name='form' action='pagin.php' method='GET'>
	Scegli i tuoi frutti preferiti:
	<select name='frutto' multiple='multiple'>
		<option value='A'>Mela</option>
		<option value='B'>Pera</option>
		<option value='C'>Banana</option>
		<option value='D'>Arancia</option>
		 <option value='E'>Uva</option>
	</select>
	<input type='submit' value='Conferma'>
</form>

All’interno del tag select troviamo l’attributo multiple=‘multiple’, di seguito le singole voci che compongono il menu.
L’utente per selezionare più voci dovrà tenere premuto il tasto ctrl e cliccare con il tasto sinistro del mouse sulle singole etichette per aggiungerle alla selezione.
Questo tipo di select sarà così visualizzata all’interno del browser:

Raggruppamento di scelte

Siccome spesso i menu di scelta tendono a diventare particolarmente lunghi, dalla versione 4 dell’HTML si è introdotto il tag optgroup che consente di suddividere le varie possibilità di scelta in gruppi tramite l’utilizzo di apposite etichette (label).
La sintassi è molto semplice:

<optgroup label=“Testo etichetta gruppo">

All’interno del contenitore optgroup vanno elencate le option che formano il gruppo e a sua volta ogni gruppo sarà elencato nella select.
Per comprenderne a pieno l’utilizzo, segue un esempio:

<form name='form' action='pagin.php' method='GET'>
	Scegli il tuo frutto preferito:
	<select name='frutto'>
		<optgroup label='Frutti classici'>
			<option value='A'>Mela</option>
			<option value='B'>Pera</option>
			<option value='C'>Banana</option>
		</optgroup>
		<optgroup label='Frutti di stagione'>
			<option value='D'>Arancia</option>
			<option value='E'>Uva</option>
			<option value='F'>Fragola</option>
		</optgroup>
	</select>
</form>

Il browser visualizzerà la select suddivisa in due gruppi, il primo con etichetta “Frutti classici” e il secondo con etichetta “Frutti di stagione“. Il funzionamento della select non muta e gli attributi precedentemente visti sono combinabili tra loro anche in una select con raggruppamento.

Oltre ai classici campi di testo visti negli articoli precedenti, è possibile instanziare un campo che sostituisca ad ogni carattere un asterisco (*) o altro simbolo grafico, in modo tale da rendere non leggibile il testo immesso.
Solitamente tali campi sono utilizzati per inserire password o parole chiave, soprattutto in presenza di moduli di login. Questi campi hanno l’attributo type impostato appunto su password.
La sintassi è la seguente:

<input type="password" name="pass" />

L’utente immettendo il testo all’interno del campo visualizzerà un * per ogni carattere che compone la stringa:

Campo di testo su più righe

I campi di testo permettono l’inserimento di piccole quantità di dati, ad esempio un nome, un cognome, un indirizzo oppure un numero.
Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una “textarea” (area di testo).
In fase di inizializzazione di una textarea è possibile impostare il numero di righe e di colonne che si desidera fornire, la sintassi è la seguente:

<textarea rows='5' cols='20'  name='areatesto'> </textarea>

La sintassi risulta differente al cospetto dei classici campi input; infatti il tag da utilizzare è <textarea> ed è inoltre previsto il rispettivo tag di chiusura.

Per inserire un testo di default all’interno di una textarea è sufficiente scrivere all’interno del tag <textarea>, in questo modo:

<textarea rows='5' cols='20' name='areatesto'>
Questo è un testo di default…
</textarea>

Utilizzeremo innanzitutto tre gestori di eventi: mouseover(quando il puntatore del mouse entra sull’elemento), mousemove(quando il puntatore si muove sull’elemento) e mouseout(quando il puntatore esce dall’elemento).

Come si potrà immaginare vorremmo che all’ingresso sull’elemento (mouseover) venga mostrato a video un box contenete il testo presente all’interno dell’attributo title; il box dovrà seguire il movimento del cursore(mousemove) e scomparire quando lo stesso esce dall’area dell’elemento(mouseout).
Applicheremo al box un effetto trasparenza, e lasceremo all’utente la scelta del colore di sfondo, del testo, della grandezza del font e delle proprietà del bordo in fase di configurazione del plugin.

Vediamo subito il codice completo del plugin toolTitle

/**
  * @author Fabio Donatantonio
  * www.donatantonio.net
  * 2011
  */
/**
  * tooltitle -> Tooltip jQuery
  */

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

	var defaults = {
		textColor: '#fff',
		textSize: '12px',
		backgroundColor: '#000000',
		border: '1px solid #DDDDDD',
		padding: '3px',
		transparency: '0.8'
	};

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

	return this.each(function() {
		var tit = $(this).attr('title');
		if(tit=='' || tit==undefined || tit==null){
			tit = "Nessuna descrizione";
		}
                $(this).data('title',tit).removeAttr('title');

		$(this).mouseover(function(e){
			$('body').append('</pre>
<div class="tooltip">'+$(this).data('title')+'</div>
<pre>
');

			$('.tooltip').css('position', 'absolute')
			.css('z-index', '9999')
			.css('backgroundColor', options.backgroundColor)
			.css('color', options.textColor)
			.css('fontSize', options.textSize)
			.css('border', options.border)
			.css('padding', options.padding);

			$('.tooltip').css('top', e.pageY + 5 )
			.css('left', e.pageX + 10 );

			$('.tooltip').fadeTo('10',options.transparency);
			e.stopPropagation();
		}).mouseout(function(){
			$('.tooltip').fadeOut('100').remove();
		}).mousemove(function(e){
			$('.tooltip').css('top', e.pageY + 5)
			.css('left', e.pageX + 10 );
		});
	});

	return false;
	};
})(jQuery);

Immaginiamo ora di voler applicare toolTitle ad un link:

<a class="myLink" title="Vai al link!" href="#">Clicca qui</a>

per richiamare il plugin sull’elemento scriveremo:

$('.myLink').tooltitle({
		textColor: '#DDDDDD',
		textSize: '15px',
		backgroundColor: '#0000FF',
		border: '1px solid #CCCCCC',
		padding: '4px',
		transparency: '0.8'
});

Il plugin accetta come parametri:

• Colore del testo
• Grandezza del font
• Colore di sfondo del toolTitle
• Lo stile per il bordo del toolTitle
• Il padding
• Il grado di trasparenza (da 0 a 1)

In alternativa potremo invocare toolTitle senza parametri, sfruttando le impostazioni di default:

$('.myLink').tooltitle();

Per far si che il plugin funzioni in maniera corretta è necessario, logicamente, impostare l’attributo title nell’html per l’elemento che vogliamo animare.
E’ possibile, inoltre, associare il plugin a qualsiasi elemento html.
Se volessimo, infine, scrivere il contenuto del toolTitle su più righe basta utilizzare il tag <BR/> all’interno del tag title.

Il plugin non necessita di fogli di stile.

Cliccando qui è possibile vedere in azione il plugin toolTitle.

Cliccando qui è possibile scaricare il codice del plugin toolTitle.

“Buonasera Professore,
l’aspettavamo… come è andato il viaggio?”
…
“Per lei la solita stanza…prego, la chiave…”

Mi siedo, accendo il televisore e subito dopo una sigaretta…
che caldo che fa e pensare che siamo a marzo.
Dovrei cambiarmi…
fare un barba veloce e poi correre a chiamare un taxi…
so già che stanotte dormirò poco,
il mal di testa avanza e un panino in treno non può farmi che male.

Rifletto…
non sono a casa mia…
non sono nel luogo dove ho lavoro, amici, supermercato di fiducia…
bollette, spese… casa…
Non sono neanche nella mia città di nascita…
dove ho consumato adolescenza e amori,
dove ho lasciato un pezzo di cuore…
Sono invece qui, tra quattro mura…
un letto, una tv e un balcone dal quale si può scorgere il mare,
in una città il cui dialetto non mi appartiene,
dove ogni strada e persona è per me sconociuta.
… ma perchè anche qui ho qualcosa che mi trattiene, che fa si che io ritorni?…
Cos’è realmente ciò che definiamo “casa“?
Non è un semplice luogo… un puntino perso per il mondo…
non è dove si vive e si respira.
Sentirsi a casa è quando sai che tutto intorno ti può emozionare,
il saluto di qualcuno, un abbraccio,
il sole del primo mattino…
il vento che senza avvertirti ti accarezza la pelle.
Sentirsi a casa è dove sai di trovare persone che stimi e vuoi bene,
dove puoi sentirti libero, anche solo per un giorno…
dove il cuore può battere più forte perchè alimentato da un amore.
Questo per me è il concetto di casa…

Devo alzarmi ora…
no…
no, questa non può essere casa mia,
non può esserlo una stanza d’albergo.
La barba, un pò di profumo…
la cravatta e la camicia pulita…
Accendo un’altra sigaretta,
alzo la cornetta del telefono: “Signorina può chiamarmi un taxi? Grazie”

Solo un attimo,
qualcuno bussa alla porta…
eccoti,
non ti aspettavo ora,
il tuo profumo in un attimo pervade la stanza…
un bacio… un abbraccio…
il balcone che all’improvviso si apre…
una brezza di vento mi accarezza…
il cuore inizia a battere più forte…
un’emozione…

Mi stringi la mano, e sorridendo dici:
“E’ tanto che ti attendevo…
Bentornato a casa…”

Fabio Donatantonio

number_format(valore,decimali,separatore_decimali,separatore_migliaia)

se ad esempio volessimo formattare il numero “1250.784″ impostando 2 cifre decimali, la virgola come separatore dei decimali e il punto per le migliaia, invocheremo la funzione nel seguente modo:

number_format(1250.784,2,',','.');

// ottenendo come output 1.250,78

Vediamo subito il codice della funzione number_format. Ricordo che in fondo all’articolo sono presenti i link per provare il codice e scaricarlo.

function toFixedFix(n, precisione) {
    // Funzione per arrotondare valore
    var k = Math.pow(10, precisione);
    return '' + Math.round(n * k) / k;
}

function number_format(numero, decimali, dec_separatore, mig_separatore){
    // Elimino i caratteri che non sono numeri (lascio il segno meno e il punto)
    numero = (numero).replace(/[^0-9\.\-]?/gi,"");
    // Controllo se valore numerico
    var n = 0;
    if(isFinite(+numero)){
        n=numero;
    }
    // Controllo se i decimali sono accettabili
    var precisione = 0;
    if(isFinite(+decimali) && decimali>-1){
        precisione = decimali;
    }
    // Recupero caratteri separatori
    var separatore = '.';
    if(typeof mig_separatore != 'undefined'){
        separatore = mig_separatore;
    }
    var dec = ',';
    if(typeof dec_separatore != 'undefined'){
        var dec = dec_separatore;
    }

    // Arrotondo il valore se necessario - Utilizzo funzione toFixedFix
    var s = '';
    if(precisione!=0){
        s = toFixedFix(n, precisione);
    }else{
        s = '' + Math.round(n);
    }
    // Taglio il valore in parte intera e parte decimale
    s = s.split('.');
    // Aggiungo il separatore delle migliaia - ogni 3 numeri sulla parte intera
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, separatore);
    }
    // Formatto la parte decimale - aggiungo degli 0 se necessari
    if ((s[1] || '').length < precisione) {
        s[1] = s[1] || '';
        s[1] += new Array(precisione - s[1].length + 1).join('0');
    }
    // Aggiungo parte decimale a parte intera - separati da separatore decimali
    return s.join(dec);
}

Il codice non è difficile da comprendere ed è grossomodo commentato. Vediamo però i passi fondamentali che esso compie:

1. Definisco una semplice funzione “toFixedFix” di supporto che arrotonda/tronca in maniera opportuna un valore numerico.
2. All’inizio della funzione number_format pulisco innanzitutto il valore da formattare.
3. Effettuo alcuni semplici controlli: se il valore da formattare e il numero di cifre decimali sono numerici.
4. Chiamo la funzione toFixedFix per arrotondare/troncare il valore.
5. Taglio il valore (ora parzialmente formattato) in parte intera e parte decimale.
6. Aggiungo il separatore delle migliaia (ogni 3 cifre) alla parte intera.
7. Formatto la parte decimale aggiungendo degli zeri se necesssario.
8. Concateno la parte intera con quella decimale.

A parte l’utilizzo della funzione toFixedFix, creata per l’occasione, nel codice utilizziamo alcune funzioni base del linguaggio, tra cui:
replace(…) per sostituire i caratteri non accettabili
isFinite(numero) per controllare se il valore è numerico
split(.) per tagliare il numero in parte intera e parte decimale
join() per unire parte decimale a parte intera

Logicamente, come è mio solito sottolineare, questa è solo una delle possibile soluzione della funzione number_format.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

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.

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.

• 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.

<input type="submit" value="Invia i dati" />

L’attributo type è avvalorato a submit e l’attributo value specifica un’etichetta per il bottone.
Al click del bottone di tipo submit, i dati del form vengono organizzati tramite il metodo di invio (attributo method) e quindi inviati alla pagina che li processerà (attributo action).

In alternativa all’invio dei dati, l’utente potrebbe decidere di annullare ciò che ha immesso nel modulo e riportare quindi il form stesso allo stato iniziale.
Per far ciò è necessario fornire un ulteriore bottone, questa volta di tipo reset che al click andrà a pulire in automatico ogni singolo campo del form:

<input type='reset' value='Pulisci form'/>

E’ utile posizionare questo bottone sul fondo della form, in concomitanza del bottone di submit. Il vantaggio è di fornire agli utenti un modo veloce ed efficiente per pulire i campi senza che questi debba cancellare a mano ogni singolo contenuto.

Bottoni di uso generale

Oltre i bottoni di submit e reset è possibile implementare ulteriori bottoni ai quali associare particolari funzioni definite dal programmatore.
La sintassi è la seguente:

<input type='button' value='Bottone' onClick='funzione()'/>

Il type è necessariamente impostato a button. Inoltre va definita la funzione da richiamare ad un particolare evento, in questo caso al clic del pulsante.
La parola chiave onClick rientra nella famiglia dei cosiddetti gestori di eventi dei quali sarà approfondito il significato nelle lezioni su Javascript.

Il tag BUTTON

Con l’HTML 4 è stato introdotto il tag button che offre la possibilità di creare dei bottoni con un aspetto particolarmente ricco.
Il tag button, a differenza del tag input, dà la possibilità di inserire il testo del bottone tra l’apertura e la chiusura del tag medesimo. Questo ci consente di specificare anche del codice html all’interno del tag, o addirittura delle immagini o oggetti.
Analizziamo il codice html sottostante:

<button>
	<img src='img/esclamativo.jpg' alt='Invia' border='1'  align='middle'>
	Invia i dati
</button>

All’interno del bottone verrà visualizzata un’immagine e quindi un testo. Niente ci avrebbe vietato l’aggiunta di ulteriore testo o immagini al contenuto del bottone.

Disabilitare un bottone

Grazie all’attributo disable, infine, è possibile disabilitare un bottone in modo tale che questo non sia cliccabile.
Inoltre il browser visualizzerà tale bottone nella pagina con uno stile a basso rilievo ad intendere che il pulsante non è abilitato. La sintassi è la seguente:

<input type='submit' value='Invia i dati' disabled />

Il bottone sarà così visibile:

Ogni modulo html è definito innanzitutto da un tag di apertura e da uno di chiusura:

<form … >
     …
</form>

All’interno di questo contenitore vanno quindi definiti il testo e gli elementi che compongono il form.
Solitamente l’invio dei dati è organizzato in due parti:

• una pagina iniziale che contiene il modulo che consente all’utente di effettuare scelte e immettere testo
• una pagina secondaria che viene richiamata dal modulo ed ha lo scopo di processare i dati ricevuti. Solitamente trattandosi di una pagina di programmazione che risiede sul server e può essere in CGI, ASP, PHP, JSP o altro linguaggio.

A tal proposito è necessario introdurre alcuni attributi indispensabili del tag form:

<form name=‘nome_form’ action=‘pagina_secondaria.php’ method=‘GET’>
    …
</form>

L’attributo name serve per indicare un nome ad un form, necessario per processare lato client(con Javascript) i dati del modulo.
L’attributo action definisce l’url della pagina o del programma che processerà i dati del modulo html.
L’attributo method, infine, definisce il metodo di invio dei dati al server. Può assumere valore GET o POST.

Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella “query string”, cioè nella stringa di interrogazione) secondo questa forma:

pagina_secondaria.php?parametro=valore&parametro=valore

Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string (dunque se non si desidera che i parametri siano mostrati all’utente questo metodo è preferibile).

Controlli del modulo

Per controlli di un modulo html si intende l’insieme degli elementi che costituiscono il modulo stesso e che forniscono all’utente gli strumenti per effettuare scelte e immettere dati.
I tipi di controlli sono:

• Bottoni (submit/reset)
• Caselle di Testo (anche nascoste come pswd)
• Caselle di Spunta
• Radio Button (come caselle di spunta, ma mutex)
• Immagini (come i bottoni)
• Selezione di File
• Controlli nascosti

Per ciascuno di essi è possibile associare un’etichetta per identificare l’elemento in maniera univoca. Ogni controllo ha inoltre un nome (specificato nel codice html dall’attributo name) e un valore (specificato dall’attributo value) che può assumere significati diversi in relazione al tipo di controllo.
Il name e il value vengono accoppiati e passati dal browser al server per essere elaborati.

Il tag INPUT

Il tag <input> definisce un singolo campo che compone un modulo. La sintassi è la seguente:

<input  type=‘…’ />

L’input non prevede il tag di chiusura e l’attributo type specifica il tipo di dato che il campo contempla. Scrivere ad esempio : <input type=‘text’ /> ci permette di definire un campo di input di tipo testo.

Analizziamo il codice html che segue:

<form name='form' action='pagin.php' method='GET'>
	<table border='0'>
	<tr>
		<td>Nome :</td>
		<td><input type='text' name='nome'/></td>
	</tr>
	<tr>
		<td>Cognome:</td>
		<td><input type='text' name='cognome'/></td>
	</tr>
	<tr>
		<td>Codice Fiscale :</td>
		<td><input type='text' name='cf'/></td>
	</tr>
	</table>
</form>

Il form contiene tre campi di input di tipo testo. I campi sono tabellati e provvisti dell’attributo name. Il risultato nella finestra del browser è il seguente:

Grazie all’attributo value è inoltre possibile impostare un testo di default per ciascun campo di testo:

…
		<td><input type='text' name='nome‘ value=‘Il tuo nome’/></td>
…
		<td><input type='text' name=‘cognome’ value=‘Il tuo cognome’/></td>

Il campo di input di tipo testo permette inoltre di specificare il numero massimo di caratteri ammissibile. A tale scopo esistono alcuni attributi, tra i quali:

• SIZE (grandezza della casella mostrata nella pagina)
• MAXLENGTH (numero massimo di caratteri che l’utente può inserire)

La sintassi è la seguente:

<input type='text' name='nome' size='10' maxlength='10'/>

Il presente compendio raccoglie, in un unico testo, una selezione di temi tratti dalle lezioni del corso “Informatica per le Scienze Umane” il cui obiettivo è quello di fornire le conoscenze di base degli aspetti teorici e pratici dell’informatica, che l’allievo potrà poi valorizzare nel prosieguo degli studi e nell’ ambiente di lavoro.
Nella stessa ottica gli argomenti presentati approfondiscono aspetti più strettamente legati all’attività di un umanista, mediante le lezioni dedicate:
- all’utilizzo dell’informatica nelle diverse realtà professionali;
- al tipo di relazione che esiste fra l’uomo e il personal computer;
- all’uso ed allo sviluppo di strumenti informatici operativi di semplice utilizzo per facilitare l’apprendimento altrui mediante la creazione di modelli didattici innovativi, affinare e personalizzare le ricerche di area umanistica in Internet e consultare/creare archivi e biblioteche digitali.
La natura semplificata della trattazione delle varie componenti del programma rende tale compendio fruibile anche al lettore che intende avvicinarsi all’informatica, a Windows 7 e alla Suite MS Office 2010, indipendentemente dalla necessità di sostenere un esame universitario.

Il presente compendio raccoglie, in un unico testo, una selezione di temi tratti dalle lezioni del corso di “Fondamenti di Informatica” per la Facoltà di Psicologia ed ha l’obiettivo di fornire le conoscenze di base degli aspetti teorici e pratici dell’informatica che l’allievo potrà poi valorizzare nel prosieguo degli studi e nell’ ambiente di lavoro.
Nella stessa ottica gli argomenti presentati approfondiscono aspetti più strettamente legati alla psicologia, mediante le sezioni dedicate:
- all’utilizzo dell’informatica nelle diverse realtà professionali;
- al tipo di relazione che esiste fra l’uomo e il personal computer;
- all’uso ed allo sviluppo di strumenti informatici operativi di semplice utilizzo, tesi a facilitare l’apprendimento altrui mediante la creazione di modelli didattici innovativi.
La natura semplificata della trattazione delle varie componenti del programma rende tale compendio fruibile anche al lettore che intende avvicinarsi all’informatica, a Windows 7 e alla Suite MS Office 2010, indipendentemente dalla necessità di sostenere un esame universitario.

Poi si cresce e quei 100 semini vanno ben distribuiti nell’arco della propria esistenza.
Ogni semino è un pezzo di passione, impegno, speranza… vita.
Nessuno sà come seminarli, nessuno sà come e quando è giusto buttarli lì su quella terra…
fin quando non inizi a buttarne via qualcuno…

E io immagino che ognuno di noi divida il proprio pezzo di terra in pezzi più piccoli…
e ad ognuno di questi assegni un valore… un motivo.
Ed ecco che c’è il pezzettino di terra chiamato amore, quello chiamato lavoro, amicizia, passioni…
divertimento, salute… ciascuno sceglie come dividerlo.

Così durante la vita, c’è chi si dedica a coltivarne uno piuttosto che un’altro…
utilizzando quei semini che ci hanno donato.
Difficile è capire dove gettare più semi…
Tutti vivono con la speranza di veder nascere solo il meglio su ogni pezzo di terra…
vogliono l’amore, la salute, il lavoro… divertirsi, avere tanti amici… avere un futuro.
In troppi però sbagliano…
sprecano i loro semi gettandoli su terre dove mai niente sboccerà…
oppure, peggio ancora, li perdono rincorrendo falsi ideali.
Altri invece buttano tutti i loro semi su un unico pezzo di terra…
fino a ritrovarsi vecchi e con una sola speranza a tenerli vivi.

Quindi perchè sprecare questo dono?
I 100 semini sono stati donati a tutti e non esiste alcuna regola per una buona semina.
Siamo noi che decidiamo… siamo noi gli artefici del nostro futuro.
Siamo noi che dobbiamo curare il nostro pezzo di terra… la nostra vita.

Gettiamo i nostri semini su ciò che ci rende vivi,
su ciò che ci emoziona…
Non sprechiamone neanche uno, distribuiamoli in maniera che su ogni pezzettino di terra nasca qualcosa…
un fiore, una rosa… un giardino incantato…
Non lasciamo che vinca aridità e siccità.

Immaginiamo di ritrovarci in una giornata di fine estate, seduti al centro della propria terra…
tra un ulivo… una siepe fiorita… una quercia…
e col sorriso sulle labbra, alzare gli occhi al cielo…
e pensare quanto è stata dura la semina della vita.

Fabio Donatantonio

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.

Finora abbiamo creato tabelle come griglie rigide, in cui il numero delle colonne era dato come costante e non modificabile.
In realtà è possibile raggruppare le celle all’interno delle colonne in modo da avere ad esempio una riga da 3 colonne e un’altra da 4. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne).
In questo caso si utilizza l’attributo COLSPAN all’interno del tag <td>, specificando come valore il numero di celle che devono essere occupate.
La sintassi è la seguente:

<td colspan='2'>… contenuto cella …</td>

In questo caso la cella occuperà il posto di due celle e il suo contenuto sarà visibile all’interno dello spazio creato.
Analizziamo a questo punto il codice completo di una tabella che contiene 3 righe, la prima composta da 4 celle, la seconda da 3 e la terza da 2 celle:

<html>
<head>
<title>TABELLE - COLSPAN</title>
</head>
<body>
<table border='1' width='400px'>
<tr>
	<td align='center'>Cella 1</td>
	<td align='center'>Cella 2</td>
	<td align='center'>Cella 3</td>
	<td align='center'>Cella 4</td>
</tr>
<tr>
	<td align='center'>Cella 5</td>
	<td align='center'>Cella 6</td>
	<td colspan='2' align='center'>Cella 7</td>
</tr>
<tr>
	<td align='center'>Cella 8</td>
	<td colspan='3' align='center'>Cella 9</td>
</tr>
</table>
</body>
</html>

Il risultato nella finestra del browser è il seguente:

Quando si utilizza l’attributo colspan è facile incorrere in errori. Ad esempio realizzare una riga con 4 colonne (celle) e successivamente una riga con sole 2 colonne provoca in fase di visualizzazione effetti indesiderati.
E’ sempre consigliabile, indipendentemente dal numero di celle unite che si andranno a realizzare, preparare una bozza cartacea della tabella comprensiva di un numero uguale di celle per ogni riga. Successivamente scegliere le celle da unire evidenziandole da un segno grafico e quindi realizzare il codice html.

L’attributo ROWSPAN

Anche l’attributo ROWSPAN è utile ad unire le celle di una tabella html. A differenza di colspan però questo attributo lavora sull’unione di righe.
In altre parole è possibile far si che una cella si estenda su più righe:

<td rowspan='2'>… contenuto cella …</td>

In questo caso infatti il contenuto della cella verrà visualizzato in una cella estesa su due righe (rowspan=’2′). E’ possibile inoltre combinare insieme rowspan e colspan se vogliamo ad esempio che una cella si estenda sia in orizzontale che in verticale.
Riprendendo il codice html proposto nella sezione precedente, modifichiamolo in modo tale che la prima cella si estenda su tutte e tre le righe lasciando intatte le colonne con attributo colspan:

<html>
<head>
<title>TABELLE - ROWSPAN</title>
</head>
<table border='1' width='400px'>
<tr>
	<td align='center' rowspan='3'>Cella 1</td>
	<td align='center'>Cella 2</td>
	<td align='center'>Cella 3</td>
	<td align='center'>Cella 4</td>
</tr>
<tr>
	<td align='center'>Cella 6</td>
	<td colspan='2' align='center'>Cella 7</td>
</tr>
<tr>
	<td colspan='3' align='center'>Cella 9</td>
</tr>
</table>

</body>
</html>

Di seguito è visibile la modifica apportata alla tabella con l’estensione della prima cella su tutte le righe:

Come per l’attributo colspan, anche con rowspan bisogna prestare particolare attenzione nella progettazione di una tabella e quindi valgono le regole definite in precedente. L’unica attenzione in più richiesta è quella di non perdere di vista il numero di righe su cui si estende una cella onde evitare di ritrovarsi con un numero di celle maggiore o minore su una delle righe successive.

<table border='1'>
… …
</table>

Al cui interno andranno specificate per ogni riga le celle che la compongono e quindi il contenuto. A tale scopo è necessario introdurre due tag fondamentali:

• TR è il tag che definisce una riga di una tabella;
• TD è il tag che definisce una singola cella della tabella.

La sintassi completa per realizzare una tabella è quindi la seguente:

<table border='1'>
    <tr>
        <td>Cella</td>
        …
    </tr>
    …
</table>

E’ necessario, così come definito nelle lezioni precedenti, attenersi ad una corretta nidificazione dei tag. Nel caso delle tabelle il tag TD deve essere sempre instanziato all’interno del tag TR.
Il codice html seguente descrive un esempio completo di tabella:

<html>
<head>
	<title>TABELLE HTML</title>
</head>
<body>
<h2 align='center'>La prima tabella</h2>

<table border='1'>
	<tr>
		<td>Cella 1</td>
		<td>Cella 2</td>
	</tr>
	<tr>
		<td>Cella 3</td>
		<td>Cella 4</td>
	</tr>
           <tr>
		<td>Cella 5</td>
		<td>Cella 6</td>
	</tr>
	<tr>
		<td>Cella 7</td>
		<td>Cella 8</td>
	</tr>
</table>
</body>
</html>

Analizzando il codice si evidenzia la presenza di una tabella con bordo di 1px composta da quattro righe e due colonne.
Il risultato all’interno del browser è il seguente:

Intestazione delle tabelle

E’ buona norma, soprattutto in presenza di tabelle che contengono dati, impostare una riga iniziale che funga da intestazione per le tabelle.
La sintassi è simile a quella vista per realizzare una singola riga con l’unica differenza che al posto del tag TD va utilizzato il tag TH:

<tr>
	<th>TITOLO COLONNA 1</th>
	<th>TITOLO COLONNA 2</th>
	…
</tr>

Il browser interpreterà il tag TH ed evidenzierà il contenuto utilizzando un carattere in grassetto e lo allineerà al centro della cella. Nonostante solitamente questo tag si usi nella prima riga della tabella, nulla vieta di utilizzare il tag TH in altri punti della stessa, come ad esempio riga del totale in fondo ad una tabella:

Altri attributi del tag TD

Tra gli attributi maggiormente utilizzati per il tag TD se ne identificano essenzialmente due: ALIGN e VALIGN, che rispettivamente hanno la funzione di definire un allineamento orizzontale e verticale del contenuto della cella.
Ad esempio scrivere la seguente riga di codice html:

<td align='center' valign='top'>
    Contenuto della cella...
</td>

comporta un allineamento al centro del contenuto della cella (align=’center’) ed inoltre un allineamento verso l’alto (valign=’top’) dello stesso contenuto.
Altri valori che può assumere l’attributo valign sono: BOTTOM, MIDDLE e BASELINE.
Di default la maggior parte dei browser utilizza MIDDLE come valore di valign.

Libera traduzione di “Chi pò dicere”
Pino Daniele (Terra Mia) – 1977

Libera traduzione di “Libertà”
Pino Daniele (Terra Mia) – 1977

“Se arrivasse adesso sarei più contento,
tanto io parlo ma nessuno mi ascolta.
Guardando il mare penso a Maria che adesso non ci sta più…
sono solo tre anni e ci penso tutte le sere,
passa il tempo e non mi sembra vero.”

E cammina, cammina… vicino al porto
e piangendo aspetta la morte,
sotto la luna non parla nessuno…
sotto la luna nessuno vuole ascoltare.

Libera traduzione di “Cammina cammina”
Pino Daniele (Terra Mia) – 1977.

Realizzare un link mediante un’immagine consiste essenzialmente nell’annidare un tag <img> all’interno del tag <a>:

<a href=‘pagina.html’><img src=‘immagine.jpg’ /></a>

In linea generale potremo sostenere che tutto ciò che compare all’interno del tag <a> diventa in automatico cliccabile.
Il codice sottostante descrive l’utilizzo di un logo png come link:

<html>
    <head>
    <title>IMMAGINI COME LINK</title>
    </head>
    <body>
    <div>Clicca sotto per accedere alla home : </div>
    <p align='justify'>
	<a href=‘home.html’><img src=‘home.png' align='left'/></a>
    </p>
    </body>
</html>

Di seguito è visibile il risultato nella finestra del browser, da notare che di default il browser applica un bordo blu ad indicare che l’immagine è un link.
Per rimuove il bordo è necessario semplicemente impostare l’attributo border=‘0’.

Le mappe.

Abbiamo visto che le immagini possono essere utilizzate come link con altre pagine di un sito web.
A volte è necessario far sì che solo una determinata parte di un’immagine sia collegata a un link. È il tipico caso delle Regioni d’Italia: abbiamo una cartina e abbiamo la necessità che alla sagoma di ciascuna regione corrisponda un differente collegamento.
La logica di una mappa html è quella di suddividere l’immagine in aree dette anche zone calde (hotspot) grazie alle quali, facendo clic su di esse, è possibile raggiungere le destinazioni dei link.
Per creare una mappa di immagine cliccabile dobbiamo utilizzare diversi comandi HTML che passiamo in rassegna:

• map genera la mappa con riferimento all’immagine da mappare;
• area genera le aree sensibili al click del mouse;
• img visualizza l’immagine da mappare, con riferimento alla mappa.

Ciascuno di questi tag ha come scopo finale quello di realizzare una mappa immagine.
Di seguito un esempio di codice html per la realizzazione di una mappa:

<map name="MiaMappa">
    <area href="pag_1.html" shape="rect" coords="100, 200, 300, 400">
    <area href="pag_2.html" shape="rect" coords="500, 600, 700, 800">
</map>
<img src="miafoto.jpg" usemap="#MiaMappa" border="0">

Analizzando nel dettaglio il codice proposto si può notare come la mappa sia contenuta all’interno del tag MAP a cui viene assegnato un nome tramite l’attributo name.
All’interno del MAP si trovano i tag AREA a cui vengono assegnati i seguenti attributi:

• href : riferimento al collegamento ipertestuale associato all’area;
• shape : descrive la forma dell’area e può assumere il valore rect, circle e polygon;
• coords : elenca le coordinate dell’area cliccabile, separate da virgole.

Infine al tag IMG viene associato l’attributo usemap (mappa da utilizzare) che accetta il nome della mappa preceduto dal cancelletto (#).
Il punto cruciale nella realizzazione di una mappa immagine è l’individuazione delle coordinate da assegnare alle varie aree. A tale scopo è necessario utilizzare appositi programmi di editing di immagini o in alternativa applicazioni che individuate le coordinate creano al volo il codice html da includere all’interno del tag MAP.

L’attributo align permette di definire il tipo di allineamento dell’immagine:

• LEFT: l’immagine è allineata alla sinistra del testo
• RIGHT: l’immagine è allineata alla destra del testo
• TOP: il testo è allineato con il margine superiore destro dell’immagine
• MIDDLE: il testo è allineato con il centro dell’immagine
• BOTTOM: il testo è allineato con il margine inferiore destro dell’immagine

Analizziamo  ad esempio il seguente codice html:

<html>
<head>
<title>POSIZIONAMENTO IMMAGINI</title>
</head>
<body>
<div>Posizionamento di un immagine rispetto al testo : </div>
<p align='justify'>
	<img src='img/promessi.jpg' align='left'/>

Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte…
….
</body>
</html>

All’interno del paragrafo viene definita un’immagine con allineamento a sinistra e di seguito il testo. Il browser interpreterà il codice e darà come risultato la seguente schermata:

In alternativa l’attributo align avrebbe potuto assumere valore right o center:

Bordo delle immagini.

Tramite l’attributo border è possibile impostare una bordatura alle immagini, specificando in pixel lo spessore del bordo:

<img src=‘immagine.jpg’ border=‘2’ alt='Testo alternativo' />

In questo caso l’immagine apparirà con un bordo nero di 2px:

Margine delle immagini.

Nonostante le regole CSS permettano di definire un margine tra un’immagine e gli elementi che lo circondano esiste la possibilità di utilizzare due attributi: vspace e hspace che rispettivamente permettono di definire una spaziatura verticale e una orizzontale per l’immagine in questione.
Ad esempio scrivendo:

<img src=‘immagine.jpg’ alt='Testo alternativo' hspace=‘20’ vspace=’10’ />

impostiamo un’immagine con una spaziatura verticale di 10px e una orizzontale di 20px. In questo caso il margine è suddiviso in maniera equa tra i due lati, in altre parole verticalmente l’immagine avrà un margine destro di 5px e un margine sinistro di 5px, ugualmente un margine superiore di 10px e uno inferiore di 10px.

<img src=‘immagini/foto.jpg’ />

Il tag <img> si compone essenzialmente di un attributo obbligatorio src, che indica l’url dell’immagine da visualizzare.
In fase di visualizzazione quando il browser incontra il tag img, analizza l’url associato e carica l’immagine, ponendola all’interno della pagina dove questa è stata definita dallo sviluppatore.
Il seguente codice HTML descrive in maniera completa l’inserimento di un immagine in una pagina html:

<html>
     <head>
     <title>IMMAGINI</title>
     </head>

     <body>

          <div>La nostra prima immagine : </div>

          <!-- INSERISCO L’IMMAGINE logo.jpg -->
          <img src=‘img/logo.jpg’ />

     </body>
</html>

Il risultato nel browser è il seguente:

Non avendo specificato allineamento e altri attributi, l’immagine viene stampata a sinistra e dopo l’elemento che lo precede nel codice (nel nostro caso il div che contiene il testo).

I formati per le immagini web.

Nonostante non siano definiti in maniera precisa i formati ammissibili per le immagini è bene sottolineare che nella scelta del formato va tenuta in grande considerazione la pesantezza dell’immagine (espressa in byte).
I formati più indicati per il web sono sostanzialmente tre:

Indipendentemente dal formato utilizzato è importante ricordare che abusare delle immagini incide negativamente sulle prestazioni del browser. Difatti caricare una pagina html con molte immagini richiede un tempo maggiore rispetto ad una pagina con testo e poche immagini.
Una volta scelte le immagini da inserire queste vanno ottimizzate, regolando la dimensione e il formato. La regola alla quale attenersi per scegliere il formato corretto è riassunta di seguito:

• se bisogna inserire una foto allora scegliamo il formato jpg;
• se bisogna inserire un logo o un disegno scegliamo il formato gif o png.

L’attributo ALT e le regole di accessibilità.

Un aspetto importante di cui tener conto è che non tutti i browser visualizzano le immagini presenti in una pagina html, o ad esempio per scelta un utente potrebbe non visualizzare le immagini.
Alcuni utenti, quali gli ipovedenti, non sono in grado di mettere a fuoco del tutto le immagini inserite nelle pagine web, i non vedenti sono del tutto esclusi anche da questa pur limitata possibilità; altri ancora utilizzano browser che non supportano immagini e interpretano solamente i testi contenuti nelle pagine stesse.
Pensare di creare pagine web alternative a quelle che utilizzano le immagini significherebbe di fatto discriminare tali utenti da una completa fruizione di tutto ciò che di positivo spesso riserva la rete.
Fornire invece un testo equivalente per le immagini garantisce in tutti i casi sopraelencati l’accessibilità, oltre a essere utile indistintamente a tutti gli utenti: si tratta in ogni caso di un elemento irrinunciabile per assicurare sempre e comunque accessibilità alle immagini inserite in una pagina web.

L’attributo ALT permette appunto di definire un testo da visualizzare in assenza dell’immagine.

<img src=‘img/logo.jpg’  alt=‘Il logo del corso HTML’ />

Seppur non obbligatorio come attributo, l’uso dell’attributo alt è opportuno sulle principali immagini incluse in una pagina, in modo particolare nel caso in cui l’immagine rappresenta un prodotto, un servizio, o comunque un elemento relativo alla pagina.
Utilizzando l’attributo alt si potrà notare come in Internet Explorer il testo venga visualizzato anche in presenza dell’immagine qualora l’utente trascini su di essa il puntatore del mouse; negli altri browser invece il testo viene visualizzato solo in assenza dell’immagine.

Altezza e larghezza delle immagini.

Gli attributi width e height possono essere usati per impostare l’altezza e la larghezza di una immagine. Per impostare l’altezza e la larghezza viene usato, solitamente, un valore in pixel.
A differenza dei centimetri, i pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
Se non vengono impostate l’altezza e la larghezza, l’immagine verrà inserita con le sue dimensioni originali. Bisogna comunque tenere in considerazione che il browser conosce le dimensioni di un’immagine solo nel momento in cui questa viene caricata completamente, in ogni caso è consigliabile indicare le dimensioni dell’immagine favorendo la realizzazione del layout al browser.
Gli attributi width e height possono inoltre essere utilizzati per scalare le immagini troppo grandi.

Il codice html sottostante descrive l’utilizzo degli attributi width e height:

<html>
     <head>
     <title>ALTEZZA E LARGHEZZA IMMAGINI</title>
     </head>
     <body>
     <div>Dimensione delle immagini : </div>

     <img src='img/logo.jpg' width='82px' height='200px' alt='Il logo del corso HTML!'/>
     <img src='img/logo.jpg' width='70px' height='170px' alt='Il logo del corso HTML!'/>
     <img src='img/logo.jpg' width='50px' height='150px' alt='Il logo del corso HTML!'/>

     </body>
</html>

Nel codice sono presenti tre immagini in sequenza con dimensioni diminuite di volta in volta.
Di seguito è mostrato il risultato:

In definitiva la sintassi per impostare altezza e larghezza di un immagine è:

<img src=”‘immagine.jpg’” alt=”" width=”‘100px’” height=”‘100px’” />

Progettazione del menu.

Il menu che realizzeremo sarà un menu di tipo orizzontale. I vari link saranno disposti l’uno di fianco all’altro all’interno di bottoni dalla forma rettangolare.
Grazie alle conoscenze fin’ora acquisite utilizzeremo DIV e paragrafi per disporre i vari elementi del menu. Inoltre verrà introdotto un minimo di regole di stile per rendere più gradevole l’aspetto del menu.

Ecco il codice html completo:

<html>
<head>
	<title>MENU</title>
</head>

<body>
<h2 align='center'>Titolo del sito</h2>

<div align='center' style='background-color:blue; padding:4px;'>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>HOME</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>CHI SIAMO</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>DOVE SIAMO</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>CONTATTI</a></span>
</div>

<hr/>

<p align='justify'>
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni…
….
</p>

<hr/>

</body>
</html>

Una volta salvato il file con estensione .html il risultato è il seguente:

Analizzando il codice html si può innanzitutto notare la nidificazione di tag DIV, SPAN e A per realizzare la parte alta della pagina.
Andando per ordine, all’interno del tag body viene definito innanzitutto un titolo grazie al tag <h2>, le successive righe di codice implementano il menu orizzontale: un DIV contenitore con allineamento centrale al quale è associato la seguente riga di stile che definisce un colore di sfondo e una spaziatura interna di 4px:

style=’background-color:blue; padding:4px;‘

Nelle lezioni dedicate al CSS saranno approfondite le regole di stile.

Il DIV conterrà i singoli bottoni che comporranno il menu, dove ogni bottone sarà identificato da uno span al cui interno sarà presente il link:

<span style="background-color:orange; border:2px solid black; padding:4px; width:150px">
     <a href=‘index.html'>HOME</a>
</span>

Tralasciando nel dettaglio le regole di stile è importante notare la sintassi e la nidificazione del link.
Continuando ad analizzare il codice si può notare la presenza di un separatore lineare <hr/> e la presenza di un paragrafo che racchiude il testo della 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.

• definire il segnalibro assegnandogli un nome univoco;
• definire un link che conduca al segnalibro.

La seguente riga di codice descrive un segnalibro o ancora:

<a name="capitolo1"></a>

Il nome capitolo1 viene assegnato al link dall’attributo name dell’elemento a. Il link che permetterà di raggiungere il segnalibro sarà:

<a  href="#capitolo1">Vai al capitolo 1</a>

Il tag a definisce un link ipertestuale con l’ancora capitolo1 come destinazione. Il simbolo # indica al browser che l’ancora va ricercata all’interno della pagina attuale.
Diversamente è possibile collegare un link ad un segnalibro definito in un’altra pagina nel seguente modo:

<a href="index.html#capitolo1">Vai al capitolo 1</a>

In questo caso l’ancora capitolo1 sarà ricercata nella pagina index.html.
I link interni vengono utilizzati soprattutto per facilitare la lettura e navigazione di pagine HTML con un grande contenuto di informazioni.

Utilizzo dei segnalibri.

Lo scopo principale di un segnalibro html è quello di facilitare la navigazione di pagine complesse, un classico esempio che ne chiarisce l’utilità è quello di una pagina HTML che contiene il testo di un libro suddiviso per capitoli.
Un indice iniziale linkato sul titolo di ogni capitolo, poterà l’utente a visualizzare il testo del capitolo in questione. Oppure, ad esempio, una semplice pagina html suddivisa in paragrafi che fornisce nella parte alta un menu dove ogni voce conduce ad un paragrafo e quindi ad un segnalibro.
Il seguente codice html descrive un esempio completo:

<html>
    <head>
        <title>SEGNALIBRI</title>
    </head>
    <body>
        <h2>I Promessi Sposi</h2>
        <a href='#capitolo1'>Capitolo 1</a><br/>
        <a href='#capitolo2'>Capitolo 2</a><br/>
        <a href='#capitolo3'>Capitolo 3</a><br/>
        <hr/>
        <p align='justify'>
	<a name='capitolo1'></a>
	<h3>CAPITOLO 1</h3>
	Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non 	interrotte di monti, tutto a seni e a golfi …
	...
        </p>
        <hr/>
        <p align='justify'>
	<a name='capitolo2'></a>
	<h3>CAPITOLO 2</h3>
	Si racconta che il principe di Condé dormì profondamente la notte avanti la 	giornata di Rocroi …
	...
        </p>
        <hr/>
        <p align='justify'>
            <a name='capitolo3'></a>
            <h3>CAPITOLO 3</h3>
	 Lucia entrò nella stanza terrena, mentre Renzo stava angosciosamente 	informando Agnese, la quale angosciosamente lo ascoltava …
	 ...
        </p>
        <hr/>
    </body>
</html>

All’apertura della pagina nel browser verrà visualizzata la parte alta, che contiene il titolo e i tre link che conducono ai capitoli dei Promessi Sposi.

Evitando quindi di scrollare la pagina si potrà visualizzare in cima il capitolo 2, cliccando sull’apposito link.

Da notare infine come il funzionamento dei segnalibri sia dipeso non solo dalla struttura della pagina ma anche dalla quantità di spazio che questa occupa nella finestra del browser.
Definire uno o più segnalibri in una pagina che viene visualizzata per intero nel browser (senza la presenza dello scroll laterale) non produce l’effetto desiderato perché il segnalibro in questione punterebbe ad una porzione di pagina già in visualizzazione.

I collegamenti ipertestuali sono la base del web. Chiunque navighi sul web si imbatte continuamente nei cosiddetti link che uniscono una pagina html ad un’altra in maniera tale che nessuna di queste resti irraggiungibile.
La caratteristica primaria degli ipertesti è quella di formattare i documenti in forma non sequenziale. Grazie ai collegamenti ipertestuali (link) è possibile leggere i documenti senza seguire necessariamente un ordine sequenziale.
La peculiarità di saltare da un punto all’altro del documento è tipica del WWW, dove spesso seguendo un documento si passa da un sito all’altro senza soluzione di continuità.
La maggiora parte dei link vengono individuati nel browser con un testo sottolineato di colore blu.
Passando il puntatore del mouse sul testo evidenziato il cursore assume il simbolo della mano e nella barra di stato della finestra viene mostrato l’url del link che è possibile raggiungere al successivo clic del tasto sinistro.

Il tag <a>.

La struttura base per creare un link è la seguente:

<a href="http://www.sito.com">vai al sito</a>

Nel parametro href inseriamo l’indirizzo della pagina o del sito; fra i tag <a> e </a> metteremo il testo o l’oggetto che vogliamo rendere cliccabile.
Difatti tra i tag <a> può anche non comparire un testo, bensì un’immagine o un oggetto che fungono da richiamo ad un’altra pagina. Successivamente sarà descritto un esempio nel quale un’immagine fungerà da link.
All’interno dell’attributo href è possibile specificare anche solo il nome della pagina a cui collegare il link, ad esempio scrivendo:

<a href="pagina.html">Link relativo</a>

Questa soluzione è adottata qualora ci stessimo riferendo ad una pagina dello stesso dominio di appartenenza della pagina nella quale è definito il link. Inoltre come link si può far riferimento direttamente ad una directory, il server in questo caso restituisce il file index.html o altri file di default per cui è stato settato.

Ad esempio se si scrivesse:

<a href="http://www.sito.com/cartella/">Link a directory</a>

verremmo indirizzati al file index.html presente nella directory denominata cartella. Qualora il file non sia presente il browser lancerà un errore 404 che indica l’assenza della risorsa richiesta.

L’attributo target.

Con l’attributo target possiamo far capire al browser su quale finestra dovrà aprire il collegamento:

<a href="http://www.sito.com/" target="nome finestra">Link in altra finestra</a>

Questo attributo risulta indispensabile qualora ci si trovasse a lavorare con una pagina strutturata su più frame (più sottofinestre), per aggiornare tramite link solo il contenuto di una finestra.
Con l’uso sempre minore dei frame (che vedremo nelle lezioni successive), l’attributo target viene particolarmente utilizzato per aprire un collegamento in una nuova finestra senza sovrascrivere il contenuto della finestra di partenza (utile per saltare da un sito ad un altro).
In questo caso l’attributo target assume il parametro “_blank”:

<a href="http://www.sito.com/" target="_blank">Link in nuova finestra</a>

Il risultato ottenuto è mostrato sotto:

Il clic sul link della prima finestra attiva l’apertura di una seconda finestra che contiene la risorsa richiesta.

Ulteriori parametri per l’attributo target sono:

• target=”_parent” Apre il collegamento nel frame o nella finestra genitore   della finestra.
• target=”_self” Apre il collegamento nello stesso frame o finestra.
• target=”_top” Apre il collegamento nel frame o finestra più importante.

Assegnare un titolo al link.

Per i collegamenti ipertestuali è possibile assegnare un testo di commento, attivato quando il mouse passa sull’area di link simile.
Questa pratica può essere utile sostanzialmente per due motivi :

• per aiutare i motori di ricerca ad indicizzare in maniera efficiente un sito;
• per fornire a prima vista all’utente una sorta di introduzione al contenuto della pagina linkata.

Il seguente codice HTML descrive l’utilizzo dell’attributo title:

<html>
    <head>
        <title>TITOLO DEL LINK</title>
    </head>
    <body>
        <p align='justify'>
	Per prenotare gli esami di informatica &egrave; necessario consultare la tabella accessibile da<br/>
	<a href='esami.html' title='Qui è possibile consultare il calendario degli esami'>
		qui...
	</a>
        </p>
    </body>
</html>

Il risultato ottenuto è mostrato sotto, al passaggio del mouse sul link viene visualizzato per alcuni secondi il titolo.

Una caratteristica importante del codice HTML è che i tag possono essere annidati l’uno dentro l’altro. Anzi molto spesso è necessario farlo.
Una delle prime regole a cui è importante attenersi nella stesura di una pagina HTML è prestare attenzione alla chiusura dei tag aperti. Per limitare il numero di errori è consigliabile aggiungere il tag di chiusura subito dopo aver aperto il tag in questione, quindi poi aggiungere il contenuto al tag.
Questa tecnica è particolarmente suggerita in presenza di nidificazioni di tag, così facendo si riduce la possibilità di avere errori nella visualizzazione della pagina nel browser.
Potremmo quindi avere una situazione del genere:

<p>
Questo è un testo…
<div>
Seguito da un testo in un div…
</div>
</p>

Da notare le ultime due righe del codice appena proposto, dove viene in sequenza chiuso prima il DIV e poi successivamente P.
Il caso precedente è un caso di nidificazione di tag; il DIV è contenuto nel paragrafo P.
Nessuno vieta inoltre di definire più livelli di nidificazione.

Indentazione del codice.

E’ una buona norma utilizzare dei caratteri di tabulazione (il tasto tab a sinistra della lettera Q) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento. Questa tecnica prende il nome di indentazione.
In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: non si tratta soltanto di un fattore visivo, ma l’allineamento di apertura e chiusura tag viene mantenuto anche se scorriamo in verticale il documento con il cursore.
Grazie a questa tecnica di stesura del codice, il codice stesso risulta più leggibile e facilmente modificabile in fasi successive.
Il codice del paragrafo precedente è così riformulato:

<p>
	Questo è un testo…
	<div>
		Seguito da un testo in un div…
	</div>
</p>

I commenti.

Per rendere il nostro codice più leggibile è consigliabile inserire dei commenti nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l’orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:

<!– Questo testo è un commento –>

Tutto ciò che compare all’interno di questi particolari tag viene ignorato in fase di visualizzazione nel browser, ma resta comunque leggibile e accessibile da chiunque perché presente nel codice HTML. E’ quindi preferibile non utilizzare i commenti per inserire informazioni sensibili onde evitare problemi di sicurezza.

<p>
	Questo è un paragrafo che contiene semplice testo.<br/>
	All’interno del paragrafo è presente un commento per gli sviluppatori.
	<!-- COMMENTO : questo è un paragrafo -->
</p>

&agrave;

Nel codice HTML leggeremo &agrave; e nella pagina Html visualizzata dal browser vedremo la nostra lettera a minuscola con accento grave.
Se nel codice HTML scriviamo la parola “velocità” invece di “velocit&agrave;” i browser visualizzeranno correttamente la parola solo se tramite intestazioni HTTP o codice HTML riceveranno l’informazione di caricare la giusta tabella-codici (in questo caso ISO 8859-1).
Nonostante ciò per evitare qualsiasi problema ed anche per rendere le pagine web più conformi allo standard HTML è preferibile inserire nel testo direttamente le entità carattere.

Le entità di uso frequente.

Tutte le entità HTML si formano con una e commerciale (&) come primo carattere e un punto e virgola (;) come ultimo.
Nella tabella è indicato esattamente per ciascuna entità come si scrive: i loro nomi sono case-sensitive (occorre rispettare maiuscole e minuscole).

Per creare delle linee di separazione con un semplice tag HTML, senza dover ricorrere alla creazione di un’immagine è possibile utilizzare l’<hr>.
Per creare la linea basta inserire nel codice sorgente il solo tag <hr/> ed avremo la creazione di una linea con colorazione grigia, di uno spessore standard e larga quanto il “contenitore” nella quale è instanziata.
E’ possibile personalizzare l’aspetto grafico del tag <hr> con la definizione di alcuni attributi tra i quali ad esempio width, size, color e align.

Ad esempio scrivendo:

<hr width=”150px” size=”1″ color=”red” align=”center“ />

definiamo un separatore di colore rosso allineato al centro e di lunghezza 150px.
Di seguito ecco come verrà visualizzato nel browser l’<hr> appena definito.

Il tag <hr> risulta quindi molto utile nel momento in cui è necessario suddividere parti della pagina in maniera veloce ed efficiente.

Gli elenchi puntati e numerati.

Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le “liste”, che sono sostanzialmente di tre tipi:

• elenchi ordinati;
• elenchi non ordinati.

Tutti e due i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell’elenco. La sintassi ha quindi questa forma:

<elenco>
<elemento>nome del primo elemento</elemento>
<elemento>nome del secondo elemento</elemento>
</elenco>

Gli elenchi ordinati sono contraddistinti dall’enumerazione degli elementi che compongono la lista.
Il tag da utilizzare per aprire un elenco ordinato è <ol> (ordered list) e gli elementi sono individuati dal tag <li> (list item):

Elenco numerato:
<ol>
    <li>Primo Elemento</li>
    <li>Secondo Elemento</li>
    <li>Terzo Elemento</li>
</ol>

Il cui risultato è il seguente:

Gli elementi dell’elenco sono sempre rientrati di uno spazio verso destra: tutto questo serve a individuare in modo inequivocabile l’elenco. Lo stile di enumerazione visualizzata di default dal browser è quella numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type.

• type=“a” Elenco con alfabeto minuscolo
• type=“A” Elenco con alfabeto maiuscolo
• type=“i” Elenco con numeri romani in minuscolo
• type=“I” Elenco con numeri romani in maiuscolo

Gli elenchi non ordinati (o puntati) sono individuati dal tag <ul> (unordered list), e gli elementi dell’elenco sono contraddistinti anch’essi dal tag <li>.

Elenco puntato:
<ul>
    <li>Primo Elemento</li>
    <li>Secondo Elemento</li>
    <li>Terzo Elemento</li>
</ul>

Il cui risultato è il seguente:

Anche per gli elementi puntati è possibile personalizzare il tipo di segno grafico utilizzato per individuare gli elementi.

• type=“disc” Visualizza un pallino nero (default)
• type=“circle” Visualizza un cerchio vuoto
• type=“square” Visualizza un quadrato pieno

logico

• formatta del testo a seconda del suo significato
• descrive “l’uso” di una parte di testo
• lascia al browser l’interpretazione del comando secondo le proprie capacità

e

fisico

• indica al browser il formato specifico del testo
• forza il testo ad assumere un particolare aspetto
• richiede uno specifico formato fisico e causa problemi se il browser non è in grado   di gestire il formato specificato

Tipi di stile logico.

• <EM> E’ utilizzato per enfatizzare un testo
• <STRONG> E’ utilizzato per dare una forte enfasi ad un testo
• <ADDRESS> Tag contenitore usato per fornire informazioni di locazione
• <CITE> Per testo di citazione
• <BLOCKQUOTE> Usato per citazioni e risalto di blocchi di testo
• <DFN> Utilizzato per la definizione di un termine
• <CODE> Utilizzato per includere il codice di un programma
• <KBD> Utilizzato per indicare un testo da digitare

Il seguente codice descrive l’utilizzo di questi tag:

<body>
    <em>Questo è enfatizzato</em>
    <strong>Questo è strong</strong>
    <address>Questo è address</address>
    <cite>Questa è una citazione</cite>
    <blockquote>Questo è un blockquote</blockquote>
    <dfn>Questa è una definizione</dfn>
    <code>Questo è un codice</code>
    <kbd>Questo è un testo da digitare</kbd>
</body>

Il codice precedente produce:

Tipi di stile fisico.

• <B> Per il testo in grassetto
• <I> Per il testo in italico
• <U> Per il testo sottolineato
• <STRIKE> Per un testo barrato
• <TT> Per mantenere una spaziatura fissa
• <SUB> Per un testo al pedice
• <SUP> Per un testo all’apice

Il seguente codice descrive l’utilizzo di questi tag:

<body>
<b>Testo in grassetto</b>
<l>Testo in italico</l>
<u>Testo sottolineato</u>
<strike>Testo barrato</strike>
<tt>Testo a spaziatura fissa</tt>
X<sub>Questo testo è al pedice</sub>
X<sup>Questo testo è all’apice</sup>
</body>

Il risultato è il seguente:

Come visto in un articolo precedente nulla vieta di scrivere direttamente all’interno del tag body il testo di ciò che vogliamo appaia a schermo.
Risulta più pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo.
La nostra pagina html risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere un effetto grafico più gradevole e rispondente alle diverse esigenze.
Vediamo i principali tag-contenitori da utilizzare per formattare il testo.

Titoli.

Esistono 6 differenti livelli di titolo che si ottengono utilizzando i seguenti tag:

• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>

La “h” sta per “heading“, cioè titolo e ogni livello indica una grandezza diversa.
Dall’<h1>, che è il più importante, si va via via degradando fino all’<h6> che rappresenta il titolo con grandezza minore.
Gli heading, così come altri tag contenitori, appartengono alla famiglia degli elementi di blocco. Tali elementi sono così chiamati perché una volta definiti creano un blocco attorno a sé, di conseguenza vanno a capo e risultano distanziati dagli elementi che li circondano.

Analizziamo il seguente codice html:

<html>
    <head>
        <title>TITOLI</title>
    </head>
    <body>
        <h1>Esame di informatica</h1>
        <h2>Esame di informatica</h2>
        <h3>Esame di informatica</h3>
        <h4>Esame di informatica</h4>
        <h5>Esame di informatica</h5>
        <h6>Esame di informatica</h6>
    </body>
</html>

Nella pagina html abbiamo definito 6 titoli con ugual testo ma grandezza diversa, utilizzando in successione i tag da h1 ad h6.
Ciascun titolo verrà automaticamente portato a capo rispetto al precedente e di default sarà applicato un margine (inferiore e superiore) che differisce seppur minimamente da browser a browser.
Di seguito viene mostrato il risultato in Internet Explorer:

Paragrafi.

I browser non riconoscono da soli la formattazione del testo, bensì è necessario indicargliela tramite appositi tag html. In caso contrario il browser si limiterà a visualizzare a video i caratteri uno dietro all’altro senza alcuna regola.
Il paragrafo rappresenta l’unità di base entro cui suddividere un testo.
Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. La sintassi è la seguente:

<p>Questo testo è in un paragrafo…</p>

Il tag </p> di chiusura può essere omesso ma è buona norma abituarsi ad inserirlo sempre, soprattutto nel caso in cui siano necessari più paragrafi in successione.
Analizziamo il seguente esempio di codice html:

<p>Questo &egrave; un primo paragrafo... </p>
<p>Questo &egrave; un secondo paragrafo...</p>

I browser visualizzerà così i due paragrafi:

Il tag <p> possiede inoltre un importante attributo presente nella maggior parte degli elementi di blocco che prende il nome di align.
Specificando ad esempio:

<p align=‘right’>Questo è un paragrafo…</p>

il testo contenuto all’interno del paragrafo sarà allineato a destra. In alternativa il testo potrà essere allineato a sinistra (left), al centro (center) oppure giustificato (justify).

Andare a capo.

Si sarà notato che andando a capo nel codice html all’interno di un paragrafo, questo non riproduce lo stesso effetto visualizzato nel browser. Ad esempio scrivere come segue non produce l’effetto desiderato:

<p>
Questo &egrave; un paragrafo
questa riga dovrebbe andare a capo
cos&igrave; come questa riga…
</p>

Il tag <br/> permette invece di inserire un interruzione di riga, quindi un a capo. Essendo questo un tag vuoto e non un contenitore come <p>, nella sintassi verrà definito senza contenuto e quindi senza la coppia di tag di apertura e chiusura.
L’esempio precedente è così riformulato grazie al tag <br>:

<p>
Questo &egrave; un paragrafo <br/>
questa riga dovrebbe andare a capo <br/>
cos&igrave; come questa riga…
</p>

Utilizzando semplicemente una coppia di tag <br> si ottiene di conseguenza una linea bianca.

Il div e lo span.

Il tag <div> definisce un blocco di testo che va a capo ma, a differenza del paragrafo, non lascia spazi prima e dopo la sua apertura.
Il DIV grazie alla sua enorme versatilità viene definito nel linguaggio HTML come l’elemento di tipo blocco per eccellenza. E’ utilizzato più che per contenere semplice testo soprattutto per la suddivisione strutturale delle pagine html.
La sintassi del DIV è la seguente:

<div>Questo è un testo all’interno di un blocco div.</div>

Lo <span> invece è un contenitore generico che può essere annidato ad esempio all’interno dei <div>.
A differenza dei tag <p> e <div> si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.
Lo <span> è un elemento molto utilizzato soprattutto insieme ai fogli di stile (CSS), ad esempio per definire delle aree di testo particolari come quelle per segnalare errori o informazioni all’utente.
Se non viene associato ad uno stile la sua presenza risulta nulla e dipendente esclusivamente dallo stile del tag che lo contiene.
Analizziamo quindi il seguente codice HTML:

<div>
Questo testo è all’interno di un blocco.<br/>
E’ possibile inserire immagini, link o altri oggetti all’interno di un div.<br/>
Inoltre un div può contenere uno span che a sua volta contiene ad esempio una parola o una frase.<br/>
<span>Questo testo è in uno span.</span>
</div>

E’ stato definito un div che contiene esclusivamente testo formattato grazie a dei <br> e prima della chiusura uno span con del testo. Da notare la nidificazione dello span nel div.
Il risultato dell’esempio precedente è così visualizzato dal browser:

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.

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() 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.

L’organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e, da un certo punto in poi, l’HTML si è evoluto in XHTML (si tratta dell’HTML riformulato come linguaggio XML).
La versione dell’HTML a cui si farà riferimento è l’ultima rilasciata: si tratta dell’HTML 4.01.

Si è detto che l’HTML si è evoluto in XHTML; ci sono però ottime ragioni per incominciare a studiare l’HTML e non l’XHTML:

• di fatto l’HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web;
• alcuni concetti di XHTML richiedono già una certa esperienza. L’HTML è più immediato e consente di incominciare subito a produrre documenti web;

chi conosce l’XHTML non può non conoscere l’HTML. La conoscenza dell’HTML è infatti il prerequisito essenziale. Le differenze tra i due linguaggi non sono così marcate e passare dall’uno all’altro non richiede poi molta fatica.

Il DOCTYPE.

Il W3C, ha esplicitamente definito l’HTML come un’applicazione SGML che, pertanto, deve aderire agli standard internazionali ISO 8879.
La DTD (Document Type Definition) di un documento HTML definisce i marcatori (tag) e la sintassi utilizzata per creare il documento stesso.
Una pagina HTML valida deve dunque contenere il <!DOCTYPE> (o Document Type Declaration) che ne dichiara la versione ed la relativa DTD cui è conforme.

Il <!DOCTYPE> è quel piccolo pezzo di codice che precede tutti i tag di un documento HTML.
Può assumere  una sintassi di questo genere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ http://www.w3.org/TR/html4/loose.dtd>

Questa riga fornisce le seguenti informazioni:

Inoltre, se necessario, è possibile specificare l‘indirizzo di riferimento a cui è possibile trovare la DTD se omesso il browser non darà errore dato che gli URL a cui trovare la documentazione sono universalmente noti.
Per quel che riguarda l’HTML le indicazioni possibili sono tre:

• Strict, che è una DTD particolarmente rigorosa. Esclude ogni elemento che riguarda il layout e non è consentito l’uso degli elementi deprecati;
• Transitional, che è una versione temporanea, per consentire il passaggio da una specifica all’altra. Nella DTD transitional i tag deprecati sono ammessi. Questa DTD andrà bene nella maggior parte dei casi;
• Frameset, che è la DTD che riguarda i frames.

Una volta definita la DTD il browser conosce esattamente come dovrebbe leggere e visualizzare la pagina HTML. La DTD è essenziale soprattutto quando si vuol validare il codice html.

Validazione HTML.

Nonostante non sia obbligatorio validare il codice html è buona norma, soprattutto per chi intende realizzare pagine web di livello professionale, effettuare il controllo del codice alla ricerca di errori.
Validare consiste essenzialmente nel controllare che il codice risponda alla DTD a cui è associata e che non ci siano errori di annidamento e nomenclatura dei tag.
A tale scopo il W3C mette a disposizione, tramite il sito ufficiale del consorzio, uno strumento di validazione on-line accessibile al seguente indirizzo: http://validator.w3.org/.
Lo strumento in questione permette di verificare una pagina html tramite url diretto oppure, qualora il file sia in locale, caricando il file html tramite apposita procedura.
Una volta che il controllo del codice è terminato, il validatore segnala eventuali errori e avvertimenti, indicando per ognuno di essi il numero di riga e riportando la porzione di codice incriminato.
Nel momento in cui il codice risulta valido viene rilasciato un logo applicabile alla pagina che certifica la validità del codice.

Gli attributi del tag html sono:

• DIR
• LANG
• VERSION (deprecato)

DIR specifica in quale direzione il browser mostra il testo all’interno dell’intero documento. Valore di default ltr left-to-right. Il valore rtl è usato per il cinese, l’ebraico, …

LANG specifica la lingua utilizzata in tutto il documento. Idealmente il browser lo usa per rendere migliore il testo per l’utente. Setta l’attributo ad uno standard ISO-639.

I tag SCRIPT, STYLE E LINK.

All’interno dell’HEAD oltre al titolo vengono solitamente definiti ulteriori tag che il browser utilizza per l’elaborazione della pagina.

Questi tag contengono informazioni riguardanti la pagina html, come fogli di stile, script o riferimenti ad oggetti esterni al documento.

SCRIPT è usato per immergere, all’interno del documento del codice in un linguaggio di scripting, in genere Javascript.
Sintassi:

<SCRIPT  LANGUAGE=“…”  TYPE=“…” >…</SCRIPT>

• LANGUAGE specifica il linguaggio
• TYPE è un MIME Type (e.g., text/javasript)

STYLE è usato per includere, all’interno del documento, un foglio di stile.
Sintassi:

<STYLE  TYPE=“…” > . . . </STYLE>

• TYPE è un MIME Type (e.g., text/css)

LINK fornisce solo delle informazioni su come il documento corrente si relaziona agli altri documenti, specificando una locazione dell’indice, un documento precedente oppure quello successivo o semplicemente per pre-caricare alcune pagine.
Il tag LINK viene perlopiù utilizzato per includere dei file esterni (javascript, css, ecc..), come ad esempio file .js o file .css.
La sintassi per includere un foglio di stile è:

<LINK  HREF=“stile.css”  REL=“STYLESHEET”  TYPE=“text/css”>

Il tag META.

Il tag META viene definito all’interno dell’HEAD ed è utilizzato per conservare informazioni sul documento, caricare o ricaricare una pagina web e includere file di suoni.
Il tag META nasce inizialmente come supporto per i motori di ricerca. Più precisamente all’interno del tag vengono definite parole chiave e sintesi del contenuto della pagina, per far si che i motori di ricerca cataloghino il documento in maniera più proficua.
Molte delle informazioni del tag META sono individuate dalla coppia NAME-CONTENT:

• NAME identifica il nome della proprietà
• CONTENT identifica il valore della proprietà

La sintassi è la seguente:

<META  NAME=“…”  CONTENT=“…” >

Per l’attributo NAME le proprietà più utilizzate sono:

• author – Autore del documento
• description – Breve descrizione del documento
• keywords – Parole che descrivono il documento usate dai motori di ricerca
• generator – Programma che ha generato il documento

Un esempio completo di utilizzo del tag META potrebbe essere:

<HEAD>
    <TITLE>Utilizzo del tag META</TITLE>

    <META name="author" content=“Fabio Donatantonio">
    <META name="description“ content=“Tecnologie di Sviluppo per il Web">
    <META name="keywords“ content=“HTTP, HTML, CSS,  JAVASCRIPT">

</HEAD>

Un file HTML è, in origine, un semplice documento di testo non formattato (di tipo ASCII).
Affinché un file contenente codice HTML sia visto come tale da un browser e quindi interpretato è necessario che la sua estensione sia .html o più semplicemente .htm.
Il primo file html che andremo a realizzare avrà come nome ad esempio: index.html.
Per realizzare una pagina html è necessario un semplice editor di testi come ad esempio il Blocco note di Windows o Notepad, o in alternativa programmi più complessi che aiutano il programmatore nella stesura del documento, come ad esempio:

E’ consigliabile, soprattutto per chi è alle prime armi con HTML, non utilizzare nessun strumento che ne faciliti la realizzazione, bensì un semplice ‘Blocco note’ permette di comprendere più a fondo gli elementi fondamentali del linguaggio.

Una volta che si è conclusa la stesura di un file HTML, è necessario aprire il file in un browser per vederne il risultato finale. Si tenga presente che tutti i browser in circolazione permettono la possibilità di visionare il codice sorgente della pagina in visualizzazione, procedura che in molti casi aiuta lo sviluppatore nel correggere eventuali errori.
Di conseguenza è importante sottolineare che gli eventuali errori di sintassi in HTML non vengono segnalati dai browser, bensì i browser tendono sempre a visualizzare a video il documento anche qualora questo sia mal formattato.
Il passo successivo, alla verifica della correttezza del documento, consiste nel salvare il file su un web server in modo che questo sia accessibile dai client attraverso richieste http.

I tag.

I tag sono parole speciali che creano la formattazione del documento (il browser le interpreta e in questo modo sa come comportarsi). Consistono di una parentesi angolare aperta <, seguita da un nome, e da una parentesi angolare chiusa >:

<NOMETAG>… CONTENUTO …</NOMETAG>.

Quindi qualunque comando di formattazione ha la seguente forma:

Esistono tag di apertura e tag di chiusura:

<H1> è un tag di apertura;
</H1> è un tag di chiusura.

Ogni qualvolta in un documento html apriamo un tag è buona norma chiudere il tag onde evitare problemi in fase di visualizzazione.
I tag possono inoltre essere scritti sia in minuscolo che in maiuscolo senza comprometterne l’interpretazione, anche in questo caso è buona norma sceglierne a priori lo stile evitando di mescolare tag minuscoli con maiuscoli.

Gli attributi dei tag.

Gli attributi sono informazioni aggiuntive associate a un tag, aiutando quindi ad associare una particolare proprietà in fase di formattazione dell’elemento.

La sintassi è:

nomeAttributo=“valore”,

che posto all’interno di un tag assume ad esempio tale sintassi:

<nometag nomeAttributo=“valore”>… Contenuto …</nometag> .

Nel momento in cui il browser interpreta il contenuto del tag, associa il valore specificato alla proprietà definita in nomeAttributo. Un esempio reale ed esaustivo può essere:

<div align="center">QUESTO E' UN SEMPLICE TESTO</div>

Abbiamo specificato un blocco “DIV” che contiene all’interno un testo e un attributo che specifica il tipo di allineamento del blocco all’interno della pagina. In questo caso al centro.
La maggior parte degli attributi definiscono regole di visualizzazione e stile ed è quindi buona norma che questi vengano definiti a parte e non all’interno del file html.
Una regola di buona progettazione vuole che si realizzino degli opportuni fogli di stile (CSS) che contengano le regole di visualizzazione degli elementi e quindi gli attributi associati ai singoli tag.

Struttura di un documento Html.

Ogni documento HTML inizia con il tag <HTML> e termina con </HTML>.
Tutto ciò che è racchiuso tra questi due tag è interpretato dal browser come una pagina html.
Il documento viene poi suddiviso in due parti:

• intestazione <HEAD> </HEAD> che contiene il titolo del documento ed altre informazioni non visualizzate dal browser;
• corpo <BODY> </BODY> che contiene il documento vero e proprio.

Lo scheletro di un documento html è quindi il seguente:

L’intestazione (HEAD) fornisce inoltre al browser informazioni importanti sul documento che si vuole visualizzare come ad esempio i file javascript esterni da includere o le regole di stile.
Il BODY è il ‘cuore’ del documento html. Il testo, le immagini, i video, le tabelle, i bottoni, i link sono tutti definiti all’interno del corpo della pagina.
Ecco quindi un primo documento HTML minimale:

<HTML>
    <HEAD>
        <TITLE>Un semplice documento HTML</TITLE>
    </HEAD>
    <BODY>
        Questo &egrave; un semplicissimo documento HTML
    </BODY>
</HTML>

Abbiamo definito un titolo alla pagina (nel tag title) e all’interno del body una stringa di caratteri. Una volta salvato il file con estensione .html possiamo aprirlo all’interno del browser.

Ecco il risultato:

HTML è l’acronimo di HyperText Markup Language e definisce un linguaggio di formattazione del testo per pubblicare documenti sul web.
Il linguaggio HTML non è quindi da definirsi come un vero e proprio linguaggio di programmazione, bensì come “raccoglitore” di parole chiave con le quali identificare le singole parti che compongono una pagina web.
D’altra parte, è nato essenzialmente con l’obiettivo di consentire la definizione di documenti ipertestuali distribuiti su una rete di computer.

Caratterisctiche dell’Html.

Con l’HTML è possibile:

• definire la struttura logica di un documento;
• definire la formattazione tipografica del testo fornendo indicazioni utili per il rendering;
• definire dei collegamenti ipertestuali tra i vari documenti;
• definire l’interfaccia utente di un’applicazione WEB.

Interpretazione di un documento Html.

Il browser è il componente software in grado di leggere un documento scritto in linguaggio HTML interpretandone i comandi e visualizzandolo a video.
Basti considerare le operazioni che solitamente eseguiamo quando siamo connessi ad internet e visualizziamo un sito web. Se ad esempio dovessimo digitare l’indirizzo http://www.google.it/ all’interno del browser, quello che visualizzeremo a video sarà il risultato dell’interpretazione di un documento pervenuto al browser sottoforma di codice HTML.
Nonostante Internet Explorer sia il browser più utilizzato, seguito poi da Mozilla, è importante sapere dell’esistenza di decine di browser e acquisire di conseguenza una mentalità multi-browser. Difatti nonostante un efficace standardizzazione del codice HTML, sovente l’interpretazione da parte di un browser del documento può risultare differente soprattutto qualora entrino in gioco effetti di stile e formattazione non nativa del linguaggio. Tale problematica verrà trattata quando si vedranno i fogli di stile CSS.
E’ quindi necessario sempre “provare” un codice HTML in più browser o almeno in quelli di maggiore utilizzo.

Origine ed evoluzione dell’Html.

L’Html è stato sviluppato alla fine degli anni ottanta da Tim Berners-Lee al CERN di Ginevra assieme al noto protocollo HTTP che supporta invece il trasferimento di documenti in tale formato.
Le specifiche del linguaggio HTML sono state pubblicate dal World Wide Web Consortium (W3C). Questo organismo internazionale, fondato nell’ottobre 1994, è composto da università e aziende private (tra cui IBM, Microsoft, Netscape Communications Corporation, Novell Softquad, Spyglass e Sun Microsystems) e coordinato da LCS (Laboratory for Computer Science). Esso ha lo scopo di guidare lo sviluppo del Web e di definirne gli standard.
HTML è derivato da SGML (Standard Generalized Mark Up Language), uno standard ISO (International Standards Organization) per descrivere linguaggi di formattazione di testi.
Le principali evoluzioni dell’HTML sono state:

• HTML 4.0 (standardizzato nel 1997), che ha introdotto molte caratteristiche rispetto alla precedente versione, ma ha anche deprecato molte delle caratteristiche delle versioni precedenti;
• HTML 4.01 (standardizzato nel 1998), una “ripulitura” della versione 4.0;
• XHTML 1.0 è HTML 4.01 modificato in modo da soddisfare la sintassi XML (Extensible Marked Language, ‘erede’ dell’HTML; mentre quest’ultimo descrive come il testo deve essere presentato sulla pagina web, l’XML riguarda direttamente la classificazione e la strutturazione del contenuto).

L’architettura logica dell’ipertesto, nelle diverse possibili forme descritte nell’articolo precedente, trova un suo luogo di rappresentazione nella pagina elettronica, uno spazio visivo che pur mantenendo la tendenza all’integrazione di regole e forme della pagina del testo cartaceo, ne introduce di nuove legate alle caratteristiche e alle potenzialità specifiche del nuovo media.
E’ importante definire gli elementi che compongono la pagina grafica di un ipertesto e gli effetti prodotti dal loro uso.
Lo spazio di presentazione è rappresentato dalla pagina così come viene visualizzata sul monitor; su questo sfondo si dispongono poi i diversi elementi informativi che la compongono. Già per lo stesso sfondo assumono rilevanza semantica alcune scelte relative al colore utilizzato o sulla simulazione di superfici reali (texture).
Altri elementi grafici che compongono una pagina possono essere linee, forme e oggetti iconici; inoltre a sua volta la pagina può essere suddivisa in più frame ognuno dei quali contiene a sua volta oggetti grafici.
I criteri che guidano queste scelte progettuali riguardano in particolare il peso visivo che assumono i diversi elementi in gioco, le linee di forza visiva che essi generano, i rapporti di equilibrio o di contrasto tra sfondo e figure che si possono trasmettere e più in generale i nuovi significati che si aggiungono con tecniche evocative.
Nell’analisi di dimensione visiva e grafica dell’ipertesto rimane comunque centrale il ruolo giocato dal testo alfabetico attraverso lo spazio che occupa nell’impaginazione.

Lo spazio interattivo dell’ipertesto.

Lo spazio interattivo rappresenta la dimensione funzionale dell’ambiente ipertestuale grazie alla quale il lettore sceglie le diverse possibili modalità di uso dell’ambiente, in definitiva costruisce strategie di lettura, le più vicine alle sue esigenze immediate, al suo stile di consultazione e di apprendimento.
La conoscenza delle forme in cui il dialogo comunicativo si realizza in ambiente ipertestuale consente agli autori e ai progettisti di predisporre i dispositivi di iterazione più idonei che integrano e nello stesso tempo si differenziano da quelli al quale il lettore è abituato nell’uso di altri media.
In questa categoria di strutture si possono riconoscere strumenti di navigazione, di orientamento e di ricerca. Inoltre i browser implementano funzioni standard come cronologia, backtracking e forward che espandono lo spazio interattivo degli ipertesti e forniscono funzioni di aiuto alla navigazione.

I rischi dell’ipertesto: il disorientamento.

La possibilità di lettura multilineare e plurima offerta dagli ipertesti (in particolare dagli ipertesti con struttura a rete) comporta da parte del lettore il rischio di perdersi.
Con il nome di disorientamento spaziale si intende appunto il fenomeno di perdita del controllo del territorio ipertestuale che può interessare il lettore di fronte alla fitta rete di nodi e legami che compone l’ipertesto.
Nella fase di progettazione di un ipertesto va tenuto in grande considerazione questo aspetto e vanno realizzati i cosiddetti punti di riferimento per favorire un “ripristino” della linea di navigazione scelta dal lettore.
Una serie di strumenti (interni all’ipertesto o piuttosto integrati nel browser o più in generale nel visualizzatore) cercano di porre rimedio all’effetto di disorientamento mediante:

- mappe del sito, anche con funzione di indice;
- tasti di navigazione;
- l’uso della grafica per distinguere links interni ed esterni;
- la visualizzazione della lista delle pagine visitate;
- visite guidate all’ipertesto;
- motori di ricerca per parole chiave;
- una funzione segnalibro.

Sarà compito del progettista dell’ipertesto fornire questi strumenti in maniera opportuna.
Di conseguenza la maggior parte dei siti che si rispettino mettono a disposizione degli utenti menu, link rapidi, mappe del sito e motore di ricerca interno.

Realizzazione di un ipertesto.

Nello sviluppo di un ipertesto è necessario porre particolare attenzione alla fase di progettazione.
Lo sviluppatore deve pensare ad una struttura che sia allo stesso tempo aperta e flessibile ma non caotica. Ciascun nodo deve uniformarsi agli altri dal punto di vista visivo e le informazioni devo essere strutturate in blocchi abbastanza brevi e di facile lettura.
E’ controproducente infatti realizzare pagine molto lunghe, con tante informazioni e contenuti; il lettore dinnanzi a queste pagine sarà portato ad abbandonare la lettura non riuscendo a districarsi tra le diverse informazioni di suo interesse.
Inoltre i nodi di informazione devono essere uniti da una loro tematica, evitando quindi “salti” da un argomento all’altro senza che tra questi ci sia un collegamento logico.
Le connessioni tra i nodi devono di conseguenza seguire dei fili logici e al contempo stimolare il lettore ad approfondire particolari argomenti.
A tal proposito è giusto sottolineare che gli oggetti multimediali vanno utilizzati senza abusarne o comunque in modo funzionale ed equilibrato onde evitare fenomeni di disorientamento.
In fine è buona abitudine in fase di progettazione predisporre strumenti che facilitano la navigazione dell’ipertesto.

Quindi in fase di progettazione bisogna:
- scegliere l’argomento da trattare;
- articolare le tematiche dell’argomento scelto;
- definire una mappa di navigazione.

Nella fase di realizzazione bisogna:
- scrivere il contenuto dei nodi di testo;
- definire i legami (link) tra i vari nodi.

Infine nella fase di test bisogna:
- controllare che i legami siano rispondenti ai percorsi logici;
- controllare che non ci sia possibilità di disorientamento;
- verificare la corretta impaginazione delle informazioni.

Lo sviluppo di una argomentazione.

L’operazione della tematizzazione e della sua organizzazione in sottoinsiemi di interesse è di fondamentale importanza e richiede una selezione ben definita e coerente con l’argomento generale che verrà presentato nell’ipertesto.
Si può immaginare una corrispondenza tra gli argomenti scelti e le unità di contenuto da preparare. Ad ogni tema corrisponderà un nodo informativo o un gruppo di nodi che svilupperanno le sotto-tematizzazioni.
In questo modo si eviterà la scelta di temi troppo ampi, che difficilmente potrebbero essere sviluppati in modo efficace evitando il vincolo della pagina sullo schermo.
Un corretto lavoro di articolazione tematica può restituire ai progettisti una prima visione d’insieme già abbastanza chiara e definita delle aree di contenuto da sviluppare e ne prefigura una prima possibile segmentazione negli spazi rappresentativi dei nodi e delle pagine del nostro ipertesto.
Tale visione grafica dell’architettura dei contenuti in via di costruzione è anche una prima visione d’insieme dei percorsi che l’autore intende offrire al lettore. Costruendo in questo modo la mappa dell’ipertesto si adotta una strategia cognitiva di organizzazione dei contenuti che si chiama top-down (dall’alto verso il basso), che si muove dalla struttura generale ai singoli elementi che la compongono.

Gli ipertesti si differenziano tra loro innanzitutto per la tematica di cui trattano.
I primi ipertesti, solitamente distribuiti su supporti CD, erano legati ad opere cartacee come ad esempio libri didattici o manuali. Soprattutto nei primi anni ‘90 era consuetudine trovare in commercio libri che allegavano al loro interno un CD-ROM con un sunto o una schematizzazione degli argomenti trattati nel libro.
Gli ipertesti erano realizzati con appositi programmi e il risultato finale era consultabile attraverso un visualizzatore creato ad hoc da chi distribuiva l’ipertesto.

La seconda differenziazione è nella diversa struttura che un ipertesto può assumere, in relazione alla sequenza di informazioni trattate ciascun autore decide a priori i collegamenti tra i vari argomenti e il loro grado di interconnessione.
Lo spazio logico dell’ipertesto individua quindi la rete di connessioni che legano tra loro i diversi nodi di contenuto. Questi legami identificano la struttura logica di organizzazione delle informazioni.
Attualmente la configurazione di massima di un ipertesto è la cosiddetta struttura a rete (o referenziale); in genere le distinguiamo in: assiale, gerarchica e, appunto, referenziale.

Ipertesti a struttura assiale.

In un ipertesto a struttura assiale i vari nodi si differenziano in nodi primari e nodi secondari. La sequenza di informazioni risulta essere abbastanza lineare, difatti i nodi primari sono interconnessi tra loro in maniera sequenziale ma ciascun nodo primario può indirizzare ad uno o più nodi secondari che solitamente hanno lo scopo di approfondire l’argomento trattato dal nodo primario.

Lo schema è il seguente:

Ipertesti a struttura gerarchica.

In un ipertesto a struttura gerarchica i vari nodi sono posti su livelli diversi.
Ciascun nodo possiede un nodo ‘figlio’, in una sorta di struttura ad albero che ha inizio da un nodo principale (root) che a sua volta definisce uno o più nodi figlio che hanno lo scopo di continuare, tramite un opportuno collegamento, l’argomento trattato dal nodo ‘padre’.
La struttura gerarchica è assimilabile alla struttura di molti siti internet odierni che forniscono tramite una pagina iniziale denominata home (quindi root), una serie di collegamenti a pagine secondarie (o sottosezioni) che trattano tematiche diverse tra loro.
Ciascuna di queste sottosezioni può indirizzare a pagine specifiche di livello più basso.
La navigazione all’interno della struttura gerarchica è dall’alto verso il basso con la presenza di un nodo principale che funge da crocevia per la trattazione di argomenti diversi.

Lo schema è il seguente:

Ipertesti a struttura di rete o referenziale.

In un ipertesto a struttura di rete i nodi sono posti allo stesso livello e interconnessi tra loro in maniera non sequenziale.
Ciascun nodo può avere un collegamento con uno o più nodi e possono esistere nodi che fungono da crocevia per il raggiungimento di un gruppo ben definito di nodi.
In questa struttura il grado di libertà è molto alto ed è compito del progettista dell’ipertesto realizzare i collegamenti tra le varie informazioni in maniera tale che ci si possa orientare senza per questo perdere l’orientamento.
Una struttura di rete è infatti indicata qualora ci siano una grande mole di informazioni da schematizzare e l’ordine di lettura è pienamente libero da sequenze predefinite.
Il lettore può partire da un nodo e raggiungere un altro nodo senza passare per nodi intermedi oppure un testo può indirizzare a più testi di approfondimento che a loro volta linkano a testi di natura diversa.
Molti siti internet moderni utilizzano una struttura di rete per distribuire le informazioni, basti pensare al famoso portale Wikipedia che permette di raggiungere un argomento passando per infiniti argomenti legati tramite parole chiavi o riferimenti.

Lo schema della struttura di rete è il seguente:

Il concetto di rete e condivisione esiste già dalla fine degli anni ‘60, ma solo nei primi anni ‘90 un gruppo di ricercatori del CERN di Ginevra, capitanati da Tim Berners-Lee, Robert Cailliau e Carl Barker cercarono di realizzare il progetto di rendere pubblicamente accessibili documenti di testo interconnessi tra loro e con file di suoni e immagini.
Nonostante fossero fisici gli inventori del web ebbero un’idea di natura profondamente “umanistica”: scrivere, scambiare, archiviare e organizzare informazioni.
Un ipertesto quindi è un tipo di strutturazione delle informazioni in forma non necessariamente unilineare, tipica del mondo digitale, in cui i singoli blocchi di informazione (“nodi”) sono collegati tra di loro da legami (“links”).

La caratteristica principale di un ipertesto è che la lettura può svolgersi in maniera non lineare: qualsiasi documento della rete può essere “il successivo”, in base alla scelta del lettore di quale link (o parola chiave) usare.
Nonostante ciò le somiglianze tra un ipertesto e un testo a stampa di carattere erudito sono più numerose di quanto si pensi.
Nei testi a stampa i sommari, gli indici analitici, i rimandi interni a note di approfondimento e ad apparati iconografici, come anche i rimandi esterni ad altri testi costituiscono altrettanti legami ipertestuali.
L’ipertesto deve il suo successo grazie al fatto che riflette meglio il nostro modo di pensare e il modo in cui funziona il nostro cervello. Di conseguenza non è da vedersi come una tecnologia, ma semplicemente un modo efficiente e logico di organizzare l’informazione.

Le strutture compositive dell’ipertesto.

Come detto le strutture che compongono un ipertesto sono:
il nodo;
il legame;
le mappe di navigazione.

Il nodo ipertestuale è uno spazio di informazione che si identifica con lo schermo del computer e può contenere dati e informazioni di varia natura. La dimensione del nodo dipende esclusivamente dalla volontà dell’autore e comporta scelte di segmentazione o
modularizzazione dell’informazione che si sta organizzando.
Creare informazione modularizzata significa determinare i confini al flusso del discorso, ritagliando il testo in insiemi e sottoinsiemi tematici.
Il link (o legame) è una struttura di collegamento che unisce con estrema facilità e rapidità nodi diversi dell’ipertesto, permettendo in questo modo al lettore la possibilità di esaminare i contenuti secondo un modello di lettura esplorativa.
La mappa di navigazione è un nodo speciale che contiene la rappresentazione grafica di tutti i nodi dell’ipertesto.
Il lettore può utilizzare questo strumento per orientarsi, evitando così fenomeni di disorientamento e allo stesso tempo per muoversi più agevolmente all’interno della rete di nodi e legami. La mappa in definitiva può identificarsi come una sorte di indice o menu che raccoglie i link ai vari nodi.

Non sequenzialità e multilinearità dell’ipertesto.

Il carattere non sequenziale dell’ipertesto non esclude una sua particolare forma di linearità.
Negli ambienti ipertestuali si procede per scelta del lettore che seleziona, secondo i suoi criteri di curiosità e di conoscenza, percorsi di lettura associativa, in taluni casi neanche prevedibili dallo stesso autore che li ha predisposti.
Il risultato di questo attraversamento rimane comunque una linea sulla quale si collocano in successione i nodi di testo, così come vengono ordinati dall’azione del singolo lettore. Per questo motivo si può parlare di multi-linearità dell’ipertesto.

Dall’ipertesto all’ipermedia.

In origine l’ipertesto era composto esclusivamente da una serie di testi e conseguenti link di collegamento.
Ciascun testo era organizzato in maniera semplice, solitamente un titolo e quindi il testo nel quale comparivano di tanto in tanto riferimenti ad altri testi raggiungibili attraverso l’utilizzo delle parole evidenziate.
Lo sviluppo sempre maggiore della tecnologia informatica e la conseguente progettazione e realizzazione di strumenti per la visualizzazione dei contenuti ha permesso l’evoluzione degli ipertesti verso la multimedialità.
Grazie al moderno PC si è automatizzato il passaggio da un documento all’altro e il proliferare di interfacce grafiche ha dato vita a numerosi ipertesti con un livello di interattività sempre maggiore.
Basti pensare che oggi qualunque ipertesto è multimediale perché oltre che a contenere e organizzare informazioni testuali, ingloba al suo interno immagini, suoni, video e animazioni.
Un’ipermedia non è altro che l’evoluzione naturale degli ipertesti verso il mondo web che attualmente ci circonda, composto non solo da testo ma da numerosi oggetti multimediali.

A tal proposito realizzeremo una funzione in PHP che chiameremo semplicemente filtro; la quale ammetterà come parametro d’input una stringa di testo, contenente appunto il messaggio da filtrare.
La nostra funzione sostituirà le parole incriminate con degli asterischi, lasciando però inalterali il primo e l’ultimo carattere che la compongono.
Se ad esempio volessimo filtrare dal messaggio tutte le ricorrenze della parola gratis, vedremmo al suo posto la parola: g****s.
Vediamo quindi il codice della funzione filtro:

<?php
  $parole = "gratis,sesso,acquista,visitami";

  function filtro($testo){
      global $parole;
      $app = split(',',$parole);
      for($i=0; $i<count($app); $i++){
          if(stripos($testo,$app[$i])!==false){
              $sostituta = substr($app[$i],0,1);
              for($j=1; $j<strlen($app[$i])-1; $j++){
                   $sostituta=$sostituta.'*';
              }
              $sostituta = $sostituta.substr($app[$i],-1);
              $testo = str_ireplace($app[$i],$sostituta,$testo);
          }
      }
      return $testo;
  }
?>

La funzione utilizza essenzialmente cinque funzioni PHP per la manipolazione delle stringhe:

- split
- stripos
- strlen
- substr
- str_ireplace

Da notare innanzitutto la presenza di una variabile parole definita a livello globale, che conterrà appunto la sequenza di parole, separate da virgola(,), da filtrare.
Per personalizzare il codice è sufficiente aggiungere le stringhe da filtrare nella variabile parole.
Tornando alla funzione, vediamo per grandi linee le operazioni che essa effettua sul testo in input:

1. Preleva tutte le parole da filtrare (split)
2. Cerca ciascuna parola nel messaggio di input (stripos)
3. Realizza una parola sostitutiva calcolata sulla lunghezza dell’originale (strlen)
4. La parola sostitutiva mantiene il carattere iniziale e finale dell’originale (substr)
5. La parola incriminata viene sostituita (str_ireplace)

Infine il messaggio viene restituito pulito.
La funzione, una volta salvata in un file separato(ad esempio filtro.php) verrà così invocata:

// Richiamo alla funzione
require('filtro.php');

// Chiamata alla funzione su testo $messaggio
$stringa_pulita = filtro($messaggio);

La funzione può tornare molto utile anche qualora si desiderasse eliminare dal messaggio link o url poco graditi. Basterà, come già detto sopra, aggiungere le stringhe da controllare alla variabile globale $parole, prestando attenzione a separare ciascuna da una virgola.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

• addAccount(initialBalance, customerName)
• deposit(accountNumber, amount)
• withdraw(accountNumber, amount)
• getBalance(accountNumber)
• transfer(fromAccNumber, toAccNumber, amount)

La classe BankAccount fornirà i classici metodi per il deposito e il prelievo nonchè i metodi per la restituzione delle informazioni in esso contenute.
Realizzare inoltre una classe di test.

La classe BankAccount.java:

public class BankAccount
{

  // Metodo Costruttore inizializzato con nome proprietario, saldo e numeroAcc
  public BankAccount(double a, String n, int num)
  {
      acconto = a;
      nome = n;
      numAcc = num;
  }

  // Metodo per il deposito di denaro nel conto
  public void deposit(double s)
  {
      double temp = acconto;
      acconto = temp + s;
  }

  // Metodo per il prelievo di denaro dal conto
  public void withdraw(double s)
  {
      double temp = acconto;
      acconto = temp - s;
  }

  // Metodo che restituisce il valore del conto
  public double getBalance()
  {
      return acconto;
  }

  // Metodo che restituisce il numero di conto
  public int getNumber()
  {
      return numAcc;
  }

  // Metodo che restituisce il numero di conto
  public int getName()
  {
      return nome;
  }

  private int numAcc;
  private double acconto;
  private String nome;
}

La classe Bank che gestisce la collezione di BankAccount:

import java.util.ArrayList;
public class Bank
{
ArrayList<BankAccount> banca;

  // Metodo Costruttore
  public Bank()
  {
      this.banca = new ArrayList<BankAccount>();
  }

  // Metodo che aggiunge un nuovo conto nella banca
  public void addAccount(double b, String nome)
  {
      int i = banca.size() + 1;
      BankAccount  bk = new BankAccount(b,nome,i);
      banca.add(bk);
  }

  // Metodo che permette di depositare denaro in un conto daro il numeroConto
  public void deposit(int n , double s)
  {
      for(int j=0; j<banca.size(); j++)
      {
          BankAccount temp = (BankAccount) banca.get(j);
          int number = temp.getNumber();
          if(number == n)
          {
              temp.deposit(s);
          }
      }
  }

  // Metodo che permette di sottrarre una somma a un conto dato un numeroConto
  public void withdraw(int n,double s)
  {
       for(int j=0; j<banca.size(); j++)
       {
          BankAccount temp = (BankAccount) banca.get(j);
          int number = temp.getNumber();
          if(number == n)
          {
              temp.withdraw(s);
          }
       }
  }

  //Metodo che restituisce il valore del conto dato un numeroConto
  public String getBalance(int n)
  {
      for(int j=0; j<banca.size(); j++)
      {
           BankAccount temp = (BankAccount) banca.get(j);
           if(temp.getNumber()==n){
                return "Conto codice "+temp.getNumber()+" con importo "+temp.getBalance();
           }
      }
      return "Conto non trovato!";
  }

  // Metodo che trasferisce una somma di denaro da un conto ad un altro
  public boolean transfer(int n1, int n2, double d)
  {
	  BankAccount uscita = null;
	  BankAccount entrata = null;
	  for(int j=0; j<banca.size(); j++)
	  {
		  BankAccount temp = (BankAccount) banca.get(j);
		  if(temp.getNumber()==n1){
			  uscita = temp;
		  }
		  if(temp.getNumber()==n2){
			  entrata = temp;
		  }
	  }
	  if(uscita!=null && entrata!=null){
		  uscita.withdraw(d);
		  entrata.deposit(d);
		  return true;
	  }
	  return false;
  }
}

La classe di test:

public class TestaBanca
{
  public static void main(String[] args)
  {
    // Creo un nuovo oggetto Bank
    Bank prova = new Bank();

    // Aggiungo 4 nuovi conti
    prova.addAccount(2000,"Marco Rossi");
    prova.addAccount(1000,"Enzo Bianchi");
    prova.addAccount(500,"Lucia Neri");
    prova.addAccount(700,"Silvia Rossini");

    // Effettuo alcune operazioni sui conti
    prova.deposit(1,200);
    prova.withdraw(2,1000);

    // Visualizzo a video lo stato dei conti presenti nella banca
    System.out.println(prova.getBalance(1));
    System.out.println(prova.getBalance(2));
    System.out.println(prova.getBalance(3));
    System.out.println(prova.getBalance(4));

    // Trasferisco una somma di denaro da un conto all'altro
    double somma = 100;
    if(prova.transfer(1, 2, somma)==true){
    	System.out.println("Trasferimento denaro avvenuto correttamente!");
    }else{
    	System.out.println("Errore nel trasferimento di denaro!");
    }

    // Ristampo lo stato dei due conti soggetti a trasferimento denaro
    System.out.println(prova.getBalance(1));
    System.out.println(prova.getBalance(2));
  }
}

• start() – Per avviare il processo di cache della pagina
• stop() – Per concludere il processo di cache della pagina
• paginaCorrente() – Per prelevare il nome della pagina corrente

Inoltre il costruttore della classe acquisisce due parametri:

• Il periodo di validità di un file in cache (espresso in minuti)
• Il percorso relativo per la cartella di cache

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

Vediamo subito il codice della classe PhpCache:

<?php
class PhpCache{
	var $durata;
	var $cache_url;
	var $nome_pagina;

	/*
                Costruttore - i parametri sono:
	   i minuti di vita della cache e il percorso della cartella di cache
	*/
	function PhpCache($minuti,$percorso){
		$this->durata = intval($minuti) * 60;
		$this->cache_url = $percorso;
	}

	// Funzione di start della cache
	function start(){
		// Start dell'output buffer
		ob_start();
		// prelevo il nome della pagina attuale e creo il percorso nella cache
		$this->nome_pagina = $this->cache_url."".$this->paginaCorrente();
		/* se il file esiste in cache e la versione è ancora valida rispetto al tempo di vita
		   allora includo il file in cache e non vado oltre
		*/
		if (file_exists($this->nome_pagina) && ((time() - $this->durata) < filemtime($this->nome_pagina)))
		{
			include($this->nome_pagina);
			exit;
		}
	}

             // Funzione di stop della cache
	function stop(){
		// Scriviamo il contenuto del buffer nel file di cache
		$file = fopen($this->nome_pagina, 'w');
		fwrite($file, ob_get_contents());
		fclose($file);
		// Chiudiamo il buffer
		ob_end_flush();
	}

	// Metodo che restituisce il nome della pagina [eventuali parametri compresi]
	function paginaCorrente() {
		$pagina_corrente = $_SERVER["SERVER_NAME"].$_SERVER['REQUEST_URI'];
		$pezzi = explode("/",$pagina_corrente);
		$pagina_corrente = $pezzi[count($pezzi)-1];
		return $pagina_corrente;
	}
}
?>

Per capire come funziona questa classe possiamo innanzitutto dire che:
tutto il codice compreso tra la chiamata al metodo start() e la chiamata al metodo stop() viene messo in cache

Lo start() ha innanzitutto il compito di aprire un buffer di output (ob_start()) in modo da convogliare tutto il codice di echo e html in una unica variabile, inoltre verificare se la pagina richiesta sia già presente in cache e sia ancora valida:

ob_start();
$this->nome_pagina = $this->cache_url."".$this->paginaCorrente();
if (file_exists($this->nome_pagina) && ((time() - $this->durata) < filemtime($this->nome_pagina)))
{
	include($this->nome_pagina);
	exit;
}

A tale scopo è di supporto il metodo paginaCorrente() che restituisce il nome della pagina richiesta, compreso di eventuali parametri in GET.
Il metodo di stop() ha il compito di salvare il contenuto del buffer nel file in cache, in modo tale che ad una nuova apertura della pagina il metodo di start() possa verificarne la presenza.

La classe va utilizzata quindi nel seguente modo:

require_once('phpCache.php');

$cache = new PhpCache(10,'cache/');
$cache->start();

// segue il codice php/html
// ...

$cache->stop();

Nel costruttore abbiamo, ad esempio, scelto di rendere validi i file in cache per 10 minuti e salvare quest’ultimi in una cartella denominata cache/.

In conclusione è possibile scaricare e provare il codice. A tal proposito si consiglia di verificare il salvataggio in cache della pagina d’esempio controllando l’orario che questa stampa a video.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Deve essere possibile recuperare l’informazione contenuta in ogni oggetto Coin oltre che implementare i seguenti metodi:

• addCoin(Coin aCoin): aggiungere una moneta al portafoglio
• conteggio(String nomeCoin): conta il numero di monete dato un nome moneta
• getTotal(): restituisce il totale monete presenti nel portafoglio
• remove(Coin aCoin): rimuove una moneta di valore pari a a Coin se presente nella borsa
• find(Coin aCoin): restituisce l’indice di una moneta di valore pari a Coin (private)

Vediamo innanzitutto la semplice classe Coin.java:

public class Coin
{
	double valore;
	String nome;

	// Metodo Costruttore Coin inizializzato con nome moneta e relativo valore
	public Coin(double v, String n){
		valore = v;
		nome = n;
	}

	// Metodo che restituisce il valore della moneta
	public double getValue(){
		return valore;
	}

	// Metodo che restituisce il nome della moneta
	public String getNome(){
		return nome;
	}
}

Quindi la classe che gestisce la collezzione di monete Purse.java:

import java.util.ArrayList;
public class Purse
{
private ArrayList<Coin> lista;

  	// Metodo Costruttore vuoto
  	public Purse(){
  		this.lista = new ArrayList<Coin>();
  	}

  	public void addCoin(Coin c){
  		lista.add(c);
  	}

  	// Metodo che restituisce il totale di monete presenti nel portafoglio
  	public void getTotal()
  	{
  		double totale = 0;
  		for(int i=0 ; i<lista.size(); i++)
  		{
  			Coin a = (Coin) lista.get(i);
  			double t = a.getValue();
  			totale = totale + t;
  		}
  		System.out.println(totale);
  	}

  	/* Metodo che conta il numero di monete presenti nel portafoglio
       data una moneta
  	 **/
  	public int conteggio(String nome)
  	{
  		int c = 0;
  		for(int i=0 ; i<lista.size(); i++)
  		{
  			Coin a = (Coin) lista.get(i);
  			String m = a.getNome();
  			if(m.equalsIgnoreCase(nome))
  			{
  				c++;
  			}
  		}
  		return c;
  	}

  	// Metodo che elimina una moneta dal portafolio
  	public String remove(Coin a)
  	{
  		String nome = a.getNome();
  		int i =0;
  		while (i < lista.size())
  		{
  			Coin b = (Coin) lista.get(i);
  			String v = b.getNome();
  			if(v.equalsIgnoreCase(nome))
  			{
  				lista.remove(i);
  				return "Moneta eliminata";
  			}
  			i++;
  		}
  		return "Moneta non presente";
  	}

  	// Metodo che verifica l'uguaglianza tra due monete
  	public boolean find(Coin a)
  	{
  		String nome = a.getNome();
  		int i =0;
  		while (i < lista.size())
  		{
  			Coin b = (Coin) lista.get(i);
  			String v = b.getNome();
  			if(v.equalsIgnoreCase(nome))
  			{
  				return true;
  			}
  			i++;
  		}
  		return false;
  	}
}

Infine una classe di test che permette all’utente di accedere, tramite un menu, alle funzioni di aggiunta moneta, rimozione moneta, stampa del saldo, conteggio e ricerca di monete.
La classe TestPurse.java:

import java.util.Scanner;
public class TestPurse {

	public static void main(String[] args)
	{
		// Costruisco un oggetto Purse
		Purse fabio = new Purse();
		Scanner in = new Scanner(System.in);

		String exit = "no";

	    // Visualizzo le varie procedure possibili
	    while (exit.equalsIgnoreCase("no"))
	    {
		    System.out.println("  *** MENU *** ");
		    System.out.println("1 - Aggiungere monete");
		    System.out.println("2 - Sottrarre monete");
		    System.out.println("3 - Cercare una moneta");
		    System.out.println("4 - Stampare il totale borsa");
		    System.out.println("5 - Esci");

		    int menu= in.nextInt();
		    String continua = "si";
		    String continua2 = "si";
		    // Aggiungo monete al portafoglio
		    if(menu == 1){
		    	while (continua.equalsIgnoreCase("si")){
			        System.out.println("Quale moneta vuoi aggiungere alla borsa?");
			        System.out.println("1 - 1 Euro");
			        System.out.println("2 - 2 Euro");
			        System.out.println("3 - 50 Centesimi di Euro");
			        System.out.println("4 - 20 Centesimi di Euro");

			        int scelta = in.nextInt();

			        if(scelta == 1){
			        	Coin moneta = new Coin(1,"Un Euro");
			        	fabio.addCoin(moneta);
			        }
			        if(scelta == 2){
			        	Coin moneta = new Coin(2,"Due Euro");
			        	fabio.addCoin(moneta);
			        }
			        if(scelta == 3){
			        	Coin moneta = new Coin(0.50,"50 Centesimi");
			        	fabio.addCoin(moneta);
			        }
			        if(scelta == 4){
			        	Coin moneta = new Coin(0.20,"20 Centesimi");
			        	fabio.addCoin(moneta);
			        }
			        // Stampo a video il contenuto del portafoglio
			        System.out.print("Nella tuo portafoglio è presente questa somma: ");
			        fabio.getTotal();
			        System.out.print("Vuoi continuare a inserire monete?");
			        continua = in.next();
		    	}
		    }
		    // Elimino monete dal portafoglio
		    if(menu == 2){
		    	while ( continua2.equalsIgnoreCase("si")){
		            System.out.println("Quale moneta vuoi eliminare dalla borsa?");
		            System.out.println("1 - 1 Euro");
		            System.out.println("2 - 2 Euro");
		            System.out.println("3 - 50 Centesimi di Euro");
		            System.out.println("4 - 20 Centesimi di Euro");

		            int scelta = in.nextInt();

		            if(scelta == 1){
		               Coin daEliminare = new Coin(1,"Un Euro");
		               System.out.println(fabio.remove(daEliminare));
		            }
		            if(scelta == 2){
		                Coin daEliminare = new Coin(2,"Due Euro");
		                System.out.println(fabio.remove(daEliminare));
		            }
		            if(scelta == 3){
		                Coin daEliminare = new Coin(0.50,"50 centesimi");
		                System.out.println(fabio.remove(daEliminare));
		            }
		            if(scelta == 4){
		                Coin daEliminare = new Coin(0.20,"20 centesimi");
		                System.out.println(fabio.remove(daEliminare));
		            }
		            // Stampo a video il contenuto del portafoglio
		            System.out.print("Nella tua borsa è presente questa somma: ");
		            fabio.getTotal();
		            System.out.print("Vuoi continuare a eliminare monete?");
		            continua2 = in.next();
		    	}
		    }

		    // Cerco una moneta nel portafoglio
		    if (menu == 3){
		        System.out.println("Quale moneta vuoi cercare nella borsa?");
		        System.out.println("1 - Un Euro");
		        System.out.println("2 - Due Euro");
		        System.out.println("3 - 50 Centesimi");
		        System.out.println("4 - 20 Centesimi");

		        int scelta = in.nextInt();

		        if(scelta == 1){
		               Coin daCercare = new Coin(1,"Un Euro");
		               System.out.println(fabio.find(daCercare));
		        }
		        if(scelta == 2){
		                Coin daCercare = new Coin(2,"Due Euro");
		                System.out.println(fabio.find(daCercare));
		        }
		        if(scelta == 3){
		                Coin daCercare = new Coin(0.50,"50 centesimi");
		                System.out.println(fabio.find(daCercare));
		        }
		        if(scelta == 4){
		                Coin daCercare = new Coin(0.20,"20 centesimi");
		                System.out.println(fabio.find(daCercare));
		        }
		    }

		    // Stampo a video il contenuto del portafoglio
		    if(menu == 4){
		    	System.out.print("Il totale della borsa è : ");
		    	fabio.getTotal();
		    }

		    // Termino esecuzione
		    if (menu == 5){
		    	exit = "si";
		    }
	    }
        }
}

Cliccando qui è possibile scaricare l’eseguibile.

• Crea due conti correnti uno (conto giocatore) con importo iniziale pari a 1000 euro ed uno (conto casinò) con importo iniziale pari a 100000 euro.
• Prende in input da tastiera un intero n e un double somma e simula il lancio di un dado (con 6 facce). Se il risultato del lancio è n allora il programma trasferisce un importo pari a 5 volte il valore di somma dal conto del casinò al conto del giocatore; se il risultato è diverso da n il programma trasferisce un importo pari a somma dal conto del giocatore a quello del casinò. Il valore di somma deve essere inferiore al saldo del vostro conto e 5 volte più piccolo di quello del conto del casinò.
• Se dopo la scommessa il giocatore dispone ancora di soldi sul conto, il programma chiede se volete continuare a scommettere. Se digitate “si” il programma continua dal punto 2. Se digitate qualcosa di diverso da “si” oppure il saldo è zero il programma si interrompe stampando il saldo del vostro conto.

Infondo all’esercizio è possibile lanciare e scaricare l’eseguibile.

Innanzitutto il codice della classe Dado.java:

import java.util.Random;
public class Dado {
	// Metodo Costruttore. Numero di facce impostato a 6.
	public Dado()
	{
		facce = 6;
		generatore = new Random();
	}

	// Metodo che simula il lancio del dado
	public int lancia()
	{
		return 1 + generatore.nextInt(facce);
	}

	private Random generatore;
	private int facce;
}

Quindi le classi per gestire i due conti.
ContoGiocatore.java:

public class ContoGiocatore
{
	double contoGio;

	// Metodo Costruttore inizializzato con un valore double
	public ContoGiocatore(double c)
	{
		contoGio = c;
	}

	// Metodo che restituisce l'importo del conto giocatore
	public double getContoGiocatore()
	{
		return contoGio;
	}

	// Metodo che permette di sottrarre la somma persa dal giocatore
	public void sottraiContoGiocatore(double s)
	{
		double temp = contoGio;
		temp = temp - s;
		contoGio = temp;
	}

	/** Metodo che permette di aggiungere la somma vinta dal giocatore.
      Somma vinta = somma giocata * 5.
	 */
	public void aumentaContoGiocatore(double s)
	{
		double temp = 5*s;
		contoGio = contoGio + temp;
	}
}

ContoCasino.java:

public class ContoCasino
{
	double contoCas;

	// Metodo Costruttore ContoCasinò inizializzato con un valore double
	public ContoCasino(double c)
	{
		contoCas = c;
	}

	// Metodo che restituisce l'importo del conto casinò
	public double getContoCasino()
	{
		return contoCas;
	}

	/** Metodo che permette di sottrarre una somma vinta da un giocatore
        al conto del casinò.
        La somma sottratta è pari alla somma giocata dal giocatore moltiplicata
        per cinque.
	 */
	public void sottraiContoCasino(double s)
	{
		double temp = contoCas;
		double temp1 = s*5;
		temp = temp - temp1;
		contoCas = temp;
	}

	/** Metodo che permette di aggiungere una somma persa da un giocatore
        al conto del casino
	 */
	public void sommaContoCasino(double s)
	{
		double temp = contoCas;
		temp = temp + s;
		contoCas = temp;
	}
}

Quindi infine la classe di test che si chiamerà VaiAlCasino.java:

import java.util.Scanner;
public class VaiAlCasino
{

	public static void main(String[] args)
	{
		Scanner in = new Scanner(System.in);

		// Costruisco un oggetto dado
		Dado d = new Dado();

		// Costruisco un nuovo oggetto giocatore e uno casinò
		ContoGiocatore fabio = new ContoGiocatore(1000);
		ContoCasino casino = new ContoCasino(100000);

		String verifica = "si";
		System.out.println("*** BENVENUTI AL CASINò ***");

		// Simulo la giocata
		while ( verifica.equalsIgnoreCase("si"))
		{
			// Scelgo un numero del dado
			System.out.println("Scegli un numero:");
			int num = in.nextInt();
			if(num>0 && num<7)
			{
				// Punto una somma di denaro
				System.out.println("Punta una somma di denaro: ");
				System.out.print("(ricorda che il tuo credito è pari a " + fabio.getContoGiocatore());
				System.out.println(" )");
				double somma = in.nextDouble();

				double contoG = fabio.getContoGiocatore();
				double contoC = casino.getContoCasino();
				double contoCc = contoC/5;

				// Verifico la puntata e il budget del casinò
				if ( somma <= contoG && somma <= contoCc)
				{
					// Simulo il lancio del dado
					System.out.println("Lancio il dado...");
					int lancio = d.lancia();
					System.out.print("Il risulatato del dado è :  ");
					System.out.println(lancio);

					// Verifico se il giocatore vince o perde
					if ( lancio == num)
					{
						System.out.println("Complimenti hai vinto");
						fabio.aumentaContoGiocatore(somma);
						casino.sottraiContoCasino(somma);
					}else{
						System.out.println("Peccato, hai perso");
						casino.sommaContoCasino(somma);
						fabio.sottraiContoGiocatore(somma);
					}

				}else{
					System.out.println("Non puoi puntare quella somma");
				}

				double newSomma = fabio.getContoGiocatore();

				// Verifico se il giocatore può continuare a giocare
				if ( newSomma > 0)
				{
					// Il giocatore sceglie se continuare a giocare
					System.out.println("Vuoi continuare a scommettere?");
					verifica = in.next();
					System.out.print("Il tuo conto è pari a :  ");
					System.out.println(fabio.getContoGiocatore());
				}else{
					System.out.println("CONTO ESAURITO");
					System.out.println(fabio.getContoGiocatore());
					verifica = "no";
				}
			}
		}
	}
}

Cliccando qui è possibile scaricare l’eseguibile.

La classe ContaOccorrenze.java:

public class ContaOccorrenze {
	String testo;

	// Il costruttore inizializza il testo sul quale effettuare la ricerca
	public ContaOccorrenze(String txt){
		this.testo = txt;
	}

	// Il metodo conta acquisisce in input la parola da cercare
	public int conta(String parola){
		// Calcolo la lunghezza del testo e della parola
	    int lunghezza_parola = parola.length();
	    int lunghezza_testo = testo.length();

	    // Definisco due variabili: un indice per il testo e un contatore
	    int indice = 0;
	    int numeroParole = 0;

	    // Fin quando l'indice del testo è valido
	    while (indice <= lunghezza_testo-lunghezza_parola){
	    	// Controllo se la substring del testo è uguale alla parola
	    	if(testo.subSequence(indice, indice+lunghezza_parola).equals(parola)){
	    		numeroParole++;
	    	}
	    	// L'indice aumenta ad ogni iterazione
	    	indice++;
	    }
	    return numeroParole;
	}
}

La classe di test ContaParola.java:

import java.util.Scanner;
public class ContaParola
{
	public static void main(String[] args)
	{
		Scanner in = new Scanner(System.in);

	    // Prendo in input un testo
	    System.out.println("Scrivi un testo: ");
	    String testo = in.nextLine();

	    // Prendo in input una lettera da cercare nel testo
	    System.out.println("Dammi una parola da ricercare e conteggiare: ");
	    String parola = in.nextLine();

               // Istanzio l'oggetto ContaOccorrenze
	    ContaOccorrenze contatore = new ContaOccorrenze(testo);
               // Invovo il metodo che restituisce il numero di occorrenze di parola in testo
	    int occorrenze = contatore.conta(parola);

	    System.out.println("La parola è presente : ");
	    System.out.println(occorrenze + " volte");
	}
}

La classe PrimeGenerator.java:

public class PrimeGenerator
{
	int numero;

  	// Metodo Costruttore vuoto
	public PrimeGenerator(int n){
		this.numero = n;
		nextPrime(2);
	}

	// Metodo che calcola i numeri primi compresi tra 1 e n
	public void nextPrime(int n)
	{
	    int posMax = (int)Math.sqrt(n + 1);

	    for(int divisore = 2; divisore <= posMax; divisore++){
	    	if (n % divisore == 0 && n!=2){
	    		if(n<=numero){
	    			nextPrime(n+1);
	    		}
	    		return;
	    	}
	    }
	    System.out.println(n);
	    if(n<=numero){
	    	nextPrime(n+1);
	    }
	}
}

La classe di test:

import java.util.Scanner;
public class TestPrime
{
	public static void main(String[] args){
		Scanner in = new Scanner(System.in);

		// Prendo in input un numero
		System.out.println("Dammi un numero: ");
		int num = in.nextInt();

		PrimeGenerator NumeriPrimi = new PrimeGenerator(num);

	}
}

Il mittente e il destinatario si accordano su un indice di cifratura che dovrà rimanere segreto. Quest’indice è essenzialmente una lettera dell’alfabeto ordinato.
In base a questo indice si effettuerà la cifratura/decifratura, sottoponendo di volta in volta una lettera del disco interno e mobile.
In relazione agli alfabeti visti sopra, se ad esempio la lettera “indice” fosse la “A” e si decidesse di cifrare con lettera “chiave” uguale a “s” si otterrebbe il seguente disco cifrante (abbiamo ruotato di n posizioni l’alfabeto mischiato):

A questo punto cifriamo la frase: CIAO MAMMA

CIAO MAMMA = Scgsy bsbbs

Sostituendo a ciascuna lettera in chiaro del disco superiore, la sottostante lettera cifrata del disco inferiore si ottiene il testo cifrato. Da notare la prima lettera in maiuscolo (la R) che indica appunto la lettera chiave di cifratura utile al destinatario per interpretare il messaggio.
Dopo aver cifrato alcune lettere si inserisce una nuova lettera maiuscola che indica il cambio delle lettera chiave, ruotando appunto il disco mobile e ottenendo una nuova cifratura.
Il cifrario di Alberti è quindi a tutti gli effetti una sostituzione polialfabetica con alfabeti mischiati cambiati saltuariamente in modo segreto.

Veniamo ora al nostro codice PHP che ci permette di implementare tale cifrario.
Realizzeremo una classe denominata Alberti che farà uso di due array contenenti il primo l’alfabeto ordinato e in maiuscolo e il secondo un alfabeto mischiato in minuscolo.
Nel costruttore della classe acquisiamo due lettera:

• La lettera indice dell’alfabeto ordinato
• La lettera chiave dell’alfabeto mischiato

Infine forniremo tre metodi:

• Stampa del disco ottenuto
• Cifratura
• Decifratura

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

Vediamo il codice della classe:

<?php
class Alberti{
	var $fisso = array('A','B','C','D','E','F','G','H','I','J','K','L','M', 'N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
	var $disco = array('t','d','v','h','a','r','s','z','c','p','e','w', 'i','x','g','u','k','m','b','l','y','f','j','o','n','q');
	var $posizione;
	function Alberti($base, $partenza){
		// Scegliamo la lettera di base che andrà in posizione 0
		$this->posizione = array_search(strtoupper($base),$this->fisso);
		$app1 = array_slice($this->fisso,0,$this->posizione);
		$app2 = array_slice($this->fisso,$this->posizione);
		$this->fisso = array_merge($app2,$app1);
		// Ruotiamo il disco interno in base alla lettera di partenza che andrà in posizione 0
		$rotazione = array_search(strtolower($partenza),$this->disco);
		$app1 = array_slice($this->disco,0,$rotazione);
		$app2 = array_slice($this->disco,$rotazione);
		$this->disco = array_merge($app2,$app1);
	}

	function stampa(){
		echo "<table border='1'><tr><td>Disco esterno</td>";
		for($i=0; $i<count($this->fisso); $i++){
			echo "<td>".$this->fisso[$i]."</td>";
		}
		echo "</tr><tr><td>Disco interno</td>";
		for($i=0; $i<count($this->disco); $i++){
			echo "<td>".$this->disco[$i]."</td>";
		}
		echo "</tr></table>";
	}

	function cifratura($testo){
		$txt_cifrato = strtoupper($this->disco[0])."";
		for($i=0; $i<strlen($testo); $i++){
			$chr_t = substr($testo,$i,1);
			if(in_array(strtoupper($chr_t),$this->fisso)){
				$pos = array_search(strtoupper($chr_t),$this->fisso);
				$txt_cifrato = $txt_cifrato.$this->disco[$pos];
			}else{
				$txt_cifrato = $txt_cifrato.$chr_t;
			}
		}
		return $txt_cifrato;
	}

	function decifratura($cifrato){
		$txt_chiaro = "";
		for($i=1; $i<strlen($cifrato); $i++){
			$chr_t = substr($cifrato,$i,1);
			if(in_array(strtolower($chr_t),$this->disco)){
				$pos = array_search(strtolower($chr_t),$this->disco);
				$txt_chiaro = $txt_chiaro.$this->fisso[$pos];
			}else{
				$txt_chiaro = $txt_chiaro.$chr_t;
			}
		}
		return $txt_chiaro;
	}
}
?>

L’alfabeto del disco mobile (quello mischiato) è stato scelto in modo del tutto arbitrario, è possibile modificarlo per ottenere cifrature sempre diverse.
Nel costruttore, in relazione alle due lettere acquisite, vengono ruotati gli alfabeti in modo tale da far coincidere in posizione 0 (zero) le due lettere scelte per la cifratura.
A tale scopo viene utilizzato una funzione php molto utile, array_slice, che ci permette di tagliare un array ottenendo un sottoarray:

$app1 = array_slice($this->disco,0,$rotazione);
$app2 = array_slice($this->disco,$rotazione);

Una volta riuniti i due sottoarray in ordine inverso si ottine la rotazione dell’alfabeto.
Grazie a questi due array la cifratura e decifratura si limita ad una sostituzione di lettere in base alla loro posizione.

La sintassi per utilizzare questa classe è la seguente:

<?php
require_once 'alberti.php';
$alberti = new Alberti($lettera_indice,$lettera_chiave);
$alberti->stampa();
$txt_cifrato = $alberti->cifratura($testo);
$txt_decifrato = $alberti->decifratura($txt_cifrato);
?>

Alcune considerazioni finali sono d’obbligo; l’algoritmo implementato non tiene conto di alcune varianti presenti nella cifratura di Alberti, riguardanti ad esempio le lettere doppie e i numeri.
Per ottenere una sostituzione polialfabetica basta poi invocare la classe più volte cambiando di conseguenza la lettera chiave dell’alfabeto mischiato.

All’interno della cartella contenente il codice completo sono presenti i seguenti file:

• alberti.php (la classe vista sopra)
• test.php (lo script che effettua la cifratura/decifratura)
• index.html (un form per il test di coppie chiave-testo in chiaro)

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

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.

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/

Vediamo innanzitutto la parte html che oltre ad essere molto semplice ci fornisce una prima idea di come sarà il nostro news ticker:

<div id='box'>
     <div id='intestazione'>
          <div id='titolo'>Le News</div>
          <img id='chiudi' src='chiudi.png' border='0' alt='Chiudi' align='right'/>
     </div>
     <p>... Testo della news numero 1 ...</p>
     <p>... Testo della news numero 2 ...</p>
     <p>... Testo della news numero 3 ...</p>
     <p>... Testo della news numero 4 ...</p>
</div>

La regola per riempire il box è semplice:
il testo di ciascuna news è in un paragrafo (<p>) diverso.
Questa sintassi va necessariamente rispettata perchè solo in questo modo Javascript sarà in grado di leggere il contenuto del box riconoscendo le news che lo compongono.
All’interno del paragrafo siamo liberi di definire link, immagini o oggetti oltre al classico testo.
Passiamo quindi al codice Javascript che si compone essenzialmente di 5 funzioni. Il numero di funzioni non deve spaventare, infatti alcune di esse si compongo di poche righe. Tale scelta nasce dall’esigenza di suddividere e organizzare il codice in maniera logica e funzionale.

// VELOCITA' TRANSIZIONE NEWS (ESPRESSA IN SECONDI)
var speed = 5;

// VARIABILI GLOBALI (NOTIZIE SARA' L'ARRAY CHE CONTERRA' LE NEWS)
var index = 0;
var limite = 0;
var notizie = null;
var rotazione = null;

// FUNZIONE DA CHIAMARE ALLO START DEL BOX NEWS
function start(id_div){
	var box = document.getElementById(id_div);
	$(box).mouseenter(function(){stop();});
	$(box).mouseleave(function(){play();});
	$('#chiudi').click(function(){ $(box).fadeOut();});
	notizie = box.getElementsByTagName('p');
	limite = notizie.length;
	inizializzazione(notizie);
	newsIn();
}
// FUNZIONE NECESSARIA ALL'INIZIALIZZAZIONE
function inizializzazione(elementi){
	for(i=0; i<elementi.length; i++){
		elementi[i].style.display='none';
	}
}
// FUNZIONE PER NEWS IN INGRESSO
function newsIn(){
	rotazione = setTimeout('newsOut()', (speed*1000));
	$(notizie[index]).fadeIn(1000);
}
// FUNZIONE PER NEWS IN USCITA
function newsOut(){
	$(notizie[index]).fadeOut(1000, function(){
		index++;
		if(index==limite){
			index = 0;
		}
		newsIn();
	});
}
// FUNZIONE PER LO STOP DELL'ANIMAZIONE (ATTIVA AL PASSAGGIO DEL MOUSE)
function stop(){
	clearTimeout(rotazione);
}
// FUNZIONE PER LA RIPARTENZA DELL'ANIMAZIONE (ATTIVA AL PASSAGGIO DEL MOUSE)
function play(){
	clearTimeout(rotazione);
	rotazione = setTimeout('newsOut()', 1000);
}

Il codice è abbastanza commentato.
La funzione da invocare per dare inizio all’animazione è: start(id_div).
Tale funzione, con il supporto di altre funzioni e variabili globali, ha il compito di individuare la finestra delle news tramite id, prelevare i testi delle news e realizzare un array, notizie, che li conterrà. Inoltre la funzione ha il compito di assegnare, tramite jQuery, delle funzioni agli eventi legati al movimento del mouse sulla finestra.
Infatti le funzioni stop() e start() vengono richiamate quando l’utente entra e esce con il puntatore del mouse dalla finestra o per interrompere l’animazione favorendo la lettura della news o per farla ripartire.
Le funzioni newsIn() e newsOut() effettuano lo “scambio” delle news utilizzando l’effetto fade fornito da jQuery.
Da notare infine la temporizzazione che unisce le due funzioni sopracitate, gestibile tramite la varibile speed all’inizio del codice.

Per avviare la finestra con le news è necessaria la seguente riga Javascript dopo aver definito il div nell’html:

<script type='text/javascript'>
     start('box');
</script>

Come si potrà vedere dal codice completo presente online e scaricabile da questa pagina, la finestra è stata formattata con alcune semplici regole CSS che chiunque può personalizzare per adattare il layout a quello del proprio sito.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Il cifrario di Vigenère è il più semplice dei cifrari polialfabetici. Si basa sull’uso di un versetto (chiave) per controllare l’alternanza degli alfabeti di sostituzione.
Il metodo si può considerare una generalizzazione del cifrario di Cesare; invece di spostare sempre dello stesso numero di posti la lettera da cifrare, questa viene spostata di un numero di posti variabile ma ripetuto, determinato in base ad una parola chiave e da scrivere ripetutamente sotto il messaggio, carattere per carattere:

Il testo cifrato si ottiene spostando la lettera chiara di un numero fisso di caratteri, pari al numero ordinale della lettera corrispondente della chiave.
Per semplificare la cifratura/decifratura Vigenère propose una matrice quadrata (26 X 26) composta da alfabeti ordinati e spostati.
Nel codice che andremo a sviluppare utilizzeremo questa versione “classica” dell’algoritmo, difatti realizzeremo la matrice e la cifratura/decifratura verrà eseguita su di essa.
In fondo all’articolo è possibile provare e scaricare il codice completo.

Passiamo quindi al codice della classe che chiameremo vigenere.php.
La classe si comporrà dei seguenti metodi:

• Costruttore per la realizzazione della matrice (tavola di Vigenère)
• Metodo di cifratura
• Metodo di decifratura
• Metodo che stampa a video la tavola di Vigenère

Ecco il codice PHP:

<?php
class Vigenere{
	var $alfabeto = array('A','B','C','D','E','F','G','H','I','J','K','L','M','N', 'O','P','Q','R','S','T','U','V','W','X','Y','Z');
	var $matrice;
	var $chiave;

	// Il costruttore imposta la chiave e realizza la matrice
	function Vigenere($chiave){
		$this->chiave = str_replace(array(" ",".",",",";"),"", $chiave);
		$app1 = array();
		$app2 = array();
		$alfabeto_app = array();
		for($i=0; $i<26; $i++){
			$k=0;
			$app1 = array_slice($this->alfabeto,0,$i);
			$app2 = array_slice($this->alfabeto,$i);
			$this->matrice[$i] = array_merge($app2,$app1);
		}
	}

	// Metodo che stampa la matrice
	function stampaTavola(){
		echo "<table border='1' cellpadding='1' cellspacing='0'>
		<tr><td rowspan='27' width='50px' align='center'>T<br>E<br>S<br>T<br>O<br> <br>I<br>N<br> <br>C<br>H<br>I<br>A<br>R<br>O<br></td><td colspan='26' align='center' height='50px'>CHIAVE</td></tr>";
		for($i=0; $i<26; $i++){
			echo "<tr>";
			for($j=0; $j<26; $j++){
				echo "<td align='center'>".$this->matrice[$i][$j]."</td>";
			}
			echo "</tr>";
		}
		echo "</table>";
	}

	// Metodo per la cifratura
	function cifratura($testo){
		$txt_cifrato = "";
		$l_chiave = strlen($this->chiave);
		$k = 0;
		for($i=0; $i<strlen($testo); $i++){
			$chr_t = substr($testo,$i,1);
			$chr_c = substr($this->chiave,$k,1);

			if(in_array(strtoupper($chr_t),$this->alfabeto) && in_array(strtoupper($chr_c),$this->alfabeto)){
				$x = array_search(strtoupper($chr_t),$this->alfabeto);
				$y = array_search(strtoupper($chr_c),$this->alfabeto);
				$txt_cifrato = $txt_cifrato.$this->matrice[$x][$y];
				$k++;
			}else{
				$txt_cifrato = $txt_cifrato.strtoupper($chr_t);
			}
			if($k==$l_chiave) $k = 0;
		}
		return $txt_cifrato;
	}

	// Metodo per la decifratura
	function decifratura($testo){
		$txt_decifrato = "";
		$l_chiave = strlen($this->chiave);
		$k = 0;
		for($i=0; $i<strlen($testo); $i++){
			$chr_t = substr($testo,$i,1);
			$chr_c = substr($this->chiave,$k,1);
			if(in_array(strtoupper($chr_t),$this->alfabeto) && in_array(strtoupper($chr_c),$this->alfabeto)){
				$colonna = array_search(strtoupper($chr_c),$this->alfabeto);
				$riga = 0;
				for($c=0; $c<26; $c++){
					if($this->matrice[$c][$colonna]==$chr_t){
						$riga = $c;
						break;
					}
				}
				$txt_decifrato = $txt_decifrato.$this->matrice[$riga][0];
				$k++;
			}else{
				$txt_decifrato = $txt_decifrato.$chr_t;
			}
			if($k==$l_chiave) $k = 0;
		}
		return $txt_decifrato;
	}
}
?>

Utilizzando un array contenete l’alfabeto, realizzeremo la matrice semplicemente tagliando ad ogni riga l’alfabeto in due parti, grazie alla funzione array_slice, per poi ricomporlo in maniera inversa.
Grazie a questa matrice i metodi cifratura e decifratura risultano abbastanza semplici:
- cicliamo lettera per lettera sul testo in chiaro e sulla chiave
- per ogni coppia di lettere (chiaro-chiave) verifichiamo le posizioni nell’alfabeto
- le coordinate x e y ottenute individueranno la lettera cifrata nella matrice
Il cuore del codice di cifratura è composto essenzialmente dalle tre righe:

$x = array_search(strtoupper($chr_t),$this->alfabeto);
$y = array_search(strtoupper($chr_c),$this->alfabeto);
$txt_cifrato = $txt_cifrato.$this->matrice[$x][$y];

Per la decifratura il procedimento è lo stesso, richiede solo una ricerca differente basata sulle colonne identificate dalle lettere che compongono la chiave.
Infine è presente un metodo denominato stampaTavola che visualizza a video la matrice favorendo la verifica manuale del processo di cifratura/decifratura.

La classe va così richiamata:

<?php
require_once 'vigenere.php';

$vigenere = new Vigenere($chiave);
$vigenere->stampaTavola();
$txt_cifrato = $vigenere->cifratura($testo);
$txt_decifrato = $vigenere->decifratura($txt_cifrato);
?>

All’interno della cartella contenente il codice completo sono presenti i seguenti file:

• vigenere.php (la classe vista sopra)
• test.php (lo script che effettua la cifratura/decifratura)
• index.html (un form per il test di coppie chiave-testo in chiaro)

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Realizzeremo quindi una classe PHP che chiameremo Cesare; implementeremo la logica di cifratura e decifratura con un valore della chiave arbitrario acquisito in fase di istanziamento.
In fondo all’articolo è possibile provare e scaricare il codice completo.
Vediamo innanzitutto la classe cesare.php:

<?php
class Cesare{
	var $alfabeto = array('A','B','C','D','E','F','G','H','I','J','K','L','M','N', 'O','P','Q','R','S','T','U','V','W','X','Y','Z');
	var $chiave;

	// La chiave è un valore numerico da 1 a 25
	function Cesare($chiave){
		if($chiave>25){
			$this->chiave = $chiave % 26;
		}else{
			$this->chiave = $chiave;
		}
	}

	// Metodo per sostituzione lettera in fase di cifratura
	function sostituisciLettera($lettera){
		if(in_array(strtoupper($lettera),$this->alfabeto)){
			$posizione = array_search(strtoupper($lettera),$this->alfabeto);
			return strtolower($this->alfabeto[($posizione+$this->chiave) % 26]);
		}else{
			return $lettera;
		}
	}

	// Metodo per sostituzione lettera in fase di decifratura
	function ripristinaLettera($lettera){
		if(in_array(strtoupper($lettera),$this->alfabeto)){
			$posizione = array_search(strtoupper($lettera),$this->alfabeto);
			if(($posizione - $this->chiave) >= 0){
				return strtolower($this->alfabeto[($posizione - $this->chiave)]);
			}else{
				return strtolower($this->alfabeto[(count($this->alfabeto) + ($posizione - $this->chiave))]);
			}
		}else{
			return $lettera;
		}
	}

	// Metodo per cifratura di un testo in chiaro
	function cifratura($testo){
		$txt_cifrato = "";
		for($i=0; $i<strlen($testo); $i++){
			$carattere = substr($testo,$i,1);
			$carattere_cifrato = $this->sostituisciLettera($carattere);
			$txt_cifrato = $txt_cifrato.$carattere_cifrato;
		}
		return $txt_cifrato;
	}

	// Metodo per decifratura di un testo cifrato
	function decifratura($testo){
		$txt_chiaro = "";
		for($i=0; $i<strlen($testo); $i++){
			$carattere = substr($testo,$i,1);
			$carattere_chiaro = $this->ripristinaLettera($carattere);
			$txt_chiaro = $txt_chiaro.$carattere_chiaro;
		}
		return $txt_chiaro;
	}
}
?>

La classe fa uso di un array denominato alfabeto che contiene appunto le lettere dell’alfabeto. Il costruttore imposta il valore della chiave che sarà un valore compreso tra 0 e 25, tenendo comunque presente che una chiave uguale a 0 produrrà un testo cifrato uguale a quello in chiaro.
I metodi:
- sistituisciLettera
- ripristinaLettera
si occupano di sostituire un carattere con un altro in relazione al valore della chiave. Il primo metodo sarà utilizzato in fase di cifratura, sostituendo quindi una lettera con la successiva di n posizioni. Viceversa il metodo ripristinaLettera sarà utilizzato in fase di decifratura sostituendo la lettera in input con la precedente di n posizioni.
Infine i metodi cifratura e decifratura hanno il compito di scorrere il testo in chiaro o cifrato per convertire una lettera alla volta.

La classe va così invocata:

require_once 'cesare.php';

$cifrario = new Cesare($chiave);
$txt_cifrato = $cifrario->cifratura($testo);
$txt_chiaro = $cifrario->decifratura($txt_cifrato);

All’interno della cartella contenente il codice completo sono presenti i seguenti file:

• cesare.php (la classe vista sopra)
• test.php (lo script che effettua la cifratura/decifratura)
• index.html (un form per il test di coppie chiave-testo in chiaro)

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Evitando di entrare nel cuore dell’algoritmo (troppo complesso per essere spiegato in questa sede), realizzeremo una classe php che inglobi l’algoritmo fornendoci essenzialmente solo i metodi che ci interessano:

• Impostare la chiave
• Cifrare un testo
• Decifrare un testo

Inoltre realizzeremo uno script di test e un form html per verificare il risultato finale.
Di seguito il codice della classe Crittografia:

<?php
// Richiamo il codice che implementa Blowfish
require_once('blowfish.php');

class Crittografia{
	var $chiave;
	var $blowfish;

	// Costruttore della classe Crittografia - prende in input la chiave in chiaro
	function Crittografia($stringa){
		$this->chiave = $stringa;
	}

	// Funzione di codifica di un testo in chiaro
	function cifratura($stringa){
		$this->blowfish = new Horde_Cipher_blowfish;
		$encrypt = '';
		$mod = strlen($stringa) % 8;
		if ($mod > 0) {
			$stringa .= str_repeat("\0", 8 - $mod);
		}
		foreach (str_split( $stringa, 8 ) as $chunk){
			$encrypt .= $this->blowfish->encryptBlock($chunk, $this->getChiave());
		}
		return base64_encode($encrypt);
	}

	// Funzione di decodifica di un testo cifrato
	function decifratura($stringa){
		$this->blowfish = new Horde_Cipher_blowfish;
		$decrypt = '';
		$data = base64_decode($stringa);
		foreach (str_split( $data, 8 ) as $chunk){
			$decrypt .= $this->blowfish->decryptBlock($chunk, $this->getChiave());
		}
		return trim($decrypt);
	}

	// Funzione per restituzione della chiave
	function getChiave(){
		return $this->chiave;
	}
}
?>

La classe Crittografia farà uso dei metodi dell’algoritmo Blowfish, quindi il codice inizia con il require della classe.
Il costruttore della classe è molto semplice, infatti acquisisce in input una stringa che sarà la chiave utilizzata per la cifratura/decifratura.
Di seguito i metodi fondamentali, cifratura e decifratura. Entrambi prendono come parametro una stringa e restituiscono una nuova stringa che nel primo caso sarà il testo cifrato e viceversa nel secondo caso sarà il testo in chiaro.
All’interno di entrambi i metodi viene istanziato l’oggetto Horde_Cipher_blowfish e viene suddivisa la stringa di input in gruppi di 8 caratteri per effettuare la cifratura/decifratura un blocco per volta.
Vediamo quindi in che modo richiamare la classe Crittografia:

<?php
// Richiamo la classe
require_once 'crittografia.php';

// Istanzio l'oggetto Crittografia con chiave $chiave
$blowfish = new Crittografia($chiave);

// Cifro un testo $txt
$txt_cifrato = $blowfish->cifratura($txt);

// Decifro il testo ottenuto dalla cifratura
$txt_originale = $blowfish->decifratura($txt_cifrato);
?>

All’interno della cartella contenente il codice completo sono presenti i seguenti file:

• blowfish.php (l’algoritmo di cifratura)
• crittografia.php (la classe che inbloba l’algoritmo blowfish)
• test.php (lo script che effettua la cifratura/decifratura)
• index.html (un form per il test di coppie chiave-testo in chiaro)

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Realizzeremo una sola funzione che chiameremo appunto: centra().
Per rendere più efficiente il nostro codice Javascript utilizzeremo il framework JQuery così saremo quantomeno sicuri che il risultato finale sia adeguato per la maggior parte dei browser in circolazione. Comunque il suo uso sarà minimo e non richiede particolari conoscenze.
In fondo all’articolo è possibile provare o scaricare il codice completo.

Vediamo quindi il codice della funzione Javascript:

<script type='text/javascript'>
function centra(div){
	var DIVwidth = $(div).width();
	var DIVheight = $(div).height();
	var SCREENwidth = $(document).width();
	var SCREENheight = $(window).height();
	var SCREENscrolltop = $(window).scrollTop();
	$(div).animate({
		top: (SCREENheight-DIVheight)/2+SCREENscrolltop+"px",
		left: (SCREENwidth-DIVwidth)/2+"px"
	},100,function(){
        centra(div);
    });
}
</script>

La funzione una volta richiamata calcola larghezza e altezza del div da centrare, quindi larghezza e altezza della finestra del browser e la quantità di scroll effettuato (scrollTop()).
Il div viene successivamente animato impostando i due nuovi valori per le proprietà top e left.
Dove top sarà dato da: (altezza finestra – altezza div)/2 + scroll
Mentre left sarà dato da: (larghezza finestra – larghezza div)/2
La funzione viene poi richiamata ad intervalli regolari(di default 100 ms) per ricalcolare il posizionamento.
Infine per invocare la funzione, su un ipotetico div con id=’box_centrale’, è necessaria la seguente sintassi:

<script type='text/javascript'>
centra('#box_centrale');
</script>

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

La funzione Javascript si chiamerà aggiungiRiga():

<script type='text/javascript'>
function aggiungiRiga(id_table){
     var table = document.getElementById(id_table);
     var tbody = table.getElementsByTagName('tbody')[0];
     var colonne = table.getElementsByTagName('th').length;
     var tr = document.createElement('tr');
     for(var i=0; i<colonne; i++){
          var td = document.createElement('td');
          var tx = document.createTextNode(prompt("Inserisci testo per cella "+(i+1),""));
          td.appendChild(tx);
          tr.appendChild(td);
     }
     tbody.appendChild(tr);
}
</script>

Analizziamo brevemente la funzione che acquisice come parametro d’ingresso l’id della tabella:
- Preleviamo il riferimento alla tabella e al tbody
- Calcoliamo il numero di colonne presenti
- Cicliamo e per ogni cella nuova chiediamo da prompt il testo
- Nidifichiamo il testo nel td e il td nel tr
- Aggiungiamo la nuova riga tr nel tbody

Anche per chi è all’asciutto di DOM (elementi, nodi e child) non risulterà difficile comprendere il codice della funzione aggiungiRiga().
Infine vediamo il codice HTML che inizializza la tabella e fornisce il richiamo alla funzione:

<table border='2' id='my_table' class='tabella' cellspacing='0' cellpadding='0'>
	<thead><tr><th>INTESTAZIONE COLONNA 1</th><th>INTESTAZIONE COLONNA 2</th><th>INTESTAZIONE COLONNA 3</th></tr></thead>
	<tbody>
	<!-- IL BODY E' INIZIALMENTE VUOTO -->
	</tbody>
</table><br/>
<input type='button' value='Aggiungi riga' onClick="aggiungiRiga('my_table')" />

La tabella è molto semplice. Richiede essenzialmente un ID e la suddivisione in head e body (essenziale per il corretto funzionamento su Explorer). Possiamo aumentare il numero di colonne liberamente, sarà la funzione ad adattarsi ad essa.

Cliccando qui è possibile vedere in azione il codice. (abilitare l’apertura dei prompt)

Cliccando qui è possibile scaricare il codice.

Vediamo innanzitutto il codice javascript completo:

// Richiamo il framework JQuery
<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
// Realizzo una matrice contenente le immagini da presentare
var immagini = new Array();
immagini[0] = new Image();
immagini[0].src = "uno.jpg";
immagini[1] = new Image();
immagini[1].src = "due.jpg";
immagini[2] = new Image();
immagini[2].src = "tre.jpg";
immagini[3] = new Image();
immagini[3].src = "quattro.jpg";

var timeout;
var index = 1;

// Funzione che sostituisce un'immagine con la successiva
// JQUERY FADEOUT - FADEIN
function RotazioneImmagini(){
     $('#box_immagine').fadeOut(1000, function(){
		document.getElementById('box_immagine').src = immagini[index].src;
		$('#box_immagine').fadeIn(1000, function(){
			index++;
			if(index>=immagini.length){
				index = 0;
			}
			timeout = setTimeout('RotazioneImmagini();', 1000);
		});
	 });
}

// Funzione che permette di interrompere la rotazione delle immagini
function StopRotazione(){
     clearTimeout(timeout);
}
</script>

Il cuore dello script è la funzione RotazioneImmagini().
Prima di sostituire effettivamente un immagine con la successiva viene applicato un effetto di sfumatura in uscita (fadeOut) e solo al termine di questo viene effettuato lo scambio di immagini e quindi applicato un effetto di sfumatura in entrata (fadeIn). In altre parole, l’immagine viene sostituita mentre il box che le conterrà (box_immagine) non è visibile e quindi prima di effettuare il fadeIn.
Da notare i parametri e la nidificazione di funzioni per fadeOut e fadeIn. I parametri per queste due funzioni sono:

.fadeOut(durata effetto, funzione da eseguire al termine)
.fadeIn(durata effetto, funzione da eseguire al termine)

Nonostante il secondo parametro sia opzionale, nel nostro script abbiamo utilizzato il callback per eseguire in un preciso ordine le operazioni. Difatti solo dopo la sfumatura in uscita viene effettuata la sostituzione dell’immagine, e solo dopo la sfumatura in ingresso viene riattivato il ciclo di temporizzazione.
In alternativa al fade avremmo potuto utilizzare anche un effetto slide, sostituendo fadeOut con slideUp e fadeIn con slideDown.

Infine la porzione di html per completare la pagina:

<img src='uno.jpg' id='box_immagine'/>
<br/>
<input type='button' value='Start Presentazione' onClick='RotazioneImmagini();'/>
<input type='button' value='Stop Presentazione' onClick='StopRotazione();'/>

Cliccando qui è possibile vedere in esecuzione il codice completo

// Realizzo una matrice contenente le immagini da presentare
var immagini = new Array();
immagini[0] = new Image();
immagini[0].src = "uno.jpg";
immagini[1] = new Image();
immagini[1].src = "due.jpg";
immagini[2] = new Image();
immagini[2].src = "tre.jpg";
immagini[3] = new Image();
immagini[3].src = "quattro.jpg";

var timeout;
var index = 0;

// Funzione che sostituisce un'immagine con la successiva
function RotazioneImmagini(){
     document.getElementById('box_immagine').src = immagini[index].src;
     index++;
     if(index>=immagini.length){
          index = 0;
     }
     timeout = setTimeout('RotazioneImmagini();', 1000);
}

// Funzione che permette di interrompere la rotazione delle immagini
function StopRotazione(){
     clearTimeout(timeout);
}

Prima di analizzare il codice javascript vediamo, per completare, la porzione di html necessaria:

<img src='uno.jpg' id='box_immagine'/>
<br/>
<input type='button' value='Start Presentazione' onClick='RotazioneImmagini();'/>
<input type='button' value='Stop Presentazione' onClick='StopRotazione();'/>

Le prime righe del codice javascript impostano la matrice contenente le immagini che inseriremo nella presentazione di diapositive. Nel codice vengono istanziate 4 immagini ma nessuno ci vieta di aumentarne il numero.
Dopo che le immagini sono state precaricate vengono dichiarate due variabili, la prima (timeout) tiene traccia di ogni timeout, mentre la seconda (index) mantiene il puntatore all’immagine successiva da visualizzare.
Successivamente troviamo la funzione RotazioneImmagini() che dopo aver sostituito l’immagine attuale con la successiva, richiama se stessa dopo un secondo. Da notare come nella funzione, dopo la sostituzione dell’immagine, venga incrementato di 1 il valore di index che punterà all’immagine successiva.
Infine la funzione StopRotazione() permette di interrompere la rotazione delle immagini.
Ultima cosa da notare è nel codice html, infatti per gestire lo spazio dedicato all’immagine è stato necessario assegnare un id (box_immagine) al tag img.

Cliccando qui è possibile vedere in esecuzione il codice completo

L’istruzione necessaria a temporizzare una funzione è:

var timeout = setTimeout('funzione();',1000);

Mentre per interrompere un ciclo di temporizzazioni la funzione è:

clearTimeout(timeout);

Vediamo ora il codice necessario alla realizzazione di un orologio:

var timeout;

function ScriviOra(){
     // Istanzio l'oggetto Date e ricavo ora, minuti e secondi
     var oggi = new Date();
     var ore = oggi.getHours();
     var minuti = oggi.getMinutes();
     var secondi = oggi.getSeconds();

     // Formatto minuti e secondi su due cifre
     minuti = Formatta(minuti);
     secondi = Formatta(secondi);

     // Scrivo la stringa contenente l'orario in un campo di tipo input
     var orario = ore + ":" + minuti + ":" + secondi;
     document.getElementById('time').value=orario;

     // Ripeto la funzione dopo un secondo
     timeout = setTimeout('ScriviOra();', 1000);
}

// Funzione necessaria a formattare l'orario
function Formatta(valore){
     if(valore < 10){
          return "0"+valore;
     }
     return valore;
}

// La funzione necessaria ad interrompere l'orologio
function FermaOra(){
     clearTimeout(timeout);
}

Visto il codice javascript è ora necessario creare il campo di input che conterrà l’orario e due bottoni, uno per inizializzare l’orologio e uno per interromperlo:

<input type='text' id='time' size='8' readonly/>
<br/>
<input type='button' value='Start orologio' onClick='ScriviOra();'/>
<input type='button' value='Stop orologio' onclick='FermaOra();'/>

Il cuore dello script è la funzione ScriviOra(). Ogni secondo la funzione determina l’ora corrente, la formatta e la inserisce nel campo di testo e imposta un timeout per eseguire ScriviOra() un secondo dopo.
Da notare come lo script inizi dichiarando la variabile che conterrà i timeout.
Infine la funzione FermaOra() ha il compito di annullare l’ultimo timeout impostato, l’effetto sarà quello di veder fermo l’orario all’ultima esecuzione della funzione ScriviOra().

Cliccando qui è possibile vedere in esecuzione il codice completo

JQuery ci fornisce una struttura semplice e snella per implementare chiamare Ajax. La funzione in questione richiede all’utente una serie di informazioni come ad esempio: url della risorsa, parametri in input, tipo di dato restituito e fornisce sottofunzioni per gestire il buono o cattivo esito della richiesta.
Ecco la sintassi per implementare una semplice chiamata Ajax con JQuery:

$.ajax({
     type: "GET",
     dataType: "html",
     url: "pagina.php",
     data: "parametro=valore",
     success: function(dati){
                       // OPERAZIONI DA SVOLGERE IN CASO DI SUCCESSO
     }
     error: function(richiesta,stato,errori){
                   // OPERAZIONI DA SVOLGERE IN CASO DI INSUCCESSO
     }
});

Il codice appena visto è gia sufficiente per implementare Ajax con JQuery. Andando per ordine, analizziamo ciascun parametro:

TYPE : specifica la modalità di passaggio dei parametri, può essere GET o POST
DATATYPE : specifica il tipo di dato che la chiamata restituisce, può essere html, json, script o xml
URL : specifica l’url dello script lato server a cui effettuare la richiesta
DATA : specifica la stringa contenente gli eventuali parametri da passare allo script lato server
SUCCESS : racchiude la funzione da invocare nel momento in cui la richiesta Ajax vada a buon fine
ERROR : racchiude la funzione da invocare nel momento in cui la richiesta Ajax non vada a buon fine

Vediamo ora un esempio concreto di utilizzo Ajax con JQuery. Realizzeremo una funzione javascript che effettua la chiamata ad un file remoto che ha come unico scopo quello di restituire un testo che va ad aggiornare un div html. Per completare l’esempio, immaginiamo di dover passare un parametro alla pagina lato server.

function AggiornaDIV(id_div){
     // Prelevo il parametro da passare
     var parametro = document.getElementById('parametroDaPassare').value;

     // Effettuo la chiamata Ajax
     $.ajax({
          type: "GET",
          dataType: "html",
          url: "pagina.php",
          data: "parametro="+parametro,
          success: function(dati){
               // Aggiorno il contenuto del DIV con i dati ricevuti
               document.getElementById(id_div).innerHTML=dati;
          }
          error: function(richiesta,stato,errori){
               // Visualizzo un messaggio di errore in caso di chiamata fallita
               alert('Errore nella chiamata AJAX:'+errori);
          }
     });
}

In poche righe di codice si racchiude tutto ciò che ci serve per effettuare una chiamata AJAX. Esistono però numerosi parametri opzionali che in base alle diverse esigenze possono tornare utili per gli sviluppatori, ad esempio quelli più interessanti sono:

ASYNC : definisce se la chiamata deve essere sincrona o asincrona e assume valore true o false
CACHE : indica al browser se forzare o meno il ricaricamento dei dati anche se questi non sono cambiati, assume valore true e false
TIMEOUT : esprire il tempo (in millesecondi) dopo di cui una richiesta non ancora conclusa viene considerata fallita

Parametri come timeout e cache risultano essere molto utili quando si vuol limitare una richiesta Ajax. Mettere in cache l’esito di una richiesta ci permette di non sprecare tempo e impostare un timeout si evitano attese eterne per richieste che non avranno responso.

In conclusione ecco i riferimenti ufficiali:
- Scaricare JQUERY
- Documentazione ufficiale di JQuery

L’uso di Ajax si cala in numerose situazione, tuttavia l’80% di chi utilizza questa tecnica lo fa innanzitutto per aggiornare un div, un paragrafo o comunque un blocco della pagina.
Per chi ha esperienza con Javascript e sa dove “mettere le mani”, realizzare ciò che è stato appena descritto risulta essere un lavoro abbastanza semplice ma alla lunga noioso; d’altro canto per chi è a digiuno di programmazione lato Client può risultare difficile e non di immediata comprensione realizzare un aggiornamento dinamico con Ajax.
A tale scopo ho riunito in alcune funzioni il cuore di Ajax dando vita ad uno script che ho chiamato AJAX GO.
La funzione ajax_go, opportunamente richiamata, permette a chiunque di implementare la tecnica Ajax evitando la scrittura di ulteriore codice. Basta includere il file ajax_go.js e chiamare la funzione quando risulta necessario.

Ad esempio se intendo aggiornare il contenuto di un div con id=’my_box’, chiamando uno script lato server (ad esempio codice.php) che restituisca il “nuovo” codice html da inserire nel div, chiamerò la funzione ajax_go così:

ajax_go('codice.php','my_box');

// Parametri della funzione:
// ajax_go(url dello script lato server,id del blocco html)

Per utilizzare da subito la funzione è necessario richiamare il codice, aggiungendo la riga sottostante nell’head html della pagina che utilizzerà Ajax:

<script type="text/javascript" src="http://www.donatantonio.net/script/ajax_go.js"></script>

Oppure è possibile scaricare Ajax Go(con un esempio di utilizzo) da qui…

Oppure puoi testare un esempio di utilizzo di Ajax Go cliccando qui…

Ecco invece il codice completo per chi è interessato:

/*
    AJAX GO - AJAX SEMPLICE E VELOCE
    Fabio Donatantonio 2010 - http://www.donatantonio.it/
*/
var myRequest = null;
var the_box = null;

function CreateXmlHttpReq(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function aggiornamento() {
    e = document.getElementById(the_box);
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        e.innerHTML = myRequest.responseText;
    }
}

function ajax_go(url,id_box) {
    the_box = id_box;
    var r = Math.random();
    if(url.indexOf("?")==-1)
        url = url + "?rand="+escape(r);
    else
        url = url + "&rand="+escape(r);
    myRequest = CreateXmlHttpReq(aggiornamento);
    myRequest.open("GET",url);
    myRequest.send(null);
}

SINTASSI: ajax_go(url dello script lato server, id del blocco html);

• Modifica destinazione link (href)
• Aggiunta di un parametro all’url di un link
• Modifica destinazione e etichetta di un link
• Modifica del target di un link

La prima funzione è così definita:

<script type='text/javascript'>
function nuovoLink(new_pagina){
	document.getElementById('link').href=new_pagina;
}
</script>

La funzione nuovoLink prende come parametro l’url della nuova pagina di destinazione e aggiorna l’href.

La seconda funzione invece:

function modificaLink(parametro,valore){
	var link = document.getElementById('link').href;
	if(link.indexOf("?")!=-1){
		link = link + "&"+parametro+"="+valore+"";
	}else{
		link = link + "?"+parametro+"="+valore+"";
	}
	document.getElementById('link').href=link;
}

modificaLink permette di aggiungere all’url di un link esistente un parametro con rispettivo valore. La funzione richiede infatti in input il nome del parametro e il valore da assegnarvi, controlla qualora ci siano già parametri e concatena all’url esistente il nuovo parametro. Questa funzione può essere particolamente utile per inviare ad una determinata pagina una serie di parametri non fissi, bensì generati di volta in volta in relazione ad alcuni eventi o input dell’utente.

La terza funzione permette di modificare sia l’url che l’etichetta del link:

function cambiaLink(new_pagina,new_label){
	document.getElementById('link').href=new_pagina;
	document.getElementById('link').innerHTML=new_label;
}

La funzione cambiaLink richiede come parametri il nuovo url e una stringa che sostituirà quella presente in un link. Ad esempio chiamando la funzione:
cambiaLink(‘contatti.html’,'Vai alla pagina contatti’);
prima della chiamata : <a href=’index.html’>Vai alla home</a>
dopo la chiamata : <a href=’contatti.html’>Vai alla pagina contatti</a>

L’ultima funzione permette di modificare l’attributo target all’interno del link:

function cambiaTarget(new_target){
	document.getElementById('link').target=new_target;
}

Un esempio di chiamata a questa funzione potrebbe essere :
cambiaTarget(‘_blank’);

Tutti gli script illustrati in questo articolo modificano e aggiornano un ipotetico link così definito :

<a id='link' href='index.html'>Questo è un link</a>

Per provare lo script completo clicca qui.
Per scaricare lo script clicca qui.

In fondo all’articolo è possibile testare e scaricare lo script completo con due differenti esempi.

Vediamo innanzitutto la funzione Javascript che aggiunge elementi al form:

<script type='text/javascript'>
// Funzione che permette di aggiungere elementi al form (in questo caso rate)
function AggiungiRata(rate){
	var numero_rate = rate.value;
	var box = document.getElementById('box_rate');
	if(numero_rate==""){
		box.innerHTML='';
	}else{
		if(isNaN(numero_rate)==true){
			box.innerHTML='';
		}else{
			var righe = "";
			var importo = (parseInt(document.form.importo.value)/parseInt(numero_rate));
			// Inserisco una riga ad ogni ciclo
			for(i=1; i<=numero_rate; i++){
				righe = righe + "Rata n°"+i+" : <input type='text' name='rata"+i+" size='10' value='"+importo+"' maxlength='10'/><br/>";
			}
			// Aggiorno il contenuto del box che conterrà gli elementi aggiunti
			box.innerHTML=righe;
		}
	}
}
</script>

La funzione prende come input l’oggetto contenete il numero di rate. Dopo averne controllato la validità aggiorna un box html(box_rate) con una stringa(righe) precedentemente composta all’interno di un ciclo for. Ad ogni passo del ciclo viene aggiunto un campo di input utilizzando la corretta formattazione html.

Per completare lo script vediamo il codice html della form:

<form method="post" action="#" name="form">
<table border="0">
<tr><td>Euro : </td><td><input type='text' name='importo' value="0" maxlength="10" /></td></tr>
<tr><td>Numero di rate : </td><td><input type="text" name="rate" maxlength="2" onkeyup="AggiungiRata(this)"/></td></tr>
</table>

<span id='box_rate'>
<!-- Box che conterrà le righe aggiunte. Inizialmente vuoto! -->
</span>
</form>

La funzione AggiungiRata viene richiamata ad ogni inserimento di caratteri all’interno del campo di testo rate. Il box che conterrà gli elementi aggiunti sarà inizialmente vuoto; per ogni riga aggiunta la funzione immetterà di defaul l’importo della rata.
Possiamo concludere sintetizzando la porzione di codice che permette di inserire un campo di input in un modulo:

// Creo una stringa contenente codice HTML
var riga = "Campo aggiunto : <input type='text' name='campo_aggiunto' size='10' />";
// Imposto come contenuto del box_html il codice della variabile riga
document.getElementById('box_html').innerHTML = riga;

L’esempio appena descritto è solo un ipotetico caso in cui risulta necessario aggiungere elementi ad una form.

Prova lo script cliccando qui.
Oppure scaricalo da qui.

Innanzittutto è necessario creare un file con estensione .m3u che conterrà semplicemente la lista degli url degli mp3 da eseguire.
Ad esempio l’ipotetico file playlist.m3u:

http://www.miosito.com/musica/canzone_0.mp3

http://www.miosito.com/musica/canzone_1.mp3

http://www.miosito.com/musica/canzone_2.mp3

http://www.miosito.com/musica/canzone_3.mp3

http://www.miosito.com/musica/canzone_4.mp3

Tale file sarà locato nel nostro spazio web ad esempio nella cartella /stream.

Andiamo ora a vedere il codice php che implementerà la funzione shuffle:

<?php
// url del file m3u originale
$file_playlist = "/stream/playlist.m3u";

// url del file m3u casuale, utilizzo valore random per differenziarlo
$file_playlist_shuffle = "/stream/playlist_".rand (10,9999).".m3u";

// scarico la playlist in un array, ogni elemento è un url
$lines = file($file_playlist);

// ordino in modo casuale gli elementi dell'array
shuffle($lines);

// realizzo il file m3u con la playlist casuale
$var=fopen($file_playlist_shuffle,"w");
for($i=0; $i<count($lines); $i++){
    fwrite($var, $lines[$i]);
}
fclose($var);
?>

Lo script appena visto verrà inserito all’interno della nostra pagina web prima dell’aperura del tag html. Una volta conslusa l’esecuzione del codice php, avremo nella nostra cartella /stream il file originale “playlist.m3u” e un file tipo “playlist_153.m3u” che conterrà la playlist in un ordine diverso. (il numero 153 è solo di esempio)

Il player audio andrà quindi a leggere il flusso audio dal secondo file appena realizzato.
Vediamo quindi il codice completo player.php:

<?php
// -- INIZIO configurazione script
$url_sito = "http://www.donatantonio.it/";
$file_playlist = "stream/playlist.m3u";
$file_playlist_shuffle = "stream/playlist_".rand (10,9999).".m3u";
// -- FINE configurazione

$lines = file($file_playlist);
shuffle($lines);
$var=fopen($file_playlist_shuffle,"w");
for($i=0; $i<count($lines); $i++){
    fwrite($var, $lines[$i]);
}
fclose($var);
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Fabio Donatantonio" />
<title>Media Player - Shuffle Mode</title>
</head>
<body>
<h1>Stai ascoltando la playlist</h1>
<!-- Codice lettore Media Player -->
<object id="mediaplayer" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6"
width="300" height="300"
codebase = "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701">
<param name="url" value="<?php echo $url_sito.$file_playlist_shuffle;?>" />
<param name="autostart" value="1" />
<param name="showcontrols" value="1" />
<param name="stretchtofit" value="0" />
<param name="enablecontextmenu" value="0" />
<param name="ShowStatusBar" value="1" />
<param name="src" value="<?php echo $url_sito.$file_playlist_shuffle;?>" />
<embed id="mediaplayer" type="application/x-mplayer2" width="300" height="300" src="<?php echo $url_sito.$file_playlist_shuffle;?>" showstatusbar="1" enablecontextmenu="0" stretchtofit="0" showcontrols="1" autostart="1" url="<?php echo $url_sito.$file_playlist_shuffle;?>">
</embed></object>
<!-- Fine codice lettore Media Player -->
</body>
</html>

Una volta personalizzato e caricato il file sul nostro spazio web e richiamata la pagina dal browser ascolteremo la playlist in ordine casuale.

Clicca qui per scaricare lo script completo.

Alcune osservazioni e idee in conclusione:
1 – La pagina richiede Media Player come player audio
2 – La cartella contenente le playlist andrebbe “svuotata” regolarmente in virtù delle connessioni alla pagina. Ciò magari è implementabile sempre con php.
3 – Con un pò di pazienza e fantasia si potrebbe utilizzare l’array degli url mp3 per realizzare un player audio implementato in javascript.

• L’importo da controllare
• La soglia minima ammissibile per tale importo (se vuoto vale 0)
• La soglia massima ammissibile per tale importo (se vuoto vale infinito)
• L’id del tag html che visualizzerà l’eventuale messaggio di errore

Ecco il codice della funzione:

function is_importo(importo,importo_min,importo_max,id_tag){
     if(isNaN(importo)){
          document.getElementById(id_tag).innerHTML='Importo non valido!';
          return false;
     }
     if(importo_min=="" || importo_max==""){
          if(importo<=0){
               document.getElementById(id_tag).innerHTML='Valore importo non valido!';
               return false;
          }else{
	  return true;
          }
     }else{
          if(isNaN(importo_min) && isNaN(importo_max)){
               return false;
          }else{
	  if(importo>=importo_min && importo<=importo_max){
	       return true;
	  }else{
	       document.getElementById(id_tag).innerHTML='Valore importo non valido!';
	       return false;
	  }
          }
     }
}

Vediamo con un esempio come richiamare opportunamente questa funzione:

<script type='text/javascript'>
if(is_importo('1500','0','2000','errore')==true){
     // faccio qualcosa...
}else{
     // importo non corretto, quindi faccio altro...
}
</script>

Nell’esempio precedente sto verificando che l’importo (1500) sia un valore compreso tra (0) e (2000), in caso di errore chiedo che il messaggio venga visualizzato all’interno di un blocco identificato dall’id errore. All’interno della pagina html dovrò opportunamente dichiarare tale blocco (ad esempio un div o uno span) e quindi collegare il campo di input alla funzione is_importo.

Infine altri esempi di chiamata alla funzione:

is_importo('1500.60','-2000','2000','errore'); // range con valori negativi
is_importo('3789.99','0','3000','errore'); // valori con virgola
is_importo('10000','','','errore'); // verifica senza vincolo di range

• Id del div che vogliamo far lampeggiare
• Un valore in pixel per la grandezza del bordo
• I due codici dei colori che si alterneranno
• Il tempo massimo, in secondi, di lampeggiamento
• L’intervallo, in secondi, tra un colore e l’altro

Ecco quindi il codice della funzione bordo_flash:

var q=0;
var bordo=null;
var color=null;
var inizial_border = null;
function bordo_flash(id_tag,px_border,color_1,color_2,flash_time,flash_speed){
	var the_div=document.getElementById(id_tag);
	if(inizial_border==null){
		inizial_border = the_div.style.border;
	}
	if (color==color_1){
		the_div.style.border=px_border+"px solid "+color_2;
		color=color_2;
	}else{
		the_div.style.border=px_border+"px solid "+color_1;
		color=color_1;
	}
	q = q+flash_speed;
	if(q<=flash_time){
		bordo = setTimeout("bordo_flash('"+id_tag+"',"+px_border+",'"+color_1+"','"+color_2+"', "+flash_time+","+flash_speed+")", flash_speed);
	}else{
		q=0;
		bordo=null;
		color=null;
		the_div.style.border=inizial_border;
		inizial_border=null;
	}
}

La funzione va definita all’interno dell’head della pagina dove apparirà il div lampeggiante, e quindi richiamata quando necessario.
Ad esempio, supponendo di avere un div con id=’myDiv’ :

<script type='text/javascript'>
bordo_flash('myDiv',4,'#FF0000','#0000FF',500,20000);
</script>

Nella chiamata precedente stiamo definendo un div chiamato myDiv con un bordo di 4px che lampeggia ogni mezzo secondo per un totale di 20 secondi. Infine il colore #FF0000 si alternerà con il #0000FF.

Ecco il codice della funzione.

function check_longdate(aaaammgg,id_tag){
     if(isNaN(aaaammgg)){
          document.getElementById(id_tag).innerHTML="Data non valida!";
          return false;
     }
     if(aaaammgg.length!=8){
          document.getElementById(id_tag).innerHTML="Data non valida!";
          return false;
     }
     var anno = aaaammgg.substring(0,4);
     var mese = aaaammgg.substring(4,6);
     var giorno = aaaammgg.substring(6,8);
     if(anno>1900 && anno<3000 && mese>0 && mese<13 && giorno>0 && giorno<32){
          return true;
     }else{
          document.getElementById(id_tag).innerHTML="Formato data non valido!";
          return false;
     }
}

Quindi un esempio di form che richiami la funzione:

<html>
<head>
<title>Controllo Data</title>
<script type="text/javascript" src="check_longdate.js"></script>
<script type='text/javascript'>
function Controllo(){
     var g = document.data.g.value;
     var m = document.data.m.value;
     var a = document.data.a.value;
     var d = a+""+m+""+g;
     if(check_longdate(d,'box')==true){
          document.data.submit();
     }
}
</script>
</head>
<body>
<form method='post' name='data' action='pagina.php'>
Giorno <input type='text' maxlength='2' name='g' /> / Mese <input type='text' maxlength='2' name='m' /> / Anno <input type='text' maxlength='4' name='a' />
<span id='box' style='color:#FF0000'></span>
<input type='button' value='Conferma' onClick="Controllo()"/>
</form>
</body>
</html>

La funzione accetta due parametri : la stringa contenente la data nel formato aaaammgg e l’id del box nel quale far comparire l’eventuale messaggio di errore.

var mesi = new Array('Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno', 'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre');
function formatta_data(aaaammgg,tipo){
     if(isNaN(aaaammgg)){
          return 0;
     }
     if(aaaammgg.length!=8){
          return 0;
     }
     var anno = aaaammgg.substring(0,4);
     var mese = aaaammgg.substring(4,6);
     var giorno = aaaammgg.substring(6,8);
     if(anno>1900 && anno<3000 && mese>0 && mese<13 && giorno>0 && giorno<32){
          if(tipo=='/' || tipo=='-'){
               return giorno+tipo+mese+tipo+anno;
          }else{
	  if(tipo=='TXT'){
	       return giorno+" "+mesi[parseInt(mese)-1]+" "+anno;
	  }
	  return false;
          }
     }else{
          return 0;
     }
}

La funzione va quindi richiamata all’occorrenza con la seguente sintassi :

var data_1 = formatta_data('20100325','/');

var data_1 = formatta_data('20100325','-');

var data_1 = formatta_data('20100325','TXT');

Utilizzando come secondo argomento la stringa TXT la funzione stamperà la data in forma estesa.
Con semplici modifiche è possibile adattare la funzione per cui stampi la data nel formato a noi desiderato.

<script type='text/javascript'>
function in_primo(){
     window.focus();
}
</script>

Il codice va inserito all’interno del tag head del popup e richiamato nel tag body al verificarsi dell’evento onBlur() in queto modo:

<body onBlur="in_primo()">
---- Il corpo della pagina ----
</body>

NB. Si consiglia di non abusare dell’utilizzo di finestre con tale aspetto (non solo per una questione di accessibilità e di stile), difatti l’apertura di due finestre popup sempre in primo piano provoca evidenti conflitti di visualizzazione. Inoltre browser differenti interpretano lo script in maniera differente.
Lo script è stato testato con successo nelle versioni Exploer 6 e 7 e in Firefox 3.

• La pagina html/php da inviare al browser
• Lo script lato Server che controlla il refresh

Per implementare il meccanismo di refresh utilizzeremo PHP, Javascript e logicamente Ajax per gestire il processo di controllo in background.

Vediamo il codice php dello script di controllo:

<?php
// la variabile che utilizzeremo per verificare l'esito del controllo
// 0 se non è necessario il refresh
// 1 se è da effettuare il refresh
$esito = 0;

// effettuo alcuni controlli come ad esempio una query
// una modifica a variabili di sessione o altro - dipende da voi
// nel mio esempio controllo il numero di record in una tabella...
$db_host = "localhost";
$db_user = "user";
$db_password = "pass";
$db_database = "my_database";

$connessione=mysql_connect($db_host,$db_user,$db_password);
mysql_select_db($db_database,$connessione);

$query = "SELECT COUNT(*) AS conto  FROM tabella";
$result = mysql_query($query) or die (mysql_error());

$array = mysql_fetch_array($result);
if($array['conto']>1){
     $esito = 1;
}else{
     $esito = 0;
}

echo $esito;
?>

Vediamo ora la pagina html/php che verrà inviata al Client:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Fabio Donatantonio" />
<title>Pagina ricaricata dal server</title>
<script type='text/javascript'>
var conto = null;
/* Funzione che richiama il controllo ogni 10 secondi */
function countdown(){
	Data();
	conto = setTimeout("countdown()",10000);
}

/* Funzione che inizializza il motore Ajax */
var myRequest = null;
function CreateXmlHttpReq2(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

/* Funzione che verifica il responso della procedura di controllo
    se restituisce 1 allora effettua il refresh */
function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        if(myRequest.responseText=='1'){
        	var r = Math.random();
        	location.href = "index.php?rand="+escape(r)+"";
        }
    }
}

/* Funzione che invia la richiesta http alla funzione di controllo lato Server */
function Data(){
	var r = Math.random();
	myRequest = CreateXmlHttpReq2(myHandler);
	myRequest.open("GET","controllo.php?rand="+escape(r));
	myRequest.send(null);
}
</script>
</head>
<body>
<div align="center">
<fieldset class="corpo">
<legend>Refresh gestito dal Server</legend>
<div class='corpo'>
La pagina è stata aggiornata dal Server in data <?php date('d-m-Y')." alle ore ".date('G:i:s');?> !
</div>
<script type="text/javascript">
countdown();
</script>
</fieldset>
</div>
</body>
</html>

In questo esempio lo script javascript richiama la procedura di controllo in background ogni 10 secondi utilizzando Ajax. La procedura (controllo.php) restituisce 1 se è richiesto il refresh della pagina, 0 altrimenti.

Logicamente il file controllo.php va personalizzato alle proprie esigenze, così come può essere modificato l’intervallo tra un controllo e l’altro lato Server.
Questo esempio può essere ad esempio utile ad aggiornare una chat PHP qualora venga inserito un nuovo messaggio in database, evitando quindi che l’aggiornamento sia dipendente esclusivamente da un timer che non tiene conto dell’effettivo cambiamento di stato del database.

La classe FibGen.java:

public class FibGen
{

  // Metodo Costruttore vuoto
  public FibGen()
  {
  }

  // Metodo ricorsivo per il calcolo del relativo numero di Fibonacci
  public int nextNumber(int numero)
  {
    if(numero==0 || numero==1)
    {
        return 1;
    }
    else
    {
        // Chiamata ricorsiva
        return this.nextNumber(numero-1)+this.nextNumber(numero-2);
    }
  }
}

La classe di test TestFibonacci.java:

import java.util.Scanner;
public class TestFibonacci
{

  public static void main(String[] args)
  {
    // Creo un nuovo oggetto FibGen
    FibGen f = new FibGen();
    Scanner in = new Scanner(System.in);

    // Prendo in input un numero intero
    System.out.println("Dammi un numero intero di cui vuoi conoscere il numero di Fibonacci : ");
    int n = in.nextInt();

    // Calcolo il numero di Fibonacci relativo all'input
    System.out.println(f.nextNumber(n));
  }
}

La classe StampaTriangolo.java:

public class StampaTriangolo
{
int righe;

  // Metodo Costruttore inizializzato con un intero n
  public StampaTriangolo(int n)
  {
    righe = n;
  }

  // Metodo che stampa a video il triangolo
  public void eseguiTriangolo()
  {
    int i = righe;
    int iu = i;
    int k = 0;
    for(int j=1 ; j<i+1 ; j++)
    {
        int s = j + k;
        for(int z=iu ; z>0 ; z--)
        {
          System.out.print("   ");
        }

        for(int t=0 ; t< s ; t++)
        {
            System.out.print(" * ");
        }
        System.out.println("");
        k++;
        iu = iu -1 ;
    }
  }
}

La classe che contiene il main TestStampa.java:

import java.util.Scanner;
public class TestStampa {
  public static void main(String[] args)
  {
    Scanner in = new Scanner(System.in);

    // Prendo in input un intero, numero di righe nel triangolo
    System.out.println("Dammi il valore n del triangolo: (max 18) ");
    int num = in.nextInt();

    // Creo un nuovo oggetto StampaTriangolo
    StampaTriangolo tri = new StampaTriangolo(num);

    // Chiamo il metodo per stampare il triangolo
    tri.eseguiTriangolo();
  }
}

La classe Cambio.java:

public class Cambio
{
private double tasso;

  // Metodo Costruttore inizializzato con il tasso di cambio
  public Cambio(double t)
  {
    tasso = t;
  }

  // Metodo che permette di convertire una somma di denaro
  public double conversione(double v)
  {
    double temp = v * tasso;
    return temp;
  }

  // Metodo che restituisce il valore del tasso di cambio
  public double daiTassoCambio()
  {
    return tasso;
  }
}

La classe di test:

import java.util.Scanner;
public class TestCambio
{
  public static void main(String[] args)
  {
      Scanner in = new Scanner (System.in);

      // Prendo in input il tasso di cambio
      System.out.println("Dammi il tasso di cambio");
      double tax = in.nextDouble();

      // Creo un nuovo oggetto Cambio
      Cambio m = new Cambio(tax);

      double o = 1;

      // Effettuo il cambio tra monete
      while(o!=0)
      {
	System.out.println("Inserisci valore da convertire: (0 per uscire)");
	o = in.nextDouble();

	if(o!=0){
	    System.out.println("Col cambio : " + m.conversione(o));
	}else{
	    System.out.println("Programma concluso!");
	}
      }
  }
}

• void setPosition(String) // inserisce una lettera del codice
• void reset() // azzera la combinazione inserita
• void unlock() //apre la serratura se il codice passato è quello della serratura
• boolean isOpen() // verifica se la serratura è aperta
• void lock() // chiude la serratura
• void newComb(String) // assegna la nuova combinazione se la serratura è aperta

Ecco la classe Serratura.java:

public class Serratura
{
  String codice;
  String codInserito = null;
  String verifica = null;

  // Metodo Costruttore inizializzato con codice di tre lettere
  public Serratura(String c)
  {
    int lung = c.length();
    if(lung==3 && c.equals(c.toUpperCase()))
    {
        codice = c;
    }
    else
    {
        // Lancia eccezione se il codice non è di 3 lettere
        throw new IllegalArgumentException("Codice non valido.");
    }
  }

  // Metodo che permette di inserire il codice, un carattere per volta
  public void setPosition(String uno ,String due, String tre)
  {
    String temp = uno+due;
    String temp1 = temp+tre;
    codInserito = temp1;
  }

  // Metodo che permette di aprire la serratura se il codice è esatto
  public void unlock()
  {
      if ( codInserito.equals(codice))
      {
          verifica = "APERTA";
          System.out.println("Serratura Aperta");
      }
      else
      {
          verifica = "CHIUSA";
          System.out.println("Serratura chiusa");
      }
  }

  // Metodo che verifica lo stato della serratura
  public String isOpen()
  {
    String isOp = null;
    if(verifica.equals("APERTA"))
    {
      isOp = "Serratura aperta";
    }
    else
    {
      isOp = "Serratura chiusa";
    }
    return isOp;
  }

  // Metodo che permette di chiudere la serratura
  public void lock()
  {
    verifica = "CHIUSA";
    codInserito = null;
  }

  // Metodo che permette di settare un nuovo codice di serratura
  public void newComb(String nc)
  {
    if(verifica.equals("APERTA"))
    {
      codice = nc;
      verifica = "CHIUSA";
    }
    else
    {
      System.out.println("Serratura chiusa. ACCESSO NEGATO.");
    }
  }
}

La classe di test:

import java.util.Scanner;
public class TestSerratura {

  public static void main(String[] args)
  {
    Scanner in = new Scanner (System.in);

    // Creo una nuova serratura
    Serratura s = new Serratura("TRE");

    // Prendo in input le 3 lettere del codice
    System.out.println("Inserisci prima lettera codice : ");
    String c = in.nextLine();
    System.out.println("inserisci seconda lettera codice : ");
    String c1 = in.nextLine();
    System.out.println("Inserisci terza lettare codice : ");
    String c2 = in.nextLine();
    s.setPosition(c,c1,c2);

    // Verifico se il codice apre la serratura
    s.unlock();

    // Verifico lo stato della serratura
    System.out.println("Lo stato della serratura è : " +s.isOpen());

    // Setto una nuova combinazione se la serratura è aperta
    s.newComb("REE");

    // Verifico il nuovo stato della serratura
    System.out.println(s.isOpen());
  }
}

Per ulteriori prove modificare il codice della serratura, modificando il valore in input al costruttore. Da notare anche il primo uso delle eccezioni.

L’idea di base è questa:
Scriviamo nel DIV, prima di inviare la richiesta Ajax, l’immagine di loader. Una volta conclusa la richiesta l’immagine verrà sostituita dal contenuto richiesto.
Dopo aver visto il codice tratteremo brevemente pregi e difetti di questa soluzione.

<html>
<head><title>Aggiornamento DIV</title>
<script type="text/javascript">
var myRequest = null;

function CreateXmlHttpReq(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        e = document.getElementById("box");
        e.innerHTML = myRequest.responseText;
    }
}

// la funzione che permette di ricaricare il contenuto del div BOX
function Ricarica(){
             // scrivo nel BOX l'elemento di attesa
	document.getElementById("box").innerHTML="<div align='center'><div align='center' style='background:#c0c0c0'><img src='loading.gif' alt='Attendi'/><br/>Sto aggiornando i dati...</div></div>";

             // effettuo la richiesta AJAX
	var r = Math.random();
	myRequest = CreateXmlHttpReq(myHandler);
	myRequest.open("GET","aggiornamento_div.php?rand="+escape(r));
	myRequest.send(null);
}
</script>
</head>
<body>
    <!-- di seguito il div BOX -->
    <div id='box' style='text-align:center'>
    ... Contenuto del DIV ...
    </div>
    <!-- di seguito il bottone per ricaricare il box -->
    <input type='button' value='Ricarica' onclick='Ricarica()' />
</body>
</html>

La parte essenziale dello script si racchiude nella funzione Ricarica nella quale prima di effettuare la richiesta (verso una pagina fittizia aggiornamento_div.php) abbiamo la scrittura di un’immagine di attesa all’interno del div e successivamente la richiesta.
L’effetto che avremo è che dal momento in cui agiremo sul bottone di ricarica e fino all’avvenuta ricezione del contenuto aggiornato, verrà presentato all’utente un’animazione (o volendo un testo) di attesa.

Concludiamo sottolineando che qualora si volesse controllare l’attesa per evitare tempi troppo lunghi o eventualmente la mancata ricezione del contenuto, questo script non fa al nostro caso. Bensì si dovrà monitorare lo stato della richiesta con il metodo readyState.
Questa soluzione è quindi utile quando si è certi che la richiesta andrà a buon fine e lo scopo è semplicemente quello di presentare un’attesa all’utente.

E’ possibile scaricare da qui il codice completo e funzionante (con script di aggiornamento div compreso).

• Una mappa in formato JPG
• Un paio di simboli grafici come in Google Maps

Nel nostro esempio utilizzeremo come mappa:

Come simboli invece quelli classici presenti in Google Maps:

Il nostro obiettivo sarà essenzialmente quello di realizzare una mappa nella quale posizioneremo i simboli in luoghi da noi scelti.
A tale scopo utilizzeremo le librerie GD di PHP, ed in poche righe di codice raggiungeremo il nostro obiettivo. (N.B. E’ necessario avere installata e configurata la libreria GD)
Apporremo ad esempio su Napoli, Salerno e Sapri i tre simboli, non prima di aver individuato le coordinate sulla cartina. In ultimo salveremo la mappa risultante e la stamperemo a video.

<?php
// carico l'immagine da usare come mappa
$campania = imageCreateFromJpeg('campania.jpg');

// carico i simboli in stile Google Maps
$rosso = imageCreateFromPng('rosso.png');
$giallo = imageCreateFromPng('giallo.png');
$verde = imageCreateFromPng('verde.png');

// appongo i simboli in 3 posizioni diverse della cartina
// imageCopy(la mappa, il simbolo da apporre, coordinata x mappa, coordinata y mappa, coordinata x simbolo, coordinata y simbolo, larghezza simbolo, altezza simbolo);

// simbolo rosso su Salerno
imageCopy($campania,$rosso,203,151,0,0,15,25);

// simbolo verde su Napoli
imageCopy($campania,$verde,124,115,0,0,15,25);

// simbolo giallo su Sapri
imageCopy($campania,$giallo,333,272,0,0,15,25);

// la cartina è pronta per essere creata e memorizzata
imageJpeg($campania,"campania_maps.jpg",100);

// stampa a video
echo "<img src='campania_maps.jpg' alt='La mia mappa'/>";
?>

Ecco il risultato dello script:

In poche linee di codice abbiamo creato la nostra prima mappa. Con un pizzico di fantasia sarà possibile realizzare mappe più complesse o semplicemente aggiungere elementi ad immagini di base.

Clicca qui per scaricare lo script e le immagini.

• Data e ora
• Indirizzo IP del Client
• Indirizzo di provenienza Client
• Altre info come Browser e SO

Vediamo quindi lo script che ci permette di implementare il logger.

<?php
$provenienza = $_SERVER['HTTP_REFERER'];
$data = date("d-m-y"); $ora = date("G:i:s");
$ip = $_SERVER['REMOTE_ADDR'];
$altre_info = $_SERVER['HTTP_USER_AGENT'];

$testo = "------\n\r".$data." ".$ora;
$testo = $testo."\n\rIndirizzo IP: ".$ip;
$testo = $testo."\n\rProvenienza connessione: ".$provenienza;
$testo = $testo."\n\rAltre info: ".$altre_info;
$testo = $testo."\n\r------\n\r";

$var=fopen("logger.txt","a");
fwrite($var,$testo);
fclose($var);
?>

Questo script va posizionato in cima ad una pagina php o comunque di regola nella pagina index del sito.

La classe Year.java

public class Year
{
int anno;

  // Metodo Costruttore inizializzato con anno
  public Year(int a)
  {
    if(a>=1980 && a<=2100)
    {
        anno = a;
    }
    else
    {
        // Lancia un'eccezione se l'anno non è compreso tra 1980 e 2100
        throw new IllegalArgumentException("Formato anno non valido");
    }
  }

  // Metodo che restituisce l'anno
  public int getYear()
  {
    return anno;
  }

  // Metodo che verifica se l'anno è bisestile
  public String isLeapYear()
  {
    String verifica = "NO";

    int annoCorrente = this.getYear();
    if(annoCorrente % 4 == 0){
    	System.out.println("Anno bisestile");
        verifica = "bisestile";
    }
    return verifica;
  }
}

La classe Month.java

public class Month
{
int mese;
int anno;
Year ann;

  // Metodo Costruttore inizializzato con il numero del mese e un oggetto Year
  public Month(Year a,int m)
  {
    mese = m;
    ann = a;
    anno = a.getYear();
  }

  // Metodo che restituisce il nome del mese
  public void getMonth()
  {
    if (mese >=1 && mese < 13)
    {
      if (mese==1){  System.out.print("GENNAIO  ");}
      if (mese==2){  System.out.print("FEBBRAIO ");}
      if (mese==3){  System.out.print("MARZO  ");}
      if (mese==4){  System.out.print("APRILE ");}
      if (mese==5){  System.out.print("MAGGIO ");}
      if (mese==6){  System.out.print("GIUGNO ");}
      if (mese==7){  System.out.print("LUGLIO ");}
      if (mese==8){  System.out.print("AGOSTO ");}
      if (mese==9){  System.out.print("SETTEMBRE  ");}
      if (mese==10){  System.out.print("OTTOBRE ");}
      if (mese==11){  System.out.print("NOVEMBRE  ");}
      if (mese==12){  System.out.print("DICEMBRE  ");}
    }
    else
    {
      System.out.println("Formato mese non valido");
    }
  }

  // Metodo che restituisce il numero di giorni corrispondente al mese
  public void getDays()
  {
    String v = ann.isLeapYear();
    if(mese == 2)
    {
      // Se il mese è Febbraio verifica l'anno se bisestile
      if(v.equalsIgnoreCase("bisestile"))
      {
        System.out.println("  1   2   3   4   5   6   7 ");
        System.out.println("  8   9   10  11  12  13  14");
        System.out.println("  15  16  17  18  19  20  21");
        System.out.println("  22  23  24  25  26  27  28");
        System.out.println("  29    ");
      }
      else
      {
        System.out.println("  1   2   3   4   5   6   7 ");
        System.out.println("  8   9   10  11  12  13  14");
        System.out.println("  15  16  17  18  19  20  21");
        System.out.println("  22  23  24  25  26  27  28");
      }
    }
    if(mese==1 || mese==3 || mese==5 || mese==7 || mese==8 || mese==10 || mese==12)
    {
      System.out.println("  1   2   3   4   5   6   7 ");
      System.out.println("  8   9   10  11  12  13  14");
      System.out.println("  15  16  17  18  19  20  21");
      System.out.println("  22  23  24  25  26  27  28");
      System.out.println("  29  30  31  ");
    }
    if(mese==4 || mese==6 || mese==9 || mese ==11)
    {
      System.out.println("  1   2   3   4   5   6   7 ");
      System.out.println("  8   9   10  11  12  13  14");
      System.out.println("  15  16  17  18  19  20  21");
      System.out.println("  22  23  24  25  26  27  28");
      System.out.println("  29  30  ");
    }
  }
}

La classe di test TestCalendario.java

import java.util.Scanner;
public class TestCalendario
{
  public static void main(String[] args)
  {
    Scanner in = new Scanner(System.in);

    // Prendo in input l'anno
    System.out.println("Dammi l'anno :");
    int a = in.nextInt();

    // Prendo in input il mese
    System.out.println("Dammi il mese (numero): ");
    int m = in.nextInt();

    // Creo un oggetto Year e un oggetto Month
    Year ye = new Year(a);
    Month mo = new Month(ye,m);

    // Visualizzo i dati completi
    mo.getMonth();
    System.out.println(ye.getYear());
    mo.getDays();
  }
}

La classe OrdineLessicografico.java:

public class OdineLessicografico {
String prima;
String seconda;
String terza;
String quarta;

  // Metodo costruttore inizializzato con 4 Stringhe
  public OdineLessicografico(String p,String s,String t,String q)
  {
    prima = p;
    seconda = s;
    terza = t;
    quarta = q;
  }

  // Metodo che ordina in modo lessicografico la prima e la quarta parola
  public void ordina()
  {
    if (prima.compareTo(quarta)<0)
    {
      System.out.println(prima);
      System.out.println(quarta);
    }
    else
    {
      System.out.println(quarta);
      System.out.println(prima);
    }
  }
}

La classe di test:

import java.util.Scanner;
public class TestOrdine {

  public static void main(String[] args)
  {
    Scanner in = new Scanner(System.in);

    // Prendo in input 4 parole
    System.out.println("Dammi 4 parole (ognuna seguita dal tasto <invio>): ");
    String a = in.nextLine();
    String b = in.nextLine();
    String c = in.nextLine();
    String d = in.nextLine();

    // Creo un nuovo oggetto OrdineLessicografico
    OdineLessicografico x = new OdineLessicografico(a,b,c,d);

    // Chiamo il metodo ordina
    x.ordina();
  }
}

• “OK” se legge “S” ,”SI”, “OK”, “certo” oppure “perche` no?”.
• “Fine” se legge “N” o “No”
• “Dato non corretto” altrimenti

A tal fine scrivere una classe InputChecker.

La classe InputChecker.java:

public class InputChecker {
String inp;

  // Metodo Costruttore
  public InputChecker(String v)
  {
    inp = v;
  }

  // Metodo che verifica l'input e stampa la relativa informazione
  public void verificaInput()
  {
    if(inp.equalsIgnoreCase("S") || inp.equalsIgnoreCase("SI") ||inp.equalsIgnoreCase("OK") || inp.equalsIgnoreCase("certo") || inp.equalsIgnoreCase("perchè no?"))
    {
      System.out.println("OK");
    }
    else
    {
      if(inp.equalsIgnoreCase("N") || inp.equalsIgnoreCase("No"))
      {
        System.out.println("Fine");
      }
      else
      {
        System.out.println("Dato non corretto");
      }
    }

  }
}

La classe di test:

import java.util.Scanner;
public class TestInputCheck {

  public static void main(String[] args)
  {
    Scanner in = new Scanner(System.in);

    // Prendo in input la parola da verificare
    System.out.println("Dammi l'input di verifica: ");
    String a = in.nextLine();

    // Creo un nuovo oggetto InputChecker
    InputChecker x = new InputChecker(a);

    // Verifico l'input
    x.verificaInput();
  }
}

La classe VirgolaMobile.java:

import java.util.Scanner;
public class VirgolaMobile
{
	public static void main(String[] args)
	{
		Scanner in = new Scanner(System.in);

		// Prendo in input 3 numeri in virgola mobile
		System.out.println("Dammi tre numeri in virgola mobile seguiti da <invio> :");
		double a = in.nextDouble();
		double b = in.nextDouble();
		double c = in.nextDouble();

		// Stampo a video i tre numeri in ordine decrescente
		System.out.println("Ecco i tre numeri in ordine descrescente:");
		if (a>b && a>c)
		{
			System.out.println(a);
			if( b>c)
			{
				System.out.println(b);
				System.out.println(c);
			}
			else
			{
				System.out.println(c);
				System.out.println(b);
		    }
		}
		else
		{
			if (b>a && b>c)
			{
				System.out.println(b);
				if (a>c)
				{
					System.out.println(a);
					System.out.println(c);
				}
				else
				{
					System.out.println(c);
					System.out.println(a);
				}

			}
			else
			{
				if (c>a && c>b)
				{
					System.out.println(c);
					if(a>b)
					{
						System.out.println(a);
						System.out.println(b);
					}
					else
					{
						System.out.println(b);
						System.out.println(a);
					}
				}
			}
		}
	}
}

La classe Mesi.java:

public class Mesi {
int mese;

  // Metodo Costruttore inizializzato con int m = numero del mese
  public Mesi(int m)
  {
    mese = m;
  }

  // Metodo che restituisce il relativo mese
  public void getName()
  {
    if (mese > 12)
    {
        System.out.println("ERRORE MESE");
    }
    else
      if (mese == 1)
      {
         System.out.print("1  ");
         System.out.println("GENNAIO");
      }

      if (mese == 2)
      {
         System.out.print("2  ");
         System.out.println("FEBBRAIO");
      }

      if (mese == 3)
      {
         System.out.print("3  ");
         System.out.println("MARZO");
      }

      if (mese == 4)
      {
         System.out.print("4  ");
         System.out.println("APRILE");
      }

      if (mese == 5)
      {
         System.out.print("5  ");
         System.out.println("MAGGIO");
      }

      if (mese == 6)
      {
         System.out.print("6  ");
         System.out.println("GIUGNO");
      }

      if (mese == 7)
      {
         System.out.print("7  ");
         System.out.println("LUGLIO");
      }

      if (mese == 8 )
      {
         System.out.print("8  ");
         System.out.println("AGOSTO");
      }

      if (mese == 9)
      {
         System.out.print("9  ");
         System.out.println("SETTEMBRE");
      }

      if (mese == 10)
      {
         System.out.print("10  ");
         System.out.println("OTTOBRE");
      }

      if (mese == 11)
      {
         System.out.print("11  ");
         System.out.println("NOVEMBRE");
      }

      if (mese == 12)
      {
         System.out.print("12  ");
         System.out.println("DICEMBRE");
      }

      if (mese < 1)
      {
          System.out.println("ERRORE MESE");
      }
  }
}

La classe di test TestMese.java:

public class TestMese
{
  public static void main(String[] args)
  {
    // Stampo a video i nomi dei 12 mesi dell'anno
    for ( int i = 1 ; i < 13 ; i++)
    {
      Mesi a = new Mesi(i);
      a.getName();
    }
  }
}

La classe LetturaInversa.java:

public class LetturaInversa
{
int numero;

  // Metodo costruttore che prende in input un numero intero
  public LetturaInversa(int n)
  {
      numero = n;
  }

  // Metodo che stampa le cifre che compongono il numero in modo inverso
  public void stampaContrario()
  {
    // Converto il numero in una stringa
    String num = Integer.toString(numero);

    // Stampo a video un numero alla volta partendo dall'ultimo numero
    for(int i=0; i<num.length(); i++){
    	System.out.println(num.substring(num.length()-i-1,num.length()-i));
    }
  }
}

La classe di test:

import java.util.Scanner;
public class TestInverso {

  public static void main(String[] args)
  {

    Scanner in = new Scanner(System.in);

    // Prendo in input il numero di 5 cifre
    System.out.println("Dammi un numero : ");
    int x = in.nextInt();

    if(x>99999){
    	System.out.println("Doveni inserire un valore di 5 cifre o inferiore!");
    }else{
    	// Creo un nuovo oggetto per la lettura inversa
        LetturaInversa a = new LetturaInversa(x);

        // Stampo a video i numeri in ordine inverso
        System.out.println("Ecco i numeri stampati in ordine inverso : ");
        a.stampaContrario();
    }
  }
}

E’ innanzitutto necessario scaricare PChart da qui.

Vediamo ora come realizzare un semplice grafico utilizzando la libreria.

<?php
// importiamo la libreria
include("pChart/pData.class");
include("pChart/pChart.class");

// carico i valori da rappresentare graficamente - utilizzo 2 array
$DataSet = new pData;
$DataSet->AddPoint(array(0,3,6,2,3,1,4,8,10,6,3,5,6),"Serie1");
$DataSet->AddPoint(array(0,1,3,4,1,3,7,5,6,7,3,8,5),"Serie2");
$DataSet->AddAllSeries();

// imposto la legenda
$DataSet->SetSerieName("La prima serie","Serie1");
$DataSet->SetSerieName("La seconda serie","Serie2");  

// imposto un nome agli assi cartesiani
$DataSet->SetXAxisName("Mesi");
$DataSet->SetYAxisName("Valore raggiunto");

$Test = new pChart(500,250);

// imposto l'aspetto del grafico
$Test->setFixedScale(0,11);
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->setGraphArea(50,40,500,210);
$Test->drawFilledRoundedRectangle(7,7,543,243,5,240,240,240);
$Test->drawRoundedRectangle(5,5,550,250,5,400,400,400);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(), SCALE_NORMAL,150,150,150,TRUE,0,0);
$Test->drawGrid(10,TRUE,230,230,230,50);

// imposto il tipo di grafico - lineare, curvilineo, torta ecc...
$Test->setColorPalette(0,0,255,0);
$Test->setLineStyle(1.5);
$Test->drawTreshold(0,143,55,72,TRUE,TRUE);
$Test->drawCubicCurve($DataSet->GetData(),$DataSet->GetDataDescription());
$Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(), 1.5,1.5,0,0,255);

// imposto titolo e legenda del grafico e quindi lo realizzo
$Test->drawLegend(55,40,$DataSet->GetDataDescription(),255,255,255);
$Test->setFontProperties("Fonts/tahoma.ttf",10);
$Test->drawTitle(100,22,"Il primo grafico",0,0,100);
$Test->Render("grafico.png");
?>

Quello che abbiamo realizzato è un semplice grafico introduttivo. Studiando la documentazione di PChart si potranno realizzare grafici complessi e graficamente accattivanti. Si potrà ad esempio prelevare i dati da un file excel, personalizzare gli assi cartesiani, i colori e le scale e sbizzarrirsi a creare grafici tridimensionali.

Ecco il risultato del nostro script:

function countdown(){
	var ora = parseFloat(document.rovescia.conto.value);
	ora = ora + 0.5;
	document.rovescia.conto.value=ora;
	var g_c = ora*3;
	document.getElementById("barra").innerHTML="<div style='height:10px; width:"+g_c+"px; background-color:#FF0000'></div>";
	if(ora==60){
		location.href = "reindirizzamento.html";
	}
	conto = setTimeout("countdown()",500);
}

Utilizzeremo un contatore immagazzinato in un input hidden che chiameremo “conto”. Viceversa un altro blocco che chiameremo “barra” conterrà l’avanzamento del caricamento. Dopo 60 secondi la barra di caricamento sarà completata.
L’aspetto grafico della barra verrà implementata con un semplice DIV e un minimo di CSS.

Ora vediamo lo script inserito in una pagina html:

<html>
<head>
    <title>Pagina di reindirizzamento</title>
    <script type="text/javascript">
    function countdown(){
	var ora = parseFloat(document.rovescia.conto.value);
	ora = ora + 0.5;
	document.rovescia.conto.value=ora;
	var g_c = ora*3;
	document.getElementById("barra").innerHTML="<div style='height:10px; width:"+g_c+"px; background-color:#FF0000'></div>";
	if(ora==60){
		location.href = "reindirizzamento.html";
	}
	conto = setTimeout("countdown()",500);
    }
    </script>
</head>
<body>
Stai per essere reindirizzato alla pagina corretta...
<br/>
<form name='rovescia' action='#'>
    <input type='hidden' name='conto' value='0'/>
</form>
<div class='barra' id='barra' style='border:1px solid #000000; width:180px;'>
<script type="text/javascript">
    countdown();
</script>
</body>
</html>

La classe Cashier.java

public class Cashier
{
double resto;

  // Metodo Costruttore vuoto
  public Cashier()
  {
  }

  // Metodo che restituisce una moneta da 2 Euro
  public double dai2Euro()
  {
      return 2;
  }

  // Metodo che restituisce una moneta da 1 Euro
  public double dai1Euro()
  {
      return 1;
  }

  // Metodo che restituisce una moneta da 50 centesimi
  public double dai50Cent()
  {
      return 0.50;
  }

  // Metodo che restituisce una moneta da 20 centesimi
  public double dai20Cent()
  {
      return 0.20;
  }

  // Metodo che restituisce una moneta da 10 centesimi
  public double dai10Cent()
  {
      return 0.10;
  }

  // Metodo che restituisce una moneta da 5 centeimi
  public double dai5Cent()
  {
      return 0.05;
  }

  // Metodo che restituisce una moneta da 2 centesimi
  public double dai2Cent()
  {
      return 0.02;
  }

  // Metodo che restituisce una moneta da 1 centesimo
  public double dai1Cent()
  {
      return 0.01;
  }

}

La classe Resto.java:

import java.util.Scanner;
public class Resto
{

  public static void main(String[] args)
  {
    Scanner in = new Scanner(System.in);

    // Prendo in input la somma da pagare
    System.out.println("Dammi il prezzo : ");
    double p = in.nextDouble();

    // Prendo in input la somma emessa per il pagamento
    System.out.println("Dammi la somma di denaro");
    double s = in.nextDouble();

    // Creo un nuovo oggetto Cashier per gestire il resto
    Cashier a = new Cashier();

    System.out.println("Ecco il resto in monete: ");
    // Verifico che la somma emessa sia >= del prezzo del prodotto
    if (s >= p)
    {
        // Calcolo il resto
        double r = s - p;
        double re = 0 ;

        // Emetto se necessario moneta da 2 Euro
        while (r >= 2)
        {
            System.out.println(a.dai2Euro());
            r = r - a.dai2Euro();
            re = re + a.dai2Euro();
        }

        // Emetto se necessario moneta da 1 Euro
        while (r >= 1)
        {
            System.out.println(a.dai1Euro());
            r = r - a.dai1Euro();
            re = re + a.dai1Euro();
        }

        // Emetto se necessario moneta da 50 centesimi
        while (r >= 0.50)
        {
            System.out.println(a.dai50Cent());
            r = r - a.dai50Cent();
            re = re + a.dai50Cent();
        }

        // Emetto se necessario moneta da 20 centesimi
        while (r >= 0.20)
        {
            System.out.println(a.dai20Cent());
            r = r - a.dai20Cent();
            re = re + a.dai20Cent();
        }

        // Emetto se necessario moneta da 10 centesimi
        while (r >= 0.10)
        {
            System.out.println(a.dai10Cent());
            r = r - a.dai10Cent();
            re = re + a.dai10Cent();
        }

        // Emetto se necessario moneta da 5 centesimi
        while (r >= 0.05)
        {
            System.out.println(a.dai5Cent());
            r = r - a.dai5Cent();
            re = re + a.dai5Cent();
        }

        // Emetto se necessario moneta da 2 centesimi
        while (r >= 0.02)
        {
            System.out.println(a.dai2Cent());
            r = r - a.dai2Cent();
            re = re + a.dai2Cent();
        }

        // Emetto se necessario moneta da 1 centesimo
        while (r >= 0.01)
        {
            System.out.println(a.dai1Cent());
            r = r - a.dai1Cent();
            re = re + a.dai1Cent();
        }

    // Stampo a video il resto
    System.out.print("Per un totale di : ");
    System.out.println(" Euro " + re);

    }
  }
}

Classe Quadrato.java:

import java.math.*;
public class Quadrato
{
  int lato;
  // Metodo costruttore inizializzato con la misura del lato
  public Quadrato(int l)
  {
      lato = l;
  }

  // Metodo che calcola l'area
  public int calcolaA()
  {
      return (lato*lato);
  }

  // Metodo che calcola il perimetro
  public int calcolaP()
  {
      return (lato*4);
  }

  // Metodo che calcola la diagonale
  public double calcolaD()
  {
      // Chiamata al metodo sqrt della classe MATH
      // Calcolo della radice quadrata di 2
      double r = Math.sqrt(2);
      return (lato*r);
  }

  // Metodo che restituisce la misura del lato
  public int getLato()
  {
      return lato;
  }
}

La classe di test TestQuadrato.java:

import java.util.Scanner;
public class TestQuad {

  public static void main(String[] args)
  {
      Scanner in = new Scanner(System.in);

      // Prendo in input la misura del lato
      System.out.println("Dammi la misura del lato");
      int l = in.nextInt();

       // Creo un nuovo oggetto di tipo Gauadrato
      Quadrato a = new Quadrato(l);

      // Stampo a video l'area, il perimetro e la diagonale
      System.out.println("L'area è pari a ");
      System.out.println(a.calcolaA());

      System.out.println("Il perimetro è pari a ");
      System.out.println(a.calcolaP());

      System.out.println("La diagonale è: ");
      System.out.println(a.calcolaD());
  }
}

Codice della classe Dado.java:

import java.util.Random;
public class Dado
{
  // Metodo Costruttore inizializzato con il numero di facce del dado
  public Dado(int s)
  {
    facce = s;
    // Generatore di numeri casuali
    generatore = new Random();
  }

  // Metodo costruttore del dado classico con 4 facce
  public Dado(){
    facce = 4;
    // Generatore di numeri casuali
    generatore = new Random();
  }

  // Metodo che simula il lancio del dado
  public int lancia()
  {
      return 1 + generatore.nextInt(facce);
  }

  private Random generatore;
  private int facce;
}

La classe di test TestLancio.java:

import java.util.Scanner;
public class TestLancio {

  public static void main(String[] args)
  {
      // Creo un nuovo dado con 6 facce
      Dado d = new Dado(6);
      Scanner in = new Scanner(System.in);

      // Simulo una certa quantità di lanci
      System.out.println("Quanti lanci vuoi simulare?");
      int n = in.nextInt();

      for( int i = 0 ; i < n ; i++)
      {
          int r = d.lancia();
          // Visualizzo il risultato di ogni singolo lancio
          System.out.print(r + "  ");
      }
  }
}

Ecco il codice della classe Moneta.java

import java.util.Scanner;
public class Moneta{

  public static void main(String[] args)
  {
      // Imposto il valore delle monete
      final double dieciCent = 0.10;
      final double ventiCent = 0.20;
      final double cinquantaCent = 0.50;
      final double unEur = 1;
      final double duEur = 2;

      Scanner in = new Scanner(System.in);

      // Prendo in input il numero di monete da 10 centesimi
      System.out.println("Quanti 10 centesimi hai?");
      int dieci = in.nextInt();

      // Prendo in input il numero di monete da 20 centesimi
      System.out.println("Quanti 20 centesimi hai?");
      int venti = in.nextInt();

      // Prendo in input il numero di monete da 50 centesimi
      System.out.println("Quanti 50 centesimi hai?");
      int cinquanta = in.nextInt();

      // Prendo in input il numero di monete da 1 Euro
      System.out.println("Quanti 1 euro hai?");
      int euri = in.nextInt();

      // Prendo in input il numero di monete da 2 Euro
      System.out.println("Quanti 2 euro hai?");
      int duEuri = in.nextInt();

      // Calcolo il totale di monete e lo visualizzo a video
      double totale = dieci*dieciCent + venti*ventiCent + cinquanta*cinquantaCent + euri*unEur + duEuri*duEur;
      System.out.println("Totale Euro nel portafoglio = " + totale);

  }
}

Ma il treno va lontano il treno porta via
e batte un tempo strano lungo la strada mia
più indietro c’è un bambino col naso che gli cola
poi vengono gli amici dei tempi della scuola
l’amore chiuso al bagno con una mano sola
le canzoni sconce urlate a squarciagola

Ma il treno corre forte e il treno adesso vola
sulle distese immense di ciclamini viola
sulle colline dolci coperte da lenzuola
sopra quei balli tristi coi buchi nella suola
sopra le notti spese in cerca di puttane
sui versi di Pavese sulle promesse vane

Ma il treno corre forte su tutta la mia vita
che passa via veloce che sfugge fra le dita
risento la sua voce si riapre la ferita
la gioventù è passata per non ritornare mai più

Ma il treno va lontano e non si è mai fermato
ma gli occhi di quest’ uomo conservano il passato
e adesso vedo i visi di gente sconosciuta
che cerca nei sorrisi la libertà perduta
la zingara fortuna che scopre le mie carte
che legge nella luna quale sarà la sorte

Ma il treno corre forte si fermerà soltanto
quando qualcuno un giorno mi chiamerà nel vento…

Classe Cartolina.java

public class Cartolina
{
  String destinatario;
  String caP;
  String citta;
  final String testo;

  /* Metodo Costruttore inizializzato con destinatario,
     codice di avviamento postale e città.
     Testo cartolina già impostato.
  */
  public Cartolina(String d, String cap, String c )
  {
      destinatario = d;
      caP = cap;
      citta = c;
      testo = "Saluti e baci da Parigi. Fabio";
  }

  // Metodo che visualizza i dati della cartolina
  public void visualizza()
  {
      System.out.println("*** CARTOLINA ***");
      System.out.print("Per : " + destinatario);
      System.out.print(" " +caP);
      System.out.println(" " + citta);
      System.out.println(testo);
  }
}

Classe di test

import java.util.Scanner;
import java.util.ArrayList;
public class TestCarolina {

  public static void main(String[] args)
  {
      ArrayList<Cartolina> cart = new ArrayList<Cartolina>();
      Scanner in = new Scanner(System.in);

      // Prendo in input il numero di cartoline da compilare
      System.out.println("Quante cartoline vuoi spedire?");
      int t = in.nextInt();
      in.nextLine();

      int l = 1;

      // Compilo le cartoline
      while ( t > 0)
      {
        System.out.println(" CARTOLINA numero : " + l);

        // Prendo in input il destinatario
        System.out.println("Dammi il destinatario :");
        String n = in.nextLine();

        // Prendo in input il CAP
        System.out.println("Dammi il cap :");
        String cp = in.nextLine();

        // Prendo in input la cità
        System.out.println("Dammi la città :");
        String cy = in.nextLine();

        // Creo una nuova cartolina con i dati acquisiti
        Cartolina a = new Cartolina(n,cp,cy);

        // Aggiungo la cartolina in una collezione
        cart.add(a);
        l++;
        t--;
      }

      // Stampo a video le cartoline create
      for (int i =0 ; i<cart.size(); i++)
      {
          Cartolina a = (Cartolina) cart.get(i);
          a.visualizza();
      }

  }
}