JavaScript

1
JavaScript
Laboratorio di Applicazioni Informatiche II mod.
A
2
Laboratorio di Applicazioni Informatiche II mod.
A Javascript
3
Laboratorio di Applicazioni Informatiche II mod.
A Javascript
4
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,
questultimo può gestire localmente alcuni
compiti, dando così allutente tempi di risposta
più brevi e riducendo il traffico di rete.
5
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).
6
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Introduzione
JavaScript non va confuso con Java, dato che tra
i due linguaggi esistono importanti differenze
7
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.

8
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 loggetto
  window, come indica lo schema seguente

9
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
dallaltro. Esempi
10
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, alloggetto 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.

11
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
  dallutente, possono essere associati speciali
  metodi intrinseci, chiamati gestori di eventi,
  che avviano determinate azioni al verificarsi
  dellevento.
• Ecco il loro elenco.

 
12
(No Transcript)
13
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Introduzione
Per aggiungere del codice JavaScript a un
documento HTML, esso va inserito tra i
tag ltscript LanguageJavaScriptgt e lt/scriptgt tan
to nella sezione head quanto nella sezione body.
I due tag non sono necessari se si inseriscono
espressioni JavaScript allinterno di tag
HTML. Esempio
lthtmlgt ltheadgt ltscript Language"JavaScript"gt
//riga di commento lt/scriptgt lt/headgt ltbody
lta href" onclick"alert('ciao')"gt Clicca
sulla scritta lt/bodygt lt/htmlgt

14
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 (lt!-- per iniziare e --gt per terminare un
commento) e, analogamente, in HTML non si possono
usare i simboli dei commenti di JvaScript (// ,
/ , /)
15
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
ltscript Language"JavaScript"gt lt!--Inizia a
nascondere il contenuto dello script per i
vecchi browser. codice JavaScript Fine della
parte nascosta.--gt lt/scriptgt
16
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.
17
 
Laboratorio di Applicazioni Informatiche II mod.
A Javascript
18
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 allinterprete JavaScript per
lesecuzione. Un esempio di utilizzo di
JavaScript è costituito dal seguente file
lthtmlgt ltheadgt ltscript languageJavascriptgt
lt/scriptgt lt/headgt ltbodygt lth1gtEsempio del
gestore di eventi onmouseoverlt/h1gt lta href""
onmouseover"alert('OK, ci sei passato')"gt
JavaScript è eseguito se passi sopra questo
link... lt/agt lt/bodygt lt/htmlgt OnMouse.html
19
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 alloggetto 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().
20
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
lthtmlgt ltheadgt lt/headgt ltbodygt lta
href"tabella.html" onclick"alert('ciao')"gt
Link alle gare lt/agt lt/bodygt lt/htmlgt AlertCiao.htm
l
(che richiede, ovviamente, la presenza del file
tabella.html). In esso levento che fa eseguire
il metodo alert(), il quale visualizza una
finestra con la scritta ciao, è la pressione del
pulsante OK che compare nella finestra.
21
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.)
22
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Funzioni
Essa può essere usata nel seguente listato, che
produce la stessa uscita del precedente
lthtmlgt ltheadgt ltscript language"Javascript"gt
function Saluti() alert("Ciao, questo è
un saluto.") lt/scriptgt lt/headgt ltbodygt
lta href"tabella.html" onClick"Saluti()"gt Link
alle gare lt/agt lt/bodygt lt/htmlgt
23
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Funzioni
Unaltra 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
dallutente
24
Laboratorio di Applicazioni Informatiche II mod.
A Javascript
lthtmlgt ltheadgtlttitlegtEsempio colorilt/titlegtlt/headgt
ltbody Bgcolor"white"gt ltscript
language"JavaScript"gt function
sfondo(colore) document.bgColor colore
lt/scriptgt ltcentergtlth3gtModifica dei colori dello
sfondolt/h3gtlt/centergtltbrgt ltfont
color"Firebrick"gt 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!ltbrgt ltcentergtlthr width60"gt ltform
nameColoreSfondogt ltinput type"button"
value"Rosso" onclick"sfondo('red')"gt ltinput
type"button" value" Blu " onclick"sfondo('blue'
)"gt ltinput type"button" value"Arancio"onclick
"sfondo('orange')"gt ltinput type"button"
value"Verde" onClick"sfondo('green')"gt ltinput
type"button" value"Nero" onClick"sfondo('black
')"gt ltinput type"button" value"Grigio"
onClick"sfondo('gray')"gt ltinput type"button"
value"Giallo" onClick"sfondo('yellow')"gt
ltinput type"button" value"bianco"
onClick"sfondo('white')"gt lt/centergtlt/formgt
lt/bodygt lt/htmlgt Java3Colori.html
25
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 lutente, 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 alloggetto window per
  richiamare il file FineSeco.html

26
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Finestre
lthtmlgt ltheadgt lttitlegtNuovafinestralt/titlegt
lt/headgt ltbodygt ltformgt ltinput type"button"
value"Nuova finestra onClick'window.open(Fi
neSeco.html")'gt lt/formgt lt/bodygt lt/htmlgt ApriFi
nestra1.html
27
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Finestre
Nel prossimo esempio, invece, il contenuto della
finestra secondaria è definito direttamente
allinterno della pagina principale che la
richiama, tramite unapposita funzione. Nellesemp
io saranno utilizzati alcuni degli argomenti
supportati da JavaScript per definire le
caratteristiche di una finestra
28
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Finestre
lthtmlgt ltheadgt lttitlegtFinestra
indipendentelt/titlegt ltscript language"JavaScrip
t"gt function NuovaFinestra()
win2window.open("FineSeco.html","NewWindow",
"toolbarno,directoriesno,menubarno,scrollbarsn
o, width400,height300") lt/scriptgt
lt/headgt ltbodygt ltformgt ltinput type"button"
value"Nuova finestra onclick'NuovaFinestra(
)'gt lt/formgt lt/bodygt lt/htmlgt
ApriFinestra2.html
29
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
30
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Finestre
lthtmlgt ltheadgt ltscript language"JavaScript"gt
function NuovaFinestra()
msgopen("","schermo","toolbarno,directoriesno,m
enubarno, width370,height250,resizableyes"
) msg.document.write("ltheadgtlttitlegthtml.itlt/ti
tlegtlt/headgtltbodygt") msg.document.write("ltbgtltce
ntergtltfont size6gt Finestra secondaria con
vari linklt/fontgtlt/centergtlt/bgtltbrgt")
msg.document.write("lta hrefFineSeco.html
targethomegt Javascript (Link
interno)lt/agtltbrgt") msg.document.write("lta
hrefsfondi.htm targethomegtSfondilt/agtltbrgt")
msg.document.write("lta hrefgif.htm
targethomegtGif animatelt/agtltbrgt")
msg.document.write("lta hrefguida.htm
targethomegtGuida HTMLlt/agtltbrgt")
msg.document.write("lta hrefcontr.htm
targethomegtControllo qualità lt/agtltbrgt")
lt/scriptgt lt/headgt ltbodygtlth3gt Esempio di
pagina HTML che apre una finestra secondaria con
JavaScript lt/h3gtltformgt ltinput type"button"
value"Apri la finestra" onclick"NuovaFinestra()"
gt lt/formgt ltpgtltbrgtlthrgt lt/bodygt lt/htmlgt
ApriFinestra3.html
31
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 lthtmlgt
ltheadgtlttitlegtNuovafinestralt/titlegtlt/headgt
ltbodygt ltformgt ltinput type"button"
value"Nuova finestra onClick'window.open("Fin
eSeco1.html")'gt lt/formgt lt/bodygt lt/htmlgt
e inserire nel codice di quella secondaria
un tag del tipo ltinput type"button"
value"Chiudi" onclick"window.close()"gt
32
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).
33
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() ...
34
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Date
Operazioni con le date JavaScript dispone
delloggetto incorporato (o intrinseco) Date()
per catturare e manipolare informazioni su data e
ora. Il listato seguente
lthtmlgt ltheadgtlt/headgt ltbodygt ltscript
language"JavaScript"gt var today new Date()
document.write("La variabile today, ottenuta
con l'istruzione 'var today new Date()', ha il
valore) document.write(ltbrgttoday)
lt/scriptgt lt/bodygt lt/htmlgt
Data1.html
visualizza la data e lora corrente, producendo
luscita
35
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Date
Nella istruzione var today new Date() la
parola chiave new crea una nuova istanza
delloggetto 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"ltbrgt"oggi)
Se si aggiungono le ultime due istruzioni alla
fine dello script precedente, si ottiene la
seguente videata Data2.html
36
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Date
Se si vuole che non venga visualizzata anche
lora corrente (21.42.18, nellesempio
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 listruzione
var oggidata oggi.substring(0,25)
37
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Date
Loggetto 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 lultima
volta. Riassumiamo quanto finora detto sulla data
con il seguente listato
lthtmlgt ltheadgtlt/headgt ltbodygt ltscript
language"JavaScript"gt var today new Date()
var oggi today.toLocaleString() var
oggidata oggi.substring(0,25)
document.write("lth2gtltcentergtBenvenuto, oggi è
oggidatalt/centergtlt/h2gt") document.write("ltbr
gtlth4gtltcentergtQuesto documento è stato modificato
"document.lastModified"lt/centergtlt/h4gt")
lt/scriptgt lt/bodygt lt/htmlgt
Data3.html
38
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Date
Se vogliamo estrarre dalla data lora, possiamo
utilizzare i seguenti metodi delloggetto
Date() getTime() getMonth() getHours() getMinutes
() getSeconds() scrivendo, ad es., un file di
questo tipo
39
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - Date
lthtmlgt ltheadgtlt/headgt ltbodygt ltscript
language"JavaScript"gt var oggi new Date()
var ore oggi.getHours() var min
oggi.getMinutes() var sec oggi.getSeconds()
document.write("Sono le ore "ore""min""s
ec) lt/scriptgt lt/bodygt lt/htmlgt DataOra.html
40
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 dellutente, ma anche in
  modo automatico, come indica il prossimo listato.
  Esso utilizza
• loggetto location, che viene creato
  automaticamente dal browser, che vi inserisce
  lURL 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 linterprete 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

41
Laboratorio di Applicazioni Informatiche II mod.
A Javascript - URL
lthtmlgt ltheadgt lttitlegtFun with Phonicslt/titlegt
ltscript languageJavaScript"gt function
cambiaSito() alert("Stai per essere
trasferito sul nuovo sito JS-Tutor")
location "JSTutor.html" lt/scriptgt
lt/headgt ltbodygt ltcentergtltimg src"fun.jpg"
hspace55 vspace5 height64 width129gt lthr
width"75"gt lt/centergt ltscript
languageJavaScript"gt 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 "Cliccalta
href'JSTutor.html'gt qui lt/agt oppure aspetta 10
secondi per essere " var intro4 "trasferito
automaticamente al nostro nuovo sito." var
introMsg intro1"ltbrgt"intro2"ltbrgt"intro3"ltbr
gt"intro4 document.write("lth4gtltfont
color'firebrick'gt"introMsg"lt/fontgtlt/h4gt")
setTimeout(cambiaSito()",20000) lt/scriptgt
lt/bodygt lt/htmlgt
42
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 dallutente, che viene
richiamata automaticamente, al caricamento della
pagina, dal gestore di evento onLoad.
43
Laboratorio di Applicazioni Informatiche II mod.
A Javascript
lthtmlgt ltheadgt ltscript language"JavaScript"gt
var UTV" Università di Tor Vergata " var
SpazioMes"--- ---" var PosInizio 0
function scorreMes() document.ModuloMessagg
io.scorreMes.valueUTV.substring
(PosInizio,UTV.length)SpazioMesUTV.substring(0,P
osInizio) PosInizio PosInizio 1 if
(PosInizio gt UTV.length) PosInizio 0
window.setTimeout("scorreMes()",300)
lt/scriptgt lt/headgt ltbody onload"scorreMes()"gt
ltform name"ModuloMessaggio"gt ltinput
type"text" name"scorreMes" size23"gt lt/formgt
lt/bodygt lt/htmlgt FineScorre.html