JS - OBJECTEN
DEEL 2
JS-DOM

Koppelingen
Voorbeelden bij dit hoofdstuk

HOOFDSTUKKEN

Algemeen



Algemeen

Terug naar de top

 

Document Object Model / Objecten van browsers
Met JavaScript kan men ook toegang krijgen tot andere objecten; objecten die gedefinieerd zijn in de (browser) omgeving waarin JavaScript werkt. Hieronder vallen de DOM objecten (bijvoorbeeld window en document). Deze behoren deels tot Javascript en deels tot HTML maar kunnen allen gemanipuleerd worden met JavaScript. W3C en ECMA definiërent daarbij beide een standaard set objecten voor DOM en een standaardwijze waarop deze benaderd en gemanipuleerd kunnen worden.

De navolgende objecten zijn Javascript-DOM Objecten:

ObjectBeschrijvingWindowHet top level object in de JavaScript hierarchie. Het Window object vertegenwoordigt een browser venster. Een Window object wordt automatisch gecreeërd elke keer wanneer een <body> of <frameset> tag wordt gebruikt.
Direct onder window vindt men onder andere document en framesNavigatorBevat informatie over de browser van de gebruikerScreenBevat informatie over het beeldscherm van de gebruikerHistoryBevat de bezochte URLs in het browser vensterLocationBevat informatie over de huidige URL

Window Object

The Window object is the top level object in the JavaScript hierarchy.

The Window object represents a browser window.

A Window object is created automatically with every instance of a <body> or <frameset> tag.

IE: Internet Explorer, F: Firefox, O: Opera.

Window Object Collections

CollectionDescriptionIEFO
frames[] Returns all named frames in the window 4 1 9

Window Object Properties

PropertyDescriptionIEFO
closed Returns whether or not a window has been closed 4 1 9
defaultStatus Sets or returns the default text in the statusbar of the window 4 No 9
document See Document object 4 1 9
history See History object 4 1 9
length Sets or returns the number of frames in the window 4 1 9
location See Location object 4 1 9
name Sets or returns the name of the window 4 1 9
opener Returns a reference to the window that created the window 4 1 9
outerheight Sets or returns the outer height of a window No No No
outerwidth Sets or returns the outer width of a window No No No
pageXOffset Sets or returns the X position of the current page in relation to the upper left corner of a window's display area No No No
pageYOffset Sets or returns the Y position of the current page in relation to the upper left corner of a window's display area No No No
parent Returns the parent window 4 1 9
personalbar Sets whether or not the browser's personal bar (or directories bar) should be visible      
scrollbars Sets whether or not the scrollbars should be visible      
self Returns a reference to the current window 4 1 9
status Sets the text in the statusbar of a window 4 No 9
statusbar Sets whether or not the browser's statusbar should be visible      
toolbar Sets whether or not the browser's tool bar is visible or not (can only be set before the window is opened and you must have UniversalBrowserWrite privilege)      
top Returns the topmost ancestor window 4 1 9

Window Object Methods

MethodDescriptionIEFO
alert() Displays an alert box with a message and an OK button 4 1 9
blur() Removes focus from the current window 4 1 9
clearInterval() Cancels a timeout set with setInterval() 4 1 9
clearTimeout() Cancels a timeout set with setTimeout() 4 1 9
close() Closes the current window 4 1 9
confirm() Displays a dialog box with a message and an OK and a Cancel button 4 1 9
createPopup() Creates a pop-up window 4 No No
focus() Sets focus to the current window 4 1 9
moveBy() Moves a window relative to its current position 4 1 9
moveTo() Moves a window to the specified position 4 1 9
open() Opens a new browser window 4 1 9
print() Prints the contents of the current window 5 1 9
prompt() Displays a dialog box that prompts the user for input 4 1 9
resizeBy() Resizes a window by the specified pixels 4 1 9
resizeTo() Resizes a window to the specified width and height 4 1.5 9
scrollBy() Scrolls the content by the specified number of pixels 4 1 9
scrollTo() Scrolls the content to the specified coordinates 4 1 9
setInterval() Evaluates an expression at specified intervals 4 1 9
setTimeout() Evaluates an expression after a specified number of milliseconds 4 1 9

 


HTML DOM Navigator Object


Navigator Object

The Navigator object is actually a JavaScript object, not an HTML DOM object.

The Navigator object is automatically created by the JavaScript runtime engine and contains information about the client browser.

IE: Internet Explorer, F: Firefox, O: Opera.

Navigator Object Collections

CollectionDescriptionIEFO
plugins[] Returns a reference to all embedded objects in the document 4 1 9

Navigator Object Properties

PropertyDescriptionIEFO
appCodeName Returns the code name of the browser 4 1 9
appMinorVersion Returns the minor version of the browser 4 No No
appName Returns the name of the browser 4 1 9
appVersion Returns the platform and version of the browser 4 1 9
browserLanguage Returns the current browser language 4 No 9
cookieEnabled Returns a Boolean value that specifies whether cookies are enabled in the browser 4 1 9
cpuClass Returns the CPU class of the browser's system 4 No No
onLine Returns a Boolean value that specifies whether the system is in offline mode 4 No No
platform Returns the operating system platform 4 1 9
systemLanguage Returns the default language used by the OS 4 No No
userAgent Returns the value of the user-agent header sent by the client to the server 4 1 9
userLanguage Returns the OS' natural language setting 4 No 9

Navigator Object Methods

MethodDescriptionIEFO
javaEnabled() Specifies whether or not the browser has Java enabled 4 1 9
taintEnabled() Specifies whether or not the browser has data tainting enabled 4 1 9

HTML DOM Screen Object


Screen Object

The Screen object is actually a JavaScript object, not an HTML DOM object..

The Screen object is automatically created by the JavaScript runtime engine and contains information about the client's display screen.

IE: Internet Explorer, F: Firefox, O: Opera.

Screen Object Properties

PropertyDescriptionIEFO
availHeight Returns the height of the display screen (excluding the Windows Taskbar) 4 1 9
availWidth Returns the width of the display screen (excluding the Windows Taskbar) 4 1 9
bufferDepth Sets or returns the bit depth of the color palette in the off-screen bitmap buffer 4 No No
colorDepth Returns the bit depth of the color palette on the destination device or buffer 4 1 9
deviceXDPI Returns the number of horizontal dots per inch of the display screen 6 No No
deviceYDPI Returns the number of vertical dots per inch of the display screen 6 No No
fontSmoothingEnabled Returns whether the user has enabled font smoothing in the display control panel 4 No No
height The height of the display screen 4 1 9
logicalXDPI Returns the normal number of horizontal dots per inch of the display screen 6 No No
logicalYDPI Returns the normal number of vertical dots per inch of the display screen 6 No No
pixelDepth Returns the color resolution (in bits per pixel) of the display screen No 1 9
updateInterval Sets or returns the update interval for the screen 4 No No
width Returns width of the display screen 4 1 9

 


HTML DOM History Object


History Object

The History object is actually a JavaScript object, not an HTML DOM object.

The History object is automatically created by the JavaScript runtime engine and consists of an array of URLs. These URLs are the URLs the user has visited within a browser window.

The History object is part of the Window object and is accessed through the window.history property.

IE: Internet Explorer, F: Firefox, O: Opera.

History Object Properties

PropertyDescriptionIEFO
length Returns the number of elements in the history list 4 1 9

History Object Methods

MethodDescriptionIEFO
back() Loads the previous URL in the history list 4 1 9
forward() Loads the next URL in the history list 4 1 9
go() Loads a specific page in the history list 4 1 9

 


HTML DOM Location Object


Location Object

The Location object is actually a JavaScript object, not an HTML DOM object.

The Location object is automatically created by the JavaScript runtime engine and contains information about the current URL. Example: Send a user to a new location

The Location object is part of the Window object and is accessed through the window.location property.

IE: Internet Explorer, F: Firefox, O: Opera.

Location Object Properties

PropertyDescriptionIEFO
hash Sets or returns the URL from the hash sign (#) 4 1 9
host Sets or returns the hostname and port number of the current URL 4 1 9
hostname Sets or returns the hostname of the current URL 4 1 9
href Sets or returns the entire URL 4 1 9
pathname Sets or returns the path of the current URL 4 1 9
port Sets or returns the port number of the current URL 4 1 9
protocol Sets or returns the protocol of the current URL 4 1 9
search Sets or returns the URL from the question mark (?) 4 1 9

Location Object Methods

MethodDescriptionIEFO
assign() Loads a new document 4 1 9
reload() Reloads the current document 4 1 9
replace() Replaces the current document with a new one 4 1 9

 


JavaScript Popup Boxes

In JavaScript we can create three kinds of popup boxes: Alert box, Confirm box, and Prompt box.


Examples

Alert box

Alert box with line breaks

Confirm box

Prompt box


Alert Box

An alert box is often used if you want to make sure information comes through to the user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax:

alert("sometext")

 


Confirm Box

A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Syntax:

confirm("sometext")

 


Prompt Box

A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Syntax:

prompt("sometext","defaultvalue")

 


Overzicht van objecten

  • window
    • frames
    • document
      • all --- style
      • anchors
      • applets
      • forms --- elements --- options
      • images
      • layers
      • links
    • event
    • history
    • location
  • Function
  • navigator
    • mimeTypes
    • plugins
    Number
  • RegExp
  • Screen

 

De venster-objecten (niet te verwarren met de ingebouwde en zelfgemaakte objecten van JavaScript) hebben een hiërarchische structuur. De onderlinge verhouding binnen die structuur wordt aangeduid met ouder-kind verhouding (parent-child). Aan de top van die hiërarchie staat het window-object, het is dan ook de ouder van alle andere objecten.
Het window-object heeft een aantal kind-objecten, waarvan de belangrijkste zijn: document, location en history.
Het document-object heeft op zijn beurt weer een aantal kinderen met als belangrijkste: de links, anchors, plaatjes en formulieren.
De laatste kan nog weer worden onderverdeeld in verschillende formulier-elementen.

Object-eigenschappen

Ieder object heeft zoals gezegd zijn eigen eigenschappen. Als voorbeeld wordt hierna een aantal eigenschappen van het window-object geven, om een indruk te krijgen waarvoor eigenschappen dienen. Het window-object heeft drie eigenschappen die u vaak tegen zult komen: defaultStatus, eigenschap-status en de parent-eigenschap.

De eerste is defaultStatus, die wordt gebruikt om een standaardtekst in de statusbalk te tonen.
<SCRIPT language="JavaScript">
<!-- verberg het script voor andere browsers
defaultStatus= "Tekst die u wilt tonen."
// stop het verbergen van het script voor andere browsers-->
</SCRIPT>

Een andere mogelijkheid om tekst in de statusbalk te laten verschijnen is gebruik maken van de eigenschap-status. Deze moet wel worden verbonden aan een event:
<a href="/algemeen/muziek.htm" OnMouseOver="status="De beste muzieksites';return true">
<IMG src="/algemeen/muziek.gif"></A>

De derde veelgebruikte eigenschap is parent. Deze eigenschap wordt gebruikt om naar een frame te kunnen verwijzen. Stel, u hebt twee frames met de namen één en twee. Als frame één het hoofdvenster is, dan hoeft hiernaar niet expliciet te worden verwezen. Met defaultStatus wordt de tekst gewoon in de statusbalk getoond. Wilt u echter een script activeren in frame twee, dan moet een omweg worden gevolgd. Er wordt dan eerst met parent verwezen naar het eerste frame, en vervolgens wordt de naam van het tweede frame genoemd:
<SCRIPT language="JavaScript">
<!-- verberg het script voor andere browsers
parent.twee.defaultStatus="Tekst die u wilt tonen."
// stop het verbergen van het script voor andere browsers-->
</SCRIPT>

Methodes

Methodes kunnen aan objecten worden gekoppeld. Op het moment dat een object wordt benaderd wordt de methode geactiveerd. De verschillende venster-elementen kennen hun eigen methodes, die we hier groepsgewijs weergeven.

Window- en frame-object
alert() Geeft een bericht weer in een alert-dialoogbox.
close() Sluit een venster.
confirm() Hiermee kunt u een bericht geven met een OK- en CANCEL-knop.
open(URL,name,
eigenschappen)
Met deze methode kunt u een nieuw venster openen; in dat venster kunt u een nieuwe pagina laden met URL, verwijzen naar een andere pagina met name en de eigenschappen van het nieuwe venster bepalen.
prompt() Geeft een bericht weer in een dialoogbox, waarbij de gebruiker de mogelijkheid heeft om iets in te vullen.
setTimeout
(gebeurtenis, tijd)
Hiermee kan na een bepaalde tijd automatisch een actie worden uitgevoerd, de tijd wordt uitgedrukt in milliseconden.
clearTimeout
(naam)
Beëindigt een eerder ingestelde Timeout. Er kan hiernaar verwezen worden door de naam ervan op te geven.

 

Alle objecten zijn in feite onderdeel van het window-object. Het window-object hoeft daarom niet expliciet genoemd te worden als een object of method hiervan aangeroepen wordt. Als de method alert() wordt aangeroepen is dat in feite windows.alert(). document.write() is in feite windows.document.write().

Eigenschappen location- en history-object.

Location- en history-objecten staan in de hiërarchie onder het window-object. Het location-object kent een aantal eigenschappen die aangeven waarnaar wordt verwezen. Deze eigenschappen zijn: protocol, hostname, port, host, pathname, hash, target, query en href. Er kunnen twee methodes worden toegepast op het object location. Met `replace' vervangt u de bestaande pagina en met `reload' ververst u deze.

Met het history-object kunt u verwijzen naar eerder bezochte URL's. De enige eigenschap die history kent is `length'. Deze property bewaart de verschillende URL's waar de gebruiker is geweest. In beginversies van JavaScript was er nog een tweede eigenschap, namelijk de naam van de bezochte URL. Deze is ter bescherming van de privacy uit de taal verwijderd.

Er zijn drie methodes die kunnen worden gebruikt bij het history-object. Ze worden allemaal benut om de gebruiker te linken naar een andere pagina. Met history.back() stuurt u de gebruiker terug, met history.forward() vooruit en met history.go() naar een locatie die is terug te vinden in de history-lijst.

Terug naar de top