html dinamico ,modelo de objetos y javascript

8/13/2019 HTML Dinamico ,Modelo de Objetos y Javascript

1/127

Este libro revisa desde losfundamentos todo eledificio conceptual sobreel que se basa la

construccin de pginasweb de cliente: esto es,se centra en aquello queuna pgina web una vezdescargada- es capaz dehacer en el navegador delusuario. Para ello explicaen qu se basa el HTMLDinmico, losfundamentos y uso delModelo de Objetos de

Documento y finalmente,analiza el lenguajeJavascript y lascapacidades de las Hojasde Estilo en Cascada,como elementos bsicosde la construccindinmica de pginas.

Respecto a losconocimientos previos, esimportante que el lectormaneje, siquierabsicamente, losfundamentos del lenguajeHTML, y conviene tenerconocimiento de algnlenguaje de programacinadicional Visual Basic,Delphi, etc.

HHTTMMLLDDIINNMMIICCOO,,MMOODDEELLOOSSDDEEOOBBJJEETTOOSS

YYJJAAVVAASSCCRRIIPPTT

MMAARRIINNOO

PPOOSSAADDAASSYY

JJOOSS

LLUUIISS

HHEEVVIIAA

Desarrollo de software


2/127


3/127

ADVERTENCIA LEGAL

Todos los derechos de esta obra estn reservados a Grupo EIDOS Consultora y Documentacin

Informtica, S.L.

El editor prohbe cualquier tipo de fijacin, reproduccin, transformacin, distribucin, ya sea medianteventa y/o alquiler y/o prstamo y/o cualquier otra forma de cesin de uso, y/o comunicacin pblica de la

misma, total o parcialmente, por cualquier sistema o en cualquier soporte, ya sea por fotocopia, medio

mecnico o electrnico, incluido el tratamiento informtico de la misma, en cualquier lugar del universo.

El almacenamiento o archivo de esta obra en un ordenador diferente al inicial est expresamente

prohibido, as como cualquier otra forma de descarga (downloading), transmisin o puesta a disposicin

(an en sistema streaming).

La vulneracin de cualesquiera de estos derechos podr ser considerada como una actividad penal

tipificada en los artculos 270 y siguientes del Cdigo Penal.

La proteccin de esta obra se extiende al universo, de acuerdo con las leyes y convenios internacionales.

Esta obra est destinada exclusivamente para el uso particular del usuario, quedando expresamente

prohibido su uso profesional en empresas, centros docentes o cualquier otro, incluyendo a sus empleadosde cualquier tipo, colaboradores y/o alumnos.

Si Vd. desea autorizacin para el uso profesional, puede obtenerla enviando un e-mail [email protected]

al fax (34)-91-5017824.

Si piensa o tiene alguna duda sobre la legalidad de la autorizacin de la obra, o que la misma ha llegado

hasta Vd. vulnerando lo anterior, le agradeceremos que nos lo comunique al e-mail [email protected] al

fax (34)-91-5017824). Esta comunicacin ser absolutamente confidencial.

Colabore contra el fraude. Si usted piensa que esta obra le ha sido de utilidad, pero no se han abonado los

derechos correspondientes, no podremos hacer ms obras como sta.

Marino Posadas y Jos Luis Hevia, 2000

Grupo EIDOS Consultara y Documentacin Informtica, S.L., 2000

ISBN 84-88457-22-7

HTML dinmico, modelos de objetos y JavaScriptMarino Posadas y Jos Luis Hevia

Responsable editorial

Paco Marn ([email protected])

AutoedicinMagdalena Marn ([email protected])

Marino Posadas ([email protected])

Jos Luis Hevia ([email protected])

Coordinacin de la edicin

Antonio Quirs ([email protected])

Grupo EIDOSC/ Tllez 30 Oficina 2

28007-Madrid (Espaa)

Tel: 91 5013234 Fax: 91 (34) 5017824www.grupoeidos.com/www.eidos.es

www.LaLibreriaDigital.com
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]://www.grupoeidos.com/www.eidos.eshttp://www.grupoeidos.com/www.eidos.eshttp://www.lalibreriadigital.com/http://www.lalibreriadigital.com/http://www.lalibreriadigital.com/http://www.grupoeidos.com/www.eidos.esmailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]


4/127


5/127

ndice

NDICE...................................................................................................................................................5HTML DINMICO Y MODELOS DE OBJETOS ...........................................................................9

CONOCIMIENTOS PREVIOS ...................................................................................................................9OBJETIVOS DEL CURSO ........................................................................................................................9POR QU HTML DINMICO? ...........................................................................................................10EL WORLD WIDE WEB CONSORTIUM ................................................................................................10HTML Y LA W3C ..............................................................................................................................10

HTML Dinmico y Modelos de Objetos ................................................................................... 11Lo que aporta el HTML Dinmico ............................................................................................11La solucin: Los Modelos de Objetos ....................................................................................... 12El Modelo de objetos de documento (DOM).............................................................................13

Programando los objetos de DOM.............................................................................................14La jerarqua de objetos de DOM................................................................................................14Los objetos window y document ....................................................................................................15

EL OBJETO WINDOW...........................................................................................................................16Propiedades del objeto window..................................................................................................... 16La propiedad event y el modelo de objetos de HTML Dinmico ..................................................16Otras formas de asociar cdigo de script a eventos......................................................................18Ficheros de script independientes ................................................................................................. 21

Otras propiedades del objeto event............................................................................................21Un manejador genrico de eventos. ..............................................................................................21

EL MODELO DE EVENTOS ...................................................................................................................22PROPIEDADES DE WINDOW ASOCIADAS AL EXPLORADOR.................................................................24

La propiedad history......................................................................................................................24La propiedad location....................................................................................................................24


6/127

La propiedad screen ......................................................................................................................24Temporizadores: los mtodos setTimeout(), setInterval(), clearTimeout() y clearInterval() ........ 25Mtodos de window para creacin de ventanas............................................................................25

Cajas de mensaje estndar: alert() .............................................................................................26Cmo solicitar informacin del usuario: mtodosprompt() y confirm() ...................................26

Ventanas de Dilogo Modales: showModalDialog() ....................................................................28Apertura de nuevas ventanas del Explorador: mtodo open()...................................................30

LA PROPIEDADDOCUMENT.................................................................................................................31Una vista jerrquica del modelo de objetos DOM........................................................................ 36

Ejemplo de Creacin Dinmica de Tablas mediante el modelo DHTML.................................38OTRAS NOVEDADES QUE APORTA DHTML A TRAVS DE EJEMPLOS ................................................40

Posicionamiento Dinmico............................................................................................................41Filtros y Transiciones....................................................................................................................42Descarga dinmica de tipos de letra (Font download) .................................................................42

DATOS ENLAZADOS...........................................................................................................................42Modelo de funcionamiento de los objetos de enlace de datos....................................................... 43Ejemplo de uso de un Data Source Object (DSO)......................................................................... 43

HTML 4.0: CARACTERSTICAS E IMPLEMENTACIN EN EXPLORER YNETSCAPE ............................47 Estndares e implementaciones.....................................................................................................47SGML y HTML ..............................................................................................................................48

Comentarios, atributos y caracteres especiales..........................................................................48Tipos de datos............................................................................................................................48

URLs......................................................................................................................................49Colores...................................................................................................................................49Multilongitud.........................................................................................................................49

Tipos de Hiperenlaces................................................................................................................49Descriptores de Media ...............................................................................................................49Nombres de marcos de destino ..................................................................................................49Declaraciones de Tipo de documento........................................................................................49

La marca ...............................................................................................................50La marca ................................................................................................................50La marca ................................................................................................................50El atributo ..............................................................................................................50La marca ...................................................................................................50La marca ...............................................................................................................51

Elementos identificadores..........................................................................................................51Bloques y elementos en lnea.................................................................................................51Marcas de Agrupacin...............................................................................................................51Encabezamientos .......................................................................................................................52

La marca ............................................................................................................52El Texto: prrafos, lneas y frases..............................................................................................52

El espacio en blanco ..............................................................................................................52Frases.....................................................................................................................................52 Citas.......................................................................................................................................52 Prrafos..................................................................................................................................52Rupturas de lnea ...................................................................................................................53Guiones..................................................................................................................................53Texto preformateado..............................................................................................................53

Cambios en el documento..........................................................................................................53Listas..........................................................................................................................................54Tablas y Netscape......................................................................................................................54

La marca ..............................................................................................................54La marca ..........................................................................................................54

Columnas, filas y agrupaciones de ambas .................................................................................54Hiperenlaces ..............................................................................................................................55


7/127

La marca ........................................................................................................................55La marca .................................................................................................................55

Objetos, Imgenes y Applets .....................................................................................................55La marca ...................................................................................................................55

CONCLUSIN......................................................................................................................................55

PROGRAMACIN DE HOJAS DE ESTILO EN CASCADA (CSS)............................................57INTRODUCCIN ..................................................................................................................................57LAS CSS O CASCADE STYLE SHEETS (HOJAS DE ESTILO EN CASCADA)............................................58

Es todo correcto en las CSS?.......................................................................................................58Comenzando con las CSS ..............................................................................................................59Sintaxis de las reglas CSS..............................................................................................................60

Bloques ......................................................................................................................................61Atributos de estilo CSS..............................................................................................................61Estilos CSS ................................................................................................................................61Clases y Pseudoclases................................................................................................................62

Tipos de documentos DOCTYPE...................................................................................................63

Versin loose..........................................................................................................................63Versin Strict .........................................................................................................................63Versin XHTML....................................................................................................................64

Especificacin CSS ........................................................................................................................64Curiosidades y nuevos estilos................................................................................................80

CASO PRCTICO.................................................................................................................................80Definicin de la prctica ...............................................................................................................80La forma final de la pgina... ........................................................................................................81El diseo inicial de la pgina... .....................................................................................................81Aplicando estilos. Anlisis de requisitos. ......................................................................................83

INTRODUCCIN A JAVASCRIPT................................................................................................. 87

INTRODUCCIN ..................................................................................................................................87Oficialidad, Autora y Estandarizacin.........................................................................................87Javascript y el escenario de ejecucin ..........................................................................................88Objetos de Java Script de servidor................................................................................................89Caractersticas del lenguaje Javascript ........................................................................................89

Sentencias ..................................................................................................................................89Operadores....................................................................................................................................90

De comparacin.........................................................................................................................90Aritmticos ................................................................................................................................90

Modulo (%)............................................................................................................................90Operador de Auto-incremento (++).......................................................................................91Operador de Decremento (--).................................................................................................91

Negacin (-)...........................................................................................................................91Operadores lgicos ....................................................................................................................91And ( && ).............................................................................................................................91Or ( || )....................................................................................................................................92Not (!) ....................................................................................................................................92

Operadores de cadenas de texto.................................................................................................92Operadores de asignacin..........................................................................................................92Operadores de desplazamiento .................................................................................................. 93

And a nivel de bit (&)............................................................................................................93Or a nivel de bit (|).................................................................................................................93Not a nivel de bit (~).............................................................................................................. 94

Operadores especiales................................................................................................................94Operador condicional (?:)......................................................................................................94Operador Coma (,).................................................................................................................94


8/127

delete......................................................................................................................................95new.........................................................................................................................................95this .........................................................................................................................................95Tipeof.....................................................................................................................................95

Los Tipos de datos especiales....................................................................................................96PALABRAS RESERVADAS DE JAVASCRIPT .........................................................................................96

var .............................................................................................................................................. 97ESTRUCTURAS DE CONTROL ..............................................................................................................98

Sentencia if - else...........................................................................................................................98switch.........................................................................................................................................98Comentarios...............................................................................................................................99

Bucles while...................................................................................................................................99Bucles do - while..........................................................................................................................100Bucles for.....................................................................................................................................100Sentencia break............................................................................................................................101continue .......................................................................................................................................101delete............................................................................................................................................102

export...........................................................................................................................................102import........................................................................................................................................... 103function ........................................................................................................................................103return ...........................................................................................................................................104

OBJETOS PREDEFINIDOS POR JAVASCRIPT.......................................................................................104Objeto array.................................................................................................................................104Objeto date...................................................................................................................................104

Mtodos del objeto Date..........................................................................................................105Ejercicio prctico de date.........................................................................................................106

Objeto Math.................................................................................................................................107Propiedades de Math................................................................................................................107Mtodos de Math.....................................................................................................................107

Ejercicio prctico de math .......................................................................................................108Objeto string................................................................................................................................109Propiedades de String ..............................................................................................................109Mtodos de String....................................................................................................................109

PRCTICAS CON JAVASCRIPT..................................................................................................111

JAVASCRIPT A TRAVS DE EJEMPLOS...............................................................................................111Ejercicios bsicos ........................................................................................................................111

Construccin y llamada a una funcin.....................................................................................111Utilizacin de cajas de dilogo................................................................................................112Las propiedades del objeto window.........................................................................................113

Control de usuarios mediante password ..............................................................................113

Navegabilidad mediante la propiedad history......................................................................114Ubicacin actual mediante URL, y referencias agrupadas mediante with...........................114 Averiguar la versin y el tipo de navegador utilizado:........................................................115

Creacin de un objeto..............................................................................................................116Mas aplicaciones de los objetos: Presentar Fechas y Horas ...................................................118Otro ejemplo, ms completo....................................................................................................118Escritura dinmica de un documento.......................................................................................120Llamada condicional a una funcin.........................................................................................121Ejemplos de uso del modelo de objetos DOM ........................................................................121

Uso del mtodo cloneNode..................................................................................................121Algunos efectos visuales..........................................................................................................124

Degradacin de fondos ........................................................................................................124Posicionamiento por capas mediante estilos........................................................................124

Algunos sitios web de utilidad para los lectores......................................................................126


9/127

HTML Dinmico y Modelos de Objetos

Conocimientos previosEsta obra asume que el lector conoce, siquiera superficialmente, el lenguaje bsico de construccin depginas Web (HTML), y preferiblemente (aunque esperamos que no resulte imprescindible), algnotro lenguaje de programacin orientado a eventos (Visual C++, Visual Basic, Visual FoxPro, Delphi,etc.

Objetivos del Curso

Este curso pretende revisar los aspectos fundamentales de las tecnologas implicadas en la

construccin de pginas web de cliente, esto es, de cmo programar su comportamiento en losnavegadores, independientemente de los mecanismos implicados en la generacin de dichas pginasen los proveedores de contenidos. O dicho de otro modo, lo que una pgina puede hacer una vez quees cargada y visualizada por un navegador, y que genricamente se conoce bajo el nombre comn deDHTML o HTML Dinmico.

Esto supone en el estado actual de las tecnologas- que no sea uno slo el lenguaje o estndar usadoen la construccin de pginas, sino un conjunto de ellos, cada uno de los cuales, con su pequeahistoria, su especificacin oficial y un comportamiento de cara al desarrollador.


10/127

HTML Dinmico, modelos de Objetos y JavaScript Grupo EIDOS

10

Por qu HTML Dinmico?

Lo primero que podemos preguntarnos es qu fue lo que llevo a los grandes distribuidores de softwarea cambiar el HTML de siempre. La respuesta ms inmediata la encontramos en la necesidad de separar

los datos del contenido. Hasta ese momento, los dos estaban indisolublemente unidos y no podadisponerse de ficheros de presentacin independientes que permitieran cambiar un estilo depresentacin simultneamente en todas las pginas de un sitio web. El otro gran problema era lainteractividad. La nica interactividad que se permita se reduca a los hipervnculos. El resto noestaba previsto por un lenguaje que slo se preocupaba de mostrar contenidos.

Adems, el mero hecho de hablar de implementaciones supona problemas, ya que los fabricantes noestaban de acuerdo en la forma de construir los navegadores. Esto, empez a resolverse cuandoapareci en escena un organismo de normalizacin que pretenda hacerse cargo de la elaboracin delos estndares que se utilizasen en Internet. Ese organismo era la World Wide Web Consortium.

El World Wide Web ConsortiumW3C es una entidad de carcter internacional dedicada a la normalizacin, y creada en 1994, similaren cierto sentido a ISO o ANSI. Sus miembros son ms de 400 organizaciones de todo el mundo quecorren con los gastos de financiacin aparte de algunos ingresos estatales- y lo componenprofesionales de la informtica de todos los sectores, cuya misin es la de definir y normalizar lautilizacin de los lenguajes usados en Internet, mediante un conjunto de Recommendations(recomendaciones) que son publicadas libremente, en su sitio Web (www.w3.org) y aprobadas porcomits de expertos compuestos por representantes nominales de la propia W3C y tcnicosespecializados de las ms importantes compaas productoras de software para Internet, distribuidorasy centros de investigacin. Baste citar entre sus miembros ms destacados a Adobe, AOL, Apple,

Cisco, Compaq, IBM, Intel, Lotus, Microsoft, Motorola, Netscape, Novell, Oracle, Sun, y un largoetctera.

Su Web, la alberga el prestigioso Massachussets Institute of Technology (M.I.T.) a travs de suLaboratorio de Informtica (http://www.lcs.mit.edu/) en EE.UU., con rplicas en el INRIA(http://www.inria.fr/)en Europa (Francia) y la Universidad de Keio en Japn (http://www.keio.ac.jp/).Hasta el momento, han desarrollado ms de 20 especificaciones tcnicas, siendo su mentor principalTim Berners-Lee (inventor de la WWW, y accesible en la direccin http://www.w3.org/People/Berners-Lee) quien hace las funciones de jefe de equipo y trabaja en colaboracin con otrosequipos del resto de organizaciones miembro.

HTML y la W3CLa primera especificacin relevante publicada por la W3C fue la versin HTML 3.2, ya que su primertrabajo fue un intento de poner orden en la situacin anterior con una especificacin de compromisoque aclarase de alguna forma el caos existente y que se bautiz como HTML 2.0, entendindose quetodo el desorden anterior a ese momento recibira genricamente el nombre de HTML 1.0, aunquenunca hubiera existido tal especificacin.

Un tiempo despus, se pudo observar que el trabajo que realizaba W3C para la normalizacin diferanotablemente de los planes de Netscape, por lo que hubo de hacer tabla rasa del trabajo anterior yabordar el problema con seriedad, a partir de la situacin real. Al conjunto de dicho trabajo se le llama

de forma genrica HTML 3.0 HTML+. Finalmente, lleg HTML 3.2, que recoga todas lasprincipales caractersticas de Netscape y de Internet Explorer, y que es la primera a la que puedellamrsele estndar de facto.
http://www.lcs.mit.edu/http://www.lcs.mit.edu/http://www.inria.fr/http://www.inria.fr/http://www.keio.ac.jp/http://www.keio.ac.jp/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://www.keio.ac.jp/http://www.inria.fr/http://www.lcs.mit.edu/


11/127

Grupo EIDOS 1. HTML Dinmico y modelos de Objetos

11

HTML Dinmico y Modelos de Objetos

Se dice que HTML 4.0es la ltima y tambin la mejor de las especificaciones actuales. No obstante,existe una revisin posterior para problemas menores, llamada HTML 4.01, pero slo incluye algunascorrecciones a la anterior. Data del 24/Dic/1999, y sobre ella se ha basado una nueva especificacin,llamada XHTML 1.0, que utiliza sintaxis XMLpara las etiquetas HTML, pero que no es objeto deeste libro. Con esta versin final, se pretenden resolver muchos de los problemas que se presentan hoyen da, extendiendo las capacidades del lenguaje en muchas reas y aadiendo posibilidades msacordes con las necesidades de mercado. Sinembargo, probablemente, ser el ltimo, tras una largaagona. La razn, es que su sucesor, XML1 resuelve muchos de los problemas insolubles por losanteriores, ofreciendo un autntico estndar para transporte de informacin, y para presentacionessofisticadas, con elementos multimedia, tratamiento de datos, etc.

Lo que aporta el HTML Dinmico

Entre las aportaciones ms interesantes ligadas a la propuesta DHTML caben destacar las siguientes:

Estilos dinmicos

o Permiten la definicin de caractersticas de presentacin utilizando un lenguaje depresentaciones estndar definido igualmente por la W3C: Las Hojas de Estilo enCascada (CSS). Junto con la nueva etiqueta , permite la definicin separadade formatos que pueden aplicarse a un nmero indeterminado de pginassimultneamente. Permite la redefinicin de estilo para etiquetas estndar de HTML ola creacin de estilos personalizados de usuario. Tambin se puede tener accesoprogramtico a esos estilos, pudiendo cambiarlos en tiempo de ejecucin.Dedicaremos un captulo completo a su uso y fundamentacin ms adelante.

Contenido Dinmico

o Utilizando el modelo de objetos DHTML, es posible cambiar el contenido de undocumento despus de que ha sido cargado. Esto incluye la insercin y borrado deelementos, la modificacin de elementos existentes, y el acceso y modificacin decualquier atributo individual.

Posicionamiento y Animacin

o Entendemos por posicionamiento la capacidad para situar un elemento HTMLespecfico en la ubicacin que se desee en la pgina web, independientemente de la

posicin del resto de elementos. Esto significa que un elemento puede aparecersituado por delante o por detrs de otro, y que podemos establecer de forma absoluta,mediante coordenadas, su posicin en una pgina, sin dependencia funcional alguna.Esta capacidad es una extensin de las posibilidades de las Hojas de Estilo, y formaparte de un conjunto de posibilidades: desde programacin de rutinas de movimientoy establecimiento de intervalos de ejecucin, hasta las nuevas etiquetas como, o la capacidad de insertar applets de Java o componentes ActiveX enlas pginas.

1

El lector puede consultar el e-Book Introduccin a XML de sta coleccin, para informacin adicional sobreste estndar.


12/127


12

Filtros y Transiciones

o Por filtros, entendemos ciertos efectos visuales, como las letras con sombreado, yotros similares. Se consideran tambin como una extensin de CSS. Las transicionesson, as mismo, efectos, que pueden resultar tiles en ciertas presentaciones de

informacin, como las denominadas Slide Shows, o pruebas de muestreo de imgenesencadenadas.

Descarga de Tipos de Letra (Font Download)

o Consiste en la capacidad de utilizar tipos de letra descargados dinmicamente.Mediante el atributo de estilo @font-face, un documento puede hacer referencia a untipo de letra descargado dinmicamente, y desecharlo inmediatamente despus de queel documento sea descartado.

Enlace de Datos (Data Binding)

o Es la caracterstica que permite enlazar elementos individuales de un documento aorgenes de datos provenientes de bases de datos o de ficheros delimitados por comas.Uno de los usos prcticos de esta posibilidad es la de generar tablas con el contenidode bases de datos de forma automtica y dinmica, por ejemplo, enlazando unaetiqueta a un origen de datos.Esta funcin se realiza mediante un objetoDSO (Data Source Object), que sabe como conectarse con el origen de datosadecuado. Se implementa en forma de un componente ActiveX o un Applet de Java.

Modelo de objetos DHTML

o Es la base de todo el HTML Dinmico, y suministra la interfaz que permite a los

lenguajes de script y a los componentes acceder a las caractersticas de HTMLDinmico. A continuacin realizamos una explicacin ms exhaustiva del modelo deobjetos en que se basa.

La solucin: Los Modelos de Objetos

As pues, la propuesta de mejora de HTML se bas sobre todo en dos estndares, las Hojas de Estiloen Cascada, al que dedicamos un captulo ms adelante, pero fundamentalmente, en el Modelo deObjetos de DHTML, que posteriormente se estandariz en el llamado Modelo de Objetos deDocumento (DOM), de acuerdo con una especificacin oficial de la W3C.

Un Modelo de Objetos es un mecanismo que permite el acceso y la programacin de documentos yaplicaciones informticas. Los modelos de objetos permiten exponer al programador el conjunto defuncionalidades de un programa o de caractersticas de un documento en forma de objetosprogramables.

Por ejemplo, el conjunto de Tablas de un documento de Microsoft Word, aparece en el modelo deobjetos de documento de Word como una propiedad colectiva (Collection) del propio documento (lapropiedad Tables). Podemos referirnos a cada tabla, a cada celda y cada contenido de celda usando laspropiedades de los objetos Tablede esa coleccin. Y lo mismo podemos decir para cada palabra deldocumento, cada estilo usado en la presentacin, o cada tem de men o Caja de Dilogo disponible enWord. Decimos, por tanto, que Word ha sido construido de acuerdo con un modelo de objetosprogramable.


13/127


13

Naturalmente, si hablamos de objetos programables, necesitaremos un lenguaje de programacin. Enel caso citado, ese lenguaje es VBA (Visual Basic para Aplicaciones), el ncleo de la herramientaVisual Basic que contiene las definiciones bsicas del lenguaje y que est disponible como lenguaje demacros, no slo para toda la suite de Office, sino tambin para otras aplicaciones que han sidoproyectadas de sta forma, comoAutoCad, 3D-Studio, Visio, etc.

En general una herramienta que soporte VBA como lenguaje de macros est hecha de tal forma quecualquier caracterstica de la herramienta o de los documentos generados con ella, aparece como unelemento programable y accesible a travs de VBA.

Vemos, pues, que los modelos de objetos extienden la funcionalidad de las aplicaciones, puespermiten su ejecucin indirecta a travs de cdigo fuente. Al conjunto de rutinas de carcter pblicoprogramadas de sta forma se le llama conjunto de macros de un documento.

El Modelo de objetos de documento (DOM)

Al modelo de objetos diseado para convertir el lenguaje HTML en DHTML se le denomina DOM(Modelo de Objetos de Documento). Es algo que debe ser aportado por el propio navegador(generalmente, en forma de una DLL que se carga al abrir el programa explorador) y que modifica laforma en que las pginas web son procesadas.

El esquema que muestra la Figura 1 ilustra la forma en la que viaja la informacin y se transforma deesttica en dinmica.

Figura 1. Esquema de envo y transformacin de una pgina web mediante DOM

DOM es lo que convierte el HTML esttico en dinmico, y podemos entenderlo como la forma en laque los exploradores interpretan una pgina desprovista de comportamientos programables,transformando sus elementos en objetos, que, como tales, poseen propiedades, mtodos y eventos, yque por lo tanto, se convierten en entidades programables. Esta era la base del dinamismo del nuevoHTML, junto a la incorporacin de algunas etiquetas nuevas que permiten aplicar estilos de formaglobal, como y , si bien el tema de los estilos ser objeto de un tratamientoindependiente en otro apartado.

En el esquema anterior, cuando un usuario solicita una pgina web (por ejemplo, http://eidos.es) el

servidor web busca dicha pgina, la enva al cliente y all sufre un proceso de transformacin: segn seva leyendo el contenido, se construyen tantos objetos en la memoria como etiquetas tenga la pgina


14/127


14

HTML asignando especialmente las que tengan un identificador (ID NAME), y finalmente, se da unformato grfico de salida al documento, al tiempo que el motor del navegador permanece a la escuchade los eventos que el usuario genere al navegar por la pgina. Cuando se produce uno, (como pasar elcursor por encima de un tem de men, o de un grfico) el navegador invoca al intrprete del lenguajede scripten el que el evento tenga asociada su accin y sta se ejecuta. Esa es la forma en que los

mens cambian de color o de tamao cuando navegamos por ellos, y tambin la forma en la que seproducen un sinfn de efectos especiales que estamos ya acostumbrados a ver en las pginas web.

Una vez ms, es labor del navegador (o de las libreras que realizan la interpretacin o rendering) elconstruir objetos dinmicos a partir de lo que slo es un documento, evitando as, el envo decomponentes a travs de la web.

Programando los objetos de DOM

Ahora bien, una vez realizada esa labor de conversin, necesitamos un mecanismo de programacin,

un lenguaje. En el escenario de Internet, a los lenguajes de programacin que nos permiten manejar losobjetos DHTML, se les denomina Lenguajes de Script, y entre los ms popularmente aceptadosdestacan:Javascript, VBScript, PerlScript y Python, basados los tres primeros, respectivamente, en sushermanos mayores, Java, Visual Basic y Perl). La forma en que se manipula un objeto DHTML esasignndole un identificador (un valor para su atributo ID NAME, lo que lo convierte en objetoprogramable) y programando una accin escrita en uno de estos lenguajes, que, normalmente, estarasociada con alguno de los eventos de que el objeto disponga.

Es precisamente la definicin de ese conjunto de objetos, la que queda establecida mediante DOM, sibien podemos decir que existen dos versiones del modelo. Previamente se defini una normativabasada en colecciones que fue implementada por los navegadores ms populares y que se llamModelo de Objetos DHTML. Todava est soportada en las versiones ms actuales, con lo que en

realidad, la inspeccin de los modelos de objetos nos muestra mecanismos que pertenecen al modeloantiguo y al nuevo conviviendo y pudiendo ser utilizados desde el mismo documento. En principio,tanto Internet Explorer como Netscape, cumplen con una buena parte de la especificacin DOMoficial de W3C, si bien ambos poseen ciertas limitaciones en esa versin, que en el caso de Explorer,han sido mejoradas y completadas en versiones posteriores (la reciente versinNetscape 6.0, propugnaun soporte completo de DOM, si bien la forma en que soporta la presentacin mediante de Hojas deEstilo en Cascada se limita a la primera especificacin, de nombre CSS1 -Cascading Style SheetsLevel 1- y a algunas caractersticas de la ms moderna CSS2). Precisamente por razones decompatibilidad con el estndar, en este curso usaremos genricamente Internet Explorer para mostrarlos resultados de las pginas de ejemplo.

La jerarqua de objetos de DOMLa Fig. 2 muestra el grfico correspondiente a la jerarqua de objetos de DOM, en su versin inicial,tal y como se soporta por Internet Explorer 4.0y posteriores. Podemos apreciar, que como en todajerarqua dinmica, existe un objeto inicial o raz del cual penden el resto de objetos: window.

Ese objeto window, tiene, a su vez, propiedades y mtodos que suministran el acceso a las distintascaractersticas del navegador y de los documentos que se abren en l. La ms importante de esaspropiedades es document, que hace referencia a la pgina web abierta en cada momento. Por tanto,podemos resumir esta introduccin asumiendo que el objeto window controla todo lo relativo alprograma navegador, mientras que el objeto document, maneja todo lo concerniente a la pginaactiva.


15/127


15

Figura 2. Modelo de objetos DHTML (fuente: MSDN)

Los objetos windowy document

Del esquema se deduce que en la jerarqua, algunos objetos pasan a pertenecer a coleccionesconcretas, como la coleccin de imgenes (images) o la coleccin de hojas de estilo (styleSheets).Otros, por su importancia se transforman en objetos individuales, como body o element, y ademsexiste una coleccin donde van parar todos los objetos del documento: all (el objeto document es unoslo, y no una coleccin, ya que se trata de una interfaz SDI).

Otra caracterstica de la jerarqua de DOM es que en ella encontramos colecciones que deben existirsiempre, independientemente de que contengan o no elementos. Por ejemplo, siempre descubrimosuna coleccin images, aunque la pgina no contenga una sola imagen. Podemos hacernos una idea dela forma en que DOM crea la estructura mediante una jerarqua de tipo rbol, donde cada etiqueta seconvierte en un nodo. Algunos nodos sern equivalentes a los troncos y su misin principal (aunqueno la nica) ser contener una serie de nodos hijos (child nodes), como es el caso de las etiquetascontenedoras del tipo , mientras que otros equivaldrn a las hojas del rbol,sirviendo para albergar los contenidos del documento sin incluir otros nodos hijos (el texto que seencuentra entre las etiquetas del tipo

, ,, etc).

Otro matiz a tener en cuenta es que el modelo de objetos distingue entre objetos programablesmediante eventos y aquellos a los que se puede hacer referencia. Para que un objeto sea


16/127


16

programable mediante eventos se requiere un identificador ID, mientras que siempre podemoshacer referencia de lectura o asignacin de las propiedades de un objeto cualquiera deldocumento mediante la coleccin a la que pertenezca.

El objeto windowYa hemos comentado que todos los objetos de la jerarqua DOM son descendientes del objeto window.Este objeto nos da acceso a todas las caractersticas del navegador, pero, a travs de algunas de suspropiedades, tambin tenemos acceso a los elementos del documento. Vamos a revisar algunas de suspropiedades y mtodos ms interesantes.

Propiedades del objeto window

Hemos visto en el esquema que el objeto windowdispone de 6 propiedades:

1) event

2) frames

3) location

4) history

5) navigator

6) screen

7) document

Vamos a revisar algunas de las caractersticas de programacin ms interesantes y utilizadas de estosobjetos.

La propiedad event y el modelo de objetos de HTML Dinmico

La primera propiedad, event, se relaciona directamente con el llamado Modelo de eventos de HTMLDinmico. Se trata -como ya se ha dicho- de un modelo basado en la construccin dinmica de objetos

a partir de etiquetas, y que permite la propagacin de stos eventos a sus elementos superiores,(Sistema de promocin de eventos).O sea que, la respuesta a un evento, de haberla, puede asociarse alobjeto que lo recibe o a cualquiera de sus elementos contenedores, pudiendo llegar si es necesario- alpropio objeto document.

Definicin: cuando un usuario interacta con una pgina o cuando el estado del documento va a cambiar, seactiva un evento.

En la prctica, el usuario produce eventos mediante pulsaciones de teclado o de ratn. El sistemapuede hacerlo al terminar los procesos de carga de una pgina, formulario, grfico y objetomultimedia, pero tambin mediante un mecanismo de temporizacin.


17/127


17

El modelo de promocin de eventos tiene dos ventajas principales: por un lado permite el tratamientoglobal de eventos, asociando una misma accin a cualquiera de los contenidos de un elemento. Porejemplo, cuando asignamos una accin al elemento , cualquier elemento contenido en elcuerpo del documento que reciba el evento, desencadena la accin.

Tambin es posible anular los eventos e incluso anular las acciones predeterminadas que tales eventospuedan provocar. Cabra pensar en situaciones en las que una accin predeterminada como el hecho deseguir un vnculo, puede ser anulado por un objeto contenedor de dicho vnculo. Veamos, por ejemplo,el Cdigo fuente 1.

Grupo EIDOS

Cdigo fuente 1

El Cdigo fuente 1, anula el enlace al sitio web de Grupo EIDOS, mediante la asignacin de lasecuencia return false al evento onclick de la etiqueta . El lector puede inferir a partir deaqu las posibles implicaciones dinmicas que esto tiene en la construccin de pginas cuyocomportamiento vare en funcin de un nivel de permisos o unas asignaciones de seguridad, porejemplo: podemos programar situaciones en las que, dependiendo del nivel de acceso, una serie deenlaces permitan o no el acceso a los sitios enlazados.

Ya hemos visto cmo vincular acciones a los elementos mediante la asignacin de acciones directas ymediante llamadas a funciones almacenadas en etiquetas . Sin embargo, se puedepersonalizar un de forma que sus acciones se asocien exclusivamente a un evento de unobjeto. Esto se consigue mediante los atributos FOR y EVENT de la etiqueta. Por ejemplo, podemosasignar una accin al evento onclickdel botn B1, mediante el Cdigo fuente 2.

Msgbox Botn pulsado

Cdigo fuente 2

El problema aqu es que las versiones 4.x de Netscape Navigator ignoran estos atributos, intentandoejecutar las acciones delscript inmediatamente.

Este problema del soporte de navegadores parece que est empezando a diluirse a medida que las compaasdistribuidoras de software de navegadores comienzan a basarse en los estndares. Por ejemplo, Netscape 4.xtampoco soporta la propiedad innerHTMLpara los contenidos de los objetos mientras que la versin 6.0 s lohace. Lo mismo sucede con los atributos para la identificacin de objetos: mientras las versiones 4.x de Netscapesolo soportan el atributo NAME, en la versin 6.0 ya se soporta el atributo ID, y en general existe un soportems prximo al estndar DOM de la W3C.


18/127


18

Se debe de tener cuidado con los nombres de los eventos si no especifica un lenguaje predeterminadoo si explcitamente se indica Javascript como lenguaje a utilizar, porque en ambos casos, es el motorde interpretacin de Javascript el que se pone en marcha y es sensible a maysculas y minsculas.

Otras formas de asociar cdigo de script a eventosOtra posibilidad para codificar procedimientos dentro de una pgina web, consiste en utilizar losatributos que DOM asigna a cada elemento cuando lo convierte en un objeto programable.

Una de las transformaciones ms importantes que DOM realiza es la de asignar a cada etiquetadinmica un atributo por cada evento al que es capaz de responder. Para programar una accin, bastacon asignar como valor del atributo el nombre de una funcin escrita en uno de los lenguajes de scriptvlidos, o invocar un mtodo o propiedad de los objetos disponibles en el modelo DOM.

Podemos ver este comportamiento codificando otro efecto muy conocido actualmente, consistente en

el cambio dinmico de estilos cuando el cursor pasa por encima de algn elemento.Se puede utilizar la propiedad srcElement, teniendo en cuenta que se trata de un objeto que hacereferencia al elemento que se haya seleccionado, y la caracterstica que hace que cualquier elementoDHTML disponga de una propiedad (style), para modificar los valores que determinan supresentacin.

Eso significa que todo lo que tenemos que hacer es asignar a los atributos onmouseover (pasar elratn por encima de un rea) y onmouseout (abandonar el rea) la ejecucin del cdigocorrespondiente (ntese que no estamos invocando a ninguna funcin incluida en etiquetas descript,sino que asignamos el cdigo a ejecutar directamente a los atributos del elemento).

Imaginemos que nuestra pgina dispone de una par de elementos

con un cierto contenido y quequeremos que cuando el usuario pase el cursor por encima de un de ellos, cambie automticamente suestilo a color rojo y tamao de letra de 20 pxeles. Tambin queremos que cuando el cursor salga de lazona correspondiente al elemento, ste vuelva a su estado original.

Primer tem que cambiar de estilo

Segundo tem que cambiar de estilo

Cdigo fuente 3

El lector puede copiar el Cdigo fuente 3 fuente a una pgina cualquiera y comprobar sufuncionamiento, como aparece en la Figura 3

En el caso de disponer de una serie de tem a los que queremos aplicar un comportamiento comn,podemos usar sta tcnica junto a la capacidad de promocin de eventos, para programar con un nicocdigo ese comportamiento mltiple.


19/127


19

Figura 3. Cambio dinmico de estilo

.Normal {

cursor: hand;font-family: verdana;font-size: 20;font-style: normal;background-color: blue;color: white;display: block

}.Resaltado {

cursor: hand;font-family: verdana;font-size: 20;

font-style: italic;background-color: white;color: blue;display: block

}

Seleccione un Bicho
Lagarto Juancho
Leoncio el Len
Pepe Ptamos
Gorila Magilla
Gato Silvestre

// Asignamos comportamiento por defecto al objeto document//lo que se aplica a cada uno de sus nodos hijos.document.onmouseover = MostrarEspecial;document.onmouseout = MostrarNormal;

function MostrarEspecial() {//si el estilo es Normal, cambiar a Resaltadoif (window.event.srcElement.className == "Normal") {

window.event.srcElement.className = "Resaltado";}

}

function MostrarNormal() {//si el estilo es Resaltado, cambiar a Normalif (window.event.srcElement.className == "Resaltado") {

window.event.srcElement.className = "Normal";


20/127


20

}}

Cdigo fuente 4

Aunque estudiaremos las Hojas de Estilo ms adelante, anticipemos para este ejemplo que, lo mismoque hemos definido una presentacin asignando a un atributo styleunos valores, podemos separar esasdefiniciones de estilo, situndolas esta vez dentro de una etiqueta , permitiendo que seanaccesibles a todo el documento. Cuando operamos as, la manera de aplicar uno de los estilosdefinidos es mediante el atributo class del elemento, tal y como aparece en las definiciones iniciales.

Lagarto Juancho

Cdigo fuente 5

En el caso de que la asignacin de estilo sea dinmica (en tiempo de ejecucin), la propiedadclassNamede cada elemento ser la que nos permita realizar la nueva asignacin.

En el ejemplo, utilizamos la definicin de dos estilos de usuario (Normaly Resaltado). Observe ellector la asignacin inicial al objeto document de las acciones a realizar cuando el cursor pasa porencima de un elemento (onmouseover) y cuando sale de l (onmouseout). Utilizamos la propiedadclassName del objeto document, que es el equivalente del atributo class para etiquetas de HTMLDinmico. Como cada elemento genera sus propios eventos, si no tienen ninguna accin asociada, se

produce la promocin del evento hasta llegar a algn elemento de orden superior que s tenga unaaccin asociada: document, en este caso. Entonces, se determina cual es el elemento que ha producidoel evento y se le trata aplicndole el estilo correspondiente.

Figura 4. Cambio dinmico de estilos aplicado de forma global.


21/127


21

Tambin podemos incluir elementos ocultos, que solo se muestren tras la ejecucin de un evento. Elestilo de presentacin display, puede adoptar los valores hidden (oculto, los elementos no sevisualizan) o vaco , que significa que se permite la visualizacin. Veremos muchas de estascaractersticas en el captulo dedicado a las hojas de estilo en cascada.

Ficheros de script independientes

Con idea de crear rutinas genricas que puedan ser utilizadas en diversos documentos sin necesidad deduplicar el cdigo tambin es posible situar las rutinas en ficheros independientes. La gran ventaja esque al residir en un fichero aparte, conseguimos crear autnticas libreras de scriptsque pueden serutilizadas dentro de un proyecto para diferentes pginas web. Suele asignrsele la extensin asociadacon el lenguaje en que estn escritas, generalmente .JS (para Javascript) y .VBS(para VBScript). Lonico que se precisa es hacer referencia a la librera mediante el establecimiento de un vnculo, usandoel atributo SRC de la etiqueta .

Cdigo fuente 6

Otras propiedades del objeto event

Adems de la propiedad srcElement, event posee propiedades adicionales para informar alprogramador de caractersticas adicionales del evento que se produce. Por ejemplo, la propiedadcancelBuble, permite anular la promocin del evento hacia los objetos superiores en la jerarqua. Por

defecto, este valor esfalse. En caso de asignarle un valor True, se detiene dicha promocin, pero slopara la instancia actual de evento, no para otros eventos que puedan producirse.

Otra propiedad interesante es returnValue, que sirve para anular la accin predeterminada de unevento, cuando asignamos el valor false a sta propiedad. Observe el lector que el mecanismo deanulacin del evento utilizado en el ejemplo anterior, se basa en una palabra reservada de Javascript(return), que actualiza la propiedad returnValue cuando el controlador del evento devuelve el controlal Explorador.

Un manejador genrico de eventos.

Otras propiedades interesantes del objeto event, tienen que ver directamente con las caractersticas deproduccin del evento: por ejemplo, type, devuelve el nombre del evento sin el prefijo on, lo quepermite crear manejadores genricos de eventos (rutinas que determinen el tipo de evento que se haproducido y dependiendo del que se trate, programen diferentes acciones).

Pongamos que se desea determinar el tipo de respuesta asociada a un mismo objeto, pero subordinadaal evento producido: por ejemplo, queremos que una caja de texto muestre dos respuestas distintasdependiendo de si pulsamos el botn izquierdo o derecho del ratn: un manejador de eventos quedistinga esa situacin basndose en la propiedad button del objeto event, adoptara la forma quemuestra el Cdigo fuente 7.

function ManejadorEventos() {//Primero miramos si se trata de un evento de ratn usando la propiedad


22/127


22

//buttonswitch (event.type) {

case 'click':alert('Hola desde onclick');break;

case 'mousedown':

if (event.button == 1) alert('Hola desde mousedown')else alert('Has pulsado el botn derecho');break;

}}//y en otra parte del cdigo...

Cdigo fuente 7

Hay que significar que el evento onmousedown, tiene precedencia sobre el evento onclick, por lo queste ltimo no se ejecuta dentro de esta rutina tal y como se presenta aqu. Si anulamos, la primera

opcin de comprobacin del evento onmousedown (if (event.button == 1) alert('Hola desdemousedown'), comprobaremos como entonces s que se ejecuta el cdigo del evento onclick al pulsarel botn izquierdo y el del evento onmousedown, al pulsar el botn derecho.

Naturalmente, necesitamos conocer qu significan los valores devueltos por el evento para podercodificar un comportamiento adecuado. De acuerdo con el manual de referencia, las propiedadesasociadas a valores del ratn o de teclado para el objeto eventson los que se indican en laTabla 1.

Propiedades de event para valores del ratn y teclado

0 Botn NO pulsado

1 Botn izquierdo pulsadoButton

2 Botn derecho pulsado

ctrlKey True/False Estado de la tecla CTL

altKey True/False Estado de la tecla ALT

shiftKey True/False Estado de la tecla Maysculas.

Tabla 1. Propiedades para el control de estado de las teclas de ratn, CTL, ALT y MAY.

Con esto presente, pueden programarse acciones complejas o comportamientos especiales querequieran combinaciones de teclas, como por ejemplo, informacin de seguridad, acceso a socios, etc.

El modelo de eventos

Todos los elementos de un documento, comparten una serie de eventos comunes. Adems, aquelloselementos que pueden recibir el foco disponen de una serie de eventos adicionales. La Tabla 2 lista loseventos comunes a todos los elementos de un documento:


23/127


23

Modelo bsico de eventos

Teclado Teclado Ratn Ratn

onkeydown ondblclick onmousedown onmouseover

onkeypress onclick onmousemove onmouseout

onkeyup onmouseup

Tabla 2. Modelo bsico de eventos

Aquellos objetos capaces de recibir el foco pueden generar los eventos: onenter, onexit, onfocus, yonblur. Los dos primeros se producen cuando el ratn entra en el rea de documento definida por unelemento, mientras que los dos siguientes les pueden producir el ratn o el teclado al recibir el foco unelemento, para similares circunstancias.

El lector podr encontrar informacin especfica para cada uno de los eventos disponibles en elmodelo, tanto en el MSDN de Microsoft, como en la documentacin de cualquiera de los productos dedesarrollo para Internet. No obstante, a continuacin incluimos una tabla con el modelo completo deeventos:

Modelo completo de eventos

onabort onactivate onafterprint onafterupdate onbeforecopy onbeforecut

onbeforedeactivate onbeforeeditfocus onbeforepaste onbeforeprint onbeforeunload onbeforeupdate

onblur onbounce oncellchange onchange onclick oncontextmenu

oncontrolselect oncopy oncut ondataavailable ondatasetchanged ondatasetcomplete

ondblclick ondeactivate ondrag ondragend ondragenter Ondragleave

ondragover ondragstart ondrop onerror onerrorupdate onfilterchange

onfinish onfocus onhelp onkeydown onkeypress Onkeyup

onlayoutcomplete onload onlosecapture onmousedown onmouseenter onmouseleave

onmousemove onmouseout onmouseover onmouseup onpaste onpropertychange

onreadystatechange onreset onresize onresizeend onresizestart Onrowenter

onrowexit onrowsdelete onrowsinserted onscroll onselect onselectionchange

onselectstart onstart onstop onsubmit onunload

Tabla 3: Modelo completo de eventos soportado por Internet Explorer 4.0 y posteriores.


24/127


24

Algunos de estos eventos son especficos del navegador Internet Explorer, aunque la mayor parte sesoportan por los dos navegadores.

Para concluir con ste apartado dedicado al objeto event, conviene recordar que algunos valores

dinmicos relacionados con el evento producido, como la posicin del ratn en pantalla, tambin sonexpuestos al programador en forma de propiedades del objeto event.Podemos conocer de esa formalas coordenadas de posicin del ratn segn se mueve por pantalla en valores absolutos ( screenX,screenY), o relativos al navegador (clientX, clientY) o al objeto seleccionado (x,y), o incluso saberdesde que elemento se desplaza el cursor cuando pierde el foco (fromElement) o hacia qu elementose desplaza (toElement).

Propiedades de window asociadas al Explorador

En el conjunto de propiedades del objeto window, algunas se refieren directamente a las caractersticas

de la ventana que muestra el navegador. Por ejemplo, los mensajes de la barra de estado se puedenmanejar mediante las propiedades defaultStatus ystatus. La primera determina el mensaje inicial (pordefecto) del navegador, mientras que la segunda se permite la asignacin de mensajes temporales.

La propiedad history

Mediante la propiedad history podemos navegar hacia delante y hacia atrs dentro del conjunto depginas visitadas. Se trata de un objeto que dispone de los mtodos back yforward, para navegar haciala pgina anterior y la siguiente, respectivamente. Este objeto tambin dispone de una propiedadlength que indica el nmero de pginas visitadas y permite un control de errores.

La propiedad location

Se trata de un objeto que almacena informacin acerca de la URL que se est visitando. Dado que elformato genrico de una URL esprotocolo://equipo:puerto/ruta?bsqueda#hash, location trocea esecontenido en propiedades ms sencillas de utilizar. Des esta forma, la propiedad host devuelve elequipo, seguido por dos puntos y el puerto.La propiedad href contiene el URL completo como unacadena nica.

Location, dispone de mtodos para el manejo de URLs. Por ejemplo, el mtodo reload([force]),permite volver a cargar una pgina, pudiendo forzar su carga incluso si el servidor informa de que la

pgina no ha cambiado, y el mtodo replace(URL) carga una pgina nueva. Funciona como lapropiedad hrefsalvo que la pgina no se aade a la lista del historial.

La propiedad screen

Proporciona informacin acerca de la pantalla del usuario, lo que permite al cdigo adaptarse a esascircunstancias si fuera conveniente. Posee las propiedades width(anchura), height(altura), availWidth(anchura disponible) y availHeight (altura disponible), adems de colorDepth (Bits por punto depantalla).


25/127


25

Temporizadores: los mtodos setTimeout(), setInterval(),clearTimeout() y clearInterval()

Se trata de un mtodo que permite la asignacin de un temporizador a la ventana de navegacin. Un

temporizador, dispara un evento una vez que ha transcurrido un tiempo determinado por cdigo.

Por ejemplo, se puede implementar una rutina para que una vez transcurridos 5 segundos la pginaactiva se traslade automticamente a otra mediante una rutina similar a la que se muestra en el Cdigofuente 8.

var Segundos = 5;

function DejarPagina() {if (Segundos == 0) //Cambiamos de pgina

document.location = Nueva pgina.htm;else//Aqu se hace la cuenta atrs y se visualiza el tiempo transcurrido//en la etiqueta

Segundos -= 1;document.all.CuentaAtras.innerHTML = Quedan + Segundos + ...setTimeout(DejarPagina, 1000);

}}

Cdigo fuente 8

El Cdigo fuente 8,utiliza el mtodosetTimeoutpara establecer un temporizador que se ejecutar cada1000 milisegundos, lanzando la ejecucin de la funcin DejarPagina() y en cada ejecucin resta unaunidad a la variable Segundos. Cuando sta es 0, se navega otra ubicacin mediante la propiedadlocation del objeto document. Aunque el objeto CuentaAtras es una etiqueta

, podra sercualquier otro elemento que poseyera una propiedad innerHTML para ir mostrando el tiempotranscurrido.

Mtodos de windowpara creacin de ventanas

Hasta ahora, hemos utilizado casi siempre el lenguaje VBScript para mostrar cajas de mensaje con el

contenido de los elementos que seleccionbamos. La razn es, por un lado, mostrar que losnavegadores pueden ejecutar distintos lenguajes de script, y por otro, que no hemos llegado todava alcaptulo dedicado a Javascript. Aunque este procedimiento sea vlido a efectos didcticos, lametodologa estndar para hacerlo no es esa, por dos razones: primera, por que se prefiere utilizar ellenguaje estndar Javascript de cara a las pginas de cliente, ya que es compatible con casi todos losnavegadores (Netscape no soporta VBScript). En segundo lugar, por que es preferible utilizar siempreque sea posible el modelo de objetos en lugar de recursos que pertenezcan a un lenguaje dado.

El objeto window dispone de varios mtodos asociados con la produccin de ventanas, tanto desistema, como personalizadas. En el primer caso, para la presentacin de cajas de mensaje, el objetowindow dispone de varias posibilidades: los mtodos alert(), confirm() yprompt(). Mientras alert()presenta una caja estndar de sistema, a la que se le puede pasar como argumento la cadena a mostrar

(es equivalente al Msgboxde VBScript), confirm()presenta una caja similar, pero con dos botones deconfirmacin (Aceptar y Cancelar), pudiendo recoger la seleccin del usuario en una variable.


26/127


26

Finalmente,prompt()pide una entrada de datos al usuario y devuelve el dato introducido como valorde retorno (equivale a InputBoxen VBScript).

Para el caso de que queramos mostrar cajas no estndar (Ventanas de Usuario), disponemos de losmtodos createPopup(),showHelp(), showModalDialog()yShowModelessDialog(), que cumplen esa

funcin. Incluso podemos abrir otra ventana del propio explorador con una pgina adicional, como amenudo se utiliza actualmente para presentar pantallas de tipo publicitario u ofrecer contenidosaadidos, usando el mtodo open(). Vamos a revisar brevemente estas posibilidades.

Cajas de mensaje estndar: alert()

El objeto window dispone adems de una propiedad especial, event, que se actualiza automticamentecon informacin relativa al evento que acaba de tener lugar en el proceso de visualizacin de unapgina. Por ejemplo, podemos acceder a la misma informacin que leamos antes a travs del objetodocument, utilizando una propiedad del objeto event. En concreto, event dispone de una propiedad

llamada srcElement, que almacena los datos pertinentes al objeto que es receptor del evento: unatabla, una celda, un grfico, etc. Veamos algn ejemplo de su uso.

Podemos sustituir el cdigo de acceso a los elementos mediante el Cdigo fuente 9,con el Cdigofuente 10.

Msgbox document.documentElement.outerHTML

Cdigo fuente 9

alert(window.event.srcElement.innerHTML)

Cdigo fuente 10

y obtendramos resultados casi idnticos. Con casi idnticos, queremos decir que en algunos casos- laprecisin es mayor con ste mtodo, pues el ejemplo anterior reconoca las tablas, las celdas y algunosobjetos ms, pero englobaba al resto de objetos como elementos de . Con este sistema sereconoce cadaelemento individual, obteniendo un control ms fino de los elementos de la pgina.

Cmo solicitar informacin del usuario: mtodosprompt() y confirm()El mtodo confirm(), se diferencia de alert() en que presenta al usuario una alternativa de seleccin,que podemos recoger en una variable de tipo boolean. Por ejemplo, al pedir confirmacin para unaaccin escribiramos lo que se muestra en el Cdigo fuente 11.Y se presentara la caja de mensaje quemuestra laFigura 5

Sub PedirConfirmacion()Dim Respuesta

Respuesta = window.confirma(Acepta las condiciones?)

If Respuesta thenRutina para el tratamiento de la RespuestaEnd if


27/127


27

End Sub

Cdigo fuente 11

Por su parte, el mtodo Prompt(), equivale a un InputBox() en VBScript. Podemos combinar estacapacidad de solicitud de datos junto con el recurso de los contenidos dinmicos para crear pginas depresentacin y/o de respuesta, dependiendo de los datos recibidos. Una forma sencilla de codificar estosera plantear una pgina que en la entrada (evento onLoad(), de la pgina) pidiese al usuario sunombre, para mostrarlo a continuacin, gracias a la propiedad innerHTML de cualquier elemento. ElCdigo fuente 12 conseguira ese resultado.

Figura 5. Caja de Dilogo del mtodo confirm()

Sub PedirDatos()

Dim RespuestaRespuesta = window.prompt(Introduzca su nombre,Usuario)PNOMBRE.innerHTML = Respuesta

End Sub


28/127


28

ejercicio de aplicacin para el lector implementar sta solucin mediante un botn y una caja de textoque formen parte de un formulario HTML.

Ventanas de Dilogo Modales: showModalDialog()Dentro de las ventanas de usuario, quiz el mtodo ms interesante esshowModalDialog(), ya que nospermite mostrar en otra ventana el contenido de una pgina web creada por nosotros. La diferencia consu homnima showModelessDialog(), es que, mientras la primera obliga al usuario a que la ventanapresentada se cierre para continuar con la navegacin, no sucede as con la segunda. En cuanto a suscaractersticas, la ventana utilizada no es redimensionable y carece de mens y de barras de botones obarras de estado, adoptando el aspecto que puede verse en la Figura 7.

Figura 7. Ventana de tamao fijo mostrada por el mtodo ShowModalDialog()

Respecto a los otros dos tipos de ventanas comentados, createPopup() slo est disponible para lasversiones Internet Explorer 5.5 y posteriores.

No obstante, estas ventanas tienen dos inconvenientes principales:

Son de slo lectura: El usuario no puede seleccionar los contenidos que se visualizan en laventana

No son navegables: Cuando se pulsa en un vnculo no se abre la pgina en dicha ventana, sinoque se ejecuta una nueva instancia del navegador.

En cuanto al paso de parmetros de y desde una ventana de explorador a un cuadro de dilogo, elsegundo argumento de la llamada a showModaldialog(), admite una variable (que eventualmentepuede ser un array) y que se recoge a travs de la propiedad dialogArgumentsde la nueva ventana.Recprocamente, la propiedad returnValue de la nueva ventana permite devolver informacin laventana principal que efecta la llamada.

Vamos a implementar un ejemplo de funcionamiento mediante una pgina que solicite datospersonales a un usuario. La ventana principal puede incluir el Cdigo fuente 13,que tendra el aspectoaproximado de la Figura 8.

Sub LanzarVentana()


29/127


29

Path = "C:/Documents and Settings/mposadas/Escritorio"ValorDevuelto = window.showModalDialog Path & "/Formulario.htm", Cstr(Time)TxtRespuesta.value = ValorDevuelto

End sub

Cdigo fuente 13

Figura 8. Pgina que lanza un formulario de entrada medianteshowModalDialog() y le enva como argumento la hora del

sistema.

Y dentro del formulario, basta con incluir un mecanismo de lectura, que situamos en el proceso decarga del formulario, y que muestra la hora en que se lanza y otro de reenvo de la informacin, en elmomento de salir de la Caja de Dilogo y volver a la pgina que recoge el valor de la primera caja detexto (la que guardara el nombre del usuario) hace la llamada:

----------------------------------------------------------------------------------------------------------------------------------------------------

function Salir() {window.returnValue = window.document.all.text1.value;

window.close();}

Cdigo fuente 14

El aspecto del formulario es muy simple, y dado su carcter modal- no permite que tome el foco laventana del Explorador hasta que no se haya cerrado (ver Figura 9).


30/127


30

Figura 9. Formulario Modal lanzado conshowModalDialog()

Aadimos, adems, otra pgina HTML, para que recoja los datos que le enva el formulario principal,y se muestre al pulsar el botn button1. En este caso, el dato pasado es la hora en que se entra en lapgina, y el mtodo de paso, su inclusin como segundo argumento de la funcinshowModalDialog(),Cstr(Time).

La pgina del formulario, por su parte, recogera esa informacin leyndola de su propiedaddialogArguments y mostrndola en un elemento:

Al seleccionar el Formulario de Entrada, se mostrara la nueva caja de dilogo modal, cuyo cdigofuente incluye un mecanismo de lectura para el parmetro pasado, y otro para devolver el valor de

retorno incluido en la caja de texto.

Formulario de Entrada

Hora:

Cdigo fuente 15

Apertura de nuevas ventanas del Explorador: mtodo open()

Respecto al mtodo open() nos permite abrir nuevas ventanas del explorador con informacinadicional y control de la presentacin y caractersticas de la ventana (control de presencia de bordes,barras de herramientas y estado, mens, etc.) pudiendo, eventualmente ser cerradas desde la ventanaque las llam, gracias a que en el momento de la creacin, es posible asignar una referencia a laventana en una variable.

Posteriormente, es posible llamar a los mtodos de esa ventana, como si fueran los de la ventana deejecucin principal (obviamente, habr que tener cuidado y gestionar los errores que podranproducirse al cerrar el usuario manualmente la ventana e intentar nosotros posteriormente hacer uso deese objeto inexistente).


31/127


31

Como ejemplo de utilizacin, podemos abrir una nueva ventana que muestre la misma pgina web deprueba que hemos utilizado antes en la caja de dilogo, slo que esta vez se abre en otra instancia delexplorador (Cdigo fuente 16), que produce la ventana de salida que muestra la Figura 10.

var Ventana2 = window.open('pagina.htm', 'Ventana2','width=300,height=250,status=yes,menubar=yes,scrollbars=no,toolbar=no')

Cdigo fuente 16

Figura 10. Ventana de explorador mostrada por el mtodo open()

Observamos como las caractersticas indicadas en el tercer argumento, configuran la forma en que semuestra la ventana (con mens y barra de estado, pero sin barras de desplazamiento, ni deherramientas), y que podemos cerrar a continuacin invocando al mtodo close()de la ventana a travsde la variable Ventana2: dentro de la misma ventana y no fuera.

Ventana2.close()

Cdigo fuente 17

La propiedad document

Veamos un ejemplo de lo que estamos comentando. Lo que sigue es una pgina web muy simple, queposee dos tablas, de las cuales, solamente la primera posee un atributo ID de valor Tabla, queincluye tambin dos elementos , y un grfico, tal y como aparece en la Figura 11.


32/127


32

Figura 11. Pgina web simple con 2 tablas y dos etiquetas , una de ellas incluyendo un grfico.

Nota: Aunque existen muchos y buenos editores HTML, para seguir el razonamiento que estamos usando en laconstruccin de este libro, nos hemos guiado por el entorno de desarrollo de Microsoft Visual Interdev, por quemuestra los objetos segn se crean y permite la aplicacin de la tecnologa IntelliSense al estilo de otrasherramientas de desarrollo, mostrando para cada objeto creado la lista de propiedades y mtodos disponibles.

Segn lo indicado, el acceso desde cdigo a las etiquetas que componen esta pgina puede hacersemediante las colecciones individuales a que pertenecen o bien mediante la coleccin genrica all. Siincluimos algo de cdigo fuente asociado al evento onClickde la pgina, podemos acceder y mostrar

cualquier parte de su contenido, ya que todo l est expuesto como parte del Modelo de Objetos deDOM. Adems, y como se ha comentado, no es imprescindible utilizar el lenguaje Javascript (siempreque asumamos que estamos visualizando el contenido con Internet Explorer).

Por ejemplo, dado que el objeto document hace referencia a todo el documento, podemos usar lapropiedad activeElementpara determinar el objeto en que est situado el cursor (o bien sobre el que seha producido una pulsacin de ratn por parte del usuario), y mostrar el contenido de ese elemento enuna caja de dilogo, utilizando la propiedad innerHTML, que, lgicamente, variar en funcin delelemento seleccionado. El Cdigo fuente 18, muestra diferentes contenidos segn pinchamos endistintas reas de la pgina.

Sub Sacar()

Msgbox document.activeElement.innerHTMLEnd Sub

Cdigo fuente 18

Si hacemos clic sobre el borde de la tabla, estaremos seleccionando uno de los dos objetos TABLE dela pgina por lo que tendremos una caja de dilogo con todo el contenido de la misma (se excluye la

propia etiqueta ).


33/127


33

Figura 12. Caja de Dilogo mostrando el contenido de la etiqueta

Pero si seleccionamos solamente una celda, veremos el contenido de la celda:

Figura 13. Caja de dilogo mostrando el contenido de una etiqueta

Figura 14. Caja de Dialogo mostrando el contenido completo de la etiqueta


34/127


34

Y si pulsamos en cualquier otra parte del documento, obtendremos el contenido de su elementocontenedor, esto es, el contenido de en este caso (Figura 14)

La propiedad innerHTML, muestra el contenido de cualquier elemento y tiene una homnima,

outerHTML, que hace lo mismo, pero incluyendo las propias etiquetas del elemento. Eso quieredecir que si cambiamos segn esto la propiedad en el cdigo fuente, (document.activeElement.outer-HTML), al seleccionar la misma celda anterior la salida sera la que muestra la Figura 15.

Figura 15. Nueva salida mostrando la propiedad outerHTML

Adems de stas dos, existe una propiedad innerText, que muestra los contenidos de cualquieretiqueta, pero excluyendo todas las etiquetas, y no slo las que definen el elemento seleccionado. Estosignifica que un nuevo cambio a nuestro cdigo fuente (document.activeElement.innerText),producira las siguientes salidas:

Para una tabla (Figura 16)

Figura 16. Contenido de una tabla segn la propiedad innerText

Para una celda coincidira con los anteriores, mientras que para la etiqueta , tendramos loque muestra la Figura 17.

Figura 17. Salida del contenido de mostrado por la propiedad innerText


35/127


35

Por tanto, vemos que todo depende del objeto document, y que la jerarqua est estructuradadependiendo de l. Concretamente, y ya que todo el documento HTML tiene una estructura de rbol,siempre existir un nodo raz o principal, que en ste caso, ser la propia etiqueta HTML. Eseelemento principal, aparece en la referencia del modelo de objetos como una propiedad del objeto

document, llamada documentElement(el lector tendr que ser cuidadoso a la hora de nombrar loselementos dentro de su cdigo fuente, pues dependiendo del lenguaje utilizado tales objetos pueden noser reconocidos en los lenguajes que diferencian entre maysculas y minsculas, como es el caso deJavascript). A lo largo del libro, nos referiremos a los objetos nombrndolos de acuerdo a su sintaxisexacta.

De acuerdo con esto la lnea de cdigo document.documentElement.outerHTML, mostrara ntegrotodo el contenido de una pgina web (etiquetas incluidas), como puede verse en la Figura 18.De todasformas, la mayor parte de las veces no es necesario acceder al contenido ntegro de la pgina,resultando ms til acceder a porciones concretas del documento. Una vez ms, no hay ms que seguirel modelo de objetos para averiguar el procedimiento a seguir.

Figura 18. Caja de Dilogo mostrando el contenido completo del documento HTML mediante la propiedad outerHTMLdelobjeto documentElement


36/127


36

Una vista jerrquica del modelo de objetos DOM

Al principio, puede ser til para hacerse una idea del funcionamiento de DOM, crear grficamente elmodelo de objetos que se genera a partir de una pgina simple. El grfico de la figura adjunta

representa dicho esquema partiendo del documento que nos sirve de ejemplo. Ntese que en elesquema se representan todas las etiquetas como descendientes del propio documento HTML,representado aqu mediante el nodo o elemento document, que hace las veces de nodo raz. Todos losotros nodos o elementos son descendientes de document, destacando, igualmente, documentElement,que corresponde con la marca , que contiene al resto del documento.

Una vez creada la jerarqua de objetos de DOM para un documento dado, DOM expone alprogramador una serie de mtodos pertenecientes a los objetos predeterminados que permiten elacceso a cualquier otro elemento de la jerarqua, siguiendo diferentes criterios de necesidad.

Por ejemplo, hasta ahora hemos visto como se accede a elementos basndonos en que stos sean loselementos seleccionados por el usuario, pero podemos utilizar otros mecanismos de aproximacin,

como las colecciones predeterminadas o los mtodos de acceso GetElementsByID,GetElementsByTagNamey GetElementsByName.

En el caso de las colecciones predeterminadas el acceso estaba presente desde la primeraimplementacin del modelo, mientras que los mtodos citados derivan del modelo posterior de DOM.

< SCR IP T> < ME TA > < TI TL E>

< TD > < TD >

< TD >

< TD >

< TD >

< TA BLE>

document

Figura 19. Modelo de obj