Il Browser come ambiente, specifiche

Il linguaggio JavaScript è stato inizialmente creato per i browser. Da allora, si è evoluto fino a diventare un linguaggio adatto a molte piattaforme e differenti usi.

La piattaforma di utilizzo può essere un browser, un web-server, una lavatrice o un qualunque altro tipo di host. Ognuno di essi fornisce delle funzionalità specifiche alla piattaforma stessa. Secondo la specifica JavaScript questa è la definizione di ambiente host

Un ambiente host, oltre alle funzionalità core del linguaggio, fornisce oggetti e funzioni specifiche della piattaforma. I browser web, ad esempio, permettono di interagire con le pagine web, mentre Node.JS fornisce funzionalità dedicate al server e così via.

Di seguito una panoramica di cosa succede quando JavaScript viene eseguito nel browser:

C’è un oggetto “padre” chiamato window che ha due ruoli:

1. Il primo è quello di essere un oggetto globale per JavaScript, come descritto nel capitolo Oggetto globale.
2. Il secondo è quello di rappresentare “la finestra del browser” e fornire metodi per controllarla.

In questo caso lo utilizziamo come oggetto globale:

function sayHi() {
  alert("Hello");
}

// le funzioni globali sono metodi dell'oggetto globale:
window.sayHi();

E qui invece come finestra del browser, vogliamo visualizzarne l’altezza:

alert(window.innerHeight); // altezza interna della finestra

Ci sono molte altre funzionalità dell’oggetto window, ma le vedremo più avanti.

DOM (Document Object Model)

L’oggetto document dà accesso al contenuto della pagina e ci permette di cambiare o creare qualunque cosa all’interno della stessa.

Ad esempio:

// cambiamo il colore di background a red
document.body.style.background = "red";

// lo cambiamo nuovamente dopo 1 secondo-
setTimeout(() => document.body.style.background = "", 1000);

In questo caso abbiamo usato document.body.style, ma c’è molto di più. Proprietà e metodi sono descritti all’interno della specifica DOM Living Standard.

BOM (parte della specifica HTML)

Il Browser Object Model (BOM) rappresenta gli oggetti aggiuntivi forniti dal browser (ambiente host) per interagire con qualunque cosa a eccezione del documento.

Per esempio:

• L’oggetto navigator fornisce informazioni riguardo il browser e il sistema operativo. Ci sono molte proprietà a disposizione, ma quelle largamente conosciute sono: navigator.userAgent – informazioni riguardo il browser corrente, e navigator.platform – informazioni sulla piattaforma (può essere utile differenziare Windows/Linux/Mac etc).
• L’oggetto location permette di leggere l’URL corrente e reindirizzare il browser verso un altro URL.

Ecco come possiamo usare l’oggetto location:

alert(location.href); // shows current URL
if (confirm("Go to Wikipedia?")) {
  location.href = "https://wikipedia.org"; // redirect the browser to another URL
}

Le funzioni alert/confirm/prompt fanno anch’esse parte del BOM: non sono direttamente correlate con il documento, ma rappresentano dei semplici metodi del browser per interagire con l’utente.

Riepilogo

Ricapitolando gli standard, abbiamo:

Specifica DOM: Descrive la struttura del documento, sua manipolazione ed eventi, vedi https://dom.spec.whatwg.org.

Specifica CSSOM: Descrive i fogli e le regole di stile, le loro manipolazioni e il loro legame con i documenti, vedi https://www.w3.org/TR/cssom-1/.

Specifica HTML: Descrive il linguaggio HTML language (e.g. tags) e il BOM (browser object model) – varie funzioni del browser: setTimeout, alert, location e così via, vedi https://html.spec.whatwg.org. Prende la specifica del DOM e l’arricchisce di ulteriori proprietà e metodi.

Per favore prendi nota dei link indicati in precedenza perché c’è talmente tanto da imparare che è impossibile trattare e ricordare ogni argomento.

Quando avrai voglia di informarti su una proprietà o un metodo, il manuale Mozilla https://developer.mozilla.org/en-US/search è sicuramente una buona risorsa, ma leggere la corrispondente specifica potrebbe essere addirittura meglio: è più complessa e lunga da leggere, ma consoliderà e completerà le tue conoscenze.