BOM (Browser Object Model)

window

Merk at alle globale variable og funksjoner vi definerer blir attributter og funksjoner i window-objektet. Vi vet at vi kan nå disse uten å kvalifisere dem som window-attributter. Slik er det også med de objektene som er nevnt over. Vi kan f.eks. skrive window.location eller bare location

Hvis du vil ha en komplett liste av alle egenskaper, objekter og metoder i window-objektet slik din nettleser opfatter det kan du kjøre følgende skript:

function visinfo(){
  var S='<table>';
  var win=this;
  for(p in win){
    try{
    S+='<tr><td>'+p+'</td><td>'+win[p]+'</td></tr>';
    }
    catch(E){
    S+='<tr><td>'+p+'</td><td style="color:red">'+E.message+'</td></tr>';
    }
  }
  S+='</table>';
  document.getElementById("visinfo").innerHTML=S;
}

test på en side https://borres.hiof.no/wep/js/bom/showWindow.html

popup

De tre metodene, alert, confirm og prompt, viser alle dialogbokser.

function dboxdemo()
{
   var navn=prompt('hva er navnet ditt ?');
   if (confirm('mener du virkelig dette'))
    alert('hallo ' + navn);
}

Vi kan lage nye vinduer, f.eks. som popup. Følgende enkle funksjon brukes på disse sidene for å poppe opp kodesnutter etc.:

function simplepopup(url,wname,wstyle){
 if(wstyle=='*')
  wstyle='scrollbars=yes,resizable=yes,width=600,height=600,status=0';
 try{
  newwindow=window.open(url, wname, wstyle);
  if (window.focus) {newwindow.focus()}
  }
 catch(E){
  alert('If you have blocked pop-ups on this page\n'+
    'Press ctrl-key when clicking');
 }
}
    

Den kan kalles f.eks. slik: simplepopup('tester1.html','mypopup','*')

scrolling

Egenskapene pageXOffset og pageYOffset er direkte tilgjengelige fra window. De skal returnere hvor mye vinduet er scrollet. Skal være det samme som scrollX and scrollY. Egenskapene screenX og screenY beskriver vinduets posisjon relativt til skjermen.

function showScroll()
{
    var elt=document.getElementById("scrollprops");
    var S="pageXOffset: "+pageXOffset+
    "<br/>pageYOffset: "+pageYOffset+
    "<br/>scrollX: "+scrollX+
    "<br/>scrollY: "+scrollY+
    "<br/>screenX: "+screenX+
    "<br/>screenY: "+screenY;
    elt.innerHTML=S;
}

showScroll()

timing

Metodene setTimeout, clearTimeout, setInterval, clearInterval gjør det mulig å controllere tidsbestemte handlinger. Vi kan f.eks. starte og stoppe en teller en teller.

0

Den involverte koden ser slik ut:

var timerID=-1;
function startTimer()
{
   if (timerID!=-1)
        clearTimeout(timerID);
   timerID=setInterval(counter,400);
}
function stoppTimer()
{
   if (timerID!=-1)
     clearTimeout(timerID);
   else
    alert('ingenting startet -> ingenting kan stoppes');
}
function counter()
{
  var val=parseInt(document.getElementById('counter').innerHTML);
  if (isNaN(val))
    val=0;
  document.getElementById('counter').innerHTML=''+(val+1)%10000;
}

location

Vi får tak i location objektet via window.

Prøv denne koden

function showLocation()
{
  S='';
  var loc=window.location;
  S+='hash: '+loc.hash+'<br/>';
  S+='host: '+loc.host+'<br/>';
  S+='href: '+loc.href+'<br/>';
  S+='pathname: '+loc.pathname+'<br/>';
  S+='port: '+loc.port+'<br/>';
  S+='protocol: '+loc.protocol+'<br/>';
  S+='search: '+loc.search+'<br/>';
  document.getElementById('location_result').innerHTML=S;
}

history

Historyobjektet er tilgjengelig via window.

Prøv denne koden

function showHistory()
{
  var S='Her finnes en historie: '+window.history.length;
  document.getElementById('history_result').innerHTML=S;
}

Vi kan gå f.eks. bakover i historien:

    <a href="javascript:history.go(-1)">tilbake</a>
    

men vi har ikke lov (rettigheter) til å vise fram historien. Vi kan ikke inspisere hvor en bruker har vært. Det har vi ikke noe med.

screen

screen objektet gir oss tilgang til den skjermen materialet vårt presenteres på. Attributtene er:

• width: Den totale bredden på skjermen
• height: Den totale høyden på skjermen
• availWidth: Bredden unntatt Windows Taskbar
• availHeight: Høyden unntatt Windows Taskbar
• colorDepth: Antall bit som kan brukes til å framstille farger i bilder
• pixelDepth: Antall bit som kan brukes til å framstille farger

Dette er informasjon som er nyttig for å bestemme hvordan vi skal ordne materialet på side, hva vi skal ta med og hvordan vi skal sette størrelser. Hvis vi skal lage siden brukbar på mobiler (responsive design) er dette nyttig informasjon.

function showScreen()
{
    var elt=document.getElementById("screenprops");
    var S="width: "+screen.width+
    "<br/>height: "+screen.height+
    "<br/>availWidth: "+screen.availWidth+
    "<br/>availHeight: "+screen.availHeight+
    "<br/>colorDepth: "+screen.colorDepth+
    "<br/>pixelDepth: "+screen.pixelDepth;
    elt.innerHTML=S;
}

showScreen()

navigator

Prøv denne koden

function showNavigator()
{
  var eltResult=document.getElementById('navigator_result');
  var S='';
  S+='userAgent: '+navigator.userAgent+'<br/>';
  S+='appName: '+navigator.appName+'<br/>';
  S+='appVersion: '+navigator.appVersion+'<br/>';
  S+='language: '+navigator.language+'<br/>';
  S+='onLine: '+navigator.onLine+'<br/>';
  S+='platform: '+navigator.platform+'<br/>';
  S+='product: '+navigator.product+'<br/>';
  S+='cookieEnabled: '+navigator.cookieEnabled+'<br/><hr/>';
  var plugs=navigator.plugins;
  if(plugs.length==0)
    S+='Finner ingen plugins, kan skyldes denne versjonen av  MS-IE';
  else
  {
    S+='plugins: '+plugs.length+'<br/>';
    /* if we want to see all plugins
    S+='<table>';
    for(var ix=0;ix<plugs.length;ix++)
      S+='<tr><td>'+plugs[ix].name+'</td><td>'+plugs[ix].filename+
         '</td><td>'+plugs[ix].description+'</td></tr>';
    S+='</table>';*/
  }
  eltResult.innerHTML=S;
}