Laboratorio di reti II: Javascript

Laboratorio di reti II: Javascript
Stefano Brocchi
[email protected]
30 marzo, 2009
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
1 / 46
Javascript
Javascript
Il Javascript è un linguaggio di scripting incapsulabile in una pagina
web
Nonostante il suo nome, ha ben poco a che vedere con il linguaggio
Java
Quando un browser scarica una pagina web contenente Javascript,
esso si occuperè di eseguire il codice in essa contenuto
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
2 / 46
Javascript
Limitazioni del Javascript
La sicurezza lato client è garantita innanzitutto dal tipo di funzioni ed
istruzioni a disposizione che ci permettono di effettuare operazioni
solo sulla pagina web stessa.
Una limitazione che è necessario imporre al codice Javascript è di
permettergli l’accesso solo a dati (valori di campi di input, cookie...)
relativi al suo sito di origine.
Del codice Javascript non può per esempio accedere a cookie mandati
da siti aperti in altre finestre del browser.
Il linguaggio Javascript non viene compilato ma direttamente
interpretato
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
3 / 46
Javascript
Caratteristiche del Javascript
Il Javascript viene quindi eseguito lato client, al contrario di linguaggi
come PHP che vengono eseguiti lato server
Questo comporta varie conseguenze:
E’ possibile realizzare in javascript pagine che interagiscono con
l’utente senza collegarsi e doversi ricaricare da capo, per ogni
cambiamento, al server
Il codice Javascript è potenzialmente del tutto visibile, ed
eventualmente modificabile, all’utente. Non è opportuno quindi
affidarvi compiti che possono coinvolgere problematiche di sicurezza del
sito.
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
4 / 46
Javascript
Problematiche di compatibilità
Essendo il Javascript un linguaggio funzionante su più piattaforme,
rappresentate in questo caso dai vari browser questo può portare a
delle incompatibilità
Non sempre tutte le funzionalità di Javascript sono implementate da
tutti i browser
Cercare quindi di limitare l’uso delle funzioni più avanzate al minimo
per massimizzare la compatibilità
Per avere un’idea di quali funzioni sono disponibili su quali browser,
esistono numerose risorse online tra cui www.w3schools.com/js
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
5 / 46
Javascript
Limitazioni
Bisogna inoltre considerare che molte istruzioni Javascript sono delle
richieste inviate al browser
Un browser è quindi libero di limitare o negare il funzionamento a
varie istruzioni per vari criteri, solitamente riguardanti la sicurezza o
la privacy
Una limitazione classica è quella di impedire l’apertura di nuove
finestre non richieste (pop-up)
Un altro esempio: Firefox proibisce la chiusura di finestre che non sono
state a sua volta aperte da Javascript
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
6 / 46
Javascript
Javascript nelle pagine web
Uso del tag script
Per inserire Javascript in una pagina web è nesessario usare il tag
<script> con una sintassi come la seguente:
<script type=’text/javascript’> ...
</script>
E’ possibile caricare il codice da un file tramite l’attributo src
<script type=’text/javascript’
src=’code.js’></script>
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
7 / 46
Javascript
Javascript nelle pagine web
Compatibilità con vecchi browser
Alcuni browser potrebbero non eseguire il codice javascript
Per evitare che in questo caso il codice Javascript venga visualizzato
nella pagina, si utilizza la seguente sintassi:
<SCRIPT type=’text/javascript’>
<!-...
// Codice Javascript
//-->
</SCRIPT>
Possibile inoltre specificare il tag <noscript>, il cui contenuto viene
visualizzato solo se il browser non supporta Javascript
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
8 / 46
Javascript
Il linguaggio
Il linguaggio Javascript
Javascript è weak-typed similarmente a PHP: ad una variabile non
viene associato un tipo ma solo il suo valore
Molti istruzioni e costrutti di base sono uguali a Java:
Istruzioni if, for e while e relativo uso di graffe
Operatori: aritmetici (+, -, ...), logici (&&, k, !), di confronto (==,
!=, <,...) o di assegnamento (=, +=,...)
Concatenazione tra stringhe tramite ’+’
Commenti tramite // e /*...*/
Per altre cose vi sono delle differenze:
Un’istruzione termina con un ’;’ o con un ’a capo’
L’occultamento della visibilità di una variabile avviene tra funzione e
funzione ma non tra blocco e blocco
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
9 / 46
Javascript
Il linguaggio
Scrittura sul documento
Una delle più semplici funzioni in Javascript è document.write()
L’oggetto document rappresenta la pagina web stessa; in seguito
verranno approfonditi gli oggetti a disposizione del codice Javascript
Grazie a questa funzione il contenuto della stringa passata come
argomento viene inserito nel codice HTML
Se la funzione viene richiamata quando la pagina è stata già
interamente caricata dal client, questa sovrascriverà il contenuto
precedente. In questi casi occorre utilizzare altre tecniche.
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
10 / 46
Javascript
Il linguaggio
Hello world
Un semplice esempio di pagina HTML con Javascript:
<html>
<head>
<title>Hello World in Javascript</title>
</head>
<body>
<center>
<script type=’text/javascript’>
document.write(’<h1>Hello world !</h1>’);
</script>
</center>
</body>
</html>
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
11 / 46
Javascript
Vettori, funzioni e oggetti
Vettori
Possibile creare vettori associativi similarmente a PHP
Per ciclare su tutti gli indici di un vettore (come per il foreach in
PHP) si può usare il for con la seguente sintassi:
for (index in array) { ...}
Un esempio:
myArray = new Array("Zero");
myArray[1] = "Uno";
myArray["Due"] = 2;
for (x in myArray) {
document.write(x + " " + myArray[x] + "<br>");
}
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
12 / 46
Javascript
Vettori, funzioni e oggetti
Funzioni
Possono venir dichiarate funzioni in Javascript tramite la sintassi
function myFunction(var1, var2, ...) {
// Corpo della funzione
}
Come in PHP, essendo Javascript weak-typed, non occorre specificare
il tipo dei parametri in ingresso nè l’eventuale tipo di ritorno
restituibile tramite return
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
13 / 46
Javascript
Vettori, funzioni e oggetti
Oggetti
Sebbene Javascript sia un linguaggio orientato agli oggetti, la
gestione di questi differisce molto da altri linguaggi
Non esiste una definizione di classe. I metodi di un oggetto possono
essere definiti dinamicamente ed aggiunti ad un oggetto a run time
La definizione di un oggetto può avvenire tramite la definizione di una
qualsiasi funzione che ne farà poi da costruttore
Per fare riferimento a proprietà dell’oggetto, usare la parola chiave
this
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
14 / 46
Javascript
Vettori, funzioni e oggetti
Oggetti: esempio
Un esempio della creazione di un oggetto persona con campi nome,
cognome e eta
function persona(nome, cognome, eta) {
this.nome = nome;
this.cognome = cognome;
this.eta = eta;
}
marco = new persona(marco, rossi, 24);
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
15 / 46
Javascript
Vettori, funzioni e oggetti
Creazione di metodi
I metodi di un oggetto non sono altro che funzioni attaccate
all’oggetto stesso
La creazione di un metodo avviene allo stesso modo di quella di una
proprietà, assegnando ad un campo il nome di un metodo. Un
esempio:
marco = new persona("marco", "rossi", 24);
function compleanno() {
this.eta = this.eta + 1;
}
marco.compleanno = compleanno;
marco.compleanno();
document.write(marco.eta);
// Output: 25
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
16 / 46
Javascript
Vettori, funzioni e oggetti
Prototipi
Per specificare campi e metodi che devono essere comuni a tutte le
istanze di un certo oggetto, in Javascript si fa uso di prototipi
Aggiungendo tali metodi e campi al campo prototype relativo al
nome dell’oggetto, ogni istanza di tale oggetto li conterrà
automaticamente
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
17 / 46
Javascript
Vettori, funzioni e oggetti
Prototipi: esempio
Nell’esempio precedente, sarebbe sensato definire il metodo
’compleanno’ per tutti gli oggetti persona:
function compleanno() {
this.eta = this.eta + 1;
}
persona.prototype.compleanno = compleanno;
marco = new persona("marco", "rossi", 24);
marco.compleanno();
document.write(marco.eta);
// Output: 25
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
18 / 46
Javascript
Vettori, funzioni e oggetti
Oggetti come vettori
Il modo in cui Javascript tratta gli oggetti è di considerarli niente
altro che vettori associativi dinamici
Il riferimento ad una funzione o ad un campo può essere fatto
equivalentemente con la sintassi relativa agli oggetti o con quella
relativa ai vettori
marco.nome è equivalente a marco[’nome’]
Non essendoci definizioni di tipo, per sapere se un’oggetto ha un
determinato metodo si può verificare se il riferimento a quel nome di
funzione restituisce true
Es. if (marco.compleanno) { marco.compleanno(); }
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
19 / 46
Javascript
Vettori, funzioni e oggetti
Oggetti come vettori: esempio
Come per i vettori, l’istruzione for può essere utilizzata per scorrere
tutti i campi e le funzioni di un oggetto. Nel nostro esempio:
for (key in marco) {
document.write(key + " -> " + marco[key] + "<br>")
}
Output:
nome -> marco
cognome -> rossi
eta -> 25
compleanno -> function compleanno() {
this.eta = this.eta + 1;
}
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
20 / 46
Javascript
Oggetto Window
Oggetto Window
Vediamo alcuni oggetti predefiniti in Javascript
L’oggetto Window rappresenta la finestra contenente la pagina web.
Viene automaticamente creato da Javascript al caricamento del tag
<body>
Metodi e proprietà di Window sono automaticamente accessibili dal
codice. Di seguito ne sono elencati alcune
outerHeight Altezza della finestra. Analogamente outerWidth contiene la larghezza
document Oggetto rappresentante il documento corrente
location Oggetto che rappresenta la locazione, sotto forma di URL, del
documento. Può essere cambiato per ottenere una redirezione o per
aggiornare la pagina
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
21 / 46
Javascript
Oggetto Window
Uso di location: redirezioni e refresh
Per esempio, con il seguente codice si esegue una redirezione tramite
Javascript:
<script type=’text/javascript’>
location = "http://www.google.com";
</script>
Il metodo reload di location richiede invece di ricaricare la pagina
corrente
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
22 / 46
Javascript
Oggetto Window
Metodi alert, confirm e prompt
Vediamo alcune funzioni basilari offerte da Window:
alert(testo)
Apre una finestra di avviso, chiedendo all’utente di procedere con un
tasto ’OK’
confirm(testo)
Apre una finestra di conferma con un determinato messaggio. Se
l’utente da conferma (’OK’) ritorna true, altrimenti false
prompt(testo, default)
Apre una finestra di input con il testo di default indicato. Ritorna il
testo inserito dall’utente o null se l’utente sceglie l’opzione ’annulla’
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
23 / 46
Javascript
Oggetto Window
Uso di Window: esempio
Un semplice esempio di alcune funzionalità di Window
<script type=’text/javascript’>
if (outerWidth < 640) {
msg = "La finestra del browser è meno ";
msg += "larga di 640 pixel\n";
msg += "Il sito potrebbe non venir "
msg += "visualizzato correttamente";
alert(msg);
}
</script>
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
24 / 46
Javascript
Oggetto Window
Altri metodi di Window
In breve, vediamo altri metodi utili di Window
open(), close(), createPopup()
Metodi per la chiusura e l’apertura di finestre del browser. Open()
richiederà l’url di destinazione; close è spesso permessa solo per
finestre aperte da Javascript.
focus(), blur()
Metodi per dare o togliere il fuoco a una finestra
scrollBy(), scrollTo()
Per scorrere la finestra ad un determinato punto; i metodi richiedono
le coordinate della destinazione in pixel. scrollBy() richiede le
coordinate relative al punto corrente
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
25 / 46
Javascript
Metodi per la temporizzazione
Metodi per la temporizzazione
In Javascript sono disponibili dei metodi per la gestione della
temporizzazione:
setTimeout()
Metodo per eseguire una determinata azione dopo un determinato
intervallo di tempo; richiede come argomento una stringa contenente
il codice Javascript da eseguire e l’intervallo di tempo, in millisecondi
setInterval()
Simile al precedente, impone di eseguire un’azione per ogni
specificato intervallo di tempo.
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
26 / 46
Javascript
Metodi per la temporizzazione
Un esempio di setInterval
Un esempio che visualizza una finestra per ogni minuto dal momento
in cui l’utente ha aperto la pagina
t = 0;
function finestra() {
t++;
alert(’Pagina aperta da ’ + t + ’ minuti’);
}
setInterval(’finestra()’, 60000);
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
27 / 46
Javascript
Metodi per la temporizzazione
Interrompere azioni temporizzate
Per interrompere azioni preprogrammate con setTimeout() o
setInterval(), esistono i metodi clearTimeout() e
clearInterval()
I metodi setTimeout() o setInterval() quando richiamati
restituiscono un identificativo rappresentante il processo avviato
Tale intero dovrà essere passato a clearTimeout() o
clearInterval() per interrompere la relativa azione
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
28 / 46
Javascript
Metodi per la temporizzazione
Un esempio per clearInterval
Il seguente codice per esempio visualizza una finestra ogni 5 secondi
finchè l’utente non ne chiede l’interruzione
t = 0;
id = setInterval("finestra();", 5000);
function finestra() {
t += 5;
res = confirm("Pagina aperta da " + t + " secondi\n" +
"Continuare a visualizzare la finestra ?");
if (! res) {
clearInterval(id);
}
}
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
29 / 46
Javascript
Oggetti predefiniti relativi al documento
Oggetti Navigator e Screen
Altri due oggetti utili resi disponibili da Javascript sono:
Navigator, contenente informazioni sul browser utilizzato (proprietà
appName, appVersion, cookieEnabled...)
Screen, contenente informazioni sulla risoluzione dello schermo
dell’utente (proprietà width, height, colorDepth...)
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
30 / 46
Javascript
Oggetti predefiniti relativi al documento
Oggetto document
In Window è contenuto il campo document rappresentante il
documento stesso
Alcuni campi in esso contenuti sono:
cookie Oggetto relativo al cookie della pagina
referrer Rappresentante la pagina dalla quale è stato richiesto il caricamento
della pagina corrente
title Contenente il titolo della pagina, ed utilizzabile per la sua
manipolazione
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
31 / 46
Javascript
DOM e manipolazione di attributi HTML e CSS
Document object model
In Javascript un documento HTML è rappresentato tramite un
modello detto Document Object Model (DOM)
In questo modello ogni tag è rappresentato tramite un oggetto
Gli attributi HTML saranno rappresentati come proprietà del relativo
oggetto in Javascript
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
32 / 46
Javascript
DOM e manipolazione di attributi HTML e CSS
Manipolare attributi HTML
Nell’oggetto document sono disponibili metodi per ottenere oggetti
relativi ai singoli tag del documento
Questi possono essere utilizzati per manipolare le caratteristiche del
documento
Vediamo come si possono manipolare attributi di tag HTML
rappresentati come proprietà in Javascript. La seguente funzione
imposta per esempio l’attributo align a right per un qualsiasi tag
function rightAlign(tag) {
tag.align = ’right’;
}
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
33 / 46
Javascript
DOM e manipolazione di attributi HTML e CSS
Manipolare attributi CSS
Per quanto riguarda le proprietà CSS, queste sono rappresentate a sua
volta come proprietà della proprietà style
Un esempio: la seguente funzione imposta la proprietà CSS
background-color (colore di sfondo) a yellow
function yellowBackground(tag) {
tag.style.backgroundColor = ’yellow’;
}
Esiste una lieve discrepanza tra i due nomi di proprietà: gli attributi in
CSS contenenti un trattino vengono usualmente chiamati senza (ma
con la maiuscola) in Javascript
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
34 / 46
Javascript
DOM e manipolazione di attributi HTML e CSS
Oggetti relativi a tag
Vediamo i metodi di document per recuperare gli oggetti relativi ai
vari tag:
anchors(), forms() e images() ritornano dei vettori contenenti,
rispettivamente, tutti i tag <a>, <form> e <img>
getElementById() ritorna un tag con un determinato identificativo
(attributo id)
getElementsByTagName() ritorna tutti i tag di un determinato tipo
getElementsByName() ritorna tutti i tag con un determinato nome
(attributo name)
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
35 / 46
Javascript
DOM e manipolazione di attributi HTML e CSS
Oggetti relativi a tag: esempio
Vediamo un esempio che imposta lo sfondo di un paragrafo al colore
giallo
<p id="par">
Contenuto del paragrafo...
</p>
<script type=’text/javascript’>
tag = document.getElementById("par");
tag.style.backgroundColor = ’yellow’;
</script>
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
36 / 46
Javascript
DOM e manipolazione di attributi HTML e CSS
Proprietà innerHTML
Un’altra proprietà disponibile per tutti i tag è innerHTML, che
permette di ottenere o cambiare il codice HTML contenuto all’interno
del tag
Le funzionalità viste finore possono essere particolarmente utili se
collegabili a determinati eventi azionati dall’utente. Per questo
vedremo adesso come funziona la gestione degli eventi in Javascript
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
37 / 46
Javascript
Eventi in Javascript
Eventi in Javascript
Gli eventi vengono gestiti in Javascript tramite una serie di gestori
(handler) associati ad un determinato tag
Un gestore si specifica tramite uno specifico attributo HTML a
seconda del tipo di evento da catturare
Il valore dell’attributo deve essere una stringa contenente il codice
Javascript da eseguire all’avvenimento dell’evento
Nel codice è possibile specificare un’istruzione return che specifica se
altre azioni che avverrebbero a seguito dell’evento vengano eseguite o
no
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
38 / 46
Javascript
Eventi in Javascript
Eventi in Javascript: esempio
Un’esempio dove il browser chiede conferma all’utente che clicca su
un certo link
<a href = ’http://www.unisi.it’
onClick = ’return confirmWin()’>
Sito dell’università
</a>
<script type=’text/javascript’>
function confirmWin() {
return confirm (’Seguire il link ?’);
}
</script>
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
39 / 46
Javascript
Eventi in Javascript
Tipi di eventi
Vi sono numerosi possibili handler di eventi, alcuni dei quali
associabili solo ad alcuni tag. Qui sono elencati per categorie:
Azioni legate al mouse: onClick, onDbClick, onMouseDown,
onMouseUp, onMouseMove, onMouseOver, onMouseOut
Eventi legati al caricamento: onLoad, onUnload, onAbort
Azioni attivate da tastiera: onKeyPress, onKeyDown, onKeyUp
Eventi generati dal cambiamento di fuoco o di dimensioni della
finestra: onBlur, onFocus, onResize
Attivazione di pulsanti in form: onSubmit, onReset
Cambiamento di contenuto di campi di testo: onChange
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
40 / 46
Javascript
Eventi in Javascript
Oggetto event
Nel codice della gestione di un evento è possibile disporre di un
oggetto event che descrive l’evento in questione
Alcune delle proprietà di event sono:
button, indicante che bottone del mouse è stato premuto
clientX e clientY, contenenti le coordinate del cursore al momento
dell’evento
currentTarget, contenente il tag che ha attivato l’evento. Purtroppo
non disponibile su explorer
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
41 / 46
Javascript
Gestione degli errori
Gestione degli errori
In caso di errore nell’esecuzione o nel parsing del codice Javascript,
non verrà visualizzato alcun messaggio nella pagina
L’errore è solitamente visualizzato in una console degli errori
disponibile nel browser
Per la gestione degli errori, è inoltre possibile usare il costrutto
try...catch similarmente a come si fa in Java
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
42 / 46
Javascript
Cenni su AJAX
AJAX
Per alcune applicazioni web è necessario o comunque desiderabile
modificare la pagina ca seconda di dati provenienti dal server senza
ricaricarla interamente
Per questo scopo è stata sviluppata una tecnica detta Asinchronous
JavaScript And Xml (AJAX)
Si sfrutta il fatto che a Javascript è permesso di comunicare con il
server tramite XML
AJAX è quindi una tecnica che combina scripting lato client
(Javascript) con un formato per lo scambio di dati (XML) ed uno
script in ascolto lato server (come PHP)
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
43 / 46
Javascript
Esercizio
Esercizio
Per inserire codice Javascript nel forum, sarà necessario che questo
venga restituito dal codice PHP o dal codice Java
Per evitare confusione, è bene inserire più possibile il codice
Javascript in file esterni evitando di mescolarlo al codice PHP
Per lo sviluppo, può essere comodo testare il codice Javascript su
delle copie statiche (puro HTML) delle pagine dinamiche
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
44 / 46
Javascript
Esercizio
Esercizio
I possibili utilizzi di Javascript per rendere un sito interattivo per
impostare un comportamento complesso sono molteplici
Alcune funzionalità da realizzare potrebbero essere le seguenti.
Implementarne alcune a scelta
Evidenziare titoli di post o il contorno del box relativo al post quando il
mouse passa sopra l’oggetto
Inserire dei controlli sui dati immessi dagli utenti (es. dare un
messaggio di errore se l’utente non inserisce una password al momento
del login)
Visualizzare un messaggio di conferma quando l’utente effettua il
logout
Inserire dei sottomenù nel menu di navigazione che compaiono appena
il mouse passa sopra una voce di menu principale
Aggiornare le pagine dei post a intervalli di qualche minuto in modo da
mantenere aggiornata la discussione
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
45 / 46
Javascript
Esercizio
Esercizio
Altre modifiche più complesse potrebbero essere:
Nascondere o mostare il corpo di un post (o la descrizione di un
thread) quando l’utente clicca sul titolo o su un apposito pulsante
Alternare il valore dell’attributo style.display del contenitore del
corpo del post a none o block
Variare del testo o un’immagine visualizzata ogni pochi secondi,
scegliendo a rotazione un contenuto diverso tra un numero limitato di
possibilità.
Questa tecnica viene a volte utilizzata per ottenere una piccola
animazione in alcuni banner
Modificare l’attributo innerHTML o src periodicamente per ottenere
l’effetto
Fare comparire un menù con un’anteprima di un thread (es. titolo o
inizio dell’ultimo post) quando l’utente passa sopra il titolo del thread
o preme un’apposito pulsante
Stefano Brocchi
Laboratorio di reti II: Javascript
30 marzo, 2009
46 / 46