Qué es Javascript

Javascript es un lenguaje de programación utilizado para crear pequeños programitas

encargados de realizar acciones dentro del ámbito de una página web. Con Javascript
podemos crear efectos especiales en las páginas y definir interactividades con el usuario.
El navegador del cliente es el encargado de interpretar las instrucciones Javascript y
ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y
tal vez el único, con que cuenta este lenguaje es el propio navegador.

Javascript es el siguiente paso, después del HTML, que puede dar un programador de la
web que decida mejorar sus páginas y la potencia de sus proyectos. Es un lenguaje de
programación bastante sencillo y pensado para hacer las cosas con rapidez, a veces con
ligereza. Incluso las personas que no tengan una experiencia previa en la programación
podrán aprender este lenguaje con facilidad y utilizarlo en toda su potencia con sólo un
poco de práctica.

Entre las acciones típicas que se pueden realizar en Javascript tenemos dos vertientes.
Por un lado los efectos especiales sobre páginas web, para crear contenidos dinámicos y
elementos de la página que tengan movimiento, cambien de color o cualquier otro
dinamismo. Por el otro, javascript nos permite ejecutar instrucciones como respuesta a las
acciones del usuario, con lo que podemos crear páginas interactivas con programas como
calculadoras, agendas, o tablas de cálculo.

¿Qué es el Modelo de Objetos del Documento?

Introducción

El Modelo de Objetos del Documento (DOM) es una interfaz de programación de

aplicaciones (API) para documentos HTML y XML. Define la estructura lógica de los
documentos y el modo en que se accede y manipula un documento. En la especificación
del DOM, el término "documento" se utiliza en un sentido amplio. XML se utiliza cada vez
más como un medio para representar muchas clases diferentes de información que puede
ser almacenada en sistemas diversos, y mucha de esta información se vería, en términos
tradicionales, más como datos que como documentos. Sin embargo, XML presenta estos
datos como documentos, y se puede usar el DOM para manipular estos datos.

Con el Modelo de Objetos del Documento los programadores pueden construir

documentos, navegar por su estructura, y añadir, modificar o eliminar elementos y
contenido. Se puede acceder a cualquier cosa que se encuentre en un documento HTML
o XML, y se puede modificar, eliminar o añadir usando el Modelo de Objetos del
Documento, salvo algunas excepciones. En particular, aún no se han especificado las
interfaces DOM para los subconjuntos internos y externos de XML.

Siendo una especificación del W3C, uno de los objetivos importantes del Modelo de
Objetos del Documento es proporcionar un interfaz estándar de programación que pueda
utilizarse en una amplia variedad de entornos y aplicaciones. El DOM se ha diseñado para
ser utilizado en cualquier lenguaje de programación. Para proporcionar una especificación
de las interfaces DOM precisa e independiente del lenguaje, hemos decidido definir las
especificaciones en OMG IDL, según se define en la especificación CORBA 2.2. Además
de la especificación OMG IDL, proporcionamos correspondencias con los lenguajes Java
y ECMAScript (un lenguaje de scripts industrial basado en JavaScript y JScript). Nota:
OMG IDL se usa únicamente como un medio de especificar las interfaces independiente
de la plataforma y del lenguaje. Se podrían haber utilizado otros IDLs. En general, los
IDLs se diseñan para entornos de computación específicos. El Modelo de Objetos del
Documento puede implementarse en cualquier entorno de computación, y no requiere las
librerías de enlazado de objetos (object binding runtimes) generalmente asociadas con
tales IDLs.

Lo que el Modelo de Objetos del Documento es

El DOM es un API de programación para documentos. Guarda una gran similitud con
la estructura del documento al que modeliza. Por ejemplo, considérese esta tabla, tomada
de un documento HTML:

<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>

El DOM representa esta tabla de este modo:

Representación del DOM de la tabla del ejemplo

 En el DOM, los documentos tienen una estructura lógica que es muy parecida a un
árbol. Para ser más precisos, es más bien como un "bosque" o una "arboleda", que puede
contener más de un árbol. Sin embargo, el DOM no especifica que los documentos deban
ser implementados como un árbol o un bosque, ni tampoco especifica cómo deben
implementarse las relaciones entre objetos. El DOM es un modelo lógico que puede
implementarse de cualquier manera que sea conveniente. En esta especificación, usamos
el término modelo de estructura para describir la representación en forma de árbol de un
documento, evitando la utilización de términos tales como "árbol" o "bosque" para evitar la
implicación de una implementación en particular. Una propiedad importante de los
modelos de estructura del DOM es su isomorfismo estructural: si dos implementaciones
cualesquiera del Modelo de Objetos del Documento se usan para crear una
representación del mismo documento, ambas crearán el mismo modelo de estructura, con
exactamente los mismos objetos y relaciones.

Se eligió el nombre "Modelo de Objetos del Documento" porque es un "modelo de

objetos" en el sentido tradicional del diseño orientado a objetos: los documentos se
modelizan usando objetos, y el modelo comprende no solamente la estructura de un
documento, sino también el comportamiento de un documento y de los objetos de los
cuales se compone. En otras palabras, los nodos del diagrama anterior no representan
una estructura de datos, sino que representan objetos, los cuales pueden tener funciones
e identidad. Como modelo de objetos, el DOM identifica:

 las interfaces y objetos usados para representar y manipular un documento

 la semántica de estas interfaces y objetos, incluyendo comportamiento y atributos
 las relaciones y colaboraciones entre estas interfaces y objetos

Tradicionalmente, la estructura de los documentos SGML se ha representado

mediante un modelo de datos abstractos, no con un modelo de objetos. En un modelo de
datos abstractos, el modelo se centra en los datos. En los lenguajes de programación
orientados a objetos, los datos se encapsulan en objetos que ocultan los datos,
protegiéndolos de su manipulación directa desde el exterior. Las funciones asociadas con
estos objetos determinan cómo pueden manipularse los objetos, y son parte del modelo
de objetos.

El Modelo de Objetos del Documento consiste actualmente de dos partes, el Núcleo

del DOM y el DOM HTML. El Núcleo del DOM representa la funcionalidad usada para los
documentos XML, y también sirve de base para el DOM HTML. Una implementación
conforme del DOM debe implementar todas las interfaces fundamentales del capítulo
sobre el Núcleo con la semántica definida. Además, debe implementar o bien el DOM
HTML o bien las interfaces extendidas (XML), o ambas, con la semántica definida.
El objeto window

Se trata del objeto más alto en la jerarquía del navegador (navigator es un objeto
independiente de todos en la jerarquía), pues todos los componentes de una página web
están situados dentro de una ventana. El objeto window hace referencia a la ventana
actual. Veamos a continuación sus propiedades y sus métodos.

Propiedades

 closed. Válida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un

booleano que nos dice si la ventana está cerrada ( closed = true ) o no ( closed =
false ).
 defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra
de estado (status bar) del navegador.
 frames. Es un array: cada elemento de este array (frames[0], frames[1], ...) es uno
de los frames que contiene la ventana. Su orden se asigna según se definen en el
documento HTML.
 history. Se trata de un array que representa las URLS visitadas por la ventana
(están almacenadas en su historial).
 length. Variable que nos indica cuántos frames tiene la ventana actual.
 location. Cadena con la URL de la barra de dirección.
 name. Contiene el nombre de la ventana, o del frame actual.
 opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta
usando el método open() que veremos cuando estudiemos los métodos.
 parent. Referencia al objeto window que contiene el frameset.
 self. Es un nombre alternativo del window actual.
 status. String con el mensaje que tiene la barra de estado.
 top. Nombre alternativo de la ventana del nivel superior.
 window. Igual que self: nombre alternativo del objeto window actual.

Métodos

 alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo

 blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4.
 clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el método
setInterval(), también del objeto window). A partir de NS 4, IE 4.
 clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver el
método setTimeout(), también del objeto window).
 close(). Cierra el objeto window actual.
 confirm(mensaje). Muestra un cuadro de diálogo con el mensaje 'mensaje' y dos
botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa aceptar y
devuelve false si se pulsa cancelar.
 focus(). Captura el foco del ratón sobre el objeto window actual. A partir de NS 3,
IE 4.
 moveBy(x,y). Mueve el objeto window actual el número de pixels especificados por
(x,y). A partir de NS 4.
 moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). A partir de
NS 4.
 open(URL,nombre,caracteristicas). Abre la URL que le pasemos como primer
parámetro en una ventana de nombre 'nombre'. Si esta ventana no existe, abrirá
una ventana nueva en la que mostrará el contenido con las características
especificadas. Las características que podemos elegir para la ventana que
queramos abrir son las siguientes:
o toolbar = [yes|no|1|0]. Nos dice si la ventana tendrá barra de herramientas
(yes,1) o no la tendrá (no,0).
o location = [yes|no|1|0]. Nos dice si la ventana tendrá campo de localización
o no.
o directories = [yes|no|1|0]. Nos dice si la nueva ventana tendrá botones de
dirección o no.
o status = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de estado o
no.
o menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barra de
menús o no.
o scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendrá barras de
desplazamiento o no.
o resizable = [yes|no|1|0]. Nos dice si la nueva ventana podrá ser cambiada
de tamaño (con el ratón) o no.
o width = px. Nos dice el ancho de la ventana en pixels.
o height = px. Nos dice el alto de la ventana en pixels.
o outerWidth = px. Nos dice el ancho *total* de la ventana en pixels. A partir
de NS 4.
o outerHeight = px. Nos dice el alto *total* de la ventana el pixels. A partir de
NS 4
o left = px. Nos dice la distancia en pixels desde el lado izquierdo de la
pantalla a la que se debe colocar la ventana.
o top = px. Nos dice la distancia en pixels desde el lado superior de la
pantalla a la que se debe colocar la ventana.
 prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo que
contiene una caja de texto en la cual podremos escribir una respuesta a lo que
nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es opcional, y
mostrará la respuesta por defecto indicada al abrirse el cuadro de diálogo. El
método retorna una cadena de caracteres con la respuesta introducida.
 scroll(x,y). Desplaza el objeto window actual a las coordenadas especificadas por
(x,y). A partir de NS3, IE4.
 scrollBy(x,y). Desplaza el objeto window actual el número de pixels especificado
por (x,y). A partir de NS4.
 scrollTo(x,y). Desplaza el objeto window actual a las coordenadas especificadas
por (x,y). A partir de NS4.
 setInterval(expresion,tiempo). Evalua la expresión especificada después de que
hayan pasado el número de milisegundos especificados en tiempo. Devuelve un
valor que puede ser usado como identificativo por clearInterval(). A partir de NS4,
IE4.
 setTimeout(expresion,tiempo). Evalua la expresión especificada después de que
hayan pasado el número de milisegundos especificados en tiempo. Devuelve un
valor que puede ser usado como identificativo por clearTimeout(). A partir de NS4,
IE4.