Trascrizione: (click per espandere)

salve a tutti in questo video parlerò del
BOM ovvero browser object model abbiamo
già visto nella sezione di video
precedente che cos'era il dom
il dom era il documento caricato nella
nostra pagina
il bom è tutta la finestra del browser
compresa la barra degli indirizzi
andiamo a vedere intanto come si viene
rappresentato il nostro bom il bom è
rappresentato dall'oggetto window
quindi adesso vi faccio vedere l'output
di window
come vedete window a tantissime
proprietà tra cui anche la proprietà
document che rappresenta il nostro dom
quindi si può dire che il dom è una
proprietà del nostro bom
infatti noi normalmente non si fa perché
non è obbligatorio farlo però si può
scrivere document come abbiamo sempre
visto il getelementbyid si può
scrivere anche in questa maniera
anticipando il document dal nome
dell'oggetto window
però essendo sottinteso che quando si
parla di
document ci si riferisce
all'oggeto window non è obbligatorio
scriverlo inoltre bisogna anche dire che
quando io dichiaro una nuova
variabile e per esempio stringa così non
è propriamente una semplice variabile
sto creando una proprietà dell'oggetto
window e quando io crea una nuova
funzione faccio nuova come in questo
caso non sto creando propriamente una
semplice funzione sto creando un metodo
dell'oggetto window
andiamo a vedere alcune interessanti
proprietà dell'oggetto window che
possono essere usate ad esempio se io
voglio sapere la le misure della
finestra del browser del nostro utente
come faccio allora andiamo con sul log
window.innerwidth questa per la
larghezza e andiamo a vedere l'altezza
come vedete queste sono le misure della
mia finestra questa finestra qui se io
adesso allargo la finestra e
ricarico la pagina
come vedete la larghezza è cambiata ecco
qua cambia in base a questa è la misura
le misure della finestra del browser
posso usare l'oggetto window per aprire
altre finestre nel nostro browser
ad esempio se io creo una funzione qui e
la chiamo function apri
scrivo window e uso il metodo open il metodo open accetta parecchi
parametri ve ne faccio vedere un paio
allora per esempio voglio aprire un
altro file che già creato qui che si
chiama video7 trattino 1 bis
allora scrivo il nome del file video 7 trattino 1 bis
punto html poi voglio aprire in
un'altra finestra quindi metto _blanc e
poi voglio aprire la finestra senza
la status bar quindi metto status no
e la finestra la voglio grande 200 pixel
e alta 200 pixel
ok adesso io voglio invocare questo
questa funzione con il mio evento
onmouseover allora abbiamo detto
apri si chiama la funzione
ecco qui adesso se io ricarico la pagina
quando posso sopra il div
mi si apre una nuova finestra di 200
pixel per 200 pixel e senza status bar
come vedete qui ho la status bar qui non
c'è la status bar
adesso possiamo aggiungerci nel nostro
file che si apre una funzione per
chiudere la finestra function chiudi che
come potete immaginare sarà window.close
non ci sono argomenti da scrivere
e la possiamo mettere dentro al bottone
con un evento onclick
chiudi ecco qui
per fare anche una cosa un po più
simpatica posso creare una nuova
funzione resize la chiamo e
document.getelementbyid di uso il titolo
innerhtml e metto nuove misure
allora abbiamo detto window.innerwidth
e window.innerheight è questa qui l'attacco a
un nuovo evento che si chiama
onresize e metto la mia funzione resize
ecco qui adesso ricarica richiamo la
pagina e vediamo cosa succede allora
intanto io ho aperto la mia nuova
finestra c'è il bottone click nel
momento in cui io vado a trascinare la
finestra
come vedete mi vengono stampate le
misure della finestra e quando schiaccia
cliccami chiude la finestra o che altro
possiamo anche vedere
visualizzare le misure dello schermo
del nostro utente come facciamo console
log e in questo caso l'oggetto screen
perché per schermo e si usa width e
stessa cosa per l'altezza e posso anche
vedere la profondità di colore dello
schermo color come vedete il mio schermo
è 1440 pixel di larghezza 900 pixel di
altezza e ho 24 di profondità
ci sono tantissimi altri metodi e
proprietà che potete
utilizzare sia per l'oggetto window
che per l'oggetto screen
vi metto dei link in descrizione dateci
un'occhiata giusto per avere un'idea di
quello che si può fare comunque
normalmente queste sono le cose più
utilizzate avere la larghezza della
finestra per fare poi magari qualcosa responsive in base alla larghezza
dispositivi mobili computer portatili o
desktop oppure avere la larghezza dello
schermo con questo è tutto ci sentiamo
la prossima ciao