!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

JavaScript
Objekter
Børre Stenseth
JavaScript >Omgivelsene

Omgivelsene

Hva
Tilgjengelige objekter i Javascript

Javascript er et objektorientert språk. Vi har vist bruken av noen klasser som er definerte som del av språket ( string, array, date, math ) i modulen Litt om språket . Vi kan videre lage våre egne objekter slik som forklart i modulene: Egne Objekter og JSON .

Når vi kjører Javascript i en nettleser har vi tilgang på en rekke objekter som beskriver de omgivelsene vi opererer i. De tradisjonelle som har vært med en stund er: window, document, location, history og navigator. Vi skal se på disse og gjøre noen eksperimenter. I tillegg til disse har det kommet en rekke objekter i forskjellige generasjoner av HTML. Eksempler er localStorage og sessionStorage (som erstating for cookies), XMLHttpRequest og JSON.

Merk at dette er ikke noen uttømmende beskrivelse. Det er satt fokus på de metodene og egenskapene som kanskje er de mest nyttige.

JAVASCRIPT KIT [1] er en god kilde for mer detaljer om dette teamet

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().

Noen egenskaper Noen metoder Noen begivenheter
document, history, location, defaultStatus, opener, status, pageXOffset, pageYOffset, screenX, screenY alert, confirm, prompt, blur, close, focus, open, clearTimeout, setTimeout, setInterval, clearInterval, print, resizeTo, resizeBy, scrollTo, scrollBy, moveTo, moveBy onerror, onload, onunload, onbeforeunload, onblur, onfocus, onresize, onscroll

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:

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
viser noe av dette http://www.it.hiof.no/~borres/dw/jsoop/tester1.html

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:

tester2 http://www.it.hiof.no/~borres/dw/jsoop/tester2.html

Location

Vi får tak i location objektet via window.

Egenskaper Metoder
hash, host, hostname, href, pathname, port, protocol, search reload, replace

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.

Egenskaper Metoder
length, forward, go back

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

Egenskaper Metoder
plugins[], appCodeName, appName, appVersion, mimeTypes, userAgent javaEnabled

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.

inspectdoc http://www.it.hiof.no/~borres/dw/jsoop/inspectdoc.html
Referanser
  1. JavaScript Kit JavaScript Kit www.javascriptkit.com/jsref/ 14-03-2010
Vedlikehold

Børre Stenseth, september 2007

( Velkommen ) JavaScript >Omgivelsene ( DOM )