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!
