Laboratorio di Applicazioni Informatiche II mod. A
JavaScript
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
Introduzione
JavaScript è un linguaggio di scripting, ossia un linguaggio dalle
funzionalità ridotte rispetto a un vero e proprio linguaggio di
programmazione.
JavaScript può essere utilizzato per controllare quasi tutte le
componenti del browser e per rispondere a varie azioni dell'utente,
quali l'immissione nei moduli e la navigazione nella pagina.
È particolarmente utile perché tutti i compiti di elaborazione sono
scritti nello script (incorporato nel documento HTML), e quindi
l'intero processo definito dallo script è eseguito sul lato del
client, senza la necessità di fare riferimento a un server.
In altri termini, invece di fare eseguire al server dei compiti e fornire i
risultati al browser, quest’ultimo può gestire localmente alcuni
compiti, dando così all’utente tempi di risposta più brevi e riducendo
il traffico di rete.
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
Si può utilizzare JavaScript anche per controllare direttamente oggetti
quali la barra di stato del browser, i frame e perfino la finestra di
visualizzazione.
Infine JavaScript offre l'interattività tra plug-in e applet Java. Si può
scrivere uno script di JavaScript, ad es., per verificare che dei dati
numerici siano stati inserti in un modulo che richiede un numero di
telefono.
Senza alcuna trasmissione in rete, uno script di questo tipo può
interpretare il testo immesso e avvertire l'utente con una finestra di
messaggio appropriata.
Quando un documento HTML con uno script di JavaScript è caricato
in un browser che supporta questo linguaggio, le funzioni dello
script vengono calcolate, memorizzate, ed eseguite quando si
verificano determinati eventi (a es. quando l'utente sposta il mouse
sopra un oggetto o immette un testo in una casella).
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
JavaScript non va confuso con Java, dato che tra i due linguaggi
esistono importanti differenze:
JavaScript
Java
è un linguaggio interpretato
è un linguaggio compilato
viene eseguito sul client
viene eseguito sul server
non consente di scrivere
programmi autonomi
consente di scrivere
programmi autonomi
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
JavaScript si compone di elementi di programmazione quali:
• oggetti,
• proprietà,
• metodi,
• gestori di eventi.
La sintassi di JavaScript ha due elementi fondamentali:
• espressione (o istruzione): combinazione di operatori, variariabili,
letterali e parole chiave di cui si può calcolare il valore.
• funzione: gruppo di enunciati provvisto di un nome, che si può
usare più volte semplicemente chiamandone il nome.
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
Oggetti
JavaScript fornisce un facile accesso a componenti prefabbricate di una
pagina Web, dette oggetti, che possono essere:
• creati con HTML (pulsanti, link, moduli, menu, immagini, testo);
• intrinseci di JavaScript (window, document, Date, function, …);
• definiti automaticamente dal browser (particolari della configurazione).
Gli oggetti di JavaScript hanno una struttura gerarchica al cui vertice si
trova l’oggetto window, come indica lo schema seguente:
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
Proprietà
A ciascun oggetto sono associate proprietà descrittive, che sono
attributi che aiutano a differenziare un oggetto dall’altro.
Esempi:
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
Metodi
A ogni oggetto sono associati particolari comportamenti o metodi.
Esempi:
• il metodo blink() associato a un testo ne produce la
visualizzazione lampeggiante.
• dato che un pulsante può solamente essere premuto, all’oggetto
button è associato il solo metodo click().
I metodi hanno un nome seguito da una coppia di (), in quanto
esigono (spesso, ma non sempre) dei parametri.
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
Gestori di eventi
Javascript consente di fornire un elevato livello di interattività alle
pagine Web e di accedere a eventi quali:
• click del mouse su un pulsante;
• avvio di programmi;
• caricamento di una pagina Web in un browser;
• uscita del mouse da una finestra.
A questi e altri eventi, automatici o provocati dall’utente, possono
essere associati speciali metodi intrinseci, chiamati gestori di
eventi, che avviano determinate azioni al verificarsi dell’evento.
Ecco il loro elenco.
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Introduzione
Per aggiungere del codice JavaScript a un documento HTML, esso va
inserito tra i tag
<script Language=“JavaScript”>
e
</script>
tanto nella sezione head quanto nella sezione body.
I due tag non sono <html>
necessari se si
<head>
inseriscono
<script Language="JavaScript">
espressioni
//riga di commento
JavaScript all’interno
</script>
di tag HTML.
</head>
<body
Esempio:
<a href=“#" onclick="alert('ciao')">
Clicca sulla scritta
</body>
</html>
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Commenti
Nel listato precedente abbiamo visto un commento di JavaScript.
I commenti possono essere di due tipi, come indicato nei due esempi
seguenti:
1. // commento di una sola riga che inizia con due
barre inclinate
2. /* commento che può occupare più righe, inizia
con una barra seguita da un asterisco e termina con
un asterisco seguito da una barra */.
In JavaScript non si possono usare i simboli dei commenti di HTML
(<!-- per iniziare e --> per terminare un commento) e,
analogamente,
in HTML non si possono usare i simboli dei commenti di JvaScript (// ,
/* , */)
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Tuttavia, se si vuole che un browser che non supporta JavaScript non
visualizzi il testo dello script, occorre racchiudere lo script tra i
marcatori di commento di HTML. Esempio:
<script Language="JavaScript">
<!--Inizia a nascondere il contenuto dello script
per i vecchi browser.
codice JavaScript
Fine della parte nascosta.-->
</script>
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Parole chiave
In JavaScript, come in tutti i linguaggi di programmazione, vi sono
parole riservate (o parole chiave) che hanno un significato
particolare.
La maggior parte delle parole riservate è utilizzata nelle dichiarazioni di
programma o nella definizione di dati.
Una parola riservata non deve essere utilizzata come variabile,
funzione, metodo o nome di oggetto. Le parole riservate sono
elencate in Tabella.
Alcune di esse hanno un significato particolare, altre sono riservate per
un utilizzo futuro e altre ancora non devono essere utilizzate, in
modo da rendere il codice compatibile con Java.
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
abstract
else
instanceof
super
boolean
break
enum
export
int
interface
switch
synchronized
byte
case
catch
char
class
const
continue
debugger
extends
false
final
finally
float
for
function
goto
label
long
native
new
null
package
private
protected
this
throw
throws
transient
true
try
typeof
var
default
delete
if
implements
public
return
void
volatile
do
double
import
in
short
static
while
with
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Le parole chiave vengono poi combinate con le funzioni, le variabili e
gli operatori per creare le espressioni, o istruzioni significative, che
vengono passate all’interprete JavaScript per l’esecuzione.
Un esempio di utilizzo di JavaScript è costituito dal seguente file:
<html>
<head>
<script language=”Javascript”>
</script>
</head>
<body>
<h1>Esempio del gestore di eventi onmouseover</h1>
<a href="#" onmouseover="alert('OK, ci sei passato')">
JavaScript è eseguito se passi sopra questo link...
</a>
</body>
</html>
OnMouse.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Nel listato precedente si trova il seguente codice JavaScript:
onmouseover="alert('OK, ci sei passato')“
nel quale il gestore di eventi
onmouseover
fa eseguire il metodo
alert()
con valore
OK, ci sei passato
quando il puntatore si avvicina al link.
Il metodo alert() è associato all’oggetto window, e permette di
creare un tipo speciale di finestra a comparsa (finestra di avvertimento)
che visualizza alcune informazioni. Esse costituiscono il parametro passato
al metodo alert().
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Un altro esempio, che usa sempre il metodo alert(), ma il gestore di
eventi onClick è costituito dal seguente file:
<html>
<head>
</head>
<body>
<a href="tabella.html" onclick="alert('ciao')">
Link alle gare </a>
</body>
</html>
AlertCiao.html
(che richiede, ovviamente, la presenza del file tabella.html).
In esso l’evento che fa eseguire il metodo alert(), il quale visualizza
una finestra con la scritta ciao, è la pressione del pulsante OK che
compare nella finestra.
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Funzioni
Funzioni
JavaScript consente di scrivere delle righe di script che possono essere
usate più volte in una forma abbreviata, assegnandole come valore a
una funzione.
Una funzione è definita dalla parola chiave function, dal nome che
le si vuole assegnare, da una coppia di parentesi () e da una di
parentesi {}.
La funzione seguente visualizza un messaggio utilizzando il metodo
alert():
function Saluti()
{
alert(“Ciao, questo è un saluto.”)
}
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Funzioni
Essa può essere usata nel seguente listato, che produce la stessa
uscita del precedente:
<html>
<head>
<script language="Javascript">
function Saluti()
{
alert("Ciao, questo è un saluto.")
}
</script>
</head>
<body>
<a href="tabella.html" onClick="Saluti()">
Link alle gare </a>
</body>
</html>
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Funzioni
Un’altra azione che può essere determinata dalla pressione di un
pulsante (quindi dal gestore di eventi onclick()) è il cambiamento
di colore dello schermo.
Essa è realizzata dal seguente listato, che usa una funzione definita
dall’utente:
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
<html>
<head><title>Esempio colori</title></head>
<body Bgcolor="white">
<script language="JavaScript">
function sfondo(colore) {document.bgColor = colore;}
</script>
<center><h3>Modifica dei colori dello sfondo</h3></center><br>
<font color="Firebrick">
Questa pagina dimostra come si possano modificare i colori dello
sfondo utilizzando la funzione JavaScript "bgColor", all'interno di
una funzione definita dall'utente chiamata sfondo().La funzione viene
richiamata dai pulsanti di input che trasferiscono il colore alla
funzione. Quando l'utente clicca sul pulsante con il nome del colore,
il colore dello sfondo viene impostato su quel colore. Provate!<br>
<center><hr width=“60%">
<form name=“ColoreSfondo”>
<input type="button" value="Rosso" onclick="sfondo('red')">
<input type="button" value=" Blu " onclick="sfondo('blue')">
<input type="button" value="Arancio"onclick="sfondo('orange')">
<input type="button" value="Verde" onClick="sfondo('green')">
<input type="button" value="Nero" onClick="sfondo('black')">
<input type="button" value="Grigio" onClick="sfondo('gray')">
<input type="button" value="Giallo" onClick="sfondo('yellow')">
<input type="button" value="bianco" onClick="sfondo('white')">
</center></form>
</body>
</html>
Java3Colori.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
Apertura di finestre secondarie
Una delle caratteristiche più usate di JavaScript è la possibilità di aprire
una finestra secondaria, indipendente da quella principale del browser.
Ciò è utile - nel caso in cui la finestra principale contenga dei link esterni
- per evitare che l’utente, cliccandovi sopra, esca dal sito.
Il contenuto di una finestra secondaria può essere definito in due modi:
- da un file HTML esterno
- direttamente all'interno della pagina principale del browser.
Ecco un esempio della prima tecnica, che usa il metodo open()
associato all’oggetto window per richiamare il file FineSeco.html:
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
<html>
<head>
<title>Nuovafinestra</title>
</head>
<body>
<form>
<input type="button" value="Nuova finestra“
onClick='window.open(“FineSeco.html");'>
</form>
</body>
</html>
ApriFinestra1.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
Nel prossimo esempio, invece, il contenuto della finestra secondaria è
definito direttamente all’interno della pagina principale che la richiama,
tramite un’apposita funzione.
Nell’esempio saranno utilizzati alcuni degli argomenti supportati da
JavaScript per definire le caratteristiche di una finestra:
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
<html>
<head>
<title>Finestra indipendente</title>
<script language="JavaScript">
function NuovaFinestra()
{
win2=window.open("FineSeco.html","NewWindow",
"toolbar=no,directories=no,menubar=no,scrollbars=no,
width=400,height=300");
}
</script>
</head>
<body>
<form>
<input type="button" value="Nuova finestra“
onclick='NuovaFinestra();'>
</form>
</body>
</html>
ApriFinestra2.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
Osserviamo che:
• richiamare il contenuto di una finestra direttamente dalla pagina
principale del browser ha il vantaggio di alleggerire il traffico sul server,
visto che comunque il browser non deve richiamare un nuovo
documento HTML, ma interpretare quello posto all'interno dello script.
• richiamare il contenuto di una finestra da un file HTML esterno, è
consigliabile quando tale contenuto non si limiti a semplice testo, ma
contenga immagini, suoni e una struttura complessa.
Naturalmente la finestra secondaria che si apre può contenere anche
link ad altri documenti, come quella del listato seguente :
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
<html> <head>
<script language="JavaScript">
function NuovaFinestra()
{
msg=open("","schermo","toolbar=no,directories=no,menubar=no,
width=370,height=250,resizable=yes");
msg.document.write("<head><title>html.it</title></head><body>");
msg.document.write("<b><center><font size=6>
Finestra secondaria con vari link</font></center></b><br>");
msg.document.write("<a href=FineSeco.html target=home>
Javascript (Link interno)</a><br>");
msg.document.write("<a href=sfondi.htm target=home>Sfondi</a><br>");
msg.document.write("<a href=gif.htm target=home>Gif animate</a><br>");
msg.document.write("<a href=guida.htm target=home>Guida HTML</a><br>");
msg.document.write("<a href=contr.htm target=home>Controllo qualità
</a><br>");
}
</script>
</head>
<body><h3>
Esempio di pagina HTML che apre una finestra secondaria con JavaScript
</h3><form>
<input type="button" value="Apri la finestra" onclick="NuovaFinestra()">
</form>
<p><br><hr>
</body>
</html>
ApriFinestra3.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
Una volta aperta una finestra indipendente dal browser può essere utile,
ai fini di una maggiore funzionalità delle pagine, creare un pulsante per
chiuderla.
In questo caso si può aprire la finestra nel solito modo:
<html>
<head><title>Nuovafinestra</title></head>
<body>
<form>
<input type="button" value="Nuova finestra“
onClick='window.open("FineSeco1.html");'>
</form>
</body>
</html>
e inserire nel codice di quella secondaria un tag del tipo:
<input type="button" value="Chiudi" onclick="window.close()">
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
FinestraChiudi.html
Esso usa il metodo, close(), simile al già visto open(), con la
differenza che procura l'effetto inverso di chiudere la finestra.
La tabella seguente mostra i metodi caratteristici di due oggetti molto
utilizzati in JavaScript: window (finestra) e frame (riquadro).
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Finestre
Naturalmente, se le finestre da aprire sono più di una, si possono
definire più funzioni NuovaFinestra, assegnando a ciascuna di esse
un numero diverso:
NuovaFinestra1() NuovaFinestra2() ...
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Date
Operazioni con le date
JavaScript dispone dell’oggetto incorporato (o intrinseco) Date() per
catturare e manipolare informazioni su data e ora. Il listato seguente:
<html>
<head></head>
<body>
<script language="JavaScript">
var today = new Date()
document.write("La variabile today, ottenuta con
l'istruzione 'var today = new Date()', ha il valore:”)
document.write(“<br>”+today)
</script>
</body>
</html>
Data1.html
visualizza la data e l’ora corrente, producendo l’uscita:
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Date
Nella istruzione:
var today = new Date()
la parola chiave new crea una nuova istanza dell’oggetto Date() e
la assegna alla variabile today.
Se si vuole che la data sia visualizzata nel formato italiano, si può
applicare il metodo toLocaleString() alla variabile today,
creando la nuova variabile oggi:
var oggi = today.toLocaleString()
Il valore di oggi si potrà poi visualizzare al solito modo:
document.write("La variabile oggi, ottenuta con
l'istruzione 'var oggi = today.tolocaleString()', ha il
valore:“+"<br>"+oggi)
Se si aggiungono le ultime due istruzioni alla fine dello script precedente,
si ottiene la seguente videata:
Data2.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Date
Se si vuole che non venga visualizzata anche l’ora corrente (21.42.18,
nell’esempio precedente), si può applicare alla variabile oggi il metodo
substring().
Esso estrae da una variabile una sottostringa, ossia un gruppo di caratteri,
che inizia da uno qualsiasi (nel prossimo esempio dal primo, di numero 0)
ed è lunga un numero specificato di caratteri (diciamo 25).
Tale sottostringa viene assegnata alla nuova variabile oggidata con
l’istruzione:
var oggidata = oggi.substring(0,25)
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Date
L’oggetto document possiede, oltre a write(), numerosi altri
metodi e proprietà, tra i quali il metodo lastModified(), che
fornisce la data in cui il documento è stato modificato per l’ultima
volta.
Riassumiamo quanto finora detto sulla data con il seguente listato:
<html>
<head></head>
<body>
<script language="JavaScript">
var today = new Date()
var oggi = today.toLocaleString()
var oggidata = oggi.substring(0,25)
document.write("<h2><center>Benvenuto, oggi è “
+oggidata+“</center></h2>")
document.write("<br><h4><center>Questo documento è
stato modificato "+document.lastModified+"</center></h4>")
</script>
</body>
</html>
Data3.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Date
Se vogliamo estrarre dalla data l’ora, possiamo utilizzare i seguenti
metodi dell’oggetto Date():
getTime() getMonth() getHours()
getMinutes() getSeconds()
scrivendo, ad es., un file di questo tipo:
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - Date
<html>
<head></head>
<body>
<script language="JavaScript">
var oggi = new Date()
var ore = oggi.getHours()
var min = oggi.getMinutes()
var sec = oggi.getSeconds()
document.write("Sono le ore: "+ore+":"+min+":"+sec)
</script>
</body>
</html>
DataOra.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - URL
Cambiamento di URL
Può succedere che un sito Web debba cambiare il proprio URL. In tal
caso è opportuno che chi digita il vecchio URL sia avvertito del
nuovo o, meglio ancora, vi si possa trasferire automaticamente.
JavaScript consente tale trasferimento, non solo a seguito di un click
dell’utente, ma anche in modo automatico, come indica il prossimo
listato. Esso utilizza:
• l’oggetto location, che viene creato automaticamente dal
browser, che vi inserisce l’URL del documento corrente. Il
contenuto può però essere sostituito da un altro.
• il metodo setTimeout(), il quale prevede due variabili: il codice
che si vuole eseguire (in questo caso una funzione) e il numero di
millisecondi che l’interprete JavaScript deve attendere prima di
eseguirlo.
Il listato presenta anche una tecnica diffusa per scrivere sullo
schermo testi che si estendano su più righe. CambiaURL.html
Laboratorio di Applicazioni Informatiche II mod. A
Javascript - URL
<html>
<head>
<title>Fun with Phonics</title>
<script language=“JavaScript">
function cambiaSito()
{ alert("Stai per essere trasferito sul nuovo sito JS-Tutor")
location = "JSTutor.html"
}
</script>
</head>
<body>
<center><img src="fun.jpg" hspace=55 vspace=5 height=64 width=129>
<hr width="75%"> </center>
<script language=“JavaScript">
var intro1 = "Ciao, grazie per aver visitato il nostro sito Web, ma ci
siamo trasferiti. "
var intro2 = "Per favore, prendi nota del nostro nuovo URL
(www.funphonics.com). "
var intro3 = "Clicca<a href='JSTutor.html'> qui </a> oppure aspetta 10
secondi per essere "
var intro4 = "trasferito automaticamente al nostro nuovo sito."
var introMsg = intro1+"<br>"+intro2+"<br>"+intro3+"<br>"+intro4
document.write("<h4><font color='firebrick'>"+introMsg+"</font></h4>")
setTimeout(“cambiaSito()",20000)
</script>
</body>
</html>
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
Il listato che segue visualizza un messaggio che scorre in una finestra.
Le istruzioni che realizzano il messaggio scorrevole sono contenute in
una funzione definita dall’utente, che viene richiamata
automaticamente, al caricamento della pagina, dal gestore di evento
onLoad.
Laboratorio di Applicazioni Informatiche II mod. A
Javascript
<html>
<head>
<script language="JavaScript">
var UTV=" Università di Tor Vergata "
var SpazioMes="--- ---"
var PosInizio = 0
function scorreMes()
{
document.ModuloMessaggio.scorreMes.value=UTV.substring
(PosInizio,UTV.length)+SpazioMes+UTV.substring(0,PosInizio)
PosInizio = PosInizio + 1
if (PosInizio > UTV.length)
{ PosInizio = 0 }
window.setTimeout("scorreMes()",300)
}
</script>
</head>
<body onload="scorreMes()">
<form name="ModuloMessaggio">
<input type="text" name="scorreMes" size=23">
</form>
</body>
</html>
FineScorre.html