Programmazione lato client.
La programmazione lato client è quella che viene eseguita direttamente nel browser dell’utente (Chrome, Firefox, Edge ecc.), senza coinvolgere il server. Serve per:
- rendere le pagine interattive
- gestire azioni dell’utente
- modificare contenuti in tempo reale
JavaScript e gestione degli eventi.
JavaScript è il linguaggio usato per controllare il comportamento dinamico delle pagine web. Uno dei suoi compiti principali è la gestione degli eventi.
Cosa sono gli eventi.
Gli eventi sono azioni che avvengono nella pagina web e che possono essere generate:
dall’utente
- clic del mouse
- pressione di un tasto
- compilazione di un modulo
- movimento del mouse
dal browser
- caricamento della pagina
- ridimensionamento della finestra
- scorrimento della pagina
Gestione degli eventi (Event Handling).
JavaScript permette di collegare una funzione a un evento.
Quando l’evento si verifica, la funzione viene eseguita. Questo meccanismo si chiama programmazione guidata dagli eventi.
Esempio semplice.
HTML
<button onclick=”saluto()”>Clicca qui</button>
JavaScript
function saluto() {
alert(“Benvenuto!”);
}
Quando l’utente clicca il pulsante, compare un messaggio.
Eventi più comuni.
Eventi del mouse
- click
- dblclick
- mouseover
- mouseout
Eventi della tastiera
- keydown
- keyup
- keypress
Eventi dei moduli
- submit
- change
- focus
- blur
Eventi della pagina
- load
- resize
- scroll
Il DOM (Document Object Model).
Per gestire gli eventi, JavaScript utilizza il DOM, cioè la rappresentazione della pagina web come una struttura ad albero. Il DOM permette di:
- modificare testo e immagini
- aggiungere o eliminare elementi
- reagire alle azioni dell’utente
Esempio:
document.getElementById(“titolo”).innerHTML = “Nuovo titolo”;
Vantaggi della gestione eventi lato client.
– Maggiore velocità (non serve contattare il server)
– Maggiore interattività
– Migliore esperienza utente
– Riduzione del traffico di rete
Riassunto:
- Il linguaggio lato client principale è JavaScript
- Serve per rendere le pagine web interattive
- Gestisce gli eventi generati da utente o browser
- Utilizza il DOM per modificare la pagina
- È alla base della programmazione guidata dagli eventi