|
NOTA: per provare gli esercizi è sufficiente creare
con un editor di testo un file con estensione .htm e caricarlo in un browser
(consiglio Firefox).
Esempio 1 (script nella sezione head, script diretton nel body, richiamare
nel body uno script
inserito nella sezione head, calcoli e conversioni automatiche di tipo, accedere
alle proprietà e
richiamare i metodi delle classi predefinite (esempio con String).
<html>
<head>
<title>PROVA ALERT</title>
<!-- gli scrip nell'header non partono da soli ma devono essere invocati
nel body tipicamente
nella gestione di un evento; essi sono immediatamente disponibili nel
resto della pagina a differenza
di quelli inseriti direttamente nel body che vengono eseguiti nell'ordine
in cui sono 'incontrati' -->
<script language="JavaScript">
//i tipi restituiti dalle funzioni e quelli dei
parametri non devono (purtroppo ...) essere dichiarati
//la funzione 'messaggio' viene richiamata piu' avanti nel
body ...
function messaggio(msg)
{
alert(msg);
}
</script>
</head>
<body>
<!-- gli script nel body vengono eseguiti nell'ordine in cui si incontrano -->
<script language="JavaScript">
alert("Benvenuti sul sito!");
</script>
<script language="JavaScript">
//invoco la funzione messaggio (vedi head; passo come
parametro la stringa da visualizzare)
messaggio("Richiamato nel body ...");
//le variabili non devono essere dichiarate
somma = 12+4;
//le variabili numeriche vengono automaticamente
//convertite in stringa quando ha un senso
messaggio("12+4 fa " + somma);
//un altro esempio di conversione automatica in stringa
s = "12 + 4 fa " + somma;
//le stringhe in realtà sono oggetti con diverse proprietà ...
//nota: length non e' un metodo ma una proprieta', quindi niente parentesi come
in length() !
messaggio(s.length);
//... e metodi (comandi)
s="topolino";
messaggio(s.toUpperCase() + " - notare il maiuscolo!" );
</script>
</body>
</html>
Esempio 2: chiedere dati all'utente e memorizzarli in variabili,
generare codice html in modo dinamico
<html>
<head>
<title>PROVA PROMPT</title>
</head>
<body>
<script language="JavaScript">
visitatore = prompt("Come ti chiami?");
document.write("Benvenuto, " + visitatore + "!");
larghezza = prompt("Che percentuale della pagina deve occupare la tabella?");
</script>
faccio generare con document.write in questo punto della pagina il tag
table con l'attributo
width valorizzato con la percentuale appena chiesta
<script language="Javascript">
document.write("<table width="+larghezza +"% border=2 cellspacing=3 cellpadding=2>");
</script>
//il resto della tabella è fisso ...
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table> </body>
</html>Esempio 3: accesso agli oggetti del browser (cambiare
posizione alla finestra del browser in modo casuale), uso dei metodi della
classe predefinita Math, ciclo for.
<html>
<head>
<title>Prova JavaScript</title>
</head>
<body>
<script language="JavaScript">
alert('Il valore di pi greco: ' + Math.PI);
//il metodo moveTo richiede le coordinate dell'angolo in alto a sinistra
in cui muovere la finestra
//il metodo random genera un numero casuale tra 0 e 1 (escluso); immagino
che lo schermo abbia
//dimensioni 300x300 pixel; moltiplico per 300 ottenendo una posizione su
questo schermo che però
//deve essere arrotondata ad un numero intero con round()
for (i=1;i<500;i++)
window.moveTo(Math.round(Math.random()*300),
Math.round(Math.random()*300) );
</script>
</body>
</html>
| 
