Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
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
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,
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.
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7
8 8 9 10 11 11
vi
ndice general
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 . . . . . . . . . . . . . . . . .
Metadatos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . Formato del texto . . . . . . . . . . . . . . . . . . . . . . . . . . 3.8.1. 3.8.2. 3.8.3. 3.8.4. Encabezados de secciones . . . . . . . . . . . . . . . . .
3.9.
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.14. Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ndice general
vii
. . . . . . . . . . . . . . . .
63 67 67 67 67 69 70 75 76 76 76 76 77 77 77 77 78 78
. . . . . . . . . . . . . . . . . . . . . . .
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.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 ECMA
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
viii
ndice general
98 100 102 103 105 105 105 108 112 114 114 116 120 121 122 123 123 128 132 133 135 138
Palabras reservadas . . . . . . . . . . . . . . . . . . . . .
De manipulacin de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4.
5.5.
Eliminacin de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
145
146 146 148 152 157 157 160 161 170
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
201
202 202 202 204 207 207 211
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.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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
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,
ASCII
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
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.
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
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-
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.
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
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
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 %.
RFC 1522.
GIF por PNG debido a que el primero emplea un algoritmo que est PNG es totalmente gratuito. Tanto Microsoft
RFC recibe un n-
xviii
ndice de acrnimos
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 (
ISO en 1986.
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.
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.
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
SGML. Diseado especcamenWWW por W3C. Permite que un usuario disee sus propias
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
5 5
Captulo 1.
Arquitecturas cliente/servidor
1.1. Introduccin
Cliente/servidor es una arquitectura de red proceso en la red es
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:
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
Lgica de negocio (o aplicacin). Los ujos de trabajo pueden cambiarse segn las necesidades existentes de un procesador a otro.
Lgica de datos.
momento.
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.
Captulo 1.
Arquitecturas cliente/servidor
front-end )
que
back-end )
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.
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
ndice General
2.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . .
2.1.1. El cliente . . . . . . . . . . . . . . . . . . . . . . . . 2.1.2. El servidor . . . . . . . . . . . . . . . . . . . . . . .
8
8 9
Captulo 2.
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 )
los empleados en Internet. Estos protocolos permiten la conexin de sistemas heterogneos, lo que facilita el intercambio de informacin entre distintos ordenadores.
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
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),
2.1. Introduccin
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
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.
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
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
estndar que
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).
pone a disposicin de los programadores de aplicaciones web. Con los programadores pueden crear
ISAPI,
con funciones
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.
media Inc.
10
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-
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.
La ejecucin de un programa
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
(estn ms in-
tegrados), su ejecucin es ms rpida, con lo que se logra que las aplicaciones basadas en en
CGI.
Adems de
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
Universal
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.
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
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
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,
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 (
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 (
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
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 (
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,
14
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
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.
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
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
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
gas, desde las pginas ms sencillas que slo usan el lenguaje las ms complejas que usan
El lenguaje HTML se basa en Standard Generalized Markup Language SGML), un sistema mucho ms completo y complicado de procesamiento de
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.
HTML
va ligado al de la
Los orgenes de ambos se sitan en 1991, en los trabajos que llevaba a cabo Tim Berners-Lee y sus compaeros en el CERN
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
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.
convierte en el primer
host
europeo de
W3C
W3C.
es encabezar el desarrollo de la
WWW,
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
XHTML)
En
enero
de
2000
aparece
HTML.
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
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.
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 .
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.
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
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
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
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.
Interchange (ASCII)),
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
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:
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.
22
Captulo 3. HTML
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 ).
mayora de las etiquetas aparecen por parejas (cdigos pareados), siendo una de
HTML
<IMG>
Todas las etiquetas comienzan con el smbolo con el smbolo son. En el lenguaje las cadenas
>
<
<HR>
<HR
<HR<
no lo
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
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.
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
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).
... </BODY>).
...
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
HTML
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.
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
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
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>,
HTML de
<TITLE>
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 ),
URL).
ser
En el
25
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>.
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
ASCII
de la parte superior de la
HTML
referencias a entidades.
26
Captulo 3. HTML
Á
&#nnn;
donde
nnn
es el cdigo
representa el carcter
ASCII
&aaaa;
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
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.
3.6. Metadatos
27
3.6. Metadatos
La etiqueta
Permite incorporar informacin sobre el contenido de una pgina. Esta etiqueta slo puede aparecer en la seccin
de bsqueda, los navegadores y las herramientas de diseo de pginas web. La etiqueta es:
<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
HTTP:
CONTENT especica su valor. Por ejem<META> indican el autor, una descripcin, una
Ejemplo 3.3
NAME
indica el nombre de la
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,
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
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):
<BODY>.
<HTML>, <HEAD>
29
<STYLE>
<LINK>.
y
<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
<MAP>.
<TH>.
formularios:
<TEXTAREA>, <KEYGEN>
Etiquetas de marcos:
<FRAME>,<FRAMESET>
<NOFRAMES>.
y
<LAYER>, <ILAYER>
y
<NOLAYER>.
<SCRIPT>, <NOSCRIPT>
<SERVER>.
<OBJECT>.
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.
una relacin con todas las etiquetas que acepta Netscape Communicator 4.0.
30
Captulo 3. HTML
<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:
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
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
12
JUSTIFY.
31
32
Captulo 3. HTML
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
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: <B></B><BR> <I>Texto en cursiva: <I></I><BR> <U>Texto subrayado: <U></U><BR> <TT>Texto en teletipo (fuente fija): <TT></TT><BR> <STRIKE>Texto tachado: <STRIKE></STRIKE><BR> <S>Tambin funciona <S></S><BR> <BR> Formatos lgicos:<BR> <CITE>Cita: <CITE></CITE><BR> <CODE>Cdigo: <CODE></CODE><BR> <DFN>Definicin: <DFN></DFN><BR> <EM>Enfatizado: <EM></EM><BR> <KBD>Texto tecleado: <KBD></KBD><BR> <STRONG>Texto grueso: <STRONG></STRONG><BR> <VAR>Texto variable: <VAR></VAR><BR> </BODY> </HTML>
<FONT> ...
33
34
Captulo 3. HTML
</FONT>
queta.
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
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
<BASEFONT SIZE="numero">.
35
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>
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-
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
37
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>
</BLOCKQUOTE>.
<BLOCKQUOTE> ...
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
39
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>
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.
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
<DD>
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
<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;
3.9. Listas
43
El atributo
TYPE
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
3.9. Listas
45
</UL> (unordered list ) dene una con la etiqueta <LI> (list item ).
bullet.
La etiqueta
<UL> ...
TYPE,
grco empleado para marcar los elementos. Los posibles valores que puede
CIRCLE: DISC:
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
3.10. Colores
47
3.10. Colores
En
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.
#FFFFFF
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.
BGCOLOR
de la etiqueta
posee el atributo
COLOR
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
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
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 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.
</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
HTML
<A> ...
el salto al destino del enlace). Normalmente suele utilizarse texto e imgenes como hiperenlaces.
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
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
50
Captulo 3. HTML
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
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
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
Ejemplo 3.19
52
Captulo 3. HTML
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>.
54
Captulo 3. HTML
3.12. Tablas
55
Una tabla se compone de celdillas de datos. Una celdilla se dene usando los cdigos
</TR>.
lumnas, y se denen con los cdigos
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.
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
3.12. Tablas
57
<TABLE>
son:
BGCOLOR="color".
CELLSPACING="n".
tanto por ciento en relacin a la altura total disponible. Ancho de la tabla. Se puede indicar en pixels o en
<TR>, <TH>
<TD>
son:
Alineamiento
horizontal
del
BGCOLOR="color".
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
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
HTML era
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
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
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
Compresin de la informacin en la que todos los datos iniciales se almacenan, por lo que
60
Captulo 3. HTML
<IMG>.
son:
SRC="localizacin".
que se quiere insertar.
BORDER="anchura".
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".
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 .
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
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">
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
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
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
Ejemplo 3.24
NAME
<FORM>
posteriormente),
ACTION
indica la direccin (
grama que procesa los datos del formulario en el servidor y servidor (GET o
indi-
POST17 ).
Lnea 2: En esta seccin se incluyen los controles que posee el formulario. Lnea 3: Fin del formulario.
TYPE="IMAGE">.
17
Normalmente se utiliza Si se utiliza
<INPUT
GET,
POST, que indica que los datos se enven por la entrada estndar.
URL.
64
Captulo 3. HTML
Campos de vericacin:
<INPUT TYPE="TEXT">.
18 (password ):
<INPUT TYPE="PASSWORD">.
Envo de cheros:
</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.
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
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
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
3.14. Formularios
67
TYPE="CHECKBOX">)
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
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
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.
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
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
en una y la tecla
Mays ()
primera y la ltima).
3.14. Formularios
69
26 27 28 29 30
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
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 )
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
3.15. Marcos
71
72
Captulo 3. HTML
<FRAME> que denen cada uno de los marcos. Los principales atributos de esta
etiqueta son:
BORDER="anchura".
plano.
FRAMEBORDER="YES" | "NO".
COLS="listaAnchurasColumnas".
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:
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
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-
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
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
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
75
4 5 6 7 8
76
Captulo 3. HTML
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.
Tahoma
Verdana)
sans-serif
(como
Arial, Helvetica,
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.
77
78
Captulo 3. HTML
1 2
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
haga click
porque la
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
batch ):
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
script
nas web: JavaScript , VBScript , Perl , Rexx , etc. Sin embargo, algunos slo se 79
80
Captulo 4.
Lenguajes de script
script
VBScript .
script
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
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:
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).
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
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
que veremos en el
script
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
scripts
script
<SCRIPT> ... </SCRIPT>. Esta etiqueta permite indirectamente en la pgina o que apunte a un chero
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.
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
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
HTML
que soportan
<BODY>
cdigo
script
<A>)
scripts.
Exis-
pertenecientes al lenguaje
HTML
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
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-
LANGUAGE,
JavaScript.
nimiento es ms difcil y su ejecucin es ms lenta, ya que se tiene que activar un intrprete distinto para cada lenguaje.
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
URL. Esto permite que el script se ejecute cuando el usuario pulsa sobre
en 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>
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
85
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.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.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-
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
String,
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
break,
DOM.
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.
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
onClick
submit ) submit )
onSubmit
en el formulario.
Otra de las aplicaciones de JavaScript consiste en proporcionar dinamismo a las pginas efectos sorprendentes.
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
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.
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
bytecodes
5.1. Introduccin
91
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-
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.
applets
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
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
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
European Com-
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
cicacin de
compatible con
5.1.6. JScript
JScript es otro lenguaje de
(dentro de pginas
script
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
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.
1 2 3 4 5 6 7 8
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;
1.
Ninguno.
5.2. El lenguaje
5.2.1. Caractersticas bsicas
va . Si se conoce alguno de estos lenguajes, aprender JavaScript resulta muy
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
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.
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:
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
Ejemplo 5.4
computer language ).
block-structured
cias que lo componen mediante las llaves ({ y sentencias forman un bloque de cdigo:
}).
1 2 3 4 5
Ejemplo 5.5
document.write("Una sentencia "); document.write("en un "); document.write("bloque de cdigo");
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
var.
Al
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.
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
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.
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,
taxis, tiene que haber algn mtodo de distinguir las cadenas de JavaScript de las cadenas de
provincia = "Alicante";.
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:
nmeros enteros, pero aaden una parte decimal que se representa con un punto (.) seguido de tantas cifras como compongan la parte de-
10000000000000.1;.
100
Captulo 5. JavaScript
Nulo.
1 2 3 4 5
Ejemplo 5.9
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.
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
{ }
function fun() { var c = "Maria"; document.write("fun1-a- " + a + "<BR>"); document.write("fun1-b- " + b + "<BR>"); fun2(); document.write("fun1-c- " + c + "<BR>");
1 2 3 4 5
fun1-afun1-bfun2-cfun1-c-c- Ana
Ejemplo 5.11
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
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>
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 . []
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
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
contrario se ejecuta
sen2.
sen1
se ejecuta si
condicion
es cierta; en caso
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
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
(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.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14
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
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:
while.
for
La sintaxis de la repeticin con contador es la siguiente:
1 2 3 4
Ejemplo 5.17
for
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
se ejecuta y el ujo de
5.3. Sentencias
109
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
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
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
Ejemplo 5.24
continue se usa para pasar a la siguiente iteracin en un bucle (for, do ... while, while).
La sentencia
with.
for(... in ...)
for(. . . in . . . )
La sintaxis de esta sentencia es:
1 2 3 4
Ejemplo 5.25
objeto.
variable recorra todas las propiedades de sentencias. Para objeto se emplea el operador punto (.).
Ejemplo 5.26
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
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.
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
1 2 3 4
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
eval
Evala una expresin que contiene cdigo de JavaScript . La sintaxis es
eval(expr),
donde
expr
Si la cadena representa una expresin, se evala; si representa una o ms sentencias, se ejecutan. No hace falta llama a
eval
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
parseFloat
es
parseFloat(cad),
cad
es la cadena
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
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
no un nmero).
Number y String
Las funciones
Number
donde
String
String(objRef),
objRef
Number(objRef)
Date
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
ISO
Latin-1. La funcin
unescape
y
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.
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
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
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 .
fuera un array. Cada ndice de acceso es una cadena que representa una pro-
1 2
Ejemplo 5.36
5.5. Objetos
121
Inicializadores de objetos
La sintaxis de este mtodo es:
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
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
this
Pagina. Persona.
Persona
y dos
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);
this.
objetos poseen un mtodo llamado
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
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();
true
si el borrado es correcto y
false
delete.
en caso contrario.
String:
No se debe confundir una cadena literal con un objeto el siguiente cdigo crea la cadena literal
s1
y el objeto
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
String
String
minando el objeto
String.length
String
gitud) que posee la cadena. A continuacin mostramos los principales mtodos que posee el objeto
split.
charAt(indice)
Devuelve el carcter especicado por
1 2 3 4 5
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>");
1 2 3
Ejemplo 5.43
1 2 3 4 5
= = = =
Ejemplo 5.44
125
6 7
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");
Ejemplo 5.47
lastIndexOf(valorBuscado [, inicio])
Similar a la funcin
inicio
indexOf,
126
Captulo 5. JavaScript
1 2 3 4 5 6 7
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>");
1 2
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
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
1 2
Ejemplo 5.51
127
slice(inicio [, n])
Extrae un trozo de una cadena desde
fin,
1 2 3 4 5 6 7
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
Ejemplo 5.53
split(separador [, limite])
Divide una cadena en funcin del se almacena en un array. El valor de
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
Ejemplo 5.55
128
Captulo 5. JavaScript
3 4 5 6
2: 3: 4: 5:
Math
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
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
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
129
1 2 3 4
1 2 3 4
3.5 2 .5 4
Ejemplo 5.57
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
1 2 3
Ejemplo 5.59
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
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
Ejemplo 5.63
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
1 2 3
Ejemplo 5.65
random
Produce un nmero pseudoaleatorio entre 0 y 1. Ejemplo:
1 2
Ejemplo 5.66
1 2
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
Ejemplo 5.69
sqrt
Devuelve la raz cuadrada de un nmero.
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,
compruebaVacio
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.
133
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;
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>
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;
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);
138
Captulo 5. JavaScript
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
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
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;
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
} </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);
143
Captulo 6
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
145
146
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
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
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,
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
basadas en el documento
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
y se accede como
document.form1.
window,
navigator.appName
1
navigator.appName
window.-
Cuando se quiera acceder a un objeto de otra ventana, habr que indicar la ventana.
147
148
las sentencias
history: contiene una serie de propiedades que representan las URLs que
el cliente ha visitado previamente (contiene el historial de navegacin).
location:
URL actual.
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 (
Dependiendo del contenido de la pgina, el documento puede poseer otra serie de objetos. Por ejemplo, un formulario (denido mediante la etiqueta
form
en la jerarqua de objetos.
ALINK
de la etiqueta
BODY.
Array que contiene una entrada para cada ancla del documento.
applet
en el documento.
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.
plug-in
del documento.
Atributo
TEXT
de la etiqueta
BODY.
Array que contiene una entrada para cada imagen del documento.
lastModied layers
layer ) en el documento.
linkColor links
Atributo
LINK
de la etiqueta
BODY.
plugins referrer
plug-in
en el documento.
Especica la
150
tags Crea un objeto Style que permite especicar los estilos de las etiquetas HTML. title
Contenido de la etiqueta
TITLE
de la seccin
HEAD.
VLINK
de la etiqueta
BODY.
Mtodos captureEvents
tipo especicado.
close
write
writeln.
releaseEvents
especicado.
151
Eventos onClick
onKeyUp
onMouseDown onMouseUp
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
18 19 20 21 22
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
window2 ,
153
154
objeto
document,
1 2 3
Ejemplo 6.3
nombre
1
value)
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.
Campos de vericacin
Los campos de vericacin poseen las siguiente propiedades:
checked
leccionado.
defaultChecked value
3
forms,
un formulario.
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
value
formulario se enva.
defaultChecked
leccionado.
value
formulario se enva.
defaultValue value
lario se enva.
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
option)
de la lista.
selectedIndex
Adems, si se quiere obtener el texto y el valor asociado a una opcin, se tienen que emplear las propiedades del objeto
option:
selected
157
text value
Especica la
previous
Especica la
Carga la
URL indicada en el historial. URL completa asociada a un objeto window. Cada una de URL. Se accede
location
de un objeto
window.
protocol://host:port/pathname#hash?search
158
URL.
hostname href
Especica la parte
host:port
de la
URL.
Especica la
pathname port
Especica la ruta de la
protocol search
Especica el protocolo de la
URL. URL.
navegacin.
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
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>");
160
plug-ins
instalados.
Especica la cabecera
HTTP user-agent.
plugins.refresh preference
plug-ins .
Permite a un
savePreferences taintEnabled
Especica si
data tainting
est activo.
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
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
163
HTML al usuario.
Array que permite acceder a los marcos que posee una ventana.
de la ventana.
innerHeight
tana.
innerWidth
ventana.
length location
Nmero de marcos (
frames ) de la ventana.
Informacin sobre la
URL actual.
oscreenBuering
en un buer.
164
opener
open.
outerHeight outerWidth
tana.
pageXOset
en la ventana.
pageYOset
en la ventana.
parent
status
165
codicacin
base-64.
base-64.
captureEvents clearInterval
mtodo
Cancela un temporizador (
setInterval.
clearTimeout
el mtodo
Cancela un temporizador (
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.
166
disableExternalCapture
por el mtodo
enableExternalCapture.
Permite que una ventana con marcos capture los
especicada.
forward
Carga la siguiente
handleEvent home
Navega a la
la pgina inicial (
home ).
la pantalla indicada.
prompt
y un campo de entrada.
releaseEvents
turados del tipo indicado, enviando el evento a los siguientes objetos en la jerarqua de eventos.
resizeBy
cantidad indicada.
167
resizeTo
normal.
routeEvent scroll
Realiza un
scroll
scrollBy scrollTo
das.
Realiza un
scroll scroll
Realiza un
setHotKeys
men.
hot keys
Evala una expresin o llama a una funcin cada vez que trans-
Eventos onBlur
onDragDrop
del navegador.
onError
un error.
168
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) {
169
Figura 6.5: Interaccin entre varias ventanas a travs del objeto window
170
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>
171
Apndice A
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
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
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
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.
175
Comentario -->. Se puede emplear para anular una seccin de una pgina, de
seccin de la pgina.
forma que no se visualice en el navegador, pero sin tener que eliminar dicha
HTML.
Etiqueta ms externa:
<HTML> ... </HTML>. <HEAD> ... </HEAD>. <BODY> ... </BODY>. Atri-
BACKGROUND="URL". BGCOLOR="color". TEXT="color". LINK="color". ALINK="color". VLINK="color". ONLOAD="cdigoScript". ONUNLOAD="cdigoScript". ONBLUR="cdigoScript". ONFOCUS="cdigoScript".
176
<HEAD>
</HEAD>.
<BASE>.
HREF="URL". TARGET="nombreVentana".
Informacin metadocumental:
<META>.
Atributos:
Atributo:
TYPE="tipoEstilo".
Enlace a cheros externos:
<LINK>.
Atributos:
<ISINDEX>.
Atributo:
PROMPT="texto".
Cdigo JavaScript en el cliente :
Atributos:
LANGUAGE="nombreLenguajeScript". SRC="URL".
1 2
Tambin puede emplearse en el cuerpo. Tambin puede emplearse en el cuerpo.
177
<H1> ... </H1>, <H2> ... </H2>, <H3> ... </H3>, <H4> ... </H4>, <H5> ... </H5> y <H6> ... </H6>. AtriEncabezamientos predenidos: buto:
Atributo:
Atributos:
COLS="columnas". WRAP.
Secuencia literal de caracteres (desactiva intrprete):
COMPACT.
3
En la documentacin de Netscape Communicator no gura el valor
JUSTIFY.
178
Trmino de denicin:
Descripcin de denicin:
Atributo:
Atributos:
SIZE="nmero".
Tamao de letra mayor: Parpadeante: Cita:
Cdigo:
Enfatizado:
179
Atributos:
Texto de teclado:
Muestra el resto del documento tal cual: Tipo de letra menor: Tachado:
Superndice:
denir las anclas (lugares a donde se puede crear un enlace) como los enlaces. Ancla:
Atributo:
NAME="nombreAncla".
Enlace:
Atributos:
180
<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".
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:
Atributo:
NAME="nombreMapa".
Atributos:
ALIGN="LEFT" | "CENTER" | "RIGHT". BGCOLOR="color". BORDER="anchuraBorde". CELLPADDING="valor". CELLSPACING="valor". HEIGHT="altura". WIDTH="anchura". COLS="numeroDeColumnas". HSPACE="margenHorizontal". VSPACE="margenVertical".
182
Ttulo de la tabla:
Atributo:
ALIGN="BOTTOM" | "TOP".
Fila de la tabla:
Atributos:
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:
Atributos:
ALIGN="LEFT" | "CENTER" | "RIGHT". VALIGN="BASELINE" | "BOTTOM" | "MIDDLE" | "TOP". BGCOLOR="color". COLSPAN="valor". ROWSPAN="valor". HEIGHT="altura". WIDTH="anchura". NOWRAP.
183
Atributos:
<INPUT TYPE="BUTTON">.
Atributos:
<INPUT TYPE="CHECKBOX">.
Atributos:
<INPUT TYPE="FILE">.
Atributos:
NAME="nombre". VALUE="nombreFichero".
Elemento oculto:
<INPUT TYPE="HIDDEN">.
Atributos:
NAME="nombre". VALUE="valor".
184
<INPUT TYPE="IMAGE">.
Atributos:
NAME="nombre". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". SRC="URL".
Contrasea:
<INPUT TYPE="PASSWORD">.
Atributos:
<INPUT TYPE="RADIO">.
Atributos:
<INPUT TYPE="RESET">.
Atributos:
<INPUT TYPE="SUBMIT">.
Atributos:
NAME="nombre". VALUE="etiqueta".
Lnea de texto:
<INPUT TYPE="TEXT">.
Atributos:
NAME="nombre".
185
Atributos:
Atributos:
VALUE="valor". SELECTED.
rea de texto:
Atributos:
NAME="nombre". COLS="columnas". ROWS="filas". WRAP="OFF" | "HARD" | "SOFT". ONBLUR="cdigoScript". ONCHANGE="cdigoScript". ONFOCUS="cdigoScript". ONSELECT="cdigoScript".
186
Generador de clave:
<KEYGEN>.
Atributos:
NAME="nombre". CHALLENGE="desafo".
Elemento de bsqueda :
<ISINDEX>.
Atributo:
PROMPT="texto".
<FRAME>.
Atributos:
BORDERCOLOR="color". FRAMEBORDER="YES" | "NO". MARGINHEIGHT="alturaMargen". MARGINWIDTH="anchuraMargen". NAME="nombreMarco". NORESIZE. SCROLLING="YES" | "NO" | "AUTO". SRC="URL".
Conjunto de marcos:
Atributos:
187
DHTML.
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
ONMOUSEOVER="cdigoScript". ONMOUSEOUT="cdigoScript".
Capa posicionada de forma relativa: tos:
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:
189
HTML.
Atributos:
LANGUAGE="nombreLenguajeScript". SRC="localizacionURL".
Texto alternativo al cdigo JavaScript : Cdigo en el servidor:
plug-ins .
applets
Applet
Java:
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
Parmetro para un
NAME="nombre". VALUE="valor".
Plug-in
incrustado:
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:
<OBJECT>.
Atributos:
CLASSID="ficheroClase". DATA="URL". CODEBASE="directorioFicheroClase". TYPE="tipoMIME". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM".
191
<BR>.
Atributo:
Lnea horizontal:
Atributos:
<SPACER>.
TYPE="HORIZONTAL" | "VERTICAL" | "BLOCK". ALIGN="LEFT" | "RIGHT" | "TOP" | "ABSMIDDLE" | "ABSBOTTOM" | "TEXTTOP" | "MIDDLE" | "BASELINE" | "BOTTOM". HEIGHT="altura". WIDTH="anchura".
192
SIZE="tamao".
Intervalo de contenido: Posible salto de lnea:
<WBR>.
CLASS="claseEstilo".
LANG="ISO". ID="nombreLugarOEstilo".
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
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
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
nen que expresar en hexadecimal. Como este sistema de numeracin es un poco engorroso, a continuacin mostramos como se pueden convertir las componentes
Microsoft Windows.
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
cada casilla varan desde 0 hasta 255). Una vez que se tienen las componentes del color deseado, el siguiente paso es convertirlas a hexadecimal.
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
195
196
197
241
en decimal equivale a
15,
que equivale a
F.
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
Dec y pulsar el botn Hex para que aparezca en pantalla el nmero convertido
a hexadecimal.
HTML
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
199
Apndice C
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
201
202
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.
Ejemplo C.1
ducido. Este sistema era bastante engorroso, ya que si una pgina contena
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.
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
1.
Escribir la tecla
2.
la opcin
Open Page. . .
y escribir en el
3.
Incorporar en el cdigo
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
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.
javascript:
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,
205
206
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.
1 2 3 4 5 6 7 8
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
4.
prefs.js.
207
typein
javascript
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).
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
// // // // //
Muestra una ventana de alerta Muestra 3 Muestra 7 Crea dos variables Muestra 55
Ejemplo C.6
applet
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.
208
209
210
211
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.
212
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.
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.
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
script ),
tal como
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).
213
214
215
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.
Diccionario de Internet.
to program.
[4] Jess Bobadilla Sancho. McGraw-Hill, Madrid, 1999. [5] Jos Manuel Alarcn.
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.
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
, 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,
vase
Dynamic Link Library, E, 128 ECMA, xvi, 93, 94 ECMAScript, 93 enlaces, 48 escape, 119
vase
DHTML DLL
se
va-
HTML
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
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
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
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
se
va-
W3C
WWW, xviii, 17, 18 XHTML, xviii, 18, 19, 28 XML, xix, 18, 19, 28