Windows en on-the-fly documenten

Creatie van windows

Het openen van een nieuw browservenster is een van de belangrijke features van JavaScript. Zo kunnen we een nieuw document laden in een nieuw venster of nieuwe documenten creeren (on-the-fly). We zullen eerst zien hoe we een nieuw venster creeren, daarna een HTML-document laden om het vervolgens te sluiten.
Het volgende script opent een nieuw browser venster en laadt een welbepaalde pagina: 

<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function openWin() {
  myWin= open("screen.htm");
}

// -->
</script>
</head>
<body>

<form>
<input type="button" value="Registratieformulier" onClick="openWin()">
</form>

</body>
</html>

De pagina screen.htm wordt geladen in een nieuw venster dmv de open() methode.

We kunnen ook de eigenschappen van een nieuw venster instellen. We kunnen bijvoorbeeld bepalen of er een statusbalk, een toolbar of een menubalk verschijnt. Zo kunnen we ook de grootte van het venster bepalen. Het volgende script opent een nieuw venster van 450 bij 300 pixels. Het venster heeft geen statusbalk, toolbar noch menubalk. 

<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function openWin2() {
  myWin= open("screen.htm", "displayWindow", 
    "width=450,height=300,status=no,toolbar=no,menubar=no");
}

// -->
</script>
</head>
<body>

<form>
<input type="button" value="Registratieformulier" onClick="openWin2()">
</form>

</body>
</html>

We zien hier dat de eigenschappen van het browservenster in een string worden vermeld : "width=450,height=300,status=no,toolbar=no,menubar=no". Let op : er mogen geen spaties voorkomen in deze string!

Hier volgt de lijst van properties van een window:

directories yes|no
height number of pixels
location yes|no
menubar yes|no
resizable yes|no
scrollbars yes|no
status yes|no
toolbar yes|no
width number of pixels

Sommige properties werden toegevoegd in JavaScript 1.2 (d.i. Netscape Navigator 4.0). Deze zijn niet van toepassing binnen Netscape 2.x or 3.x of Microsoft Internet Explorer 3.x daar deze browsers niet compatibel zijn met JavaScript 1.2. Hier volgen de nieuwe proporties:

alwaysLowered yes|no
alwaysRaised yes|no
dependent yes|no
hotkeys yes|no
innerWidth number of pixels (replaces width)
innerHeight number of pixels (replaces height)
outerWidth number of pixels
outerHeight number of pixels
screenX position in pixels
screenY position in pixels
titlebar yes|no
z-lock yes|no

Verdere uitleg over deze nieuwe properties kunt u terug vinden in de JavaScript 1.2 guide. In een volgende versie van deze cursus zal ik proberen enkele voorbeelden te geven van het gebruik van deze nieuwe features.
Aan de hand van deze nieuwe eigenschappen kunnen we bijvoorbeeld de positie van een window bepalen. Dit is onmogelijk in de oudere versies van Javascript.

De naam van een window

Zoals we gezien hebben gebruiken we drie argumenten voor het openen van een window: 

  myWin= open("screen.htm", "displayWindow", 
    "width=450,height=300,status=no,toolbar=no,menubar=no");
Waarvoor dient nu het tweede argument ? Dit is de naam van het venster. Eerder in de cursus hebben we het gebruik gezien van de target-property. Indien we de naam kennen van een bestaand venster dan kunnen we een nieuwe webpagina laden dmv volgende instructie: 
<a href="screen.htm" target="displayWindow">
Onder target vermelden we de naam van het venster waarin we onze webpagina willen tonen.(Indien het venster nog niet bestaat dan zorgt de code ervoor dat een nieuw venster wordt aangemaakt).
Let op : myWin is niet de naam van het venster. Het betreft hier een variabele die ons toegang geeft tot het venster. De naam van het venster (in dit geval displayWindow) is een unieke naam die kan gebruikt worden vanuit andere vensters in onze browser.

Sluiten van windows

We kunnen ook vensters sluiten dmv JavaScript. Hiervoor gebruiken we de close() methode. Laat ons even een venster openen en een knop voorzien om het venster weer te sluiten: 

<html>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function sluiten() {
  close();
}

// -->
</script>

<center>
<form>
<input type=button value="Sluiten" onClick="sluiten()">
</form>
</center>

</html>
Als we klikken op de knop 'Sluiten' dan wordt het nieuw venster gesloten.

Creatie van documenten on-the-fly

Hier zien we een van de belangrijkste features van JavaScript - creatie van documenten on-the-fly. dit betekent dat we dmv Javascript een nieuwe HTML-pagina creeren. Bovendien kunnen we ook andere type documenten creeren zoals bijvoorbeeld een VRML-object etc.. De output van ons Javascript tonen we in een apart venster of in een nieuw frame.
Laten we eerst en vooral een simpel HTML-document aanmaken in een nieuw venster. Hier volgt het script: 

<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function openWin3() {
  myWin= open("", "displayWindow", 
    "width=600,height=100,status=no,toolbar=no,menubar=no");

  // open document voor output
  myWin.document.open();
  
  // creer document
  myWin.document.write("<html><head><title>On-the-fly");
  myWin.document.write("</title></head><body>");
  myWin.document.write("<center><font size=+3>");
  myWin.document.write("PC Aktief Computerclub");
  myWin.document.write("<BR>");
  myWin.document.write("de tofste computerclub van het Waasland!");
  myWin.document.write("</font></center>");
  myWin.document.write("</body></html>");

  // sluiten van het document
  myWin.document.close();  
}

// -->
</script>
</head>
<body>

<form>
<input type=button value="On-the-fly" onClick="openWin3()">
</form>

</body>
</html>
Laat ons eens de source van de functie winOpen3() bekijken. Het eerste wat we doen is een nieuw venster aanmaken. Het eerste argument bevat de lege string "" - dit betekent dat we geen URL specifieren. Onze browser zal geen bestaand document oproepen maar via Javascript zal een nieuw document worden aangemaakt.
We definieren een variabele myWin. Door middel van deze variabele krijgen we toegang tot het nieuw browservenster.
Na het openen van het venster moeten we het document openen. Dit doen we dmv : 
  // open document voor output
  myWin.document.open();
We gebruiken hier de open()-methode van het document-object - dit is niet hetzelfde als de open()-methode van het window-object! Dit commando opent geen nieuw venster - het is enkel de voorbereiding voor het document.
De volgende lijnen creeren een document dmv document.write(): 
  // creer document
  myWin.document.write("<html><head><title>On-the-fly");
  myWin.document.write("</title></head><body>");
  myWin.document.write("<center><font size=+3>");
  myWin.document.write("PC Aktief Computerclub");
  myWin.document.write("<BR>");
  myWin.document.write("de tofste computerclub van het Waasland!");
  myWin.document.write("</font></center>");
  myWin.document.write("</body></html>");
We gebruiken hier normale HTML-tags. Na het schrijven van het document moeten we het document nog sluiten. Dit gebeurt dmv volgende code: 
  // sluiten van het document
  myWin.document.close();
Zoals ik al eerder zei, kunnen we documenten creeren on-the-fly en de output sturen naar een bepaald frame. Als we bijvoorbeeld twee frames hebben frame1 en frame2 en we wensen een nieuw document te creeren in frame2 dan kunnen we het volgende schrijven in frame1: 
parent.frame2.document.open();

parent.frame2.document.write("Hier volgt de HTML-code");

parent.frame2.document.close();

Creatie van VRML-objecten on-the-fly

Als voorbeeld van de flexibiliteit van JavaScript gaan we nu een VRML-object creeren on-the-fly. VRML staat voor Virtual Reality Modelling Language. Dit is de taal voor het creeren van 3D scenes. Laat ons het simpel houden en als voorwerp een kubus kiezen.
Hiervoor hebben we een VRML plug-in nodig. Dit script controleert niet op de aanwezigheid van de plug-in maar zoals alles is het mogelijk de aanwezigheid van een VRML plug-in te controleren via Javascript.(ik zal dit later toevoegen aan de cursus)


Hier volgt de sourcecode: 
<html>
<head>
<script language="JavaScript">
<!-- verbergen voor niet-Javascript browsers

function vrmlScene() {
  vrml= open("", "displayWindow", 
    "width=500,height=400,status=no,toolbar=no,menubar=no");

  // open document voor output
  vrml.document.open("x-world/x-vrml");
   
  vr= vrml.document;

  // creer VRML-scene
  vr.writeln("#VRML V1.0 ascii");

  // Licht
  vr.write("Separator { DirectionalLight { ");
  vr.write("direction 3 -1 -2.5 } ");

  // Camera
  vr.write("PerspectiveCamera { position -8.6 2.1 5.6 ");
  vr.write("orientation -0.1352 -0.9831 -0.1233 1.1417 ");
  vr.write("focalDistance 10.84 } ");

  // Kubus
  vr.write("Separator { Material { diffuseColor 2 0 1 } ");
  vr.write("Transform { translation -2.4 .2 1 rotation 0 0.5 1 .9 } ");
  vr.write("Cube {} } }");

  // sluiten van het document
  vrml.document.close();  
}

// -->
</script>
</head>
<body>

<form>
<input type=button value="VRML on-the-fly" onClick="vrmlScene()">
</form>

</body>
</html>
De sourcecode vertoont veel gelijkenissen met het vorige voorbeeld. Eerst en vooral openen we een nieuw vesnter. Daarna moetn we het document openstellen voor output.: 
  // open document voor output
  vrml.document.open("x-world/x-vrml");
In het vorige voorbeeld schreven we niets tussen de haakjes. Wat betekent nu in godsnaam "x-world/x-vrml"? Dit is het MIME-type van de file die we wensen te creeren. Zo maken we duidelijk aan de browser welk type data volgt. Als we niets schrijven tussen de haakjes dan wordt het MIME-type "text/html" per default verondersteld (dit is het MIME-type voor HTML-files).
De verschillende MIME-types die onze browser kent kunnen we terugvinden onder de menu 'Options|General Preferences|Helpers'.
Om een 3D scene te creeren moeten we vrml.document.write() schrijven. Dit is vrij lang - daarom definieren we een variabele vr= vrml.document. Nu kunnen we vr.write() schrijven ipv vrml.document.write().
Ik ga hier niet uitleggen wat elk VRML-commando doet. Er is genoeg informatie voorhanden op het Internet. De VRML-code ziet er als volgt uit: 
#VRML V1.0 ascii

Separator { 

  DirectionalLight { direction 3 -1 -2.5 }

  PerspectiveCamera {
    position -8.6 2.1 5.6
    orientation -0.1352 -0.9831 -0.1233 1.1417
    focalDistance 10.84
  }

  Separator {
    Material {
      diffuseColor 2 0 1
    }
    Transform {
      translation -2.4 .2 1
      rotation 0 0.5 1 .9
    }
    Cube {}
  }
}
Dit is de code die we sturen naar het document dmv document.write() commando's.
Interessanter wordt het wanneer we aan de hand van parameters ingebracht via een formulier we verschillende objecten creeren - bijvoorbeeld een bol, een cilinder, een kegel enz. - en dit dynamische gebeurt via Javascript.

[vorig hoofdstuk] [inhoud] [volgend hoofdstuk]

Site monitored 
by 
   

webdesign by

© 1998