Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Guide » Guida JavaScript di base

Lezioni:

...
<
16
17
18
>
...
Indice

Eventi legati al caricamento degli oggetti

A questo gruppo si possono ricondurre i seguenti eventi:

onLoad: Questo handler funziona nel caricamento di oggetti, per lo più finestre e immagini;
onUnload: è l'opposto del precedente e funziona quando si lascia una finestra per caricarne un'altra o anche per ricaricare la stessa (col tasto refresh);
onAbort: funziona quando l'utente ferma il caricamento di un oggetto cliccando su un altro link o premendo il tasto stop del browser;
onError: si attiva quando il caricamento di un oggetto causa un errore, ma solo se questo è dovuto ad un errore di sintassi del codice e non del browser così funziona su un link errato di un'immagine della pagina, ma non su un link errato di caricamento di una pagina intera;
onBeforeUnload: questo handler funziona allo stesso modo di onUnload ma si carica in un momento prima;
onStop: questo handler funziona quando si ferma il caricamento della pagina con il tasto stop del browser e dovrebbe funzionare anche allo stesso modo di onUnload caricandosi prima di questo ma dopo onBeforeUnload.

Gli ultimi due eventi sono nati come particolarità di Internet Explorer 5.0 e richiedono ulteriori conoscenze per poter essere adoperati.

Per le versioni più vecchie di Javascript ecco il quadro riepilogativo in rosso sono indicate le modifiche apportate nelle diverse versioni dei browser):

Evento	Versione Javascript	NN2.0	NN3.0	NN4.0	NN4.06	IE3.0	IE4.0	IE5.0
onLoad	1.0	*	*	*	*	*	*	*
onUnload	1.0	*	*	*	*	*	*	*
onAbort	1.1		*	*	*		*	*
onError	1.1		*	*	*		*	*
onBeforeUnload	DHTML							*
onStop	DHTML							*

Tag sensibili

Altro limite è dato dai tag a cui l'evento può essere associato:

Evento	Tag associati in Netscape e JScript
onLoad	Questo gestore è usato con i tag `<body>` e `<frameset>` e da Javascript 1.1anche con `<img>` mentre in Explorer occorre aggiungere anche i tag `<script>`, `<link>`, `<embed>`, `<applet>`. In Javascript 1.2, su Netscape, si aggiungeva anche il tag `<layer>`
onUnload	Questo gestore è usato con i tag `<body>` e `<frameset>` anche in Internet Explorer
onAbort	Questo gestore è usato solo con il tag `<img>` anche in Internet Explorer
onError	Questo gestore è usato solo con il tag `<img>` e con `Window` mentre in Internet Explorer anche con `<object>` e `<style>`
onBeforeUnload	Questo gestore è usato con i tag <body> anche in Internet Explorer
onStop	Questo gestore è usato con i tag `<body>` anche in Internet Explorer

onBeforeUnload/onStop/onUnload

Sulla precedenza di questi eventi clicca qui per un esempio

onLoad

Questo evento, se ben utilizzato potrebbe simulare un effetto streaming mediante caricamento di immagini (gif, png o jpeg). Supponiamo di avere a disposizione una serie di jpeg da animare. Con questo evento possiamo sincronizzare la visualizzazione delle varie figure alla fine del caricamento della precedente mediante uno script del genere:

<script type="text/javascript">

var whichImage = 0;
var maxImages  = 5;

function changeAnimation(theImage)
{
  ++whichImage;
  
  if (whichImage < maxImages) {
    var imageName="numbers/number" + whichImage + ".jpg";
    theImage.src = imageName;
  }
  else { whichImage = -1; } 
}
</script>

<img id="changingAnimation" src="numbers/number0.jpg" 
     onLoad="changeAnimation(this)">

Naturalmente questo script funzionerebbe bene per immagini molto grandi, che richiedano almeno qualche decimo di secondo per il caricamento. In caso contrario non riusciremmo a cogliere le transizioni tra un'immagine e l'altra a causa dell'elevata velocità di caricamento.

Molto più spesso utilizziamo l'evento onLoad per essere sicuri di lanciare altri script solo al termine del caricamento della pagina:

<script type="text/javascript">
function pageLoaded()
{
   // da fare alla fine del caricamento
}

windows.onload = pageLoaded;

</script>

onError

Una particolare menzione merita l'evento onError per la sua grande utilità ma per lo scarso utilizzo che se ne fa. Questo evento può:

sopprimere i messaggi di errore che il debugger mostrerebbe (dai messaggi discreti di Netscape, ai più antiestetici in Explorer) il tutto mediante un codice come questo:
<img src="corrupt.gif" onError="null">
se il codice è espresso nella sezione <head>, diventa attivo per tutta la finestra e per tutti gli eventi di errore attivati dagli oggetti ivi contenuti
<script>window.onerror=null</script>
tuttavia un evento onError associato alla singola immagine o oggetto cattura l'evento per questa immagine o oggetto a discapito di quello generale
l'evento può fare di più: può indicare il tipo di errore, la riga e l'URL che lo hanno causato e indicarlo in una finestra o memorizzarlo in un array. Di seguito possiamo esaminare un istruttivo esempio, preso dal Reference di Netscape, che serve a costruire un debugger personalizzato. Nello script ci sono degli errori e, cliccando sul primo bottone e poi sul secondo si possono individuare.

Lo script citato nel terzo caso è questo:

<script>
// handler
window.onerror = myOnError;

msgArray = new Array();
urlArray = new Array();
lnoArray = new Array();

function myOnError(msg, url, lno) {
  msgArray[msgArray.length] = msg;
  urlArray[urlArray.length] = url;
  lnoArray[lnoArray.length] = lno;
  return true;
}

function displayErrors() {
  win2 = window.open('','window2','scrollbars=yes');
  win2.document.writeln('<strong>Error Report</strong> <p>');
  
  for (var i=0; i < msgArray.length; i++) {
   win2.document.writeln('<strong>Error in file:</strong> ' + urlArray[i] + '<br /> ');
   win2.document.writeln('<strong>Line number:</strong> ' + lnoArray[i] + '<br />');
   win2.document.writeln('<strong>Message:</strong> ' + msgArray[i] + '</p>');
  }
  win2.document.close();
 }
</script>

<form>
  <!--bottone con l'errore-->
  <input type="button" value="Questo bottone ha un errore di sintassi"
         onClick="alert('unterminated string)" name="button" />
  <br />
  <input type="button" value="Visualizza l'errore" 
         onClick="displayErrors()" name="button2" />
</form>

I dati forniti da onError vengono memorizzati in tre variabili standard, che abbiamo intercettato attraverso la firma dell'handler (i tre parametri della funzione):

Variabile	Descrizione
`msg`	Il messaggio di errore che indica il tipo di eccezione sollevata
`url`	L'indirizzo della pagina in cui si è verificato l'errore
`lno`	Numero di linea del codice difettoso

Vediamo in pratica l'esempio:

Questo sistema funziona solo con Firefox e Internet Explorer, sugli altri browser possiamo utilizzare comunque onError come sistema semplice per intercettare le eccezioni.

Per lavorare un po' più di fino, possiamo utilizzare invece il costrutto try-catch-finally, ecco un semplice esempio:

<script type="text/javascript">
<!--
try
{
  document.write(10/0) ;
}
catch(e)
{
  alert(e.message);
}
finally
{
  document.write("questo codice viene eseguito comunque.");
}
-->
</script>

Se vuoi aggiornamenti su Eventi legati al caricamento degli oggetti inserisci la tua e-mail nel box qui sotto:

Lezione successiva

Lezioni:

...
<
16
17
18
>
...
Indice

Approfondimenti sul tema

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Milano
Roma

Lavora con noi

JavaScript

Siti tematici

Speciali

Eventi legati al caricamento degli oggetti

Tag sensibili

onBeforeUnload/onStop/onUnload

onLoad

onError

Se vuoi aggiornamenti su Eventi legati al caricamento degli oggetti inserisci la tua e-mail nel box qui sotto:

Approfondimenti sul tema

Ultimi articoli JavaScript

PhantomJS, headless browser per test con Javascript

Creare e leggere QR Code in JavaScript

Jquery UI Map: web-mapping con Google Maps e jQuery

Scrollorama e Scrolldeck, slideshow d'effetto con jQuery

jCanvas, un primo semplice grafico

Guide JavaScript

Guida Node.js

Canvas, guida ai framework

Guida Javascript: tecniche avanzate

Newsletter @JavaScript

Corsi in aula

Corso Webmaster base

Corso Google AdWords Base

Corso JQuery e Ajax per Webmaster

Corso Google AdWords Base

Corso Webmaster base

Lavora con noi

JavaScript

Link utili

Siti tematici

Speciali

Eventi legati al caricamento degli oggetti

Tag sensibili

onBeforeUnload/onStop/onUnload

onLoad

onError

Se vuoi aggiornamenti su Eventi legati al caricamento degli oggetti inserisci la tua e-mail nel box qui sotto:

Approfondimenti sul tema

Ultimi articoli JavaScript

Guide JavaScript

Newsletter @JavaScript

Corsi in aula