Missatge d'un fòrumWindow és l'objecte més alt de la jerarquia, inclou tots els altres. Cada finestra del navegador és una instància d'aquest objecte. Les seves propietats i mètodes ens informen sobre les característiques i comportaments de la finestra i, si el navegador ho permet, les podrem manipular.

Quan fem referència als elements de la pròpia finestra no utilitzem la nomenclatura completa, tot i que ho podem fer. Tant és si escrivim "location" com "window.location". Si no ho especifiquem, el navegador suposa que ens referim a la finestra activa (potser hauríem de dir "enfocada"?). En canvi, sí que és obligatori usar aquesta nomenclatura quan ens referim a una altra finestra, no la paraula "window", sinó el nom de la variable que en conté la instància:

  n o v a F i n e s t r a . d o c u m e n t . w r i t e ( . . .

Més endavant, quan tractarem el DOM (Document Object Model), veurem amb més detall tota la jerarquia d'objectes JavaScript.

  Conceptes JavaScript en aquest capítol
Objecte window : la finestra.
Declaració with() : estableix l'objecte base per a un conjunt d'instruccions.
Mètode open() : obre una nova finestra del navegador.
Mètode close() : tanca la finestra, el document o l'element que especifiquem.

  1.- Com ho fa Dreamweaver
Amb el Dreamweaver tenim el "Comportamiento" "Abrir ventana del navegador" que ens facilita la creació del codi necessari per obrir una nova finestra del navegador.

Aquesta tindrà les característiques que establim al quadre de diàleg: pàgina que obrirà, amplada, altura, barres de desplaçament, menús, eines, estat, ... si la volem maximitzar i, també, un nom. Podrem fer referència a la finestra utilitzant aquest nom, per exemple:

  <a href="pagina1.htm" target="lamevafinestra"> ... </a>

Es dóna per fet que, a la finestra, hi haurà una altra pàgina i, l'únic que podem fer des de Dreamweaver o HTML és això, obrir pàgines. Si volem manipular el contingut des de la pàgina que l'ha oberta, o volem llegir informació de la finestra, necessitem JavaScript.

Afegir comportamentsObrim el Dreamweaver amb un arxiu nou. A la barra "Lanzador" fem clic a la icona "Mostrar Comportamientos". També ho podem fer des del menú "Ventana - Comportamientos" o amb les tecles Majús+F3.

A la nova finestra, fem clic al botó "+" i triem "Abrir ventana del navegador". Deixem en blanc "Mostrar URL", marquem algunes opcions, li posem un títol i acceptem. Mirem ara la vista de codi:

<script language="javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
}
// -->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000"
onLoad="MM_openBrWindow('','win1','toolbar=yes,scrollbars=yes,resizable=yes')">
...


Quin és el problema? Doncs que l'única opció que ens ha deixat per referir-nos a la nova finestra és a través del HTML, com a destí (target) d'un formulari o un vincle. Per poder manejar la nova finestra des de JavaScript, necessitem una variable global. Això sí: ha deixat pistes que ens permetran crear la nostra pròpia funció.
 
2.- Obrir una finestra
Des d'un event (onClick, onLoad) podem obrir una nova finestra amb la declaració:

  onLoad = "window.open( adreça , nom , característiques )"

En la majoria de casos, però, és millor fer que l'event es dirigeixi a una funció, així tindrem més possibilitats i control. Dreamweaver n'utilitza una que podem fer servir com a base.

Assignarem la finestra a una variable global, definida fora de la funció. En aquest exemple no caldria, però ho fem així per assegurar que ens hi podrem referir des d'altres funcions. Per fer l'exemple utilitzem l'arxiu del tercer exemple de la pràctica 2.

La funció rep com a paràmetre el nom del fitxer que s'ha d'obrir a la nova finestra. A continuació enfoca la finestra "mare" per desmarcar l'enllaç i assigna l'acció (window.open) a la variable global. Finalment tanca el document de la finestra, l'enfoca i retorna "fals".

A la secció <body> farem l'enllaç amb un petit truc: deixarem l'adreça en blanc i assignarem l'acció a levent onClick, utilitzant la forma onClick="return(funció())". Com que la funció que s'executa retorna fals, el vincle buit no s'executarà.

<script language="javascript">
var finestra
function obreFinestra(fitxer) {
  window.focus()
  finestra = window.open( fitxer, 'win1', 'width=440,height=300,top=100,left=100' )
  finestra.document.close()
  finestra.focus()
  return false
}
</script>
</head>

<body ...>
<a href="" onClick="
return( obreFinestra('m3p2_3.htm') )">Enviar arxius</a>
<br>
...
 
3.- Escriure a la finestra
En el cas anterior teníem un arxiu que s'obria en una finestra. Ara crearem una finestra sense arxiu i l'omplirem de contingut. Utilitzem, naturalment, finestra.document.write(). De fet, podem fer diverses accions sobre el document o altres components de la finestra:

  finestra.element[.subelements].acció()

També podem consultar i, depenent del navegador, modificar, propietats, valors en camps de formularis i, fins i tot, variables contingudes en scripts. En el cas que ens ocupa, però, només es tracta d'escriure a la finestra. Agafem com a base l'exemple anterior.

La funció rep com a paràmetre un codi de color, que serà diferent segons quin sigui l'enllaç que l'ha feta obrir. A continuació s'escriu tota l'estructura d'una pàgina web senzilla. Com a color de fons utilitza el del paràmetre i, a més, l'escriu a la pàgina.

Com que hem d'utilitzar mètodes de l'objecte "document" de la finestra en diverses línies, emprem la declaració with(), que ens permet especificar sobre quin objecte base s'apliquen les instruccions de tot un bloc. A dintre del bloc, no cal escriure l'objecte.

<script language="javascript">
var finestra
function obreFinestra(clr) {
  window.focus()
  finestra = window.open( '', 'win1', 'width=300,height=150,top=200,left=200' )
  with( finestra.document ) {
    writeln( '<html>\n<head>\n<title>Colors</title>\n</head>')
    writeln( '<body bgcolor = "#' + clr + '">\n<center>')
    writeln( '<h1><br>#' + clr + '</h1>' )
    writeln( '</center>\n</body>\n</html>')
    close()
  }
  finestra.focus()
  return false
}
</script>
</head>

<body ...>
<a href="" onClick="
return( obreFinestra('66CCFF') )">Finestra blava</a><br>
<a href="" onClick="
return( obreFinestra('EE6666') )">Finestra roja</a><br>
<a href="" onClick="
return( obreFinestra('99FF66') )">Finestra verda</a><br>
...
 
4.- Tancar la finestra
Ja hem vist com podem obrir una finestra i escriure-hi. També, com fer enllaços que passin paràmetres i com una funció els pot recollir i utilitzar. Fins ara, hem tancat les finestres fent clic en el botó (x) Tancar, o amb la combinació de tecles Alt+F4.

També la podem tancar des de la pròpia pàgina, o des de la que l'ha oberta. En tenim prou amb un vincle, un botó o qualsevol event que puguem interceptar.

close() és el mètode que s'utilitza per tancar una finestra. Des de la pròpia pàgina escrivim window.close(). Des de la pàgina "mare" escrivim nomFinestra.close(). En aquest cas, cal comprovar abans que la finestra existeix, si no provocarem una errada del navegador.

  if ( finestra ) finestra.close(); return false

El codi és prou curt i el podem escriure "en línia". Si ho preferim, també podem fer una funció com la d'obrir finestra. Cal recordar que l'enllaç és buit, i per això hem de retornar "false".

<script language="javascript">
var finestra
function obreFinestra() {
  window.focus()
  finestra = window.open( '', 'win1', 'width=300,heigth=150,top=200,left=200' )
  with( finestra.document ) {
    writeln( '<html>\n<head>\n<title>Nova finestra </title>\n</head>')
    writeln( '<body>\n<center>')
    writeln( '<a href="" onClick="window.close();return false">Tancar</a>' )
    writeln( '</center>\n</body>\n</html>')
    close()
  }
  finestra.focus()
  return false
}
</script>
</head>

<body ...>
<a href="" onClick="
return( obreFinestra() )">Obrir finestra</a><br>
<a href="" onClick="
if(finestra) finestra.close();return false">Tancar finestra</a><br>
...
 
5.- L'inspector d'objectes
Aquesta eina analitza pàgines i en mostra els objectes. Permet endinsar-se en la jerarquia i veure les propietats, és a dir, veure el mateix que "veu" el navegador.

Inspector d'Objectes JavaScriptNomés hem utilitzat DHTML i JavaScript, de manera que el propi inspector pot ser objecte d'estudi, més endavant, per veure com s'ha fet.

Només pot funcionar a la mateixa màquina on és la pàgina que inspecciona, és a dir, ni el podem utilitzar des de la xarxa, ni podem analitzar pàgines a través d'una connexió.