Categorie
Javascript Programmazione

{JS} Browser API

Cos’è l’API Browser?

Finora abbiamo analizzato le caratteristiche essenziali del linguaggio di programmazione JavaScript, senza tener conto degli ambiti in cui possiamo utilizzarlo.
Tipicamente i nostri progetti sono eseguiti all’interno di un Browser, che altro non sono che sistemi-ospitanti delle nostre app e con i quali è possibile interagire.
E’ possibile interagire con essi tramite l’utilizzo di API native, built-in, che ci forniscono, mediante insiemi di oggetti, un interfaccia-di-comunicazione.

L’oggetto principale per l’interazione con il browser è window: esso rappresenta una finestra che contiene un documento HTML.

L’oggetto window come contesto globale

L’oggetto window, oltre ad identificare il browser, rappresenta anche il contesto di esecuzione globale per JavaScript.

Rappresenta dove vengono inizializzate e definite variabile, costanti, funzioni ecc. globali.

Esso è inoltre l’oggetto associato alla parola chiave this quando non esiste un contesto specifico.

function somma(a, b) {
	return a + b;
}

console.log(somma(3, 5));
//oppure 
console.log(window.somma(3, 5));
//oppure
console.log(this.somma(3, 5));

L’oggetto window

L’oggetto window ha a disposizione numerose proprietà e metodi per la gestione del browser.

Proprietà

L’oggetto windows ha a disposizione alcune proprietà che ci consentono di ottenere informazioni su diversi aspetti della configurazione-corrente del browser.

window.innerWidthlarghezza interne dell’area occupata dalla finestra espresse in pixel
window.innerHeightaltezza interne dell’area occupata dalla finestra espresse in pixel
window.screen.widthlarghezza dello schermo del dispositivo corrente
window.screen.heightaltezza dello schermo del dispositivo corrente
window.screen.availWidthaltezza dello schermo disponibile del dispositivo corrente
window.screen.availHeightaltezza dello schermo disponibile del dispositivo corrente
window.screen.colorDepth
window.screen.pixelDepth
numero di bit utilizzati per rappresentare il colore di un pixel
windows.frame.leghtLa proprietà frames è un array di oggetti window che rappresentano i frame contenuti nella pagina corrente

windows.frame.leght

<frame>

I frame suddividono lo schermo del browser in due o più parti. In ogni area viene visualizzato il contenuto di un documento Html. Pertanto, grazie a questo tag, due o più pagine web sono visibili contemporaneamente sullo schermo del browser.

<frameset rows="100%">
 <frame src="header.html">
</frameset>

<frameset cols="20%, 60%, 20%";>
<frame src="sidebar-left.html">
<frame src="main.html">
<frame src="sidebar-right.html">
</frameset>

<frameset rows="100%">
 <frame src="footer.html">
</frameset>

<noframes>Il tuo browser non visualizza i frames</noframes>

La proprietà window.frame.leght restituisce il numero di frame che compongono una pagina web.

Dal momento che con la presenza dei frame si viene a creare una gerarchia di oggetti window, abbiamo la possibilità di navigare in questa gerarchia tramite le proprietà parent e top: la prima rappresenta l’oggetto genitore della finestra o frame corrente, mentre la seconda indica la finestra radice della gerarchia.

Metodi

Gestione dei popup del browser

Tramite i seguenti metodi è possibile aprire popup del browser utili per diversi utilizzi.

window.alert();apre popup con messaggio
window.confirm();apre popup con possibilità di conferma/rifiuto e restituisce il valore dell’azione
window.prompt();apre poup con input-test e restituisce il valore inserito
window.open();
window.close();
apre nuova scheda con una scheda-popup
window.alert()

Il seguente metodo apre un semplice messaggio/notifica sul browser.

window.alert("Benvenuto sul sito");
window.confirm()

Il metodo window.confirm() apre un popup con due opzioni, una di accettazione (OK) una di rifiuto (ANNULLA), è restituisce il valore true/false a seconda della scelta effettuata.

window.prompt()

Il metodo window.prompt() fornisce la possibilità di inserire all’utente un valore e restituisce il valore stesso.

window.open()

Il metodo window.open() ci consente di aprire un popup-finestra o una nuova-scheda contenente una nuova risorsa-pagina sono previste diverse opzioni di personalizzazione.

window.open("https:\\www.google.it", "NuovaScheda");

Il metodo prevede come primo paramento l’indirizzo della risorsa da aprire e come secondo paramento il nome-della-finestra da assegnagli, ovvero il nome che viene assegnato all’oggetto window creato.

E’ possibile utilizzare i seguenti nomi-alle-finestre per modificare il comportamento di apertura.

CampoDescrizione
_blankapre una nuova finestra
_parentsostituisce la finestra o il frame genitore della finestra corrente
_selfsostituisce il contenuto della finestra o frame corrente
_topsostituisce il contenuto della radice della gerarchia di oggetti window
window.open("http:\\www.google.it", "_parent");

E’ possibile specificare anche un terzo paramentro che contiene una stringa di opzioni separate da virgola

window.open("http:\\www.google.it", "_blank", "menubar=no,toolbar=no,status=no, height=400,width=600,top=150,left=150");

Le opzioni specificate indicano che la nuova finestra non deve avere la barra dei menu, né la barra degli strumenti, né la barra di stato; vengono poi indicate le dimensioni in pixel e la posizione sullo schermo.

Infine per chiudere una finestra, l’oggetto window mette a disposizione il metodo close().

Gestione dei timer del browser

Esaminiamo un gruppo di metodi dell’oggetto window ci consentono di gestire attività differite nel tempo, sfruttando i timer del client; esse ci consentono di eseguire operazioni temporizzate-asincrone.

Note: tutti i metodi dell'oggetto window possono essere richiamati anche omettendo la propria base, essendo esso stesso riferimento al contesto globale.
MetodoDescrizione
window.setInterval()Esegue una funzione periodicamente in base ad un intervallo di tempo specificato
window.clearInterval()Azzera un timer creato con setInterval()
window.setTimeout()Esegue una funzione dopo un certo numero di millisecondi
window.clearTimeout()Azzera un timer creato con setTimeout()
window.setTimeout()

Il metodo setTimeout() crea un timer che eseguirà la funzione dopo 5000 millisecondi. (cinque secondi).
Quello che otterremo è la visualizzazione della stringa sulla console in maniera temporizzata.
Se volessimo fermare l’esecuzione della funzione prima che venga eseguita possiamo utilizzare il metodo clearTimeout().

var esegui = window.setTimeout(function(){
console.log("Questa stringa è visibile dopo 5 secondi")}, 5000);
window.setInterval()

Per eseguire una funzione ad intervalli regolari facciamo ricorso a setInterval() per fermare il timer invece utilizzeremo clearInterval()

var x=0;
var esegui= window.setInterval(function(){
for(x; x<10000; x++){
console.log('Valore attuale di x: ' + x);
}
},5000);

if(x>10000){
window.clearInterval(esegui);
}

Gestione della navigazione del browser

L’oggetto window del browser ci fornisce anche alcune proprietà e metodi per gestire e controllare la navigazione dell’utente.

  • history, per tenere traccia della navigazione
  • location che ci permette di gestire l’URL corrente

window.history

La proprietà history è un oggetto che tiene traccia delle pagine visitate dall’utente all’interno di una finestra durante una sessione di navigazione. Grazie a questo oggetto possiamo conoscere il numero di pagine visitate dall’utente accedendo alla proprietà length e possiamo andare avanti e indietro nell’elenco delle pagine visitate sfruttando rispettivamente i metodi forward() e back().

window.history.lengthla proprietà fornisce il numero di pagine visitate durante una sessione di navigazione
window.history.back();il metodo torna alla pagina precedente visitata dal visitatore
window.history.forward();il metodo carica la pagina successiva nell’elenco della cronologia deve quindi essere tornato prima indietro con .back()
window.history.go(-n);il metodo consente di scegliere come muoverci in base al valore di length; se lenght è uguale a 3 go(-3) rimarra sulla stessa pagina.

window.location

“location” è un oggetto dell’oggetto window che consente l’accesso a diverse proprietà e metodi relative all’ url corrente.

ProprietàDescrizione
window.location.hrefrestituisce l’href (URL) della pagina corrente
https://www.cinquepuntozero.it/programmazione/js-browser-api/articolo.php?id=123#paragrafo
window.location.protocolrestituisce il protocollo web utilizzato (http: o https:)
https:
window.location.hostnamerestituisce il nome di dominio dell’host web
www.cinquepuntozero.it
window.location.hostrestituisce il nome di dominio dell’host web e relativa porta
www.cinquepuntozero.it:8080
window.location.originrestituisce la serializzazione Unicode dell’origine dell’URL
http://www.cinquepuntozero.it:8080
window.location.portrestituisce la porta del dominio host-web
8080
window.location.pathnamerestituisce il percorso relativo e il nome del file della pagina corrente
/programmazione/js-browser-api/articolo.php
window.location.searchrestituisce la queryString della requestHTTP
?id=123
window.location.hashrestituisce eventuali collegamenti anchor HTML
#paragrafo

L’accesso alle proprietà dell’oggetto location non è però in sola lettura ma è possibile accedervi in scrittura

window.location.href="http:\\www.cinquepuntozero.it\nodejd\";

Sono disponibile anche metodi per la gestione degli url:

MetodoDescrizione
window.location.reload()Il metodo ricarica l’URL corrente, come il pulsante Aggiorna
window.location.replace(url)il metodo sostituisce la risorsa corrente con quella all’URL fornito; differente da assign() in quanto .replace() sostituisce il valore anche nella session-history.
window.location.assign(url)il metodo fa sì che la finestra carichi e visualizzi il documento all’URL specificato; non salva il valore nella session-history.
window.location.toString()il metodo restituisce la versione in stringa comleto di un url; utile quando in un elemento html è presente un “href” con percorso reativo

Informazioni e caratteristiche sul app client browser

Per ottenere informazioni sul browser corrente e su alcune sue impostazioni possiamo utilizzare le porpietà dell’oggetto navigator di window.

windows.navigator

Le proprietà dell’oggetto navigator sono numerose ed è possibile trovare un elenco completo qui

window.navigator.userAgent;Restituisce la stringa dell’agente utente per il browser corrente.
window.navigator.connection;restituisce dettagli sul tipo di connessione es. 4g, adsl ecc.
window.navigator.cookieEnabled;restituisce valore true/false in base all’abilitazione dei cookie
window.navigator.geolocation;Restituisce un 
geolocation oggetto che consente di accedere alla posizione del dispositivo.
window.navigator.language;Restituisce una stringa che rappresenta la lingua preferita dell’utente, in genere la lingua dell’interfaccia utente del browser. 
Il  null valore viene restituito quando questo è sconosciuto.
window.navigator.pdfViewerEnabled;Restituisce 
truese il browser può visualizzare i file PDF in linea durante la navigazione e in 
falsealtro modo.

Esistono all’interno di navigator numerose proprietà anche per i dispositivi mobile.
Un uso abbastanza rinomato è quello che si utilizza per definire se siamo su un dispositivo mobile.

l sistema è molto semplice: basta verificare che la stringa userAgent corrisponda ad uno dei seguenti valori:

  • Android
  • webOS
  • iPhone
  • iPad
  • iPod
  • BlackBerry
  • IEMobile
  • Opera Mini

In JavaScript si può usare il metodo test() nel seguente modo:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // Codice da eseguire nel caso di un dispositivo mobile
  // ...
} else {
  // Codice da eseguire nel caso di un dispositivo tradizionale
  // ...
}

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *