La funzione "consiglia il sito ad un amico" è considerata una delle tecniche migliori per diffondere i propri contenuti. Presente in molti siti Web, consente all'utente che sta leggendo in quel momento la pagina di consigliarla ad un suo conoscente, inviando per posta elettronica l'indirizzo del documento e un breve commento.
Le funzioni presenti sui siti Web, ed anche su HTML.it, solitamente usano script ASP o PHP. Ciò significa che l'invio della mail deve essere gestita da un sito web che supporti tecnologie lato server, cosa che non tutti gli spazi web permettono.
Grazie a JavaScript e alle sue interazioni con i moduli possiamo approntare un "sistema di emergenza" che, sebbene non abbia la raffinatezza tecnologica delle soluzioni in ASP o PHP, può considerarsi un'alternativa al metodo server-side. Lo script vi servirà inoltre per poter imparare qualcosa in più sull'interazione di JavaScript con i moduli o form.
Il mezzo usato per inviare il messaggio di posta è la principale differenza fra i moduli di invio lato server e quello che vi presentiamo oggi. Con ASP e PHP il messaggio viene inviato dal server, senza richiedere nessuna interazione supplementare all'utente; nel caso di un invio attraverso JavaScript, il messaggio viene invece passato al programma di posta elettronica presente nel computer. Dando un'occhiata all'esempio che abbiamo utilizzato potrete rendervi del procedimento utilizzato.
Lo script si compone di una sezione JavaScript e dei moduli da inserire nella pagina Web.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
Iniziamo a vedere la parte JavaScript, contenuta nella sezione <head> del documento. Questa contiene alcune funzioni utilizzate per l'invio delle e-mail (la funzione submitForm), per il controllo che il campo nome sia riempito (la funzione nome) e per il controllo che il campo dell'e-mail sia riempito e formattato a dovere (la funzione email).
La prima funzione è invece utilizzate per la formattazione del messaggio e per accorpare i vari moduli. Ogni form, come si può notare, viene inserito in una variabile ("var messaggio_iniziale" e "var mittente"). Per accedere al contenuto del form, l'autore ha utilizzato la funzione document.forms[0].elements[0].value e document.forms[0].elements[1].value: in questo modo nelle variabili verranno inseriti rispettivamente il primo valore trovato (elements[0]) e il secondo valore (elements[0]) trovato all'interno del primo (e unico) elemento form (document.forms[0]).
Le variabili vengono successivamente concatenate e passate al programma di posta elettronica.
L'unico campo da personalizzare in questa sezione è la quinta riga:
var link = "http://www.html.it"; // sito da suggerire
Al posto di http://www.html.it dovrà essere inserito l'indirizzo del sito che si vorrà suggerire. Gli altri campi possono essere modificati facendo attenzione a rispettare la sintassi originaria.
<script type="text/javascript">
<!--
var emailAddress="";
function destin() {
var link = "http://www.html.it"; // sito da suggerire
var messaggio_iniziale = "" // messaggio iniziale dell'email facoltativo
var mittente = document.forms[0].elements[0].value;
var destinatario=document.forms[0].elements[1].value;
document.forms[0].elements[2].name = messaggio_iniziale;
funz_destinatario = "mailto:" + destinatario + "?subject=Ti consiglio di
visitare un sito"; // soggetto dell'email
document.forms[0].action = funz_destinatario;
document.forms[0].elements[2].value = "Ciao, penso che questo sito ti potrebbe
interessare " + link + "n" + mittente; // testo che segue il messaggio iniziale
}
// funzione submit che segue al controllo della funzione nome ed email
function submitForm() {
if ( (nome() ) && (email()) )
if (confirm("nIl form sarà spedito a :nn"+emailAddress+"nn Confermi
l'invio?"))
return true;
else
alert("nHai interrotto l'invio");
return false;
}
// funzione di controllo sul campo nome
function nome() {
var controlla = document.forms[0].elements[0].value;
if (controlla == "") {
alert("nNon hai inserito il tuo nome.nnPer favore inseriscilo.")
document.forms[0].elements[0].focus();
return false;
}
return true;
}
// funzione di controllo sul campo email
function email() {
emailAddress=document.forms[0].elements[1].value;
if (document.forms[0].elements[1].value == ""){
alert("nNon hai inserito l'email del distinatario.")
document.forms[0].elements[1].focus();
return false;
}
if (document.forms[0].elements[1].value.indexOf ('@',0) == -1 ||
document.forms[0].elements[1].value.indexOf ('.',0) == -1) {
alert("nL' E-mail deve contenere un indirizzo reale")
document.forms[0].elements[1].select();
document.forms[0].elements[1].focus();
return false;
}
else
{
destin();
return true;
}
}
-->
</script>
## 2: MODULI DA INSERIRE NELLA PAGINA WEB
Nella pagina Web, nel punto che desiderate, può essere inserito questo codice per mostrare i moduli da completare per l'indicazione del nome, dell'e-mail e del commento che si vuole aggiungere al messaggio di posta elettronica. Tutto qui.
<div align="center">
form ENCTYPE="text/plain" NAME="form" METHOD='post' ACTION='' onSubmit="return submitForm()">
<table cellspacing="0" cellpadding="0" width="450">
<tr>
<td><font face=verdana size=2>Il tuo nome:</font></td>
<td><INPUT TYPE="text" size="26" MAXLENGTH=40></td>
</tr>
<tr>
<td><font face=verdana size=2>Email destinatario:</font></td>
<td><INPUT TYPE="text" size="26" MAXLENGTH=40></td>
</tr>
<tr>
<td> </td>
<td><INPUT TYPE="hidden"></td>
</tr>
<tr>
<td><font face=verdana size=2>Commenti e suggerimenti:</font></td>
<td>TEXTAREA NAME="" ROWS=6 COLS=30 wrap=virtual>/TEXTAREA></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Spedisci">
<input type="reset" value="Reset"> </td>
</tr>
</table>
/form>
</div>
