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

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

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

Vediamo subito il codice Javascript:

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

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

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

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

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

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

ricercaInCol('id_table',3);

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

Vediamo ora il codice CSS utilizzato:

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

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

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

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

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

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

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

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

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

A tal proposito vediamo il codice html:

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

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

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

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

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

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

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

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

In questo articolo creeremo, partendo da zero, una finestra contenente un elenco di news che in sequenza appariranno a video con un effetto a dissolvenza(fade).
Utilizzeremo jQuery esclusivamente per gestire le animazioni e grazie a Javascript realizzeremo le funzioni necessarie per implementare la nostra finestra delle news. Per completare l’opera e dare al box la parvenza di finestra, forniremo una semplice barra del titolo compresa di icona per la chiusura della finestra.
In fondo all’articolo è possibile provare e scaricare il codice completo.

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.

In un articolo di un pò di tempo fa, si è visto come centrare con CSS/Javascript un div al centro della pagina.
L’obiettivo di questo nuovo articolo è far si che il div venga visualizzato sempre al centro della finestra, anche qualora l’utente fa lo scrolling della pagina.
Il div in questione seguirà l’utente, restando effettivamente sempre al centro della pagina. Potremo utilizzare questa tecnica per inserire un messaggio o un immagine in evidenza nel nostro sito oppure un banner.

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.

In questo articolo vedremo un esempio di applicazione DHTML(Dynamic HTML). Utilizzando Javascript per accedere al DOM, realizzeremo una tabella inizialmente vuota che, tramite un’apposita funzione richiamata da un bottone, verrà riempita riga per riga dall’utente.
L’applicazione si compone essenzialmente di una sola funzione; la quale genererà una nuova riga con un numero di celle pari al numero di colonne presenti nella tabella. Per ogni cella chiederà all’utente, tramite prompt, il testo da inserire.
In fondo all’articolo è possibile provare o scaricare il codice completo.

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.

In un articolo precedente si è visto come realizzare una semplice presentazione di immagini con poche istruzione Javascript, utilizzando i cicli di temporizzazione per sostituire di volta in volta le immagini.
Lo script che analizzeremo consiste in un miglioramento grafico di quello precedente. Infatti verrà utilizzato un effetto sfumatura per sostituire un’immagine con la successiva.
A tale scopo è necessario utilizzare il framework JQuery, in particolare due funzioni del package Effects:
- fadeOut()
- fadeIn()

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

Tramite lo script che andremo ad analizzare verrà implementata una presentazione di immagini.
Le immagini verranno presentate in sequenza e saranno resi disponibili due bottoni, uno per avviare la presentazione e l’altro per fermarla.
Innanzitutto vediamo il codice 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 = 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

La precisa temporizzazione degli eventi sulle pagine web le trasforma da documenti statici a vere applicazioni multimediali.
Un esempio classico e allo stesso tempo esaustivo è la realizzazione di un orologio javascript che utilizzi dei cicli di temporizzazione.

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

In questo articolo verranno descritte alcune utili funzioni per modificare tramite codice Javascript i link presenti all’interno di una pagina web. Le funzioni saranno quindi incentrate sul tag <a> e su i suoi parametri.
Realizzeremo quattro diverse funzioni:

• 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 molti casi risulta necessario creare un modulo di immissione dati che si adatti alle diverse scelte dell’utente. In altri termini vorremmo poter aggiungere ad esempio un campo di testo qualora l’utente selezioni una particolare voce o semplicemente in relazione ad un input precedentemente inserito.
Un classico esempio a chiarire le idee è un form che visualizzando un importo(in euro ad esempio) permetta all’utente di scegliere il numero di rate per cui dilazionare la somma. In questo caso vorremmo che il nostro form sia il più dinamico possibile, inserendo un numero di righe pari al numero di rate scelte.

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.