CONTATTACI

Guide per aspiranti programmatori

Lezione 21 / 23

Events: gli eventi in Javascript

Alcune informazioni aggiuntive sul linguaggio JavaScript ti saranno utili per approfondire le tue conoscenze. In particolare, prova ad entrare di più nel linguaggio JavaScript – ma anche in generale nel mondo della programmazione informatica – vedendo gli eventi e i canvas.

Events: gli eventi in JavaScript

Che cos’è un evento? In JavaScript, gli eventi sono un elemento chiave per l’interazione con gli utenti e la manipolazione dinamica dei contenuti HTML.
L’interazione di JavaScript con il
linguaggio HTML viene gestita tramite eventi, ovvero tutto ciò che succede quando l’utente o il browser manipola una pagina. Anche il caricamento di una pagina web è un evento; cliccare su un pulsante è un evento; muovere il mouse è un evento.

 

Js document ready

Il concetto di “document ready” in JavaScript si riferisce all’evento che viene scatenato quando il documento HTML è completamente caricato nel browser e pronto per l’interazione degli script JavaScript. Questo evento è cruciale quando si lavora con script complessi che dipendono dall’esistenza e dall’accessibilità degli elementi del DOM.

Quando l’evento “document ready” si verifica, significa che tutto il contenuto HTML, inclusi gli elementi, i testi e le immagini, è stato completamente analizzato dal browser e reso disponibile per l’utilizzo tramite script. Ciò assicura che gli script JavaScript abbiano accesso agli elementi specifici del DOM a cui devono interagire o manipolare.

La gestione dell’evento “document ready” è fondamentale per garantire che il codice JavaScript venga eseguito al momento opportuno, evitando così errori e garantendo la corretta interazione con l’utente. Esistono diverse modalità per ascoltare l’evento “document ready”, come utilizzare la funzione `DOMContentLoaded` o metodi specifici di librerie come jQuery.

Ascoltare l’evento “document ready” consente di eseguire azioni specifiche come l’inizializzazione di componenti, il caricamento di dati, la configurazione di eventi di click o la manipolazione dinamica del contenuto del DOM. In questo modo, si assicura che il codice JavaScript venga eseguito solo quando tutte le risorse necessarie sono state caricate e il documento è completamente pronto per l’interazione con l’utente.

In conclusione, l’evento “document ready” in JavaScript è fondamentale per sincronizzare l’esecuzione degli script con il completo caricamento del documento HTML. Utilizzando correttamente l’evento “document ready”, è possibile creare un’esperienza utente fluida e prevenire errori legati all’accesso anticipato agli elementi del DOM.

 

Js AddEventListener

Per rilevare gli eventi e reagire nel modo che desideri ci si affida ai gestori di eventi. JavaScript usa il metodo addEventListener.

Ogni evento ha un tipo che lo identifica. Una lista di eventi è disponibile qui: alcuni dei tipi sono relativi ad Animazione, Asynchronous data fetching, clipboard, controller (wheel, mouse etc), database e DOM. La maggior parte degli eventi viene chiamata su uno specifico elemento DOM e, quindi, si propaga agli antenati di quell’elemento, consentendo ai gestori associati a quegli elementi di gestirli.

Per esempio, la pressione di un tasto attiva gli eventi “keydown” e “keyup“. Più complessa la gestione del mouse: lo spostamento del mouse attiva eventi “mousemove“, il pulsante attiva il “click” e i tasti sono “mousedown” e “mouseup“. La rotella lascia tracce di scorrimento in “scroll“. 

Una cosa importante è l’area della pagina sulla quale si manifesta l’attenzione dell’utente, attraverso la posizione del mouse o la pressione di tasti: si prende focus quando si è dentro la finestra, si perde dettaglio (blur) quando se ne esce, si seleziona l’azione (select).
Proviamo a scrivere del codice che scrive la posizione del mouse quando si clicca il tasto sinistro.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE-edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
   </head>
   <body>
      <h1>Guida AULAB su JavaScript</h1>
      <div id="output"></div>
      <script>
         document.addEventListener("mousemove", function(event) {
            var x = event.clientX;
            var y = event.clientY;
            document.addEventListener("mousedown", function(event) {
               if (event.button === 0) {
                  document.getElementById("output").innerHTML = "La posizione X è " + x + "<br>" + "La posizione Y è " + y;
               }
            });
         });
      </script>
   </body>
</html>

Il programma ha due “ascoltatori di eventi”: uno per la posizione (mousemove) e uno per il clic (mousedown).

L’ascoltatore dell’evento posizione viene attivato ogni volta che il mouse viene mosso sulla pagina web. Legge la posizione X e Y del cursore dalle proprietà event.clientX e event.clientY e ne assegna i valori alle variabili x e y.

L’ascoltatore dell’evento clic viene attivato ogni volta che si clicca qualcosa sul mouse. Si usa, qui, la verifica con if, che vedrai più avanti insieme agli altri costrutti di questo tipo.

La proprietà event.button permette di verificare se il bottone cliccato è il bottone sinistro: in questo caso, si modificano le coordinate da pubblicare sulla pagina (innerHTML).

Esistono molti parametri e, quindi, diversi modi di sviluppare questo codice, a seconda delle esigenze. L’esempio soprastante mostra come leggere la posizione assoluta del mouse sullo schermo: provate a valutare alcuni punti ridimensionando e spostando la finestra del browser.

Risultati leggermente diversi si ottengono, ad esempio, sostituendo clientX, clientY con screenX, screenY: provare per credere!

 

 

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.