JavaScript Window Object

JavaScript Window è un’interfaccia globale (tipo di oggetto) che viene utilizzata per controllare il ciclo di vita della finestra del browser ed eseguire varie operazioni su di essa.

Una variabile globale window, che rappresenta la finestra corrente del browser in cui il codice è in esecuzione, è disponibile nel nostro codice JavaScript e vi si può accedere direttamente utilizzando window letterale.

Presenta una finestra contenente una pagina web che a sua volta è rappresentata dall’oggetto document. Una finestra può essere una nuova finestra, una nuova scheda, un insieme di frame o un singolo frame creato con JavaScript.

In caso di browser multischeda, un oggetto finestra rappresenta una singola scheda, ma alcune delle sue proprietà come innerHeight, innerWidth e metodi come resizeTo() influenzeranno l’intera finestra del browser.

Ogni volta che si apre una nuova finestra o scheda, viene creato automaticamente un oggetto finestra che rappresenta quella finestra/tab.

Le proprietà di un oggetto window sono usate per recuperare le informazioni sulla finestra attualmente aperta, mentre i suoi metodi sono usati per eseguire compiti specifici come aprire, massimizzare, minimizzare la finestra, ecc.

Per capire l’oggetto window, usiamolo per eseguire alcune operazioni e vedere come funziona.

Usare l’oggetto window JavaScript

Usiamo l’oggetto window JavaScript per creare una nuova finestra, usando il metodo open(). Questo metodo crea una nuova finestra e restituisce un oggetto che può essere ulteriormente usato per gestire quella finestra.

Nel codice sopra, abbiamo usato l’oggetto window della finestra esistente per creare una nuova finestra usando il metodo open(). Nel metodo open() possiamo fornire l’URL da aprire nella nuova finestra (possiamo anche tenerlo vuoto), il nome della finestra, la larghezza e l’altezza della finestra da creare.

Di seguito la sintassi per il metodo open() dell’oggetto window:

let newWindow = window.open(url, windowName, );

Possiamo fornire tutte le proprietà che vogliamo, mentre creiamo una nuova finestra.

Quando il metodo open() viene eseguito, restituisce il riferimento dell’oggetto window per la nuova finestra creata, che si può assegnare a una variabile, come abbiamo fatto nel codice sopra. Abbiamo assegnato il valore restituito dal metodo window.open() alla variabile win.

Abbiamo usato la variabile win per accedere alla nuova finestra, come ottenere il nome della finestra, ottenere la posizione della finestra che ha aperto la nuova finestra ecc.

Ci sono molte proprietà e metodi per l’oggetto window, che abbiamo elencato qui sotto.

Trovare le dimensioni di una finestra

Possiamo ottenere l’altezza e la larghezza di una finestra usando le proprietà integrate nell’oggetto window.

Possiamo anche accedere all’oggetto documento usando un oggetto window (window.document) che ci dà accesso al documento HTML, quindi possiamo aggiungere nuovi elementi HTML, o scrivere qualsiasi contenuto al documento, come abbiamo fatto nell’esempio sopra.

Proprietà dell’oggetto finestra in JavaScript

Le proprietà dell’oggetto finestra si riferiscono alle variabili create all’interno dell’oggetto windows.

In JavaScript, tutti i dati disponibili sono collegati all’oggetto finestra come proprietà.

Possiamo accedere alle proprietà dell’oggetto finestra come: window.propertyname dove propertyname è il nome della proprietà.

Di seguito è riportata una tabella delle proprietà più popolari dell’oggetto finestra:

Proprietà	Descrizione
chiuso	riforma un valore booleano che specifica se una finestra è stata chiusa o no
documento	specifica un oggetto documento nella finestra.
history	specifica un oggetto storia per la finestra.
frames	specifica un array di tutti i frame nella finestra corrente
defaultStatus	specifica il messaggio predefinito che deve essere visualizzato nella barra di stato di Window.
innerHeight	specifica l’altezza interna dell’area di contenuto della finestra.
innerWidth	specifica la larghezza interna dell’area di contenuto della finestra.
length	specifica il numero di frame contenuti nella finestra.
location	specifica l’oggetto location per window
name	specifica il nome della window
top	specifica il riferimento alla finestra del browser più in alto.
self	restituisce il riferimento al frame o alla finestra attiva corrente.
parent	restituisce il frame o la finestra padre della finestra corrente.
status	specifica il messaggio che viene visualizzato nella barra di stato della finestra quando viene eseguita un’attività sulla finestra.
screenleft	specifica la coordinata x della finestra relativa allo schermo del monitor dell’utente
screenTop	Specifica la coordinata y della finestra relativa allo schermo del monitor dell’utente
screenX	specifica la coordinata x della finestra rispetto allo schermo del monitor di un utente
screenY	Specifica la coordinata y della finestra rispetto allo schermo del monitor di un utente

Facciamo un esempio per vedere alcune di queste proprietà in azione:

Nell’esempio qui sopra, abbiamo creato una nuova finestra, solo per farvi familiarizzare con la creazione di nuove finestre e anche, per farvi capire che quando creiamo una nuova finestra, allora la finestra corrente ha un oggetto finestra diverso e la nuova finestra avrà un oggetto finestra separato.

Abbiamo poi provato ad accedere ad alcune proprietà della nuova finestra creata.

TASK: Provate qualche altra proprietà di windows nel parco giochi del codice precedente per fare pratica e capire come funzionano le proprietà di window.

Metodi dell’oggetto window di JavaScript

I metodi dell’oggetto window si riferiscono alle funzioni create all’interno dell’oggetto window, che possono essere usate per eseguire varie azioni sulla finestra del browser, come ad esempio come visualizzare un messaggio o ricevere input dall’utente.

Di seguito abbiamo elencato alcuni dei metodi dell’oggetto window più comunemente usati:

Metodo	Descrizione
alert()	specifica un metodo che visualizza una casella di avviso con un messaggio e un pulsante OK.
blur()	specifica un metodo che rimuove il focus dalla finestra corrente.
clearInterval()	specifica un metodo che cancella il timer, che è impostato usando il metodo setInterval().
close()	specifica un metodo che chiude la finestra corrente.
confirm()	specifica un metodo che visualizza una finestra di dialogo con un messaggio e due pulsanti OK e Cancel
focus()	specifica un metodo che imposta il focus sulla finestra corrente.
open()	specifica un metodo che apre una nuova finestra del browser
moveTo()	specifica un metodo che sposta una finestra in una posizione specificata
moveBy()	specifica un metodo che sposta una finestra rispetto alla sua posizione corrente.
prompt()	specifica un metodo che richiede input.
print()	specifica un metodo che invia un comando di stampa per stampare il contenuto della finestra corrente.
setTimeout()	specifica un metodo che valuta un’espressione dopo un numero specificato di millisecondi.
setInterval()	specifica un metodo che valuta un’espressione a intervalli di tempo specificati (in millisecondi)
resizeBy()	specifica la quantità di cui la finestra sarà ridimensionata
resizeTo()	usato per ridimensionare dinamicamente la finestra
scroll()	scorre la finestra in un punto particolare del documento
scrollBy()	scorre la finestra del valore dato
stop()	questo metodo ferma il caricamento della finestra

Facciamo un esempio e vediamo alcuni dei metodi precedenti in azione:

Nell’esempio precedente, abbiamo usato alcuni metodi per le finestre, potete provare altri metodi. Nel prossimo tutorial impareremo a conoscere l’oggetto History, che è una proprietà dell’oggetto window.