In una lezione precedente abbiamo visto che (se ci troviamo all'interno della funzione) abbiamo la possibilità di interrompere il flusso del codice tramite l'utilizzo dell'istruzione return.
Possiamo applicare questa possibilità all'utilizzo dell'if:
- se entriamo in una determinata casistica
- la funzione restituisce i valori
- e, con la restituzione dei valori, il flusso del codice viene interrotto
Ad esempio:
function checkBrowser(){
// se il browsr non è Internet Explorer
if (!document.all) {
alert ("Non stai usando Internet Explorer");
return; // Il codice si interrompe qui
}
alert ("Il tuo browser è Internet Explorer");
nome = prompt("Scrivi il tuo nome","il tuo nome qui");
}
checkBrowser();
Ovviamente il metodo del return funziona soltanto se ci troviamo all'interno di una funzione.
Un'utile applicazione di quanto abbiamo appena visto si ha nella validazione dei form, in cui l'istruzione return può essere utilizzata per interrompere la submit, nel caso in cui i dati non siano nel formato desiderato.
Prima di proseguire, esaminiamo però due istruzioni JavaScript, che abbiamo già accennato nella lezione precedente, e che ci serviranno nel corso dell'esempio:
isNaN(valore): la funzione isNaN() significa "is not a number " (non è un numero) e serve per verificare se un determinato valore non è numerico. Se il valore è numerico restituisce false, in caso contrario restituisce true. La sintassi è:
isNaN(valore)
Ad esempio:
valore=4;
alert(isNaN(valore)); //restituisce false
oppure
valore="ciao mondo";
alert(isNaN(valore)); //restituisce true
È quindi possibile creare un controllo di questo tipo:
if (isNaN(valore)) {
alert ("valore non è un numero");
}
indexOf: è un metodo delle stringhe e si utilizza per verificare se una determinata stringa contiene o meno un determinato testo (ovvero una determinata sottostringa). La sintassi è la seguente:
indexOf(valore)
Se la sottostringa cercata non c'è, il metodo restituisce -1. In tutti gli altri casi restituisce la posizione della sottostringa (la prima posizione è 0).
Il codice è:
miaStringa.indexOf("miaSottoStringa");
Ad esempio:
valore="ciao mondo";
alert(valore.indexOf("mondo")); //restituisce 5
Se la sottostringa esiste all'interno della stringa, il valore restituito da indexOf sarà allora maggiore di -1.
Utilizziamo le istruzioni che abbiamo appena esaminato per costruire un controllo su un modulo di una pagina web. Immaginiamo di avere due campi:
- il primo è l'età
- il secondo è un'e-mail
e ipotizziamo di voler far un controllo sul form tale che se il formato dell'età è numerico e il campo dell'e-mail contiene una chiocciola, il modulo può essere inviato. In caso contrario verrà visualizzato un messaggio di errore e il modulo non partirà. Ecco l'esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function valida() {
//prendo i valori dei campi, abbreviandone i nomi
eta=dati.eta.value;
email=dati.email.value;
if (isNaN(eta)){
alert ("Inserisci un'età valida");
return false;
}
if (email.indexOf("@")==-1) {
alert ("Inserisci un'email valida");
return false;
}
}
</script>
</head>
<body>
<form name="dati" action="http://www.html.it" onSubmit="return valida();">
<!-notare il return anteposto alla chiamata della funzione-->
La tua età: <input type="text" name="eta"><br/>
La tua e-mail: <input type="text" name="email"><br/>
<input type="submit" value="invia">
</form>
</body>
</html>
Come si può notare ogni volta che si entra in una determinata casistica e compare il return, l'esecuzione del codice si arresta, se invece tutto va bene non viene incontrato nessun return e dunque l'azione del form viene eseguita.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |