1. Introduzione allo Scripting Lato Client e al DOM
Lo scripting lato client si riferisce all'esecuzione di codice JavaScript direttamente all'interno del browser dell'utente. Il browser traduce la pagina HTML in un modello a oggetti gerarchico chiamato DOM (Document Object Model), consentendo agli script di modificare dinamicamente struttura, contenuti e stili in tempo reale senza ricaricare la pagina.
/* Esempio di manipolazione del DOM in JavaScript */
const titolo = document.getElementById('titolo-principale');
titolo.textContent = 'Benvenuto in NEXUS didattica';
titolo.style.color = '#ea580c';
2. Metodi di Selezione e Gestione degli Eventi
Per interagire con gli elementi di una pagina web, JavaScript mette a disposizione selettori avanzati e gestori di eventi:
| Metodo / Proprietà | Sintassi di Esempio | Descrizione e Funzione |
|---|---|---|
getElementById() |
document.getElementById('id') |
Seleziona un singolo elemento univoco in base al suo attributo id. |
querySelector() |
document.querySelector('.classe') |
Restituisce il primo elemento che corrisponde a un selettore CSS specificato. |
addEventListener() |
elemento.addEventListener('click', fn) |
Associa un ascoltatore a uno specifico evento (es. click, input, submit). |
createElement() |
document.createElement('div') |
Genera dinamicamente un nuovo nodo HTML da inserire successivamente nel documento. |
3. Simulatore Interattivo: Console di Scripting Client
Seleziona un'operazione DOM per testare l'interazione dinamica dello script in tempo reale.
js-client@nexus-core:~#
DOM Inspector
> Seleziona un'operazione e premi il pulsante per visualizzare l'output dello script.