JavaScript  »  Articoli  »  Programmazione Javascript 

Javascript è un linguaggio molto potente e perfetto per creare interazione con l'utente. In questo articolo vedremo alcuni piccoli esempi in grado di aggiungere effetti dinamici alle nostre pagine HTML. Ci sono alcune premesse da fare. L'ideale, come suggerito negli ottimi articoli Il nuovo Javascript: separare l'azione dalla struttura e Javascript e CSS: separare l'azione dalla presentazione è separare totalmente codice Javascript, HTML e CSS. Una buona pratica che per brevità e semplicità di alcuni esempi non rispetteremo, usando script in linea, fino ad arrivare ad una versione totalmente separata in termini di codice nell'ultima dimostrazione.

Gli esempi che vedremo verranno esposti con una piccola descrizione del codice. Farò comunque in modo che non sia necessaria la conoscenza di Javascript per poterli usare. Per chi non è molto pratico di Javascript, questa è un'ottima introduzione alla gestione degli eventi, argomento la cui conoscenza necessaria per l'approfondita comprensione degli esempi qui presentati.

Mostrare elementi all'onclick

Il nostro primo esempio è composto da una semplicissima funzione che agisce sulla proprietà CSS display. In sostanza, un div o un qualsiasi elemento reso inizialmente display:none via CSS, viene mostrato grazie al click su un link di questo tipo:

<a href="#" onclick="Show('primo');return(false)">Raccontami qualcosa...</a>

In grassetto, tra singoli apici, vi basterà sostituire l'id dell'elemento che vorrete mostrare se l'utente clicca sul link. Vediamo la funzione Javascript, da includere nella sezione head della pagina HTML:

<script type="text/Javascript">
function Show(id){
if(document.getElementById)
  document.getElementById(id).style.display="block";
}
</script>

Da notare che per questo primo esempio ho incluso apertura e chiusura del tag script che contiene il codice Javascript. La funzione è molto semplice: riceve l'id dell'elemento HTML da mostrare. Una questione aperta che con Javascript disabilitato per l'utente il link non funzionerà e non riuscirà ad accedere al contenuto. Una combinazione di CSS e Javascript è in grado di risolvere le cose, ecco una semplice alternativa un po' più accessibile con Javascript disabilitato (rimando alla visualizzazione diretta del codice per i dettagli).

Mostrare e nascondere elementi all'onclick

Nel prossimo esempio, facciamo un piccolo passo avanti: grazie ad un link potremo infatti mostrare o nascondere un'elemento della pagina HTML. Anche in questo questo caso la chiamata Javascript viene invocata da uno script in linea:

<a href="#" onclick="ShowHide('commenti');return(false)">Mostra /nascondi commenti</a>

Il link interverrà in questo caso sul div id="commenti", che ha inizialmente display:none impostato via CSS, grazie alla seguente funzione Javascript:

function ShowHide(id){
 if(document.getElementById){
  var el=document.getElementById(id);
  el.style.display = (el.style.display=="block") ? "none" : "block";
 }
}

Altri articoli

Altre guide

Altre newsletter