Nella vita di tutti i giorni noi tutti eseguiamo delle azioni, le quali ovviamente sono però scatenate da un qualcosa che in modo automatico attiva nel nostro cervello un impulso che appunto viene colmato dall’esecuzione di una determinata azione. Tuttavia, questa cosa si presenta regolarmente anche nel mondo della programmazione, infatti per poter fare eseguire ad un dispositivo una qualche azione diretta ad effettuare un attività qualsiasi ad essa corrispondente, c’è bisogno di un “evento” che scateni tutto ciò! Per fare un esempio e chiarire meglio le idee, possiamo pensare che nella vita di tutti i giorni uscire con gli amici di solito genera nei vari soggetti del gruppo qualcosa di diverso ma piacevole (si spera!), beh questo accade anche nella programmazione se per esempio si pensa al click del mouse (paragonato all’uscire in compagnia) su un pulsante (paragonato ad ogni soggetto del gruppo di amici), genera un qualche cosa all’interno della finestra che si sta visualizzando (paragonato alla situazione piacevole del momento della giornata in cui il gruppo di amici esce insieme).

Sostanzialmente possiamo definire un evento Javascript come qualcosa che accade all’interno del documento HTML che è il nostro contesto. Nella maggior parte dei casi a scatenare l’evento è un comportamento dell’utente (ad esempio un click su un dato elemento della pagina) altre volte, invece, è una situazione contingente che prescinde da una qualsivoglia azione dell’utente (come ad esempio il caricamento della pagina). Tuttavia Javascript supporta moltissimi eventi che, con l’evolversi del linguaggio, sono andati via via arricchendosi. In questa lezione vedremo gli eventi principali e più utilizzati e, soprattutto, vedremo come utilizzarli al fine di indirizzare il comportamento dei nostri script.

La sintassi di un evento Javascript

Un evento si richiama direttamente all’interno dell’elemento HTML che lo riguarda, incorporando un attributo nel codice dell’elemento stesso, quella che segue è la sintassi:

<elemento attributoEvento="istruzione Javascript">

Vediamo di seguito un esempio pratico, implementando l’attributo onClick su un pulsante:

<input type="button" value="Invia" onclick="alert('Hai cliccato!')">

Dato che l’HTML non è un linguaggio case-sensitive (cioè sensibile alle maiuscole e alle minuscole) è indifferente scrivere onClick, onclick oppure ONCLICK, ma è necessario specificare i parametri (ad esempio il nome della funzione) con le giuste maiuscole e minuscole all’interno di un evento (questo perché la funzione legata all’evento è gestita da Javascript, il quale invece è case-sensitive).

Gli eventi principali di Javascript

  • Eventi del tag <body>: due eventi molto utilizzati in associazione al corpo della pagina sono onload e onunload attraverso i quali si intercetta, rispettivamente, l’apertura e la chiusura della pagina, eccone l’esempio<body onload="alert('Benvenuto!');"><body onunload="alert('Torna a trovarci!');">

Da segnalare che l’evento onload può essere efficacemente applicato anche al tag <img> per identificare il momento in cui la data immagine viene effettivamente scaricata dal browser. Altri eventi associabili al corpo della pagina sono onresize e onscroll che servono, rispettivamente, ad intercettare il ridimensionamento della finestra e lo scrolling al suo interno. Quest’ultimo evento, oltre che al tag <body>, può essere associato anche ad altri elementi della pagina come, ad esempio, un DIV con l’overflow:scroll.

  • Eventi legati al mouse: l’attività del mouse è, solitamente, uno dei fattori più rilevanti all’interno di una buona parte delle applicazioni web. Un click su un elemento o il passaggio del cursore in una determinata porzione della pagina, infatti, sono tra gli eventi più comunemente utilizzati. Vediamo i principali eventi che rientrano in questa categoria:
    • onclick – click col tasto sinistro del mouse;
    • ondblclick – doppio click col tasto sinistro del mouse;
    • oncontextmenu – click col tasto destro del mouse;
    • onmouseover – ingresso del mouse su un dato elemento;
    • onmouseout – uscita del mouse da un dato elemento;
    • onmousemove – il cursore del mouse si sta muovendo sopra un dato elemento;

Questi eventi possono essere associati ad una molteplicità di tag HTML come, ad esempio, immagini, div, paragrafi, bottoni, ecc. Vediamo di seguito alcuni esempi:

<img src="foto.jpg" onclick="alert('Hai cliccato la foto!')"> <img src="foto.jpg" ondblclick="alert('Hai fatto doppio click sulla foto!')"> <img src="foto.jpg" onmouseover="alert('Sei passato col mouse sulla foto!')"> <img src="foto.jpg" onmouseout="alert('Hai spostato il mouse fuori dalla foto!')">

  • Eventi legati alla tastiera: Un altra serie importante di eventi è scatenata dalla pressione, da parte degli utenti, dei tasti della tastiera del computer. Gli eventi rilevanti sono tre:
    • onkeypress – generica pressione di un tasto;
    • onkeydown – l’evento si scatena mentre l’utente sta premendo un tasto;
    • onkeyup – l’evento si scatena quando l’utente rilascia un tasto che ha premuto;

Vediamo un esempio:

<input type="text" onkeydown="alert('hai premuto un tasto!')">

  • Eventi legati ai form:  Una altra fitta serie di eventi Javascript è quella che riguarda i form ed i loro elementi. I due eventi che riguardano il tag <form> sono onsubmit e onreset utilizzati, rispettivamente, per intercettare l’invio ed il reset di un modulo HTML. Ecco i due esempi:

<form onsubmit="alert('Hai inviato il modulo!')">

<form onreset="alert('Hai cancellato il modulo!')">

  • Gli eventi che riguardano i singoli elementi dei form (input, textarea, select, ecc.) sono, invece, molteplici. I più utilizzati sono:
    • onfocus – l’elemento viene selezionato (e quindi attivato);
    • onblur – l’elemento perde il focus (e quindi disattivato);
    • onchange – l’elemento viene modificato nel contenuto;

Per fare un esempio: un campo input acquista il focus quando ci si clicca sopra per iniziare a scriverci dentro, viceversa lo perde quando si clicca su un altro elemento. Per quanto riguarda l’evento change questo è tipico delle selectbox, dei campi input e delle textarea e si verifica quando, a seguito dell’azione dell’utente, si ha un cambiamento del loro contenuto.

Altri eventi generali

Oltre a quelli menzionati, Javascript supporta molteplici altri eventi legati, ad esempio, al trascinamento di un elemento draggable o alla riproduzione di elementi multimediali. In questa sede, tuttavia, non ritengo opportuno affrontare tematiche ulteriori a quelle “di base” e pertanto rinvio il lettore a futuri ed ulteriori approfondimenti.

Detto ciò, direi che anche quest’altra lezione sul corso di programmazione base Javascript termina qui, mi auguro di essere stato abbastanza chiaro anche in questa lezione, per qualsiasi chiarimento o informazione generale potete contattarmi attraverso il modulo della pagina contatti, come sanno già molti utenti che mi seguono. Infine vi auguro un buon proseguimento qui su WorldTecno, io vi rimando al prossimo articolo, ciao! 😉

Articoli correlati

Boostrap

Corso Bootstrap – Sesta Lezione.

Ed eccoci qui di nuovo, con la sesta lezione del corso bootstrap! Che come ricordiamo sempre è un corso realizzato grazie ad una collaborazione nata tra Falco96 e WorldTecno. Questa sarà una lezione veramente piena Leggi tutto&ellip;

Corsi

L’oggetto “window” del Javascript.

Ciao! In questa lezione andiamo a conoscere l’oggetto window. E’ l’oggetto principale utilizzato nel Javascript ed è rappresentato dall’intera “finestra” del browser. Se la finestra è composta da una pluralità di “frames” (cioè se ad Leggi tutto&ellip;

Boostrap

Corso Bootstrap: Quarta Lezione.

Dopo la scorsa lezione di Bootstrap, oggi siamo qui per proseguire con voi il percorso di questo corso con un’altra nuova lezione arrivando a bene a 4 lezioni totali affrontate fino ad ora. Inoltre come Leggi tutto&ellip;

%d blogger hanno fatto clic su Mi Piace per questo: