NOTA DEL AUTOR

Este libro fue publicado originalmente con copyright (todos los derechos reservados) por el autor y el editor. La publicacin actual de este libro se realiza bajo la licencia Creative Commons Reconocimiento-NoComercialSinObrasDerivadas 3.0 Espaa que se resume en la siguiente pgina. La versin completa se encuentra en la siguiente direccin:

http://creativecommons.org/licenses/by-nc-nd/3.0/es/legalcode.es

Creative Commons

Creative Commons License Deed

Reconocimiento-NoComercial-SinObraDerivada 3.0 Espaa (CC BY-NC-ND 3.0)

Usted es libre de:

copiar, distribuir y comunicar pblicamente la obra

Bajo las condiciones siguientes:

Reconocimiento Debe reconocer los crditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra). No comercial No puede utilizar esta obra para fines comerciales.

Sin obras derivadas No se puede alterar, transformar o generar una obra derivada a partir de esta obra.

Entendiendo que:
Renuncia Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor Dominio Pblico Cuando la obra o alguno de sus elementos se halle en el dominio pblico segn la ley vigente aplicable, esta situacin no quedar afectada por la licencia. Otros derechos Los derechos siguientes no quedan afectados por la licencia de ninguna manera: Los derechos derivados de usos legtimosu otras limitaciones reconocidas por ley no se ven afectados por lo anterior. Los derechos morales del auto; Derechos que pueden ostentar otras personas sobre la propia obra o su uso, como por ejemplo derechos de imagen o de privacidad. Aviso Al reutilizar o distribuir la obra, tiene que dejar bien claro los trminos de la licencia de esta obra.

Esto es un resumen legible por humanos del texto legal (la licencia completa) disponible en los idiomas siguientes: Asturian Castellano Cataln Euskera Gallego

Programacin en Internet: clientes web

Sergio Lujn Mora

Prefacio
En pocos aos, Internet ha invadido casi todos los aspectos de la vida. Podemos comunicarnos a travs de Internet de distintas formas (correo electrnico, radio y televisin de Internet (

online,

telefona IP). Podemos comprar diversos productos

en Internet (libros, discos, entradas de cine). Podemos conocer gente a travs profesionales especializados en programacin en Internet.

chat, foros de discusin). Para que todo ello funcione, hacen falta

En este libro se trata una pequea porcin de la programacin en Internet: la programacin de aplicaciones web. Las aplicaciones web se encuadran dentro de las arquitecturas cliente/servidor. En concreto, en este libro se estudia como programar la parte cliente, los clientes web. Las tecnologas que se contemplan son HTML y JavaScript. Existen otras tecnologas, como ActiveX o pero no estn estandarizadas como HTML y JavaScript. Este libro se complementa con otro de prxima aparicin que tratar la programacin de aplicaciones web desde el lado del servidor. En l se mostrarn las tecnologas que se emplean para programar los servidores web: CGI, ASP, JSP, etc. Evidentemente, existen programas que permiten crear pginas HTML sin tener ni idea de HTML. Pero igual que se puede conducir un coche sin tener ni idea de mecnica o pilotar un avin sin tener ni idea de aerodinmica o de motores a reaccin, conviene conocer lo que se tiene entre manos para poder obtener el mximo partido. La programacin de aplicaciones web no consiste slo en crear pginas web muy bonitas, con muchas imgenes y colores; hay que validar la entrada del usuario, acceder a bases de datos, etc. Este no es un libro sobre programacin bsica, donde se expliquen conceptos como variable, bucle de repeticin, expresin lgica o recursividad. Es necesario poseer un nivel mnimo de programacin para poder abordar los temas que tratan sobre JavaScript. Sin embargo, cualquiera que haya programado en

applets,

iii

iv

Prefacio

algn lenguaje no tendr problemas en asimilarlo. El libro est estructurado en seis captulos. Los dos primeros captulos son introductorios: se repasan las arquitecturas cliente/servidor en general y se presenta un tipo concreto, las aplicaciones web. El tercer captulo est dedicado al lenguaje HTML. En el cuarto captulo se explican los lenguajes de

script

en general y en el siguiente captulo se trata un lenguaje concreto: JavaScript. El libro naliza con el modelo de objetos de documento, que permite acceder a los elementos de una pgina web desde un lenguaje de

script.

Por ltimo,

existen tres apndices donde se resumen las etiquetas de HTML y se explica como trabajar con los colores en HTML y como depurar errores de JavaScript. Aunque no guran como autores (y no tienen ni idea de HTML o JavaScript), sin la participacin de mis padres este libro no existira, ya que su apoyo a lo largo de bastantes aos me ha permitido llegar a escribir este libro. Me gustara agradecer a Marisa la paciencia (innita o nma?) que ha tenido todas las veces que he llegado tarde debido a este libro. Por ltimo, mando un saludo a mis antiguos compaeros del Laboratorio Multimedia (mmlab), donde me introduje en el mundo de Internet, y a mis actuales compaeros del Departamento de Lenguajes y Sistemas Informticos de la Universidad de Alicante.

Alicante, 8 de octubre de 2001

Sergio Lujn Mora

ndice general
Prefacio ndice general ndice de cuadros ndice de guras ndice de acrnimos 1. Arquitecturas cliente/servidor
1.1. 1.2. 1.3. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Separacin de funciones . . . . . . . . . . . . . . . . . . . . . . . . . . Modelos de distribucin en aplicaciones cliente/servidor 1.3.1. 1.3.2. 1.3.3. 1.4. 1.5.

iii v xi xiii xv

1
2 3 3 4 4 4 5 5

Presentacin distribuida . . . . . . . . . . . . . . . . . . Aplicacin distribuida Datos distribuidos . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Arquitecturas de dos y tres niveles

Descripcin de un sistema cliente/servidor . . . . . . . . . . . .

2. Qu es una aplicacin web

2.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.1.1. 2.1.2. 2.2. 2.3. El cliente El servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7
8 8 9 10 11 11

Transferencia de pginas web

Entornos web . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3.1. Internet . . . . . . . . . . . . . . . . . . . . . . . . . . .

vi

ndice general

2.3.2. 2.3.3. 2.4.

Intranet . . . . . . . . . . . . . . . . . . . . . . . . . . . Extranet . . . . . . . . . . . . . . . . . . . . . . . . . . .

12 12 13

Ventajas y desventajas . . . . . . . . . . . . . . . . . . . . . . .

3. HTML
3.1. 3.2. 3.3. 3.4. 3.5. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Evolucin de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Clasicacin de las pginas

15
17 17 19 21 22 23 25 27 28 29 30 32 32 36 41 41 42 45 47 47 47 48 48 50 51 53 57 58 58 60 61 61

Qu necesito para usar HTML . . . . . . . . . . . . . . . . . . . Conceptos bsicos de HTML . . . . . . . . . . . . . . . . . . . . 3.5.1. 3.5.2. Estructura de una pgina . . . . . . . . . . . . . . . . .

Caracteres especiales y secuencias de escape . . . . . . .

3.6. 3.7. 3.8.

Metadatos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . Formato del texto . . . . . . . . . . . . . . . . . . . . . . . . . . 3.8.1. 3.8.2. 3.8.3. 3.8.4. Encabezados de secciones . . . . . . . . . . . . . . . . .

Formatos de caracteres . . . . . . . . . . . . . . . . . . . La etiqueta <FONT> . . . . . . . . . . . . . . . . . . .

Alineamiento del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Listas de denicin . . . . . . . . . . . . . . . . . . . . . Listas ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.9.

Listas 3.9.1. 3.9.2. 3.9.3.

Listas no ordenadas

3.10. Colores

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.10.1. Color de fondo de una pgina . . . . . . . . . . . . . . . 3.10.2. Color del texto 3.11. Enlaces . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.11.1. Enlace a un punto del mismo documento . . . . . . . . . 3.11.2. Enlace a otro documento . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.11.3. Enlace a un punto de otro documento

3.12. Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.12.1. Tablas invisibles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.12.2. Tablas como marcos 3.13. Imgenes

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.13.1. Etiqueta <IMG> . . . . . . . . . . . . . . . . . . . . . . 3.13.2. Imgenes como fondo de una pgina . . . . . . . . . . .

3.14. Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ndice general

vii

3.14.1. Controles de un formulario

. . . . . . . . . . . . . . . .

63 67 67 67 67 69 70 75 76 76 76 76 77 77 77 77 78 78

3.14.2. Campos de vericacin . . . . . . . . . . . . . . . . . . . 3.14.3. Campos excluyentes . . . . . . . . . . . . . . . . . . . .

3.14.4. Campos de texto . . . . . . . . . . . . . . . . . . . . . . 3.14.5. Listas de seleccin 3.14.6. reas de texto . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . .

3.15. Marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.16. Gua de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.16.1. Organizar el cdigo HTML 3.16.2. Cuidado con los colores . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . .

3.16.3. Cuidado con los tipos de letra . . . . . . . . . . . . . . . 3.16.4. Sacar partido al hipertexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.16.5. Usar las capacidades multimedia 3.16.6. Identidad corporativa

. . . . . . . . . . . . . . . . . . .

3.16.7. Permitir que los usuarios se comuniquen . . . . . . . . . 3.16.8. Facilitar las bsquedas . . . . . . . . . . . . . . . . . . . 3.16.9. Revisar las pginas peridicamente . . . . . . . . . . . . 3.16.10. Los enlaces . . . . . . . . . . . . . . . . . . . . . . . . .

4. Lenguajes de script
4.1. 4.2. 4.3. 4.4. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Diferencias entre VBScript y JavaScript . . . . . . . . . . . . . Para qu sirven . . . . . . . . . . . . . . . . . . . . . . . . . . . Como se usa un lenguaje de script en un navegador . . . . . . .

79
79 80 80 81

5. JavaScript
5.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.1.1. 5.1.2. 5.1.3. 5.1.4. 5.1.5. 5.1.6. 5.1.7. 5.2. Aplicaciones . . . . . . . . . . . . . . . . . . . . . . . . . Qu necesito para programar en JavaScript . . . . . . .

87
88 89 90 90 91 93 95 95 96 96 98

JavaScript y Java . . . . . . . . . . . . . . . . . . . . . . Versiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

JavaScript y ECMA

JScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . Diferencias entre JavaScript y JScript . . . . . . . . . .

El lenguaje 5.2.1. 5.2.2.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Caractersticas bsicas . . . . . . . . . . . . . . . . . . . Comentarios . . . . . . . . . . . . . . . . . . . . . . . . .

viii

ndice general

5.2.3. 5.2.4. 5.2.5. 5.2.6. 5.2.7. 5.3.

Declaracin de variables . . . . . . . . . . . . . . . . . . mbito de las variables . . . . . . . . . . . . . . . . . .

98 100 102 103 105 105 105 108 112 114 114 116 120 121 122 123 123 128 132 133 135 138

Caracteres especiales . . . . . . . . . . . . . . . . . . . . Operadores . . . . . . . . . . . . . . . . . . . . . . . . .

Palabras reservadas . . . . . . . . . . . . . . . . . . . . .

Sentencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.3.1. 5.3.2. 5.3.3. Condicionales . . . . . . . . . . . . . . . . . . . . . . . . De repeticin . . . . . . . . . . . . . . . . . . . . . . . .

De manipulacin de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5.4.

Funciones 5.4.1. 5.4.2.

Declaracin de funciones . . . . . . . . . . . . . . . . . . Funciones predenidas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5.5.

Objetos 5.5.1. 5.5.2. 5.5.3.

Creacin de objetos Mtodos de un objeto

Eliminacin de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5.6. 5.7. 5.8.

Tratamiento de cadenas Operaciones matemticas Validacin de formularios 5.8.1. 5.8.2. 5.8.3.

Validacin campo nulo . . . . . . . . . . . . . . . . . . . Validacin alfabtica . . . . . . . . . . . . . . . . . . . . Validacin numrica . . . . . . . . . . . . . . . . . . . .

6. Modelo de objetos de documento

6.1. 6.2. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Modelo de objetos en Netscape Communicator 6.2.1. 6.2.2. 6.2.3. 6.2.4. 6.2.5. 6.2.6. 6.3. . . . . . . . . . Objeto document . . . . . . . . . . . . . . . . . . . . . . Cmo acceder a los controles de un formulario . . . . . . Objeto history . . . . . . . . . . . . . . . . . . . . . . .

145
146 146 148 152 157 157 160 161 170

Objeto location . . . . . . . . . . . . . . . . . . . . . . . Objeto navigator . . . . . . . . . . . . . . . . . . . . . . Objeto window . . . . . . . . . . . . . . . . . . . . . . .

Modelo de objetos en Microsoft Internet Explorer . . . . . . . .

A. Resumen etiquetas HTML

A.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A.2. Etiquetas que denen la estructura del documento . . . . . . .

173
174 175

ndice general

ix

A.3. Etiquetas que pueden ir en la cabecera . . . . . . . . . . . . . . A.4. Etiquetas que denen bloques de texto . . . . . . . . . . . . . . A.5. Etiquetas de listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A.6. Etiquetas de caractersticas del texto . . . . . . . . . . . . . . . A.7. Etiquetas de anclas y enlaces A.8. Etiquetas de imgenes y mapas de imgenes . . . . . . . . . . . A.9. Etiquetas de tablas . . . . . . . . . . . . . . . . . . . . . . . . . A.10.Etiquetas de formularios . . . . . . . . . . . . . . . . . . . . . . A.11.Etiquetas de marcos A.13.Etiquetas de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A.12.Etiquetas de situacin de contenidos A.14.Etiquetas de applets y plug-ins A.15.Etiquetas de ajuste del texto

176 177 177 178 179 180 181 183 186 187 189 189 191 192

A.16.Atributos universales . . . . . . . . . . . . . . . . . . . . . . . .

B. Colores en HTML
B.1. Como trabajar con las componentes RGB . . . . . . . . . . . . . B.1.1. Obtener las componentes del color deseado en decimal B.1.2. Transformar las componentes de decimal a hexadecimal B.2. Tabla de colores . . . . . . . . . . . . . . . . . . . . . . . . . . .

193
193 194 194 197

C. Depuracin de errores de JavaScript

C.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . C.2. Depuracin en cualquier navegador . . . . . . . . . . . . . . . . C.3. Netscape Communicator . . . . . . . . . . . . . . . . . . . . . . C.3.1. Modicar las preferencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . C.3.2. Evaluacin de expresiones con la consola . . . . . . . . . C.3.3. Netscape JavaScript Debugger C.4. Microsoft Internet Explorer . . . . . . . . . . . . . . . . . . . .

201
202 202 202 204 207 207 211

Bibliografa ndice alfabtico

217 219

ndice de cuadros
3.1. 3.2. 3.3. 3.4. 5.1. 5.2. 5.3. 5.4. 5.5. 5.6. 5.7. 5.8. Versiones de HTML . . . . . . . . . . . . . . . . . . . . . . . . 18 26 26 59 91 94 102 104 105 128 195 199 Caracteres con un signicado especial en HTML . . . . . . . . . Caracteres especiales . . . . . . . . . . . . . . . . . . . . . . . . Diferencias entre GIF y JPEG . . . . . . . . . . . . . . . . . . . JavaScript frente a Java . . . . . . . . . . . . . . . . . . . . . . . . . . .

Relacin entre las versiones de JavaScript y de Netscape Navigator 92 Relacin entre las versiones de JavaScript y de ECMA Relacin entre las versiones de JScript y los productos de Microsoft 95 Caracteres especiales . . . . . . . . . . . . . . . . . . . . . . . . Precedencia de los operadores de JavaScript . . . . . . . . . . . Palabras reservadas de JavaScript . . . . . . . . . . . . . . . . . Propiedades del objeto Math . . . . . . . . . . . . . . . . . . .

B.1. Equivalencias para pasar del sistema decimal al hexadecimal . . B.2. Nombres de algunos colores en HTML . . . . . . . . . . . . . .

xi

ndice de guras
1.1. 1.2. 1.3. 1.4. 2.1. 3.1. 3.2. 3.3. 3.4. 3.5. 3.6. 3.7. 3.8. 3.9. Separacin de funciones Presentacin distribuida Aplicacin distribuida Datos distribuidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 4 4 5 8 25 31 33 35 37 39 40 42 44 46 49 50 52 52 54 54 56 59 62 66

. . . . . . . . . . . . . . . . . . . . . . . . .

Esquema bsico de una aplicacin web . . . . . . . . . . . . . . Primera pgina HTML . . . . . . . . . . . . . . . . . . . . . . . Ejemplo de encabezados . . . . . . . . . . . . . . . . . . . . . . Formatos fsicos y lgicos . . . . . . . . . . . . . . . . . . . . . Distintos tipos de letra con la etiqueta <FONT> . . . . . . . . Distintos tamaos de letra con la etiqueta <FONT> . . . . . . Alineamiento de prrafos: izquierda, derecha, centrado y justicado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bloques de texto con distinta sangra . . . . . . . . . . . . . . . Listas de denicin . . . . . . . . . . . . . . . . . . . . . . . . . Listas ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.10. Listas no ordenadas

3.11. Enlace a un destino interno 3.12. Destino del enlace interno

3.13. Pgina con enlace a otra pgina . . . . . . . . . . . . . . . . . . 3.14. Pgina con enlace a otra pgina . . . . . . . . . . . . . . . . . . 3.15. Pgina con dos enlaces a otra pgina . . . . . . . . . . . . . . . 3.16. Pgina destino de los enlaces 3.18. Tablas como marcos . . . . . . . . . . . . . . . . . . . 3.17. Tabla sencilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.19. Imgenes con distinto alineamiento del texto . . . . . . . . . . . 3.20. Formulario con distintos controles . . . . . . . . . . . . . . . . .

xiii

xiv

ndice de guras

3.21. Distintas listas de seleccin

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

69 71 75 85 103 133 138 143 147 153 159 162 169 171 195 196 198 203 205 208 209 210 211 212 213 214 214 214 215

3.22. reas de texto de distinto tamao 3.23. Pgina con dos marcos verticales 4.1. 5.1. 5.2. 5.3. 5.4. 6.1. 6.2. 6.3. 6.4. 6.5. 6.6.

Cdigo JavaScript en un enlace . . . . . . . . . . . . . . . . . . Ejemplo de caracteres especiales . . . . . . . . . . . . . . . . . . Validacin campo nulo . . . . . . . . . . . . . . . . . . . . . . . Validacin alfabtica . . . . . . . . . . . . . . . . . . . . . . . . Validacin numrica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Modelo de objetos en Netscape Communicator

Propiedades del objeto document . . . . . . . . . . . . . . . . . Propiedades del objeto location . . . . . . . . . . . . . . . . . . Propiedades del objeto navigator . . . . . . . . . . . . . . . . . Interaccin entre varias ventanas a travs del objeto window . . Modelo de objetos en Microsoft Internet Explorer . . . . . . . . . . . . . . .

B.1. Ventana para modicar colores en Microsoft Paint B.3. Calculadora en modo cientco

B.2. Ventana para denir colores personalizados en Microsoft Paint . . . . . . . . . . . . . . . . . . .

C.1. Consola JavaScript de Netscape Communicator . . . . . . . . . C.2. Consola JavaScript con mensajes de error C.3. Evaluacin de expresiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

C.4. Netscape JavaScript Debugger . . . . . . . . . . . . . . . . . . . C.5. SmartUpdate en Netscape Communicator C.6. Mensaje de alerta de Microsoft Internet Explorer

C.7. Mensaje de alerta en la barra de estado de Microsoft Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . C.8. Opciones de Microsoft Internet Explorer . . . . . . . . . . . . . C.9. Mensaje de error en Microsoft Internet Explorer . . . . . . . . . C.10.Mensaje de error en Microsoft Internet Explorer . . . . . . . . . C.11.Nuevas opciones de Microsoft Internet Explorer . . . . . . . . . C.12.Depurador de Microsoft . . . . . . . . . . . . . . . . . . . . . .

ndice de acrnimos
ASP Active Server Pages
Tecnologa de Microsoft que permite crear pginas web dinmicas en el servidor. Se puede decir que las pginas gramas

ASP son similares a los proCGI. Las pginas ASP suelen estar programados en VBScript,

aunque tambin se pueden programar en otros lenguajes.

ASCII American Standard Code for Information Interchange

Cdigo binario utilizado para representar letras, nmeros, smbolos, etc. A cada carcter se le asigna un nmero del 0 al 127 (7 bits). Por ejemplo, el cdigo

ASCII

para la A mayscula es 65. Existen cdigos

ASCII

extendidos de 256 caracteres (8 bits), que permiten representar caracteres no ingleses como las vocales acentuadas o la ee. Los caracteres de la parte superior (128 a 255) de estos cdigos (ocialmente ISO-8859-1).

ASCII

extendidos varan

de uno a otro. Por ejemplo, uno de los ms extendidos es ISO Latin-1

CGI Common Gateway Interface

Estndar que permite el intercambio de informacin entre un servidor y un programa externo al servidor. Un programa

CGI es un programa

preparado para recibir y enviar datos desde y hacia un servidor web segn este estndar. Normalmente se programan en C o en Perl , aunque se puede usar cualquier lenguaje de propsito general.

DHTML Dynamic HTML

Conjunto de extensiones a

HTML que permiten modicar el contenido DOM para acceder

de una pgina web en el cliente sin necesidad de establecer una nueva comunicacin con el servidor. Se basa en el uso de al contenido de la pgina.

xv

xvi

ndice de acrnimos

DLL Dynamic Link Library

Fichero que almacena funciones ejecutables o datos que pueden ser usados por una aplicacin en Microsoft Windows. Una tiempo de compilacin).

DLL puede ser usada

por varios programas a la vez y se carga en tiempo de ejecucin (no en

DOM Document Object Model HTML (ventanas, imgenes, formularios) a travs de un lenguaje de script. Bsicamente dene un jerarqua de objetos. DOM se encuentra en proceso de estandarizacin por W3C. DHTML depende de DOM
mento para cambiar dinmicamente el contenido de una pgina web. Desgraciadamente, los dos navegadores mayoritarios poseen distintos modelos de objetos. Especicacin que dene como se puede acceder a los objetos de un docu-

ECMA European Computer Manufacturers Association ECMA es una asociacin internacional que establece GIF Graphics Interchange Format

estndares rela-

cionados con sistemas de comunicacin y de informacin.

Formato grco de mapas de bit desarrollado por Compuserve. Incorpora compresin de datos, transparencias y animaciones. Existen dos versiones de este estndar grco: 87a y 89a.

HTML HyperText Markup Language

Lenguaje compuesto de una serie de etiquetas o marcas que permiten denir el contenido y la apariencia de las pginas web. Aunque se basa en

SGML, no se puede considerar que sea un subconjunto. Existen cientos de etiquetas con diferentes atributos. W3C se encarga de su estandarizacin. El futuro sustituto de HTML es XHTML.

HTTP HyperText Transfer Protocol Es el protocolo que emplea la WWW. Dene cmo se tienen que crear y
enviar los mensajes y qu acciones debe tomar el servidor y el navegador en respuesta a un comando. Es un protocolo

stateless (sin estado), porque

cada comando se ejecuta independientemente de los anteriores o de los posteriores. Actualmente, la mayora de los servidores soportan 1.1 (

HTTP RFC 2616 de junio de 1999). Una de las principales ventajas de esta

versin es que soporta conexiones persistentes: una vez que el navegador

ndice de acrnimos

xvii

se conecta al servidor, puede recibir mltiples cheros a travs de la misma conexin, lo que aumenta el rendimiento de la transmisin hasta en un 20 %.

ISAPI Internet Server Application Program Interface

Un API para el servidor Microsoft Internet Information Server. Permite programar aplicaciones web.

ISO International Organization for Standards

Organizacin fundada en 1946, cuyos miembros son las organizaciones nacionales de normalizacin (estandarizacin) correspondientes a los pases miembros. Entre sus miembros se incluyen a la ANSI (Estados Unidos), BSI (Gran Bretaa), AFNOR (Francia), DIN (Alemania) y UNE (Espaa).

JPEG Joint Photographic Experts Group

Formato grco de mapas de bit. Incorpora compresin de datos con prdidas y permite trabajar con 24 bits de color.

JSP Java Server Pages

Tecnologa de Sun Microsystems que permite crear pginas dinmicas en el servidor. Equivale a la tecnologa en Java.

ASP de Microsoft. Se programan

MIME Multipurpose Internet Mail Extensions

Se usa en el correo electrnico desde 1992 para enviar y recibir cheros de distinto tipo. Se puede consultar el estndar en y

RFC 1522.

RFC 1341, RFC 1521

PNG Portable Network Graphics

Formato grco de mapas de bit similar a tuir patentado, mientras que

GIF por PNG debido a que el primero emplea un algoritmo que est PNG es totalmente gratuito. Tanto Microsoft

GIF. W3C ha decidido susti-

Internet Explorer como Netscape Communicator aceptan este formato.

RFC Request for Comments

Medio de publicar propuestas sobre Internet. Cada

RFC recibe un n-

mero. Algunos se convierten en un estndar de Internet.

xviii

ndice de acrnimos

RGB Red Green Blue

Notacin de los colores en la que cada color se representa como una combinacin de los tres colores bsicos (primarios) rojo ( azul (

blue ). Se trata de un modelo aditivo (se parte del negro). Mediante

red ), verde (green ) y

la combinacin adecuada de los tres colores bsicos se consigue todo el espectro de colores. Adems de los colores. Otra de las ms corrientes es CMYK (

RGB existen otras formas de representar

black ), que se trata de un modelo sustractivo.

cyan, magenta, yellow,

SGML Standard Generalized Markup Language

Lenguaje que permite organizar y etiquetar los distintos elementos que componen un documento. Se emplea para manejar grandes documentos que sufren constantes revisiones y se imprimen en distintos formato. Desarrollado y estandarizado por

ISO en 1986.

TCP/IP Transmission Control Protocol/Internet Protocol

Familia de protocolos que se emplean en las comunicaciones de Internet.

URL Universal Resource Locator

Tambin conocido como

Uniform Resource Locator. Sistema de direccio-

namiento de mquinas y recursos en Internet. Es decir, se trata de una direccin que permite localizar cualquier mquina o documento que se encuentre accesible a travs de Internet.

W3C World Wide Web Consortium

Consorcio internacional de compaas involucradas en el desarrollo de Internet y en especial de la

WWW. Su propsito es desarrollar estn-

dares y poner orden en Internet.

WWW World Wide Web

res conectados a Internet forman parte de la comunicacin es web (

WWW). Su protocolo de HTTP, su lenguaje de creacin de documentos HTML y sus sistema de direccionamiento de los recursos URL. Los navegadores
browsers ) permiten navegar por la web.

Sistema de servidores web conectados a Internet (no todos los ordenado-

XHTML Extensible HyperText Markup Language HTML escrito segn las normas que marca XML. Por tanto, se trata de una aplicacin concreta de XML y no tienen que confundirse entre
s.

ndice de acrnimos

xix

XML Extensible Markup Language

te para la (sintaxis).

Metalenguaje de etiquetado basado en

SGML. Diseado especcamenWWW por W3C. Permite que un usuario disee sus propias

etiquetas, con sus atributos y las reglas de construccin de documentos

Captulo 1

Arquitecturas cliente/servidor
Las aplicaciones web son un tipo especial de aplicaciones cliente/servidor. Antes de aprender a programar aplicaciones web conviene conocer las caractersticas bsicas de las arquitecturas cliente/servidor.

ndice General
1.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . 1.2. Separacin de funciones . . . . . . . . . . . . . . . . 1.3. Modelos de distribucin en aplicaciones cliente/servidor . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3.1. Presentacin distribuida . . . . . . . . . . . . . . . . 1.3.2. Aplicacin distribuida . . . . . . . . . . . . . . . . . 1.3.3. Datos distribuidos . . . . . . . . . . . . . . . . . . .

2 3 3
4 4 4

1.4. Arquitecturas de dos y tres niveles . . . . . . . . . . 1.5. Descripcin de un sistema cliente/servidor . . . . .

5 5

Captulo 1.

Arquitecturas cliente/servidor

1.1. Introduccin
Cliente/servidor es una arquitectura de red proceso en la red es

cliente o servidor. Normalmente, los servidores son or-

1 en la que cada ordenador o

denadores potentes dedicados a gestionar unidades de disco (servidor de cheros), impresoras (servidor de impresoras), trco de red (servidor de red), datos (servidor de bases de datos) o incluso aplicaciones (servidor de aplicaciones), mientras que los clientes son mquinas menos potentes y usan los recursos que ofrecen los servidores. Esta arquitectura implica la existencia de una relacin entre procesos que solicitan servicios ( o en distintos. La arquitectura cliente/servidor implica la realizacin de aplicaciones distribuidas. La principal ventaja de esta arquitectura es que permite separar las funciones segn su servicio, permitiendo situar cada funcin en la plataforma ms adecuada para su ejecucin. Adems, tambin presenta las siguientes ventajas:

dores). Estos dos tipos de procesos pueden ejecutarse en el mismo procesador

clientes) y procesos que responden a estos servicios (servi-

Las redes de ordenadores permiten que mltiples procesadores puedan ejecutar partes distribuidas de una misma aplicacin, logrando concurrencia de procesos. Existe la posibilidad de migrar aplicaciones de un procesador a otro con modicaciones mnimas en los programas. Se obtiene una escalabilidad de la aplicacin. Permite la ampliacin horizontal o vertical de las aplicaciones. La

escalabilidad horizontal se
permite la migracin

reere a la capacidad de aadir o suprimir estaciones de trabajo que hagan uso de la aplicacin (clientes), sin que afecte sustancialmente al rendimiento general. La diferente.

escalabilidad vertical

hacia servidores de mayor o menor capacidad y velocidad o de un tipo

Otro tipo de arquitectura de red es peer-to-peer (entre pares o de igual a igual), en la

que cada ordenador de la red posee responsabilidades equivalentes.

1.2. Separacin de funciones

Posibilita el acceso a los datos independientemente de donde se encuentre el usuario.

1.2. Separacin de funciones

La arquitectura cliente/servidor nos permite la separacin de funciones en tres niveles, tal como se muestra en la Figura 1.1:

Lgica de presentacin. La presentacin de los datos es una funcin

independiente del resto.

Lgica de negocio (o aplicacin). Los ujos de trabajo pueden cambiarse segn las necesidades existentes de un procesador a otro.

Lgica de datos.
momento.

La gestin de los datos debe ser independiente pa-

ra poder ser distribuida segn las necesidades de la empresa en cada

Figura 1.1: Separacin de funciones Si un sistema distribuido se disea correctamente, los tres niveles anteriores pueden distribuirse y redistribuirse independientemente sin afectar al funcionamiento de la aplicacin.

1.3. Modelos de distribucin en aplicaciones cliente/servidor

Segn como se distribuyan las tres funciones bsicas de una aplicacin (presentacin, negocio y datos) entre el cliente y el servidor, podemos contemplar

Captulo 1.

Arquitecturas cliente/servidor

tres modelos: presentacin distribuida, aplicacin distribuida y datos distribuidos.

1.3.1. Presentacin distribuida

El cliente slo mantiene la presentacin, el resto de la aplicacin se ejecuta remotamente (Figura 1.2). La presentacin distribuida, en su forma ms simple, es una interfaz grca de usuario a la que se le pueden acoplar controles de validacin de datos, para evitar la validacin de los mismos en el servidor.

Figura 1.2: Presentacin distribuida

1.3.2. Aplicacin distribuida

Es el modelo que proporciona mxima exibilidad, puesto que permite tanto a servidor como a cliente mantener la lgica de negocio realizando cada uno las funciones que le sean ms propias, bien por organizacin, o bien por mejora en el rendimiento del sistema (Figura 1.3).

Figura 1.3: Aplicacin distribuida

1.3.3. Datos distribuidos

Los datos son los que se distribuyen, por lo que la lgica de datos es lo que queda separada del resto de la aplicacin (Figura 1.4). Se puede dar de dos formas: cheros distribuidos o bases de datos distribuidas.

1.4. Arquitecturas de dos y tres niveles

Figura 1.4: Datos distribuidos

1.4. Arquitecturas de dos y tres niveles

La diferencia entre las aplicaciones de dos y tres niveles estriba en la forma de distribucin de la aplicacin entre el cliente y el servidor. Una arquitectura de dos niveles est basada en un sistema gestor de bases de datos donde el cliente mantiene la lgica de la presentacin, negocio, y de acceso a los datos, y el servidor nicamente gestiona los datos. Suelen ser aplicaciones cerradas que supeditan la lgica de los procesos cliente al gestor de base de datos que se est usando. En las arquitecturas de tres niveles, la lgica de presentacin, la lgica de negocio y la lgica de datos estn separadas, de tal forma que mientras la lgica de presentacin se ejecutar normalmente en la estacin cliente, la lgica de negocio y la de datos pueden estar repartidas entre distintos procesadores. El objetivo de aumentar el nmero de niveles en una aplicacin distribuida es lograr una mayor independencia entre un nivel y otro, lo que facilita la portabilidad en entornos heterogneos.

1.5. Descripcin de un sistema cliente/servidor

Un sistema cliente/servidor suele presentar las siguientes caractersticas: 1. Una combinacin de la parte cliente (tambin llamada de la aplicacin) y la parte servidor (o

front-end )

que

interacta con el usuario (hace de interfaz entre el usuario y el resto

back-end )

que interacta con los

recursos compartidos (bases de datos, impresoras, mdems). 2. La parte cliente y servidor tienen diferentes necesidades de recursos a la hora de ejecutarse: velocidad de procesador, memoria, velocidad y capacidad de los discos duros, dispositivos de entrada/salida, etc.

Captulo 1.

Arquitecturas cliente/servidor

3.

El entorno suele ser heterogneo y multivendedor. El hardware y sistema operativo del cliente y el servidor suelen diferir. El cliente y el servidor se suelen comunicar a travs de unas API ODBC

4 para acceder a bases de datos).

2 y RPC3 conocidas (por ejemplo,

4.

Normalmente la parte cliente se implementa haciendo uso de una interfaz grca de usuario, que permite la introduccin de datos a travs de teclado, ratn, lpiz ptico, etc.

2 3 4

Application Program Interface, interfaz de programacin de aplicaciones. Remote Procedure Call, llamada a procedimiento remoto. Open Database Connectivity, conectividad de bases de datos abierta.

Captulo 2

Qu es una aplicacin web

En las aplicaciones web suelen distinguirse tres niveles (como en las arquitecturas cliente/servidor de tres niveles): el nivel superior que interacciona con el usuario (el cliente web, normalmente un navegador), el nivel inferior que proporciona los datos (la base de datos) y el nivel intermedio que procesa los datos (el servidor web). En este captulo se describen el cliente y el servidor web y se comentan los entornos web en los que se ejecutan las aplicaciones web.

ndice General
2.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . .
2.1.1. El cliente . . . . . . . . . . . . . . . . . . . . . . . . 2.1.2. El servidor . . . . . . . . . . . . . . . . . . . . . . .

8
8 9

2.2. Transferencia de pginas web . . . . . . . . . . . . . 10 2.3. Entornos web . . . . . . . . . . . . . . . . . . . . . . . 11

2.3.1. Internet . . . . . . . . . . . . . . . . . . . . . . . . . 11 2.3.2. Intranet . . . . . . . . . . . . . . . . . . . . . . . . . 12 2.3.3. Extranet . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.4. Ventajas y desventajas . . . . . . . . . . . . . . . . . 13

Captulo 2.

Qu es una aplicacin web

2.1. Introduccin
cliente (el navegador, explorador o visua1 lizador ) como el servidor (el servidor web) y el protocolo mediante el que se comunican (HyperText Transfer Protocol (HTTP)) estn estandarizados y
cin cliente/servidor, donde tanto el no han de ser creados por el programador de aplicaciones (Figura 2.1). El protocolo ciones Una aplicacin web (

web-based application )

es un tipo especial de aplica-

Transmission Control Protocol/Internet Protocol (TCP/IP),

HTTP forma parte de la familia de protocolos de comunicaque son

los empleados en Internet. Estos protocolos permiten la conexin de sistemas heterogneos, lo que facilita el intercambio de informacin entre distintos ordenadores.

Figura 2.1: Esquema bsico de una aplicacin web

2.1.1. El cliente
El cliente web es un programa con el que interacciona el usuario para solicitar a un servidor web el envo de los recursos que desea obtener mediante

HTTP2 .
1 2

HyperText Markup Language (HTML)

En ingls se le suele denominar browser.

La parte cliente de las aplicaciones web suele estar formada por el cdigo que forma la pgina web ms algo de

Los clientes web tambin suelen actuar como clientes de transferencia de archivos (FTP),

lectores de correo (SMTP y POP) y grupos de noticias (NNTP), etc.

2.1. Introduccin

cdigo ejecutable realizado en lenguaje de

script del navegador (JavaScript o VBScript ) o mediante pequeos programas (applets ) realizados en Java. Tam3 bin se suelen emplear plug-ins que permiten visualizar otros contenidos multimedia (como Flash ), aunque no se encuentran tan extendidos como las tecnologas anteriores y plantean problemas de incompatibilidad entre distintas plataformas. Por tanto, la misin del cliente web es interpretar las pginas

HTML y los diferentes recursos que contienen (imgenes, sonidos, etc.).

2.1.2. El servidor
El servidor web es un programa que est esperando permanentemente las solicitudes de conexin mediante el protocolo
Windows un servicio.

HTTP por parte de los clientes

web. En los sistemas Unix suele ser un demonio y en los sistemas Microsoft La parte servidor de las aplicaciones web est formada por pginas estticas que siempre muestran el mismo contenido y por programas o pginas. La salida de este

scripts

que son

ejecutados por el servidor web cuando el navegador del cliente solicita algunas

script

suele ser una pgina

HTML

se enva al navegador del cliente. Tradicionalmente este programa o es ejecutado por el servidor web se basa en la tecnologa

Interface (CGI).
protocolo

script que Common Gateway

estndar que

La programacin del servidor mediante

HTTP no almacena el estado entre una conexin y la siguiente (es

CGI

es compleja y laboriosa. El

un protocolo sin estado), por lo que es el programador el que se tiene que encargar de conservarlo. Esto conduce a que el programador tenga que dedicar parte de su tiempo a programar tareas ajenas al n de la aplicacin, lo que suele ser origen de diversos problemas. Sin embargo, con la entrada en 1995 de Microsoft en el mundo Internet y la salida al mercado de su servidor web (Internet Information Server) se abri un nuevo campo para las aplicaciones web:

Interface (ISAPI).

Internet Server Application Program

Se trata de un conjunto de funciones que el servidor web

pone a disposicin de los programadores de aplicaciones web. Con los programadores pueden crear

Dynamic Link Library (DLL)

ISAPI,

con funciones

Un plug-in es un mdulo de software que se instala como un aadido a un programa o

sistema y que proporciona nuevas caractersticas o servicios al programa o sistema. En los navegadores, suelen permitir la reproduccin de diferentes tipos de recursos de audio o vdeo.

Tecnologa de animacin vectorial independiente de la plataforma, creada por Macro-

media Inc.

10

Captulo 2. Qu es una aplicacin web

que son invocadas para determinados archivos (se ejecutan cuando el cliente solicita un archivo con una determinada extensin). Todo el sistema tipo sea

.asp.

ISAPI que es invocada automticamente para los archivos cuya extensin La DLL ASP preprocesa el archivo .asp interpretando su cdigo
script
a ejecutar en el servidor. Sin embargo, ella no interpreta di-

Active Server Pages (ASP),

no es ms que una DLL del

como un

rectamente el cdigo, sino que en funcin del lenguaje en el que est escrito, invoca a otra DLL que se encarga de ejecutar el Las ventajas que presenta Las pginas basadas en instrucciones programa y se la enva al servidor web, el cual a su vez la reenva al cliente.

script. Despus recoge la salida

ASP frente a CGI son: CGI

HTML se encuentran insertadas en CGI, mezclndose sus funcionalidades.

resultan difciles de mantener, ya que las el propio cdigo del

La ejecucin de un programa

CGI es muy ineciente, debido al proceso

de carga del cdigo en memoria que se realiza cada vez que un usuario requiere su ejecucin. La existencia de mltiples clientes simultneos supone mltiples copias del programa en memoria del servidor. La unin de

ISAPI con el servidor web es ms fuerte

(estn ms in-

tegrados), su ejecucin es ms rpida, con lo que se logra que las aplicaciones basadas en en

CGI.

ISAPI tengan un mayor rendimiento que las basadas

Adems de

servidor de las aplicaciones web: ColdFusion, y ofrecen resultados equivalentes.

ASP, existen otras tecnologas destinadas a programar la parte Java Server Pages (JSP), serv-

lets , PHP , etc. Todas ellas son muy similares, se basan en los mismos principios

2.2. Transferencia de pginas web

El proceso completo, desde que el usuario solicita una pgina, hasta que el cliente web (navegador) se la muestra con el formato apropiado, es el siguiente: 1. El usuario especica en el cliente web la direccin de la pgina que desea consultar: el usuario escribe en el navegador la direccin (

Resource Locator (URL)) de la pgina que desea visitar.

Universal

2.3. Entornos web

11

2. 3. 4.

El cliente establece una conexin con el servidor web. El cliente solicita la pgina o el objeto deseado. El servidor enva dicha pgina u objeto (o, si no existe, devuelve un cdigo de error).

5.

Si se trata de una pgina pretacin de los cdigos

HTML, el cliente inicia sus labores de interHTML. Si el cliente web encuentra instruccio-

nes que hacen referencia a otros objetos que se tienen que mostrar con la pgina (imgenes, sonidos, animaciones multimedia, etc.), establece automticamente comunicacin con el servidor web para solicitar dichos objetos. 6. 7. Se cierra la conexin entre el cliente y el servidor. Se muestra la pgina al usuario. Obsrvese que siempre se libera la conexin, por lo que sta slo tiene la duracin correspondiente a la transmisin de la pgina solicitada. Esto se hace as para no desperdiciar innecesariamente el ancho de banda de la red mientras el usuario lee la pgina recibida. Cuando el usuario activa un enlace de la pgina, se establece una nueva conexin para recibir otra pgina o elemento multimedia. Por ello, el usuario tiene la sensacin de que est disfrutando de una conexin permanente cuando realmente no es as. Un detalle importante es que para casa objeto que se transere por la red se realiza una conexin independiente. Por ejemplo, si el cliente web solicita una pgina que contiene dos imgenes integradas, se realizan tres conexiones: una para el documento

HTML y dos para los archivos de las imgenes.

2.3. Entornos web

Las aplicaciones web se emplean en tres entornos informticos muy similares que suelen confundirse entre s:

Internet, intranet

extranet.

2.3.1. Internet
Internet es una red global que conecta millones de ordenadores por todo el mundo. Su nacimiento se sita en 1969, en un proyecto de investigacin del

12

Captulo 2. Qu es una aplicacin web

Departamento de Defensa de Estados Unidos. En 1998, la Internet tena ms de 100 millones de usuarios en todo el mundo, en diciembre de 2000 unos 400 millones y el nmero sigue creciendo rpidamente. Ms de 100 pases estn conectados a este nuevo medio para intercambiar todo tipo de informacin. Al contrario que otros servicios

online,

que se controlan de forma centra-

lizada, la Internet posee un diseo descentralizado. Cada ordenador (

host )

en

la Internet es independiente. Sus operadores pueden elegir que servicio de Internet usar y que servicios locales quieren proporcionar al resto de la Internet. Asombrosamente, este diseo anrquico funciona satisfactoriamente. Existe una gran variedad de formas de acceder a la Internet. El mtodo ms comn es obtener acceso a travs de Proveedores de servicios de Internet (

Internet Service Provider, ISP).

Cuando se emplea la palabra internet en minsculas, nos referimos a un conjunto de dos o ms redes de ordenadores interconectadas entre s.

2.3.2. Intranet
Una intranet es una red de ordenadores basada en los protocolos que gobiernan Internet (

TCP/IP) que pertenece a una organizacin y que es accesible

nicamente por los miembros de la organizacin, empleados u otras personas con autorizacin. Una intranet puede estar o no conectada a Internet. Un sitio web en una intranet es y acta como cualquier otro sitio web, pero los cortafuegos ( lo protegen de accesos no autorizados. Al igual que Internet, las intranets se usan para distribuir y compartir informacin. Las intrantes hoy en da componen el segmento con el mayor crecimiento dentro de Internet, porque son menos caras de montar y de administrar que las redes privadas que se basan en protocolos propietarios.

rewall )

2.3.3. Extranet
Una extranet es una intranet a la que pueden acceder parcialmente personas autorizadas ajenas a la organizacin o empresa propietaria de la intranet. Mientras que una intranet reside detrs de un cortafuego y slo es accesible por las personas que forman parte de la organizacin propietaria de la intranet, una extranet proporciona diferentes niveles de acceso a personas que se encuentran en el exterior de la organizacin. Esos usuarios pueden acceder a la extranet slo si poseen un nombre de usuario y una contrasea con los

2.4. Ventajas y desventajas

13

que identicarse. La identidad del usuario determina que partes de la extranet puede visualizar. Las extranets se estn convirtiendo en un medio muy usado por empresas que colaboran para compartir informacin entre ellas. Se emplean como medio de comunicacin de una empresa con sus clientes, proveedores o socios. Las extranets son la base del comercio entre empresas (

business to business, B2B).

2.4. Ventajas y desventajas

El desarrollo explosivo de Internet y en especial de la WWW se debe a la aceptacin por todo el mundo de los estndares y tecnologas que emplea: medio de transporte comn ( pginas (

TCP/IP), servidor (HTTP) y lenguaje de creacin de HTML) estandarizados.

Muchas empresas han descubierto que las anteriores tecnologas se pueden emplear en las aplicaciones cliente/servidor que emplean. De esta forma nace el concepto de intranet: usar las tecnologas de Internet para implementar las tradicionales aplicaciones cliente/servidor dentro de una empresa. Adems, una vez que se tiene una aplicacin que funciona en una intranet, aparece la posibilidad de permitir su uso a travs de Internet, lo que facilita el teletrabajo o la movilidad de los empleados de una empresa . Una ventaja clave del uso de aplicaciones web es que el problema de gestionar el cdigo en el cliente se reduce drsticamente. Suponiendo que existe un navegador o explorador estndar en cada cliente, todos los cambios, tanto de interfaz como de funcionalidad, que se deseen realizar a la aplicacin se realizan cambiando el cdigo que resida en el servidor web. Comprese esto con el coste de tener que actualizar uno por uno el cdigo en cada uno de los clientes (imaginemos que tenemos 2.000 ordenadores clientes). No slo se ahorra tiempo porque reducimos la actualizacin a una slo mquina, sino que no hay que desplazarse de un puesto de trabajo a otro (la empresa puede tener una distribucin geogrca amplia). Una segunda ventaja, relacionada con la anterior, es que se evita la gestin de versiones. Se evitan problemas de inconsistencia en las actualizaciones, ya que no existen clientes con distintas versiones de la aplicacin.

Pensemos, por ejemplo, en los ejecutivos que tienen que desplazarse entre distintos pases,

pero que necesitan acceder a las aplicaciones de su empresa.

14

Captulo 2. Qu es una aplicacin web

Una tercera ventaja es que si la empresa ya est usando Internet, no se necesita comprar ni instalar herramientas adicionales para los clientes. Otra ventaja, es que de cara al usuario, los servidores externos (Internet) e internos (intranet) aparecen integrados, lo que facilita el aprendizaje y uso. Una ltima ventaja, pero no menos importante, es la independencia de plataforma. Para que una aplicacin web se pueda ejecutar en distintas plataformas (

hardware

y sistema operativo), slo se necesita disponer de un navegador

para cada una de las plataformas, y no es necesario adaptar el cdigo de la aplicacin a cada una de ellas. Adems, las aplicaciones web ofrecen una interfaz grca de usuario independiente de la plataforma (ya que la plataforma de ejecucin es el propio navegador). Una desventaja, que sin embargo est desapareciendo rpidamente, es que la programacin en la web no es tan verstil o potente como la tradicional. Al principio, las aplicaciones web eran bsicamente de solo lectura: permitan una interaccin con el usuario prcticamente nula. Sin embargo, con la aparicin de nuevas herramientas como Java, JavaScript y tiende a desaparecer.

ASP, esta limitacin

Captulo 3

HTML
HTML es un lenguaje de marcas (etiquetas) que se emplea para dar formato a los documentos que se quieren publicar en la WWW. Los navegadores pueden interpretar las etiquetas y muestran los documentos con el formato deseado. En este captulo se presentan los conceptos bsicos y avanzados (tablas, formularios y marcos) de HTML. El captulo naliza con una gua de estilo: pequeos consejos que pueden ayudar a lograr mejores pginas web.

ndice General
3.1. 3.2. 3.3. 3.4. 3.5. Introduccin . . . . . . . . . . . Evolucin de HTML . . . . . . . Clasicacin de las pginas . . . Qu necesito para usar HTML Conceptos bsicos de HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 17 19 21 22

3.6. Metadatos . . . . . . . . . . . . . . . . . . . . . . . . . 27 3.7. Etiquetas HTML . . . . . . . . . . . . . . . . . . . . . 28 3.8. Formato del texto . . . . . . . . . . . . . . . . . . . . 29

3.5.1. Estructura de una pgina . . . . . . . . . . . . . . . 23 3.5.2. Caracteres especiales y secuencias de escape . . . . . 25

3.8.1. Encabezados de secciones . . . . . . . . . . . . . . . 30 3.8.2. Formatos de caracteres . . . . . . . . . . . . . . . . . 32 3.8.3. La etiqueta <FONT> . . . . . . . . . . . . . . . . . 32

15

16

Captulo 3. HTML

3.9. Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

3.8.4. Alineamiento del texto . . . . . . . . . . . . . . . . . 36 3.9.1. Listas de denicin . . . . . . . . . . . . . . . . . . . 41 3.9.2. Listas ordenadas . . . . . . . . . . . . . . . . . . . . 42 3.9.3. Listas no ordenadas . . . . . . . . . . . . . . . . . . 45 3.10.1. Color de fondo de una pgina . . . . . . . . . . . . . 47 3.10.2. Color del texto . . . . . . . . . . . . . . . . . . . . . 47 3.11.1. Enlace a un punto del mismo documento . . . . . . 48 3.11.2. Enlace a otro documento . . . . . . . . . . . . . . . 50 3.11.3. Enlace a un punto de otro documento . . . . . . . . 51 3.12.1. Tablas invisibles . . . . . . . . . . . . . . . . . . . . 57 3.12.2. Tablas como marcos . . . . . . . . . . . . . . . . . . 58 3.13.1. Etiqueta <IMG> . . . . . . . . . . . . . . . . . . . . 60 3.13.2. Imgenes como fondo de una pgina . . . . . . . . . 61 3.14.1. 3.14.2. 3.14.3. 3.14.4. 3.14.5. 3.14.6. Controles de un formulario Campos de vericacin . . . Campos excluyentes . . . . Campos de texto . . . . . . Listas de seleccin . . . . . reas de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 67 67 67 67 69

3.10. Colores . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

3.11. Enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

3.12. Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

3.13. Imgenes . . . . . . . . . . . . . . . . . . . . . . . . . 58

3.14. Formularios . . . . . . . . . . . . . . . . . . . . . . . . 61

3.15. Marcos . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 3.16. Gua de estilo . . . . . . . . . . . . . . . . . . . . . . . 75

3.16.1. 3.16.2. 3.16.3. 3.16.4. 3.16.5. 3.16.6. 3.16.7. Organizar el cdigo HTML . . . . . . . Cuidado con los colores . . . . . . . . . Cuidado con los tipos de letra . . . . . . Sacar partido al hipertexto . . . . . . . Usar las capacidades multimedia . . . . Identidad corporativa . . . . . . . . . . Permitir que los usuarios se comuniquen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

76 76 76 76 77 77 77

3.1. Introduccin

17

3.16.8. Facilitar las bsquedas . . . . . . . . . . . . . . . . . 77 3.16.9. Revisar las pginas peridicamente . . . . . . . . . . 78 3.16.10.Los enlaces . . . . . . . . . . . . . . . . . . . . . . . 78

3.1. Introduccin
HTML.
Las pginas web o pginas

HTML son unos cheros escritos en el lenguaje HTML hasta

applets
JavaScript ,

El desarrollo de estas pginas abarca un amplio grupo de tecnolo-

gas, desde las pginas ms sencillas que slo usan el lenguaje las ms complejas que usan

Dynamic HTML (DHTML),

realizados en Java o componentes ActiveX . (

El lenguaje HTML se basa en Standard Generalized Markup Language SGML), un sistema mucho ms completo y complicado de procesamiento de

documentos que indica como organizar y marcar (etiquetar) un documento.

HTML dene e interpreta las etiquetas de acuerdo a SGML. Las pginas HTML se pueden disear usando texto con distintos tipos de
letras o colores, imgenes, listas de elementos, tablas, etc. Su modo de empleo es muy sencillo: se basa en el uso de etiquetas que indican que elementos contiene cada pgina, el formato que hay que aplicar a cada uno de ellos y como se tienen que distribuir por la pgina.

3.2. Evolucin de HTML

El nacimiento de

HTML

va ligado al de la

World Wide Web (WWW).

Los orgenes de ambos se sitan en 1991, en los trabajos que llevaba a cabo Tim Berners-Lee y sus compaeros en el CERN

1 en Suiza. Uno de los primeros

artculos en los que muestran sus ideas es World-Wide Web: The Information Universe . En este artculo detallan un sistema que permita realizar el sueo de interconectar todo el conocimiento de la humanidad y facilitar su acceso a todo el mundo gracias al empleo de los ordenadores. Para lograrlo, hacen uso de tecnologas como el hipertexto o la hipermedia, tecnologas que ya existan

1 2

Conseil Europeen pour le Recherche Nucleaire.

Tim Berners-Lee, Robert Cailliau, Jean-Franois Gro, Bernd Pollermann. World-Wide

Web: The Information Universe. Electronic Networking: Research, Applications and Policy, Vol. 1, No. 2, Meckler, Westport CT, primavera 1992.

18

Captulo 3. HTML

desde haca varios aos (en contra de lo que la gente cree, estas tecnologas no fueron inventadas por ellos). Entre las distintas partes que componen el sistema que proponen, se incluye una sintaxis en el estilo de SGML para proporcionar formato a los documentos. A partir de ah nace

HTML como un lenguaje para el intercambio de documentos cientcos y tcnicos. HTML evita la complejidad de SGML al
denir un pequeo conjunto de etiquetas que simplican la estructura de los documentos y las reglas no son tan estrictas como en En octubre de 1994, Tim Berners-Lee, funda el

World Wide Web Consortium (W3C) en el Massachusetts Institute of Technology, Laboratory for Computer Science [MIT/LCS] en colaboracin con el CERN, y con el apoyo de DARPA

SGML.

3 y de la Comisin Europea. En abril de 1995, el INRIA4 se

convierte en el primer

host

europeo de

El objetivo principal del da,

W3C

W3C.

es encabezar el desarrollo de la

WWW,

mediante la elaboracin de protocolos que aseguren su estandarizacin. Hoy en

W3C lidera el desarrollo de distintas tecnologas, como HTML, HTTP, Extensible Markup Language (XML), Portable Network Graphics (PNG), etc. En el Cuadro 3.1 mostramos las distintas versiones de HTML que se han
estandarizado

5 desde 1995.

Fecha
Noviembre 1995 Enero 1997 Diciembre 1997 Diciembre 1999 Enero 2000

Versin
HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 XHTML 1.0

Cuadro 3.1: Versiones de HTML

XHTML)

En

enero

de

2000

aparece

Extensible HyperText Markup Language

1.0, el futuro sustituto de

HTML.

Como dice el propio estn-

dar, se trata de una reformulacin de HTML en XML 1.0. lenguaje

HTML escrito segn las normas que impone XML. Por tanto, es una

XHTML

es el

3 4 5

Defense Advanced Research Projects Agency. Institut National de Recherche en Informatique et Automatique.
Algunas versiones, como

HTML+

HTML

3.0 nunca llegaron a estndar.

3.3. Clasicacin de las pginas

19

XML y no deben confundirse entre s. Las principales diferencias entre HTML y XHTML 1.0 son:
aplicacin concreta de Las etiquetas y atributos tienen que escribirse en minsculas. Los valores de los atributos tienen que ir entre comillas. No se admiten atributos sin valor. Todas las etiquetas tienen que aparecer por parejas (inicio y n) o como etiquetas vacas.

3.3. Clasicacin de las pginas

Segn como se generan las pginas web en el servidor, se clasican en:

Estticas. Poseen un contenido jo, todos los usuarios que las consultan
reciben la misma informacin. El usuario recibe en su navegador la pgina del servidor sin un procesamiento previo .

Dinmicas o activas en el servidor:

poseen un contenido variable,

distintos usuarios al consultar la misma pgina pueden recibir distintos contenidos. El usuario recibe en su navegador la pgina despus de haber sido procesada en el servidor. Para lograrlo se emplean lenguajes de programacin. Ejemplo: pginas generadas por un etc.

CGI, pginas ASP,

Por otro lado, segn como se visualizan las pginas en el cliente, se clasican en:

Estticas. Cuando no poseen ningn tipo de cdigo de script, applets plug-ins . Ejemplo: slo cdigo HTML.
6
mediante la tcnica snap shot. La informacin de la base de datos se convierte en

Las pginas estticas tambin pueden mostrar datos procedentes de una base de datos

HTML

de

forma manual, automticamente cuando ocurre un suceso o a una fecha y hora dadas (por ejemplo, todos los das a las tres de la maana). Esta tcnica es adecuada para catlogos, listas de precios, directorios telefnicos, etc., que no se modican muy a menudo.

20

Captulo 3. HTML

Dinmicas o activas en el cliente. DHTML, applets , etc.

Cuando se interpreta o ejecu-

ta cdigo en el equipo del usuario. Para lograrlo se emplean lenguajes de programacin y objetos integrados. Ejemplo: pginas con JavaScript ,

Las caractersticas anteriores se pueden combinar como se quieran: una pgina puede ser esttica en el servidor y en el cliente, esttica en el servidor pero dinmica en el cliente, dinmica en el servidor y esttica en el cliente y, por ltimo, dinmica en el servidor y dinmica en el cliente. Si nos planteamos crear pginas dinmicas en el servidor o en el cliente, surgen una serie de ventajas y desventajas. Las ventajas principales de las pginas activas en el cliente son: Se descarga de trabajo al servidor, ya que la ejecucin del cdigo se realiza de forma distribuida en cada cliente. Se reduce el ancho de banda necesario, ya que se evitan continuos traspasos de informacin del servidor al cliente y viceversa. Ofrecen respuestas inmediatas al usuario. Sin embargo, existen algunas razones que nos llevan a crear pginas activas en el servidor: Cuando la informacin sobre la que se realiza el procesamiento es muy amplia, su envo al cliente supone un ancho de banda grande. Puede existir informacin restringida sobre la que se realice el procesamiento y que no interese que pueda llegar ntegra al cliente. Las pginas activas en el cliente se basan en tecnologas dependientes del navegador y del sistema operativo del usuario. Presuponer que el usuario dispone de los requisitos necesarios para que funcionen las pginas es un error. Las pginas activas en el cliente pueden ser poco seguras. Entonces, cul de las cuatro combinaciones posibles elegir? La mejor opcin es la ltima: pginas dinmicas tanto en el servidor como en el cliente, ya que podremos aprovechar las ventajas de las dos opciones y eliminar sus

3.4. Qu necesito para usar HTML

21

desventajas. Simplemente, habr que distribuir la lgica de nuestra aplicacin entre el servidor y el cliente, de forma que se obtenga la solucin ms ptima a nuestro problema. En este captulo nos vamos a centrar en el lenguaje

HTML, que nos per-

mite realizar pginas estticas en el cliente. En el Captulo 5 veremos JavaScript , que nos permitir realizar pginas dinmicas en el cliente. Ambas tec-

nologas no inuyen en la parte del servidor. El desarrollo de pginas activas en el servidor queda fuera de los objetivos de este libro.

3.4. Qu necesito para usar HTML

No es necesario un servidor web, un proveedor web o tener una conexin a Internet para empezar a escribir documentos tienen un formato de texto plano (

Interchange (ASCII)),

American Standard Code for Information

HTML. Los documentos HTML

por lo que todo lo que se necesita es un editor (como

el Bloc de notas de Microsoft Windows) para crear las pginas y un navegador para verlas. Podemos crear, vincular y probar documentos Para facilitar la creacin de pginas

HTML completos

en nuestro ordenador, aunque no est conectado a ninguna red.

HTML, han aparecido gran cantidad HTML son simples editores

signica que el editor es ca-

de programas. Bsicamente, se pueden dividir en dos grupos: los editores de

HTML y los programas de diseo HTML.

suelen incluir la caracterstica

La mayora de editores que ayudan a escribir

de texto con algunos botones que pegan las etiquetas ms comunes. Otros,

syntax highlight :

paz de comprender el lenguaje en el que se programa, y colorea las palabras diferencindolas segn sean etiquetas, atributos, comentarios, etc. Por otro lado, los programas de diseo muestran la pgina

HTML de forma

grca y en tiempo real: es posible desplazar los distintos elementos que la componen (tablas, imgenes, texto), modicar sus propiedades (tamao, color, tipo de letra) y crear efectos avanzados. Un inconveniente de estos programas es que generan mucho cdigo

HTML:

si en el futuro se desea modicar la

pgina directamente a travs del cdigo

HTML, es prcticamente imposible.

Entre los mejores programas de esta clase destacan Adobe Golive, Claris Home
Page, Macromedia DreamWeaver y Microsoft FrontPage.

Conviene aclarar desde un principio que lo nico que da formato a una pgina web es una etiqueta

HTML.

Si editamos con cuidado un archivo de

texto con objeto de tener prrafos y columnas de cifras formateadas, pero no

22

Captulo 3. HTML

se incluye ninguna etiqueta, al visualizarlo en

HTML todo el texto uir en

.html
o

un solo prrafo y se perder todo el formato que le hayamos aplicado. La extensin de un archivo

HTML

suele ser

.htm7 .

Se deben

emplear nombres cortos y sencillos. Hay que evitar el uso de espacios o de caracteres especiales en el nombre del archivo y tambin controlar el uso de maysculas y minsculas puesto que en Internet existen multitud de sistemas operativos, que no pueden aceptar los mismos nombres de archivo que acepta el nuestro. Por ejemplo, hay sistemas operativos en los que las maysculas y minsculas se distinguen (Unix) y otros donde no (Microsoft Windows ).

3.5. Conceptos bsicos de HTML

El lenguaje

HTML consta de una serie de etiquetas o marcas (tags ). La

9 (cierre): delimitan la parte del documento

mayora de las etiquetas aparecen por parejas (cdigos pareados), siendo una de

HTML

comienzo (apertura) y otra de n

que se ve afectada por su accin. Pero tambin hay etiquetas que

aparecen de forma individual, como

<IMG>

para insertar una imagen.

Todas las etiquetas comienzan con el smbolo con el smbolo son. En el lenguaje las cadenas

>

<

(menor que) y terminan

(mayor que). Entre estos dos smbolos aparece el nombre de

la etiqueta. Por ejemplo,

<HR>

es una etiqueta vlida, pero

<HR

<HR<

no lo

<HTML>, <html> y <Html> representan la misma etiqueta. De todos

HTML no se distinguen minsculas/maysculas. Por tanto, HTML.

modos, es una buena prctica ponerlas siempre en maysculas, sobre todo en aras de una mayor legibilidad y claridad de los documentos

Las etiquetas de n tienen el mismo nombre que las de inicio, pero van precedidas del smbolo correspondiente a

/ (barra inclinada). <HTML> es </HTML>.

Por ejemplo, la etiqueta de cierre

7 8

Esta extensin existe debido a que en DOS y Microsoft Windows 3.x los cheros slo Aunque los nombres de los archivos pueden tener maysculas y minsculas, para acceder

pueden tener una extensin de tres caracteres. a un archivo no se tienen en cuenta. Por ello, en un mismo directorio no pueden existir dos archivos que slo se diferencian porque algunos caracteres aparecen en maysculas en uno y en minsculas en el otro.

Los navegadores actuales son muy exibles: si falta alguna etiqueta de n no producen

un error y muestran la pgina lo mejor posible. De todas formas, es recomendable ajustarse siempre a la sintaxis y no cometer errores.

3.5. Conceptos bsicos de HTML

23

Una etiqueta puede poseer varios atributos a los que hay que asignar valor. Estos atributos suelen ser opcionales y algunos necesitan un tipo de valor concreto. Los atributos se escriben dentro de la etiqueta y separados por espacios en blanco. Para asignar un valor a un atributo se emplea el signo igual (=). Por ejemplo, la etiqueta varios atributos, entre ellos el atributo

ALT

<IMG>, que no tiene una etiqueta de cierre, tiene WIDTH y HEIGHT que esperan un valor numrico y

que espera cualquier cadena de caracteres.

Cuando un usuario solicita una pgina

HTML a un servidor web, este en-

va la pgina tal cual. En el momento en que el explorador recibe la pgina, interpreta las etiquetas que la pgina contiene, mostrando al usuario el resultado nal (donde no aparecen ya las etiquetas, sino el resultado de su evaluacin).

3.5.1. Estructura de una pgina

</HEAD>)
es: La estructura bsica de una pgina se divide en cabecera (<HEAD> y cuerpo (<BODY>

... </BODY>).

...

El esqueleto bsico de una pgina

1 2 3 4 5 6 7 8 9

<!DOCTYPE HTML PUBLIC ".//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> Cabecera de la pgina </HEAD> <BODY> Cuerpo de la pgina </BODY> </HTML>

Ejemplo 3.1

El sentido de cada una de las lneas es:

Lnea 1: Permite indicar la versin

HTML

que se va a utilizar para

escribir la pgina. Normalmente no se incluye. Lnea 2: Junto a la lnea 9, indican el comienzo y n de la pgina. La etiqueta

<HTML>

es obligatoria.

Lnea 3: Junto a la lnea 5, indican el comienzo y n de la cabecera.

24

Captulo 3. HTML

Lnea 4: Lo que escribamos en la cabecera no se ver en la pgina. Se suele usar para indicar el ttulo de la pgina con incluir cdigo que se ejecuta en el cliente con denir un estilo con el contenido de la pgina con la etiqueta

<STYLE> ... </STYLE> o incluir <META>.

<TITLE> ... </TITLE>, <SCRIPT> ... </SCRIPT>,

informacin sobre

Lnea 6: Junto a la lnea 8, indican el comienzo y n del cuerpo. Lnea 7: Lo que escribamos en el cuerpo se ver en la pgina. La informacin contenida en esta seccin se puede visualizar con apariencias muy diversas: slo hay que aplicar distintos formatos a las secciones que la componen. Cuando se escriban las etiquetas de n hay que llevar mucho cuidado en el orden. Por ejemplo, en el esqueleto anterior, la etiqueta que

<HTML> aparece antes <BODY>; la ltima etiqueta en aparecer es la primera que se tiene que cerrar. Por tanto, el orden correcto es primero </BODY> y luego </HTML>.
El siguiente cdigo crea una pgina

HTML sencilla, que podemos ver en

la Figura 3.1. El ttulo indicado slo aparece en la barra de ttulo de la ventana activa del navegador. El ttulo se indica usando los cdigo pareados

... </TITLE>,

y se especica usando un texto plano, sin cdigos

HTML de

<TITLE>

formato (no se puede poner en negrita o cursiva, por ejemplo).

1 2 3 4 5 6 7 8 9 10

<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY> Esto es el cuerpo de una pgina HTML <BR> Esto tiene que aparecer en una lnea nueva </BODY> </HTML>
Es muy aconsejable poner ttulo a todos los documentos y, adems, se

Ejemplo 3.2

deber procurar que ste sea lo ms descriptivo posible, puesto que si algn usuario decide incluir nuestra pgina en su lista de enlaces (

bookmarks ),

el ttulo lo que quede almacenado en dicha lista (junto con la

URL).

ser

En el

3.5. Conceptos bsicos de HTML

25

Figura 3.1: Primera pgina HTML

caso de que no se haya especicado un ttulo, lo que se almacena en la lista de enlaces es la direccin de la pgina ( tario deberemos emplear la etiqueta

URL). En cualquier parte de una pgina HTML, si queremos incluir un comen<!-- Comentario -->.

Los comentarios

no se procesan y no producen una salida visible en la pgina. Los saltos de lnea que incluyamos en una pgina son irrelevantes (el navegador no los tiene en cuenta). Para producir un salto de lnea se emplea la etiqueta

<BR>.

Los espacios en blanco tambin son irrelevantes: si separamos

dos palabras por varios espacios en blanco, slo se tendr en cuenta uno de ellos. Si queremos incluir varios espacios en blanco, debemos de emplear el cdigo de escape tiene que escribir

&nbsp;. Por ejemplo, para &nbsp;&nbsp;&nbsp;.

incluir tres espacios en blanco se

3.5.2. Caracteres especiales y secuencias de escape

Algunos sistemas informticos trabajan con 7 bits en vez de 8. En esos casos, si se desea trabajar con caracteres

ASCII

de la parte superior de la

tabla (128-255), es necesario codicarlos de algn modo. En los documentos

HTML

se pueden codicar de dos formas, mediante referencias decimales o

referencias a entidades.

26

Captulo 3. HTML

Las referencias decimales (tambin llamadas secuencias de escape) usan el formato

&#193;

&#nnn;

donde

nnn

es el cdigo

representa el carcter

ASCII

del carcter. Por ejemplo,

Las referencias a entidades usan el formato el carcter

&aaaa;

cadena de texto que representa el carcter. Por ejemplo,

donde aaaa es una &Aacute; representa

Adems, existen algunos caracteres de la parte inferior de la tabla de caracteres ASCII que poseen un signicado especial en secuencia de escape.

HTML,

por lo que es

necesario codicarlos. En el Cuadro 3.2 guran los caracteres especiales con su

Carcter Decimal Entidad

" & < >

&#34; &#38; &#60; &#62;

&quot; &amp; &lt; &gt;

Cuadro 3.2: Caracteres con un signicado especial en HTML

Tambin existen otros caracteres que son difciles de conseguir desde el teclado, ya que no estn representados. En el Cuadro 3.3 guran algunos de los ms signicativos.

Carcter Decimal Entidad

c

&#167; &#169; &#174; &#182;

&sect; &copy; &reg; &para;

Cuadro 3.3: Caracteres especiales

3.6. Metadatos

27

3.6. Metadatos
La etiqueta

<META> permite indicar metadatos10

de una forma muy simple.

Permite incorporar informacin sobre el contenido de una pgina. Esta etiqueta slo puede aparecer en la seccin

<HEAD>. Esta etiqueta la emplean los motores

de bsqueda, los navegadores y las herramientas de diseo de pginas web. La etiqueta es:

<META> presenta dos variantes. La sintaxis de estas dos variantes

<META HTTP-EQUIV="propiedad" CONTENT="contenido">. El atributo HTTP-EQUIV se emplea cuando la pgina web se recupera mediante
11 en la cabecera de la respuesta HTTP (algunas propiedades de la

HTTP. Los servidores web pueden usar el nombre de la propiedad para crear una cabecera segn el estndar Request for Comments (RFC)
822 cabecera no se pueden jar de esta forma). Por ejemplo, la siguiente etiqueta <META>: <META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT"> se convierte en la siguiente cabecera

Expires: Tue, 20 Aug 1996 14:25:27 GMT

que puede ser usada por la cache del navegador o por los servidores proxy para saber hasta cuando se puede emplear la copia de una pgina existente en la cach.

HTTP:

<META NAME="propiedad" CONTENT="contenido">.

una lista de palabras clave, etc. El atributo propiedad mientras que el atributo plo, las siguientes etiquetas

Se emplea para in-

cluir propiedades del documento, tales como autor, fecha de caducidad,

CONTENT especica su valor. Por ejem<META> indican el autor, una descripcin, una
Ejemplo 3.3

NAME

indica el nombre de la

lista de palabras clave y la fecha de creacin de una pgina:

1 2 3 10 11

<META NAME="Author" CONTENT="Sergio Lujn Mora"> <META NAME="Rights" CONTENT="Sergio Lujn Mora"> <META NAME="Description" CONTENT="Una pgina de prueba">

Informacin sobre la informacin. Los metadatos, por ejemplo, permiten indicar cmo,

cundo y quin ha recogido una informacin y como le ha dado formato.

Standard for ARPA Internet Text Messages.

28

Captulo 3. HTML

4 5

<META NAME="Keywords" CONTENT="curso, html, diseo, web"> <META NAME="Date" CONTENT="Monday, 1 January, 2001">

A ttulo de ejemplo, la pgina principal de la web de la Universidad de Alicante contiene los siguientes metadatos:

1 2 3 4 5 6 7 8 9 10 11

<META <META <META <META <META <META <META <META <META <META <META

HTTP-EQUIV="pragma" CONTENT="no-cache"> NAME="Author" CONTENT="Universidad de Alicante"> NAME="Copyright" CONTENT=" c Universidad de Alicante"> NAME="Description" CONTENT="Web que recoge toda la ..."> NAME="keywords" CONTENT="Universidad de Alicante, Alicante ..."> NAME="Formatter" CONTENT="Mozilla/4.5 [es](Win98; I)[Netscape]"> NAME="Generator" CONTENT="Mozilla/4.5 [es](Win98; I)[Netscape]"> NAME="robots" CONTENT="index, follow"> HTTP-EQUIV="Content-Language" CONTENT="ES"> HTTP-EQUIV="Content-Script-Type" CONTENT="JavaScript"> HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859">

Ejemplo 3.4

3.7. Etiquetas HTML

Existen cientos de etiquetas, cada una con su conjunto de atributos. Adems, no existe un estndar que acepten todos los navegadores: los dos principales navegadores, Netscape Navigator y Microsoft Internet Explorer, presentan diferencias entre ellos, aceptando cada uno etiquetas que no acepta el otro. Existe un intento de estandarizacin por parte de mendacin es a

W3C, que peridicamente

publica borradores, recomendaciones y estndares denitivos. La ltima reco-

XHTML 1.0 (combinacin de HTML y XML), que sustituye HTML 4.01. Las etiquetas HTML (reconocidas por Netscape Navigator 4.0 y superiores)

las podemos clasicar en las siguientes categoras (en esta clasicacin una etiqueta slo aparece en una categora, pero realmente hay etiquetas que se pueden clasicar en varias categoras):

Etiquetas que denen la estructura del documento:

<BODY>.

<HTML>, <HEAD>

3.8. Formato del texto

29

Etiquetas que pueden ir en la cabecera:

<STYLE>

<LINK>.
y

<TITLE>, <BASE>, <META>,

Etiquetas que denen bloques de texto:

<DIV>, <H1> ... <H6>, <P>, <PRE>

Etiquetas de listas:

<ADDRESS>, <BLOCKQUOTE>, <XMP>.

<DIR>, <DL>, <DT>, <DD>, <MENU>, <OL>, <UL> y <LI>.

Etiquetas de caractersticas del texto:

<B>, <BASEFONT>, <BIG>, <BLINK>, <CITE>, <CODE>, <EM>, <FONT>, <I>, <KBD>, <PLAINTEXT>, <SMALL>, <S>, <STRIKE>, <STRONG>, <SUB>, <SUP>, <TT>, <U> y <VAR>. <A>. <IMG>, <AREA>
y y

Etiquetas de anclas y enlaces:

Etiquetas de imgenes y mapas de imgenes: Etiquetas de tablas: Etiquetas de

<MAP>.

<TABLE>, <CAPTION>, <TR>, <TD>

y

<TH>.

formularios:

<TEXTAREA>, <KEYGEN>
Etiquetas de marcos:

<FORM>, <INPUT>, <SELECT>, <OPTION>, <ISINDEX>.

y

<FRAME>,<FRAMESET>

<NOFRAMES>.
y

Etiquetas de situacin de contenidos: Etiquetas de script: Etiquetas de y

<LAYER>, <ILAYER>
y

<NOLAYER>.

<SCRIPT>, <NOSCRIPT>

<SERVER>.

<OBJECT>.

applets y plug-ins : <APPLET>, <PARAM>, <EMBED>, <NOEMBED>

<BR>, <CENTER>, <HR>, <MULTICOL>, <WBR>.

Etiquetas de ajuste del texto:

<NOBR>, <SPACER>, <SPAN>

Vamos a comentar las etiquetas ms importantes (las ms empleadas) con los atributos ms comunes. No es una explicacin exhaustiva, pero suciente para un primer contacto con

HTML.

En el Apndice A se puede consultar

una relacin con todas las etiquetas que acepta Netscape Communicator 4.0.

3.8. Formato del texto

En esta seccin vamos a repasar las etiquetas ms importantes que permiten asignar formato al texto: los encabezados de seccin, los estilos lgicos y fsicos, la etiqueta

<FONT> ... </FONT>

y por ltimo, como alinear el texto.

30

Captulo 3. HTML

3.8.1. Encabezados de secciones

Existen seis niveles de encabezados, numerados del 1 al 6, y segn tamaos

<H1> ... </H1> (la ms prominente) y el nivel 6 es la etiqueta <H6> ... </H6> (la menos prominente). Los encabezados
decrecientes: el nivel 1 es la etiqueta se suelen mostrar con tipos de letra ms grandes, en negrita o ms enfatizados que el texto normal. Pero los niveles 5 y 6 aparecen normalmente con un tamao inferior al del texto normal. El tamao de cada encabezado lo selecciona el navegador, por lo que la apariencia puede variar signicativamente de uno a otro. Cuando se visualizan, los encabezados comienzan en una lnea nueva y se suele dejar un espacio en blanco extra antes de ellos. La sintaxis de esta etiqueta es:

<Hn ALIGN="LEFT" | "CENTER" | "RIGHT" | "JUSTIFY"> ... </Hn>

Ejemplo 3.5

12 miento horizontal del encabezado . Por ejemplo, en la Figura 3.2 vemos como
se visualiza el siguiente cdigo en un navegador.

donde

es un nmero del 1 al 6 y el atributo

ALIGN

especica el alinea-

1 2 3 4 5 6 7 8 9 10 11 12

<HTML> <BODY> Texto normal <H1>Encabezado <H2>Encabezado <H3>Encabezado <H4>Encabezado <H5>Encabezado <H6>Encabezado Texto normal </BODY> </HTML>

Ejemplo 3.6

nivel nivel nivel nivel nivel nivel

1</H1> 2</H2> 3</H3> 4</H4> 5</H5> 6</H6>

12

En la documentacin de Netscape Communicator no gura el valor

JUSTIFY.

3.8. Formato del texto

31

Figura 3.2: Ejemplo de encabezados

32

Captulo 3. HTML

3.8.2. Formatos de caracteres

Las siguientes etiquetas se pueden emplear en lnea (

inline ), lo que signica

que no interrumpen el uir del texto (no producen saltos de lnea ni nada similar). Por tanto, se pueden aplicar a caracteres individuales. Los formatos (tambin llamados estilos) se dividen en lgicos y fsicos. Los formatos lgicos dependen del navegador (cada uno lo puede interpretar de distinta forma), mientras que los formatos fsicos siempre se representan de la misma forma. El siguiente cdigo

HTML muestra las etiquetas de los formatos ms coEjemplo 3.7

munes. En la Figura 3.3 vemos como se visualiza en un navegador.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<HTML> <BODY> Formatos fsicos:<BR> <B>Texto en negrita: &lt;B&gt;</B><BR> <I>Texto en cursiva: &lt;I&gt;</I><BR> <U>Texto subrayado: &lt;U&gt;</U><BR> <TT>Texto en teletipo (fuente fija): &lt;TT&gt;</TT><BR> <STRIKE>Texto tachado: &lt;STRIKE&gt;</STRIKE><BR> <S>Tambin funciona &lt;S&gt;</S><BR> <BR> Formatos lgicos:<BR> <CITE>Cita: &lt;CITE&gt;</CITE><BR> <CODE>Cdigo: &lt;CODE&gt;</CODE><BR> <DFN>Definicin: &lt;DFN&gt;</DFN><BR> <EM>Enfatizado: &lt;EM&gt;</EM><BR> <KBD>Texto tecleado: &lt;KBD&gt;</KBD><BR> <STRONG>Texto grueso: &lt;STRONG&gt;</STRONG><BR> <VAR>Texto variable: &lt;VAR&gt;</VAR><BR> </BODY> </HTML>

3.8.3. La etiqueta <FONT>

La etiqueta

<FONT> ... </FONT>

permite modicar el tipo de letra, el

tamao y el color del texto . Todo el texto entre las etiquetas

<FONT> ...

3.8. Formato del texto

33

Figura 3.3: Formatos fsicos y lgicos

34

Captulo 3. HTML

</FONT>
queta.

se muestra segn los valores especicados en los atributos de la eti-

Para modicar el tipo de letra se emplea el atributo

FACE. Se le puede indi-

car una lista de tipos de letras separados por comas. El navegador comprueba si el primer tipo de letra est disponible, si no es as prueba con el segundo y as sucesivamente. Si ninguno de los tipos de letra est disponible, no se produce ningn cambio en el tipo de letra. Los tipos de letra pueden ser especcos o genricos. Entre los primeros, los ms empleados son Los tipos de letra genricos son

fantasy.

Arial, Courier, Helvetica, Tahoma, Times y Verdana. serif, sans-serif, cursive, monospace y Helvetica

El siguiente cdigo muestra el uso de distintos tipos de letra. En la aparece con el tipo

Figura 3.4 podemos observar como se visualiza en un navegador. Como se ve en la imagen del navegador, el texto escrito en la pgina no est disponible el tipo de letra de letra por defecto; esto se debe a que en el ordenador en el que se visualiza

Helvetica.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<HTML> <BODY> Tipos de letra especficos:<BR> <FONT FACE="Arial">Texto en Arial</FONT><BR> <FONT FACE="Helvetica">Texto en Helvetica</FONT><BR> <FONT FACE="Tahoma">Texto en Tahoma</FONT><BR> <BR> Tipos de letra genricos:<BR> <FONT FACE="serif">Texto en serif</FONT><BR> <FONT FACE="sans-serif">Texto en sans-serif</FONT><BR> <FONT FACE="cursive">Texto en cursive</FONT><BR> <FONT FACE="monospace">Texto en monospace</FONT><BR> <FONT FACE="fantasy">Texto en fantasy</FONT><BR> </BODY> </HTML>
Para modicar el tamao se emplea el atributo

Ejemplo 3.8

SIZE. Este atributo dene el

tamao de forma relativa, en un intervalo del 1 (letra ms pequea) a 7 (letra ms grande). El tamao base por defecto es 3

13 . Tambin se puede indicar un

valor relativo al tamao base si se emplean los signos + o -. Por ejemplo, +2

13

Se puede cambiar con la etiqueta

<BASEFONT SIZE="numero">.

3.8. Formato del texto

35

Figura 3.4: Distintos tipos de letra con la etiqueta <FONT>

36

Captulo 3. HTML

signica un incremento en dos unidades respecto al tamao base. En la Figura 3.5 vemos como se visualiza el siguiente cdigo que muestra el uso del atributo

SIZE.
1 2 3 4 5 6 7 8 9 10 11 12

<HTML> <BODY> Distintos tamaos de <FONT SIZE="1">Texto <FONT SIZE="2">Texto <FONT SIZE="3">Texto <FONT SIZE="4">Texto <FONT SIZE="5">Texto <FONT SIZE="6">Texto <FONT SIZE="7">Texto </BODY> </HTML>

Ejemplo 3.9
letra:<BR> en 1</FONT><BR> en 2</FONT><BR> en 3</FONT><BR> en 4</FONT><BR> en 5</FONT><BR> en 6</FONT><BR> en 7</FONT><BR>

3.8.4. Alineamiento del texto

La etiqueta

<P> ... </P>

se emplea para marcar prrafo de texto. Un

prrafo comienza en una lnea nueva y el navegador suele dejar un espacio en blanco extra antes del prrafo. Para alinear el contenido de un prrafo se emplea el atributo centrado (CENTER) o justicado (JUSTIFY). El siguiente cdigo podemos ver el cdigo visualizado en un navegador. tenido del prrafo puede alinearse a la izquierda (LEFT), a la derecha (RIGHT),

ALIGN. El con-

HTML mues-

tra el mismo prrafo alineado de cuatro formas distintas. En la Figura 3.6

1 2 3 4 5 6 7 8 9

<HTML> <BODY> <P ALIGN="LEFT"> Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le interese en cada momento. </P>

Ejemplo 3.10

3.8. Formato del texto

37

Figura 3.5: Distintos tamaos de letra con la etiqueta <FONT>

38

Captulo 3. HTML

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<P ALIGN="RIGHT"> Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le interese en cada momento. </P> <P ALIGN="CENTER"> Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le interese en cada momento. </P> <P ALIGN="JUSTIFY"> Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas HTML enlazadas, de forma que el usuario pueda seleccionar la que ms le interese en cada momento. </P> </BODY> </HTML>

Los bloques de texto se especican usando la etiqueta

</BLOCKQUOTE>.

<BLOCKQUOTE> ...

Un bloque de texto aparece sangrado hacia la derecha. Se

suele emplear para marcar citas textuales o deniciones de especial relevancia. Los bloques de texto se pueden anidar para producir un mayor sangrado. El siguiente cdigo muestra el empleo de esta etiqueta. En la Figura 3.7 se puede ver como se muestra en un navegador web.

1 2 3 4 5 6 7 8

<HTML> <BODY> Este texto no tiene sangra. <BLOCKQUOTE> 1. Un nivel de sangra. <BLOCKQUOTE> 2. Dos niveles de sangra. <BLOCKQUOTE>

Ejemplo 3.11

3.8. Formato del texto

39

Figura 3.6: Alineamiento de prrafos: izquierda, derecha, centrado y justicado

40

Captulo 3. HTML

9 10 11 12 13 14 15 16 17

3. Tres niveles de sangra. </BLOCKQUOTE> </BLOCKQUOTE> Volvemos al nivel 1. </BLOCKQUOTE> Volvemos a texto sin sangra. </BODY> </HTML>

Figura 3.7: Bloques de texto con distinta sangra

3.9. Listas

41

3.9. Listas
Las listas permiten organizar la informacin de una manera lgica, lo que facilita su legibilidad. Existen cinco tipos de listas en

HTML:

listas de de-

nicin, listas ordenadas, listas no ordenadas, listas de directorio y listas de men. Como las dos ltimas listas estn obsoletas, ya que se visualizan como las listas no ordenadas, no las vamos a ver. Las listas se pueden anidar entre s, incluso si son de distinto tipo. En el caso de anidar listas no numeradas, cada nivel de anidamiento tendr un tipo de smbolo distinto.

3.9.1. Listas de denicin

Una lista de denicin se emplea para mostrar trminos con sus correspondientes deniciones, como si se tratase de un glosario o diccionario. Una lista de denicin se crea con la etiqueta

list ). Contiene una serie de trminos, que se nition term ), y cada trmino posee una o ms deniciones, que se indican cada una con la etiqueta <DD> (denition description ). Las deniciones de cada
trmino aparecen con una sangra hacia la derecha. El siguiente ejemplo muestra como se usan estas etiquetas. Aunque las lneas que contienen las etiquetas

<DL> ... </DL> (denition denen con la etiqueta <DT> (de-

<DD>

aparecen con unos espacios en blanco

al principio, estos no inuyen para nada en su visualizacin. En la Figura 3.8 vemos el resultado que produce este ejemplo.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<HTML> <BODY> <DL> <DT>BANCO <DD>Lugar donde se deposita dinero <DD>Sitio donde se sienta la gente <DT>GATO <DD>Animal de cuatro patas con pelo <DD>Herramienta para levantar un vehculo <DT>ORDENADOR <DD>Aparato electrnico que realiza clculos </DL> </BODY> </HTML>

Ejemplo 3.12

42

Captulo 3. HTML

Figura 3.8: Listas de denicin

3.9.2. Listas ordenadas

La etiqueta elemento se dene con la etiqueta

<OL> ... <OL> (ordered list ) dene una lista de este tipo. Cada <LI> (list item ). Esta etiqueta posee dos atributos: START y TYPE. El atributo START indica el valor desde el que se empieza la numeracin;

En las listas ordenadas o numeradas, cada elemento aparece numerado.

tiene que ser un valor positivo.

3.9. Listas

43

El atributo

TYPE

indica el tipo de numeracin de los elementos de la lista.

Los posibles valores de este atributos son:

A: a: I: i: 1:

indica una numeracin con letras en mayscula. indica una numeracin con letras en minscula. indica una numeracin con nmeros romanos en maysculas. indica una numeracin con nmeros romanos en minsculas. indica una numeracin con nmeros.

El siguiente ejemplo muestra el uso de esta etiqueta. Adems, tambin se puede ver como se pueden anidar listas (incluir una lista dentro de otra lista). En la Figura 3.9 vemos como se muestra esta pgina.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<HTML> <BODY> Lista normal, con anidamiento: <OL> <LI>Elemento 1 <LI>Elemento 2 <LI>Lista anidada: <OL> <LI>Elemento 1 <LI>Elemento 2 </OL> </OL> Lista numerada con letras en maysculas: <OL TYPE="A"> <LI>Elemento 1 <LI>Elemento 2 </OL> Lista numerada con nmeros romanos: <OL TYPE="i"> <LI>Elemento 1 <LI>Elemento 2 </OL> </BODY> </HTML>

Ejemplo 3.13

44

Captulo 3. HTML

Figura 3.9: Listas ordenadas

3.9. Listas

45

3.9.3. Listas no ordenadas

En las listas no ordenadas, los elementos aparecen marcados mediante unos pequeos elementos grcos, llamados en ingls

</UL> (unordered list ) dene una con la etiqueta <LI> (list item ).

bullet.

La etiqueta

<UL> ...

lista no ordenada. Cada elemento se dene

Esta etiqueta posee el atributo tomar este atributo son:

TYPE,

que permite cambiar el elemento

grco empleado para marcar los elementos. Los posibles valores que puede

CIRCLE: DISC:

un disco con el centro vaco.

un disco slido. un cuadrado.

SQUARE:

El siguiente cdigo muestra como se emplea esta etiqueta. Adems, en la ltima lista hay un anidamiento de varias listas. En la Figura 3.10 se puede ver que cuando se anidan varias listas, el elemento grco automticamente, segn cual sea el nivel de anidamiento.

bullet

cambia

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<HTML> <BODY> <UL TYPE="CIRCLE"> <LI>Elemento 1 <LI>Elemento 2 </UL> <UL TYPE="DISC"> <LI>Elemento 1 <LI>Elemento 2 </UL> <UL TYPE="SQUARE"> <LI>Elemento 1 <LI>Elemento 2 </UL> <UL> <LI>Elemento a: <UL> <LI>Elemento b: <UL>

Ejemplo 3.14

46

Captulo 3. HTML

20 21 22 23 24 25

<LI>Elemento c: </UL> </UL> </UL> </BODY> </HTML>

Figura 3.10: Listas no ordenadas

3.10. Colores

47

3.10. Colores
En

HTML se puede cambiar el color de distintos elementos, como el color

Red Green Blue (RGB).

de fondo de una pgina, el color del texto, el color de una tabla, etc. Existen dos formas de especicar los colores: Mediante las componentes Mediante esta co-

dicacin, se especica la intensidad de los colores bsicos rojo, verde y azul que permiten obtener por combinacin cualquier otro color. Cada componente puede variar entre 0 y 255, por lo que se tienen 16 777 216 (256 x 256 x 256) colores. Las componentes se tienen que expresar en hexadecimal y al principio se tiene que poner el signo mato general es diante

#000000, #FF0000.

#RRGGBB.

#; por tanto, el for-

Por ejemplo, el color negro se representa me-

el color blanco como

#FFFFFF

y un rojo brillante como

Mediante los nombres de los colores. Existen una serie de colores a los que se les ha asignado un nombre en ingls, como

green, olive

white.

HTML y como pasar las componentes RGB de decimal a hexadecimal.

En el Apndice B se incluye ms informacin sobre el uso de colores en

3.10.1. Color de fondo de una pgina

El color de fondo de una pgina se puede cambiar mediante el atributo

BGCOLOR

de la etiqueta

<BODY> ... </BODY>.

3.10.2. Color del texto

La etiqueta

<FONT> ... </FONT>

posee el atributo

COLOR

que permite in-

dicar el color del texto. Tambin se puede cambiar el color del texto para toda una pgina, el color de los enlaces, el color de los enlaces visitados y el color de los enlaces al activarse. Para ello se emplean los atributos y

ALINK

de la etiqueta

<BODY> ... </BODY>.

TEXT, LINK, VLINK

En el siguiente ejemplo, se cambia el color del texto y de los enlaces para que todos tengan el mismo color y no se puedan diferenciar unos de otros.

1 2

<HTML> <BODY TEXT="black" LINK="black" VLINK="text" ALINK="black">

Ejemplo 3.15

48

Captulo 3. HTML

3 4 5 6 7

<A HREF="http://www.ua.es">Universidad de Alicante</A> <BR> <A HREF="http://www.eps.ua.es">Escuela Politcnica Superior</A> </BODY> </HTML>

3.11. Enlaces
Los enlaces o hiperenlaces permiten relacionar distintas pginas entre s (hipertexto). Esta caracterstica da la posibilidad de organizar la informacin en distintas pginas

HTML enlazadas, de forma que el usuario pueda seleccionar

la que ms le interese en cada momento.

HTML o a un punto determinado de otra pgina HTML. En los dos ltimos casos, la pgina destino puede residir en el mismo
que lo contiene, a otra pgina servidor que la pgina que contiene el hiperenlace o en otro distinto.

Un hiperenlace puede hacer referencia a un punto determinado de la pgina

</A>. Todo aquello que aparezca en una pgina HTML entre dichas etiquetas
se considera un hiperenlace (ser el objeto sensible que al ser pulsado producir

La etiqueta que utiliza

HTML

para denir un hiperenlace es

<A> ...

el salto al destino del enlace). Normalmente suele utilizarse texto e imgenes como hiperenlaces.

3.11.1. Enlace a un punto del mismo documento

Un enlace de este tipo consta de dos partes: una referencia y un destino. El destino se identica por un nombre. La referencia har alusin al nombre del destino. En una pgina se pueden incluir varias referencias a un mismo destino, pero no se pueden crear varios destinos con el mismo nombre. La forma de denir este enlace es: Referencia: Destino:

<A HREF="#nombre">objeto del enlace</A>.

<A NAME="nombre">objeto del destino</A>.

Como puede observarse, en el caso de la referencia el nombre al que hace alusin va precedido del smbolo almohadilla (#), mientras que en el destino no.

3.11. Enlaces

49

En el siguiente cdigo de ejemplo, tenemos un enlace sobre la misma pgina. En la Figura 3.11 vemos que la palabra

enlace

es un enlace; al pulsar sobre

ella saltamos al destino que podemos ver en la Figura 3.12.

1 2 3 4 5 6 7 8 9 10 11 12 13

<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY> Aqu tenemos un <A HREF="#destino">enlace</A> sobre la misma pgina. Hay que dejar muchas lneas en blanco para que se pueda comprobar el efecto. <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <A NAME="destino">Esto</A> es el destino del enlace que aparece al principio de la pgina. </BODY> </HTML>

Ejemplo 3.16

Figura 3.11: Enlace a un destino interno

50

Captulo 3. HTML

Figura 3.12: Destino del enlace interno

3.11.2. Enlace a otro documento

Para incluir un enlace en un documento a otro documento, simplemente hay que incluir en el documento origen una referencia al documento destino. En este ltimo no hace falta indicar que es destino de un enlace. La forma de denir este enlace es: Referencia:

<A HREF="pagina.html">objeto del enlace</A>.

Muy importante: cuando indiquemos el nombre del documento destino (pagina.html), hay que tener mucho cuidado con las maysculas y minsculas. En el siguiente ejemplo tenemos dos pginas con colores de fondo distintos; en cada una de ellas gura un enlace a la otra. Pgina

html4a.html

(Figura 3.13):

1 2 3

<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE>

Ejemplo 3.17

3.11. Enlaces

51

4 5 6 7 8 9

</HEAD> <BODY BGCOLOR="#FFBBBB"> <B>Aqu tenemos un <A HREF="html4b.html">enlace</A> a otra pgina que tiene el fondo azul.</B> </BODY> </HTML>

Pgina

html4b.html

(Figura 3.14):

1 2 3 4 5 6 7 8 9

<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY BGCOLOR="#BBBBFF"> <B>Aqu tenemos un <A HREF="html4a.html">enlace</A> a otra pgina que tiene el fondo rojo.</B> </BODY> </HTML>

Ejemplo 3.18

3.11.3. Enlace a un punto de otro documento

Este tipo de enlace es una combinacin de los dos anteriores. La forma de denir este enlace es: Referencia: Destino:

<A HREF="pagina.html#nombre">objeto del enlace</A>.

<A NAME="nombre">objeto del destino</A>.

En el siguiente ejemplo tenemos una pgina con dos enlaces a la misma pgina, pero a distintos destinos dentro de esa pgina. Pgina

html5a.html

(Figura 3.15):

1 2 3 4

<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD>

Ejemplo 3.19

52

Captulo 3. HTML

Figura 3.13: Pgina con enlace a otra pgina

Figura 3.14: Pgina con enlace a otra pgina

3.12. Tablas

53

5 6 7 8 9 10 11 12 13

<BODY> <B>Aqu tenemos un <A HREF="html5b.html#destino1">enlace</A> a un destino de otra pgina. <BR><BR> Aqu tenemos otro <A HREF="html5b.html#destino2">enlace</A> a otro destino de la misma pgina que antes. </B> </BODY> </HTML>

Pgina

html5b.html

(Figura 3.16):

1 2 3 4 5 6 7 8 9 10 11 12

<HTML> <HEAD> <TITLE>Esto es una pgina HTML</TITLE> </HEAD> <BODY> <B>Aqu tenemos un <A NAME="destino1">destino</A>, el nmero 1. <BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR> Aqu tenemos otro <A NAME="destino2">destino</A>, el nmero 2. </B> </BODY> </HTML>

Ejemplo 3.20

3.12. Tablas
Hasta que aparecieron las tablas en el lenguaje (<PRE>

HTML,

la nica posibi-

lidad de tabular cosas en una pgina consista en usar texto con preformato

... </PRE>) y colocar manualmente los espacios hasta que las colum-

nas estuviesen perfectamente alineadas. Este proceso, adems de ser realmente tedioso, no ofrece resultados con la vistosidad deseada. Las tablas se construyen siguiendo una serie de reglas sencillas:

Las tablas en

... </TABLE>.

HTML se denen mediante los cdigos pareados <TABLE>

54

Captulo 3. HTML

Figura 3.15: Pgina con dos enlaces a otra pgina

Figura 3.16: Pgina destino de los enlaces

3.12. Tablas

55

Una tabla se compone de celdillas de datos. Una celdilla se dene usando los cdigos

<TD> ... </TD>. <TR> ...

Las celdillas se agrupan en las, que se denen con los cdigos

</TR>.
lumnas, y se denen con los cdigos

Pueden existir celdillas que se emplean como encabezados de las o co-

<TH> ... </TH>. Este tipo de celdas

suele aparecer diferenciada de las otras, normalmente en negrita. Las celdillas pueden contener cualquier elemento nes, enlaces e incluso otras tablas anidadas. El siguiente ejemplo muestra una tabla con bordes formada por nueve celdas, de las que tres forman parte del encabezado. La tabla se ha dividido en tres las y tres columna. En la Figura 3.17 vemos como se ve esta pgina en una navegador.

HTML: texto, imge-

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<HTML> <BODY> <TABLE BORDER="1"> <TR> <TH>Cabecera 1</TH> <TH>Cabecera 2</TH> <TH>Cabecera 3</TH> </TR> <TR> <TD>Elemento (1, 1)</TD> <TD>Elemento (1, 2)</TD> <TD>Elemento (1, 3)</TD> </TR> <TR> <TD>Elemento (2, 1)</TD> <TD>Elemento (2, 2)</TD> <TD>Elemento (2, 3)</TD> </TR> </TABLE> </BODY> </HTML>

Ejemplo 3.21

56

Captulo 3. HTML

Figura 3.17: Tabla sencilla

3.12. Tablas

57

Los atributos ms importantes de la etiqueta

<TABLE>

son:

BGCOLOR="color".

Color de fondo de la tabla.

BORDER="n". Indica el grosor del borde exterior de la tabla y de las lneas

delimitadoras interiores. Un valor 0 produce que no tenga borde.

CELLPADDING="n". Determina el espacio que debe existir entre los bordes

de cada celdilla y el contenido de la celda.

CELLSPACING="n".

Especica la cantidad de espacio que debe existir en-

tre celdas contiguas.

HEIGHT="n" | "n %". WIDTH="n" | "n %".

Alto de la tabla. Se puede indicar en pixels o en

tanto por ciento en relacin a la altura total disponible. Ancho de la tabla. Se puede indicar en pixels o en

tanto por ciento en relacin a la anchura total disponible.

Los atributos ms importantes de las etiquetas

<TR>, <TH>

<TD>

son:

ALIGN="LEFT" | "CENTER" | "RIGHT".

contenido de una celda.

Alineamiento

horizontal

del

BGCOLOR="color".

Color de fondo de una celda. Alineamiento

VALIGN="BASELINE" | "BOTTOM" | "MIDDLE" | "TOP".

vertical del contenido de una celda.

3.12.1. Tablas invisibles

Se conoce como tablas invisibles a aquellas que no poseen borde (BORDER= "0"). Las tablas invisibles son muy tiles para distribuir los distintos elementos en una pgina

HTML.

Por ejemplo, mediante tablas invisibles se puede mostrar el texto con mrgenes a la izquierda y a la derecha, mostrar texto a varias columnas, dividir una imagen en diferentes cheros y que se muestre como si no estuviese dividida, etc.

58

Captulo 3. HTML

3.12.2. Tablas como marcos

Las tablas son muy tiles para crear marcos alrededor del texto o cualquier otro elemento de una pgina

HTML. Se pueden conseguir efectos muy

elegantes y a su vez sencillos de realizar mediante diversas tablas anidadas. Por ejemplo, el siguiente cdigo, cuyo resultado se muestra en la Figura 3.18, muestra un texto sobre un fondo rojo rodeado de un marco amarillo en una pgina cuyo fondo es de color naranja. El tamao de las celdas de la tabla exterior se ha modicado mediante el atributo un marco ms ancho.

CELLPADDING="10"

para obtener

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<HTML> <BODY BGCOLOR="orange"> <CENTER> <TABLE BORDER="0" BGCOLOR="yellow" CELLPADDING="10"> <TR><TD> <TABLE BORDER="0" BGCOLOR="red"> <TR><TD> <FONT SIZE="5">HTML til y prctico</FONT> </TD></TR> </TABLE> </TD></TR> </TABLE> </CENTER> </BODY> </HTML>

Ejemplo 3.22

3.13. Imgenes
Al inicio de la web, el empleo de imgenes en los documentos muy escaso pginas que no empleen una gran cantidad de imgenes. Los dos formatos de imagen que admiten la mayora de los navegadores son

14 . Sin embargo, hoy es todo lo contrario y es muy difcil encontrar

HTML era

Graphics Interchange Format (GIF)

Joint Photographic Experts Group

14

Las razones pueden ser varias: los ordenadores no tenan la suciente potencia para

manejar varias imgenes a la vez, el ancho de banda en la comunicaciones era menor o a nadie se le haba ocurrido la idea de hacer un uso intensivo y extensivo de las imgenes.

3.13. Imgenes

59

Figura 3.18: Tablas como marcos

JPEG). Las caractersticas bsicas de ambos formatos se han resumido en el Caracterstica

Colores Transparencia Animacin Compresin Dibujo Fotografa

Cuadro 3.4.

GIF
256 (8 bits) S S Sin perdidas S No

JPEG
16 777 216 (24 bits) No No Con perdidas No S

Cuadro 3.4: Diferencias entre GIF y JPEG

Tambin existe el formato

PNG, que se ha creado como sustituto de GIF. GIF. Adems, emplea compresin sin

Este formato grco se ha creado especcamente para Internet y otras redes de ordenadores. Sus caractersticas ms importantes son: transparencia alfa, color de 24 bits y una compresin mejor que

15 prdidas . Aunque Microsoft Internet Explorer y Netscape Communicator en sus

15

Compresin de la informacin en la que todos los datos iniciales se almacenan, por lo que

60

Captulo 3. HTML

ltimas versiones ya lo soportan, an no se encuentra muy extendido su uso.

3.13.1. Etiqueta <IMG>

La etiqueta

<IMG>.
son:

HTML que permite insertar una imagen en un documento es

Una imagen se puede colocar en cualquier punto de un documento: en

un enlace, en una tabla, etc. Los atributos ms importantes de esta etiqueta

SRC="localizacin".
que se quiere insertar.

Indica la localizacin y el nombre de la imagen

BORDER="anchura".

Anchura del borde que se crea alrededor de la ima-

gen. Cuando se coloca una imagen en un enlace, automticamente se crea un borde; si no se quiere que aparezca el borde, hay que asignar el valor 0 a este atributo.

WIDTH="anchura". HEIGHT="altura".

Anchura de la imagen. Altura de la imagen.

ALT="texto". Texto alternativo que se muestra si el navegador no admite la etiqueta <IMG> o se ha interrumpido la carga de imgenes. ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". Especica el
alineamiento de la imagen con respecto al texto que la rodea. Se recomienda indicar siempre la anchura y la altura de cada imagen con los atributos rpida

16 .

WIDTH y HEIGHT, ya que as la visualizacin de las pginas es ms

El siguiente cdigo muestra como se emplean las imgenes. La pgina est formada por una tabla con cuatro celdas. En cada celda se muestra la misma imagen con un alineamiento distinto. Adems, la ltima imagen tambin posee un borde. En la Figura 3.19 se puede observar como se visualiza este cdigo en un navegador.
la calidad de las imgenes no se ve afectada al recuperar las imgenes una vez comprimidas.

16

El navegador conoce el tamao de las imgenes antes de cargarlas, por lo que ya puede

reservar el correspondiente espacio en el diseo de la pgina.

3.14. Formularios

61

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<HTML> <BODY> <TABLE BORDER="0"> <TR> <TD> <IMG SRC="foto.jpg" WIDTH="134" El manitas de la casa </TD> <TD> <IMG SRC="foto.jpg" WIDTH="134" El manitas de la casa </TD> </TR> <TR> <TD> <IMG SRC="foto.jpg" WIDTH="134" El manitas de la casa </TD> <TD> <IMG SRC="foto.jpg" WIDTH="134" El manitas de la casa </TD> </TR> </TABLE> </BODY> </HTML>

Ejemplo 3.23

HEIGHT="191" ALIGN="TEXTTOP">

HEIGHT="191" ALIGN="MIDDLE">

HEIGHT="191" ALIGN="BOTTOM">

HEIGHT="191" BORDER="10">

3.13.2. Imgenes como fondo de una pgina

La etiqueta

<BODY> ... </BODY>

posee el atributo

BACKGROUND

que per-

mite mostrar una imagen como fondo de una pgina. Si la imagen tiene un tamao menor que la ventana del navegador, la imagen se muestra en forma de mosaico hasta cubrir toda la supercie de la ventana.

3.14. Formularios
HTML para poder obtener informacin de un usuario que visita una pgina HTML y enviarla al servidor
Los formularios son la herramienta que ofrece

62

Captulo 3. HTML

Figura 3.19: Imgenes con distinto alineamiento del texto

3.14. Formularios

63

web para su procesamiento. Un formulario contiene dos tipos de elementos bsicos: campos de datos (cuadros de texto, listas de seleccin, casillas de vericacin) y de control (botones). Dentro de una pgina

HTML se puede incluir ms de un formulario, pe-

ro teniendo en cuenta que no pueden anidarse ni solaparse. El servidor web slo podr recibir la informacin introducida en uno de ellos (slo se enva la informacin de uno de los formularios al servidor). La estructura bsica de un formulario es:

1 2 3

<FORM NAME="nombre" ACTION="pagina.html" METHOD="metodo"> Controles del formulario </FORM>

El sentido de cada una de las lneas es: Lnea 1: La etiqueta

Ejemplo 3.24

NAME

<FORM>

marca el inicio del formulario. El atributo

asigna un nombre al formulario (para poder hacer referencia a l

posteriormente),

ACTION

indica la direccin (

URL) de la pgina o proMETHOD

grama que procesa los datos del formulario en el servidor y servidor (GET o

indi-

ca el mtodo que se va a utilizar para enviar los datos del formulario al

POST17 ).

Lnea 2: En esta seccin se incluyen los controles que posee el formulario. Lnea 3: Fin del formulario.

3.14.1. Controles de un formulario

Un formulario puede contener los siguiente controles:

<INPUT TYPE="SUBMIT">, <INPUT TYPE="RESET">, <INPUT TYPE="BUTTON">.

Botones (para enviar informacin, borrar y otras acciones): Imgenes que actan como botones (para enviar informacin):

TYPE="IMAGE">.
17
Normalmente se utiliza Si se utiliza

<INPUT

GET,

POST, que indica que los datos se enven por la entrada estndar.
URL.

los datos se envan unidos a la

64

Captulo 3. HTML

Campos de vericacin:

<INPUT TYPE="CHECKBOX">. <INPUT TYPE="RADIO">.

Campos excluyentes (botones de radio): Campos de texto:

<INPUT TYPE="TEXT">.
18 (password ):

Campos de contrasea Campos ocultos:

<INPUT TYPE="PASSWORD">.

<INPUT TYPE="HIDDEN">. <INPUT TYPE="FILE">. <SELECT> ... </SELECT>, <OPTION>.

(campos de texto multilnea):

Envo de cheros:

Listas de seleccin: reas de texto

</TEXTAREA>.

<TEXTAREA> ...

Para que los datos introducidos en un formulario se enven al servidor, todo formulario tiene que tener un botn de tipo mal

TYPE="SUBMIT",

que enva

automticamente los datos. Este botn se puede sustituir por un botn nor-

TYPE="BUTTON",

mediante cdigo de

script.

pero entonces el envo se tiene que realizar manualmente

Conviene dar un nombre a los campos que coloquemos en un formulario, ya que al enviar la informacin, sta se transmite como pares nombre-valor. Para ello, todas las etiquetas de los controles poseen el atributo

NAME

para asignar

un nombre al control, que deber ser un nombre nico, es decir, ningn otro control tendr que tener el mismo nombre (excepto en el caso de los botones

VALUE para asignar un valor (todas las etiquetas tienen este atributo excepto <INPUT TYPE="IMAGE">, <SELECT> ... </SELECT> y <TEXTAREA> ... </TEXTAREA>). En los botones, el atributo VALUE modica
de radio), y el atributo el texto que muestra el botn. El siguiente cdigo genera una pgina

HTML con un formulario que con-

tiene un campo de texto, un campo de contrasea, dos campos excluyentes con el mismo nombre (y por tanto slo se puede elegir una de las dos opciones), dos campos de vericacin, una lista de seleccin, un rea de texto y dos botones (para enviar informacin y borrar). En la Figura 3.20 se muestra el formulario tal como se ve en un navegador.

18

Un campo de contrasea es idntico a un campo de texto, pero los caracteres se ocultan

mediante asteriscos.

3.14. Formularios

65

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<HTML> <HEAD> <TITLE>Esto es una pgina HTML con formularios</TITLE> </HEAD> <BODY> Esto es el cuerpo de una pgina HTML. Esta pgina posee un formulario: <HR> <FORM NAME="miFormulario" ACTION="procesa.asp" METHOD="POST"> Cuadro de texto: <INPUT TYPE="TEXT" NAME="control1a" VALUE="Algo"> <BR> Cuadro de texto contrasea: <INPUT TYPE="PASSWORD" NAME="control1b"> <BR><BR> Botones de radio: <INPUT TYPE="RADIO" NAME="control2" VALUE="1">Opcin 1 <INPUT TYPE="RADIO" NAME="control2" VALUE="2">Opcin 2 <BR><BR> Casilla de verificacin: <INPUT TYPE="CHECKBOX" NAME="control3a" VALUE="1">Opcin 1 <INPUT TYPE="CHECKBOX" NAME="control3b" VALUE="2">Opcin 2 <BR><BR> Lista de seleccin: <SELECT NAME="control4"> <OPTION VALUE="ali">Alicante</OPTION> <OPTION VALUE="val">Valencia</OPTION> <OPTION VALUE="cas">Castelln</OPTION> </SELECT> <BR><BR> Area de texto: <TEXTAREA NAME="control5"></TEXTAREA> <BR><BR> <INPUT TYPE="SUBMIT" VALUE="Enviar"> <INPUT TYPE="RESET" VALUE="Borrar"> </FORM> <HR> </BODY> </HTML>

Ejemplo 3.25

66

Captulo 3. HTML

Figura 3.20: Formulario con distintos controles

3.14. Formularios

67

3.14.2. Campos de vericacin

Los campos de vericacin (<INPUT

TYPE="CHECKBOX">)

poseen dos valo-

res: activado y desactivado. Si al enviarse un formulario un campo de vericacin est activo, se enva al servidor el valor indicado por campos de vericacin pueden tener el mismo nombre (NAME), aunque no es lo usual ya que complica la programacin de la aplicacin web en el servidor. Si se desea que por defecto un campo de vericacin aparezca activado, se tiene que incluir el atributo

VALUE.

Distintos

CHECKED en la etiqueta <INPUT TYPE="CHECKBOX">.

3.14.3. Campos excluyentes

Los campos excluyentes o botones de radio (<INPUT

TYPE="RADIO">)

tie-

nen sentido cuando se emplean varios a la vez. Un grupo de botones de radio est formado por varios botones de radio que tienen todos el mismo nombre (NAME). En un grupo de botones de radio slo un botn de radio puede estar seleccionado en un instante. Un formulario puede contener distintos grupos de botones de radio. Los botones de radio tambin poseen el atributo dicar un botn de radio por defecto.

CHECKED

que permite in-

3.14.4. Campos de texto

(<INPUT puede En los campos de texto normal (<INPUT

TYPE="TEXT">) y de contrasea TYPE="PASSWORD">) se puede escribir una cadena de caracteres. Se emplear el atributo SIZE para especicar el tamao visual del cuadro MAXLENGTH, que especica el nmero mximo

de texto. Es decir, se puede indicar cuantos caracteres se pueden visualizar en un momento dado. No confundir este atributo con

de caracteres que se pueden introducir. Si no se especica nada, se pueden introducir tantos caracteres como se desee.

3.14.5. Listas de seleccin

Las listas de seleccin se crean con la etiqueta puede elegir una. Si se aade el atributo

<SELECT> ... </SELECT>.

el usuario puede elegir

En las listas de seleccin se muestra una serie de opciones de las que el usuario

MULTIPLE,

68

Captulo 3. HTML

mltiples opciones

19 . El atributo

SIZE

permite indicar cuantas opciones de la

lista se visualizan simultneamente. Cada opcin de una lista de seleccin se indica con la etiqueta Cada opcin puede tener asociado un valor (VALUE), que es el valor que se enviar al servidor. Si se desea que una opcin aparezca marcada por defecto se tiene que aadir a la opcin el atributo

<OPTION>.

SELECTED.

El siguiente ejemplo muestra tres listas: una lista normal, una lista normal que muestra tres opciones a la vez y posee una seleccionada por defecto y una lista mltiple. En la Figura 3.21 se puede observar como se visualiza este cdigo en un navegador.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<HTML> <BODY> <FORM> Lista de seleccin normal: <SELECT NAME="provincia"> <OPTION VALUE="1">Alicante <OPTION VALUE="2">Valencia <OPTION VALUE="3">Castelln </SELECT> <BR><BR><BR> Lista de seleccin normal de tamao 3: <SELECT NAME="universidad" SIZE="3"> <OPTION VALUE="uv">Universidad de Valencia <OPTION VALUE="uji">Universidad Jaime I <OPTION VALUE="ua" SELECTED>Universidad de Alicante <OPTION VALUE="upv">Universidad Politcnica de Valencia <OPTION VALUE="umh">Universidad Miguel Hernndez </SELECT> <BR><BR><BR> Lista de seleccin mltiple: <SELECT NAME="departamento" MULTIPLE> <OPTION VALUE="dlsi">D. de Lenguajes y Sistemas Informticos <OPTION VALUE="damma">D. de Anlisis M. y M. Aplicada <OPTION VALUE="dfists">D. de Fsica, Ingeniera de Sistemas y ... <OPTION VALUE="dagr">D. de Anlisis Geogrfico Regional
19
Para seleccionar varias opciones se emplean la tecla

Ejemplo 3.26

Control

para seleccionar de una

en una y la tecla

Mays ()

para seleccionar un conjunto contiguo de opciones (se marca la

primera y la ltima).

3.14. Formularios

69

26 27 28 29 30

<OPTION VALUE="mmlab">Laboratorio Multimedia </SELECT> </FORM> </BODY> </HTML>

Figura 3.21: Distintas listas de seleccin

3.14.6. reas de texto

La etiqueta

<TEXTAREA> ... </TEXTAREA>

dene un rea de texto donde

se pueden escribir varias lneas de texto. Esta etiqueta posee dos atributos que

70

Captulo 3. HTML

permiten modicar su tamao. El atributo por lnea que se pueden mostrar sin tener

COLS indica el nmero de caracteres que realizar scroll. El atributo ROWS

dene el nmero de lneas que se pueden mostrar sin realizar

scroll.

Si se quiere que el rea de texto muestre un texto por defecto, se puede incluir entre las etiquetas de inicio y n. El siguiente ejemplo muestra dos reas de texto de distinto tamao, una de ellas con un texto por defecto. En la Figura 3.22 se puede ver esta pgina visualizada en un navegador. Se pueden observar las barras de desplazamiento vertical y horizontal.

1 2 3 4 5 6 7 8 9 10 11

<HTML> <BODY> <FORM> rea 1: <TEXTAREA ROWS="2" COLS="40">Texto por defecto...</TEXTAREA> <BR> rea 2: <TEXTAREA ROWS="4" COLS="20"></TEXTAREA> </FORM> </BODY> </HTML>

Ejemplo 3.27

3.15. Marcos
Un marco (

frame )

es una regin de una ventana que acta como si fuera

una ventana ella misma. La ventana principal puede contener mltiples marcos, de forma que diferentes regiones de la ventana muestren diferentes contenidos. A su vez, un marco puede contener otros marcos. Normalmente, los marcos se emplean para dividir la ventana del navegador en dos partes: en una de ellas, la ms pequea, se muestra un ndice del sitio web (esta parte no vara); la otra, la ms grande, modica su contenido segn los enlaces que se pulsen en el ndice. Para denir los marcos se emplean las tres etiquetas siguientes:

... </FRAMESET>, <FRAME> y <NOFRAMES> ... </NOFRAMES>. La etiqueta <FRAMESET> ... </FRAMESET> dene un conjunto

<FRAMESET>
de marcos

que van a aparecer en la ventana. Esta etiqueta contiene una o ms etiquetas

3.15. Marcos

71

Figura 3.22: reas de texto de distinto tamao

72

Captulo 3. HTML

<FRAME> que denen cada uno de los marcos. Los principales atributos de esta
etiqueta son:

BORDER="anchura".
plano.

Anchura del borde de cada marco. Indica si el borde es en tres dimensiones o

FRAMEBORDER="YES" | "NO".

COLS="listaAnchurasColumnas".

Anchuras de cada uno de los marcos,

separadas por comas. La anchura se puede indicar como nmero de pixels o como un porcentaje sobre el total disponible (en este caso, el nmero se tiene que acompaar del signo porcentaje). Por ejemplo, si se quiere dividir la ventana del navegador en dos columnas que ocupan el 30 y 70 por ciento:

<FRAMESET COLS="30%,70%">

Ejemplo 3.28

ROWS="listaAlturasFilas". Alturas de cada uno de los marcos, separadas por comas. La altura se puede indicar como nmero de pixels o como un porcentaje sobre el total disponible (en este caso, el nmero se tiene que acompaar del signo porcentaje). Por ejemplo, si se quiere dividir la ventana del navegador en tres las que ocupan el 10, 80 y 10 por ciento:

<FRAMESET ROWS="10%,80%,10%">

Ejemplo 3.29

La etiqueta o columnas

<FRAMESET> ... </FRAMESET> dene el nmero de las (ROWS) (COLS) en que se va a dividir la ventana. Los dos atributos no se <FRAMESET> <FRAME>
se puede incluir otro

pueden emplear simultneamente. Esta etiqueta se puede anidar, de forma que dentro de un

<FRAMESET>.

De este modo, se

pueden combinar las con columnas. La etiqueta dene un marco, que es una regin de una ventana con contenido propio y que se puede navegar de forma independiente. Cada marco tiene su propia atributos ms importantes de esta etiqueta son:

URL que dene el contenido que se va a mostrar. Los URL

del documento que se quiere mostrar en el

SRC="URL".
marco.

Indica la

3.15. Marcos

73

NAME="nombreMarco". Nombre del marco. Este nombre se emplea en la etiqueta <A> ... </A> para mostrar una pgina en un marco concreto. FRAMEBORDER="YES" | "NO". Igual <FRAMESET> ... </FRAMESET>. NORESIZE.
marco. que el atributo de la etiqueta

Si aparece este atributo, no se puede modicar el tamao del

SCROLLING="YES" | "NO" | "AUTO".

Indica si pueden aparecer barras

de desplazamiento cuando no quepa toda la pgina en el marco. Por ltimo, la etiqueta

<NOFRAMES> ... </NOFRAMES> se emplea para mos-

trar contenido en los navegadores que no pueden mostrar marcos. Los navegadores que s que pueden mostrar marcos ignoran todo el contenido de esta etiqueta. Lo interesante de los marcos es que se puede variar el contenido de los mismos de forma independiente. Desde un marco se puede modicar el contenido de otro. Para ello, se tiene que emplear un enlace (<A> buto

TARGET.

... </A>)

con el atri-

Este atributo debe de tomar el nombre del marco que se quiere

modicar (el nombre se habr indicado en la etiqueta

NAME).
En el siguiente ejemplo, la pgina marcos (marcoIzq y

<FRAME>

con el atributo

frame1a.html; en el marco derecho se muestran las pginas frame1b.html y frame1c.html segn se seleccione en los enlaces que contiene marcoIzq. En la
Figura 3.23 vemos el resultado de mostrar estas pginas en un navegador. Pgina

marcoDer).

frame1.html

crea una venta con dos

En el marco izquierdo se muestra la pgina

frame1.html:
Ejemplo 3.30

1 2 3 4 5 6 7 8 9

<HTML> <HEAD> <TITLE>Ejemplo de marcos</TITLE> </HEAD> <FRAMESET COLS="20%,80%" BORDER=10> <FRAME SRC="frame1a.html" NAME="marcoIzq"> <FRAME SRC="frame1b.html" NAME="marcoDer"> <NOFRAMES> Su navegador de Internet no permite mostrar marcos

74

Captulo 3. HTML

10 11 12

</NOFRAMES> </FRAMESET> </HTML>

Pgina

frame1a.html:
Ejemplo 3.31

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<HTML> <HEAD> <TITLE>Ejemplo de marcos</TITLE> </HEAD> <BODY> Esta pgina tiene que aparecer a la izquierda. <BR><BR> Si pincha <A HREF="frame1b.html" TARGET="marcoDer">aqu</A>, a la derecha tiene que aparecer la pgina 1. <BR><BR> Si pincha <A HREF="frame1c.html" TARGET="marcoDer">aqu</A>, a la derecha tiene que aparecer la pgina 2. </BODY> </HTML>

Pgina

frame1b.html:
Ejemplo 3.32

1 2 3 4 5 6 7 8

<HTML> <HEAD> <TITLE>Ejemplo de marcos</TITLE> </HEAD> <BODY> Esta es la pgina <B>1</B>. </BODY> </HTML>

Pgina

frame1c.html:
Ejemplo 3.33

1 2 3

<HTML> <HEAD> <TITLE>Ejemplo de marcos</TITLE>

3.16. Gua de estilo

75

4 5 6 7 8

</HEAD> <BODY> Esta es la pgina <B>2</B>. </BODY> </HTML>

Figura 3.23: Pgina con dos marcos verticales

3.16. Gua de estilo

A continuacin hemos incluido una serie de indicaciones que pueden ayudar a la hora de crear pginas web.

76

Captulo 3. HTML

3.16.1. Organizar el cdigo HTML

Si se crea una pgina web directamente con el cdigo

HTML, es recomen-

dable hacerlo como si se estuviese programando. Es decir, organizar el cdigo para que sea ms fcil su lectura, poner comentarios, etc. Todo ello supone un trabajo extra, pero facilita el mantenimiento de las pginas.

3.16.2. Cuidado con los colores

Hay que llevar mucho cuidado con las combinaciones de colores que se emplean, ya que algunas cuestan mucho de leer. Si tenemos pginas con mucho texto, es conveniente usar una combinacin de colores de alto contraste, que facilite la lectura: un color oscuro sobre un fondo claro (negro o azul sobre blanco o un color crema) o al revs (un color claro para el texto sobre un fondo oscuro).

3.16.3. Cuidado con los tipos de letra

El uso de distintos tipos de letra puede originar bastantes problemas. Se suele recomendar un tipo de letra

Tahoma

Verdana)

sans-serif

(como

Arial, Helvetica,

para la lectura de texto en pantalla.

A menudo, se elige un tipo de letra para un sitio web y aparece en algunas partes de los documentos texto en otro tipo de letra. No causa un buen efecto en el visitante sufrir este problema. Por ltimo, hay que intentar elegir tipos de letra estndar. Si empleamos un tipo poco usual, seguramente la mayora de la gente no lo tendr instalado en sus ordenadores y las pginas no se visualizarn correctamente.

3.16.4. Sacar partido al hipertexto

Las referencias cruzadas permiten abordar un mismo tema en distintos niveles de profundidad. Se puede permitir al usuario pasar de largo informacin tcnica o conceptos avanzados de un tema, estableciendo enlaces a textos ms extensos. En general, podemos disponer de una pgina corta, con una presentacin de la informacin escueta, que lleve a pginas que contengan detalles acerca de los temas tratados.

3.16. Gua de estilo

77

3.16.5. Usar las capacidades multimedia

Como se suele decir, una imagen vale ms que mil palabras. Pero hay que tener cuidado: el uso de muchas imgenes puede confundir al usuario. Adems, hay que tener en cuenta la velocidad de transferencia: las imgenes emplean muchos kilobytes, lo que aumenta el tiempo que tarda en cargarse una pgina. Hay que ponerse como lmite de 20 a 30 Kb de imgenes por pgina. Un truco muy importante: una vez cargada una imagen, el navegador la almacena en la cache; cuando volvamos a emplear esa misma imagen en otra pgina, no necesitar descargarla otra vez. Para que nuestras pginas se carguen ms rpidamente, es aconsejable combinar los mismos elementos grcos (iconos, lneas, imgenes de fondo, etc.) en todas nuestras pginas. Por ltimo, mucho cuidado con las imgenes de fondo: si tienen muchos colores y detalles pueden ocultar otros detalles de la pgina e impedir la lectura correcta del texto.

3.16.6. Identidad corporativa

Hay que intentar conseguir una identidad corporativa en todas las pginas: emplear los mismos tipos de letra, colores, imgenes de fondo, iconos, etc., para dotar a las pginas de un estilo homogneo. De esta forma, el usuario se sentir inmerso en las pginas.

3.16.7. Permitir que los usuarios se comuniquen

En las pginas hay que incluir una direccin de contacto para que los usuarios se puedan comunicar. De este modo, se podrn recibir sugerencias, indicaciones de cmo mejorar las pginas o errores localizados.

3.16.8. Facilitar las bsquedas

Una adecuada clasicacin y exposicin de la informacin que contienen nuestras pginas facilitar la navegacin de los usuarios. En general, la pgina principal (

homepage ) debera presentar en una sola pgina toda la informacin

disponible en nuestro servidor.

78

Captulo 3. HTML

3.16.9. Revisar las pginas peridicamente

No hay nada peor que encontrar enlaces rotos: enlaces que apuntan a pginas que no existen, porque se hayan borrado, movido de sitio o falle la ruta de acceso. Una revisin peridica ahorra al usuario muchos problemas. Adems, es importante indicar la fecha de la ltima modicacin y las novedades aadidas. Esto permite, entre otras cosas, que el usuario se cerciore de la seriedad del autor de las pginas y facilita la navegacin a los usuarios asiduos. Si una pgina aparece con un signo en construccin y su ltima revisin es del ao anterior, el usuario pensar que es mejor buscar lo que quiere en otra parte.

3.16.10. Los enlaces

La eleccin del lugar apropiado para poner los enlaces es crucial para una correcta presentacin del hipertexto. Por ejemplo, comprense los dos siguientes trozos de cdigo que la segunda.

HTML. Es evidente que la primera opcin es mucho mejor

Ejemplo 3.34

1 2

La <A HREF="/concejalias/turismo">Concejala de Turismo</A> se encarga de gestionar el turismo rural y de playa ...

1 2 3

La Concejala de Turismo se encarga de gestionar el turismo rural y de playa ... (<A HREF="/concejalias/turismo">haga click aqu para ver ms informacin acerca de la Concejala de Turismo</A>).

Ejemplo 3.35

En los primeros aos de la web haba que poner

haga click

porque la

gente no estaba acostumbrada a los enlaces, pero eso ya es historia.

Captulo 4

Lenguajes de script
Los lenguajes de script permiten incluir programacin en las pginas web. En este captulo se explican las tres formas que existen de incluir y ejecutar cdigo en una pgina web.

ndice General
4.1. 4.2. 4.3. 4.4. Introduccin . . . . . . . . . . . . . . . . . . . . . . . Diferencias entre VBScript y JavaScript . . . . . . Para qu sirven . . . . . . . . . . . . . . . . . . . . . . Como se usa un lenguaje de script en un navegador 79 80 80 81

4.1. Introduccin
Un lenguaje de

script

(o lenguaje de guiones) es similar a un lenguaje de

macros o a un chero por lotes (

batch ):

una lista de comandos que se pueden

ejecutar sin o con la participacin del usuario. Se trata en denitiva de un lenguaje de programacin, que suele emplearse dentro de un contexto (dentro de una aplicacin) y que no permite programar aplicaciones independientes (no permite crear cheros ejecutables independientes, ya que los lenguajes de

script

normalmente son interpretados).

Existen multitud de lenguajes de

script

que se pueden emplear en pgi-

nas web: JavaScript , VBScript , Perl , Rexx , etc. Sin embargo, algunos slo se 79

80

Captulo 4.

Lenguajes de script

pueden emplear en navegadores muy concretos y poco extendidos. Los lenguajes de

script

ms empleados en Internet son JavaScript y en menor medida

VBScript .

4.2. Diferencias entre VBScript y JavaScript

La diferencia ms obvia entre VBScript y JavaScript (Microsoft lo denomina JScript ) se encuentra en su sintaxis. JavaScript y VBScript nacieron con un mismo n: dotar de un lenguaje de

script

rpido y sencillo a las pginas

web. Cada uno de estos lenguajes posee una serie de caractersticas que no posee el otro, pero ninguna de las diferencias existentes entre ambos permite descartar un lenguaje por el otro.
VBScript es un subconjunto de Visual Basic el lenguaje de programacin

estrella de Microsoft. Como VBScript se dise especcamente para trabajar con navegadores, no incluye caractersticas que se escapan del mbito de los lenguajes de

script, como el acceso a cheros y la impresin.

JavaScript , por otro lado, deriva de la familia de lenguajes formada por C , C++ y Java. Es conveniente aclarar desde un principio que JavaScript y Java son lenguajes totalmente distintos, desarrollados por distintas compaas

(Netscape y Sun Microsystems respectivamente) y que, en principio, slo comparten parte de la sintaxis y del nombre y poco ms. Qu lenguaje elegir? La principal razn para elegir uno u otro reside en la siguiente sencilla pregunta:

lenguaje? Mientras que los dos navegadores ms extendidos, Microsoft Internet

VBScript . Por tanto, si elegimos este lenguaje de

la plataforma que yo uso soporta ese

script,
estaremos limitando

Explorer y Netscape Communicator, admiten JavaScript , slo el primero admite

el acceso a las pginas web que desarrollemos.

4.3. Para qu sirven

HTML son:
Las aplicaciones ms habituales de los lenguajes de

script

en las pginas

Validar datos en el cliente y comprobar la consistencia de los valores antes de mandar un formulario (como, por ejemplo, comprobar que una fecha tiene un valor adecuado y un formato correcto).

4.4. Como se usa un lenguaje de script en un navegador

81

Actualizar campos relacionados en formularios (por ejemplo, establecer las opciones de una lista desplegable en funcin del valor seleccionado en unos botones de radio). Realizar procesamientos que no requieran la utilizacin de informacin centralizada (por ejemplo, convertir pesetas en euros, visualizar el calendario del mes actual, etc.). Servir de base para la utilizacin de otras tecnologas (
ActiveX , etc.).

DHTML, Java,

Los lenguajes de

script

tambin pueden actuar sobre el navegador a travs

de objetos integrados que representan al documento, la ventana activa, cada uno de los controles de un formulario, etc. Para ello se emplea un modelo de objetos denominado Captulo 6. Los lenguajes de

Document Object Model (DOM),

que veremos en el

script

presentan fuertes restricciones de acceso a los re-

cursos de la mquina en la que se ejecutan. Estas restricciones no se deben a limitaciones tecnolgicas, sino a normas impuestas por los diseadores de los lenguajes de

script

para evitar que la ejecucin del cdigo de una pgina web

pueda daar la integridad del sistema del usuario.

4.4. Como se usa un lenguaje de script en un navegador

HTML:
1. Existen tres formas de incluir e invocar

scripts

dentro de una pgina

Usando la etiqueta cluir cdigo de la seccin

script

<SCRIPT> ... </SCRIPT>. Esta etiqueta permite indirectamente en la pgina o que apunte a un chero

externo usando el atributo

HEAD

como en

SRC. Esta etiqueta se puede incluir tanto en BODY. Esta etiqueta posee el atributo LANGUAGE

que permite indicar en que lenguaje (y que versin, si el lenguaje posee varias ) se ha escrito el

script.

Si se omite este atributo, cada navega-

Por ejemplo, para el lenguaje JavaScript podemos usar los identicadores JavaScript , JavaScript1.1 , JavaScript1.2 y JavaScript1.3 .

82

Captulo 4.

Lenguajes de script

dor tiene denido por defecto un lenguaje . El siguiente ejemplo muestra como combinar mltiples lenguajes de

script

en la misma pgina .

1 2 3 4 5 6 7 8 9 10

<HTML> <BODY> <SCRIPT LANGUAGE="VBScript"> document.write "Esto lo ha escrito VBScript<BR>" </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> document.write("Esto lo ha escrito JavaScript<BR>"); </SCRIPT> </BODY> </HTML>

Ejemplo 4.1

Mediante el atributo

SRC

se puede ocultar y proteger el cdigo

script

de

una pgina, aunque no es un sistema seguro, ya que cualquier usuario con unos conocimientos mnimos puede acceder al chero que contiene el cdigo. La ventaja principal de este sistema es que permite compartir el mismo cdigo entre distintas pginas web. De este modo, se pueden crear libreras de cdigo. 2. Usando los atributos de etiquetas

ten una serie de elementos (<FORM>,

HTML

que soportan

<BODY>
cdigo

script

<A>)

<INPUT>, <SELECT>, <TEXTAREA>,

scripts.

Exis-

pertenecientes al lenguaje

HTML

que permiten incluir

en una serie de atributos que representan eventos. Cuando

estos eventos se producen (por ejemplo, al pulsar sobre un botn o al cargar una pgina), el cdigo correspondiente se ejecuta. Estas etiquetas poseen el atributo

LANGUAGE, que al igual que en la etiqueta SCRIPT, perONCLICK.

mite indicar en que lenguaje se ha escrito el cdigo. El siguiente ejemplo muestra como gestionar los eventos de pulsacin sobre botones (<INPUT

TYPE="BUTTON">)
2 3

mediante el atributo

Ejemplo 4.2
Tanto Netscape Communicator como Microsoft Internet Explorer, si no se indica un len-

guaje con la etiqueta

LANGUAGE,

suponen que se trata de

No se recomienda mezclar en una misma pgina distintos lenguajes de script : su mante-

JavaScript.

nimiento es ms difcil y su ejecucin es ms lenta, ya que se tiene que activar un intrprete distinto para cada lenguaje.

4.4. Como se usa un lenguaje de script en un navegador

83

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<HTML> <HEAD> <SCRIPT LANGUAGE="VBScript"> Sub PulsadoVBS alert "Pulsado el botn VBScript" End Sub </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function PulsadoJS() { alert("Pulsado el botn JavaScript"); } </SCRIPT> </HEAD> <BODY> <FORM NAME="Formulario"> <INPUT TYPE="BUTTON" VALUE="VBScript" ONCLICK="PulsadoVBS" LANGUAGE="VBScript"> <BR> <INPUT TYPE="BUTTON" VALUE="JavaScript" ONCLICK="PulsadoJS()" LANGUAGE="JavaScript"> </FORM> </BODY> </HTML>

3.

Incluyendo cdigo de

script

invocar desde el elemento

URL. Esto permite que el script se ejecute cuando el usuario pulsa sobre

<A> ... </A> (anchor,

en una

URL. Los scripts tambin se pueden

ancla) mediante una

un enlace. El siguiente ejemplo muestra una pgina con dos enlaces. Al pulsar sobre uno de ellos se abre una ventana nueva que muestra un mensaje.

1 2 3 4 5 6 7

<HTML> <HEAD> <SCRIPT LANGUAGE="VBScript"> Sub PulsadoVBS alert "Pulsado el enlace VBScript" End Sub </SCRIPT>

Ejemplo 4.3

84

Captulo 4.

Lenguajes de script

8 9 10 11 12 13 14 15 16 17 18 19 20

<SCRIPT LANGUAGE="JavaScript"> function PulsadoJS() { alert("Pulsado el enlace JavaScript"); } </SCRIPT> </HEAD> <BODY> <A HREF="javascript:PulsadoJS()">JavaScript</A> <BR> <A HREF="javascript:PulsadoVBS()">VBScript</A> </BODY> </HTML>

Como podemos observar en la

URL del enlace, con la palabra javascript:

indicamos el lenguaje que estamos empleando, y a continuacin gura el cdigo a ejecutar. Como vemos en el ejemplo, desde JavaScript se puede llamar a funciones escritas en VBScript y viceversa, pero como se ha comentado previamente, no se recomienda mezclar distintos lenguajes de pgina.

script

en una misma

4.4. Como se usa un lenguaje de script en un navegador

85

Figura 4.1: Cdigo JavaScript en un enlace

Captulo 5

JavaScript
En el captulo anterior hemos visto los lenguajes de script en general. En este captulo vamos a estudiar un lenguaje concreto: JavaScript. Este lenguaje es el ms empleado en Internet y se puede considerar el lenguaje estndar. Veremos sus caractersticas bsicas, sus diferentes sentencias, las funciones que incorpora y, por ltimo, como validar formularios.

ndice General
5.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . 88
5.1.1. 5.1.2. 5.1.3. 5.1.4. 5.1.5. 5.1.6. 5.1.7. Aplicaciones . . . . . . . . . . . . . . . . . . Qu necesito para programar en JavaScript JavaScript y Java . . . . . . . . . . . . . . . Versiones . . . . . . . . . . . . . . . . . . . JavaScript y ECMA . . . . . . . . . . . . . JScript . . . . . . . . . . . . . . . . . . . . Diferencias entre JavaScript y JScript . . . Caractersticas bsicas . Comentarios . . . . . . Declaracin de variables mbito de las variables Caracteres especiales . .
87

5.2. El lenguaje . . . . . . . . . . . . . . . . . . . . . . . . 96
5.2.1. 5.2.2. 5.2.3. 5.2.4. 5.2.5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

89 90 90 91 93 95 95

96 98 98 100 102

88

Captulo 5.

JavaScript

5.3. Sentencias . . . . . . . . . . . . . . . . . . . . . . . . . 105

5.2.6. Operadores . . . . . . . . . . . . . . . . . . . . . . . 103 5.2.7. Palabras reservadas . . . . . . . . . . . . . . . . . . 105 5.3.1. Condicionales . . . . . . . . . . . . . . . . . . . . . . 105 5.3.2. De repeticin . . . . . . . . . . . . . . . . . . . . . . 108 5.3.3. De manipulacin de objetos . . . . . . . . . . . . . . 112 5.4.1. Declaracin de funciones . . . . . . . . . . . . . . . . 114 5.4.2. Funciones predenidas . . . . . . . . . . . . . . . . . 116 5.5.1. Creacin de objetos . . . . . . . . . . . . . . . . . . 121 5.5.2. Mtodos de un objeto . . . . . . . . . . . . . . . . . 122 5.5.3. Eliminacin de objetos . . . . . . . . . . . . . . . . . 123

5.4. Funciones . . . . . . . . . . . . . . . . . . . . . . . . . 114 5.5. Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . 120

5.6. Tratamiento de cadenas . . . . . . . . . . . . . . . . . 123 5.7. Operaciones matemticas . . . . . . . . . . . . . . . . 128 5.8. Validacin de formularios . . . . . . . . . . . . . . . . 132

5.8.1. Validacin campo nulo . . . . . . . . . . . . . . . . . 133 5.8.2. Validacin alfabtica . . . . . . . . . . . . . . . . . . 135 5.8.3. Validacin numrica . . . . . . . . . . . . . . . . . . 138

5.1. Introduccin
JavaScript es un lenguaje interpretado, basado en objetos (no es un len-

guaje orientado a objetos puro) y multiplataforma, inventado por Netscape

Communications Corporation. Los navegadores de Netscape fueron los

primeros que usaron JavaScript . El primer nombre ocial de este lenguaje fue
LiveScript y apareci por primera vez en la versin beta de Netscape Navigator

2.0 en septiembre de 1995, pero poco despus fue rebautizado JavaScript en un comunicado conjunto con Sun Microsystems el 4 de diciembre de 1995 . El ncleo de JavaScript (Core JavaScript ) contiene una serie de objetos, como

Array, Date, Math, Number

String,

y un conjunto de elementos del

Netscape and Sun announce Javascript, the open, cross-platform object scripting lan-

home.netscape.com/newsref/pr/newsrelease67.html.

guage for enterprise networks and the Internet , nota de prensa disponible en

http://-

5.1. Introduccin

89

lenguaje como operadores, estructuras de control y sentencias ( %,

break,

++, if, for,

etc.). El ncleo de JavaScript se puede ampliar aadiendo objetos adi-

cionales, como por ejemplo:

JavaScript en el cliente (Client-side JavaScript ) amplia el lenguaje aa-

diendo objetos que permiten controlar un navegador y su

DOM.

JavaScript en el servidor (Server-side JavaScript ) amplia el lenguaje aa-

diendo objetos que son tiles cuando JavaScript se ejecuta en un servidor (lectura de cheros, acceso a bases de datos, etc.).
JavaScript permite crear aplicaciones que se ejecuten a travs de Internet,

basadas en el paradigma cliente/servidor. La parte del cliente se ejecuta en un navegador, como Netscape Communicator o Microsoft Internet Explorer, mientras que la parte del servidor se ejecuta en un servidor, como Netscape Enterprise
Server.

Mediante la caracterstica JavaScript's LiveConnect , se pueden intercomunicar el cdigo JavaScript con Java. Desde JavaScript , se pueden instanciar objetos Java y acceder a sus propiedades y mtodos pblicos. A su vez, desde
Java se puede acceder a los objetos de JavaScript , a sus propiedades y a sus

mtodos.

5.1.1. Aplicaciones
Una de las aplicaciones principales de JavaScript consiste en validar la entrada introducida por el usuario a travs de un formulario, que luego recibirn aplicaciones que se ejecutan en el servidor (hechas en cualquier otra tecnologa). La utilidad de esto reside en: Reduce la carga en el servidor. Los datos incorrectos se ltran en el cliente y no se envan al servidor. Reduce los retrasos producidos por errores cometidos por el usuario. De otro modo la validacin se tendra que realizar en el servidor, y los datos deberan viajar del cliente al servidor, ser procesados y entonces devueltos al cliente para que los corrigiese. Simplica los programas que se ejecutan en el servidor al dividir el trabajo entre el cliente y el servidor.

ASP, CGI, JSP

90

Captulo 5.

JavaScript

Normalmente, la validacin de los datos se puede realizar como mnimo en tres ocasiones: Cuando el usuario introduce los datos, con un manejador del evento

onChange
evento

en cada control que se quiere validar del formulario.

Cuando el usuario enva (

onClick

submit ) submit )

el formulario, con un manejador del

en el botn que enva el formulario. el formulario, con un manejador del

Cuando el usuario enva ( evento

onSubmit

en el formulario.

Otra de las aplicaciones de JavaScript consiste en proporcionar dinamismo a las pginas efectos sorprendentes.

HTML. Si se emplea junto con DHTML se pueden conseguir

5.1.2. Qu necesito para programar en JavaScript

Para poder programar en JavaScript no hace falta ningn equipo especial ni comprar un entorno de desarrollo. Slo es necesario un editor de textos como Bloc de notas de Microsoft Windows o joe de Linux y un navegador como
Netscape Communicator o Microsoft Internet Explorer que soporte JavaScript

para poder comprobar el cdigo. No es necesario disponer de una conexin a Internet, ya que se puede comprobar localmente el cdigo creado. Lo que s es recomendable es utilizar un buen editor de textos, que sea cmodo, congurable, soporte macros, etc. y que sea

syntax highlight. Esta ltima

caracterstica signica que el editor es capaz de comprender el lenguaje en el que se programa, y colorea las palabras diferencindolas segn sean variables, palabras reservadas, comentarios, etc.

5.1.3. JavaScript y Java

JavaScript y Java se confunden a veces entre s. Son dos lenguajes similares

en algunos aspectos, pero diferentes entre s. JavaScript no tiene la estricta comprobacin de tipos que posee Java, pero ambos si que comparten la sintaxis de las expresiones, de los operadores y de las estructuras de control.
JavaScript es un lenguaje interpretado, mientras que Java posee una fase de

compilacin (aunque no se genera cdigo mquina, sino los llamados

bytecodes

5.1. Introduccin

91

que luego son interpretados por la

mquina virtual Java ). JavaScript

tiene un

pequeo nmero de tipos de datos: nmeros (enteros y en coma otante), booleanos y cadenas. JavaScript posee un modelo de objetos basado en prototipos mientras que el de Java se basa en clases.
JavaScript es un lenguaje con mucha libertad si se compara con Java. No es

necesario declarar las variables, clases y mtodos. No hay que preocuparse con mtodos pblicos, privados o protegidos, y no hay que implementar interfaces. En el Cuadro 5.1 se resumen las diferencias existentes entre JavaScript y Java.

JavaScript
Interpretado (no compilado) por el cliente.

Java
Compilado a

bytecodes

que se des-

cargan desde el servidor y se ejecutan en el cliente.

Basado en objetos. No distingue entre tipos de objetos. La herencia se realiza a travs del mecanismo de prototipado, y las propiedades y los mtodos se pueden aadir a cualquier objeto de forma dinmica. Cdigo integrado y embebido con el cdigo

Basado en clases. Distincin entre clases e instancias, la herencia se realiza a travs de la jerarqua de clases. No se pueden aadir a las clases ni a las instancias propiedades o mtodos de forma dinmica. Los

HTML.

HTML (aunque vs de HTML).

applets

se distinguen del cdigo se acceden a tra-

El tipo de dato de las variables no se declara (tipos dinmicos).

El tipo de dato de las variables se tiene que declarar (tipos estticos).

Cuadro 5.1: JavaScript frente a Java

5.1.4. Versiones
Cada versin de los navegadores soporta una versin diferente de JavaScript . Cada nueva versin de JavaScript aade nuevas caractersticas al lengua-

je (y corrige fallos de las anteriores). El Cuadro 5.2 muestra las distintas versiones de JavaScript soportadas por las diferentes versiones de Netscape Navigator. Las versiones anteriores a la 2.0 no soportaban JavaScript . Actualmente

se encuentra en desarrollo JavaScript 2.0 .

92

Captulo 5.

JavaScript

Versin de JavaScript
JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.3 JavaScript 1.4

Versin de Navigator
Navigator 2.0 Navigator 3.0 Navigator 4.0 - 4.05 Navigator 4.06 - 4.78 Ningn navegador (slo en los productos de servidor de Netscape)

JavaScript 1.5

Navigator 6.0 y Mozilla

Cuadro 5.2: Relacin entre las versiones de JavaScript y de Netscape Navigator

Si queremos detectar que versin de JavaScript admite nuestro navegador podemos emplear el siguiente cdigo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<HTML> <HEAD> <TITLE>Ejemplo version JavaScript</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> <!-var version = "JavaScript" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.1"> <!-version = "JavaScript 1.1" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2"> <!-version = "JavaScript 1.2" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.3"> <!-version = "JavaScript 1.3" // -->

Ejemplo 5.1

5.1. Introduccin

93

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

</SCRIPT> <SCRIPT LANGUAGE="JavaScript1.4"> <!-version = "JavaScript 1.4" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.5"> <!-version = "JavaScript 1.5" // --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-document.write("Soporta " + version); // --> </SCRIPT> </BODY> </HTML>
Este cdigo funciona de la siguiente forma: mediante el atributo

de la etiqueta

<SCRIPT> ... </SCRIPT> se indica la versin de JavaScript que version almacenar la ltima versin

LANGUAGE

se emplea. Como las versiones aparecen de menor a mayor, cuando se llegue a una versin que no se admita, la variable admitida, que ser la mayor de todas las que se admiten. En el ejemplo anterior se puede ver que las instrucciones de JavaScript aparecen entre comentarios de impide que el cdigo de entienden la etiqueta

<SCRIPT> ... </SCRIPT>.

script

HTML (<!-- Comentario -->). Este sistema

se visualice en aquellos navegadores que no En el resto de ejemplos de

este libro no se incluye, pero es una buena prctica hacerlo siempre.

5.1.5. JavaScript y ECMA

Aunque Netscape invent JavaScript y sus navegadores fueron los prime-

puter Manufacturers Association (ECMA)

gramacin estndar basado en JavaScript .

ros que lo soportaron, Netscape trabaja estrechamente con

European Com-

para obtener un lenguaje de pro-

La versin estandarizada de JavaScript , llamada ECMAScript se debe de comportar de forma idntica en todas las aplicaciones que soportan el estndar. La primera versin de ECMAScript se detalla en la especicacin

ECMA-262

94

Captulo 5.

JavaScript

Edition 1. Este estndar tambin ha sido aprobado por International Organization for Standards (ISO) bajo la denominacin ISO-16262.

Versin de JavaScript
JavaScript 1.1 JavaScript 1.2

Versin de ECMA
ECMA-262 Edition 1 se basa en JavaScript 1.1 ECMA-262 Edition 1 no se haba completado cuando apareci JavaScript 1.2 (la compatibilidad entre ambos no es total).

JavaScript 1.3

JavaScript

1.3

es

completamente

compatible con ECMA-262 Edition 1, pero posee caractersticas adicionales que no forman parte de ECMA-262 Edition 1. JavaScript 1.4 JavaScript 1.4 es completamente

compatible con ECMA-262 Edition 1, pero con caractersticas adicionales. Cuando apareci, an no se haba completado ECMA-262 Edition 3. JavaScript 1.5 JavaScript 3. 1.5 es completamente

compatible con ECMA-262 Edition

Cuadro 5.3: Relacin entre las versiones de JavaScript y de ECMA

JavaScript siempre incluir caractersticas que no formen parte de la espe-

cicacin de

compatible con

ECMA. Pero estas caractersticas no impiden que JavaScript sea ECMA.

5.1.6. JScript
JScript es otro lenguaje de

(dentro de pginas

HTML) como en el servidor (en pginas ASP). JScript es

script

que puede emplearse tanto en el cliente

la implementacin realizada por Microsoft del lenguaje de script estndar

ECMA-262.

5.1. Introduccin

95

de

script

Un aspecto importante a tener en cuenta es que la versin del lenguaje es independiente de la versin del navegador. Por ejemplo, se puede

instalar el motor de JScript v5 en Microsoft Internet Explorer 3 y usar todas las caractersticas del lenguaje (por seguridad, no se puede hacer lo contrario, instalar JScript v1 en Microsoft Internet Explorer 5).

Versin de JScript
JScript v1 JScript v2 JScript v3 JScript v4 JScript v5

Productos de Microsoft
Internet Explorer 3 Internet Information Server 3.0 Internet Explorer 4 Visual Interdev 6.0 Windows 2000, Oce 2000 e Internet Explorer 5

Cuadro 5.4: Relacin entre las versiones de JScript y los productos de Microsoft

5.1.7. Diferencias entre JavaScript y JScript

En las primeras versiones, JavaScript y JScript posean muchas diferencias entre ellos. Sin embargo, en las ltimas versiones las diferencias prcticamente han desaparecido, ya que ambos aseguran que cumplen el estndar

ECMA-262.

Pero an quedan pequeas diferencias que pueden hacer perder el tiempo al programador. Por ejemplo, el siguiente cdigo produce distintos resultados al ejecutarse en Netscape Communicator o Microsoft Internet Explorer. La diferencia se encuentra en que el primero convierte automticamente a entero el valor de la variable lo hace.

a, que almacena una cadena, mientras que el segundo navegador no

Ejemplo 5.2

1 2 3 4 5 6 7 8

<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> a = "1"; switch(a) { case 0:

96

Captulo 5.

JavaScript

9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

document.write("0"); break; case 1: document.write("1"); break; case 2: document.write("2"); break; default: document.write("Ninguno"); break;

} </SCRIPT> </BODY> </HTML>

La salida que produce Netscape Communicator 4.7 es:

1.

La salida que produce Microsoft Internet Explorer 5.0 es:

Ninguno.

5.2. El lenguaje
5.2.1. Caractersticas bsicas
va . Si se conoce alguno de estos lenguajes, aprender JavaScript resulta muy

La sintaxis de JavaScript es prcticamente idntica a la de C , C++ y Ja-

sencillo y requiere poco esfuerzo. Los comentarios, las funciones, las sentencias de control, etc., poseen la misma sintaxis que en C . JavaScript es un lenguaje basado en objetos, pero no orientado a objetos como Java y C++. El objetivo de JavaScript es conseguir cdigo sencillo y reducido, no crear programas grandes y complejos.
JavaScript es un lenguaje

case sensitive (sensible a minsculas/maysculas).

Esto quiere decir que todas las palabras que usemos para referirnos a los distintos identicadores del lenguaje tendrn que ser escritas correctamente pa-

C++ y Java.

A partir de ahora, cuando hagamos referencia a

C , se entiende que tambin se incluyen

5.2. El lenguaje

97

ra que sean comprendidas por el intrprete de JavaScript . Por ejemplo, en el siguiente cdigo se declaran tres variables que son distintas:

var nombre, Nombre, NOMBRE;

Ejemplo 5.3

En JavaScript no es necesario acabar las sentencias con un punto y coma (s que es obligatorio en C ), excepto para separar cdigo que se encuentra en la misma lnea. Pero es una buena recomendacin acabar siempre las sentencias con punto y coma. Por ejemplo, las tres lneas siguientes de cdigo son correctas:

1 2 3

var nombre; var apellido1 var apellido2 var ciudad;

Ejemplo 5.4

computer language ).

Al igual que en C , el cdigo se estructura por bloques (

block-structured

Un bloque de cdigo se indica delimitando las senten-

cias que lo componen mediante las llaves ({ y sentencias forman un bloque de cdigo:

}).

Por ejemplo, las siguientes

1 2 3 4 5

Ejemplo 5.5
document.write("Una sentencia "); document.write("en un "); document.write("bloque de cdigo");

Los espacios en blanco, tabuladores y saltos de lnea no poseen valor en

JavaScript , por lo que el cdigo anterior se podra escribir de otra forma, tal

como se ve en el siguiente ejemplo, y sera totalmente equivalente. El aspecto visual del cdigo depende del estilo que cada uno quiera emplear.

1 2 3

Ejemplo 5.6
document.write("Una sentencia "); document.write("en un "); document.write("bloque de cdigo");}

98

Captulo 5.

JavaScript

5.2.2. Comentarios
Los comentarios son totalmente transparentes al cdigo, y no afectan al mismo ni en el modo de ejecutarse ni en la velocidad de ejecucin. Los comentarios se implementan de dos maneras diferentes. La primera es utilizando dos barras inclinadas (//). Desde que el intrprete de JavaScript encuentra las dos barras hasta que llega al nal de la lnea, todo el texto que haya entremedias ser ignorado. La segunda manera de comentar fragmentos de cdigo es usando los smbolos barra inclinada y asterisco (/*) y viceversa (*/). Estos smbolos denen zonas de comentario que pueden extenderse a travs de varias lneas.

1 2 3 4 5 6 7

// Esta linea esta comentada var a; // El comentario no afecta al codigo /* Todo este codigo esta comentado var b = 0; alert("Hola a todos"); */

Ejemplo 5.7

5.2.3. Declaracin de variables

Para denir variables en JavaScript usaremos la palabra reservada emplean, pero es una buena costumbre. No todas las palabras sirven para denir variables. Existen tres normas que hay que cumplir:

var.

Al

contrario que en otros lenguajes, no es necesario declarar las variables que se

Un nombre de variable vlido se compone nicamente de una palabra (sin espacios), pudiendo estar formada por letras, nmeros o el guin de subrayado (_). La primera letra del nombre de la variable deber ser siempre una letra o el carcter de guin de subrayado. No podr ser un nmero. El nombre de la variable no debe coincidir con ninguna de las palabras reservadas.

5.2. El lenguaje

99

Al declarar una variable es posible asignarle un valor inicial. Si no se le asigna un valor inicial, posee un valor nulo representado por la palabra clave

null.

El empleo de variables sin valor puede producir errores.

1 2 3 4 5 6 7 8 9

// Declaraciones correctas var _nombre, _apellido1, _apellido2; var Provincia = "Alicante"; var ciudad1, ciudad2; var codigo_postal = "03001"; // Declaraciones incorrectas var 12edad; var var;

Ejemplo 5.8

JavaScript es un lenguaje sin tipos, es decir, no necesita una declaracin

del tipo de las variables para trabajar con ellas, porque l mismo se encarga de reconocer que es lo que se quiere almacenar. Los distintos tipos de datos que puede almacenar una variable en JavaScript son:

Cadenas.

Las cadenas de texto se delimitan por comillas dobles (") o

comillas simples (') y pueden contener cualquier tipo de combinacin de nmeros, letras, espacios y smbolos. El uso de los dos tipos de comillas tiene su sentido, ya que debido a que JavaScript se usa conjuntamente con el lenguaje

HTML,

y como ste usa las comillas dobles en su sin-

taxis, tiene que haber algn mtodo de distinguir las cadenas de JavaScript de las cadenas de

provincia = "Alicante";.

HTML. Por ejemplo: var ciudad = "Elche",

Nmeros enteros. Un nmero entero se representa como cualquier sucesin de dgitos (0 a 9), precedidos por el signo menos (-) si es un nmero negativo. Por ejemplo:

var a = 1, b = 100000, c = -123456789;.

Se representan de igual forma que los

Nmeros en coma otante.

cimal del nmero. Por ejemplo:

nmeros enteros, pero aaden una parte decimal que se representa con un punto (.) seguido de tantas cifras como compongan la parte de-

10000000000000.1;.

var a = 9.12, b = -3.141592, c =

100

Captulo 5. JavaScript

(false) y se suele utilizar en sentencias condicionales. Por ejemplo:

Booleanos. Representa nicamente dos valores, verdadero (true) o falso

var

rojo = true, verde = false;.

Nulo.

Se utiliza nicamente para comprobar si una variable que se ha

denido tiene un valor asignado o no. Por ejemplo:

1 2 3 4 5

var nombre; if(nombre == null) { alert("Introduzca su nombre, por favor"); }

Ejemplo 5.9

5.2.4. mbito de las variables

Ya se ha comentado antes que no es necesario declarar las variables antes de usarlas. Sin embargo, el hecho de declarar una variable s que inuye en el mbito de existencia (dnde existe y cunto tiempo existe una variable). Siempre que se declare una variable local a un mbito (a una funcin, por ejemplo), dominar sobre cualquier otra variable que se hubiese declarado fuera de ese mbito. Adems, una variable declarada en una funcin no puede ser accedida desde otra funcin.

a, b var, el solo hecho de asignarle un valor ya supone declararla. En la funcin fun(), se declara una variable c local ("Maria"), por lo que no se puede acceder a la variable c global ("Ana"). Desde esta funcin se llama a la funcin fun2(); desde esta funcin s que se puede acceder a la variable global c.
Por ejemplo, en el siguiente cdigo se declaran tres variables globales Aunque la variable y

c.

no haya sido declarada con

1 2 3 4 5 6 7 8

<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> var a = "Juan"; b = "Jose"; var c = "Ana"; function fun2()

Ejemplo 5.10

5.2. El lenguaje

101

9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

{ }

document.write("fun2-c- " + c + "<BR>");

function fun() { var c = "Maria"; document.write("fun1-a- " + a + "<BR>"); document.write("fun1-b- " + b + "<BR>"); fun2(); document.write("fun1-c- " + c + "<BR>");

fun(); document.write("-c-" + c + "<BR>"); </SCRIPT> </BODY> </HTML>

El cdigo anterior produce la siguiente salida en un navegador:

1 2 3 4 5

fun1-afun1-bfun2-cfun1-c-c- Ana

Juan Jose Ana Maria

Ejemplo 5.11

5.2.5. Caracteres especiales

Adems de los caracteres normales, en una cadena tambin se pueden incluir caracteres especiales que permiten generar saltos de lneas o caracteres a partir de su cdigo que se pueden emplear dentro de una cadena. Por ejemplo, el siguiente cdigo produce el resultado que se muestra en la Figura 5.1.

ASCII. El Cuadro 5.5 muestra los caracteres especiales

Ejemplo 5.12

102

Captulo 5. JavaScript

Carcter
\b \f \n \r \t \' \" \\ \XXX \xXX \uXXXX

Signicado
Retroceso (

backspace ) Salto de pgina (form feed ) Salto de lnea (new line ) Retorno de carro (carriage return )
Tabulador Apstrofe o comilla simple Comilla doble

Barra invertida (

backslash )

El carcter de la codicacin Latin1 especicado por los tres dgitos octales entre 0 y 377. El carcter de la codicacin Latin1 especicado por los dos dgitos hexadecimales entre 00 y FF. El carcter Unicode especicado

por los cuatro dgitos hexadecimales entre 0000 y FFFF.

Cuadro 5.5: Caracteres especiales

5.2. El lenguaje

103

1 2 3 4 5 6 7 8 9

<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.write("\\251 produce: \251<BR>"); document.write("\\xAA produce: \xAA<BR>"); document.write("\\u00FA produce: \u00FA<BR>"); </SCRIPT> </BODY> </HTML>

Figura 5.1: Ejemplo de caracteres especiales

5.2.6. Operadores
Los operadores son los signos que se usan para referirse a distintas operaciones que se pueden realizar con las variables y con las constantes, tales como suma, resta, incremento, etc. La precedencia de los operadores determina el orden en que se aplican cuando se evala una expresin. Se puede anular la precedencia usando parntesis.

104

Captulo 5. JavaScript

El Cuadro 5.6 muestra la precedencia de los operadores, de menos a ms. Los operadores que se encuentran en un mismo nivel poseen la misma precedencia.

Tipo de operador
Coma Asignacin

Operadores

Condicional O lgico (OR) Y lgico (AND) O bit a bit (OR) O exclusiva bit a bit (XOR) Y bit a bit (AND) Igualdad Relacional Desplazamiento bit a bit Suma y resta Multiplicacin y divisin Negacin e incremento Llamada a funcin Creacin de instancias Miembro

, = += -= *= /= %= <<= >>= >>>= &= ^= |= ?: || && | ^ & == != === !== < <= > >= << >> >>> + * / % ! ~ - + ++ -- typeof void delete () new . []

Cuadro 5.6: Precedencia de los operadores de JavaScript

5.2.7. Palabras reservadas

Las palabras reservadas ( das son palabras clave (

reserved words ) no se pueden usar como nombres

de JavaScript , mientras que otras se han

de variables, funciones, mtodos u objetos. Algunas de las palabras reserva-

keywords )

reservado para futuros usos. En el Cuadro 5.7 se muestran las palabras reservadas de JavaScript 1.3.

5.3. Sentencias

105

abstract case const delete enum nal function import interface null public super throw try volatile

boolean catch continue do export nally goto in long package return switch throws typeof while

break char debugger double extends oat if instanceof native private short synchronized transient var with

byte class default else false for implements int new protected static this true void

Cuadro 5.7: Palabras reservadas de JavaScript

5.3. Sentencias
Vamos a detallar las sentencias que incluye el lenguaje JavaScript . Todas estas sentencias son anidables: se pueden incluir unas dentro de otras tantas veces como se quiera.

5.3.1. Condicionales
Una sentencia condicional es un conjunto de comandos que se ejecutan si una condicin es cierta (true). JavaScript proporciona dos sentencias condicionales:

if ... else

switch.

if . . . else
La sentencia de seleccin simple posee la siguiente sintaxis (la parte entre corchetes es opcional):

1 2

if(condicion) {

Ejemplo 5.13

106

Captulo 5. JavaScript

3 4 5 6 7 8

sen1 } [else { sen2 }]

El conjunto de sentencias

contrario se ejecuta

sen2.

sen1

se ejecuta si

condicion

es cierta; en caso

Como ejemplo tenemos el siguiente cdigo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var a;

Ejemplo 5.14

a = prompt("Escriba un nmero, por favor", ""); if(a <= 1) { alert("Es menor o igual que 1"); } else if(a <= 5) { alert("Es mayor que 1, pero menor o igual que 5"); } else { alert("Es mayor que 1"); } </SCRIPT> <TITLE>Ejemplo if</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>

switch
La sentencia de seleccin mltiple posee la siguiente sintaxis:

5.3. Sentencias

107

1 2 3 4 5 6 7 8 9 10 11 12

switch(expresion) { case et1 : sen1; [break;] case et2 : sen2; [break;] ... [default : sen;] }
La sentencia

Ejemplo 5.15

switch evala una expresin e intenta encontrar una etiqueta default

(valor) que case con el resultado de la evaluacin. Si se logra casar, se ejecutan las sentencias asociadas con esa etiqueta. Si no se logra ningn emparejamiento, se busca la etiqueta opcional La sentencia salga del y se ejecutan sus sentencias asociadas.

y contina la ejecucin por la lnea siguiente a la sentencia incluye un que

switch. Si no se break, el ujo de ejecucin pasar de una opcin case a otra hasta encuentre un break o nalice la sentencia switch.
Ejemplo 5.16

switch

break

opcional en cada etiqueta asegura que el programa

una vez que se han ejecutado las sentencias correspondientes

Como ejemplo tenemos el siguiente cdigo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var a;

a = prompt("Cuntos hijos tiene?", ""); switch(a) { case 0: alert("Anmese un da de estos"); break; case 1: alert("Puede tener ms"); break; case 2: alert("Ya tiene la parejita, ahora a por el tro"); break;

108

Captulo 5. JavaScript

15 16 17 18 19 20 21 22 23

} </SCRIPT> <TITLE>Ejemplo switch</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> </BODY> </HTML>

default: alert("Una familia como las de antes: muchos hijos"); break;

5.3.2. De repeticin
Un bucle es un conjunto de comandos que se ejecutan repetidamente hasta que una condicin especicada deja de cumplirse. JavaScript ofrece tres tipos de sentencias de repeticin:

for, do ... while

while.

for
La sintaxis de la repeticin con contador es la siguiente:

1 2 3 4

for ([expInicial]; [condicion]; [expIncremento]) { sentencias }

Cuando un bucle 1.

Ejemplo 5.17

for

se ejecuta, ocurre lo siguiente:

Si existe la expresin de inicializacin

expInicial,

se ejecuta. La expre-

sin inicial suele inicializar uno o ms contadores, pero se pueden emplear expresiones de cualquier grado de complejidad. 2. 3. Se evala la expresin Si el valor de

condicion.
se

ejecutan. Si el valor de 4.

condicion es cierto (true), las sentencias del bucle condicion es falso (false), el bucle termina. expIncremento

La expresin de actualizacin ejecucin vuelve al paso 2.

se ejecuta y el ujo de

5.3. Sentencias

109

Como ejemplo tenemos el siguiente cdigo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<HTML> <HEAD> <TITLE>Ejemplo for</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> var a;

Ejemplo 5.18

for(a = 0; a <= 10; a++) { document.write("Vamos por el nmero " + a + "<BR>\n"); } </SCRIPT> </BODY> </HTML>

do . . . while
La sentencia de repeticin con condicin nal posee la siguiente sintaxis:

1 2 3 4

do {

Ejemplo 5.19

sentencias } while(condicion)

Las sentencias se ejecutan siempre al menos una vez antes de que condicion se evale. Si se evala a cierto, se repite el proceso: las sentencias se ejecutan una vez ms y condicion se vuelve a evaluar. Como ejemplo tenemos el siguiente cdigo:

1 2 3 4

<HTML> <HEAD> <TITLE>Ejemplo do while</TITLE> </HEAD>

Ejemplo 5.20

110

Captulo 5. JavaScript

5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> var a, b; a = 1; do { b = a; do { document.write(" "); b--; } while(b > 0); document.write(a + "<BR>\n"); a++; } while(a < 10); </SCRIPT> </PRE> </BODY> </HTML>

while
La sintaxis de la sentencia de repeticin con condicin inicial es la siguiente:

1 2 3 4

while(condicion) { sentencias }

Ejemplo 5.21

condicion es falsa, las sentencias del bucle dejan de ejecutarse y el concondicion ocurre antes de que se ejecuten sentencias. Por tanto, puede ocurrir que las sentencias no se ejecuten nunca.
Si trol pasa a la siguiente sentencia despus del bucle. La evaluacin de Como ejemplo tenemos el siguiente cdigo:

5.3. Sentencias

111

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<HTML> <HEAD> <TITLE>Ejemplo while</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> var a, b;

Ejemplo 5.22

a = 1; while(a <= 10) { document.write("Tabla del " + a + "\n"); document.write("------------\n"); b = 1; while(b <= 10) { document.write(a + " x " + b + " = " + (a * b) + "\n"); b++; } document.write("\n"); a++; } </SCRIPT> </PRE> </BODY> </HTML>

break
La sintaxis de esta sentencia es:

1 2 3

break o break etiqueta

La sentencia

Ejemplo 5.23

o una sentencia

break se usa para nalizar un bucle (for, do..while, while) de seleccin mltiple (switch).

112

Captulo 5. JavaScript

continue
La sintaxis de esta sentencia es:

1 2 3

continue o continue etiqueta

Ejemplo 5.24

continue se usa para pasar a la siguiente iteracin en un bucle (for, do ... while, while).
La sentencia

5.3.3. De manipulacin de objetos

Existen dos sentencias de manipulacin de objetos:

with.

for(... in ...)

for(. . . in . . . )
La sintaxis de esta sentencia es:

1 2 3 4

for(variable in objeto) { sentencias }

Ejemplo 5.25

Esta sentencia permite que una un

objeto.

Para cada propiedad del objeto, se ejecutan las

acceder a las propiedades de un

variable recorra todas las propiedades de sentencias. Para objeto se emplea el operador punto (.).
Ejemplo 5.26

Como ejemplo tenemos el siguiente cdigo:

1 2 3 4 5 6

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function Propiedades(obj, obj_nombre) { var resultado = "";

5.3. Sentencias

113

7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

for (var i in obj) { resultado += obj_nombre + "." + i + " = " + obj[i] + "<BR>" } return resultado; } </SCRIPT> <TITLE>Ejemplo for_in</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> document.write(Propiedades(window, "window")); </SCRIPT> </PRE> </BODY> </HTML>

with
La sintaxis de esta sentencia es:

1 2 3 4

with(objeto) { sentencias }

Ejemplo 5.27

La sentencia un conjunto de vez.

with establece el objeto por defecto sobre el que se sentencias que pueden acceder a las propiedades o

ejecutan mtodos

del objeto. De este modo, se evita tener que escribir el nombre del objeto cada Como ejemplo tenemos el siguiente cdigo:

1 2

<HTML> <HEAD>

Ejemplo 5.28

114

Captulo 5. JavaScript

3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<TITLE>Ejemplo with</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> with(Math) { document.write("E: " + E + "\n"); document.write("LN10: " + LN10 + "\n"); document.write("LN2: " + LN2 + "\n"); document.write("LOG10E: " + LOG10E + "\n"); document.write("LOG2E: " + LOG2E + "\n"); document.write("Pi: " + PI + "\n"); document.write("SQRT1_2: " + SQRT1_2 + "\n"); document.write("SQRT2: " + SQRT2 + "\n"); } </SCRIPT> </PRE> </BODY> </HTML>

5.4. Funciones
Una funcin es un fragmento de cdigo al que suministramos unos datos determinados (parmetros o argumentos), ejecuta un conjunto de sentencias y puede devolver un resultado.

5.4.1. Declaracin de funciones

La denicin de una funcin se compone de las siguientes partes: La palabra clave

function.

El nombre de la funcin. Una lista de argumentos, encerrados entre parntesis y separados por comas. Una funcin puede tener cero o ms argumentos. Las sentencias que denen la funcin, encerradas entre llaves. Las sentencias dentro de una funcin pueden llamar a su vez a otras funciones o a la misma funcin (recursividad).

5.4. Funciones

115

Por tanto, la sintaxis de una funcin es:

1 2 3 4

function nombre([arg1 [, arg2 [, ...]]]) { sentencias }

Ejemplo 5.29

En general, todas las funciones se deberan de denir en la seccin <HEAD> ... </HEAD> de la pgina. As, cuando el usuario carga la pgina, las funciones es lo primero que se carga. De otro modo, el usuario podra realizar alguna accin (por ejemplo, lanzar un evento) que llamase a una funcin que no ha sido denida an, lo que producira un error. Por ejemplo, el siguiente cdigo dene dos funciones llamadas

cubo

cuadrado

que calculan el cuadrado y el cubo del nmero que reciben como argu-

mento respectivamente:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<HTML> <HEAD> <TITLE>Ejemplo function</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <PRE> <SCRIPT LANGUAGE="JavaScript"> var a; function cuadrado(numero) { return numero * numero; }

Ejemplo 5.30

function cubo(numero) { return numero * numero * numero; } a = prompt("Escribe un nmero entero:", ""); alert("El cuadrado de " + a + " es " + cuadrado(a)); a = prompt("Escribe un nmero entero:", "");

116

Captulo 5. JavaScript

23 24 25 26 27

alert("El cubo de " + a + " es " + cubo(a)); </SCRIPT> </PRE> </BODY> </HTML>

La instruccin

return

se emplea para nalizar la ejecucin de una funcin

y tambin para devolver un valor.

5.4.2. Funciones predenidas

JavaScript posee un conjunto de funciones predenidas:

isNaN, parseInt, parseFloat, Number, String, escape

eval, isFinite, unescape.

eval
Evala una expresin que contiene cdigo de JavaScript . La sintaxis es

eval(expr),

donde

expr

es la expresin que va a ser evaluada.

Si la cadena representa una expresin, se evala; si representa una o ms sentencias, se ejecutan. No hace falta llama a

eval

para evaluar expresiones

aritmticas, ya que JavaScript evala las expresiones aritmticas automticamente. El siguiente ejemplo muestra el funcionamiento de esta funcin:

1 2 3 4 5 6 7 8 9 10 11 12 13

<HTML> <HEAD> <TITLE>Ejemplo eval</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> var a = 1, b = 2, c = 3, d = 4, e = 5, v; v = prompt("Escriba una letra de la 'a' a la 'e'", ""); alert("El valor de '" + v + "' es " + eval(v)); </SCRIPT> </BODY> </HTML>

Ejemplo 5.31

5.4. Funciones

117

isFinite
Determina si el argumento representa un nmero nito. La sintaxis es

isFinite(num)
caso contrario

Si el argumento es

num es el numero que se quiere evaluar. "NaN" (not a number, no un nmero), devuelve false, en devuelve true. Por ejemplo, el siguiente cdigo permite ltrar
donde

la entrada del usuario y averiguar si ha introducido un nmero correcto o cualquier otra cosa:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<HTML> <HEAD> <TITLE>Ejemplo isFinite</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> v = prompt("Escriba un nmero", ""); if(isFinite(v)) alert("Correcto, es un nmero"); else alert("Te has equivocado"); </SCRIPT> </BODY> </HTML>

Ejemplo 5.32

isNaN
"NaN" (not a number, no un nmero). La isNaN(num) donde num es el numero que se quiere evaluar. Las funciones parseFloat y parseInt devuelven "NaN" cuando evaluan un valor que no es un nmero. La funcin isNaN devuelve true si el argumento es "NaN" y false en caso contrario.
Determina si el argumento es sintaxis es

parseInt y parseFloat
Las dos funciones de conversin numrico a partir de una cadena. La sintaxis de

parseInt y parseFloat devuelven un valor

donde

parseFloat

es

parseFloat(cad),

cad

es la cadena

que se quiere convertir a un nmero en coma otante. Si encuentra un carcter

118

Captulo 5. JavaScript

distinto de un signo (+ o -), un dgito (0-9), un punto decimal o un exponente, devuelve el valor hallado hasta ese punto e ignora ese carcter y el resto. Si el primer carcter no puede convertirse a un nmero, devuelve

number, no un nmero).
La sintaxis de

"NaN" (not a cad

es la

parseInt

es

parseInt(cad [, base]),

donde

cadena que se quiere convertir a la base indicada en el segundo argumento opcional. Por ejemplo, 10 indica que se convierta a decimal, 8 a octal, 16 a hexadecimal. Para bases mayores que diez, las letras del alfabeto indican numerales mayores que nueve. Por ejemplo, para los nmeros hexadecimales (base 16), las letras de la A a la F se usan. Si encuentra un carcter que no es un numeral vlido en la base especicada, ese carcter y todos los caracteres que le siguen se ignoran y devuelve el valor convertido hasta ese punto. Si el primer carcter no puede convertirse a un nmero en la base especicada, devuelve

"NaN" (not a number,

no un nmero).

Number y String
Las funciones

Number
donde

String

convierten un objeto a un nmero o a una

cadena, respectivamente. La sintaxis de estas funciones es

String(objRef),

objRef

Number(objRef)

es una referencia a un objeto. Por ejemplo, el

siguiente cdigo convierte un objeto

Date

a un nmero y a una cadena:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<HTML> <HEAD> <TITLE>Ejemplo Number-String</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"> // Obtiene la fecha actual var d = new Date();

Ejemplo 5.33

// Milisegundos transcurridos desde el 1 de enero de 1970 alert("Milisegundos transcurridos: " + Number(d)); // Formato mas adecuado alert("Fecha: " + String(d)); </SCRIPT> </BODY> </HTML>

5.4. Funciones

119

escape y unescape
Las funciones codicado en

escape

unescape

permiten codicar y decodicar cade-

nas. La funcin escape devuelve la codicacin hexadecimal de su argumento

ISO

Latin-1. La funcin

unescape
y

devuelve la cadena corresPor ejemplo, el

pondiente a la codicacin hexadecimal pasada como argumento. La sintaxis de estas funciones es

escape(string)

unescape(string).

siguiente cdigo genera una pgina con un formulario con dos botones. Un botn aplica la funcin aplica la funcin

escape unescape.

a la cadena que introduce el usuario y el otro

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<HTML> <HEAD> <TITLE>Funcin predefinida escape()</TITLE> <SCRIPT LANGUAGE="JavaScript"> function hazEscape() { var cadena; cadena = prompt("Escriba una cadena", ""); alert(escape(cadena));

Ejemplo 5.34

function hazUnescape() { var cadena; cadena = prompt("Escriba una cadena", ""); alert(unescape(cadena));

} </SCRIPT> </HEAD> <BODY> <CENTER> <FORM NAME="formulario"> <INPUT TYPE="BUTTON" VALUE="escape" ONCLICK="hazEscape()"> <INPUT TYPE="BUTTON" VALUE="unescape" ONCLICK="hazUnescape()"> </FORM> </CENTER>

120

Captulo 5. JavaScript

27 28

</BODY> </HTML>

5.5. Objetos
JavaScript es un lenguaje basado en objetos. Pero no se puede considerar

que sea orientado a objetos, ya que no posee caractersticas bsicas como la herencia simple o mltiple, la jerarqua de clases, el polimorsmo, la ocultacin de datos, etc. En JavaScript un objeto es un constructor con ser variables u otros objetos) y

mtodos

propiedades

(que pueden y

(funciones asociadas a objetos).

En la Seccin 5.3.3 se vieron las sentencias

for(... in ...)

with

que

permiten manipular objetos. Para acceder a las propiedades o mtodos de un objeto se emplea el operador punto (.). Por ejemplo, en el siguiente cdigo se accede a la propiedad

status

y al mtodo

alert

del objeto

window:

1 2

window.status = "Bienvenido a JavaScript"; window.alert("2 + 2 = " + (2 + 2));

Ejemplo 5.35

Tambin se puede acceder a las propiedades y mtodos de un objeto mediante la notacin de piedad o un mtodo. El cdigo del ejemplo anterior se expresa mediante arrays asociativos de la siguiente forma:

arrays asociativos .

Se puede acceder al objeto como si

fuera un array. Cada ndice de acceso es una cadena que representa una pro-

1 2

window.["status"] = "Bienvenido a JavaScript"; window.["alert"]("2 + 2 = " + (2 + 2));

Ejemplo 5.36

5.5.1. Creacin de objetos

Existen dos formas de crear un objeto nuevo: inicializadores de objetos y funciones constructoras.

5.5. Objetos

121

Inicializadores de objetos
La sintaxis de este mtodo es:

nombreObjeto = {prop1:val1, prop2:val2, ..., propN:valN}

Ejemplo 5.37

donde una

nombreObjeto es el nombre del nuevo objeto, propI es el nombre de propiedad y valI el valor asociado a la propiedad. Un objeto puede tener profesor profesor asignatura.
y

como propiedad otro objeto. Por ejemplo, el siguiente cdigo dene dos objetos llamados

asignatura.
1 2 3 4 5 6 7 8 9

El objeto

forma parte del objeto

profesor = {nombre:"Sergio", apellidos:"Lujn Mora"} asignatura = {cod:"PI", cred:6, prof:profesor}; document.write("Cdigo: " + asignatura.cod); document.write("<BR>"); document.write("Crditos: " + asignatura["cred"]); document.write("<BR>"); document.write("Profesor: " + asignatura.prof.nombre + " " + asignatura.prof.apellidos); document.write("<BR>");

Ejemplo 5.38

Funciones constructoras
En este sistema se emplea una funcin que realiza el papel de constructor. Cuando se crea el objeto, se emplea el operador tipo para distintos objetos. En la funcin constructora se indican las propiedades y mtodos del objeto. Una caracterstica especial de JavaScript es que en cualquier momento se pueden aadir nuevas propiedades o mtodos a un objeto concreto (no se aaden a todos los objetos del mismo tipo). Dentro de la funcin constructora se emplea la palabra reservada objetos de tipo de tipo

new

y el nombre de la funcin

constructora. Este mtodo es mejor que el anterior, ya que permite crear un

this

para hacer referencia al objeto.

Por ejemplo, el siguiente cdigo dene un objeto de tipo

Pagina. Persona.

Persona

y dos

Estos ltimos poseen una propiedad que es un objeto

122

Captulo 5. JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function Persona(nombre, apellidos) { this.nombre = nombre; this.apellidos = apellidos; } function Pagina(autor, url, fecha) { this.autor = autor; this.url = url; this.fecha = fecha; }

Ejemplo 5.39

slm = new Persona("Sergio", "Lujn Mora"); p1 = new Pagina(slm, "index.html", "18/04/2001"); p2 = new Pagina(slm, "home.html", "23/03/2001"); document.write(p1.url + ": " + p1.fecha); document.write("<BR>"); document.write(p2.url + ": " + p2.fecha);

5.5.2. Mtodos de un objeto

Para denir un mtodo de un objeto, simplemente hay que asignar a una propiedad del objeto el nombre de una funcin. En la funcin, si se quiere acceder a las propiedades del objeto, se tiene que emplear la palabra reservada

this.
objetos poseen un mtodo llamado

Por ejemplo, el siguiente cdigo crea dos objetos de tipo

Ordenador. Estos ver que muestra las propiedades del objeto.

1 2 3 4 5 6 7 8

function ver() { document.write("CPU: " + this.cpu + "<BR>"); document.write("Velocidad: " + this.vel + " MHz<BR>"); document.write("Memoria: " + this.mem + " Mb<BR>"); document.write("Disco duro: " + this.dd + " Gb<BR>"); }

Ejemplo 5.40

5.6. Tratamiento de cadenas

123

9 10 11 12 13 14 15 16 17 18 19 20 21

function Ordenador(cpu, vel, mem, dd) { this.cpu = cpu; this.vel = vel; this.mem = mem; this.dd = dd; this.ver = ver; } o1 = new Ordenador("Pentium", 200, 32, 3); o2 = new Ordenador("Pentium II", 500, 128, 15); o1.ver(); o2.ver();

5.5.3. Eliminacin de objetos

Para eliminar un objeto se emplea el operador vuelve

true

si el borrado es correcto y

false

delete.

Este operador de-

en caso contrario.

5.6. Tratamiento de cadenas

Las cadenas en JavaScript se pueden representar de dos formas: Directamente como literales: caracteres encerrados entre comillas simples o dobles. Como un objeto

String:

este objeto envuelve al tipo de dato cadena.

No se debe confundir una cadena literal con un objeto el siguiente cdigo crea la cadena literal

s1

y el objeto

String. Por ejemplo, de tipo String s2:

1 2 3 4 5

// crea una cadena literal s1 = "algo" // crea un objeto String s2 = new String("algo")

Ejemplo 5.41

124

Captulo 5. JavaScript

Todo los mtodos del objeto un objeto

String

se pueden emplear directamente en

una cadena literal: JavaScript convierte automticamente la cadena literal a

String

temporal, ejecuta el mtodo sobre ese objeto y naliza eli-

minando el objeto

String.length

String

temporal. Tambin se puede emplear la propiedad

con una cadena literal: devuelve el nmero de caracteres (lon-

gitud) que posee la cadena. A continuacin mostramos los principales mtodos que posee el objeto

String: charAt, concat, indexOf, lastIndexOf, replace, slice

split.

charAt(indice)
Devuelve el carcter especicado por

indice en la cadena. El indice toma

valores entre 0 y la longitud de la cadena menos 1. Ejemplo:

1 2 3 4 5

var cadena = "Hola";

Ejemplo 5.42

document.writeln("Carcter en 0 es " + cadena.charAt(0) + "<BR>"); document.writeln("Carcter en 1 es " + cadena.charAt(1) + "<BR>"); document.writeln("Carcter en 2 es " + cadena.charAt(2) + "<BR>");

El ejemplo anterior produce la siguiente salida:

1 2 3

Carcter en 0 es H Carcter en 1 es o Carcter en 2 es l

Ejemplo 5.43

concat(cadena1, cadena2, . . . , cadenaN)

Concatena varias cadenas en una sola. Ejemplo:

1 2 3 4 5

var var var var

cad1 cad2 cad3 cad4

= = = =

"Hola"; " a"; " todo"; " el mundo";

Ejemplo 5.44

5.6. Tratamiento de cadenas

125

6 7

cad5 = cad1.concat(cad2, cad3, cad4); document.writeln(cad5);

El cdigo anterior produce el siguiente resultado:

Hola a todo el mundo

Ejemplo 5.45

indexOf(valorBuscado [, inicio])
valorBuscado dentro de la cadena a partir del principio de la cadena (o de inicio que es opcional) o -1 si no se encuentra.
Devuelve la primera posicin de Ejemplo:

1 2 3 4 5 6 7 8 9 10 11

var cuenta = 0; var pos; var cad = "Cadena con unas letras"

Ejemplo 5.46

pos = cad.indexOf("a"); while(pos != -1) { cuenta++; pos = cad.indexOf("a", pos + 1); } document.write("La cadena contiene " + cuenta + " aes");

El ejemplo anterior produce la siguiente salida:

La cadena contiene 4 aes

Ejemplo 5.47

lastIndexOf(valorBuscado [, inicio])
Similar a la funcin

inicio

indexOf,

pero busca desde el nal de la cadena o el

que se indique hacia el principio. Ejemplo:

126

Captulo 5. JavaScript

1 2 3 4 5 6 7

var pos; var cad = "Cadena con unas letras"

Ejemplo 5.48

pos = cad.lastIndexOf("a"); document.write("La ltima a est en " + pos + "<BR>"); pos = cad.lastIndexOf("a", pos - 1); document.write("La penltima a est en " + pos + "<BR>");

Este ejemplo genera el siguiente resultado:

1 2

La ltima a est en 20 La penltima a est en 13

Ejemplo 5.49

replace(exRegular, nuevaCadena)
Busca una expresin regular (exRegular) en una cadena y cada vez que se encuentra se sustituye por que incluir el modicador modicador

nuevaCadena. Si se quiere buscar varias veces, hay g en la expresin regular para realizar una bsqueda

global. Si no se quiere distinguir minsculas y maysculas, hay que incluir el

i.

Ejemplo:

1 2 3 4 5 6

var cad = "Juan es hermano de Juan Luis"; var aux; aux = cad.replace(/Juan/gi, "Jose"); document.write(cad + "<BR>"); document.write(aux + "<BR>");

Ejemplo 5.50

El cdigo anterior muestra el siguiente resultado:

1 2

Juan es hermano de Juan Luis Jose es hermano de Jose Luis

Ejemplo 5.51

5.6. Tratamiento de cadenas

127

slice(inicio [, n])
Extrae un trozo de una cadena desde

fin,
1 2 3 4 5 6 7

inicio hasta fin - 1. Si no se indica

se extrae hasta el nal de la cadena. Ejemplo:

var cad = "Juan es hermano de Juan Luis"; var aux; aux = cad.slice(8); document.write(aux + "<BR>"); aux = cad.slice(8, 15); document.write(aux + "<BR>");
Este ejemplo produce el siguiente resultado:

Ejemplo 5.52

1 2

hermano de Juan Luis hermano

Ejemplo 5.53

split(separador [, limite])
Divide una cadena en funcin del se almacena en un array. El valor de

separador. El resultado de la divisin limite indica el nmero mximo de

divisiones que se pueden hacer. Ejemplo:

1 2 3 4 5 6

var cad = "Juan es hermano de Juan Luis"; var aux, i; aux = cad.split(" "); for(i = 0; i < aux.length; i++) document.write("Posicion " + i + ": " + aux[i] + "<BR>");
El ejemplo anterior genera el siguiente resultado:

Ejemplo 5.54

1 2

Posicion 0: Juan Posicion 1: es

Ejemplo 5.55

128

Captulo 5. JavaScript

3 4 5 6

Posicion Posicion Posicion Posicion

2: 3: 4: 5:

hermano de Juan Luis

5.7. Operaciones matemticas

JavaScript dispone del objeto

Math

que posee una serie de propiedades y

mtodos que permiten trabajar con constantes y funciones matemticas. Todos los mtodos y propiedades son estticos, por lo que no hace falta crear un objeto de tipo propiedades del objeto

Math para usarlos. En el Cuadro 5.8 se muestran las principales Math.

Propiedad

Descripcin
Constante de Euler, la base de los logaritmos naturales (neperianos). Aproximadamente 2.718 El logaritmo natural de 10. Aproximadamente 2.302 El logaritmo natural de 2. Aproximadamente 0.693 El logaritmo decimal (base 10) de E. Aproximadamente 0.434

LN10 LN2 LOG10E LOG2E PI SQRT1_2 SQRT2

El logaritmo en base 2 de E. Aproximadamente 1.442 Razn de la circunferencia de un crculo a su dimetro. Aproximadamente 3.141 Raz cuadrada de 1 / 2. Aproximadamente 0.707 Raz cuadrada de 2. Aproximadamente 1.414

Cuadro 5.8: Propiedades del objeto Math Los principales mtodos del objeto Math son: abs, acos, asin, atan, ceil, cos, sin, tan, exp, floor, log, max, min, pow, random, round y sqrt.

abs
Devuelve el valor absoluto de un nmero.

Ejemplo 5.56

5.7. Operaciones matemticas

129

1 2 3 4

document.write(Math.abs(3.5) + "<BR>"); document.write(Math.abs(2) + "<BR>"); document.write(Math.abs(-0.5) + "<BR>"); document.write(Math.abs(-4) + "<BR>");

El cdigo anterior produce la siguiente salida:

1 2 3 4

3.5 2 .5 4

Ejemplo 5.57

acos, asin, atan

Devuelve el arcocoseno, arcoseno y arcotangente en radianes de un nmero.

ceil
Devuelve el entero menor mayor o igual que un nmero. Ejemplo:

1 2 3

document.write("ceil(2): " + Math.ceil(2) + "<BR>"); document.write("ceil(2.0): " + Math.ceil(2.0) + "<BR>"); document.write("ceil(2.05): " + Math.ceil(2.05) + "<BR>");

Ejemplo 5.58

El cdigo anterior genera la siguiente salida:

1 2 3

ceil(2): 2 ceil(2.0): 2 ceil(2.05): 3

Ejemplo 5.59

cos, sin, tan

Devuelve el coseno, seno y tangente de un ngulo expresado en radianes.

130

Captulo 5. JavaScript

exp
Devuelve E elevado a un nmero.

oor
Devuelve el mayor entero menor o igual que un nmero. Ejemplo:

1 2 3 4

document.write("floor(2): " + Math.floor(2) + "<BR>"); document.write("floor(2.0): " + Math.floor(2.0) + "<BR>"); document.write("floor(2.05): " + Math.floor(2.05) + "<BR>"); document.write("floor(2.99): " + Math.floor(2.99) + "<BR>");
Este ejemplo muestra el siguiente resultado:

Ejemplo 5.60

1 2 3 4

floor(2): 2 floor(2.0): 2 floor(2.05): 2 floor(2.99): 2

Ejemplo 5.61

log
Devuelve el logaritmo natural (en base E) de un nmero.

max, min
Devuelve el mayor (mnimo) de dos nmeros. Ejemplo:

1 2

document.write("max(3, 5): " + Math.max(3, 5) + "<BR>"); document.write("min(3, 5): " + Math.min(3, 5) + "<BR>");
El cdigo anterior genera la siguiente salida:

Ejemplo 5.62

1 2

max(3, 5): 5 min(3, 5): 3

Ejemplo 5.63

5.7. Operaciones matemticas

131

pow
Devuelve la base elevada al exponente. Ejemplo:

1 2 3

document.write("pow(2, 3): " + Math.pow(2, 3) + "<BR>"); document.write("pow(3, 4): " + Math.pow(3, 4) + "<BR>"); document.write("pow(5, 0): " + Math.pow(5, 0) + "<BR>");

Ejemplo 5.64

El ejemplo anterior genera el siguiente resultado:

1 2 3

pow(2, 3): 8 pow(3, 4): 81 pow(5, 0): 1

Ejemplo 5.65

random
Produce un nmero pseudoaleatorio entre 0 y 1. Ejemplo:

1 2

document.write("random(): " + Math.random() + "<BR>"); document.write("random(): " + Math.random() + "<BR>");

Ejemplo 5.66

Este ejemplo produce la siguiente salida:

1 2

random(): .32779162476197754 random(): .8945828404144374

Ejemplo 5.67

round
Devuelve el entero ms cercano a un nmero. Si la parte decimal es menor que 0.5, lo redondea al entero mayor menor o igual que el nmero; si la parte decimal es igual o mayor que 0.5, lo redondea al entero menor mayor o igual que el nmero. Ejemplo:

132

Captulo 5. JavaScript

1 2 3

document.write("round(3.49): " + Math.round(3.49) + "<BR>"); document.write("round(3.5): " + Math.round(3.5) + "<BR>"); document.write("round(3.51): " + Math.round(3.51) + "<BR>");
Produce la siguiente salida:

Ejemplo 5.68

1 2 3

round(3.49): 3 round(3.5): 4 round(3.51): 4

Ejemplo 5.69

sqrt
Devuelve la raz cuadrada de un nmero.

5.8. Validacin de formularios

Una de las utilidades ms importantes que ofrece JavaScript es la posibilidad de realizar validaciones inmediatas de la informacin introducida por un usuario en un formulario. Aunque existe la alternativa de utilizar un programa

CGI o un ASP que realice la misma funcin en el servidor, poder llevar a cabo
nmero de conexiones al servidor y limita la carga del servidor.

este proceso en el cliente, ahorra tiempo de espera a los usuarios, disminuye el Antes de estudiar la validacin de formularios, conviene leer el Captulo 6, ya que en l se explica sus controles.

DOM,

una representacin de los distintos elementos

que componen una pgina web. Mediante

DOM se accede a los formularios y

5.8.1. Validacin campo nulo

Muchas veces interesa comprobar si se ha introducido informacin en un campo: que no se deje en blanco algn dato. En el siguiente ejemplo, la funcin

compruebaVacio

determina si en un campo se ha introducido informacin, te-

niendo en cuenta que se considera informacin todo lo que sea distinto de vaco, espacios en blanco o tabuladores. En la Figura 5.2 vemos como se visualiza el siguiente cdigo en un navegador.

5.8. Validacin de formularios

133

Figura 5.2: Validacin campo nulo

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<HTML> <HEAD> <TITLE>Validacin de un campo vaco</TITLE> <SCRIPT LANGUAGE="JavaScript"> error = new creaError(); errores = new Array(); errores[0] = "Campo vaco"; errores[1] = "Campo slo contiene blancos o tabuladores"; function creaError() { this.valor = 0; return this; } function compruebaVacio(contenido, error) { if(contenido.length == 0)

Ejemplo 5.70

134

Captulo 5. JavaScript

19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

} for(var i = 0; i < contenido.length; i++) if(contenido.charAt(i) != ' ' && contenido.charAt(i) != '\t') return false; error.valor = 1; return true;

error.valor = 0; error.posicion = 0; return true;

function valida() { if(compruebaVacio(document.formulario.campo.value, error)) alert("El campo no es correcto: " + errores[error.valor]); else alert("El campo es correcto: Campo no vaco"); } </SCRIPT> </HEAD> <BODY> <FORM NAME="formulario"> <B><CENTER>Validacin de un campo vaco</CENTER></B> <BR> Campo: <INPUT TYPE="TEXT" NAME="campo"> <INPUT TYPE="BUTTON" VALUE="Valida" ONCLICK="valida()"> </FORM> </BODY> </HTML>

5.8.2. Validacin alfabtica

Un tipo elemental de informacin que aparece en muchos formularios es el tipo alfabtico compuesto por los caracteres alfabticos del idioma en particu-

compruebaAlfa, compruebaAlfaMin y compruebaAlfaMay validan que un valor sea una palabra,

lar con el que se trabaje. En el siguiente ejemplo, las funciones una palabra en minsculas y una palabra en maysculas, incluyendo la posibi-

5.8. Validacin de formularios

135

lidad de que existan letras acentuadas o con diresis. En la Figura 5.3 vemos el aspecto de la pgina visualizada en un navegador.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<HTML> <HEAD> <TITLE>Validacin alfabtica de un campo</TITLE> <SCRIPT LANGUAGE="JavaScript"> mayusculas = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; minusculas = "abcdefghijklmnopqrstuvwxyz"; error = new creaError(); errores = new Array(); errores[1] = "Falta carcter alfabtico"; errores[2] = "Falta carcter alfabtico en minsculas"; errores[3] = "Falta carcter alfabtico en maysculas"; function creaError() { this.valor = 0; this.posicion = 0; return this; } function esMinuscula(c) { return minusculas.indexOf(c) >= 0; } function esMayuscula(c) { return mayusculas.indexOf(c) >= 0; } function esLetra(c) { return esMinuscula(c) || esMayuscula(c); } function compruebaAlfa(contenido, error) {

Ejemplo 5.71

136

Captulo 5. JavaScript

39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

for(var i = 0; i < contenido.length; i++) if(!esLetra(contenido.charAt(i))) { error.valor = 1; error.posicion = i + 1; return false; } } return true;

function compruebaAlfaMin(contenido, error) { for(var i = 0; i < contenido.length; i++) if(!esMinuscula(contenido.charAt(i))) { error.valor = 2; error.posicion = i + 1; return false; } } return true;

function compruebaAlfaMay(contenido, error) { for(var i = 0; i < contenido.length; i++) if(!esMayuscula(contenido.charAt(i))) { error.valor = 3; error.posicion = i + 1; return false; } } return true;

function valida(valor) { var correcto; var contenido = document.formulario.campo.value;

5.8. Validacin de formularios

137

81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

switch(valor) { case 1: correcto = compruebaAlfa(contenido, error); break; case 2: correcto = compruebaAlfaMin(contenido, error); break; case 3: correcto = compruebaAlfaMay(contenido, error); break; default: break;

} </SCRIPT> <BODY> <FORM NAME="formulario"> <B><CENTER>Validacin alfabtica de un campo</CENTER></B> <BR> Campo: <INPUT TYPE="TEXT" NAME="campo"> <INPUT TYPE="BUTTON" VALUE="Palabra" ONCLICK="valida(1)"> <INPUT TYPE="BUTTON" VALUE="Minsculas" ONCLICK="valida(2)"> <INPUT TYPE="BUTTON" VALUE="Maysculas" ONCLICK="valida(3)"> </FORM> </BODY> </HTML>

if(correcto) alert("El campo es vlido"); else alert("El campo no es vlido: " + errores[error.valor] + " en la posicin " + error.posicion);

5.8.3. Validacin numrica

Se pueden distinguir tres tipos de formatos numricos bsicos:

138

Captulo 5. JavaScript

Figura 5.3: Validacin alfabtica

Nmero natural: formado por los caracteres numricos. Nmero entero: formado por un signo inicial opcional (+, -), seguido de un nmero natural. Nmero real: formado por un signo inicial opcional (+, -), seguido de caracteres numricos y, opcionalmente, seguido de la coma decimal y otra serie de caracteres numricos. En el siguiente ejemplo, las funciones y

compruebaReal

compruebaNatural, compruebaEntero

validan que un valor sea un nmero natural, un nmero en-

tero y un nmero real

3 respectivamente. En la Figura 5.4 vemos el aspecto de

la pgina visualizada en un navegador.

1 2 3 4 5 6

<HTML> <HEAD> <TITLE>Validacin numrica de un campo</TITLE> <SCRIPT LANGUAGE="JavaScript"> numeros = "0123456789"; puntoDecimal = ".,";
3
Se permite el punto y la coma como separadores decimales.

Ejemplo 5.72

5.8. Validacin de formularios

139

7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

signos = "+-"; error = new creaError(); errores = new Array(); errores[1] = "Campo vaco no contiene ningn valor"; errores[2] = "Carcter ilegal en un nmero"; errores[3] = "Carcter ilegal"; errores[4] = "Slo ha insertado un signo"; errores[5] = "Parte decimal vaca"; function creaError() { this.valor = 0; this.posicion = 0; return this; } function numero(c) { return numeros.indexOf(c) >= 0; } function signo(c) { return signos.indexOf(c) >= 0; } function compruebaNatural(contenido, error) { if(contenido.length == 0) { error.valor = 1; error.posicion = 1; return false; } for(var i = 0; i < contenido.length; i++) if(!numero(contenido.charAt(i))) { error.valor = 2; error.posicion = i + 1; return false;

140

Captulo 5. JavaScript

49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

} } return true;

function signoCorrecto(contenido, error) { if(contenido.length == 0) { error.valor = 1; error.posicion = 1; return false; } if(!numero(contenido.charAt(0)) && !signo(contenido.charAt(0))) { error.valor = 3; error.posicion = 1; return false; } } return true;

function compruebaEntero(contenido, error) { if(!signoCorrecto(contenido, error)) return false; if(numero(contenido.charAt(0))) var aux = compruebaNatural(contenido, error); else { var aux = compruebaNatural(contenido.substring(1, contenido.length), error); if(!aux) error.posicion++; if(error.valor == 1) { error.valor = 4; error.posicion = 1;

5.8. Validacin de formularios

141

91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132

} }

return aux;

function compruebaReal(contenido, error) { var aux = compruebaEntero(contenido, error); var posicion = error.posicion - 1; if(!aux && error.valor == 2 & puntoDecimal.indexOf(contenido.charAt(posicion)) >= 0) { var aux = compruebaNatural(contenido.substring( error.posicion, contenido.length), error); if(!aux && error.valor == 1) { error.valor = 5; } if(!aux) error.posicion += posicion + 1; } } return aux;

function valida(valor) { var correcto; var contenido = document.formulario.campo.value; switch(valor) { case 1: correcto = compruebaNatural(contenido, error); break; case 2: correcto = compruebaEntero(contenido, error); break;

142

Captulo 5. JavaScript

133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158

case 3: correcto = compruebaReal(contenido, error); break; default: break;

} </SCRIPT> <BODY> <FORM NAME="formulario"> <B><CENTER>Validacin numrica de un campo</CENTER></B> <BR> Campo: <INPUT TYPE="TEXT" NAME="campo"> <INPUT TYPE="BUTTON" VALUE="Natural" ONCLICK="valida(1)"> <INPUT TYPE="BUTTON" VALUE="Entero" ONCLICK="valida(2)"> <INPUT TYPE="BUTTON" VALUE="Real" ONCLICK="valida(3)"> </FORM> </BODY> </HTML>

if(correcto) alert("El campo es vlido"); else alert("El campo no es vlido: " + errores[error.valor] + " en la posicin " + error.posicion);

5.8. Validacin de formularios

143

Figura 5.4: Validacin numrica

Captulo 6

Modelo de objetos de documento

El Modelo de Objetos de Documento es un interfaz que permite acceder y modicar la estructura y contenido de una pgina web. Especica como se puede acceder a los distintos elementos (enlaces, imgenes, formularios, etc.) de una pgina y como se pueden modicar. En este captulo vamos a describir los objetos que componen este modelo, sus propiedades, mtodos y eventos.

ndice General
6.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . 146 6.2. Modelo de objetos en Netscape Communicator . . 146
6.2.1. Objeto document . . . . . . . . . . . . . . . . . . . . 148 6.2.2. Cmo acceder a los controles de un formulario . . . 152 6.2.3. Objeto history . . . . . . . . . . . . . . . . . . . . . 157 6.2.4. Objeto location . . . . . . . . . . . . . . . . . . . . . 157 6.2.5. Objeto navigator . . . . . . . . . . . . . . . . . . . . 160 6.2.6. Objeto window . . . . . . . . . . . . . . . . . . . . . 161

6.3. Modelo de objetos en Microsoft Internet Explorer 170

145

146

Captulo 6. Modelo de objetos de documento

6.1. Introduccin
El Modelo de Objetos de Documento lenguajes de independientes uno del otro. El modelo de objetos permite acceder a los elementos mento desde los lenguajes de

script : se piensa que forma parte de ellos, cuando en realidad son script. Para lograrlo, se crean una serie de objetos

DOM

se suele confundir con los

HTML de un docu-

que representan (exponen) dichos elementos. Estos objetos guardan entre ellos unas relaciones de parentesco (se establece una jerarqua) que reeja la lgica de una pgina

HTML: una pgina se presenta en una ventana, que posee un

documento, el cual a su vez puede tener una serie de formularios, que pueden contener elementos como botones, cuadros de texto, etc., los cuales tienen a su vez una serie de propiedades, etc. El modelo de objetos se modica de una versin de navegador a otra, aadindose nuevos objetos y modicndose la jerarqua existente entre ellos. Al igual que ocurre con los lenguajes de

script,

cada navegador posee su

propio modelo de objetos, que coinciden entre ellos en algunos objetos, propiedades y mtodos. Existe un intento de estandarizacin por parte de modelo de objetos de documento.

W3C del

6.2. Modelo de objetos en Netscape Communicator

Cuando se carga un objeto en el navegador, se crean una serie de objetos
JavaScript llamados objetos del navegador (

basadas en el documento

una jerarqua que reeja la estructura de la pgina

HTML que se est mostrando. Estos objetos poseen HTML. En la Figura

Navigator objects ) con propiedades

6.1 vemos la jerarqua del modelo de objetos en Netscape Communicator 4.0 y superiores (en versiones superiores puede ser que se vea ampliado). En esta jerarqua, los descendiente de un objeto se consideran propiedades de dicho objeto, aunque por s mismos tambin son objetos. Por ejemplo, un formulario llamado

document

form1

es un objeto y tambin una propiedad del objeto

y se accede como

document.form1.

Como todos los objetos cuelgan del objeto

window,

ste se pude obviar y

no escribir cuando se accede a un objeto de la ventana actual . As,

navigator.appName
1

navigator.appName

window.-

representan la misma propiedad y

Cuando se quiera acceder a un objeto de otra ventana, habr que indicar la ventana.

6.2. Modelo de objetos en Netscape Communicator

147

Figura 6.1: Modelo de objetos en Netscape Communicator

148

Captulo 6. Modelo de objetos de documento

las sentencias

window.document.writeln() y document.writeln() llaman al

mismo mtodo. Cualquier pgina posee los siguientes objetos:

document: contiene una serie de propiedades basadas en el contenido del

documento, como su ttulo, su color de fondo, sus enlaces y formularios.

history: contiene una serie de propiedades que representan las URLs que
el cliente ha visitado previamente (contiene el historial de navegacin).

location:

posee propiedades basadas en la

URL actual.

navigator: posee propiedades que representan el nombre y la versin de

navegador que se est usando, propiedades para los tipos

Multipurpose Internet Mail Extensions (MIME) que acepta el cliente y para los plugins que estn instalados en el cliente.
window:
se trata del objeto de ms alto nivel; tiene propiedades que se aplican a la ventana completa. Cada ventana hija en un documento dividido en marcos (

frames ) posee su propio objeto window.

Dependiendo del contenido de la pgina, el documento puede poseer otra serie de objetos. Por ejemplo, un formulario (denido mediante la etiqueta

<FORM> ... </FORM>)

en el documento tiene su correspondiente objeto

form

en la jerarqua de objetos.

6.2.1. Objeto document

Posee informacin sobre el documento actual y posee mtodos que permiten mostrar una salida en formato por cada etiqueta

<BODY> ... </BODY>.

HTML al usuario. Se crea un objeto document

Propiedades alinkColor anchors applets

Atributo

ALINK

de la etiqueta

BODY.

Array que contiene una entrada para cada ancla del documento.

Array que contiene una entrada por cada

applet

en el documento.

6.2. Modelo de objetos en Netscape Communicator

149

bgColor

Atributo

BGCOLOR

de la etiqueta

BODY.

classes Crea un objeto Style que se usa para especicar el estilo de las etiquetas HTML. cookie domain embeds fgColor
Especica una

cookie.

Nombre de dominio del servidor que sirvi el documento.

Array que contiene una entrada por cada

plug-in

del documento.

Atributo

TEXT

de la etiqueta

BODY.

formName forms height

Una propiedad por cada formulario con nombre en el documento.

Array que contiene una entrada por cada formulario en el documento.

Altura del documento en pixels.

ids Crea HTML. images

un objeto Style que permite especicar el estilo de cada etiqueta

Array que contiene una entrada para cada imagen del documento.

lastModied layers

Fecha en la que el documento se modic por ltima vez.

Array que contiene un entrada por cada capa (

layer ) en el documento.

linkColor links

Atributo

LINK

de la etiqueta

BODY.

Array que contiene una entrada por cada enlace en el documento.

plugins referrer

Array que contiene una entrada por cada

plug-in

en el documento.

Especica la

URL del documento que llam al actual.

150

Captulo 6. Modelo de objetos de documento

tags Crea un objeto Style que permite especicar los estilos de las etiquetas HTML. title
Contenido de la etiqueta

TITLE

de la seccin

HEAD.

URL URL completa del documento. vlinkColor width

Atributo

VLINK

de la etiqueta

BODY.

Anchura del documento en pixels.

Mtodos captureEvents
tipo especicado.

Establece que el documento capture todos los eventos del

close

Cierra un ujo de salida y fuerza que la informacin se muestre.

contextual HTML. getSelection handleEvent open

Especica un objeto Style que puede jar el estilo de las etiquetas

Devuelve una cadena que contiene el texto seleccionado.

Invoca el manejador del evento especicado.

Abre un ujo que recibir la salida de los mtodos

write

writeln.

releaseEvents
especicado.

Establece que el documento no capture los eventos del tipo

routeEvent write writeln

Pasa un evento a lo largo de la jerarqua de eventos.

Escribe una o ms expresiones

HTML en el documento. HTML en el

documento y naliza

Escribe una o ms expresiones

con un salto de lnea.

6.2. Modelo de objetos en Netscape Communicator

151

Eventos onClick

Se produce cuando un objeto de un formulario o un enlace es pulsado

con el botn del ratn.

onDblClick onKeyDown onKeyPress

tecla.

Se produce cuando un objeto de un formulario o un enlace es

pulsado dos veces con el botn del ratn.

Se produce cuando el usuario pulsa una tecla.

Se produce cuando el usuario presiona o mantiene pulsada una

onKeyUp

Se produce cuando el usuario deja de pulsar una tecla.

onMouseDown onMouseUp

Se produce cuando el usuario pulsa un botn del ratn.

Se produce cuando el usuario deja de pulsar un botn del ratn.

El siguiente cdigo de ejemplo muestra los enlaces que posee un documento.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto document</TITLE> </HEAD> <BODY> <A HREF="pag1.html">Enlace a la pagina 5</A> <BR> <A HREF="pag2.html">Enlace a la pagina 2</A> <BR> <A HREF="pag3.html">Enlace a la pagina 3</A> <BR><BR> <SCRIPT LANGUAGE="JavaScript"> document.write("Hay " + document.links.length + " enlaces<BR>\n"); for(i = 0; i < document.links.length; i++) { document.write(document.links[i]);

Ejemplo 6.1

152

Captulo 6. Modelo de objetos de documento

18 19 20 21 22

document.write("<BR>\n"); } </SCRIPT> </BODY> </HTML>

El siguiente ejemplo muestra el valor de los atributos

ALINK y VLINK. Adems, tambin (lastModified). En la Figura 6.2

navegador.

BGCOLOR, TEXT, LINK,

aparece la fecha de la ltima modicacin vemos como se visualiza esta pgina en un

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto document</TITLE> </HEAD> <BODY BGCOLOR="WHITE" TEXT="BLACK" LINK="NAVY" ALINK="BLUE" VLINK="RED"> <SCRIPT LANGUAGE="JavaScript"> document.write("BGCOLOR = " + document.bgColor + "<BR>\n"); document.write("TEXT = " + document.fgColor + "<BR>\n"); document.write("LINK = " + document.linkColor + "<BR>\n"); document.write("ALINK = " + document.alinkColor + "<BR>\n"); document.write("VLINK = " + document.vlinkColor + "<BR>\n"); document.write("<BR>\n"); document.write("lastModified = " + document.lastModified + "<BR>\n"); </SCRIPT> </BODY> </HTML>

Ejemplo 6.2

6.2.2. Cmo acceder a los controles de un formulario

Un documento (document) puede poseer varios formularios, cada uno con sus correspondientes controles. Para acceder a los controles de un formulario se tiene que recorrer la jerarqua que se puede ver en la Figura 6.1: objeto

window2 ,

Recordemos que se puede obviar.

6.2. Modelo de objetos en Netscape Communicator

153

Figura 6.2: Propiedades del objeto document

154

Captulo 6. Modelo de objetos de documento

objeto

document,

nombre del formulario , nombre del control y propiedad del

control. Por ejemplo, si tenemos el siguiente formulario:

1 2 3

<FORM NAME="miForm"> Nombre: <INPUT TYPE="TEXT" NAME="nombre"> </FORM>

para acceder al valor (propiedad

Ejemplo 6.3

nombre
1

value)

que contiene el campo de texto

se tiene que escribir:

document.miForm.nombre.value

Ejemplo 6.4

Hay que prestar mucha atencin a las maysculas y minsculas, ya que como se explic en el Captulo 5, JavaScript es un lenguaje sensible a minsculas/maysculas. Cada uno de los controles de un formulario tiene una serie de propiedades, mtodos y eventos. Todos los controles poseen el mtodo jar el foco sobre el objeto. A continuacin mostramos las propiedades ms importantes de los controles ms usados.

focus() que permite

Campos de vericacin
Los campos de vericacin poseen las siguiente propiedades:

checked
leccionado.

Valor booleano que indica si se encuentra seleccionado.

defaultChecked value
3

Valor booleano que indica si por defecto se encuentra se-

Valor asociado con el control.

Tambin se puede acceder a travs de

forms,

un array donde cada posicin representa

un formulario.

6.2. Modelo de objetos en Netscape Communicator

155

Por ejemplo, el siguiente cdigo muestra en una ventana el estado de los campos de vericacin de un formulario.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function valida() { if(document.miForm.ingles.checked) alert("Ingls: S"); else alert("Ingls: NO"); if(document.miForm.aleman.checked) alert("Alemn: S"); else alert("Alemn: NO"); if(document.miForm.frances.checked) alert("Francs: S"); else alert("Francs: NO"); } </SCRIPT> </HEAD> <BODY> <FORM NAME="miForm"> Idiomas: <BR> Ingls <INPUT TYPE="CHECKBOX" NAME="ingles" VALUE="ing" CHECKED> Alemn <INPUT TYPE="CHECKBOX" NAME="aleman" VALUE="ale"> Francs <INPUT TYPE="CHECKBOX" NAME="frances" VALUE="fra"> <BR> <INPUT TYPE="BUTTON" VALUE="Comprobar" ONCLICK="valida()"> </FORM> </BODY> </HTML>

Ejemplo 6.5

Campos excluyentes
Posee las mismas propiedades que los campos de vericacin:

156

Captulo 6. Modelo de objetos de documento

value

Valor asociado con el control, que se devuelve al servidor cuando el

formulario se enva.

defaultChecked
leccionado.

Valor booleano que indica si por defecto se encuentra se-

value

Valor asociado con el control, que se devuelve al servidor cuando el

formulario se enva.

Campos de texto y reas de texto

Ambos controles poseen estas dos propiedades:

defaultValue value
lario se enva.

Valor por defecto del control.

Valor actual de control, que se devuelve al servidor cuando el formu-

Al nal del Captulo 5, cuando se explica la validacin de formularios, se pueden ver varios ejemplos donde se hace uso de la propiedad

value.

Listas de seleccin
Las listas de seleccin poseen las siguientes propiedades:

length options

Nmero de opciones en la lista.

Array donde cada posicin representa una opcin (objeto

option)

de la lista.

selectedIndex

ndice de la primera opcin seleccionada, empezando desde

0. Si ninguna opcin est seleccionada, vale -1.

Adems, si se quiere obtener el texto y el valor asociado a una opcin, se tienen que emplear las propiedades del objeto

option:

selected

Valor booleano que indica si la opcin se encuentra seleccionada.

6.2. Modelo de objetos en Netscape Communicator

157

text value

Texto de la opcin que se muestra en la lista.

Valor asociado con la opcin, que se devuelve al servidor cuando la

opcin est seleccionada.

6.2.3. Objeto history

Contiene un array que almacena las URLs que el usuario ha visitado en la ventana actual. Mediante los mtodos que posee este objeto se puede navegar adelante o atrs en el historial.

Propiedades current Especica la URL actual del historial. length next

Indica el nmero de entradas que almacena el historial.

Especica la

URL de la siguiente entrada en el historial. URL de la entrada previa en el historial.

previous

Especica la

Mtodos back Carga la URL previa del historial. forward go

Carga la siguiente

URL del historial.

Carga la

URL indicada en el historial. URL completa asociada a un objeto window. Cada una de URL. Se accede
location
de un objeto

6.2.4. Objeto location

Representa la las propiedades de este objeto representa una porcin de la mediante la propiedad Una

URL se compone de las siguientes partes:

Ejemplo 6.6

window.

protocol://host:port/pathname#hash?search

158

Captulo 6. Modelo de objetos de documento

Propiedades hash Especica el valor de un ancla en una URL. host

Especica el nombre de dominio o direccin IP de la

URL.

hostname href

Especica la parte

host:port

de la

URL.

Especica la

URL entera. URL.

pathname port

Especica la ruta de la

Especica el puerto de comunicaciones que usa el servidor.

protocol search

Especica el protocolo de la

URL. URL.

Especica la consulta incluida en la

Mtodos reload Recarga el documento actual de la ventana. replace

Carga la

URL especicada sobre la entrada actual del historial de

location.

navegacin.

El siguiente ejemplo muestra todas las propiedades del objeto navegador.

En la Figura 6.3 vemos el resultado de visualizar la siguiente pgina en un

1 2 3 4 5 6 7 8

<HTML> <HEAD> <TILLE>Ejemplo de uso del objeto location</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.writeln("location.hash = " + location.hash + "<BR>"); document.writeln("location.host = " + location.host + "<BR>");

Ejemplo 6.7

6.2. Modelo de objetos en Netscape Communicator

159

9 10 11 12 13 14 15 16 17

document.writeln("location.hostname document.writeln("location.href = " document.writeln("location.pathname document.writeln("location.port = " document.writeln("location.protocol document.writeln("location.search = </SCRIPT> </BODY> </HTML>

= + = + = "

" + location.hostname + "<BR>"); location.href + "<BR>"); " + location.pathname + "<BR>"); location.port + "<BR>"); " + location.protocol + "<BR>"); + location.search + "<BR>");

Figura 6.3: Propiedades del objeto location

160

Captulo 6. Modelo de objetos de documento

6.2.5. Objeto navigator

Contiene informacin sobre la versin del navegador que se est empleando. Todas las propiedades de este objeto son de solo lectura.

Propiedades appCodeName appName appVersion language

vegador.

Nombre en clave del navegador.

Nombre del navegador.

Versin del navegador.

Idioma que emplea el navegador.

mimeTypes platform plugins

Array que contiene todos los tipos

MIME que soporta el na-

Indica el tipo de mquina para la que se compil el navegador.

Array que contiene todos los

plug-ins

instalados.

userAgent Mtodos javaEnabled

Especica la cabecera

HTTP user-agent.

Chequea si la opcin Java est activada.

plugins.refresh preference

Recarga los documentos que contienen

plug-ins .

Permite a un

script rmado acceder (lectura y escritura) a ciertas

prefs.js (che-

preferencias del navegador.

savePreferences taintEnabled

Guarda las preferencias del navegador en

ro de preferencias que posee cada usuario).

Especica si

data tainting

est activo.

6.2. Modelo de objetos en Netscape Communicator

161

El siguiente ejemplo muestra todas las propiedades del objeto En la Figura 6.4 vemos el resultado de este ejemplo.

navigator.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto location</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.writeln("navigator.appCodeName = " + navigator.appCodeName); document.writeln("<BR>"); document.writeln("navigator.appName = " + navigator.appName); document.writeln("<BR>"); document.writeln("navigator.appVersion = " + navigator.appVersion); document.writeln("<BR>"); document.writeln("navigator.language = " + navigator.language); document.writeln("<BR>"); document.writeln("navigator.mimeTypes = " + navigator.mimeTypes); document.writeln("<BR>"); document.writeln("navigator.platform = " + navigator.platform); document.writeln("<BR>"); document.writeln("navigator.plugins = " + navigator.plugins); document.writeln("<BR>"); document.writeln("navigator.userAgent = " + navigator.userAgent); document.writeln("<BR>"); </SCRIPT> </BODY> </HTML>

Ejemplo 6.8

6.2.6. Objeto window

Representa una ventana o un marco del navegador. Es el objeto en la posicin superior en la jerarqua de objetos, por encima de todos los dems. Se

window por cada etiqueta <BODY> ... </BODY> o <FRAMESET> ... <FRAMESET>. Tambin se crea un objeto window para representar cada marco denido con una etiqueta <FRAME>. Adems, tambin se pueden crear otras ventanas llamando al mtodo window.open.
crea un objeto

162

Captulo 6. Modelo de objetos de documento

Figura 6.4: Propiedades del objeto navigator

6.2. Modelo de objetos en Netscape Communicator

163

Propiedades closed crypto

vigator.

Especica si una ventana ha sido cerrada.

Permite acceder a las caractersticas de encriptacin de Netscape Na-

defaultStatus document frames history

Mensaje mostrado por defecto en la barra de estado.

Contiene informacin sobre el documento actual y mtodos que

permiten mostrar contenido

HTML al usuario.

Array que permite acceder a los marcos que posee una ventana.

Posee informacin sobre las URLs que el cliente ha visitado dentro

de la ventana.

innerHeight
tana.

Dimensin vertical, en pixels, del rea de contenido de la ven-

innerWidth
ventana.

Dimensin horizontal, en pixels, del rea de contenido de la

length location

Nmero de marcos (

frames ) de la ventana.

Informacin sobre la

URL actual.

locationbar menubar name

Representa la barra de localizacin de la ventana del navegador.

Representa la barra de mens de la ventana del navegador.

Nombre nico usado para identicar a la ventana.

oscreenBuering
en un buer.

Especica si las actualizaciones de la ventana se realizan

164

Captulo 6. Modelo de objetos de documento

opener
open.

Nombre de la ventana que ha abierto esta ventana usando el mtodo

outerHeight outerWidth
tana.

Dimensin vertical, en pixels, del lmite exterior de la ventana.

Dimensin horizontal, en pixels, del lmite exterior de la ven-

pageXOset
en la ventana.

Posicin actual sobre el eje X, en pixels, de una pgina vista

pageYOset
en la ventana.

Posicin actual sobre el eje Y, en pixels, de una pgina vista

parent

Ventana o marco que contiene al marco actual.

personalbar screenX screenY scrollbars self

Representa la barra personal (tambin llamada barra de direc-

torios) de la ventana del navegador.

Posicin sobre el eje X del extremo izquierdo de la ventana.

Posicin sobre el eje Y del extremo superior de la ventana.

Representa las barras de desplazamiento de la ventana.

Sinnimo de la ventana actual.

status

Especica un mensaje en la barra de estado de la ventana.

statusbar toolbar top

Representa la barra de estado de la ventana.

Representa la barra de herramientas de la ventana del navegador.

Sinnimo de la ventana ms superior en la jerarqua de ventanas.

6.2. Modelo de objetos en Netscape Communicator

165

window Mtodos alert OK. atob back blur btoa

Sinnimo de la ventana actual.

Muestra un cuadro de dilogo de alerta con un mensaje y un botn

Decodica una cadena de informacin que ha sido codicada usando la

codicacin

base-64.

Deshace la ltima navegacin en la ventana de nivel superior.

Elimina el foco del objeto especicado.

Crea una cadena codicada en

base-64.

captureEvents clearInterval
mtodo

Congura la ventana o documento para que capture todos

los eventos del tipo especicado.

Cancela un temporizador (

setInterval.

timeout ) que se haba jado con el timeout )

clearTimeout
el mtodo

Cancela un temporizador (

que se haba jado con

setTimeout.

close

Cierra la ventana.

conrm Muestra un cuadro de dilogo de conrmacin con un mensaje y los botones OK y Cancel. crypto.random crypto.signText
Devuelve una cadena pseudoaleatoria cuya longitud es el nmero de bytes especicados.

Devuelve una cadena de informacin codicada que repre-

senta un objeto rmado.

166

Captulo 6. Modelo de objetos de documento

disableExternalCapture
por el mtodo

Desactiva la captura de eventos externos jado

enableExternalCapture.
Permite que una ventana con marcos capture los

enableExternalCapture nd focus

eventos en las pginas cargadas desde distintos sitios (servidores).

Busca la cadena de texto especicada en el contenido de la ventana

especicada.

Otorga el foco al objeto especicado.

forward

Carga la siguiente

URL en la lista del historial.

handleEvent home

Invoca el manejador del mtodo especicado.

Navega a la

la pgina inicial (

home ).

URL especicada en las preferencias del navegador como

moveBy moveTo open print

Mueve la ventana segn el desplazamiento indicado.

Mueve la esquina superior izquierda de la ventana a la posicin de

la pantalla indicada.

Abre una nueva ventana del navegador.

Imprime el contenido de la ventana o marco.

prompt

Muestra un cuadro de dilogo de peticin de datos con un mensaje

y un campo de entrada.

releaseEvents

Congura la ventana para que libere todos los eventos cap-

turados del tipo indicado, enviando el evento a los siguientes objetos en la jerarqua de eventos.

resizeBy

Redimensiona la ventana moviendo la esquina inferior derecha la

cantidad indicada.

6.2. Modelo de objetos en Netscape Communicator

167

resizeTo
normal.

Redimensiona la ventana segn la altura y anchura indicada.

routeEvent scroll

Pasa un evento capturado a travs de la jerarqua de eventos

Realiza un

scroll

a las coordenadas indicadas.

scrollBy scrollTo
das.

Realiza un

scroll scroll

en el rea de visin segn la cantidad especicada.

Realiza un

en el rea de visin a las coordenadas especica-

setHotKeys
men.

Activa o desactiva las

hot keys

en una ventana que no posee

setInterval setResizable setTimeout setZOptions stop

Evala una expresin o llama a una funcin cada vez que trans-

curre el nmero de milisegundos indicado.

Especica si el usuario puede redimensionar una ventana.

Evala una expresin o llama a una funcin una vez que ha

transcurrido el nmero de milisegundos indicado.

Especica el orden sobre el eje Z.

Detiene la carga actual de la pgina.

Eventos onBlur

Se produce cuando un elemento pierde el foco.

onDragDrop
del navegador.

Se produce cuando el usuario deja un objeto sobre la ventana

onError
un error.

Se produce cuando la carga de un documento o una imagen produce

168

Captulo 6. Modelo de objetos de documento

onFocus onLoad onMove onResize onUnload

Se produce cuando un elemento recibe el foco.

Se produce cuando el navegador termina de cargar una ventana.

Se produce cuando se mueve una ventana o marco.

Se produce cuando se redimensiona una ventana o marco.

Se produce cuando un usuario cierra un documento.

El siguiente ejemplo muestra como se puede establecer una comunicacin entre varias ventanas. A partir de un documento, se puede abrir una ventana nueva en la que se puede escribir texto introducido en la primera ventana. En la Figura 6.5 se muestra la ventana principal y la ventana que se crea mediante el mtodo

open.
Ejemplo 6.9

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<HTML> <HEAD> <TITLE>Ejemplo de uso del objeto window</TITLE> <SCRIPT LANGUAGE="JavaScript"> var win = null; function abre() { win = window.open("", "Ventana", "scrollbars=yes,width=175,height=300"); } function escri() { if(win != null) { win.document.write(document.formulario.algo.value + "<BR>\n"); win.focus(); } } function cierra() { if(win != null) {

6.2. Modelo de objetos en Netscape Communicator

169

Figura 6.5: Interaccin entre varias ventanas a travs del objeto window

170

Captulo 6. Modelo de objetos de documento

23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

} } </SCRIPT> </HEAD> <BODY> <FORM NAME="formulario"> <P> <INPUT TYPE="BUTTON" VALUE="Abre una ventana" ONCLICK="abre()"> <P> <INPUT TYPE="BUTTON" VALUE="Escribe en la ventana" ONCLICK="escri()"> <INPUT TYPE="TEXT" NAME="algo"> <P> <INPUT TYPE="BUTTON" VALUE="Cierra la ventana" ONCLICK="cierra()"> </FORM> </BODY> </HTML>

win.close(); win = null;

6.3. Modelo de objetos en Microsoft Internet Explorer

Incluimos en la Figura 6.6 una representacin grca del modelo de objetos implementado en el navegador de Microsoft. Si se compara con el modelo de Netscape (Figura 6.1), se pueden apreciar varias diferencias.

6.3. Modelo de objetos en Microsoft Internet Explorer

171

Figura 6.6: Modelo de objetos en Microsoft Internet Explorer

Apndice A

Resumen etiquetas HTML

En este apndice se incluye un resumen de la sintaxis de las etiquetas HTML. El objetivo de este apndice es que sirva como una gua rpida de bsqueda en caso de duda.

ndice General
A.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . A.2. Etiquetas que denen la estructura del documento A.3. Etiquetas que pueden ir en la cabecera . . . . . . . A.4. Etiquetas que denen bloques de texto . . . . . . . A.5. Etiquetas de listas . . . . . . . . . . . . . . . . . . . . A.6. Etiquetas de caractersticas del texto . . . . . . . . A.7. Etiquetas de anclas y enlaces . . . . . . . . . . . . . A.8. Etiquetas de imgenes y mapas de imgenes . . . . A.9. Etiquetas de tablas . . . . . . . . . . . . . . . . . . . A.10.Etiquetas de formularios . . . . . . . . . . . . . . . . A.11.Etiquetas de marcos . . . . . . . . . . . . . . . . . . . A.12.Etiquetas de situacin de contenidos . . . . . . . . . A.13.Etiquetas de script . . . . . . . . . . . . . . . . . . . . A.14.Etiquetas de applets y plug-ins . . . . . . . . . . . . A.15.Etiquetas de ajuste del texto . . . . . . . . . . . . . A.16.Atributos universales . . . . . . . . . . . . . . . . . .
173

174 175 176 177 177 178 179 180 181 183 186 187 189 189 191 192

174

Apndice A. Resumen etiquetas HTML

A.1. Introduccin
Este resumen contiene todas las etiquetas etiquetas. Conforme evoluciona se desaconseja su uso. Cuando una etiqueta se emplea por parejas (inicio y n), se representa con unos puntos suspensivos, como la etiqueta es individual aparece como una barra vertical, como por ejemplo etiqueta

HTML

aceptadas por Netsca-

pe Navigator 4.0 y posteriores. Este resumen slo contiene la sintaxis de las

HTML aparecen nuevas etiquetas, se aaden

deprecated )
y

atributos nuevos a algunas etiquetas y otras quedan obsoletas (

<HTML> ... </HTML>, mientras que <IMG>. Cuando un atributo

cuando de una

etiqueta puede tomar una serie de posibles valores, estos se han separado con Otros atributos no reciben ningn valor, como el atributo

<SELECT> ... </SELECT>.

ALIGN="LEFT" | "RIGHT" | "CENTER". MULTIPLE de la

Las etiquetas se han clasicado en los siguientes grupos: Etiquetas que denen la estructura del documento. Etiquetas que pueden ir en la cabecera Etiquetas que denen bloques de texto. Etiquetas de listas. Etiquetas de caractersticas del texto. Etiquetas de anclas y enlaces. Etiquetas de imgenes y mapas de imgenes. Etiquetas de tablas. Etiquetas de formularios. Etiquetas de marcos. Etiquetas de situacin de contenidos. Etiquetas de script. Etiquetas de

<HEAD>.

applets

plug-ins.

A.2. Etiquetas que denen la estructura del documento

175

Etiquetas de ajuste del texto. Atributos universales.

Para incluir un comentario en una pgina

Comentario -->. Se puede emplear para anular una seccin de una pgina, de
seccin de la pgina.

HTML se utiliza la etiqueta <!--

forma que no se visualice en el navegador, pero sin tener que eliminar dicha

A.2. Etiquetas que denen la estructura del documento

En este grupo se incluyen las etiquetas que denen la estructura bsica de un documento

HTML.

Etiqueta ms externa:

<HTML> ... </HTML>. <HEAD> ... </HEAD>. <BODY> ... </BODY>. Atri-

Encabezado del documento:

Contenido principal del documento (cuerpo): butos:

BACKGROUND="URL". BGCOLOR="color". TEXT="color". LINK="color". ALINK="color". VLINK="color". ONLOAD="cdigoScript". ONUNLOAD="cdigoScript". ONBLUR="cdigoScript". ONFOCUS="cdigoScript".

176

Apndice A. Resumen etiquetas HTML

A.3. Etiquetas que pueden ir en la cabecera

En este grupo se clasican las etiquetas que pueden usarse en la cabecera de un documento, entre las etiquetas Ttulo del documento: Direccin URL base:

<HEAD>

</HEAD>.

<TITLE> ... </TITLE>.

Atributos:

<BASE>.

HREF="URL". TARGET="nombreVentana".
Informacin metadocumental:

<META>.

Atributos:

NAME="nombre". HTTP-EQUIV="nombreCampo". CONTENT="valor".

Denicin de estilo:

<STYLE> ... </STYLE>.

Atributo:

TYPE="tipoEstilo".
Enlace a cheros externos:

<LINK>.

Atributos:

REL="tipoFichero". TYPE="tipo". SRC="URL".

Elemento de bsqueda :

<ISINDEX>.

Atributo:

PROMPT="texto".
Cdigo JavaScript en el cliente :

<SCRIPT> ... </SCRIPT>.

Atributos:

LANGUAGE="nombreLenguajeScript". SRC="URL".
1 2
Tambin puede emplearse en el cuerpo. Tambin puede emplearse en el cuerpo.

A.4. Etiquetas que denen bloques de texto

177

A.4. Etiquetas que denen bloques de texto

En esta seccin se incluyen las etiquetas que denen bloques de texto, como encabezados, prrafos, citas, etc. Formato direccin:

<ADDRESS> ... </ADDRESS>. <BLOCKQUOTE> ... </BLOCKQUOTE>.

Atributo:

Bloque de texto con sangra: Seccin de un documento:

<DIV> ... </DIV>.

ALIGN="LEFT" | "CENTER" | "RIGHT" | "JUSTIFY"3 .

<H1> ... </H1>, <H2> ... </H2>, <H3> ... </H3>, <H4> ... </H4>, <H5> ... </H5> y <H6> ... </H6>. AtriEncabezamientos predenidos: buto:

ALIGN="LEFT" | "CENTER" | "RIGHT" | "JUSTIFY".

Prrafo:

<P> ... </P>.

Atributo:

ALIGN="LEFT" | "CENTER" | "RIGHT" | "JUSTIFY".

Texto preformateado (tipo de letra ja):

<PRE> ... </PRE>.

Atributos:

COLS="columnas". WRAP.
Secuencia literal de caracteres (desactiva intrprete):

<XMP> ... </XMP>.

A.5. Etiquetas de listas

En este grupo se encuentran clasicadas las distintas etiquetas que permiten crear listas. Lista de directorio: Lista de denicin:

<DIR> ... </DIR>. <DL> ... </DL>.

Atributo:

COMPACT.
3
En la documentacin de Netscape Communicator no gura el valor

JUSTIFY.

178

Apndice A. Resumen etiquetas HTML

Trmino de denicin:

<DT>. <DD>. <MENU> ... </MENU>.

Atributos:

Descripcin de denicin:

Lista de elementos individuales: Lista ordenada:

<OL> ... </OL>.

START="valor". TYPE="A" | "a" | "I" | "i" | "1".

Lista no ordenada:

<UL> ... </UL>.

Atributo:

TYPE="CIRCLE" | "DISC" | "SQUARE".

Elemento de una lista:

<LI> ... </LI>.

Atributos:

TYPE="CIRCLE" | "DISC" | "SQUARE" | "A" | "a" | "I" | "i" | "1". VALUE="nmero".

A.6. Etiquetas de caractersticas del texto

En esta seccin se muestran las etiquetas que denen las caractersticas del texto a nivel de carcter. Negrita:

<B> ... </B>. <BASEFONT> ... </BASEFONT>.

Tamao del tipo de letra por defecto: Atributo:

SIZE="nmero".
Tamao de letra mayor: Parpadeante: Cita:

<BIG> ... </BIG>.

<BLINK> ... </BLINK>.

<CITE> ... </CITE>. <CODE> ... </CODE>. <EM> ... </EM>.

Cdigo:

Enfatizado:

A.7. Etiquetas de anclas y enlaces

179

Caractersticas del tipo de letra:

<FONT> ... </FONT>.

Atributos:

COLOR="color". FACE="listaTiposDeLetra". POINT-SIZE="tamaoPunto". SIZE="nmero". WEIGHT="gradoNegrita".

Cursiva:

<I> ... </I>. <KBD> ... </KBD>. <PLAINTEXT>.

Texto de teclado:

Muestra el resto del documento tal cual: Tipo de letra menor: Tachado:

<SMALL> ... </SMALL>.

o

<STRIKE> ... </STRIKE>

<S> ... </S>.

nfasis fuerte: Subndice:

<STRONG> ... </STRONG>.

<SUB> ... </SUB>. <SUP> ... </SUP>. <TT> ... </TT>.

Superndice:

Mecanograado: Subrayado: Variable:

<U> ... </U>.

<VAR> ... </VAR>.

A.7. Etiquetas de anclas y enlaces

En esta seccin se muestra la etiqueta

<A> ... </A>, que se usa tanto para

denir las anclas (lugares a donde se puede crear un enlace) como los enlaces. Ancla:

<A NAME> ... </A>.

Atributo:

NAME="nombreAncla".
Enlace:

<A HREF> ... </A>.

Atributos:

180

Apndice A. Resumen etiquetas HTML

HREF="URL". ONCLICK="cdigoScript". ONMOUSEOUT="cdigoScript". ONMOUSEOVER="cdigoScript". TARGET="_blank" | "_parent" | "_self" | "_top" | "nombreVentana".

A.8. Etiquetas de imgenes y mapas de imgenes

En esta seccin se muestran las etiquetas que permiten insertar una imagen en un documento

HTML y crear mapas de imgenes (tambin llamados mapas

Atributos:

o imgenes sensibles). Imagen:

<IMG>.

SRC="URL". LOWSRC="URL". ALT="textoAlternativo". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". BORDER="anchuraBorde". HEIGHT="altura". WIDTH="anchura". HSPACE="margenHorizontal". VSPACE="margenVertical". ISMAP. USEMAP="#nombreMapa". NAME="nombreImagen". ONABORT="cdigoScript". ONERROR="cdigoScript". ONLOAD="cdigoScript".

A.9. Etiquetas de tablas

181

SUPPRESS="TRUE" | "FALSE".
rea de un mapa de imagen:

<AREA>.

Atributos:

COORDS="coordenadas". SHAPE="CIRCLE" | "RECT" | "POLY". HREF="URL". NOHREF. TARGET="nombreVentana". ONMOUSEOUT="cdigoScript". ONMOUSEOVER="cdigoScript". NAME="nombreArea".
Mapa de imagen:

<MAP> ... </MAP>.

Atributo:

NAME="nombreMapa".

A.9. Etiquetas de tablas

Esta seccin muestra las etiquetas que se emplean para crear tablas. Tabla:

<TABLE> ... </TABLE>.

Atributos:

ALIGN="LEFT" | "CENTER" | "RIGHT". BGCOLOR="color". BORDER="anchuraBorde". CELLPADDING="valor". CELLSPACING="valor". HEIGHT="altura". WIDTH="anchura". COLS="numeroDeColumnas". HSPACE="margenHorizontal". VSPACE="margenVertical".

182

Apndice A. Resumen etiquetas HTML

Ttulo de la tabla:

<CAPTION > ... </CAPTION>.

Atributo:

ALIGN="BOTTOM" | "TOP".
Fila de la tabla:

<TR> ... </TR>.

Atributos:

ALIGN="LEFT" | "CENTER" | "RIGHT". VALIGN="BASELINE" | "BOTTOM" | "MIDDLE" | "TOP". BGCOLOR="color".

Celda de una tabla:

<TD> ... </TD>.

Atributos:

ALIGN="LEFT" | "CENTER" | "RIGHT". VALIGN="BASELINE" | "BOTTOM" | "MIDDLE" | "TOP". BGCOLOR="color". COLSPAN="valor". ROWSPAN="valor". HEIGHT="altura". WIDTH="anchura". NOWRAP.
Encabezamiento de una columna o la:

<TH> ... </TH>.

Atributos:

ALIGN="LEFT" | "CENTER" | "RIGHT". VALIGN="BASELINE" | "BOTTOM" | "MIDDLE" | "TOP". BGCOLOR="color". COLSPAN="valor". ROWSPAN="valor". HEIGHT="altura". WIDTH="anchura". NOWRAP.

A.10. Etiquetas de formularios

183

A.10. Etiquetas de formularios

En este grupo se encuentran las etiquetas que denen los formularios y sus posibles controles. Formulario:

<FORM> ... </FORM>.

Atributos:

NAME="nombreFormulario". ACTION="URL". ENCTYPE="tipoCodificacin". METHOD="GET" | "POST". TARGET="nombreVentana". ONRESET="cdigoScript". ONSUBMIT="cdigoScript".

Botn:

<INPUT TYPE="BUTTON">.

Atributos:

NAME="nombreBotn". VALUE="etiqueta". ONCLICK="cdigoScript".

Casilla de vericacin:

<INPUT TYPE="CHECKBOX">.

Atributos:

NAME="nombre". VALUE="valor". CHECKED. ONCLICK="cdigoScript".

Envo de chero:

<INPUT TYPE="FILE">.

Atributos:

NAME="nombre". VALUE="nombreFichero".
Elemento oculto:

<INPUT TYPE="HIDDEN">.

Atributos:

NAME="nombre". VALUE="valor".

184

Apndice A. Resumen etiquetas HTML

Imagen como botn:

<INPUT TYPE="IMAGE">.

Atributos:

NAME="nombre". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". SRC="URL".
Contrasea:

<INPUT TYPE="PASSWORD">.

Atributos:

NAME="nombre". VALUE="texto". MAXLENGTH="mximoNmeroCaracteres". SIZE="longitudCampo". ONSELECT="cdigoScript".

Botn de radio:

<INPUT TYPE="RADIO">.

Atributos:

NAME="nombre". VALUE="valor". CHECKED. ONCLICK="cdigoScript".

Restaurar (borrar):

<INPUT TYPE="RESET">.

Atributos:

NAME="nombre". VALUE="etiqueta". ONCLICK="cdigoScript".

Botn de envo:

<INPUT TYPE="SUBMIT">.

Atributos:

NAME="nombre". VALUE="etiqueta".
Lnea de texto:

<INPUT TYPE="TEXT">.

Atributos:

NAME="nombre".

A.10. Etiquetas de formularios

185

VALUE="texto". MAXLENGTH="mximoNmeroCaracteres". SIZE="longitudCampo". ONBLUR="cdigoScript". ONCHANGE="cdigoScript". ONFOCUS="cdigoScript". ONSELECT="cdigoScript".

Lista de seleccin:

<SELECT> ... </SELECT>.

Atributos:

NAME="nombre". MULTIPLE. SIZE="longitudCampo". ONBLUR="cdigoScript". ONCHANGE="cdigoScript". ONCLICK="cdigoScript". ONFOCUS="cdigoScript".

Opcin en una lista de seleccin:

<OPTION> ... </OPTION>.

Atributos:

VALUE="valor". SELECTED.
rea de texto:

<TEXTAREA> ... </TEXTAREA>.

Atributos:

NAME="nombre". COLS="columnas". ROWS="filas". WRAP="OFF" | "HARD" | "SOFT". ONBLUR="cdigoScript". ONCHANGE="cdigoScript". ONFOCUS="cdigoScript". ONSELECT="cdigoScript".

186

Apndice A. Resumen etiquetas HTML

Generador de clave:

<KEYGEN>.

Atributos:

NAME="nombre". CHALLENGE="desafo".
Elemento de bsqueda :

<ISINDEX>.

Atributo:

PROMPT="texto".

A.11. Etiquetas de marcos

En esta seccin se muestran las etiquetas que permiten crear marcos y conjuntos de marcos. Un marco es una regin de una ventana que acta como una ventana ella misma. Regin de una ventana (marco):

<FRAME>.

Atributos:

BORDERCOLOR="color". FRAMEBORDER="YES" | "NO". MARGINHEIGHT="alturaMargen". MARGINWIDTH="anchuraMargen". NAME="nombreMarco". NORESIZE. SCROLLING="YES" | "NO" | "AUTO". SRC="URL".
Conjunto de marcos:

<FRAMESET> ... </FRAMESET>.

Atributos:

COLS="listaAnchurasColumnas". ROWS="listaAlturasFilas". BORDER="anchura". BORDERCOLOR="color". FRAMEBORDER="YES" | "NO". ONBLUR="cdigoScript".

4
Tambin puede emplearse en la cabecera.

A.12. Etiquetas de situacin de contenidos

187

ONFOCUS="cdigoScript". ONLOAD="cdigoScript". ONUNLOAD="cdigoScript".

Texto alternativo a los marcos:

<NOFRAMES> ... </NOFRAMES>.

A.12. Etiquetas de situacin de contenidos

En esta seccin se encuentran las etiquetas que permiten denir la posicin de los distintos elementos en una pgina. Estas etiquetas se emplean en

DHTML.

Denicin de una capa:

<LAYER> ... </LAYER>.

Atributos:

ID="nombreCapa". LEFT="posicin". TOP="posicin". PAGEX="pginaX". PAGEY="pginaY". SRC="URL". Z-INDEX="nmero". ABOVE="nombreCapa". BELOW="nombreCapa". WIDTH="anchura". HEIGHT="altura". CLIP="nmero,nmero,nmero,nmero". VISIBILITY="visibilidad". BGCOLOR="color". BACKGROUND="URL". ONBLUR="cdigoScript". ONFOCUS="cdigoScript". ONLOAD="cdigoScript".

188

Apndice A. Resumen etiquetas HTML

ONMOUSEOVER="cdigoScript". ONMOUSEOUT="cdigoScript".
Capa posicionada de forma relativa: tos:

<ILAYER> ... </ILAYER>.

Atribu-

ID="nombreCapa". LEFT="posicin". TOP="posicin". PAGEX="pginaX". PAGEY="pginaY". SRC="URL". Z-INDEX="nmero". ABOVE="nombreCapa". BELOW="nombreCapa". WIDTH="anchura". HEIGHT="altura". CLIP="nmero,nmero,nmero,nmero". VISIBILITY="visibilidad". BGCOLOR="color". BACKGROUND="URL". ONBLUR="cdigoScript". ONFOCUS="cdigoScript". ONLOAD="cdigoScript". ONMOUSEOVER="cdigoScript". ONMOUSEOUT="cdigoScript".
Texto alternativo a las capas:

<NOLAYER> ... </NOLAYER>.

A.13. Etiquetas de script

189

A.13. Etiquetas de script

En esta seccin se encuentran las etiquetas que permiten incluir cdigo script en una pgina

HTML.

Cdigo JavaScript en el cliente :

<SCRIPT> ... </SCRIPT>.

Atributos:

LANGUAGE="nombreLenguajeScript". SRC="localizacionURL".
Texto alternativo al cdigo JavaScript : Cdigo en el servidor:

<NOSCRIPT> ... </NOSCRIPT>.

<SERVER> ... </SERVER>.

A.14. Etiquetas de applets y plug-ins

Esta seccin muestra las etiquetas que se emplean para incluir objetos que emplean

plug-ins .

applets

Applet

Java:

<APPLET> ... </APPLET>.

Atributos:

NAME="nombre". CODE="nombreFicheroClass". CODEBASE="directorioFicheroClass". ARCHIVE="archivo". ALT="textoAlternativo". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". HEIGHT="altura". WIDTH="anchura". HSPACE="margenHorizontal". VSPACE="margenVertical". MAYSCRIPT.
5
Tambin puede emplearse en la cabecera.

190

Apndice A. Resumen etiquetas HTML

Parmetro para un

applet : <PARAM>. Atributos:

NAME="nombre". VALUE="valor".

Plug-in

incrustado:

<EMBED> ... </EMBED>.

Atributos:

NAME="nombre". SRC="URL". TYPE="tipoMIME". PLUGINSPAGE="URLinstrucciones". PLUGINURL="URLplugin". ALIGN="LEFT" | "RIGHT" | "TOP" | "BOTTOM". BORDER="anchura". FRAMEBORDER="YES" | "NO". HEIGHT="altura". WIDTH="anchura". UNITS="unidades". HIDDEN="TRUE" | "FALSE". HSPACE="margenHorizontal". VSPACE="margenVertical". PALETTE="FOREGROUND" | "BACKGROUND".
Texto alternativo para objetos incrustados: Objeto incrustado:

<NOEMBED> ... </NOEMBED>.

<OBJECT>.

Atributos:

CLASSID="ficheroClase". DATA="URL". CODEBASE="directorioFicheroClase". TYPE="tipoMIME". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM".

A.15. Etiquetas de ajuste del texto

191

HEIGHT="altura". WIDTH="anchura". ID="nombre".

A.15. Etiquetas de ajuste del texto

Las etiquetas de esta seccin permiten ajustar la posicin del texto. Salto de lnea:

<BR>.

Atributo:

CLEAR="ALL" | "LEFT" | "RIGHT".

Centrado:

<CENTER> ... </CENTER>. <HR>.

Atributos:

Lnea horizontal:

ALIGN="CENTER" | "LEFT" | "RIGHT". NOSHADE. SIZE="grosor. WIDTH="anchura".

Mltiples columnas:

<MULTICOL> ... </MULTICOL>.

Atributos:

COLS="nmeroColumnas". GUTTER="separacinColumnas". WIDTH="anchuraColumnas".

No salto de lnea: Espacio extra:

<NOBR> ... </NOBR>.

Atributos:

<SPACER>.

TYPE="HORIZONTAL" | "VERTICAL" | "BLOCK". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". HEIGHT="altura". WIDTH="anchura".

192

Apndice A. Resumen etiquetas HTML

SIZE="tamao".
Intervalo de contenido: Posible salto de lnea:

<SPAN> ... </SPAN>.

<WBR>.

A.16. Atributos universales

Los siguientes atributos se pueden emplear con prcticamente todas las etiquetas situadas en el cuerpo de una pgina Estilo de la clase: Idioma:

<BODY> ... </BODY>.

CLASS="claseEstilo".

LANG="ISO". ID="nombreLugarOEstilo".

Nombre de lugar o de estilo: Estilo:

STYLE="estilo".

Apndice B

Colores en HTML
El lenguaje HTML posee varias etiquetas con atributos que indican un color. Por ejemplo, la etiqueta <BODY> tiene el atributo BGCOLOR que permite indicar el color de fondo de una pgina y la etiqueta <FONT> posee el atributo COLOR para cambiar el color del texto. En este apndice se explica como trabajar con los colores en HTML.

ndice General
B.1. Como trabajar con las componentes RGB . . . . . 193
B.1.1. Obtener las componentes del color deseado en decimal194 B.1.2. Transformar las componentes de decimal a hexadecimal . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

B.2. Tabla de colores . . . . . . . . . . . . . . . . . . . . . 197

B.1. Como trabajar con las componentes RGB

Las componentes

RGB permiten expresar cualquier color mediante la com-

binacin de los tres colores bsicos (primarios) rojo, verde y azul. Cada componente expresa la intensidad del color bsico en la combinacin. As, por ejemplo, el color negro es el resultado de combinar los tres colores bsicos con una intensidad nula (0), mientras que el blanco es el resultado de combinar 193

194

Apndice B. Colores en HTML

los tres colores con una intensidad mxima (255 cada componente). Este sistema de codicacin de los colores permite 16 777 216 colores (256 x 256 x 256 combinaciones posibles). Cuando se trabaja con los colores en

HTML, las tres componentes se tie-

nen que expresar en hexadecimal. Como este sistema de numeracin es un poco engorroso, a continuacin mostramos como se pueden convertir las componentes

RGB de decimal a hexadecimal mediante las herramientas que posee

Microsoft Windows.

B.1.1. Obtener las componentes del color deseado en decimal

Mediante cualquier programa que permita seleccionar colores, podemos elegir el color que queremos emplear en una pgina programa Microsoft Paint , que viene con los sistemas operativos de Micro-

HTML. Por ejemplo, en el

Inicio Programas Accesorios, si seleccionamos en el men Colores la opcin Modicar colores. . . aparece la ventana de la Figura B.1. Si en esta ventana se pulsa el botn Denir colores personalizados , la ventana anterior se amplia y aparece la
soft y que se puede encontrar a travs de
ventana de la Figura B.2. En esta ventana se puede elegir de la paleta de colores un color y para el color elegido se puede seleccionar su brillo. En las casillas

Azul

Rojo, Verde y

aparecen las correspondientes componentes en decimal (los valores de

cada casilla varan desde 0 hasta 255). Una vez que se tienen las componentes del color deseado, el siguiente paso es convertirlas a hexadecimal.

B.1.2. Transformar las componentes de decimal a hexadecimal

Para pasar un nmero del sistema decimal al hexadecimal, se tiene que dividir el nmero entre 16. Si el cociente es mayor que 15, se divide el cociente entre 16 y as sucesivamente hasta lograr un cociente menor que 16. El nmero en hexadecimal escrito de izquierda a derecha se compone del ltimo cociente y los sucesivos restos obtenidos, desde el ltimo hasta el primero, pero si el ltimo cociente o los restos tienen dos cifras, se tienen que transformar segn las equivalencias del Cuadro B.1.

Se ha elegido este programa porque se encuentra en la mayora de los ordenadores con que facilitan la tarea, ya que directamente muestran en hexadecimal las de un color.

sistema operativo Microsoft Windows. Existen programa de dibujo o retoque fotogrco, como
Jasc Paint Shop Pro,

componentes

RGB

B.1. Como trabajar con las componentes RGB

195

Figura B.1: Ventana para modicar colores en Microsoft Paint

Cociente o resto Cifra hexadecimal

10 11 12 13 14 15 A B C D E F

Cuadro B.1: Equivalencias para pasar del sistema decimal al hexadecimal

196

Apndice B. Colores en HTML

Figura B.2: Ventana para denir colores personalizados en Microsoft Paint

B.2. Tabla de colores

197

Por ejemplo, el nmero

241

en decimal equivale a

que el primer (y nico) resto que se obtiene es

15,

que equivale a

F.

1 y el ltimo (y nico) cociente

F1

en hexadecimal, ya

Como el mtodo anterior es tedioso y propenso a errores, se puede realizar la conversin automticamente mediante el ordenador. Para ello, se puede emplear el programa Calculadora que se incluye en los sistemas operativos de

Inicio Programas Accesorios. El programa Calculadora posee dos modos de visualizacin: estndar y
Microsoft y que se encuentra otra vez en
cientca. Para realizar la conversin, tiene que estar en el modo calculadora cientca, que se selecciona a travs del men

Ver.

tones de radio marcados con las etiquetas Hex (hexadecimal), Dec (decimal), Oct (octal) y Bin (binario), que permiten convertir un nmero a los distintos sistemas de numeracin. Para pasar de decimal a hexadecimal, simplemente hay que escribir el nmero cuando la calculadora se encuentra en el sistema

Tal como se ve en la Figura B.3, el programa Calculadora tiene cuatro bo-

Dec y pulsar el botn Hex para que aparezca en pantalla el nmero convertido
a hexadecimal.

B.2. Tabla de colores

En

HTML

existe una serie de colores predenidos a los que se les ha

asignado un nombre en ingls. La lista de nombres contiene cientos de colores, por lo que aqu solo incluimos el Cuadro B.2 con algunos de ellos, junto con su valor en

RGB.

198

Apndice B. Colores en HTML

Figura B.3: Calculadora en modo cientco

B.2. Tabla de colores

199

Nombre color Valor RGB

aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow white #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFF00 #FFFFFF

Cuadro B.2: Nombres de algunos colores en HTML

Apndice C

Depuracin de errores de JavaScript

Como los lenguajes de script que se emplean en las pginas web son interpretados, la depuracin de errores es difcil (al no existir la fase de compilacin, no se detectan los errores sintcticos o semnticos). En este apndice se explica como se puede depurar el cdigo en cualquier navegador. Adems, se comentan algunas herramientas especcas que poseen los navegadores Microsoft Internet Explorer y Netscape Communicator.

ndice General
C.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . 202 C.2. Depuracin en cualquier navegador . . . . . . . . . 202 C.3. Netscape Communicator . . . . . . . . . . . . . . . . 202
C.3.1. Modicar las preferencias . . . . . . . . . . . . . . . 204 C.3.2. Evaluacin de expresiones con la consola . . . . . . . 207 C.3.3. Netscape JavaScript Debugger . . . . . . . . . . . . 207

C.4. Microsoft Internet Explorer . . . . . . . . . . . . . . 211

201

202

Apndice C. Depuracin de errores de JavaScript

C.1. Introduccin
La depuracin de errores de JavaScript suele estar desactivada en los navegadores, ya que slo es til para aquellos programadores que quieran vericar su cdigo. Vamos a ver como podemos depurar cdigo JavaScript de forma general en cualquier navegador y de forma especca mediante las caractersticas que nos ofrecen Netscape Communicator y Microsoft Internet Explorer.

C.2. Depuracin en cualquier navegador

Se pueden emplear las ventanas de alerta de JavaScript para mostrar la informacin que deseemos durante la ejecucin del cdigo: valor de una variable, situacin del punto de ejecucin del cdigo, etc. Este mtodo tambin permite detener momentneamente la ejecucin del cdigo. Las ventajas que ofrece este sistema son: 1. La informacin que se muestra puede ser tan detallada como nosotros queramos. 2. 3. 4. 5. Su uso no tiene efecto sobre el resto del cdigo. Se pueden emplear tantas ventanas de alerta como se quiera. Se pueden colocar prcticamente en cualquier lugar del cdigo. Funciona con todos los navegadores que soporten cdigo JavaScript . Por ejemplo, si queremos comprobar en un punto del cdigo el valor de una variable, slo hay que incorporar una lnea de cdigo similar a la siguiente:

alert("El valor de la variable v es " + v);

Ejemplo C.1

C.3. Netscape Communicator

En versiones anteriores a la 4.06, cada vez que se produca un error de
JavaScript , se mostraba una ventana de alerta con el error que se haba pro-

ducido. Este sistema era bastante engorroso, ya que si una pgina contena

C.3. Netscape Communicator

203

mltiples errores, se mostraban mltiples ventanas que el usuario tena que cerrar una a una. A partir de la versin 4.06, que incluye JavaScript 1.3, se emplea la consola de JavaScript (Figura C.1). La consola sustituye a todas las ventanas de alerta: cada vez que se encuentra un error, se escribe un mensaje en la consola. La consola almacena todos los mensajes de error que se producen (Figura C.2). Adems, la consola se puede dejar abierta o cerrar y abrir tantas veces como se quiera.

Figura C.1: Consola JavaScript de Netscape Communicator

Por defecto, la consola no se muestra: se encuentra oculta y no hay ninguna opcin en los mens del navegador que permita mostrarla. Si se desea mostrar la consola, existen cuatro posibilidades:

204

Apndice C. Depuracin de errores de JavaScript

1.

Escribir la tecla

javascript: en Enter (Return).

la barra de direcciones del navegador y pulsar

2.

Seleccionar en el men campo

File URL javascript:.

la opcin

Open Page. . .

y escribir en el

3.

Incorporar en el cdigo

HTML de la pgina el siguiente enlace:

Ejemplo C.2

<A HREF="javascript:">Abrir consola JavaScript</A>}.

4.

Modicar las preferencias del navegador para que se muestre automticamente cada vez que se produzca un error. Esta opcin es la mejor para los usuarios que estn desarrollando cdigo JavaScript . La consola JavaScript dispone de dos botones, tal como se ve en la Figura

C.1: El botn

Clear Console

permite borrar todo los mensajes de error

mostrados hasta el momento. El botn

Close cierra la ventana de la consola. URL del chero que contiene el error, el nmero de lnea y un

Para cada error que se encuentra, en la consola JavaScript se muestra un mensaje con la

comentario que describe el tipo de error. En algunos casos, se incluye tambin una parte de la lnea que contiene el error y se marca el punto exacto donde se encuentra.

C.3.1. Modicar las preferencias

Para algunos propsitos, el tener que abrir de forma manual la consola
JavaScript puede ser molesto. Por ejemplo, si estamos desarrollando una pgi-

na, el tener que teclear

javascript:

cada vez que hay un error para abrir la

consola y ver el mensaje de error puede ser tedioso. Se puede especicar que automticamente se abra la consola cuando se produzca un error de JavaScript . Para ello, hay que modicar el chero de preferencias

prefs.js,

que se encuentra en el directorio personal de cada usuario

C.3. Netscape Communicator

205

Figura C.2: Consola JavaScript con mensajes de error

206

Apndice C. Depuracin de errores de JavaScript

de Netscape Communicator. Por defecto, suele ser

Netscape\Users\nombreUsuario.

C:\Archivos de programa\-

Para modicar este chero hay que seguir los siguientes pasos: 1. Asegurarse de que el navegador no est ejecutndose. El navegador puede sobrescribir los cambios que realicemos si se est ejecutando cuando editemos el chero de preferencias. 2. Abrir el chero de preferencias

prefs.js.

El contenido del chero es

similar a (slo se muestran las primeras lneas):

1 2 3 4 5 6 7 8

// Netscape User Preferences // This is a generated file!

Ejemplo C.3
Do not edit.

user_pref("autoupdate.enabled", false); user_pref("browser.bookmark_window_showwindow", 3); user_pref("browser.cache.disk_cache_size", 20480); user_pref("browser.cache.memory_cache_size", 2048); user_pref("browser.download_directory", "D:\\TV\\");

3.

Aadir una de las siguientes lneas al nal del chero: Si se quiere que se abra automticamente la consola cada vez que se produce un error de JavaScript :

user_pref("javascript.console.open_on_error", true);

Ejemplo C.4

Si se quiere que se abra una ventana de alerta cada vez que se produce un error de JavaScript (como el sistema empleado en las versiones anteriores):

user_pref("javascript.classic.error_alerts", true);

Ejemplo C.5

Nota: aunque este sistema gura en la documentacin de Netscape

Communicator, se ha probado en la versin 4.7 y no funciona.

4.

Grabar y cerrar el chero

prefs.js.

C.3. Netscape Communicator

207

C.3.2. Evaluacin de expresiones con la consola

La consola de JavaScript es un ventana compuesta de dos marcos (Figura C.1). El marco inferior contiene un cuadro de texto etiquetado

typein

javascript

en el que se pueden escribir expresiones de una sola lnea. Se puede

emplear este cuadro de texto para asignar valores a variables, realizar operaciones matemticas o vericar el resultado devuelto por los operadores de comparacin. Para evaluar una expresin simplemente hay que escribirla en el cuadro de texto y pulsar la tecla

Enter (Return).

El resultado se muestra en el mar-

co superior. Por ejemplo, al evaluar las siguiente expresiones se obtienen los resultados citados en los comentarios y mostrados en la Figura C.3:

1 2 3 4 5

alert("Hola a todos"); 5-2; Math.sqrt(49); var a=100; var b=45; a-b;

// // // // //

Muestra una ventana de alerta Muestra 3 Muestra 7 Crea dos variables Muestra 55

Ejemplo C.6

C.3.3. Netscape JavaScript Debugger

Existe una posibilidad ms con el navegador de Netscape: Netscape JavaScript Debugger (Figura C.4). Se trata de un

applet

(hecho en Java) que

permite realizar una depuracin avanzada del cdigo JavaScript : visor de objetos ( (

object inspector ), puntos de parada (breakpoints ), visores de variables watches ), ejecucin paso a paso (step running ), visor de la pila de ejecucin (call stack window ), etc.
Esta herramienta se puede descargar en las siguientes direcciones:

http://developer.netscape.com/software/jsdebug.html. http://home.netscape.com/eng/Tools/JSDebugger/relnotes/relnotes11.html.

SmartUpdate. Se accede a ella a travs del men Edit Preferences Advanced SmartUpdate y activar la casilla Enable SmartUpdate
(Figura C.5). El sistema de descarga e instalacin es automtico.

Para poderlo descargar e instalar, es necesario tener activada la opcin

208

Apndice C. Depuracin de errores de JavaScript

Figura C.3: Evaluacin de expresiones

C.3. Netscape Communicator

209

Figura C.4: Netscape JavaScript Debugger

210

Apndice C. Depuracin de errores de JavaScript

Figura C.5: SmartUpdate en Netscape Communicator

C.4. Microsoft Internet Explorer

211

C.4. Microsoft Internet Explorer

En las versiones 5.0 o superiores de este navegador, se muestra automticamente una ventana de alerta (Figura C.6) por cada uno de los errores de JavaScript que se encuentren en una pgina. Estas ventanas de alerta se pueden

desactivar de dos formas:

1.

Mostrar siempre este mensaje cuando una pgina contenga errores en la propia ventana de alerta. La prxima
Desactivando la casilla vez que se localice un error de JavaScript , no se mostrar la ventana de alerta.

2.

Mostrar una noticacin sobre cada error de secuencia de comandos en el men Herramientas Opciones de Internet. . . Avanzadas (Figura C.8). A travs de esta opcin
Desactivando la opcin se puede volver a activar.

Figura C.6: Mensaje de alerta de Microsoft Internet Explorer

212

Apndice C. Depuracin de errores de JavaScript

En cualquier caso (est activado o desactivado), si se encuentra un error, en la barra de estado del navegador se muestra un mensaje (Figura C.7) cuando se localiza un error. Pulsando sobre el icono (tringulo amarillo), se abre la ventana de alerta.

Figura C.7: Mensaje de alerta en la barra de estado de Microsoft Internet Explorer

En la ventana de alerta se muestra un mensaje con informacin sobre el error: lnea, carcter, error, cdigo y sealan el sitio exacto del error.

URL (chero que contiene el error). Estos

mensajes suelen ayudar bastante poco a localizar el error, ya que a veces no Si se tiene instalado algn entorno de programacin de Microsoft, como
Visual Basic o Visual C++, a Microsoft Internet Explorer se incorpora una

opcin de depuracin de secuencia de comandos (cdigo de

script ),

tal como

se ve en la Figura C.8 y Figura C.11. Esta opcin permite depurar el cdigo de

JavaScript mediante el depurador empleado en los entornos de programacin

de Microsoft. El depurador (Figura C.12) permite realizar un depuracin del cdigo mucho ms precisa, ya que incorpora inspeccin de variables, ejecucin paso a paso, puntos de interrupcin, visor de objetos, etc. Para que funcione el depurador, tiene que estar desactivada la opcin

habilitar depuracin de secuencias de comandos en el men mientas Opciones de Internet. . . Avanzadas (Figura C.8).

DesHerra-

Cuando se tiene activada la opcin de depurador de secuencias, las ventanas de alerta cambian a otras que muestran la lnea donde se produce el error, el error producido y la posibilidad de abrir el depurador de secuencias para depurar el cdigo de JavaScript (Figura C.9 y Figura C.10).

C.4. Microsoft Internet Explorer

213

Figura C.8: Opciones de Microsoft Internet Explorer

214

Apndice C. Depuracin de errores de JavaScript

Figura C.9: Mensaje de error en Microsoft Internet Explorer

Figura C.10: Mensaje de error en Microsoft Internet Explorer

Figura C.11: Nuevas opciones de Microsoft Internet Explorer

C.4. Microsoft Internet Explorer

215

Figura C.12: Depurador de Microsoft

Bibliografa
[1] Danny Goodman. timedia, Madrid. [2] Eduardo Parra Murga. nications, Madrid. [3] H. M. Deitel, P. J. Deitel, T. R. Nieto.

Programacin en JavaScript.

Va@Internet, Anaya Mul-

Diccionario de Internet.

PC World, IDG Commu-

to program.

Internet and World Wide Web. How

Osborne

Prentice Hall, New Jersey, 2000.

[4] Jess Bobadilla Sancho. McGraw-Hill, Madrid, 1999. [5] Jos Manuel Alarcn.

Superutilidades para Webmasters.

Programacin en JavaScript (actualizada hasta JavaScript 1.3 y JScript 5). Guas Prcticas, Anaya Multimedia, Madrid. Programacin en JavaScript.
Guas Prcticas, Anaya Multimedia, Madrid, 1998.

[6] Oscar Gonzlez Moreno.

[7] Sergio Ros Aguilar.

Lenguajes HTML, Java y CGI. El diseo de pginas Web para Internet a su alcance. Abeto Editorial, Madrid, 1996.

217

ndice alfabtico
., 112, 120 .htm, 22 .html, 22 /* . . . */, 98 //, 98 <!-- -->, 25, 93, 175 <A>, 48, 73, 83, 179 <ADDRESS>, 177 <APPLET>, 189 <AREA>, 181 <B>, 32, 178 <BASE>, 176 <BASEFONT>, 34, 178 <BIG>, 178 <BLINK>, 178 <BLOCKQUOTE>, 38, 177 <BODY>, 23, 47, 61, 148, 150, 161, 175, 192 <BR>, 25, 191 <CAPTION>, 182 <CENTER>, 191 <CITE>, 32, 178 <CODE>, 32, 178 <DD>, 41, 178 <DFN>, 32 <DIR>, 177 <DIV>, 177 <DL>, 41, 177 <DT>, 41, 178 219 <EM>, 32, 178 <EMBED>, 190 <FONT>, 32, 47, 179 <FORM>, 63, 148, 183 <FRAME>, 72, 161, 186 <FRAMESET>, 70, 72, 161, 186 <H1>, 30, 177 <H2>, 30, 177 <H3>, 30, 177 <H4>, 30, 177 <H5>, 30, 177 <H6>, 30, 177 <HEAD>, 23, 150, 175 <HR>, 191 <HTML>, 23, 175 <I>, 32, 179 <ILAYER>, 188 <IMG>, 60, 180 <INPUT>, 63, 82, 183, 184 <ISINDEX>, 176, 186 <KBD>, 32, 179 <KEYGEN>, 186 <LAYER>, 187 <LI>, 42, 45, 178 <LINK>, 176 <MAP>, 181 <MENU>, 178 <META>, 24, 27, 176 <MULTICOL>, 191

220

ndice alfabtico

<NOBR>, 191 <NOEMBED>, 190 <NOFRAMES>, 73, 187 <NOLAYER>, 188 <NOSCRIPT>, 189 <OBJECT>, 190 <OL>, 42, 178 <OPTION>, 63, 67, 185 <P>, 36, 177 <PARAM>, 190 <PLAINTEXT>, 179 <PRE>, 53, 177 <S>, 32, 179 <SCRIPT>, 24, 81, 93, 176, 189 <SELECT>, 63, 67, 185 <SERVER>, 189 <SMALL>, 179 <SPACER>, 191 <SPAN>, 192 <STRIKE>, 32, 179 <STRONG>, 32, 179 <STYLE>, 24, 176 <SUB>, 179 <SUP>, 179 <TABLE>, 53, 57, 181 <TD>, 55, 57, 182 <TEXTAREA>, 63, 69, 185 <TH>, 55, 57, 182 <TITLE>, 24, 150, 176 <TR>, 55, 57, 182 <TT>, 32, 179 <U>, 32, 179 <UL>, 45, 178 <VAR>, 32, 179 <WBR>, 192 <XMP>, 177 =, 23

&nbsp;, 25 abs, 128 acos, 129 Active Server Pages, ActiveX, 17, 81 Adobe Golive, 21 alineamiento del texto, 36 American Standard Code for Information Interchange, ASCII applets, 20, 91, 148, 189 arrays asociativos, 120 ASCII, xv, 21, 25, 26, 101 asin, 129 ASP, xv, 10, 14, 19, 89, 94, 132 atan, 129 atributo, 23 Bloc de notas, 21, 90 break, 107, 111 C, xv, 80, 96, 97 C++, 80, 96 cdigos pareados, 22 Calculadora, 197 ceil, 129 CGI, xv, 9, 10, 19, 89, 132 charAt, 124 Claris Home Page, 21 Client-side JavaScript, 89 ColdFusion, 10 colores, 47, 193 comentario en HTML, 25, 93, 175 comentario en JavaScript, 98 Common Gateway Interface, CGI Compuserve, xvi

vase

ASP

vase

vase

ndice alfabtico

221

concat, 124 consola de JavaScript, 203 continue, 112 controles de un formulario, 63 Core JavaScript, 88 cos, 129 default, 107 delete, 123 depuracin de errores, 202 DHTML, xv, 17, 20, 81, 90, 187 DLL, xvi, 9, 10 do . . . while, 108, 109 document, 148 Document Object Model, DOS, 22 Dynamic HTML,

for(. . . in . . . ), 112, 120 formatos fsicos, 32 formatos lgicos, 32 formularios, 61 funciones constructoras, 121 function, 114 GIF, xvi, 58, 59 Graphics Interchange Format, GIF gua de estilo, 75 hiperenlaces, 48 history, 148, 157

vase

vase DOM

HTML, xvi, 811, 13, 1719, 2126, 28, 29, 32, 36, 41, 47, 48, 53, 55, 57, 58, 60, 61, 63, 64, 76, 78, 8082, 90, 91, 93, 94, 99, 146, 148150, 163, 174, 175, 180, 189, 194, 197, 204 HTTP, xvi, 8, 9, 13, 18, 27, 160 HyperText Markup Language,

DOM, xvi, 81, 89, 132, 146

vase

Dynamic Link Library, E, 128 ECMA, xvi, 93, 94 ECMAScript, 93 enlaces, 48 escape, 119

vase

DHTML DLL

se

va-

HTML

HyperText Transfer Protocol,

vase

European Computer Manufacturers Association, eval, 116 exp, 130 Extensible HyperText Markup Language, XML extranet, 12 Flash, 9 oor, 130 for, 108

vase

HTTP if . . . else, 105 imgenes, 58 indexOf, 125 inicializadores de objetos, 121 International Organization for Standards, Internet, 11 internet, 12 Internet Information Server, 9 Internet Server Application Program Interface,

ECMA

vase

XHTML

Extensible Markup Language,

vase

vase

ISO

vase

ISAPI

222

ndice alfabtico

intranet, 12 ISAPI, xvii, 9, 10 isFinite, 117 isNaN, 117 ISO, xvii, 94, 119 Jasc Paint Shop Pro, 194 Java, xvii, 9, 14, 17, 80, 81, 8991, 96, 160, 189, 207 Java Server Pages,

LN2, 128 location, 148, 157 log, 130 LOG10E, 128 LOG2E, 128 Macromedia DreamWeaver, 21 Macromedia Inc., 9 marcos, 70 JSP Math, 128 max, 130 metadatos, 27 Microsoft, xvii, 9, 80, 94, 170, 194, 197, 212 Microsoft FrontPage, 21 Microsoft Internet Explorer, xvii, 28, 59, 80, 82, 89, 90, 95, 96, 202, 212 Microsoft Internet Information Server, xvii Microsoft Paint, 194 Microsoft Windows, xvi, 9, 21, 22, 90, 194 Microsoft Windows 3.x, 22 MIME, xvii, 148, 160 min, 130 Multipurpose Internet Mail Extensions, NaN, 117, 118 navigator, 148, 160 Netscape, 80, 88, 93, 170, 207 Netscape Communications Corporation, 88 Netscape Communicator, xvii, 29, 30, 59, 80, 82, 89, 90, 95, 96, 146, 177, 202, 206 Netscape Enterprise Server, 89

vase

JavaScript, 9, 14, 17, 20, 21, 7982, 84, 8899, 104, 105, 108, 116, 120, 121, 123, 124, 128, 132, 146, 154, 176, 189, 202204, 206, 207, 211, 212 JavaScript 2.0, 91 JavaScript's LiveConnect, 89 JavaScript1.1, 81 JavaScript1.2, 81 JavaScript1.3, 81 javascript:, 84, 204 joe, 90 Joint Photographic Experts Group,

vase

JPEG

JPEG, xvii, 59 JPG,

vase

JPEG

JScript, 80, 94, 95 JSP, xvii, 10, 89 lastIndexOf, 125 Linux, 90 listas, 41 listas de denicin, 41 listas no ordenadas, 45 listas numeradas, 42 listas ordenadas, 42 LiveScript, 88 LN10, 128

vase

MIME

ndice alfabtico

223

Netscape JavaScript Debugger, 207 Netscape Navigator, 28, 88, 91, 163, 174 new, 121 Number, 118 operadores, 103 orden etiquetas, 24 palabras reservadas, 104 parseFloat, 117 parseInt, 117 Perl, xv, 79 PHP, 10 PI, 128 plug-in, 9, 19, 148, 149, 160, 189 PNG, xvii, 18, 59 Portable Network Graphics, PNG pow, 131 random, 131 Red Green Blue,

Server-side JavaScript, 89 servlets, 10 SGML, xviii, 17, 18 sin, 129 slice, 127 split, 127 sqrt, 132 SQRT1_2, 128 SQRT2, 128 Standard Generalized Markup Language, String, 118 Sun Microsystems, xvii, 80, 88 switch, 105, 106 tablas, 53 tablas como marcos, 58 tablas invisibles, 57 tan, 129 TCP/IP, xviii, 8, 12, 13 this, 121, 122

vase

SGML

vase

vase

RGB

Transmission Control Protocol/Internet Protocol, unescape, 119 Universal Resource Locator, URL Unix, 9, 22 URL, xviii, 10, 24, 25, 63, 72, 83,

repeticin con condicin nal, 110 repeticin con condicin inicial, 109 repeticin con contador, 108 replace, 126 Request for Comments, return, 116 Rexx, 79 RFC, xvii, 27 RGB, xviii, 47, 193, 194, 197 round, 131 secuencia de escape, 26 seleccin mltiple, 106 seleccin simple, 105 sensible a minsculas/maysculas, 96, 154

vase TCP/IP vase

vase

RFC

84, 148150, 157, 158, 163, 166, 204, 212 validacin alfabtica, 134 validacin campo nulo, 132 validacin de formularios, 132 validacin numrica, 137 var, 98 VBScript, xv, 9, 79, 80, 84

224

ndice alfabtico

Visual Basic, 80, 212 Visual C++, 212 W3C, xviii, 18, 28, 146 while, 108, 110 window, 148, 161 with, 112, 113, 120 World Wide Web,

vase

WWW

World Wide Web Consortium,

se

va-

W3C

WWW, xviii, 17, 18 XHTML, xviii, 18, 19, 28 XML, xix, 18, 19, 28