Omgivelsene

window

window er det objektet som definerer omgivelsene. Når vi skriver f.eks. alert('hello'), bruker vi metoden alert i window. Vi trenger ikke skrive windows.alert().

Et litt kinkig problem er koordinatbestemmelse i vinduet. Her skiller nettleserne seg fra hverandre. Egenskapene pageXOffset og pageYOffset skal returnere hvor mye vinduet er scrollet. IE bruker alternativene "document.body.scrollLeft" and "document.body.scrollTop". På samme måte er egenskapene screenX og screenY, som beskriver vinduets posisjon relativt til skjermen, er i IE gitt som: "window.screenLeft" and "window.screenTop"

Hvis du vil ha en komplett liste av alle egenskaper og metoder i et minimalistisk window-objektet slik din nettleser finner dem: vis

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','*')

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;
}

Du kan jo forsøke å kjøre følgende kode:

function changeWindow()
{
  moveBy(50, 50);
  scrollBy(10, 10)
  //resizeTo(800,800);
}

document

document-objektet er nøkkelen til det meste av det vi gjør når vi skal manipulere en vevside. Det er document-objektet som gir oss tilgang til komponentene på en side, elementene. Alle disse komponentene gjøres tilgjengelige for oss som noder av forskjellig type og med forskjellige egenskaper.

Hvis du vil ha en komplett liste av alle egenskaper og metoder i dette document-objektet slik din nettleser finner dem kan du kjøre følgende script:

function visDocInfo()
{
  var elt=document.getElementById("visdocinfo");
  if(elt.innerHTML.length > 10){
    elt.innerHTML='';
    return;
  }
  var S='<table border="1px" cellspacing="0px" width="500px">';
  for(p in document)
  {
    try{S+='<tr><td>'+p+'</td><td>'+document[p]+'</td></tr>';}
    catch(E){S+='<tr><td>'+p+'</td><td style="color:red">'+E.message+'</td></tr>';}
  }
  S+='</table>';
  elt.innerHTML=S;
}

Enten vi lager sider i HTML5, XHTML5(?) eller XHTML er det fruktbart å betrakte documentet som en hierarkisk trestruktur, en DOM. Når vi gjøre det blir det lettere å forstå hvordan ulike metoder virker, og det er lettere å forstå hvordan vi kan navigere i dette treet.

Å finne elementer

Vi har en rekke metoder i document for å finne enkeltnoder (elementer) eller lister av noder. Det er grunn til være litt varsom med noen av disse i noen nettlesere.

De vi bruker mest er trolig:

• getElementsByTagName(t)
• getElementById(i)

Nye i HTML5:

• getElementsByClassName(c)
• querySelector(s)
• querySelectorAll(s)

Den første kan da velge ut fra en class-angivelse blandt mange angivelser adskilt med blank.
class="eple banan uthevet", vil velges av getElementsByClassName('banan').

De to siste er interessant fordi de tar en CSS-selector som parameter. Dette blir en paralell til XPATH slik vi kjenner det fra andre programmeringsomgivelser. Når vi kan stole på at disse er implementerte, kan de erstatte de andre.

Metodene som er nevnt ovenfor er også implementert i elementer slik at vi kan f.eks. skrive:
document.getElementById('header2').getElementsByTagName('p')
for å lage en liste av alle paragrafer under elementet med id='header2'.

Vi kan benytte en del egenskaper som ikke er direkte relatert til en DOM-tankegang. Vi kan be om følgende arrays:

• document.images
• document.forms
• document.links
• styleSheets

Spesielt Form-programmering er verdt en nærmere inspeksjon. Det er laget en egen modul: Å lese forms som beskriver noe av dette. Vi kan få tak i forms og innholdet i forms på flere måter. Du kan også se nærmere på dette her:

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.

Navigator

Prøv denne koden

function showNavigator()
{
  var S='';
  S+='userAgent: '+navigator.userAgent+'<br/>';
  S+='appVersion: '+navigator.appVersion+'<br/>';
  S+='appName: '+navigator.appName+'<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/>';
    S+='<table>';
    for(var ix=0;ix<plugs.length;ix++)
    {
      S+='<tr><td>'+plugs[ix].name+'</td>';
      S+='<td>'+plugs[ix].filename+'</td>';
      S+='<td>'+plugs[ix].description+'</td></tr>';
    }
    S+='</table>';
  }
  document.getElementById('navigator_result').innerHTML=S;
}

Elementer

Alle utvalgsmetodene som er nevnt under document er også tilgjengelig for elementer:

getElementsByTagName(t)
getElementById(i)
getElementsByClassName(c)
querySelector(s)
querySelectorAll(s)

Når vi betrakter document som et DOM-tre kan vi også benytte vanlige DOM-egenskaper som: parentNode, childNodes. Og vi kan anvende metoder som:insertBefore(), appendChild() , getAttribute(), removeAttribute().

Egenskapen innerHTML lar oss lese og sette innholdet i et element og få det evaluert.

En inspektør

Siden inspectdoc.html muliggjør en ganske generell inspeksjon av noen viktige objekter i nettleseren. Hvis du inspiserer kildekoden ser du hvordan du kan modifisere den til andre behov, f.eks. spesielle elementer.