Los objetos en JS no siguen una jerarquía de herencia, sino más bien de "contiene a" o "está contenido en". Así por ejemplo, si desde una ventana se crea otra nueva, no se puede acceder a un elemento de la ventana padre con parent.elemento como cabría esperar. En cambio sí existe una relación padre-hijas entre una ventana con "frames" y dichos "frames". Por otra parte, para hacer referencia a un formulario desde un elementos del mismo se debe utilizar this.form y no this.parent.
El modelo de objetos que aparecen dentro del navegador se denomina DOM (Document Object Model). Los objetos que componen el modelo DOM son los siguientes:
Algunos componentes de la ventana del navegador no son alterables y sólo es posible definir si aparecerán o no al crear la ventana (Barra de Herramientas, Barra de Menús, Cuadro de Dirección, Barra de Estado, Historial). Otros es posible modificarlos dinámicamente (Documento, Contenido de la Barra de Estado, location, history).
Los principales objetos del navegador son:
Cada ventana del navegador abierta corresponde a un objeto window. Cada ventana visualiza una página que corresponde al objeto document. Cada ventana visualiza una dirección URL que corresponde al objeto location. Cada ventana tiene una historia de las páginas visitadas que corresponde al objeto history.
En realidad JS siempre asume implícitamente el objeto window actual, por lo que basta con escribir document.write(...) en vez de window.document.write(...).
Los principales métodos son:
El método window.open() permite crear una ventana "pop-up". Lo normal es abrir la ventana al pulsar algún botón. Se puede definir un botón de formulario con INPUT, pero también se puede utilizar una imagen incluida en un enlace con el protocolo javascript:función(..). Ej.:
<A HREF='javascript: openNote()'>
<IMG SRC="Images/gobtn.gif" WIDTH=23 HEIGHT=22
VSPACE=2 HSPACE=2 ALIGN=LEFT BORDER=0>
<A>
La sintaxis del método open es:
open(urlstr, wndname [, features [, replace]])donde:
Una vez abierta una ventana en blanco, el contenido del documento se puede crear dinámicamente mediante sentencias write() o writeln().
Ejemplo de "pop-up" a modo de "post-it":
<SCRIPT>
var aNoteWin; //Global (o mejor array de pop-ups).
function openNote(topic)
{
//Abrir ventana vacía (primer parámetro en blanco).
aPopUp=window.open('','Note','toolbar=no,location=no,\
directories=no,status=no,scrollbars=yes,resizable=yes,\
copyhistory=no,width=300,height=200');
astr='<HTML><HEAD><BR><TITLE>' + topic + '</TITLE>'
astr+='</HEAD>'
astr+='<body background="../../webpages/bookbkg.gif">'
astr+=topic + '<BR>'
astr+='</body background="../../webpages/bookbkg.gif"></HTML>'
aPopUp.document.write(astr)
aPopUp.document.close()
self.aNoteWin = aPopUp
}
function closeNote(which)
{
which.close()
}
</SCRIPT>
<FORM NAME='noteForm'>
<INPUT TYPE='button' NAME='makeBtn' VALUE='Make Note' ¬
onclick='openNote("John Murphy at 7:00; bring salad")'>
<INPUT TYPE='button' NAME='closeBtn' VALUE='Close note' ¬
onclick='closeNote(aNoteWin)'>
</FORM>
Cuando se crea una ventana no se puede crear otra con el mismo nombre.
En la nueva ventana se puede escribir cualquier cosa, incluso formularios y funciones JS. La propiedad bgColor se puede modificar en cualquier momento, mientras que la propiedad fgColor sólo se puede modificar una vez después de escribir el tag BODY. Ejemplo:
function openNote(topic)
{
aPopUp=window.open('','Note','toobar=no,location=no,¬
directories=no,status=no,scrollbars=yes,resizable=yes, ¬
copyhistory=no,width=300,height=200')
doc=aPopUp.document
ndoc.close(); ndoc.open(); //Borrar documento.
astr='<HTML><HEAD><BR><TITLE>' + topic + '</TITLE>'
astr +='</HEAD>'
astr +='<SCRIPT>'
astr +='function closeNote(aName){\n'
astr +=' self.close()\n'
astr +='}\n'
astr +='function saveNote(aName){\n'
//Se verá más adelante: location.search o "cookies".
astr +='}\n'
astr +='<\/SCRIPT>'
astr +='<body background="../../webpages/bookbkg.gif">'
astr +='<FORM>'
astr +='<TABLE ALIGN=LEFT BORDER><TR ALIGN=CENTER><TD>'
astr +='\<INPUT TYPE=button NAME=saveBtn VALUE="Save" ¬
onClick="saveNote()" \>'
astr +='</TD>'
astr +='<TD ROWSPAN=4>' + topic
astr +='</TD>'
astr +='</TR><TR ALIGN=CENTER><TD>'
astr +='\<INPUT TYPE=button NAME=closeBtn VALUE="Close" ¬
onClick="closeNote()" \>'
astr +='</TD></TR>'
astr +='<TR><TD><BR></TD></TR>'
astr +='<TR><TD><BR></TD></TR>'
astr +='</TABLE>'
astr +='</FORM>'
astr +='<BR CLEAR=ALL><H3><BR></H3>'
astr +='Note: Save button is not active yet'
astr +='</body background="../../webpages/bookbkg.gif"></HTML>'
ndoc.write(astr)
ndoc.close()
self.aNoteWin = aPopUp
}
También es posible creear documentos con tipos MIME diferentes de HTML, como por ejemplo código VRML (Vitual Reality Modelling Language), siempre y cuando se disponga de un plug-in de VRML. Ejemplo:
<SCRIPT language="JavaScript"><!--
function vrmlScene()
{
vrml=open("", "displayWindow", "width=500,height=400,\
status=yes,toolbar=yes,menubar=yes");
vrml.document.open("x-world/x-vrml");
vr=vrml.document;
// create VRML-scene
vr.writeln("#VRML V1.0 ascii");
//Light
vr.writeln("Separator {");
vr.writeln(" DirectionalLight {");
vr.writeln(" direction 3 -1 -2.5");
vr.writeln(" }");
// Camera
vr.writeln(" PerspectiveCamera {");
vr.writeln(" position -8.6 2.1 5.6");
vr.writeln(" orientation -0.1352 -0.9831 -0.1233 1.1417");
vr.writeln(" focalDistance 10.84");
vr.writeln(" }");
// Cube
vr.writeln(" Separator {");
vr.writeln(" Material {");
vr.writeln(" diffuseColor 0 0 1");
vr.writeln(" }");
vr.writeln(" Transform {");
vr.writeln(" translation -2.4 .2 1 rotation 0 0.5 1 .9");
vr.writeln(" }");
vr.writeln(" Cube {}");
vr.writeln(" }");
vr.writeln("}");
vr.close();
}
// --></SCRIPT>
<CENTER><FORM>
<INPUT type="button" value="VRML on-the-fly" onClick="vrmlScene()">
</FORM></CENTER>
El contenido de la Barra de Estado está representado por dos propiedades de la ventana:
Describe la dirección URL del documento. La forma completa de una URL es:
protocol//hostname: (port) pathname search hash
donde cada uno de estos elementos corresponde a una propiedad del objeto location, junto con otras dos:
Dispone del método toString() que devuelve el objeto location en forma de cadena con el path absoluto (URL) de la página actual.
Para cargar un nuevo documento basta con asignar al objeto location la cadena con la nueva URL completa.
Cuando de envía un formulario (submit), todos los valores de los elementos del formulario se añaden a la cadena del objeto location separados por '?'. La propiedad search contiene esta cadena, comenzando por el caráter '?'. Cada elemento aparece en la forma elementName=elementValue, separados con '&', con un '+' en lugar de los espacios en blanco, y con cualquier carácter no alfanumérico en hexadecimal en la forma '%hh'.
Un recurso es utilizar la propiedad search para guardar cualquier información de forma temporal, comenzando por '?' y codificando los espacios y caracteres no alfanuméricos tal como se acaba de explicar.
El objeto history guarda la lista de páginas visitadas. Posee la propiedad length con el número de páginas en la lista. Por razones de seguridad, no existe ningún array para obtener directamente las páginas visitadas.
Métodos:
Contiene todos los objetos incluidos en la página, y se puede acceder a ellos a través de tres propiedades de tipo array:
Otras propiedades son:
La mayoría de estas propiedades no afecta al documento una vez cerrado, pero sí a los nuevos documentos creados dinámicamente (por ejemplo con sentencias de JS que se ejecuten en la HEAD).
Algunos métodos son:
Si se necesitan dos niveles de cadenas se pueden utilizar comillas (") y apóstrofos ('). Si se necesitan tres niveles, se indican como secuencias de escape (\" y \') o bien se asignan los literales a variables auxiliares.
Si se escribe en un documento sin más no ocurre nada. Es necesario abrirlo con open(), escribir lo que se desee con write() (lo que se escribe se almacena en un stream de memoria), y cerrarlo con close() para volcar el stream en el documento. Los datos que se escriben aparecerán secuencialmente, como en una impresora. También es una buen práctica cerrar un documento antes de abrirlo, por si acaso.
Al abrir un documento en una ventana, se pierde todo el contenido de ésta. Si no se indica un objeto ventana concreto, se borra la ventana actual (se puede recuperar recargando la página de nuevo).
Cuando se abre una ventana, el documento asociado a la ventana también se abre. Es posible escribir en él mediante scripts tanto en HEAD como en BODY. El documento se cierra automáticamente cuando alcanza el tag </HTML>. Si la ventana se abre con open() basta con escribir en el documento y cerrarlo.