Corso di Informatica Multimediale

Gestione delle eccezioni in Javascript

Marco Comini

2021-11-02
Javascript: gestione delle eccezioni
In Javascript si possono gestire a programma le situazioni eccezionali (come gli
errori).
Si utilizza il costrutto try stmt1 catch ( err ) stmt2 finally stmt3 .
L’istruzione try consente di definire un comando/blocco di codice in cui si
vuole “intercettare” eventuali eccezioni durante l’esecuzione.
L’istruzione catch consente di definire un blocco di codice da eseguire se si
verifica un eccezione nel blocco try . In caso di eccezione si lega la variabile
err al messaggio dell’eccezione prima di eseguire stmt2 .
L’istruzione finally consente di eseguire del codice, dopo aver eseguito o
tutta la try o catch , indipendentemente dal risultato.
Si deve utilizzare almeno una fra catch e finally .

Quando si verifica un errore, JavaScript normalmente si interrompe e genera

un messaggio di errore. Il termine tecnico è “generare un’eccezione”.
Si crea un oggetto Error con due proprietà: name e message .

L’istruzione throw message consente di generare un’eccezione

personalizzata. message è una stringa.
Marco Comini Informatica Multimediale 2021-11-02 1 / 17
 Javascript: esempi uso eccezioni/1

1 function lastElement ( array ) {

2 if ( array . length > 0)
3 return array [ array . length - 1];
4 else
5 throw " lastElement : empty array . " ;
6 }
7

8 function las tE le men tP lu sTe n ( array ) {

9 return lastElement ( array ) + 10;
10 }
11

12 try {
13 print ( la stE le me ntP lu sT en ([]));
14 }
15 catch ( error ) {
16 print ( " Something went wrong : " , error );
17 }

Marco Comini Informatica Multimediale 2021-11-02 2 / 17

 Javascript: esempi uso eccezioni/2
1 try { 1
2 try {
3 try {
4 throw " err "
5 } finally {
6 print ( " sono finally " );
7 }
8 }
9 catch ( e1 ) {
10 print ( " e1 = " + e1 );

1 // throw " E ("+ e1 +")";

1 }
2 }
3 catch ( e2 ) {
4 print ( " e2 = " + e2 );
5 }
6 print ( " fine " );
Marco Comini Informatica Multimediale 2021-11-02 3 / 17
 Javascript: esempi uso eccezioni/2
1 try { 2
2 try {
3 try {
4 throw " err "
5 } finally {
6 print ( " sono finally " );
7 }
8 }
9 catch ( e1 ) {
10 print ( " e1 = " + e1 );

1 throw " E ( " + e1 + " ) " ;

1 }
2 }
3 catch ( e2 ) {
4 print ( " e2 = " + e2 );
5 }
6 print ( " fine " );
Marco Comini Informatica Multimediale 2021-11-02 3 / 17
Corso di Informatica Multimediale
Document Object Model HTML

Marco Comini

2021-11-02
DOM HTML: introduzione/1
Nel caricare una pagina web il browser crea un Document Object Model.
Una sua componente, il modello DOM HTML è un’interfaccia di
programmazione per il contenuto HTML.
È costruito come un albero di oggetti:
1 < html > < head > < title > My title </ title > </ head >
2 < body > <a href = " url " > My link </ title >
3 < h1 > My header </ h1 > </ body > </ html >

Marco Comini Informatica Multimediale 2021-11-02 4 / 17

DOM HTML: introduzione/2
Cos’è il DOM HTML?
DOM HTML è un modello standard di oggetti e un’interfaccia di
programmazione per HTML. Definisce:
Gli elementi HTML come oggetti
Le proprietà di tutti gli elementi HTML
I metodi per accedere a tutti gli elementi HTML
Gli eventi per tutti gli elementi HTML

Usando il modello a oggetti si può creare HTML dinamico. Si può

modificare tutti gli elementi HTML nella pagina
modificare tutti gli attributi HTML nella pagina
modificare tutti gli stili CSS nella pagina
rimuovere gli elementi e gli attributi HTML esistenti
aggiungere nuovi elementi e attributi HTML
reagire a tutti gli eventi HTML esistenti nella pagina
creare nuovi eventi HTML nella pagina

In HTML, il codice JavaScript viene inserito tra i tag <script> e

</script> .

Marco Comini Informatica Multimediale 2021-11-02 5 / 17

DOM HTML: introduzione/3

L’interfaccia di programmazione DOM

Nel DOM, tutti gli elementi HTML sono definiti come oggetti.
L’interfaccia di programmazione è costituita dalle proprietà e dai metodi di
ogni oggetto.
▶ Una proprietà è un valore che puoi ottenere o impostare (come modificare il
contenuto di un elemento HTML).
▶ Un metodo è un’azione che puoi eseguire (come aggiungere o eliminare un
elemento HTML).

Marco Comini Informatica Multimediale 2021-11-02 6 / 17

DOM HTML: Navigazione “per contenuto” nel DOM

Ci sono tre metodi per identificare (trovare) elementi nel DOM

document.getElementById( ID ) Trova un elemento specificando il suo ID
(più precisamente il primo elemento con quell’ID)
document.getElementsByTagName( name ) Trova gli elementi con un
determinato tag
document.getElementsByClassName( name ) Trova gli elementi con un
determinato nome di classe

Marco Comini Informatica Multimediale 2021-11-02 7 / 17

DOM HTML: Navigazione “per struttura” nel DOM

Ci sono diverse proprietà per riferire elementi correlati

children Collezione degli elementi figli di un elemento
firstElementChild Il primo nodo figlio di un elemento
lastElementChild L’ultimo nodo figlio di un elemento
nextElementSibling Il nodo fratello successivo
previousElementSibling Il nodo fratello precedente
parentElement L’elemento padre di un elemento

Marco Comini Informatica Multimediale 2021-11-02 8 / 17

DOM HTML: Cambiare i contenuti/1

Modifica degli elementi HTML

elemento .innerHTML = nuovo-contenuto-html
Cambia l’HTML interno di un elemento
elemento . attributo = nuovo-valore
Modifica il valore dell’attributo di un elemento HTML
elemento .setAttribute( attributo , nuovo-valore )
Equivalentemente modifica il valore dell’attributo di un elemento HTML
elemento .style. proprietà = nuovo-stile
Cambia lo stile di un elemento HTML
elemento .style[" proprietà "] = nuovo-stile
Cambia lo stile di un elemento HTML (necessaria per proprietà il cui nome
non è un identificatore valido, come font-family).

Creazione di un elemento HTML

document.createElement(" tag ")
Crea un elemento HTML col tag specificato “vuoto”

Marco Comini Informatica Multimediale 2021-11-02 9 / 17

DOM HTML: Cambiare i contenuti/2

Aggiunta ed eliminazione di elementi

elemento .appendChild( nuovo-elemento )
Aggiunge un nuovo-elemento HTML come ultimo nodo figlio di un
elemento
elemento .insertBefore( nuovo-elemento , elemento-esistente )
Inserisce un nuovo-elemento prima di uno specificato elemento-esistente
elemento .replaceChild( nuovo-elemento , vecchio-elemento )
Sostituisce un elemento HTML
elemento .removeChild( elemento )
Rimuove un elemento HTML
elemento .removeAttribute( nome-attributo )
Rimuove un attributo specificato da un elemento

RUN esempio-2021-11-02-A.html

Marco Comini Informatica Multimediale 2021-11-02 10 / 17

DOM HTML: Reagire agli eventi/1

Codice JavaScript può essere eseguito quando si verifica un evento, come

quando un utente fa clic su un elemento HTML.

Tale codice viene chiamato gestore dell’evento.

Per eseguire un comando stmt quando si verifica un evento event si può

aggiungere ad un tag un attributo onevent="stmt" .
Ad esempio
<h1 onclick="this.innerHTML = ’Ouch!’">Click me</h1>

Si può impostare l’attributo onevent di un elemento via JavaScript.

Ad esempio heading.onclick=changeHeading; dove heading è un
elemento e changeHeading() una funzione.

Marco Comini Informatica Multimediale 2021-11-02 11 / 17

DOM HTML: Reagire agli eventi/2

Esempi di pagine HTML con reazione ad eventi:

click Quando un utente fa clic con il mouse
mouseover Quando il puntatore del mouse si sposta su un elemento (o su
uno dei suoi figli)
mouseout Quando il puntatore del mouse si sposta fuori da un elemento (o
da uno dei suoi figli)
input Quando un campo di input viene modificato
keypress Quando un utente preme un tasto
submit Quando viene inviato un modulo HTML

RUN esempio-2021-11-02-B.html

Marco Comini Informatica Multimediale 2021-11-02 12 / 17

DOM HTML: Oggetto “input di testo”

L’oggetto “input di testo” rappresenta un elemento HTML <input> con

type = "text" .
Fra i vari attributi abbiamo:
autofocus = true se un campo di testo deve essere attivato
automaticamente al caricamento della pagina.
autocomplete = "on" / "off" per abilitare o meno il completamento
automatico di un campo di testo.
defaultValue valore predefinito del campo di testo.
disabled = true se il campo di testo è disabilitato.
maxLength il numero massimo di caratteri consentiti nel campo di testo.
name utilizzato per identificare i dati di un modulo dal server che riceve una
richiesta.
readOnly = true se un campo di testo è di sola lettura.
size la larghezza di un campo di testo (in numero di caratteri). Il valore
predefinito è 20.
value contiene il valore predefinito OPPURE il valore digitato da un utente
(OPPURE un valore impostato da uno script).

Marco Comini Informatica Multimediale 2021-11-02 13 / 17

DOM HTML: Esempi di reazione agli eventi

Esempi di pagine HTML con reazione ad eventi:

RUN esempio-2021-11-02-C.html

Marco Comini Informatica Multimediale 2021-11-02 14 / 17

DOM HTML: Esempi di reazione agli eventi

Esempi di pagine HTML con reazione ad eventi:

RUN esempio-2021-11-02-C.html

RUN esempio-2021-11-02-D.html

Marco Comini Informatica Multimediale 2021-11-02 14 / 17

DOM HTML: gestione degli eventi/1

I browsers ci permettono di eseguire del nostro codice in reazione agli eventi

non appena si verificano. Il meccanismo prevedere di registrare delle funzioni
quali gestori (handlers) di eventi specifici.

Ciclo di esecuzione dei browsers

Flow Paint

Script Events

Marco Comini Informatica Multimediale 2021-11-02 15 / 17

DOM HTML: gestione degli eventi/2

Ogni gestore di eventi viene registrato per uno specifico elemento HTML.

Si possono avere più gestori di uno stesso evento per uno stesso elemento.
Vengono eseguiti nell’ordine di registrazione.

Si può registrare un gestore di eventi per l’evento event

assegnando a un elemento l’attributo onevent .
▶ Dato che un elemento ha un solo attributo onevent si può registrare solo un
gestore (per elemento) in questo modo.
usando il metodo addEventListener( event , function ) che aggiunge un
gestore di eventi a un elemento senza sovrascrivere i gestori di eventi esistenti.
▶ Possiamo aggiungere un numero qualsiasi di gestori.
▶ Non si può sostituire accidentalmente un gestore che è già stato registrato.

RUN esempio-2021-11-02-E.html

Marco Comini Informatica Multimediale 2021-11-02 16 / 17

DOM HTML: gestione degli eventi/3

Si può rimuovere la registrazione di un gestore di eventi per l’evento event

usando il metodo removeEventListener( event , function-name ) .

Oggetti evento
Ai gestori di eventi viene passato un argomento: l’oggetto evento (event
object).
Questo oggetto ci fornisce dettagliate informazioni addizionali sull’evento
perché viene costruito dal browser in base alle caratteristiche dell’evento stesso.
Le proprietà memorizzate differiscono in base al tipo di evento.
Abbiamo però sempre la proprietà type che contiene una stringa che
identifica il tipo di evento.
La maggior parte degli oggetti evento ha la proprietà target che fa
riferimento all’elemento in cui hanno avuto origine.

Marco Comini Informatica Multimediale 2021-11-02 17 / 17