Voodoo's Intro to JavaScript

VOODOO'S INTRODUCTION TO JAVASCRIPT
© 1996, 1997 by Stefan Koch © 1998 Romanian translation by Calin Nicolae

Partea a 4-a: Windows si crearea de documente

Crearea ferestrelor

Deschiderea unei noi ferestre de browser este una dintre proprietatile extraordinare ale JavaScript. Puteti sa incarcati fie un document nou (de exemplu un document HTML) in noua fereastra, fie puteti crea un nou document. Mai intai vom vedea cum puteti deschide o noua fereastra, incarca o pagina HTLM in aceasta fereastra si apoi sa o inchideti la loc.
Urmatorul script deschide o noua fereastra browser si incarce o pagina oarecare:

<html>
<head>
<script language="JavaScript">
<!-- hide

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

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

<form>
<input type="button" value="Open new window" onClick="openWin()">
</form>

</body>
</html>

Pagina bla.htm este incarcata in noua fereastra prin intermediul metodei open().

Puteti controla modul in care apare noua ferestra. De exemplu puteti decide daca fereastra va avea o bara de stare, o bara de instrumente sau o bara de meniuri. Urmatorul script deschide o noua fereastra care are dimensiunile 400x300. Fereastra nu are o bara de stare, bara de instrumente sau bara de meniu.

<html>
<head>
<script language="JavaScript">
<!-- hide

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

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

<form>
<input type="button" value="Open new window" onClick="openWin2()">
</form>

</body>
</html>

Puteti vedea ca specificam proprietatile in sirul "width=400,height=300,status=no,toolbar=no,menubar=no". Va rog sa observati ca nu trebuie folosite spatii in acest sir!

Iata o lista a proprietatilor pe care o fereastra le poate avea:

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

Cateva proprietati au fost adaugate in JavaScript 1.2. (i.e. Netscape Navigator 4.0) Nu puteti utiliza aceste proprietati in Netscape 2.x sau 3.x sau in Microsoft Intenet Explorer 3.x deorece aceste browsere nu inteleg JavaScript 1.2. Mai jos sunt noile proprietati:

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

Puteti avea o explicatie a acestor proprietati in ghidul JavaScript 1.2. O sa am explicatii si exemple in viitor.
Cu ajutorul acestor proprietati puteti defini in ce pozitie se va deschide fereastra. Nu puteti face aceasta in versiunile mai vechi ale JavaScript.

Numele ferestrei

Asa cum ati vazut folosim trei argumente pentru a deschide o fereastra:

  myWin= open("bla.htm", "displayWindow", 
    "width=400,height=300,status=no,toolbar=no,menubar=no");

La ce serveste cel de-al doilea argument? Acesta este numele ferestrei. Am vazut mai devreme cum sa folosim proprietatea de identificare. Daca stiti numele unei anumite ferestre puteti incarca o noua pagina in aceasta cu

<a href="bla.html" target="displayWindow">

Pentru aceasta va trebuie numele ferestrei (daca fereastra nu exista, o noua fereastra este creata).
Va rog sa observati ca myWin nu este numele ferestrei. Puteti sa acesati fereaastra prin intermediul acestei variabile. Aceasta este o variabila normala care este valabila numai in interiorul unui script. Numele ferestrei (aici displayWindow) este un nume unic care poate fi folosit de toate ferestrele browserului.

Inchiderea ferestrelor

Puteti inchide ferestrele prin intermediul JavaScript. Pentru acesta trebuie sa folositi metode close(). Vom deschide o fereastra noua asa cum s-a aratat mai devreme. In aceasta fereastra incarcam urmatoarea pagina:

<html>
<script language="JavaScript">
<!-- hide

function closeIt() {
  close();
}

// -->
</script>

<center>
<form>
<input type=button value="Close it" onClick="closeIt()">
</form>
</center>

</html>

Daca apasati acest buton in noua fereastra aceasta este inchisa.
open() si close() sunt metode ale obiectului window. In mod normal am scrie window.open() si window.close() in loc de open() and close(). Aceasta este adevarat - insa obiectul window este o exceptie. Nu trebuie sa scrieti window daca doriti sa apelati o metoda a unui obiect fereastra (aceasta este adevarat numai pentru acest obiect).

Crearea de noi documente

Am ajuns acum la una dintre facilitatile interesante a JavaScriptului - crearea de documente pe loc. Aceasta inseamna ca puteti lasa JavaScript sa creeze o noua pagina HTML. Mai mult trebuie sa creati alte documente - cum ar fi scene VRML etc. Puteti incarca aceste documente intr-o fereastra separata sau intr-un frame. Mai intai vom crea un document simplu HTML care va fi afisat intr-o intr-o noua fereastra. Mai jos este scriptul:

<html>
<head>
<script language="JavaScript">
<!-- hide

function openWin3() {
  myWin= open("", "displayWindow", 
    "width=500,height=400,status=yes,toolbar=yes,menubar=yes");

  // open document for further output
  myWin.document.open();
  
  // create 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("This HTML-document has been created ");
  myWin.document.write("with the help of JavaScript!");
  myWin.document.write("</font></center>");
  myWin.document.write("</body></html>");

  // close the document - (not the window!)
  myWin.document.close();  
}

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

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

</body>
</html>

Sa ne uitam la functia winOpen3(). Puteti vedea ca deschidem o noua fereastra browser mai intai. Dupa cum puteti vedea, primul argument este un sir gol " " - aceasta inseamna ca nu trebuie specificat un URL Browserul nu trebuie sa aduca un document - JavaScript o sa creeze noul document.
Pentru inceput definim variabila myWin. Cu ajutorul acestei variabile putem accesa noua fereastra. Va rog sa observati ca nu puteti folosi numele ferestrei (displayWindow) pentru aceasta operatie.
Dupa ce am deschis fereatra putem sa deschidem documentul. Aceasta se poate realiza prin:

  // open document for further output
  myWin.document.open();

Am folosit metoda open() a obiectului document - ce este diferita de metoda open a obiecutlui fereastra. Aceata comanda nu deschide o noua fereatra - ci pregateste documentul pentru urmatorul input.
Trebuie sa plasam myWin inainte de document.open() pentru a accesa noua fereastra.
Urmatoarele linii de cod creeaza un document cu ajutorul document.write():

  // create 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("This HTML-document has been created ");
  myWin.document.write("with the help of JavaScript!");
  myWin.document.write("</font></center>");
  myWin.document.write("</body></html>");

Puteti vedea ca putem scrie taguri normale HTML in interiorul documentului. Noi creem cod HTML! Puteti scrie orice tagri HTML aici.
Dupa afisare trebuie sa inchidem din nou documentul. Codul urmator face aceasta:

  // close the document - (not the window!)
  myWin.document.close();

Asa cum am precizat puteti creea documente noi si sa le afisati intr-un frame. Daca de exemplu aveti doua frameuri numite frame1 si frame2 si doriti sa creati un nou document in frame2 puteti scrie urmatorul cod in frame1:

parent.frame2.document.open();

parent.frame2.document.write("Here goes your HTML-code");

parent.frame2.document.close();

Crearea de scene VRML

Pentru a demonstra flexibilitatea JavaScript vom creea o scena VRML. Initialele VRML provin din Virtual Reality Modelling Language. Acesta este un limbaj pentru crearea de obiecte 3D. Asa ca luati-va ochelarii dumneavoastra 3D si bucurati-va... Nu, nu este doar un simplu exemplu, este un cub albastru.
Va trebuie un plug-in VRML pentru a vedea acest exemplu. Acest script nu verifica daca exista plug-in instalat, dar aceasta nu va fi nici o problema de realizat.

Iata codul sursa:

<html>
<head>
<script language="JavaScript">
<!-- hide

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

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

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

  // Light
  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 } ");

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

  // close the document - (not the window!)
  vrml.document.close();  
}

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

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

</body>
</html>

Codul sursa este destul de similar cu cel din exemplul trecut. Mai intai deschidem o noua fereastra. Apoi trebuie sa deschidem documentul si sa il pregatiti pentru afisare. Aruncati o privire pe acest cod:

  // open document for further output
  vrml.document.open("x-world/x-vrml");

In ultimiul exemplu nu am scris nimic in paranteze. Ce inseamna "x-world/x-vrml" ? Este tipul MIME al fisierului me care dorim sa il creem. Aici ii comunicam browserului ce fel de date vor urma. Daca nu scriem nimic in paranteze tipul MIME este setat la "text/html" (acesta este tipul MIME al fisierelor HTML).
(Exista mai multe feluri de a sti care este tipul MUME - browserul insusi are o lista de tipuri MIME. Puteti gasi aceasta lista in meniul de optiuni) Trebuie sa scriem vrml.document.write() pentru a crea o scena 3D. Aceasta secventa de cod este destul de lunga - de aceea definim vr=vrml.document. Acum putem scrie vr.write() in loc de vrml.document.write().
Acum putem obtine codul VRML. Nu voi descrie elementele din scena VRML. Sunt cateve surse bune de VRML pe Internet. Codul VRML arata ca acesta:

#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 0 0 1
    }
    Transform {
      translation -2.4 .2 1
      rotation 0 0.5 1 .9
    }
    Cube {}
  }
}

Acest cod il obtinem ca iesire prin comanda document.write().
Bineinteles ca este fara rost sa creem o scena care poate sa fie incarcata ca un fisier normal VRML (cube.wrl). Este mult mai interesant daca realizati un formular unde utilizatorul poate introduce diferite obiecte - cum ar fi o sfera, cilindru, con etc. - si Javascript creeaza o scena cu aceste date (am un astfel de exemplu in cartea mea de JavaScript).

[previous] [index] [next]

©1996,1997 by Stefan Koch
e-mail:skoch@rumms.uni-mannheim.de
http://rummelplatz.uni-mannheim.de/~skoch/
My JavaScript-book