Eventi

1. Eventi Come rendere gli elementi HTML di una pagina web sensibili alle azioni del mouse

2. Eventi • Nella programmazione le azioni con cui l’utente può interagire con il programma vengono dette eventi. • Un evento è una richiesta asincrona che l'utente fa al programma sotto forma di azioni col mouse o con la tastiera. • Asincrona vuol significare che è indipendente da eventuali altre istruzioni che il programma sta eseguendo.

3. Eventi in JavaScript • In JavaScript, il browser Web notifica agli script JavaScript l'avvenuta ricezione di una segnalazione dal mouse o da tastiera da parte dell'utente, generando degli eventi. • Quando si verifica un evento, il browser Web cerca di richiamare una corrispondente funzione di gestione degli eventi per rispondere

4. Eventi del mouse in JavaScript • onClick L'utente fa clic col mouse • onDblClick L'utente fa doppio clic col mouse • onMouseDown L'utente preme il pulsante del mouse • onMouseOut Il mouse si sposta dall'elemento • onMouseOver Il mouse va sull'elemento • onMouseUp L'utente rilascia il pulsante del mouse

5. Gestire gli eventi in JavaScript • Per inserire la gestione degli eventi in una pagina web occorre • Nell’HTMLIndividuare l’elemento HTML da rendere sensibile all’evento inserendo in esso una istruzione (HTML) che richiama le istruzioni JavaScript • Nello SCRIPTScrivere le istruzioni JavaScript che il browser deve eseguire quando l’utente agisce sull’elemento HTML con l’evento

6. Esempio 1 • Rendiamo sensibile un’immagine al click su di essain modo che il click richiami una funzione JS contenente delle istruzioni • onClick="go()" messo come attributo dell’elemento IMG ha il seguente significato:“quando l’utente fa click (sull’immagine) manda in esecuzione la funzione JS di nome go()” <IMG SRC="duke.gif" onClick="go()"> <SCRIPT LANGUAGE="JavaScript"> function go() { alert("Hai cliccato sull'immagine"); } </SCRIPT>

7. Nota • Nell’istruzioneonClick="go()" onClick è HTML (e può essere scritto indifferente a maiuscole e minuscolego() è JavaScript e deve essere scritto esattamente come definito nella funzione dello script.

8. Esempio 2 • Quando il mouse va sul paragrafo viene mostrato un messaggio in una finestra di alert; così come quando il mouse esce dal paragrafo • Nell’elemento P vi sono due gestori di evento <P onMouseOver="ci_sei_sopra()" onMouseOut="ne_sei_uscito()">Bla Bla Bla</p> <SCRIPT LANGUAGE="JavaScript"> function ci_sei_sopra() { alert("Sei sopra il paragrafo") } function ne_sei_uscito() { alert(“Sei uscito dal paragrafo") } </SCRIPT>

9. Esempio 3 Quando si va col mouse sull’immagine questa viene ingrandita e quando si esce dall’immagine, viene rimessa alla dimensione originaria <IMG SRC="albert.jpg" ID=myimg onMouseOver="zoom1()" onMouseOut="zoom2()"> <SCRIPT LANGUAGE="JavaScript"> function zoom1() { x=document.getElementById("myimg"); x.width=x.width*1.25; x.height=x.height*1.25; // moltiplica larghezza e altezza per 1.25 } function zoom2() { x=document.getElementById("myimg"); x.width=x.width/1.25; x.height=x.height/1.25; // divide larghezza e altezza per 1.25 } </SCRIPT>

10. Giochino L’immagine si muove a caso e quando si clicca su di essa si fa un punto <IMG SRC="bla.png" ID="myimg" onClick="beccato()“ STYLE="position:absolute;"> <script> numero_volte = 0; function muovi_a_caso() { x = document.getElementById("myimg"); a = parseInt(Math.random()*800)+50; b = parseInt(Math.random()*600)+50; x.style.left = a; x.style.top = b; } setInterval("muovi_a_caso()", 200); function beccato() { numero_volte++; alert("colpito " + numero_volte + " volte"); } </script>