Feed Sottoscrizioni
Try…catch di Javascript
•Errori JavaScript – Catching
Durante la navigazione delle pagine Web su Internet, tutti abbiamo visto una finestra allarme di JavaScript che ci dice c’è un errore di runtime e chiede “Vuoi eseguire il debug?”.
Il messaggio di errore come questo può essere utile per gli sviluppatori, ma non per gli utenti.
Quando gli utenti vedono gli errori, spesso lasciano la pagina web.
Questo capitolo ti insegnerà come catturare e gestire i messaggi di errore JavaScript, in modo da non perdere il tuo pubblico.
try … catch
try … catch vi permette di testare un blocco di codice per gli errori.
Il blocco try contiene il codice da eseguire e il blocco catch contiene il codice da eseguire se si verifica un errore.
Sintassi:
try
{
//Eseguire del codice quì
}
catch(err)
{
//Gestire gli errori quì
}
Si noti che try … catch è scritto in lettere minuscole.
Utilizzando le lettere maiuscole genererà un errore JavaScript!
Esempi
Il seguente esempio visualizza un allarme “Benvenuto!” quando il pulsante viene premuto.
Tuttavia, c’è un errore di battitura nella funzione messaggio (). alert () è errato in quanto adddlert ().
Si verifica un errore JavaScript.
Il blocco catch intercetta l’errore ed esegue un codice personalizzato per gestirlo.
Viene visualizzato un messaggio di errore che informa l’utente che cosa è successo:
<html>
<head>
<script type="text/javascript">
var txt="";
function messaggio()
{
try
{
adddlert("Benvenuto visitatore!");
}
catch(err)
{
txt="Errore in questa pagina.\n\n";
txt+="Descrizione errore: " + err.description + "\n\n";
txt+="Clicca OK per continuare.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="Leggi messaggio" onclick="messaggio()" />
</body>
</html>
Il prossimo esempio usa una conferma per visualizzare un messaggio personalizzato avvisando gli utenti che possono fare clic su OK per continuare a vedere la pagina o su Annulla per tornare alla home page.
Se la conferma del metodo restituisce false, l’utente fa clic su Annulla e il codice reindirizza l’utente.
Se la conferma del metodo restituisce true, il codice non fa nulla:
<html>
<head>
<script type="text/javascript">
var txt="";
function messaggio()
{
try
{
adddlert("Benvenuto visitatore!");
}
catch(err)
{
txt="Errore in questa pagina.\n\n";
txt+="Clicca OK per continuare,\n";
txt+="o Cancella per tornare alla home page.\n\n";
if(!confirm(txt))
{
document.location.href="http://www.flepstudio.com/";
}
}
}
</script>
</head>
<body>
<input type="button" value="Leggi messaggio" onclick="messaggio()" />
</body>
</html>
L’istruzione throw
L’istruzione throw può essere utilizzata insieme al try … catch, per creare un’eccezione per l’errore.
Ulteriori informazioni su l’istruzione throw nei prossimi articoli.
Eventi Javascript
•Utilizzando JavaScript, abbiamo la possibilità di creare pagine web dinamiche.
Gli eventi sono azioni che possono essere rilevati da JavaScript.
Ogni elemento di una pagina web ha alcuni eventi che possono innescare un JavaScript.
Ad esempio, possiamo utilizzare l’evento onClick di un elemento pulsante per indicare che una funzione viene eseguita quando un utente fa clic sul pulsante.
Definiamo gli eventi nei tag HTML.
Esempi di eventi:
Un clic del mouse
Una pagina web o un caricamento delle immagini
Mousing nel corso di un hot spot sulla pagina web
Selezione di un campo di input in un modulo HTML
Invio di un modulo HTML
Una combinazione di tasti
Nota: Gli eventi vengono normalmente utilizzati in combinazione con le funzioni e la funzione non sarà eseguita prima che si verifica l’evento!
onLoad e onUnload
Le manifestazioni onLoad e onUnload si attivano quando l’utente entra o esce la pagina.
L’evento onLoad viene spesso utilizzato per verificare il tipo di browser del visitatore e la versione del browser e caricare la versione corretta della pagina web in base alle informazioni.
Entrambi gli eventi sono spesso usati anche per trattare con i cookie che dovrebbe essere impostato quando un utente entra o esce una pagina.
Ad esempio, si potrebbe avere un popup che chiede il nome dell’utente al suo arrivo nella pagina.
Il nome viene memorizzato in un cookie.
La prossima volta che il visitatore arriva a tale pagina, si potrebbe avere un altro popup dicendo qualcosa del tipo: “Benvenuto Pippo Pluto!”.
onFocus, onBlur e onChange
L’ onFocus, onBlur ed eventi onChange sono spesso usati in combinazione con la convalida dei campi modulo.
Di seguito è riportato un esempio di come utilizzare l’evento onChange.
La funzione checkEmail () verrà chiamata ogni volta che l’utente modifica il contenuto del campo:
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit
L’evento onSubmit viene utilizzato per convalidare TUTTI i campi del modulo prima di inviarlo.
Di seguito è riportato un esempio di come utilizzare l’evento onSubmit.
La funzione checkForm () verrà chiamata quando l’utente fa clic sul pulsante di invio del modulo.
Se i valori di campo non sono accettati, la form ritiene debbano essere annullati.
La funzione checkForm () restituisce true o false.
Se restituisce true, i dati saranno presentati, altrimenti saranno annullati:
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver e onMouseOut
onMouseOver e onMouseOut sono spesso usati per creare pulsanti “animati”.
Di seguito è riportato un esempio di un evento onMouseOver.
Una finestra di avviso appare quando un evento onMouseOver viene rilevato:
<a href="http://www.flepstudio.com" onmouseover="alert('Un evento onMouseOver');return false"><img src="img.gif" alt="FlepStudio" /></a>
Ciclo for-in con Javascript
•Il ciclo for…in di Javascript cicla attraverso gli elementi di un array o attraverso le proprietà di un oggetto.
Sintassi
for (variabile in oggetto)
{
codice da eseguire
}
Nota: Il codice nel corpo del ciclo for … in viene eseguito una volta per ogni elemento / proprietà.
Nota: L’argomento variabile può essere una variabile denominata, un elemento di array, o una proprietà di un oggetto.
Esempio
Utilizzare for…in per ciclare un array:
<html>
<body>
<script type="text/javascript">
var x;
var auto = new Array();
auto[0] = "Saab";
auto[1] = "Volvo";
auto[2] = "BMW";
for (x in auto)
{
document.write(auto[x] + "<br />");
}
</script>
</body>
</html>
Comando break – interruzione di ciclo Javascript
•L’istruzione break interrompe il ciclo a continuare l’esecuzione del codice dell’iterazione successiva del ciclo (se presente).
Esempio:
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("Il numero è " + i);
document.write("<br />");
}
</script>
</body>
</html>
Comando continue
L’istruzione continue interrompe il ciclo corrente e continua con il valore successivo.
Esempio:
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("Il numero è " + i);
document.write("<br />");
}
</script>
</body>
</html>
Ciclo while di Javascript
•Un ciclo while esegue un blocco di codice per un numero determinato di volte, o quando una determinata condizione è vera.
Sintassi:
while (var<=valorefinale)
{
codice da eseguire
}
Nota: Il <= potrebbe essere una qualsiasi dichiarazione a confronto.
L’esempio che segue definisce un ciclo che inizia con i = 0.
Il ciclo continuerà a funzionare fino a quando i è inferiore o uguale a 5.
I aumenterà di 1 ogni volta che il ciclo viene eseguito:
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("Il numero è " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
Ciclo do…while
Il do … while è una variante del ciclo while.
Questo ciclo eseguirà il blocco di codice una volta, poi si ripete il ciclo finché la condizione specificata è vera.
Sintassi:
do
{
codice da eseguire
}
while (var<=valorefinale);
L’esempio che segue utilizza un do … while.
Il do … while sarà sempre eseguito almeno una volta, anche se la condizione è falsa, perché le istruzioni vengono eseguite prima che la condizione sia verificata:
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("Il numero è " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>
Ciclo for di Javascript
•Un ciclo esegue un blocco di codice per un numero determinato di volte, o quando una determinata condizione è vera.
Spesso quando si scrive codice, si vuole eseguire lo stesso blocco di codice più e più volte in una riga.
Invece di aggiungere diverse linee quasi uguali in uno script, possiamo utilizzare un ciclo per eseguire un compito come questo.
In JavaScript, ci sono due diversi tipi di cicli:
for – ciclo un blocco di codice un determinato numero di volte
while – ciclo un blocco di codice mentre una determinata condizione è vera
Il ciclo for viene utilizzato quando si sa in anticipo quante volte lo script deve essere eseguito.
Sintassi:
for (var=valorePartenza;var<=valoreFine;var=var+incremento)
{
codice da eseguire
}
L’esempio che segue definisce un ciclo che inizia con i = 0. Il ciclo continuerà a funzionare fino a quando i è inferiore o uguale a 5. I aumenterà di 1 ogni volta che il ciclo viene eseguito.
Nota: Il parametro di incremento potrebbe anche essere negativo, e la <= potrebbe essere una qualsiasi dichiarazione a confronto.
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("Il numero è " + i);
document.write("<br />");
}
</script>
</body>
</html>
Funzioni Javascript
•Una funzione sarà eseguita da un evento o da una chiamata alla funzione.
Per permettere al browser di eseguire uno script al caricamento della pagina, è possibile inserire lo script in una funzione.
Una funzione contiene il codice che sarà eseguito da un evento o da una chiamata alla funzione.
Si può chiamare una funzione da qualsiasi punto all’interno di una pagina (o anche da altre pagine, se la funzione è incorporata in un file esterno .js).
Le funzioni possono essere definite sia nella sezione “head” che nella sezione “body” di un documento.
Tuttavia, per assicurare che una funzione sia letta/caricata dal browser prima che venga chiamata, potrebbe essere opportuno inserire le funzioni in sezione.
Come definire una funzione
Sintassi:
function nomeFunzione(var1,var2,...,varX)
{
codice da eseguire
}
I parametri var1, var2, etc sono variabili o valori passati alla funzione. Il { e } definiscono l’inizio e la fine della funzione.
Nota: Una funzione senza parametri deve includere le parentesi () dopo il nome della funzione.
Nota: Non dimenticare l’importanza delle lettere maiuscole in JavaScript!
La parola “function” deve essere scritta in lettere minuscole, altrimenti si verifica un errore JavaScript!
Si noti inoltre che è necessario chiamare una funzione con i capitelli esattamente uguale a quella del nome della funzione.
Esempio:
<html>
<head>
<script type="text/javascript">
function visualizzaMessaggio()
{
alert("Ciao Mondo!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Cliccami!" onclick="visualizzaMessaggio()" />
</form>
</body>
</html>
Se la riga: alert ( “Ciao mondo!”) nell’esempio precedente non era stato messo all’interno di una funzione, sarebbe stata eseguita non appena la linea è stata caricata.
Ora, lo script non viene eseguito prima che un utente prema il pulsante d’ingresso.
La funzione visualizzaMessaggio() verrà eseguita se il pulsante di ingresso è stato cliccato.
L’istruzione return
L’istruzione return viene utilizzata per specificare il valore che viene restituito dalla funzione.
Quindi, per le funzioni che restituiscono un valore è necessario utilizzare l’istruzione return.
L’esempio che segue restituisce il prodotto di due numeri (a, b):
<html>
<head>
<script type="text/javascript">
function prodotto(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(prodotto(4,3));
</script>
</body>
</html>
La durata di variabili JavaScript
Se si dichiara una variabile all’interno di una funzione, la variabile è accessibile solo all’interno di tale funzione.
Quando si esce dalla funzione, la variabile è distrutta.
Queste variabili sono chiamate variabili locali.
Si possono avere variabili locali con lo stesso nome in diverse funzioni, perché ognuna è riconosciuta solo dalla funzione in cui è dichiarata.
Se si dichiara una variabile fuori da una funzione, tutte le funzioni sulla tua pagina hanno accesso ad esssa.
La durata di queste variabili inizia quando si sono dichiarate e termina quando la pagina viene chiusa.
Javascript caselle alert, conferma e prompt
•JavaScript ha tre tipi di finestre di popup: casella di Alert, casella Conferma, e la casella Prompt.
Alert Box
Una finestra di avviso viene spesso utilizzata se si vuole essere sicuri che l’informazione arrivi attraverso l’utente.
Quando una finestra di avviso si apre, l’utente dovrà fare clic su “OK” per procedere.
Sintassi:
alert("esempioTesto");
Esempio:
<html>
<head>
<script type="text/javascript">
function crea_alert()
{
alert("Io sono una casella di alert!");
}
</script>
</head>
<body>
<input type="button" onclick="crea_alert()" value="Visualizza casella alert" />
</body>
</html>
Casella di conferma
La casella di conferma viene spesso utilizzata se si desidera che l’utente deve verificare o accettare qualcosa.
Quando una finestra di conferma si apre, l’utente dovrà fare clic su “OK” o “Annulla” per procedere.
Se l’utente fa clic su “OK”, la casella restituisce true.
Se l’utente fa clic su “Annulla”, la casella restituisce false.
Sintassi:
confirm("esempioTesto");
Esempio:
<html>
<head>
<script type="text/javascript">
function crea_conferma()
{
var r=confirm("Premi un bottone");
if (r==true)
{
document.write("Hai premuto OK!");
}
else
{
document.write("Hai premuto Cancella!");
}
}
</script>
</head>
<body>
<input type="button" onclick="crea_conferma()" value="Visualizza casella di conferma" />
</body>
</html>
Casella di prompt
Una casella/finestra prompt viene spesso utilizzata se si desidera che l’utente inserisca un valore prima di entrare in una pagina.
Quando una finestra prompt si apre, l’utente dovrà fare clic su “OK” o “Annulla” per proseguire dopo aver inserito un valore di input.
Se l’utente fa clic su “OK” la finestra di restituisce il valore di input.
Se l’utente fa clic su “Annulla” alla finestra restituisce null.
Sintassi:
prompt("esempioTesto","valoreStandard");
Esempio:
<html>
<head>
<script type="text/javascript">
function crea_prompt()
{
var nome=prompt("Per favore inserisci il tuo nome","Harry Potter");
if (nome!=null && nome!="")
{
document.write("Ciao " + nome + "! Come ti butta?");
}
}
</script>
</head>
<body>
<input type="button" onclick="crea_prompt()" value="Visualizza casella di prompt" />
</body>
</html>
Come andare a capo in una casella/finestra:
<html>
<head>
<script type="text/javascript">
function crea_alert()
{
alert("Ciao! Questo esempio dimostra come" + '\n' + "andiamo a capo!");
}
</script>
</head>
<body>
<input type="button" onclick="crea_alert()" value="Visualizza casella di alert" />
</body>
</html>
Istruzione switch di Javascript
•Utilizzare l’istruzione switch per selezionare uno dei molti blocchi di codice da eseguire.
Sintassi:
switch(n)
{
case 1:
eseguire codice blocco 1
break;
case 2:
eseguire codice blocco 2
break;
default:
codice da eseguire se n è diversa dai casi 1 e 2
}
Ecco come funziona:
prima abbiamo una sola espressione n (il più delle volte una variabile), che viene valutata una sola volta.
Il valore dell’espressione viene quindi confrontato con i valori per ciascun caso nella struttura.
Se c’è una corrispondenza, il blocco di codice associato a questo caso viene eseguito.
Il comando break viene utilizzato per impedire l’esecuzione di codice vada automaticamente nel case successivo.
Esempio:
<script type="text/javascript">
//Riceverai una diversa frase in base al
//giorno in questo momento. Nota che Domenica=0,
//Lunedì=1, Martedì=2, ecc.
var d=new Date();
giorno=d.getDay();
switch (giorno)
{
case 5:
document.write("Finalmente è Venerdì");
break;
case 6:
document.write("Super Sabato");
break;
case 0:
document.write("Riposo di Domenica");
break;
default:
document.write("Sto aspettando questo weekend!");
}
</script>
Logiche condizionali Javascript
•Le istruzioni condizionali sono utilizzate per eseguire azioni diverse in base a diverse condizioni.
Istruzioni condizionali
Molto spesso quando si scrive codice, si desidera eseguire diverse azioni a seconda di decisioni diverse.
Per fare questo è possibile utilizzare istruzioni condizionali nel codice.
In JavaScript abbiamo le seguenti istruzioni condizionali:
if – utilizzare questa istruzione per eseguire del codice solo se una condizione specificata è vera
if … else – utilizzare questa istruzione per eseguire del codice, se la condizione è vera e un altro codice se la condizione è falsa
if … else if …. else – utilizzare questa istruzione per selezionare uno dei molti blocchi di codice da eseguire
istruzione switch – utilizzare questa istruzione per selezionare uno dei molti blocchi di codice da eseguire
Istruzione if
Utilizzare l’istruzione if per eseguire del codice solo se una condizione specificata è vera.
Sintassi:
if (condizione)
{
codice da eseguire se la condizione è vera
}
Si noti che se è scritto in lettere minuscole. Utilizzando le lettere maiuscole (IF) genera un errore JavaScript!
Esempio:
<script type="text/javascript">
//Scrivi "Buon Giorno" se
//l'orario è minore di 10
var d=new Date();
var tempo=d.getHours();
if (tempo<10)
{
document.write("<b>Buon Giorno</b>");
}
</script>
Si noti che non c’è l’istruzione else … in questa sintassi.
Dici al browser di eseguire del codice solo se la condizione specificata è vera.
Istruzione if … else
Utilizzare if …. else per eseguire del codice se la condizione è vera e un altro codice se la condizione non è vera.
Sintassi:
if (condizione)
{
codice da eseguire se la condizione è vera
}
else
{
codice da eseguire se la condizione è falsa
}
Esempio:
<script type="text/javascript">
//Se il tempo è minore di 10, scriverai "Buon Giorno".
//Altrimenti scriverai "Buona Giornata".
var d = new Date();
var tempo = d.getHours();
if (tempo < 10)
{
document.write("Buon Giorno!");
}
else
{
document.write("Buona Giornata!");
}
</script>
Istruzione if … else if … else
Utilizzare if …. else if … else per selezionare uno dei diversi blocchi di codice da eseguire.
Sintassi:
if (condizione1)
{
codice da eseguire se la condizione1 è vera
}
else if (condizione2)
{
codice da eseguire se la condizione2 è vera
}
else
{
codice da eseguire se le condizioni 1 e 2 non sono vere
}
Esempio:
<script type="text/javascript">
var d = new Date()
var tempo = d.getHours()
if (tempo<10)
{
document.write("<b>Buon Giorno</b>");
}
else if (tempo>10 && tempo<16)
{
document.write("<b>Buona Giornata</b>");
}
else
{
document.write("<b>Ciao Mondo!</b>");
}
</script>
Altro esempio:
<html>
<body>
<script type="text/javascript">
var r=Math.random();
if (r>0.5)
{
document.write("<a href='http://www.flepstudio.org'>FlepStudio!</a>");
}
else
{
document.write("<a href='http://www.google.com'>Google!</a>");
}
</script>
</body>
</html>
Commenti recenti