docEsercitazione 6
download 
Reclamo Transcript
Esercitazione 6
Marco Porta – 2008/09
CIM – Sistemi e Tecnologie Multimediali
Esercitazione 6 – JavaScript
Traccia di lavoro:
1. Fare un bel respiro: state per scrivere, probabilmente per la prima volta in vita vostra, e forse
anche per l’ultima, codice JavaScript (è un’esperienza che segna… c’è chi non si è più ripreso…).
Creare poi la cartella javascript nella propria cartella di lavoro
2. Creare in javascript il file esjs.html, contenente il seguente codice HTML
(corrispondente alla pagina mostrata, dove il valore del campo quindi hai o compirai è calcolato).
Importante: JavaScript distingue le lettere maiuscole dalle minuscole… quindi, se il nome di un
controllo è cognome, nel codice JavaScript dovrà poi essere richiamato con la ‘c’ minuscola,
altrimenti non viene riconosciuto...
<html>
<head>
<title>Modulo di iscrizione</title>
</head>
<body>
<h2 style="font-family: sans-serif">Modulo di iscrizione</h2>
<form name="iscrizione" action="">
<table>
<tr>
<td>Cognome </td>
<td><input name="cognome" size="20" /></td>
</tr>
<tr>
<td>Nome</td>
<td><input name="nome" size="20" /></td>
</tr>
<tr>
<td>Anno nascita</td>
<td><input name="annonascita" size="4" /></td>
</tr>
<tr>
<td colspan="2">
(quindi hai o compirai
<input name="anni" size="2" readonly /> anni)
</td>
</tr>
</table><br />
<input type="button" value="Invia" />
</form>
</body>
</html>
1951
57
3. Nella sezione <head> del file HTML definito al punto 2, all’interno del tag <script
type="text/javascript"> (oppure <script language="javascript">), si inseriscano le
funzioni JavaScript mostrate di seguito, per fare in modo che quando si digita una stringa nel
campo Anno nascita e si clicca “da un’altra parte” (gestore degli eventi onchange), il
comportamento della pagina sia il seguente:
a. se la stringa inserita non rappresenta un numero intero, venga visualizzata una finestra di
messaggio che segnala l’errore e il campo Anno nascita venga svuotato (cioè riempito con una
stringa nulla);
b. se la stringa inserita rappresenta un numero intero, nel campo quindi hai o compirai...
appaiano gli anni (= anno corrente meno il valore del campo Anno nascita)
Importante: porre molta attenzione al codice digitato, altrimenti non si otterrà il risultato
previsto… in particolare, un errore in un certo punto si può ripercuotere su punti successivi. Se
nella pagina è presente un errore JavaScript, Explorer mostrerà in basso a sinistra un triangolino
giallo con un punto esclamativo; facendo doppio clic su questo triangolo, si ottengono
Marco Porta – 2008/09
informazioni sull’errore: il tipo, la riga a cui si è verificato, ecc. Si tenga però presente che se
l’errore è segnalato in un punto del file HTML in cui viene richiamata una funzione, l’errore
potrebbe essere (e in genere è) all’interno della funzione… quindi le segnalazioni sono (spesso)
piuttosto criptiche…
function numeroIntero(input) {
var risposta = 1;
if ( ! parseInt(input) ) {
risposta = 0;
} else {
for (i=0; i < input.length; i++) {
if ( ( input.charAt(i) != "0" ) &&
( ! parseInt(input.charAt(i)) ) ) {
risposta = 0;
break;
}
}
}
return risposta;
}
Al tag INPUT del campo Anno nascita deve
essere aggiunto l’attributo:
onChange="calcolaAnni()"
function calcolaAnni() {
if ( ! numeroIntero(document.iscrizione.annonascita.value)) {
alert("Anno nascita scorretto!");
document.iscrizione.annonascita.value = "";
return 0;
} else {
data = new Date();
document.iscrizione.anni.value = data.getYear() document.iscrizione.annonascita.value;
return 1;
}
}
(si noti che la funzione
restituisce 1 o 0 a
seconda che il valore
del campo sia corretto
oppure no… servirà al
punto 4)
4. Sempre nella sezione HEAD, si inserisca la seguente funzione per controllare se un campo è
vuoto oppure no:
function esiste(input) {
var esisteAlmenoUnCarattere = 0;
if (input) {
for (i=0; i < input.length; i++) {
if (input.charAt(i) != " ") {
esisteAlmenoUnCarattere = 1;
break;
}
}
}
return esisteAlmenoUnCarattere;
}
5. Si definisca la funzione controllaForm() in modo che quando si preme il bottone Invio il
form venga analizzato per verificare se per i campi Cognome e Nome è stato effettivamente
inserito “qualcosa” e il campo Anno nascita contiene effettivamente un numero intero
(calcolando anche la data di nascita, come al punto 3). In caso di errori, la funzione visualizza
un messaggio opportuno; altrimenti, il form può essere “inviato” con l’istruzione document.
iscrizione.submit():
Marco Porta – 2008/09
function controllaForm() {
var mes = "";
if (! esiste(document.iscrizione.cognome.value))
mes = mes + "Manca il cognome\n";
if (! esiste(document.iscrizione.nome.value))
mes = mes + "Manca il nome";
if (mes != "")
alert(mes);
var ris = calcolaAnni();
if ((mes == "") && (ris == 1))
alert("Ok, tutto corretto.\nIl form a questo punto " +
"dovrebbe essere inviato con " +
"document.iscrizione.submit();");
}
Al tag INPUT del bottone di
invio viene aggiunto
l’attributo:
onClick="controllaForm()"
6. All’inizio della pagina HTML su definita, si inseriscano la data e l’ora correnti. Per far questo,
immediatamente dopo il tag <body> si inserisca la porzione di codice:
<script language="JavaScript">
today = new Date();
document.write("<h3><em>Data: " + today.getDate() + "/" +
(today.getMonth() + 1) + "/" +
today.getYear() + ", ora: " +
today.getHours() + ":" +
today.getMinutes() + "</em></h3>");
</script>
<hr width="35%" align="left" />
7. Si spostino le funzioni definite nei precedenti punti 3, 4 e 5 nel file esterno controlli.js.
Si richiami poi tale file dall’interno di esjs.html (attributo src del tag <script>)
8. Si sperimenti a piacere l’applicazione del codice utilizzato per gli esempi disponibili
all’indirizzo http://vision.unipv.it/people/porta/web/lang/
