Ambiente Browser JavaScript e Specifiche
Comprendi l'ambiente browser JavaScript: l'oggetto globale window, il DOM (document), il BOM (navigator, location, history, screen) e le relative specifiche, con esempi eseguibili.
JavaScript è uno strumento molto importante utilizzato per rendere i siti web interattivi. Questa guida ti aiuterà a capire come JavaScript funziona in un browser web, trattando argomenti importanti come il Document Object Model (DOM), il Browser Object Model (BOM) e come possiamo manipolarli tramite JavaScript. Mostreremo anche alcuni semplici esempi di codice per aiutarti a iniziare.
Il nucleo JavaScript e l'ambiente host
Il linguaggio JavaScript in sé — la parte definita dalla specifica ECMAScript — conosce solo cose come numeri, stringhe, object, array, funzioni, Math, JSON e così via. Non ha alcun concetto di pagina web, pulsante o URL.
Queste capacità provengono dall'ambiente host: il programma che esegue il tuo codice. In un browser web, quell'ambiente fornisce a JavaScript un ampio set di oggetti aggiuntivi (il DOM e il BOM) in modo che i tuoi script possano leggere e modificare la pagina e comunicare con il browser. Un host diverso, come Node.js, fornisce un set completamente diverso (file system, server di rete) e non dispone né di document né di window.
Quindi uno script browser è davvero composto da due livelli che lavorano insieme:
- Nucleo ECMAScript — le funzionalità del linguaggio disponibili ovunque.
- Oggetti host (browser) —
window,document,navigator,locatione gli altri, forniti dal browser, non dal linguaggio.
window: l'oggetto globale
Nel browser, l'oggetto principale di tutto è window. Svolge due ruoli contemporaneamente:
- Rappresenta la finestra del browser (le sue dimensioni, i tab che apre, gli alert, i timer).
- È l'oggetto globale — ogni variabile globale e funzione globale diventa una proprietà di
window.
Ecco perché tutti questi si riferiscono alla stessa cosa:
Le due grandi famiglie di oggetti che dipendono da window sono il DOM (la pagina) e il BOM (il browser). Il resto di questa guida illustra entrambi.
Cos'è il Document Object Model (DOM)?
Il Document Object Model (DOM) è come una mappa dei contenuti di un sito web. Il browser analizza l'HTML in un albero di oggetti e la radice di quell'albero è l'oggetto document. Ogni tag diventa un nodo che puoi leggere, modificare, aggiungere o rimuovere tramite JavaScript — il che significa che puoi cambiare il contenuto, la struttura e il design del sito web a runtime.
Per un'esplorazione più approfondita e pratica della selezione e modifica dei nodi, consulta manipolazione del DOM.
Esempio: Aggiungere e Modificare Elementi
Ecco come aggiungere una nuova parte a una pagina web e modificarne il contenuto. Come puoi vedere nell'esempio seguente, nel body non c'è alcun paragrafo di testo. Ma il codice JavaScript aggiunge un nuovo tag p all'oggetto document.
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Simple DOM Example</title>
</head>
<body>
<script>
// Make a new part of the page
const paragraph = document.createElement("p");
paragraph.textContent = "Hello, JavaScript!";
// Add the new part to the page
document.body.appendChild(paragraph);
</script>
</body>
</html>Cos'è il Browser Object Model (BOM)?
Il Browser Object Model (BOM) fornisce a JavaScript la capacità di interagire con il browser. Include diversi oggetti che consentono agli script di svolgere funzioni relative al browser stesso, non solo al contenuto della pagina web. Il BOM include anche oggetti standard come history per gestire la navigazione del browser e screen per accedere alle dimensioni del display. Per chiarire subito la distinzione: il DOM si concentra sulla struttura e il contenuto della pagina web, mentre il BOM si concentra sulla finestra del browser stessa.
Componenti del BOM
window
L'oggetto window rappresenta la finestra del browser. Contiene funzioni per controllare il browser, tra cui la lettura delle sue dimensioni e posizione, lo scorrimento, l'impostazione di timer (setTimeout, setInterval) e la visualizzazione di dialoghi (alert, confirm, prompt). Per misurare e scorrere il viewport in modo specifico, consulta dimensioni della finestra e scorrimento.
Ecco come puoi aprire una nuova finestra del browser usando l'oggetto window:
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Open New Window Example</title>
</head>
<body>
<button onclick="openNewWindow()">Click to Open a New Window</button>
<script>
function openNewWindow() {
// Open a new window and specify its properties
var myWindow = window.open("", "MsgWindow", "width=400,height=200");
myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
}
</script>
</body>
</html>Nota: I browser moderni in genere bloccano
window.open()se non viene attivato direttamente da un gesto dell'utente, come un clic.
navigator
L'oggetto navigator contiene informazioni sul browser, come il nome, la versione e le capacità del browser, come il supporto ai cookie. Ecco come usare l'oggetto navigator per verificare se i cookie sono abilitati:
Location
L'oggetto location fornisce informazioni sull'URL corrente e può essere utilizzato per reindirizzare il browser a un indirizzo diverso. Questo esempio mostrerà vari componenti dell'URL (come il protocollo, il nome host e il percorso) sulla pagina web.
history
L'oggetto history consente di spostarsi nella cronologia della sessione dell'utente — le pagine visitate nel tab corrente — senza esporre gli URL effettivi. È ciò che alimenta i pulsanti Indietro e Avanti del browser ed è la base per il routing lato client nelle applicazioni a pagina singola.
screen
L'oggetto screen descrive l'intero display dell'utente (monitor), non la finestra del browser. È utile per determinare quanto spazio è disponibile prima di aprire o posizionare una finestra.
Suggerimento:
screenriporta il display fisico. Per misurare l'area effettivamente utilizzabile dalla tua pagina, leggi invece il viewport diwindow.
Le specifiche dietro l'ambiente browser
Questi oggetti non sono inventati da ciascun browser — sono definiti da standard pubblici affinché il codice si comporti allo stesso modo ovunque:
- ECMAScript (gestito da TC39) — il nucleo del linguaggio JavaScript: sintassi, tipi e built-in come
Array,Object,Math,JSON. - DOM Living Standard (WHATWG) —
documente l'albero dei nodi elemento. - HTML Living Standard (WHATWG) — definisce
window,navigator,location,historye come le pagine HTML eseguono gli script. - CSSOM (W3C) — il modello a oggetti per leggere e modificare gli stili tramite JavaScript.
Quando si dice che una funzionalità è "standard", si intende che compare in una di queste specifiche e i browser l'hanno implementata di conseguenza.
Altri Modi per Usare il DOM
JavaScript consente anche di gestire il contenuto del sito web in modo dinamico con eventi e attributi dei dati.
Esempio: Gestione dei Clic e Utilizzo dei Dati
Ecco come impostare eventi clic e usare gli attributi dei dati:
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
<style>
#first {
background-color: red;
max-width: 100px;
}
</style>
</head>
<body>
<div id="first">Click me!</div>
<script>
document.getElementById('first').addEventListener('click', function () {
alert(`Item clicked.`);
});
</script>
</body>
</html>Questo codice imposta un evento clic per l'elemento div e mostra un messaggio quando viene cliccato. Alcuni eventi attivano anche il comportamento predefinito del browser (un link naviga, un form viene inviato) — per imparare come controllarlo o annullarlo, consulta azioni predefinite del browser.
Conclusione
Capire come JavaScript interagisce con il browser ti permette di costruire siti web reattivi e guidati dagli utenti. Padroneggiando il DOM e il BOM insieme alle moderne best practice, puoi creare applicazioni web affidabili e coinvolgenti.