programacion en internet clientes web sergio lujan

Internet ha revolucionado el mundoinformático y, porque no, toda lasociedad en pocos años.Evidentemente, la programación depáginas web también haevolucionado en los últimos años:se ha pasado de páginas sencillas,con pocas imágenes y que ofrecíancontenidos estáticos a páginascomplejas, con abundancia deimágenes y otros elementosmultimedia y que ofrecencontenidos dinámicos adaptados acada usuario individual. Las páginasweb han pasado a convertirse en

verdaderas aplicaciones web.La programación de las aplicacionesweb se encuadra dentro de lasarquitecturas cliente/servidor. Poruna parte, tenemos el cliente web(el navegador) que solicitaservicios. Por otro lado, el servidorweb que ofrece servicios y respondea las peticiones de los clientes.Este libro contempla laprogramación de la parte cliente delas aplicaciones web. En el "mundoInternet" existen muchastecnologías que se pueden emplearpara programar los clientes web,como ActiveX, applet, Flash, VRML,

etc., pero sólo dos son las másextendidas y se pueden considerar"el estándar": HTML y JavaScript. Ellibro se centra en estas dostecnologías y presta una especialatención a la creación deformularios, la base para cualquieraplicación web.

Sergio Luján

Programación enInternet

Clientes Web

ePUB v1.0gimli 20.10.11

Sergio Luján MoraIngeniero en Informática por laUniversidad de Alicante. Ha impartidodiversos cursos sobre Internet y lasdiversas tecnologías que se emplean en laprogramación de aplicaciones web(HTML, JavaScript, ASP y Java).

Durante un año ha trabajado en elLaboratorio Multimedia (mmlab) de laUniversidad de Alicante, desarrollandoaplicaciones para Internet e intranets.

Desde 1999 forma parte delDepartamento de Lenguajes y SistemasInformáticos de la Universidad de

Alicante. Las asignaturas que imparte en laactualidad son Programación en Internety Programación y Estructuras de Datos.

NOTA DEL AUTOR

Este libro fue publicadooriginalmente con copyright (todoslos derechos reservados) por elautor y el editor.

La publicación actual de estelibro se realiza bajo la licenciaCreative Commons Reconocimiento-NoComercial- SinObrasDerivadas3.0 España que se resume en lasiguiente página. La versióncompleta se encuentra en lasiguiente dirección:

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

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

Creative Commons

CreativeCommons

License Deed

Reconocimiento-NoComercial-SinObraDerivada3.0 España (CC BY-NC-ND 3.0)

Usted es libre de:

copiar, distribuir y comunicarpúblicamente la obra

Bajo lascondiciones siguientes:

Reconocimiento —Debe reconocer loscréditos de la obra dela maneraespecificada por elautor o el licenciador(pero no de unamanera que sugieraque tiene su apoyo oapoyan el uso que

hace de su obra).

No comercial — Nopuede utilizar estaobra para finescomerciales.

Sin obras derivadas— No se puedealterar, transformar ogenerar una obraderivada a partir deesta obra.

Entendiendo que:

Renuncia — Algunade estas condicionespuede no aplicarse sise obtiene el permisodel titular de losderechos de autor

Dominio Público —Cuando la obra oalguno de sus

elementos se halle ene l dominio públicosegún la ley vigenteaplicable, estasituación no quedaráafectada por lalicencia.

Otros derechos —Los derechossiguientes no quedanafectados por lalicencia de ningunamanera:

Los derechosderivados de

usoslegítimos uotraslimitacionesreconocidaspor ley no sevenafectados porlo anterior.Los derechosderivados deusoslegítimos uotraslimitacionesreconocidaspor ley no se

venafectados porlo anterior.Los derechosmorales delauto;Derechos quepuedenostentarotraspersonassobre lapropia obra osu uso, comopor ejemploderechos deimagen o de

privacidad.

Aviso — Al reutilizar odistribuir la obra, tiene quedejar bien claro lostérminos de la licencia deesta obra.

Esto es un resumen legible porhumanos del texto legal (la licenciacompleta) disponible en los idiomas

siguientes:Asturian Castellano Catalán Euskera

Gallego

Título: Programación enInternet: Clientes WEB

Autor: Sergio Luján Mora

I.S.B.N.: 84-8454-118-5Depósito Legal: A-1401-2001

Edita: Editorial ClubUniversitario

www.ecu.fm

Printed in SpainImprime: Imprenta Gamma -

Telf.: 965 67 19 87C/. Cottolengo, 25 - San Vicente

(Alicante)

http://www.ecu.fm/

[email protected]

Reservados tocios los derechos.Ni la totalidad ni parte de estelibro puede reproducirse otransmitirse por ningúnprocedimiento electrónico omecánico, incluyendo fotocopia,grabación magnética o cualquieralmacenamiento de informacióny sistema de reproducción, sinpermiso previo y por escrito delos titulares del Copyright.

mailto:[email protected]

http://www.gamma.fm/

Prefacio

En pocos años, Internet ha invadidocasi todos los aspectos de la vida.Podemos comunicarnos a través deInternet de distintas formas (correoelectrónico, radio y televisión online,telefonía IP). Podemos comprardiversos productos en Internet (libros,discos, entradas de cine). Podemosconocer gente a través de Internet (chat,foros de discusión). Para que todo ellofuncione, hacen falta profesionalesespecializados en "programación enInternet".

En este libro se trata una pequeñaporción de la "programación enInternet": la programación deaplicaciones web. Las aplicaciones webse encuadran dentro de las arquitecturascliente/servidor. En concreto, en estelibro se estudia como programar la partecliente, los clientes web. Lastecnologías que se contemplan sonHTML y JavaScript. Existen otrastecnologías, como ActiveX o applets,pero no están estandarizadas comoHTML y JavaScript.

Este libro se complementa con otrode próxima aparición que tratará laprogramación de aplicaciones web

desde el lado del servidor. En él semostrarán las tecnologías que seemplean para programar los servidoresweb: CGI, ASP, JSP, etc.

Evidentemente, existen programasque permiten crear páginas HTML sintener ni idea de HTML. Pero igual quese puede conducir un coche sin tener niidea de mecánica o pilotar un avión sintener ni idea de aerodinámica o demotores a reacción, conviene conocer"lo que se tiene entre manos" para poderobtener el máximo partido. Laprogramación de aplicaciones web noconsiste sólo en crear páginas web muybonitas, con muchas imágenes y colores;

hay que validar la entrada del usuario,acceder a bases de datos, etc.

Este no es un libro sobreprogramación básica, donde seexpliquen conceptos como variable,bucle de repetición, expresión lógica orecursividad. Es necesario poseer unnivel mínimo de programación parapoder abordar los temas que tratan sobreJavaScript. Sin embargo, cualquiera quehaya programado en algún lenguaje notendrá problemas en asimilarlo.

El libro está estructurado en seiscapítulos. Los dos primeros capítulosson introductorios: se repasan lasarquitecturas cliente/servidor en general

y se presenta un tipo concreto, lasaplicaciones web. El tercer capítulo estádedicado al lenguaje HTML. En elcuarto capítulo se explican los lenguajesd e script en general y en el siguientecapítulo se trata un lenguaje concreto:JavaScript. El libro finaliza con elmodelo de objetos de documento, quepermite acceder a los elementos de unapágina web desde un lenguaje de script.Por último, existen tres apéndices dondese resumen las etiquetas de HTML y seexplica como trabajar con los colores enHTML y como depurar errores deJavaScript.

Aunque no figuran como autores (y

no tienen "ni idea" de HTML oJavaScript), sin la participación de mispadres este libro no existiría, ya que suapoyo a lo largo de bastantes años me hapermitido llegar a escribir este libro.

Me gustaría agradecer a Marisa lapaciencia (¿infinita o ínfima?) que hatenido todas las veces que he llegadotarde debido a este libro.

Por último, mando un saludo a misantiguos compañeros del LaboratorioMultimedia (mmlab), donde meintroduje en el mundo de Internet, y amis actuales compañeros delDepartamento de Lenguajes y SistemasInformáticos de la Universidad de

Alicante.

Alicante, 8 deoctubre de 2001

SergioLujánMora

Índice general

Prefacio

Indice general

Indice de cuadros

Indice de figuras

Indice de acrónimos

1. Arquitecturascliente/servidor

1.1. Introducción

1.2. Separación defunciones

1.3. Modelos dedistribución en aplicacionescliente/servidor

1.3.1.Presentación distribuida

1.3.2. Aplicacióndistribuida

1.3.3. Datosdistribuidos

1.4. Arquitecturas dedos y tres niveles

1.5. Descripción deun sistema cliente/servidor

2. Qué es una aplicaciónweb

2.1. Introducción2.1.1. El cliente2.1.2. El servidor

2.2. Transferencia depáginas web

2.3. Entornos web2.3.1. Internet2.3.2. Intranet2.3.3. Extranet

2.4. Ventajas ydesventajas

3. HTML3.1. Introducción3.2. Evolución de

HTML3.3. Clasificación de

las páginas3.4. Qué necesito

para usar HTML3.5. Conceptos

básicos de HTML3.5.1. Estructura

de una página3.5.2. Caracteres

especiales y secuencias deescape

3.6. Metadatos3.7. Etiquetas HTML3.8. Formato del texto

3.8.1.Encabezados de secciones

3.8.2. Formatosde caracteres

3.8.3. Laetiqueta <FONT>

3.8.4.Alineamiento del texto

3.9. Listas3.9.1. Listas de

definición3.9.2. Listas

ordenadas3.9.3. Listas no

ordenadas3.10. Colores

3.10.1. Color defondo de una página

3.10.2. Color del

texto3.11. Enlaces

3.11.1. Enlace aun punto del mismodocumento

3.11.2. Enlace aotro documento

3.11.3. Enlace aun punto de otro documento

3.12. Tablas3.12.1. Tablas

invisibles3.12.2. Tablas

como marcos3.13. Imágenes

3.13.1. Etiqueta<IMG>

3.13.2. Imágenescomo fondo de una página

3.14. Formularios3.14.1. Controles

de un formulario3.14.2. Campos

de verificación3.14.3. Campos

excluventes

3.14.4. Camposde texto

3.14.5. Listas deselección

3.14.6. Areas detexto

3.15. Marcos3.16. Guía de estilo

3.16.1.Organizar el código HTML

3.16.2. Cuidadocon los colores

3.16.3. Cuidado

con los tipos de letra3.16.4. Sacar

partido al hipertexto3.16.5. Usar las

capacidades multimedia3.16.6. Identidad

corporativa3.16.7. Permitir

que los usuarios secomuniquen

3.16.8. Facilitarlas búsquedas

3.16.9. Revisar

las páginas periódicamente3.16.10. Los

enlaces

4. Lenguajes de script4.1. Introducción4.2. Diferencias entre

VBScript y JavaScript4.3. Para qué sirven4.4. Como se usa un

lenguaje de script en unnavegador

5. JavaScript5.1. Introducción

5.1.1.Aplicaciones

5.1.2. Quénecesito para programar enJavaScript

5.1.3. JavaScripty Java

5.1.4. Versiones5.1.5. JavaScript

y ECMA5.1.6. JScript5.1.7.

Diferencias entre JavaScript y

JScript5.2. El lenguaje

5.2.1.Características básicas

5.2.2.Comentarios

5.2.3.Declaración de variables

5.2.4. Ambito delas variables

5.2.5. Caracteresespeciales

5.2.6.

Operadores5.2.7. Palabras

reservadas5.3. Sentencias

5.3.1.Condicionales

5.3.2. Derepetición

5.3.3. Demanipulación de objetos

5.4. Funciones5.4.1.

Declaración de funciones

5.4.2. Funcionespredefinidas

5.5. Objetos5.5.1. Creación

de objetos5.5.2. Métodos

de un objeto5.5.3.

Eliminación de objetos5.6. Tratamiento de

cadenas5.7. Operaciones

matemáticas

5.8. Validación deformularios

5.8.1. Validacióncampo nulo

5.8.2. Validaciónalfabética

5.8.3. Validaciónnumérica

6. Modelo de objetos dedocumento

6.1. Introducción6.2. Modelo de

objetos en Netscape

Communicator6.2.1. Objeto

document6.2.2. Cómo

acceder a los controles de unformulario

6.2.3. Objetohistorv

6.2.4. Objetolocation

6.2.5. Objetonavigator

6.2.6. Objeto

window6.3. Modelo de

objetos en Microsoft InternetExplorer

A. Resumen etiquetasHTML

A.l. IntroducciónA.2. Etiquetas que

definen la estructura deldocumento

A.3. Etiquetas quepueden ir en la cabecera

A.4. Etiquetas que

definen bloques de textoA.5. Etiquetas de

listasA.6. Etiquetas de

características del textoA.7. Etiquetas de

anclas y enlacesA.8. Etiquetas de

imágenes y mapas deimágenes

A.9. Etiquetas detablas

A.10. Etiquetas de

formulariosA.11. Etiquetas de

marcosA.12. Etiquetas de

situación de contenidosA.13. Etiquetas de

scriptA.14. Etiquetas de

applets y plug-insA.15. Etiquetas de

ajuste del textoA.16. Atributos

universales

B. Colores en HTMLB.l. Como trabajar

con las componentes RGBB.l.l. Obtener las

componentes del colordeseado en decimal

B.1.2.Transformar las componentesde decimal a hexadecimal

B.2. Tabla de colores

C. Depuración de erroresde JavaScript

C.l. IntroducciónC.2. Depuración en

cualquier navegadorC.3. Netscape

CommunicatorC.3.1. Modificar

las preferenciasC.3.2.

Evaluación de expresiones conla consola

C.3.3. NetscapeJavaScript Debugger

C.4. Microsoft

Internet Explorer

Bibliografía

Notas

Índice de cuadros

3.1. Versiones deHTML

3.2. Caracteres conun significado especial enHTML

3.3. Caracteresespeciales

3.4. Diferencias entreGIF y JPEG

5.1. JavaScript frentea Java

5.2. Relación entre lasversiones de JavaScript y deNetscape Navigator

5.3. Relación entre lasversiones de JavaScript y deECMA

5.4. Relación entre lasversiones de JScript y losproductos de Microsoft

5.5. Caracteresespeciales

5.6. Precedencia delos operadores de JavaScript

5.7. Palabrasreservadas de JavaScript

5.8. Propiedades delobjeto Math

B.l. Equivalenciaspara pasar del sistema decimalal hexadecimal

B.2. Nombres dealgunos colores en HTML

Índice de figuras

1.1. Separación defunciones

1.2. Presentacióndistribuida

1.3. Aplicacióndistribuida

1.4. Datosdistribuidos

2.1. Esquema básicode una aplicación web

3.1. Primera páginaHTML

3.2. Ejemplo deencabezados

3.3. Formatos físicosy lógicos

3.4. Distintos tipos deletra con la etiqueta <FONT>

3.5. Distintos tamañosde letra con la etiqueta<FONT>

3.6. Alineamiento depárrafos: izquierda, derecha,

centrado y justificado3.7. Bloques de texto

con distinta sangría3.8. Listas de

definición3.9. Listas ordenadas3.10. Listas no

ordenadas3.11. Enlace a un

destino interno3.12. Destino del

enlace interno3.13. Página con

enlace a otra página3.14. Página con

enlace a otra página3.15. Página con dos

enlaces a otra página3.16. Página destino

de los enlaces3.17. Tabla sencilla3.18. Tablas como

marcos3.19. Imágenes con

distinto alineamiento del texto3.20. Formulario con

distintos controles3.21. Distintas listas

de selección3.22. Areas de texto

de distinto tamaño3.23. Página con dos

marcos verticales

4.1. CódigoJavaScript en un enlace

5.1. Ejemplo decaracteres especiales

5.2. Validacióncampo nulo

5.3. Validaciónalfabética

5.4. Validaciónnumérica

6.1. Modelo deobjetos en NetscapeCommunicator

6.2. Propiedades delobjeto document

6.3. Propiedades delobjeto location

6.4. Propiedades delobjeto navigator

6.5. Interacción entrevarias ventanas a través delobjeto window

6.6. Modelo deobjetos en Microsoft InternetExplorer

B.l. Ventana paramodificar colores en MicrosoftPaint

B.2. Ventana paradefinir colores personalizadosen Microsoft Paint

B.3. Calculadora en

modo científico

C.l. ConsolaJavaScript de NetscapeCommunicator

C.2. ConsolaJavaScript con mensajes deerror

C.3. Evaluación deexpresiones

C.4. NetscapeJavaScript Debugger

C.5. SmartUpdate enNetscape Communicator

C.6. Mensaje dealerta de Microsoft InternetExplorer

C.7. Mensaje dealerta en la barra de estado deMicrosoft Internet Explorer

C.8. Opciones deMicrosoft Internet Explorer

C.9. Mensaje de erroren Microsoft Internet Explorer

C.10.Mensaje deerror en Microsoft InternetExplorer

C.11.Nuevas opcionesde Microsoft Internet Explorer

C.l2. Depurador deMicrosoft

Índice de acrónimos

ASP Active Server PagesTecnología de Microsoft

que permite crear páginas webdinámicas en el servidor. Sepuede decir que las páginasASP son similares a losprogramas CGI. Las páginasASP suelen estar programadose n VBScript, aunque tambiénse pueden programar en otroslenguajes.

ASCII American Standard Code forInformation Interchange

Código binario utilizadopara representar letras,números, símbolos, etc. Acada carácter se le asigna unnúmero del 0 al 127 (7 bits).Por ejemplo, el código ASCIIpara la A mayúscula es 65.Existen códigos ASCIIextendidos de 256 caracteres(8 bits), que permitenrepresentar caracteres noingleses como las vocalesacentuadas o la eñe. Loscaracteres de la parte superior(128 a 255) de estos códigosASCII extendidos varían de

uno a otro. Por ejemplo, unode los más extendidos es ISOLatin-1 (oficialmente ISO-8859-1).

CGI Common Gateway InterfaceEstándar que permite el

intercambio de informaciónentre un servidor y unprograma externo al servidor.Un programa CGI es unprograma preparado pararecibir y enviar datos desde yhacia un servidor web segúneste estándar. Normalmente seprograman en C o en Perl,

aunque se puede usarcualquier lenguaje depropósito general.

DHTML Dynamic HTMLConjunto de extensiones a

HTML que permitenmodificar el contenido de unapágina web en el cliente sinnecesidad de establecer unanueva comunicación con elservidor. Se basa en el uso deDOM para acceder alcontenido de la página.

DLL Dynamic Link LibraryFichero que almacena

funciones ejecutables o datosque pueden ser usados por unaaplicación en MicrosoftWindows. Una DLL puedeser usada por variosprogramas a la vez y se cargaen tiempo de ejecución (no entiempo de compilación).

DOM Document Object ModelEspecificación que define

como se puede acceder a losobjetos de un documentoHTML (ventanas, imágenes,formularios) a través de unlenguaje de script.

Básicamente define unjerarquía de objetos. DOM seencuentra en proceso deestandarización por W3C.DHTML depende de DOMpara cambiar dinámicamenteel contenido de una páginaweb. Desgraciadamente, losdos navegadores mavoritariosposeen distintos modelos deobjetos.

ECMA European ComputerManufacturers Association

ECMA es una asociacióninternacional que establece

estándares relacionados consistemas de comunicación y deinformación.

GIF Graphics Interchange FormatFormato gráfico de mapas

de bit desarrollado porCOMPUSERVE. Incorporacompresión de datos,transparencias y animaciones.Existen dos versiones de esteestándar gráfico: 87a y 89a.

HTML HyperText MarkupLanguage

Lenguaje compuesto deuna serie de etiquetas o

marcas que permiten definir elcontenido y la apariencia delas páginas web. Aunque sebasa en SGML, no se puedeconsiderar que sea unsubconjunto. Existen cientosde etiquetas con diferentesatributos. W3C se encarga desu estandarización. El futurosustituto de HTML esXHTML.

HTTP HyperText TransferProtocol

Es el protocolo queemplea la WWW. Define

cómo se tienen que crear yenviar los mensajes y quéacciones debe tomar elservidor y el navegador enrespuesta a un comando. Es unp r o t o c o l o stateless (sinestado), porque cada comandose ejecuta independientementede los anteriores o de losposteriores. Actualmente, lamayoría de los servidoressoportan HTTP 1.1 (RFC2616 de junio de 1999). Unade las principales ventajas deesta versión es que soportaconexiones persistentes: una

vez que el navegador seconecta al servidor, puederecibir múltiples ficheros através de la misma conexión,lo que aumenta el rendimientode la transmisión hasta en un20 %.

ISAPI Internet Server ApplicationProgram Interface

Un API para el servidorMicrosoft InternetInformation Server. Permiteprogramar aplicaciones web.

ISO International Organization forStandards

Organización fundada en1946, cuyos miembros son lasorganizaciones nacionales denormalización(estandarización)correspondientes a los paísesmiembros. Entre sus miembrosse incluyen a la ANSI(Estados Unidos), BSI (GranBretaña), AFNOR (Francia),DIN (Alemania) y UNE(España).

JPEG Joint Photographic ExpertsGroup

Formato gráfico de mapas

de bit. Incorpora compresiónde datos con pérdidas ypermite trabajar con 24 bits decolor.

JSP Java Server PagesTecnología de SUN

MICROSYSTEMS que permitecrear páginas dinámicas en elservidor. Equivale a latecnología ASP de Microsoft.Se programan en Java.

MIME Multipurpose Internet MailExtensions

Se usa en el correo

electrónico desde 1992 paraenviar y recibir ficheros dedistinto tipo. Se puedeconsultar el estándar en RFC1341, RFC 1521 y RFC 1522.

PNG Portable Network GraphicsFormato gráfico de mapas

de bit similar a GIF. W3C hadecidido sustituir GIF porPNG debido a que el primeroemplea un algoritmo que estápatentado, mientras que PNGes totalmente gratuito. TantoMicrosoft Internet Explorerc o m o Netscape

Communicator aceptan esteformato.

RFC Request for CommentsMedio de publicar

propuestas sobre Internet.Cada RFC recibe un número.Algunos se convierten en unestándar de Internet.

RGB Red Green BlueNotación de los colores en

la que cada color serepresenta como unacombinación de los trescolores básicos (primarios)rojo (red), verde (green) y

azul (blue). Se trata de unmodelo aditivo (se parte delnegro). Mediante lacombinación adecuada de lostres colores básicos seconsigue todo el espectro decolores. Además de RGBexisten otras formas derepresentar los colores. Otrade las más corrientes esCMYK (cyan, magenta,yellow, black ), que se trata deun modelo sustractivo.

SGML Standard GeneralizedMarkup Language

Lenguaje que permiteorganizar y etiquetar losdistintos elementos quecomponen un documento. Seemplea para manejar grandesdocumentos que sufrenconstantes revisiones y seimprimen en distintos formato.Desarrollado y estandarizadopor ISO en 1986.

TCP/IP Transmission ControlProtocol/Internet Protocol

Familia de protocolos quese emplean en lascomunicaciones de Internet.

URL Universal Resource LocatorTambién conocido como

Uniform Resource Locator.Sistema de direccio- namientode máquinas y recursos enInternet. Es decir, se trata deuna dirección que permitelocalizar cualquier máquina odocumento que se encuentreaccesible a través de Internet.

W3C World Wide Web ConsortiumConsorcio internacional

de compañías involucradas enel desarrollo de Internet y enespecial de la WWW. Su

propósito es desarrollarestándares y "poner orden" enInternet.

WWW World Wide WebSistema de servidores

web conectados a Internet (notodos los ordenadoresconectados a Internet formanparte de la WWW). Suprotocolo de comunicación esHTTP, su lenguaje decreación de documentosHTML y sus sistema dedireccionamiento de losr e c u r s o s URL. Los

navegadores web (browsers)permiten navegar por la web.

XHTML Extensible HyperTextMarkup Language

HTML escrito según lasnormas que marca XML. Portanto, se trata de unaaplicación concreta de XML yno tienen que confundirseentre sí.

XML Extensibíe Markup LanguageMetalenguaje de

etiquetado basado en SGML.Diseñado específicamentepara la WWW por W3C.

Permite que un usuario diseñesus propias etiquetas, con susatributos y las reglas deconstrucción de documentos(sintaxis).

Capítulo 1

Arquitecturascliente/servidor

Las aplicaciones web son un tipoespecial de aplicacionescliente/servidor. Antes de aprendera programar aplicaciones webconviene conocer las característicasbásicas de las arquitecturascliente/servidor.

Índice General

1.1. Introducción1.2. Separación de funciones1.3. Modelos de distribución en

aplicaciones cliente/servidor1.3.1. Presentación

distribuida1.3.2. Aplicación distribuida1.3.3. Datos distribuidos

1.4. Arquitecturas de dos ytres niveles

1.5. Descripción de un sistemacliente/servidor

1.1. Introducción

Cliente/servidor es una arquitecturade red‹ 1 › en la que cada ordenador oproceso en la red es cliente o servidor.Normalmente, los servidores sonordenadores potentes dedicados agestionar unidades de disco (servidor deficheros), impresoras (servidor deimpresoras), tráfico de red (servidor dered), datos (servidor de bases de datos)o incluso aplicaciones (servidor deaplicaciones), mientras que los clientesson máquinas menos potentes y usan los

recursos que ofrecen los servidores.Esta arquitectura implica la

existencia de una relación entreprocesos que solicitan servicios(clientes) y procesos que responden aestos servicios (servidores). Estos dostipos de procesos pueden ejecutarse enel mismo procesador o en distintos.

La arquitectura cliente/servidorimplica la realización de aplicacionesdistribuidas. La principal ventaja de estaarquitectura es que permite separar lasfunciones según su servicio, permitiendosituar cada función en la plataforma másadecuada para su ejecución. Además,también presenta las siguientes ventajas:

Las redes de ordenadores permitenque múltiples procesadores puedanejecutar partes distribuidas de unamisma aplicación, lograndoconcurrencia de procesos.

Existe la posibilidad de migraraplicaciones de un procesador aotro con modificaciones mínimasen los programas.

Se obtiene una escalabilidad de laaplicación. Permite la ampliaciónhorizontal o vertical de lasaplicaciones. La escalabilidadhorizontal se refiere a lacapacidad de añadir o suprimirestaciones de trabajo que hagan uso

de la aplicación (clientes), sin queafecte sustancialmente alrendimiento general. Laescalabilidad vertical permite lamigración hacia servidores demayor o menor capacidad yvelocidad o de un tipo diferente.

Posibilita el acceso a los datosindependientemente de donde seencuentre el usuario.

1.2. Separación de funciones

La arquitectura cliente/servidor nospermite la separación de funciones en

tres niveles, tal como se muestra en laFigura 1.1:

Lógica de presentación. Lapresentación de los datos es unafunción independiente del resto.

Lógica de negocio (o aplicación).Los flujos de trabajo puedencambiarse según las necesidadesexistentes de un procesador a otro.

Lógica de datos. La gestión de losdatos debe ser independiente parapoder ser distribuida según lasnecesidades de la empresa en cadamomento.

Figura 1.1: Separación de funciones

Si un sistema distribuido se diseñacorrectamente, los tres nivelesanteriores pueden distribuirse yredistribuirse independientemente sinafectar al funcionamiento de laaplicación.

1.3. Modelos de distribuciónen aplicaciones

cliente/servidor

Según como se distribuyan las tresfunciones básicas de una aplicación(presentación, negocio y datos) entre elcliente y el servidor, podemoscontemplar tres modelos: presentacióndistribuida, aplicación distribuida ydatos distribuidos.

1.3.1. Presentacióndistribuida

El cliente sólo mantiene la

presentación, el resto de la aplicación seejecuta remotamente (Figura 1.2). Lapresentación distribuida, en su formamás simple, es una interfaz gráfica deusuario a la que se le pueden acoplarcontroles de validación de datos, paraevitar la validación de los mismos en elservidor.

Figura 1.2: Presentación distribuida

1.3.2. Aplicación distribuida

Es el modelo que proporcionamáxima flexibilidad, puesto que permitetanto a servidor como a cliente mantenerla lógica de negocio realizando cada unolas funciones que le sean más propias,bien por organización, o bien por mejoraen el rendimiento del sistema (Figura1.3).

Figura 1.3: Aplicación distribuida

1.3.3. Datos distribuidos

Los datos son los que se distribuyen,por lo que la lógica de datos es lo quequeda separada del resto de laaplicación (Figura 1.4). Se puede dar dedos formas: ficheros distribuidos obases de datos distribuidas.

Figura 1.4: Datos distribuidos

1.4. Arquitecturas de dos ytres niveles

La diferencia entre las aplicacionesde dos y tres niveles estriba en la formade distribución de la aplicación entre elcliente y el servidor.

Una arquitectura de dos niveles estábasada en un sistema gestor de bases dedatos donde el cliente mantiene la lógicade la presentación, negocio, y de accesoa los datos, y el servidor únicamentegestiona los datos. Suelen seraplicaciones cerradas que supeditan lalógica de los procesos cliente al gestor

de base de datos que se está usando.En las arquitecturas de tres niveles,

la lógica de presentación, la lógica denegocio y la lógica de datos estánseparadas, de tal forma que mientras lalógica de presentación se ejecutaránormalmente en la estación cliente, lalógica de negocio y la de datos puedenestar repartidas entre distintosprocesadores.

El objetivo de aumentar el númerode niveles en una aplicación distribuidaes lograr una mayor independencia entreun nivel y otro, lo que facilita laportabilidad en entornos heterogéneos.

1.5. Descripción de unsistema cliente/servidor

Un sistema cliente/servidor suelepresentar las siguientes características:

1. Una combinación de la partecliente (también llamada front-end)que interactúa con el usuario (hacede interfaz entre el usuario y elresto de la aplicación) y la parteservidor (o back-end) queinteractúa con los recursoscompartidos (bases de datos,impresoras, módems).

2. La parte cliente y servidor tienen

diferentes necesidades de recursosa la hora de ejecutarse: velocidadde procesador, memoria, velocidady capacidad de los discos duros,dispositivos de entrada/salida, etc.

3. El entorno suele ser heterogéneo ymultivendedor. El hardware ysistema operativo del cliente y elservidor suelen diferir. El cliente yel servidor se suelen comunicar através de unas API‹ 2 › y RPC‹ 3 ›conocidas (por ejemplo, ODBC‹ 4› para acceder a bases de datos).

4. Normalmente la parte cliente seimplementa haciendo uso de unainter- faz gráfica de usuario, quepermite la introducción de datos a

través de teclado, ratón, lápizóptico, etc.

Capítulo 2

Qué es una aplicaciónweb

En las aplicaciones web suelendistinguirse tres niveles (como enlas arquitecturas cliente/servidor detres niveles): el nivel superior queinteracciona con el usuario (elcliente web, normalmente unnavegador), el nivel inferior queproporciona los datos (la base dedatos) y el nivel intermedio que

procesa los datos (el servidor web).En este capítulo se describen elcliente y el servidor web y secomentan los entornos web en losque se ejecutan las aplicacionesweb.

Índice General

2.1. Introducción2.1.1. El cliente2.1.2. El servidor

2.2. Transferencia de páginasweb

2.3. Entornos web2.3.1. Internet

2.3.2. Intranet2.3.3. Extranet

2.4. Ventajas y desventajas

2.1. Introducción

Una aplicación web (web-basedapplication) es un tipo especial deaplicación cliente/servidor, donde tantoe l cliente (el navegador, explorador ovisualizador‹ 5 ›) como el servidor (elservidor web) y el protocolo medianteel que se comunican (HyperTextTransfer Protocol (HTTP)) están

estandarizados y no han de ser creadospor el programador de aplicaciones(Figura 2.1).

El protocolo HTTP forma parte dela familia de protocolos decomunicaciones Transmission ControlProtocol/Internet Protocol (TCP/IP),que son los empleados en Internet. Estosprotocolos permiten la conexión desistemas heterogéneos, lo que facilita elintercambio de información entredistintos ordenadores.

Figura 2.1: Esquema básico de unaaplicación web

2.1.1. El cliente

El cliente web es un programa con elque interacciona el usuario parasolicitar a un servidor web el envío delos recursos que desea obtener medianteHTTP‹ 6 ›.

La parte cliente de las aplicacionesweb suele estar formada por el códigoHyperText Markup Language (HTML)que forma la página web más algo decódigo ejecutable realizado en lenguajed e script del navegador (JavaScript oVBScript) o mediante pequeñosprogramas (applets) realizados en Java.También se suelen emplear plug-ins‹ 7 ›que permiten visualizar otros contenidosmultimedia (como Flash‹ 8 ›), aunqueno se encuentran tan extendidos comolas tecnologías anteriores y planteanproblemas de incompatibilidad entredistintas plataformas. Por tanto, lamisión del cliente web es interpretar las

páginas HTML y los diferentes recursosque contienen (imágenes, sonidos, etc.).

2.1.2. El servidor

El servidor web es un programa queestá esperando permanentemente lassolicitudes de conexión mediante elprotocolo HTTP por parte de losclientes web. En los sistemas Unix sueleser un "demonio" y en los sistemasMicrosoft Windows un servicio.

La parte servidor de lasaplicaciones web está formada porpáginas estáticas que siempre muestran

el mismo contenido y por programas oscripts que son ejecutados por elservidor web cuando el navegador delcliente solicita algunas páginas. Lasalida de este script suele ser unapágina HTML estándar que se envía alnavegador del cliente. Tradicionalmenteeste programa o script que es ejecutadopor el servidor web se basa en latecnología Common Gateway Interface(CGI).

La programación del servidormediante CGI es compleja y laboriosa.El protocolo HTTP no almacena elestado entre una conexión y la siguiente(es un protocolo sin estado), por lo que

es el programador el que se tiene queencargar de conservarlo. Esto conduce aque el programador tenga que dedicarparte de su tiempo a programar tareasajenas al n de la aplicación, lo que sueleser origen de diversos problemas.

Sin embargo, con la entrada en 1995de MICROSOFT en el mundo Internet y lasalida al mercado de su servidor web(Internet Information Server) seabrió un nuevo campo para lasaplicaciones web: Internet ServerApplication Program Interface(ISAPI). Se trata de un conjunto defunciones que el servidor web pone adisposición de los programadores de

aplicaciones web. Con ISAPI, losprogramadores pueden crear DynamicLink Library (DLL) con funciones queson invocadas para determinadosarchivos (se ejecutan cuando el clientesolicita un archivo con una determinadaextensión).

Todo el sistema Active Server Pages(ASP), no es más que una DLL del tipoISAPI que es invocada automáticamentepara los archivos cuya extensión sea.asp. La DLL ASP preprocesa elarchivo .asp interpretando su códigocomo un script a ejecutar en el servidor.Sin embargo, ella no interpretadirectamente el código, sino que en

función del lenguaje en el que estáescrito, invoca a otra DLL que seencarga de ejecutar el script. Despuésrecoge la salida y se la envía al servidorweb, el cual a su vez la reenvía alcliente.

Las ventajas que presenta ASPfrente a CGI son:

Las páginas basadas en CGIresultan difíciles de mantener, yaque las instrucciones HTML seencuentran insertadas en el propiocódigo del programa CGI,mezclándose sus funcionalidades.

La ejecución de un programa CGI

es muy ineciente, debido al procesode carga del código en memoriaque se realiza cada vez que unusuario requiere su ejecución. Laexistencia de múltiples clientessimultáneos supone múltiplescopias del programa en memoriadel servidor.

La unión de ISAPI con el servidorweb es más "fuerte" (están másintegrados), su ejecución es másrápida, con lo que se logra que lasaplicaciones basadas en ISAPItengan un mayor rendimiento quelas basadas en CGI.

Además de ASP, existen otras

tecnologías destinadas a programar laparte servidor de las aplicaciones web:ColdFusion, Java Server Pages (JSP),servlets, PHP, etc. Todas ellas son muysimilares, se basan en los mismosprincipios y ofrecen resultadosequivalentes.

2.2. Transferencia depáginas web

El proceso completo, desde que elusuario solicita una página, hasta que elcliente web (navegador) se la muestracon el formato apropiado, es el

siguiente:

1. El usuario especifica en el clienteweb la dirección de la página quedesea consultar: el usuario escribeen el navegador la dirección(Universal Resource Locator(URL)) de la página que deseavisitar.

2. El cliente establece una conexióncon el servidor web.

3. El cliente solicita la página o elobjeto deseado.

4. El servidor envía dicha página uobjeto (o, si no existe, devuelve uncódigo de error).

5. Si se trata de una página HTML, elcliente inicia sus labores deinterpretación de los códigosHTML. Si el cliente web encuentrainstrucciones que hacen referenciaa otros objetos que se tienen quemostrar con la página (imágenes,sonidos, animaciones multimedia,etc.), establece automáticamentecomunicación con el servidor webpara solicitar dichos objetos.

6. Se cierra la conexión entre elcliente y el servidor.

7. Se muestra la página al usuario.

Obsérvese que siempre se libera la

conexión, por lo que ésta sólo tieneladuración correspondiente a latransmisión de la página solicitada. Estose hace así para no desperdiciarinnecesariamente el ancho de banda dela red mientras el usuario lee la páginarecibida.

Cuando el usuario activa un enlacede la página, se establece una nuevaconexión para recibir otra página oelemento multimedia. Por ello, elusuario tiene la sensación de que estádisfrutando de una conexión permanentecuando realmente no es así.

Un detalle importante es que paracasa objeto que se transere por la red se

realiza una conexión independiente. Porejemplo, si el cliente web solicita unapágina que contiene dos imágenesintegradas, se realizan tres conexiones:una para el documento HTML y dospara los archivos de las imágenes.

2.3. Entornos web

Las aplicaciones web se emplean entres entornos informáticos muy similaresque suelen confundirse entre sí:Internet, intranet y extranet.

2.3.1. Internet

Internet es una red global queconecta millones de ordenadores portodo el mundo. Su nacimiento se sitúa en1969, en un proyecto de investigacióndel Departamento de Defensa deEstados Unidos. En 1998, la Internettenía más de 100 millones de usuariosen todo el mundo, en diciembre de 2000unos 400 millones y el número siguecreciendo rápidamente. Más de 100países están conectados a este nuevomedio para intercambiar todo tipo de

información.Al contrario que otros servicios

online, que se controlan de formacentralizada, la Internet posee un diseñodescentralizado. Cada ordenador (host)en la Internet es independiente. Susoperadores pueden elegir que serviciode Internet usar y que servicios localesquieren proporcionar al resto de laInternet. Asombrosamente, este diseñoanárquico funciona satisfactoriamente.

Existe una gran variedad de formasde acceder a la Internet. El método máscomún es obtener acceso a través deProveedores de servicios de Internet(Internet Service Provider, ISP).

Cuando se emplea la palabra interneten minúsculas, nos referimos a unconjunto de dos o más redes deordenadores interconectadas entre sí.

2.3.2. Intranet

Una intranet es una red deordenadores basada en los protocolosque gobiernan Internet (TCP/IP) quepertenece a una organización y que esaccesible únicamente por los miembrosde la organización, empleados u otraspersonas con autorización.

Una intranet puede estar o no

conectada a Internet. Un sitio web en unaintranet es y actúa como cualquier otrositio web, pero los cortafuegos(firewall) lo protegen de accesos noautorizados.

Al igual que Internet, las intranets seusan para distribuir y compartirinformación. Las intrantes hoy en díacomponen el segmento con el mayorcrecimiento dentro de Internet, porqueson menos caras de montar y deadministrar que las redes privadas quese basan en protocolos propietarios.

2.3.3. Extranet

Una extranet es una intranet a la quepueden acceder parcialmente personasautorizadas ajenas a la organización oempresa propietaria de la intranet.

Mientras que una intranet residedetrás de un cortafuego y sólo esaccesible por las personas que formanparte de la organización propietaria dela intranet, una extranet proporcionadiferentes niveles de acceso a personasque se encuentran en el exterior de laorganización. Esos usuarios puedenacceder a la extranet sólo si poseen unnombre de usuario y una contraseña conlos que identificarse. La identidad delusuario determina que partes de la

extranet puede visualizar.Las extranets se están convirtiendo

en un medio muy usado por empresasque colaboran para compartirinformación entre ellas. Se empleancomo medio de comunicación de unaempresa con sus clientes, proveedores osocios. Las extranets son la base delcomercio entre empresas (business tobusiness, B2B).

2.4. Ventajas y desventajas

El desarrollo explosivo de Internet yen especial de la WWW se debe a la

aceptación por todo el mundo de losestándares y tecnologías que emplea:medio de transporte común (TCP/IP),servidor (HTTP) y lenguaje de creaciónde páginas (HTML) estandarizados.

Muchas empresas han descubiertoque las anteriores tecnologías sepuedenemplear en las aplicacionescliente/servidor que emplean. De estaforma nace el concepto de intranet: usarlas tecnologías de Internet paraimplementar las tradicionalesaplicaciones cliente/servidor dentro deuna empresa. Además, una vez que setiene una aplicación que funciona en unaintranet, aparece la posibilidad de

permitir su uso a través de Internet, loque facilita el teletrabajo o la movilidadde los empleados de una empresa‹ 9 ›.

Una ventaja clave del uso deaplicaciones web es que el problema degestionar el código en el cliente sereduce drásticamente. Suponiendo queexiste un navegador o exploradorestándar en cada cliente, todos loscambios, tanto de interfaz como defuncionalidad, que se deseen realizar ala aplicación se realizan cambiando elcódigo que resida en el servidor web.Compárese esto con el coste de tenerque actualizar uno por uno el código encada uno de los clientes (imaginemos

que tenemos 2.000 ordenadoresclientes). No sólo se ahorra tiempoporque reducimos la actualización a unasólo máquina, sino que no hay quedesplazarse de un puesto de trabajo aotro (la empresa puede tener unadistribución geográfica amplia).

Una segunda ventaja, relacionadacon la anterior, es que se evita la gestiónde versiones. Se evitan problemas deinconsistencia en las actualizaciones, yaque no existen clientes con distintasversiones de la aplicación.

Una tercera ventaja es que si laempresa ya está usando Internet, no senecesita comprar ni instalar

herramientas adicionales para losclientes.

Otra ventaja, es que de cara alusuario, los servidores externos(Internet) e internos (intranet) aparecenintegrados, lo que facilita el aprendizajey uso.

Una última ventaja, pero no menosimportante, es la independencia deplataforma. Para que una aplicación webse pueda ejecutar en distintasplataformas (hardware y sistemaoperativo), sólo se necesita disponer deun navegador para cada una de lasplataformas, y no es necesario adaptar elcódigo de la aplicación a cada una de

ellas. Además, las aplicaciones webofrecen una interfaz gráfica de usuarioindependiente de la plataforma (ya quela plataforma de ejecución es el propionavegador).

Una desventaja, que sin embargoestá desapareciendo rápidamente, es quela programación en la web no es tanversátil o potente como la tradicional.Al principio, las aplicaciones web eranbásicamente de "solo lectura": permitíanuna interacción con el usuarioprácticamente nula. Sin embargo, con laaparición de nuevas herramientas comoJava, JavaScript y ASP, esta limitacióntiende a desaparecer.

Capítulo 3

HTML

HTML es un lenguaje de marcas(etiquetas) que se emplea para darformato a los documentos que sequieren publicar en la WWW. Losnavegadores pueden interpretar lasetiquetas y muestran losdocumentos con el formatodeseado. En este capítulo sepresentan los conceptos básicos yavanzados (tablas, formularios y

marcos) de HTML. El capítulofinaliza con una guía de estilo:pequeños consejos que puedenayudar a lograr mejores páginasweb.

Índice General

3.1. Introducción3.2. Evolución de HTML3.3. Clasificación de las

páginas3.4. Qué necesito para usar

HTML3.5. Conceptos básicos de

HTML

3.5.1. Estructura de unapágina

3.5.2. Caracteres especialesy secuencias de escape

3.6. Metadatos3.7. Etiquetas HTML3.8. Formato del texto

3.8.1. Encabezados desecciones

3.8.2. Formatos decaracteres

3.8.3. La etiqueta <FONT>3.8.4. Alineamiento del texto

3.9. Listas3.9.1. Listas de definición3.9.2. Listas ordenadas

3.9.3. Listas no ordenadas3.10. Colores

3.10.1. Color de fondo deuna página

3.10.2. Color del texto3.11. Enlaces

3.11.1. Enlace a un punto delmismo documento

3.11.2. Enlace a otrodocumento

3.11.3. Enlace a un punto deotro documento

3.12. Tablas3.12.1. Tablas invisibles3.12.2. Tablas como marcos

3.13. Imágenes

3.13.1. Etiqueta <IMG>3.13.2. Imágenes como

fondo de una página3.14. Formularios

3.14.1. Controles de unformulario

3.14.2. Campos deverificación

3.14.3. Campos excluyentes3.14.4. Campos de texto3.14.5. Listas de selección3.14.6. Áreas de texto

3.15. Marcos3.16. Guía de estilo

3.16.1. Organizar el códigoHTML

3.16.2. Cuidado con loscolores

3.16.3. Cuidado con lostipos de letra

3.16.4. Sacar partido alhipertexto

3.16.5. Usar las capacidadesmultimedia

3.16.6. Identidadcorporativa

3.16.7. Permitir que losusuarios se comuniquen

3.16.8. Facilitar lasbúsquedas

3.16.9. Revisar las páginasperiódicamente

3.16.10. Los enlaces

3.1. Introducción

Las páginas web o páginas HTMLson unos ficheros escritos en el lenguajeHTML. El desarrollo de estas páginasabarca un amplio grupo de tecnologías,desde las páginas más sencillas que sólousan el lenguaje HTML hasta las máscomplejas que usan Dynamic HTML(DHTML) , JavaScript, appletsrealizados en Java o componentesActiveX.

El lenguaje HTML se basa enStandard Generalized MarkupLanguage (SGML), un sistema muchomás completo y complicado deprocesamiento de documentos queindica como organizar y marcar(etiquetar) un documento. HTML definee interpreta las etiquetas de acuerdo aSGML.

Las páginas HTML se puedendiseñar usando texto con distintos tiposde letras o colores, imágenes, listas deelementos, tablas, etc. Su modo deempleo es muy sencillo: se basa en eluso de etiquetas que indican queelementos contiene cada página, el

formato que hay que aplicar a cada unode ellos y como se tienen que distribuirpor la página.

3.2. Evolución de HTML

El nacimiento de HTML va ligadoal de la World Wide Web (WWW). Losorígenes de ambos se sitúan en 1991, enlos trabajos que llevaba a cabo TimBerners-Lee y sus compañeros en elCERN‹ 10 › en Suiza. Uno de losprimeros artículos en los que muestransus ideas es "World-Wide Web: TheInformation Universe"‹ 11 ›. En este

artículo detallan un sistema que permitarealizar el sueño de "interconectar todoel conocimiento de la humanidad yfacilitar su acceso a todo el mundogracias al empleo de los ordenadores".Para lograrlo, hacen uso de tecnologíascomo el hipertexto o la hipermedia,tecnologías que ya existían desde hacíavarios años (en contra de lo que la gentecree, estas tecnologías no fueroninventadas por ellos).

Entre las distintas partes quecomponen el sistema que proponen, seincluye "una sintaxis en el estilo deSGML" para proporcionar formato a losdocumentos. A partir de ahí nace

HTML como un lenguaje para elintercambio de documentos científicos ytécnicos. HTML evita la complejidadd e SGML al definir un pequeñoconjunto de etiquetas que simplifican laestructura de los documentos y las reglasno son tan estrictas como en SGML.

En octubre de 1994, Tim Berners-Lee, funda el World Wide WebConsortium (W3C) en elMassachusetts Institute of Technology,Laboratory for Computer Science[MIT/LCS] en colaboración con elCERN, y con el apoyo de DARPA‹ 12 ›y de la Comisión Europea. En abril de1995, el INRIA‹ 13 › se convierte en el

primer host europeo de W3C.El objetivo principal del W3C es

encabezar el desarrollo de la WWW,mediante la elaboración de protocolosque aseguren su estandarización. Hoy end í a , W3C lidera el desarrollo dedistintas tecnologías, como HTML,HTTP, Extensible Markup Language(XML) , Portable Network Graphics(PNG), etc. En el Cuadro 3.1 mostramoslas distintas versiones de HTML que sehan estandarizado‹ 14 › desde 1995.

Fecha VersiónNoviembre 1995 HTML 2.0

Enero 1997 HTML 4.0

Cuadro 3.1: Versiones de HTML

Diciembre 1997 HTML 3.2Diciembre 1999 HTML 4.01

Enero 2000 XHTML 1.0

En enero de 2000 apareceExtensible HyperText MarkupLanguage (XHTML) 1.0, el futurosustituto de HTML. Como dice elpropio estándar, se trata de "unareformulación de HTML en XML 1.0".XHTML es el lenguaje HTML escritosegún las normas que impone XML. Portanto, es una aplicación concreta de

XML y no deben confundirse entre sí.Las principales diferencias entre HTMLy XHTML 1.0 son:

Las etiquetas y atributos tienen queescribirse en minúsculas.

Los valores de los atributos tienenque ir entre comillas.

No se admiten atributos sin valor.

Todas las etiquetas tienen queaparecer por parejas (inicio y fin)o como etiquetas vacías.

3.3. Clasificación de laspáginas

Según como se generan las páginasweb en el servidor, se clasifican en:

Estáticas. Poseen un contenidofijo, todos los usuarios que lasconsultan reciben la mismainformación. El usuario recibe ensu navegador la página del servidorsin un procesamiento previo‹ 15 ›.

Dinámicas o activas en elservidor: poseen un contenido

variable, distintos usuarios alconsultar la misma página puedenrecibir distintos contenidos. Elusuario recibe en su navegador lapágina después de haber sidoprocesada en el servidor. Paralograrlo se emplean lenguajes deprogramación. Ejemplo: páginasgeneradas por un CGI, páginasASP, etc.

Por otro lado, según como sevisualizan las páginas en el cliente, seclasifican en:

Estáticas. Cuando no poseenningún tipo de código de script,applets o plug-ins. Ejemplo: sólo

código HTML.

Dinámicas o activas en el cliente.Cuando se interpreta o ejecutacódigo en el equipo del usuario.Para lograrlo se emplean lenguajesde programación y objetosintegrados. Ejemplo: páginas conJavaScript, DHTML, applets, etc.

Las características anteriores sepueden combinar como se quieran: unapágina puede ser estática en el servidory en el cliente, estática en el servidorpero dinámica en el cliente, dinámica enel servidor y estática en el cliente y, porúltimo, dinámica en el servidor y

dinámica en el cliente.Si nos planteamos crear páginas

dinámicas en el servidor o en el cliente,surgen una serie de ventajas ydesventajas. Las ventajas principales delas páginas activas en el cliente son:

Se descarga de trabajo al servidor,ya que la ejecución del código serealiza de forma distribuida encada cliente.

Se reduce el ancho de bandanecesario, ya que se evitancontinuos traspasos de informacióndel servidor al cliente y viceversa.

Ofrecen respuestas inmediatas al

usuario.

Sin embargo, existen algunas razonesque nos llevan a crear páginas activas enel servidor:

Cuando la información sobre la quese realiza el procesamiento es muyamplia, su envío al cliente suponeun ancho de banda grande.

Puede existir informaciónrestringida sobre la que se realiceel procesamiento y que no intereseque pueda llegar íntegra al cliente.

Las páginas activas en el cliente sebasan en tecnologías dependientes

del navegador y del sistemaoperativo del usuario. Presuponerque el usuario dispone de losrequisitos necesarios para quefuncionen las páginas es un error.

Las páginas activas en el clientepueden ser poco seguras.

Entonces, ¿cuál de las cuatrocombinaciones posibles elegir? Lamejor opción es la última: páginasdinámicas tanto en el servidor como enel cliente, ya que podremos aprovecharlas ventajas de las dos opciones yeliminar sus desventajas. Simplemente,habrá que distribuir la lógica de nuestra

aplicación entre el servidor y el cliente,de forma que se obtenga la solución másóptima a nuestro problema.

En este capítulo nos vamos a centraren el lenguaje HTML, que nos permiterealizar páginas estáticas en el cliente.En el Capítulo 5 veremos JavaScript,que nos permitirá realizar páginasdinámicas en el cliente. Ambastecnologías no influyen en la parte delservidor. El desarrollo de páginasactivas en el servidor queda fuera de losobjetivos de este libro.

3.4. Qué necesito para usar

HTML

No es necesario un servidor web, unproveedor web o tener una conexión aInternet para empezar a escribirdocumentos HTML. Los documentosHTML tienen un formato de texto plano(American Standard Code forInformation Interchange (ASCII)), porlo que todo lo que se necesita es uneditor (como el Bloc de notas deMicrosoft Windows) para crear laspáginas y un navegador para verlas.Podemos crear, vincular y probardocumentos HTML completos ennuestro ordenador, aunque no esté

conectado a ninguna red.Para facilitar la creación de páginas

HTML, han aparecido gran cantidad deprogramas. Básicamente, se puedendividir en dos grupos: los editores deHTML y los programas de diseñoHTML.

La mayoría de editores que ayudan aescribir HTML son simples editores detexto con algunos botones que pegan lasetiquetas más comunes. Otros, suelenincluir la característica syntaxhighlight: significa que el editor escapaz de comprender el lenguaje en elque se programa, y colorea las palabrasdiferenciándolas según sean etiquetas,

atributos, comentarios, etc.Por otro lado, los programas de

diseño muestran la página HTML deforma gráfica y en tiempo real: esposible desplazar los distintoselementos que la componen (tablas,imágenes, texto), modificar suspropiedades (tamaño, color, tipo deletra) y crear efectos avanzados. Uninconveniente de estos programas es quegeneran mucho código HTML: si en elfuturo se desea modificar la páginadirectamente a través del códigoHTML, es prácticamente imposible.Entre los mejores programas de estaclase destacan Adobe Golive, Claris

Home Page, MacromediaDreamWeaver y MicrosoftFrontPage.

Conviene aclarar desde un principioque lo único que da formato a unapágina web es una etiqueta HTML. Sieditamos con cuidado un archivo detexto con objeto de tener párrafos ycolumnas de cifras formateadas, pero nose incluye ninguna etiqueta, alvisualizarlo en HTML todo el textofluirá en un solo párrafo y se perderátodo el formato que le hayamosaplicado.

La extensión de un archivo HTMLsuele ser .html o .htm‹ 16 ›. Se deben

emplear nombres cortos y sencillos. Hayque evitar el uso de espacios o decaracteres especiales en el nombre delarchivo y también controlar el uso demayúsculas y minúsculas puesto que enInternet existen multitud de sistemasoperativos, que no pueden aceptar losmismos nombres de archivo que aceptael nuestro. Por ejemplo, hay sistemasoperativos en los que las mayúsculas yminúsculas se distinguen (Unix) y otrosdonde no (Microsoft Windows‹ 17 ›).

3.5. Conceptos básicos deHTML

El lenguaje HTML consta de unaserie de etiquetas o marcas (tags). Lamayoría de las etiquetas aparecen porparejas (códigos pareados), siendo unade comienzo (apertura) y otra de fin‹ 18› (cierre): delimitan la parte deldocumento HTML que se ve afectadapor su acción. Pero también hayetiquetas que aparecen de formaindividual, como <IMG> para insertaruna imagen.

Todas las etiquetas comienzan con elsímbolo < (menor que) y terminan con elsímbolo > (mayor que). Entre estos dossímbolos aparece el nombre de la

etiqueta. Por ejemplo, <HR> es unaetiqueta válida, pero <HR o <HR< no loson.

Las etiquetas de fin tienen el mismonombre que las de inicio, pero vanprecedidas del símbolo / (barrainclinada). Por ejemplo, la etiqueta decierre correspondiente a <HTML> es</HTML>.

Una etiqueta puede poseer variosatributos a los que hay que asignarvalor. Estos atributos suelen seropcionales y algunos necesitan un tipode valor concreto. Los atributos seescriben dentro de la etiqueta yseparados por espacios en blanco. Para

asignar un valor a un atributo se empleael signo igual (=). Por ejemplo, laetiqueta <IMG>, que no tiene una etiquetade cierre, tiene varios atributos, entreellos WIDTH y HEIGHT que esperan unvalor numérico y el atributo ALT queespera cualquier cadena de caracteres.

Cuando un usuario solicita unapágina HTML a un servidor web, esteenvía la página tal cual. En el momentoen que el explorador recibe la página,interpreta las etiquetas que la páginacontiene, mostrando al usuario elresultado final (donde no aparecen yalas etiquetas, sino el resultado de suevaluación).

3.5.1. Estructura de unapágina

La estructura básica de una página sedivide en cabecera (<HEAD> ...

</HEAD>) y cuerpo (<BODY> ...

</BODY>). El esqueleto básico de unapágina es:

Ejemplo 3.1

1<!DOCTYPE HTML PUBLIC".//W3C//DTD HTML4.0//EN">

2 <HTML>3 <HEAD>

4 Cabecera de la página5 </HEAD>6 <BODY>7 Cuerpo de la página8 </BODY>9 </HTML>

El sentido de cada una de las líneases:

Línea 1: Permite indicar la versiónHTML que se va a utilizar paraescribir la página. Normalmente nose incluye.

Línea 2: Junto a la línea 9, indicanel comienzo y fin de la página. Laetiqueta <HTML> es obligatoria.

Línea 3: Junto a la línea 5, indicanel comienzo y fin de la cabecera.

Línea 4: Lo que escribamos en lacabecera no se verá en la página.Se suele usar para indicar el títulode la página con <TITLE> ...</TITLE>, incluir código que seejecuta en el cliente con <SCRIPT>... </SCRIPT>, definir un estilocon <STYLE> ... </STYLE> oincluir información sobre elcontenido de la página con laetiqueta <META>.

Línea 6: Junto a la línea 8, indicanel comienzo y fin del cuerpo.

Línea 7: Lo que escribamos en elcuerpo se verá en la página. Lainformación contenida en estasección se puede visualizar conapariencias muy diversas: sólo hayque aplicar distintos formatos a lassecciones que la componen.

Cuando se escriban las etiquetas defin hay que llevar mucho cuidado en elorden. Por ejemplo, en el esqueletoanterior, la etiqueta <HTML> apareceantes que <BODY>; la última etiqueta enaparecer es la primera que se tiene quecerrar. Por tanto, el orden correcto esprimero </BODY> y luego </HTML>.

El siguiente código crea una páginaHTML sencilla, que podemos ver en laFigura 3.1. El título indicado sóloaparece en la barra de título de laventana activa del navegador. El títulose indica usando los código pareados<TITLE> ... </TITLE>, y seespecifica usando un texto plano, sincódigos HTML de formato (no se puedeponer en negrita o cursiva, por ejemplo).

Ejemplo 3.21 <HTML>2 <HEAD>

3<TITLE>Esto es una páginaHTML</TITLE>

4 </HEAD>

5 <BODY>

6Esto es el cuerpo de unapágina HTML

7 <BR>

8Esto tiene que apareceren una línea nueva

9 </BODY>10 </HTML>

Es muy aconsejable poner título atodos los documentos y, además, sedeberá procurar que éste sea lo másdescriptivo posible, puesto que si algúnusuario decide incluir nuestra página ensu lista de enlaces (bookmarks), será eltítulo lo que quede almacenado en dichalista (junto con la URL). En el caso de

que no se haya especificado un título, loque se almacena en la lista de enlaces esla dirección de la página (URL).

Figura 3.1: Primera página HTML

En cualquier parte de una páginaHTML, si queremos incluir uncomentario deberemos emplear laetiqueta . Loscomentarios no se procesan y no

producen una salida visible en la página.Los saltos de línea que incluyamos

en una página son irrelevantes (elnavegador no los tiene en cuenta). Paraproducir un salto de línea se emplea laetiqueta <BR>. Los espacios en blancotambién son irrelevantes: si separamosdos palabras por varios espacios enblanco, sólo se tendrá en cuenta uno deellos. Si queremos incluir variosespacios en blanco, debemos de emplearel código de escape . Porejemplo, para incluir tres espacios enblanco se tiene que escribir .

3.5.2. Caracteres especialesy secuencias de escape

Algunos sistemas informáticostrabajan con 7 bits en vez de 8. En esoscasos, si se desea trabajar concaracteres ASCII de la parte superior dela tabla (128-255), es necesariocodificarlos de algún modo. En losdocumentos HTML se pueden codificarde dos formas, mediante referenciasdecimales o referencias a entidades.

Las referencias decimales (tambiénllamadas secuencias de escape) usan elformato &#nnn; donde nnn es el código

ASCII del carácter. Por ejemplo,Á representa el carácter Á.

Las referencias a entidades usan elformato &aaaa; donde aaaa es unacadena de texto que representa elcarácter. Por ejemplo, Árepresenta el carácter Á.

Además, existen algunos caracteresde la parte inferior de la tabla decaracteres ASCII que poseen unsignificado especial en HTML, por loque es necesario codificarlos. En elCuadro 3.2 figuran los caracteresespeciales con su secuencia de escape.

Carácter Decimal Entidad

Cuadro 3.2: Caracteres con unsignificado especial en HTML

" " "& & &< < <> > >

También existen otros caracteres queson difíciles de conseguir desde elteclado, ya que no están representados.En el Cuadro 3.3 figuran algunos de losmás significativos.

Carácter Decimal Entidad§ § §© © ©

Cuadro 3.3: Caracteres especiales

® ® ®¶ ¶ ¶

3.6. Metadatos

La etiqueta <META> permite indicarmetadatos‹ 19 › de una forma muysimple. Permite incorporar informaciónsobre el contenido de una página. Estaetiqueta sólo puede aparecer en las e c c i ó n <HEAD>. Esta etiqueta la

emplean los motores de búsqueda, losnavegadores y las herramientas dediseño de páginas web.

La etiqueta <META> presenta dosvariantes. La sintaxis de estas dosvariantes es:

<META HTTP-EQUIV="propiedad"

CONTENT="contenido">. Elatr ibuto HTTP-EQUIV se empleacuando la página web se recuperamediante HTTP. Los servidoresweb pueden usar el nombre de lapropiedad para crear una cabecerasegún el estándar Request forComments (RFC) 822‹ 20 › en la

cabecera de la respuesta HTTP(algunas propiedades de lacabecera no se pueden fijar de estaforma). Por ejemplo, la siguienteetiqueta <META>:<META HTTP-EQUIV="Expires"CONTENT="Tue, 20 Aug 199614:25:27 GMT">

se convierte en la siguientecabecera HTTP:Expires: Tue, 20 Aug 199614:25:27 GMT

que puede ser usada por la cachedel navegador o por los servidoresproxy para saber hasta cuando sepuede emplear la copia de una

página existente en la caché.

<META NAME="propiedad"CONTENT="contenido">. Seemplea para incluir propiedadesdel documento, tales como autor,fecha de caducidad, una lista depalabras clave, etc. El atributoNAME indica el nombre de lapropiedad mientras que el atributoCONTENT especifica su valor. Porejemplo, las siguientes etiquetas<META> indican el autor, unadescripción, una lista de palabrasclave y la fecha de creación de unapágina:

Ejemplo 3.3

1 <META NAME="Author"CONTENT="Sergio LujánMora">

2<META NAME="Rights"CONTENT="Sergio LujánMora">

3<META NAME="Description"CONTENT="Una página deprueba">

4<META NAME="Keywords"CONTENT="curso, html,diseño, web">

5<META NAME="Date"CONTENT="Monday, 1January, 2001">

A título de ejemplo, la páginaprincipal de la web de la Universidadde Alicante contiene los siguientesmetadatos:

Ejemplo 3.41

<META HTTP-EQUIV="pragma"CONTENT="no-cache">

2<META NAME="Author"CONTENT="Universidad deAlicante">

3<META NAME="Copyright"CONTENT=" © Universidadde Alicante">

4<META NAME="Description"CONTENT="Web que recogetoda la ...">

5

<META NAME="keywords"CONTENT="Universidad deAlicante, Alicante ...">

6<META NAME="Formatter"CONTENT="Mozilla/4.5 [es](Win98; I)[Netscape]">

7<META NAME="Generator"CONTENT="Mozilla/4.5 [es]

(Win98; I)[Netscape]">

8<META NAME="robots"CONTENT="index, follow">

9<META HTTP-EQUIV="Content-Language"CONTENT="ES">

10

<META HTTP-EQUIV="Content-Script-Type"CONTENT="JavaScript">

11

<META HTTP-EQUIV="Content-Type"CONTENT="text/html;charset=iso-8859">

3.7. Etiquetas HTML

Existen cientos de etiquetas, cadauna con su conjunto de atributos.Además, no existe un estándar queacepten todos los navegadores: los dosprincipales navegadores, NetscapeNavigator y Microsoft InternetExplorer, presentan diferencias entreellos, aceptando cada uno etiquetas queno acepta el otro. Existe un intento deestandarización por parte de W3C, queperiódicamente publica borradores,recomendaciones y estándaresdefinitivos. La última recomendación esXHTML 1.0 (combinación de HTML yXML), que sustituye a HTML 4.01.

Las etiquetas HTML (reconocidas

p o r Netscape Navigator 4.0 ysuperiores) las podemos clasificar enlas siguientes categorías (en estaclasificación una etiqueta sólo apareceen una categoría, pero realmente hayetiquetas que se pueden clasificar envarias categorías):

Etiquetas que definen la estructuradel documento: <HTML>, <HEAD> y<BODY>.

Etiquetas que pueden ir en lacabecera: <TITLE>, <BASE>,<META>, <STYLE> y <LINK>.

Etiquetas que definen bloques detexto: <ADDRESS>, <BLOCKQUOTE>,

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

Etiquetas de listas: <DIR>, <DL>,<DT>, <DD>, <MENU>, <OL>, <UL> y<LI>.

Etiquetas de características deltexto: <B>, <BASEFONT>, <BIG>,<BLINK>, <CITE>, <CODE>, <EM>,<FONT>, <I>, <KBD>,<PLAINTEXT>, <SMALL>, <S>,<STRIKE>, <STRONG>, <SUB>,<SUP>, <TT>, <U> y <VAR>.

Etiquetas de anclas y enlaces: <A>.

Etiquetas de imágenes y mapas deimágenes: <IMG>, <AREA> y <MAP>.

Etiquetas de tablas: <TABLE>,<CAPTION>, <TR>, <TD> y <TH>.

Etiquetas de formularios: <FORM>,<INPUT>, <SELECT>, <OPTION>,<TEXTAREA>, <KEYGEN> y<ISINDEX>.

Etiquetas de marcos:<FRAME>,<FRAMESET> y<NOFRAMES>.

Etiquetas de situación decontenidos: <LAYER>, <ILAYER> y<NOLAYER>.

Etiquetas de script: <SCRIPT>,<NOSCRIPT> y <SERVER>.

Etiquetas de applets y plug-ins:<APPLET>, <PARAM>, <EMBED>,<NOEMBED> y <OBJECT>.

Etiquetas de ajuste del texto: <BR>,<CENTER>, <HR>, <MULTICOL>,<NOBR>, <SPACER>, <SPAN> y<WBR>.

Vamos a comentar las etiquetas másimportantes (las más empleadas) con losatributos más comunes. No es unaexplicación exhaustiva, pero suficientepara un primer contacto con HTML. Enel Apéndice A se puede consultar unarelación con todas las etiquetas queacepta Netscape Communicator 4.0.

3.8. Formato del texto

En esta sección vamos a repasar lasetiquetas más importantes que permitenasignar formato al texto: losencabezados de sección, los estiloslógicos y físicos, la etiqueta <FONT>... </FONT> y por último, comoalinear el texto.

3.8.1. Encabezados desecciones

Existen seis niveles de encabezados,numerados del 1 al 6, y según tamañosdecrecientes: el nivel 1 es la etiqueta<H1> ... </H1> (la más prominente) yel nivel 6 es la etiqueta <H6> ...

</H6> (la menos prominente). Losencabezados se suelen mostrar con tiposde letra más grandes, en negrita o másenfatizados que el texto normal. Pero losniveles 5 y 6 aparecen normalmente conun tamaño inferior al del texto normal.El tamaño de cada encabezado loselecciona el navegador, por lo que laapariencia puede variarsignificativamente de uno a otro.

Cuando se visualizan, los

encabezados comienzan en una líneanueva y se suele dejar un espacio enblanco extra antes de ellos. La sintaxisde esta etiqueta es:

Ejemplo 3.5

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

donde n es un número del 1 al 6 y ela t r i b u t o ALIGN especifica elalineamiento horizontal del encabezado‹21 ›. Por ejemplo, en la Figura 3.2vemos como se visualiza el siguientecódigo en un navegador.

Ejemplo 3.6

Ejemplo 3.61 <HTML>2 <BODY>3 Texto normal

4<H1>Encabezado nivel1</H1>






10 Texto normal11 </BODY>12 </HTML>

Figura 3.2: Ejemplo de encabezados

3.8.2. Formatos de

caracteres

Las siguientes etiquetas se puedenemplear en línea (inline), lo quesignifica que no interrumpen el fluir deltexto (no producen saltos de línea ninada similar). Por tanto, se puedenaplicar a caracteres individuales.

Los formatos (también llamadosestilos) se dividen en lógicos y físicos.Los formatos lógicos dependen delnavegador (cada uno lo puedeinterpretar de distinta forma), mientrasque los formatos físicos siempre serepresentan de la misma forma.

El siguiente código HTML muestra

las etiquetas de los formatos máscomunes. En la Figura 3.3 vemos comose visualiza en un navegador.

Ejemplo 3.71 <HTML>2 <BODY>3 Formatos físicos:<BR>

4<B>Texto en negrita: <B></B><BR>

5<I>Texto en cursiva: <I></I><BR>

6<U>Texto subrayado: <U></U><BR>

7<TT>Texto en teletipo(fuente fija): <TT></TT><BR>

8<STRIKE>Texto tachado:<STRIKE></STRIKE><BR>

9 <S>También funciona <S></S><BR>

10 <BR>11 Formatos lógicos:<BR>

12<CITE>Cita: <CITE></CITE><BR>

13<CODE>Código: <CODE></CODE><BR>

14<DFN>Definición: <DFN></DFN><BR>

15<EM>Enfatizado: <EM></EM><BR>

16<KBD>Texto tecleado:<KBD></KBD><BR>

17<STRONG>Texto grueso:<STRONG></STRONG><BR>

18<VAR>Texto variable:<VAR></VAR><BR>

19 </BODY>20 </HTML>

Figura 3.3: Formatos físicos y lógicos

3.8.3. La etiqueta <FONT>

La etiqueta <FONT> ... </FONT>

permite modificar el tipo de letra, eltamaño y el color del texto . Todo eltexto entre las etiquetas <FONT> ...

</FONT> se muestra según los valoresespecificados en los atributos de laetiqueta.

Para modificar el tipo de letra seemplea el atributo FACE. Se le puedeindicar una lista de tipos de letrasseparados por comas. El navegadorcomprueba si el primer tipo de letra estádisponible, si no es así prueba con elsegundo y así sucesivamente. Si ningunode los tipos de letra está disponible, nose produce ningún cambio en el tipo deletra.

Los tipos de letra pueden serespecíficos o genéricos. Entre losprimeros, los más empleados son Arial,Courier, Helvetica , Tahoma, Times yVerdana. Los tipos de letra genéricoss o n serif, sans-serif, cursivev,monospace y fantasy. El siguientecódigo muestra el uso de distintos tiposde letra. En la Figura 3.4 podemosobservar como se visualiza en unnavegador. Como se ve en la imagen delnavegador, el texto escrito enHelvetica aparece con el tipo de letrapor defecto; esto se debe a que en elordenador en el que se visualiza lapágina no está disponible el tipo de letra

Helvetica.

Ejemplo 3.81 <HTML>2 <BODY>

3 Tipos de letraespecíficos:<BR>

4<FONT FACE="Arial">Textoen Arial</FONT><BR>

5<FONTFACE="Helvetica">Texto enHelvetica</FONT><BR>

6<FONT FACE="Tahoma">Textoen Tahoma</FONT><BR>

7 <BR>

8Tipos de letra genéricos:<BR>

9<FONT FACE="serif">Textoen serif</FONT><BR>

10 <FONT FACE="sans-serif">Texto en sans-serif</FONT><BR>

11<FONTFACE="cursive">Texto encursive</FONT><BR>

12

<FONTFACE="monospace">Texto enmonospace</FONT><BR>

13<FONTFACE="fantasy">Texto enfantasy</FONT><BR>


Figura 3.4: Distintos tipos de letra conla etiqueta <FONT>

Para modificar el tamaño se empleael atributo SIZE. Este atributo define eltamaño de forma relativa, en unintervalo del 1 (letra más pequeña) a 7(letra más grande). El tamaño base pordefecto es 3‹ 22 ›. También se puede

indicar un valor relativo al tamaño basesi se emplean los signos + o -. Porejemplo, +2 significa un incremento endos unidades respecto al tamaño base.En la Figura 3.5 vemos como sevisualiza el siguiente código quemuestra el uso del atributo SIZE.


3Distintos tamaños deletra:<BR>

4<FONT SIZE="1">Texto en1</FONT><BR>


6<FONT SIZE="3">Texto en

3</FONT><BR>7

<FONT SIZE="4">Texto en4</FONT><BR>





Figura 3.5: Distintos tamaños de letracon la etiqueta <FONT>

3.8.4. Alineamiento deltexto

La etiqueta <P> ... </P> seemplea para marcar párrafo de texto. Unpárrafo comienza en una línea nueva y elnavegador suele dejar un espacio enblanco extra antes del párrafo.

Para alinear el contenido de unpárrafo se emplea el atributo ALIGN. Elcontenido del párrafo puede alinearse ala izquierda (LEFT), a la derecha(RIGHT), centrado (CENTER) ojustificado (JUSTIFY). El siguientec ó d i go HTML muestra el mismopárrafo alineado de cuatro formasdistintas. En la Figura 3.6 podemos verel código visualizado en un navegador.

Ejemplo 3.10

Ejemplo 3.101 <HTML>2 <BODY>3 <P ALIGN="LEFT">

4

Los enlaces ohiperenlaces permitenrelacionar distintaspáginas

5entre sí (hipertexto).Esta característica da laposibilidad de

6organizar la informaciónen distintas páginas HTMLenlazadas, de

7

forma que el usuariopueda seleccionar la quemás le interese en

8 cada momento.9 </P>10 <P ALIGN="RIGHT">

11


12entre sí (hipertexto).Esta característica da laposibilidad de


14forma que el usuariopueda seleccionar la quemás le interese en

15 cada momento.16 </P>17 <P ALIGN="CENTER">

18


19 entre sí (hipertexto).Esta característica da laposibilidad de



22 cada momento.23 </P>24 <P ALIGN="JUSTIFY">

25


26

entre sí (hipertexto).Esta característica da laposibilidad de

organizar la información

27 en distintas páginas HTMLenlazadas, de


29 cada momento.30 </P>31 </BODY>32 </HTML>

Figura 3.6: Alineamiento de párrafos:izquierda, derecha, centrado y

justificado

Los bloques de texto se especificanusando la etiqueta <BLOCKQUOTE> ...</BLOCKQUOTE>. Un bloque de textoaparece sangrado hacia la derecha. Se

suele emplear para marcar citastextuales o deniciones de especialrelevancia. Los bloques de texto sepueden anidar para producir un mayorsangrado. El siguiente código muestra elempleo de esta etiqueta. En la Figura 3.7se puede ver como se muestra en unnavegador web.


3Este texto no tienesangría.

4 <BLOCKQUOTE>5 1. Un nivel de sangría.6 <BLOCKQUOTE>

2. Dos niveles de

7 sangría.8 <BLOCKQUOTE>

93. Tres niveles desangría.

10 </BLOCKQUOTE>11 </BLOCKQUOTE>12 Volvemos al nivel 1.

13 </BLOCKQUOTE>14 Volvemos a texto15 sin sangría.16 </BODY>17 </HTML>

Figura 3.7: Bloques de texto con distintasangría

3.9. Listas

Las listas permiten organizar lainformación de una manera lógica, loque facilita su legibilidad. Existen cincotipos de listas en HTML: listas dedefinición, listas ordenadas, listas noordenadas, listas de directorio y listasde menú. Como las dos últimas listasestán obsoletas, ya que se visualizancomo las listas no ordenadas, no lasvamos a ver.

Las listas se pueden anidar entre sí,incluso si son de distinto tipo. En elcaso de anidar listas no numeradas, cadanivel de anidamiento tendrá un tipo desímbolo distinto.

3.9.1. Listas de definición

Una lista de definición se empleapara mostrar términos con suscorrespondientes definiciones, como sise tratase de un glosario o diccionario.

Una lista de definición se crea con laetiqueta <DL> ... </DL> (definitionlist). Contiene una serie de términos,que se definen con la etiqueta <DT>(definition term), y cada término poseeuna o más definiciones, que se indicancada una con la etiqueta <DD>(definition description). Lasdefiniciones de cada término aparecen

con una sangría hacia la derecha.El siguiente ejemplo muestra como

se usan estas etiquetas. Aunque laslíneas que contienen las etiquetas <DD>aparecen con unos espacios en blanco alprincipio, estos no influyen para nada ensu visualización. En la Figura 3.8 vemosel resultado que produce este ejemplo.

Ejemplo 3.121 <HTML>2 <BODY>3 <DL>4 <DT>BANCO

5<DD>Lugar donde sedeposita dinero

6<DD>Sitio donde se sientala gente

7 <DT>GATO

8<DD>Animal de cuatropatas con pelo

9<DD>Herramienta paralevantar un vehículo

10 <DT>ORDENADOR

11<DD>Aparato electrónicoque realiza cálculos

12 </DL>13 </BODY>14 </HTML>

Figura 3.8: Listas de definición

3.9.2. Listas ordenadas

En las listas ordenadas o numeradas,cada elemento aparece numerado. Laetiqueta <OL> ... <OL> (ordered list )define una lista de este tipo. Cadaelemento se define con la etiqueta <LI>(list item). Esta etiqueta posee dosatributos: START y TYPE.

El atributo START indica el valordesde el que se empieza la numeración;tiene que ser un valor positivo.

El atributo TYPE indica el tipo denumeración de los elementos de la lista.Los posibles valores de este atributosson:

A: indica una numeración con letras

en mayúscula.

a: indica una numeración con letrasen minúscula.

I: indica una numeración connúmeros romanos en mayúsculas.

i: indica una numeración connúmeros romanos en minúsculas.

1: indica una numeración connúmeros.

El siguiente ejemplo muestra el usode esta etiqueta. Además, también sepuede ver como se pueden anidar listas(incluir una lista dentro de otra lista). En

la Figura 3.9 vemos como se muestraesta página.


3Lista normal, conanidamiento:

4 <OL>5 <LI>Elemento 1

6 <LI>Elemento 27 <LI>Lista anidada:8 <OL>9 <LI>Elemento 110 <LI>Elemento 211 </OL>12 </OL>

13Lista numerada con letras

en mayúsculas:14 <OL TYPE="A">15 <LI>Elemento 116 <LI>Elemento 217 </OL>

18Lista numerada connúmeros romanos:

19 <OL TYPE="i">20 <LI>Elemento 121 <LI>Elemento 222 </OL>23 </BODY>

24 </HTML>

Figura 3.9: Listas ordenadas

3.9.3. Listas no ordenadas

En las listas no ordenadas, loselementos aparecen marcados medianteunos pequeños elementos gráficos,llamados en inglés bullet. La etiqueta<UL> ... </UL> (unordered list )define una lista no ordenada. Cadaelemento se define con la etiqueta <LI>(list item).

Esta etiqueta posee el atributo TYPE,que permite cambiar el elemento gráficoempleado para marcar los elementos.Los posibles valores que puede tomareste atributo son:

CIRCLE: un disco con el centrovacío.

DISC: un disco sólido.

SQUARE: un cuadrado.

El siguiente código muestra como seemplea esta etiqueta. Además, en laúltima lista hay un anidamiento de variaslistas. En la Figura 3.10 se puede verque cuando se anidan varias listas, elelemento gráfico bullet cambiaautomáticamente, según cual sea el nivelde anidamiento.

Ejemplo 3.141 <HTML>2 <BODY>3 <UL TYPE="CIRCLE">4 <LI>Elemento 1

5 <LI>Elemento 26 </UL>7 <UL TYPE="DISC">8 <LI>Elemento 19 <LI>Elemento 210 </UL>11 <UL TYPE="SQUARE">12 <LI>Elemento 113 <LI>Elemento 214 </UL>15 <UL>16 <LI>Elemento a:17 <UL>18 <LI>Elemento b:19 <UL>20 <LI>Elemento c:21 </UL>22 </UL>23 </UL>

Figura 3.10: Listas no ordenadas

3.10. Colores

En HTML se puede cambiar el colorde distintos elementos, como el color defondo de una página, el color del texto,el color de una tabla, etc. Existen dosformas de especificar los colores:

Mediante las componentes RedGreen Blue (RGB). Mediante estacodificación, se especifica laintensidad de los colores básicosrojo, verde y azul que permitenobtener por combinación cualquierotro color. Cada componente puedevariar entre 0 y 255, por lo que setienen 16 777 216 (256 x 256 x256) colores. Las componentes setienen que expresar en hexadecimaly al principio se tiene que poner el

signo #; por tanto, el formatogeneral es #RRGGBB. Por ejemplo,el color negro se representamediante #000000, el color blancocomo #FFFFFF y un rojo brillantecomo #FF0000.

Mediante los nombres de loscolores. Existen una serie decolores a los que se les ha asignadoun nombre en inglés, como green,olive o white.

En el Apéndice B se incluye másinformación sobre el uso de colores enHTML y como pasar las componentesRGB de decimal a hexadecimal.

3.10.1. Color de fondo deuna página

El color de fondo de una página sepuede cambiar mediante el atributoBGCOLOR de la etiqueta <BODY> ...

</BODY>.

3.10.2. Color del texto

La etiqueta <FONT> ... </FONT>

posee el atributo COLOR que permiteindicar el color del texto. También sepuede cambiar el color del texto para

toda una página, el color de los enlaces,el color de los enlaces visitados y elcolor de los enlaces al activarse. Paraello se emplean los atributos TEXT,LINK, VLINK y ALINK de la etiqueta<BODY> ... </BODY>.

En el siguiente ejemplo, se cambiael color del texto y de los enlaces paraque todos tengan el mismo color y no sepuedan diferenciar unos de otros.

Ejemplo 3.151 <HTML>

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

3<AHREF="http://www.ua.es">Universidad

de Alicante</A>4 <BR>

5<AHREF="http://www.eps.ua.es">EscuelaPolitécnica Superior</A>

6 </BODY>7 </HTML>

3.11. Enlaces

Los enlaces o hiperenlaces permitenrelacionar distintas páginas entre sí(hipertexto). Esta característica da laposibilidad de organizar la informaciónen distintas páginas HTML enlazadas,de forma que el usuario pueda

seleccionar la que más le interese encada momento.

Un hiperenlace puede hacerreferencia a un punto determinado de lapágina que lo contiene, a otra páginaHTML o a un punto determinado de otrapágina HTML. En los dos últimoscasos, la página destino puede residir enel mismo servidor que la página quecontiene el hiperenlace o en otrodistinto.

La etiqueta que utiliza HTML paradefinir un hiperenlace es <A> ...

</A>. Todo aquello que aparezca en unapágina HTML entre dichas etiquetas seconsidera un hiperenlace (será el objeto

sensible que al ser pulsado producirá elsalto al destino del enlace).Normalmente suele utilizarse texto eimágenes como hiperenlaces.

3.11.1. Enlace a un puntodel mismo documento

Un enlace de este tipo consta de dospartes: una referencia y un destino. Eldestino se identifica por un nombre. Lareferencia hará alusión al nombre deldestino. En una página se pueden incluirvarias referencias a un mismo destino,pero no se pueden crear varios destinos

con el mismo nombre. La forma dedefinir este enlace es:

Referencia: <AHREF="#nombre">objeto delenlace</A>.

Destino: <ANAME="nombre">objeto deldestino</A>.

Como puede observarse, en el casode la referencia el nombre al que hacealusión va precedido del símboloalmohadilla (#), mientras que en eldestino no.

En el siguiente código de ejemplo,tenemos un enlace sobre la misma

página. En la Figura 3.11 vemos que lapalabra enlace es un enlace; al pulsarsobre ella saltamos al destino quepodemos ver en la Figura 3.12.



4 </HEAD>5 <BODY>

6Aquí tenemos un <AHREF="#destino">enlace</A>sobre la misma

7página. Hay que dejarmuchas líneas en blancopara que se

8 pueda comprobar el efecto.

9 <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

10<A NAME="destino">Esto</A>es el destino del enlaceque aparece

11 al principio de la página.12 </BODY>13 </HTML>

Figura 3.11: Enlace a un destino interno

Figura 3.12: Destino del enlace interno

3.11.2. Enlace a otrodocumento

Para incluir un enlace en undocumento a otro documento,

simplemente hay que incluir en eldocumento origen una referencia aldocumento destino. En este último nohace falta indicar que es destino de unenlace. La forma de definir este enlacees:

Referencia: <AHREF="pagina.html">objetodel enlace</A>.

Muy importante: cuando indiquemosel nombre del documento destino(pagina.html), hay que tener muchocuidado con las mayúsculas yminúsculas. En el siguiente ejemplotenemos dos páginas con colores de

fondo distintos; en cada una de ellasfigura un enlace a la otra.

Página html4a.html (Figura3.13):



4 </HEAD>5 <BODY BGCOLOR="#FFBBBB">

6<B>Aquí tenemos un <AHREF="html4b.html">enlace</A>a otra

7página que tiene el fondoazul.</B>

8 </BODY>

9 </HTML>

Figura 3.13: Página con enlace a otrapágina

Página html4b.html (Figura3.14):

Ejemplo 3.181 <HTML>2

<HEAD>3<TITLE>Esto es una páginaHTML</TITLE>

4 </HEAD>5 <BODY BGCOLOR="#BBBBFF">

6<B>Aquí tenemos un <AHREF="html4a.html">enlace</A>a otra

7página que tiene el fondorojo.</B>

8 </BODY>9 </HTML>

Figura 3.14: Página con enlace a otrapágina

3.11.3. Enlace a un punto deotro documento

Este tipo de enlace es una

combinación de los dos anteriores. Laforma de definir este enlace es:

Referencia: <AHREF="pagina.html#nombre">objetodel enlace</A>.

Destino: <ANAME="nombre">objeto deldestino</A>.

En el siguiente ejemplo tenemos unapágina con dos enlaces a la mismapágina, pero a distintos destinos dentrode esa página.

Página html5a.html (Figura3.15):

Ejemplo 3.191 <HTML>2 <HEAD>3 <TITLE>Esto es una página HTML</TITLE>4 </HEAD>5 <BODY>

6<B>Aquí tenemos un <AHREF="html5b.html#destino1">enlace</A>

7 a un destino de otra página.8 <BR><BR>

9Aquí tenemos otro <AHREF="html5b.html#destino2">enlace</A>

10a otro destino de la misma página queantes.

11 </B>12 </BODY>13 </HTML>

Figura 3.15: Página con dos enlaces aotra página

Página html5b.html (Figura3.16):


3<TITLE>Esto es una página

HTML</TITLE>4 </HEAD>5 <BODY>

6<B>Aquí tenemos un <ANAME="destino1">destino</A>,el número 1.

7<BR><BR><BR><BR><BR><BR><BR><BR>

8<BR><BR><BR><BR><BR><BR><BR><BR>

9Aquí tenemos otro <ANAME="destino2">destino</A>,el número 2.

10 </B>11 </BODY>12 </HTML>

Figura 3.16: Página destino de losenlaces

3.12. Tablas

Hasta que aparecieron las tablas enel lenguaje HTML, la única posibilidad

de tabular cosas en una página consistíaen usar texto con preformato (<PRE>... </PRE>) y colocar manualmente losespacios hasta que las columnasestuviesen perfectamente alineadas. Esteproceso, además de ser realmentetedioso, no ofrece resultados con lavistosidad deseada.

Las tablas se construyen siguiendouna serie de reglas sencillas:

Las tablas en HTML se definenmediante los códigos pareados<TABLE> ... </TABLE>.

Una tabla se compone de celdillasde datos. Una celdilla se define

usando los códigos <TD> ...</TD>.

Las celdillas se agrupan en filas,que se definen con los códigos<TR> ... </TR>.

Pueden existir celdillas que seemplean como encabezados de filaso columnas, y se definen con loscódigos <TH> ... </TH>. Estetipo de celdas suele aparecerdiferenciada de las otras,normalmente en negrita.

Las celdillas pueden contenercualquier elemento HTML: texto,imágenes, enlaces e incluso otrastablas anidadas.

El siguiente ejemplo muestra unatabla con bordes formada por nueveceldas, de las que tres forman parte delencabezado. La tabla se ha dividido entres filas y tres columna. En la Figura3.17 vemos como se ve esta página enuna navegador.

Ejemplo 3.211 <HTML>2 <BODY>3 <TABLE BORDER="1">4 <TR>5 <TH>Cabecera 1</TH>6 <TH>Cabecera 2</TH>7 <TH>Cabecera 3</TH>8 </TR>9 <TR>

10 <TD>Elemento (1, 1)</TD>

11<TD>Elemento (1, 2)

</TD>


</TD>13 </TR>14 <TR>


</TD>


</TD>

17 <TD>Elemento (2, 3)</TD>

18 </TR>19 </TABLE>20 </BODY>21 </HTML>

Figura 3.17: Tabla sencilla

Los atributos más importantes de laetiqueta <TABLE> son:

BGCOLOR="color". Color de fondode la tabla.

BORDER="n". Indica el grosor delborde exterior de la tabla y de las

líneas delimitadoras interiores. Unvalor 0 produce que no tengaborde.

CELLPADDING="n". Determina elespacio que debe existir entre losbordes de cada celdilla y elcontenido de la celda.

CELLSPACING="n". Especifica lacantidad de espacio que debeexistir entre celdas contiguas.

HEIGHT="n" | "n %". Alto de latabla. Se puede indicar en pixels oen tanto por ciento en relación a laaltura total disponible.

WIDTH="n" | "n %". Ancho de la

tabla. Se puede indicar en pixels oen tanto por ciento en relación a laanchura total disponible.

Los atributos más importantes de lasetiquetas <TR>, <TH> y <TD> son:

ALIGN="LEFT" | "CENTER" |"RIGHT". Alineamiento horizontaldel contenido de una celda.

vBGCOLOR="color". Color defondo de una celda.

VALIGN="BASELINE" | "BOTTOM"| "MIDDLE" | "TOP".Alineamiento vertical delcontenido de una celda.

3.12.1. Tablas invisibles

Se conoce como tablas invisibles aaquellas que no poseen borde(BORDER="0"). Las tablas invisibles sonmuy útiles para distribuir los distintoselementos en una página HTML.

Por ejemplo, mediante tablasinvisibles se puede mostrar el texto conmárgenes a la izquierda y a la derecha,mostrar texto a varias columnas, dividiruna imagen en diferentes ficheros y quese muestre como si no estuviesedividida, etc.

3.12.2. Tablas como marcos

Las tablas son muy útiles para crearmarcos alrededor del texto o cualquierotro elemento de una página HTML. Sepueden conseguir efectos muy elegantesy a su vez sencillos de realizar mediantediversas tablas anidadas. Por ejemplo,el siguiente código, cuyo resultado semuestra en la Figura 3.18, muestra untexto sobre un fondo rojo rodeado de unmarco amarillo en una página cuyofondo es de color naranja. El tamaño delas celdas de la tabla exterior se ha

modificado mediante el atributoCELLPADDING="10" para obtener unmarco más ancho.

Ejemplo 3.221 <HTML>2 <BODY BGCOLOR="orange">3 <CENTER>

4

<TABLE BORDER="0"BGCOLOR="yellow"CELLPADDING="10">

5 <TR><TD>

6<TABLE BORDER="0"

BGCOLOR="red">7 <TR><TD>

8<FONT SIZE="5">HTML

útil y práctico</FONT>9 </TD></TR>10 </TABLE>

11 </TD></TR>12 </TABLE>13 </CENTER>14 </BODY>15 </HTML>

Figura 3.18: Tablas como marcos

3.13. Imágenes

Al inicio de la web, el empleo deimágenes en los documentos HTML eramuy escaso‹ 23 ›. Sin embargo, hoy estodo lo contrario y es muy difícilencontrar páginas que no empleen unagran cantidad de imágenes.

Los dos formatos de imagen queadmiten la mayoría de los navegadoress o n Graphics Interchange Format(GIF) y Joint Photographic ExpertsGroup (JPEG). Las característicasbásicas de ambos formatos se hanresumido en el Cuadro 3.4.

Característica GIF JPEG

Cuadro 3.4: Diferencias entre GIF y JPEG

Colores 256 (8bits)

16 777216 (24

bits)Transparencia Sí NoAnimación Sí No

Compresión Sinperdidas

Conperdidas

Dibujo Sí NoFotografía No Sí

También existe el formato PNG, quese ha creado como sustituto de GIF.Este formato gráfico se ha creadoespecíficamente para Internet y otrasredes de ordenadores. Sus

características más importantes son:transparencia alfa, color de 24 bits y unacompresión mejor que GIF. Además,emplea compresión sin pérdidas‹ 24 ›.Aunque Microsoft Internet Explorer yNetscape Communicator en susúltimas versiones ya lo soportan, aún nose encuentra muy extendido su uso.

3.13.1. Etiqueta <IMG>

La etiqueta HTML que permiteinsertar una imagen en un documento es<IMG>. Una imagen se puede colocar encualquier punto de un documento: en un

enlace, en una tabla, etc. Los atributosmás importantes de esta etiqueta son:

SRC="localización". Indica lalocalización y el nombre de laimagen que se quiere insertar.

BORDER="anchura". Anchura delborde que se crea alrededor de laimagen. Cuando se coloca unaimagen en un enlace,automáticamente se crea un borde;si no se quiere que aparezca elborde, hay que asignar el valor 0 aeste atributo.

WIDTH="anchura". Anchura de laimagen.

HEIGHT="altura". Altura de laimagen.

ALT="texto". Texto alternativoque se muestra si el navegador noadmite la etiqueta <IMG> o se hainterrumpido la carga de imágenes.

ALIGN="LEFT" | "RIGHT" |"TOP" | "ABSMIDDLE" |"ABSBOTTOM" | "TEXTTOP" |"MIDDLE" | "BASELINE" |"BOTTOM". Especifica elalineamiento de la imagen conrespecto al texto que la rodea.

Se recomienda indicar siempre laanchura y la altura de cada imagen con

los atributos WIDTH y HEIGHT, ya que asíla visualización de las páginas es másrápida‹ 25 ›.

El siguiente código muestra como seemplean las imágenes. La página estáformada por una tabla con cuatro celdas.En cada celda se muestra la mismaimagen con un alineamiento distinto.Además, la última imagen también poseeun borde. En la Figura 3.19 se puedeobservar como se visualiza este códigoen un navegador.

Ejemplo 3.231 <HTML>2 <BODY>3 <TABLE BORDER="0">

4 <TR>5 <TD>

6<IMG SRC="foto.jpg"

WIDTH="134" HEIGHT="191"ALIGN="TEXTTOP">

7El manitas de la

casa8 </TD>9 <TD>


WIDTH="134" HEIGHT="191"ALIGN="MIDDLE">

11El manitas de la

casa12 </TD>13 </TR>14 <TR>15 <TD>

16

<IMG SRC="foto.jpg"WIDTH="134" HEIGHT="191"

ALIGN="BOTTOM">

17El manitas de la

casa18 </TD>19 <TD>


WIDTH="134" HEIGHT="191"BORDER="10">

21El manitas de la

casa22 </TD>23 </TR>24 </TABLE>25 </BODY>26 </HTML>

Figura 3.19: Imágenes con distintoalineamiento del texto

3.13.2. Imágenes como

fondo de una página

La etiqueta <BODY> ... </BODY>

posee el atributo BACKGROUND quepermite mostrar una imagen como fondode una página. Si la imagen tiene untamaño menor que la ventana delnavegador, la imagen se muestra enforma de "mosaico" hasta cubrir toda lasuperficie de la ventana.

3.14. Formularios

Los formularios son la herramientaque ofrece HTML para poder obtener

información de un usuario que visita unapágina HTML y enviarla al servidorweb para su procesamiento.

Un formulario contiene dos tipos deelementos básicos: campos de datos(cuadros de texto, listas de selección,casillas de verificación) y de control(botones).

Dentro de una página HTML sepuede incluir más de un formulario, peroteniendo en cuenta que no puedenanidarse ni solaparse. El servidor websólo podrá recibir la informaciónintroducida en uno de ellos (sólo seenvía la información de uno de losformularios al servidor).

La estructura básica de unformulario es:

Ejemplo 3.24

1

<FORM NAME="nombre"ACTION="pagina.html"METHOD="metodo">

2 Controles del formulario3 </FORM>

El sentido de cada una de las líneases:

Línea 1: La etiqueta <FORM> marcael inicio del formulario. El atributoNAME asigna un nombre alformulario (para poder hacerreferencia a él posteriormente),

ACTION indica la dirección (URL)de la página o programa queprocesa los datos del formulario enel servidor y METHOD indica elmétodo que se va a utilizar paraenviar los datos del formulario alservidor (GET o POST‹ 26 ›).

Línea 2: En esta sección seincluyen los controles que posee elformulario.

Línea 3: Fin del formulario.

3.14.1. Controles de unformulario

Un formulario puede contener lossiguiente controles:

Botones (para enviar información,borrar y otras acciones): <INPUTTYPE="SUBMIT">, <INPUTTYPE="RESET">, <INPUTTYPE="BUTTON">.

Imágenes que actúan como botones(para enviar información): <INPUTTYPE="IMAGE">.

Campos de verificación: <INPUTTYPE="CHECKBOX">.

Campos excluyentes (botones de

radio): <INPUT TYPE="RADIO">.

Campos de texto: <INPUTTYPE="TEXT">.

Campos de contraseña‹ 27 ›(password): <INPUTTYPE="PASSWORD">.

Campos ocultos: <INPUTTYPE="HIDDEN">.

Envío de ficheros: <INPUTTYPE="FILE">.

Listas de selección: <SELECT> ...</SELECT>, <OPTION>.

Áreas de texto (campos de texto

multilínea): <TEXTAREA> ...</TEXTAREA>.

Para que los datos introducidos enun formulario se envíen al servidor, todoformulario tiene que tener un botón det i p o TYPE="SUBMIT", que envíaautomáticamente los datos. Este botón sepuede sustituir por un botón normalTYPE="BUTTON", pero entonces el envíose tiene que realizar manualmentemediante código de script.

Conviene dar un nombre a loscampos que coloquemos en unformulario, ya que al enviar lainformación, ésta se transmite comopares nombre-valor. Para ello, todas las

etiquetas de los controles poseen elatributo NAME para asignar un nombre alcontrol, que deberá ser un nombre único,es decir, ningún otro control tendrá quetener el mismo nombre (excepto en elcaso de los botones de radio), y elatributo VALUE para asignar un valor(todas las etiquetas tienen este atributoe x c e p t o <INPUT TYPE="IMAGE">,<SELECT> ... </SELECT> y<TEXTAREA> ... </TEXTAREA>). Enlos botones, el atributo VALUE modificael texto que muestra el botón.

El siguiente código genera unapágina HTML con un formulario quecontiene un campo de texto, un campo de

contraseña, dos campos excluyentes conel mismo nombre (y por tanto sólo sepuede elegir una de las dos opciones),dos campos de verificación, una lista deselección, un área de texto y dos botones(para enviar información y borrar). Enla Figura 3.20 se muestra el formulariotal como se ve en un navegador.


3<TITLE>Esto es una página HTMLcon formularios</TITLE>

4 </HEAD>5 <BODY>

6Esto es el cuerpo de unapágina HTML. Esta página posee

un formulario:7 <HR>

8<FORM NAME="miFormulario"ACTION="procesa.asp"METHOD="POST">

9Cuadro de texto: <INPUTTYPE="TEXT" NAME="control1a"VALUE="Algo">

10 <BR>

11Cuadro de texto contraseña:<INPUT TYPE="PASSWORD"NAME="control1b">

12 <BR><BR>13 Botones de radio:

14<INPUT TYPE="RADIO"NAME="control2"VALUE="1">Opción 1

15<INPUT TYPE="RADIO"NAME="control2"VALUE="2">Opción 2

16

<BR><BR>17 Casilla de verificación:

18<INPUT TYPE="CHECKBOX"NAME="control3a"VALUE="1">Opción 1

19<INPUT TYPE="CHECKBOX"NAME="control3b"VALUE="2">Opción 2

20 <BR><BR>21 Lista de selección:22 <SELECT NAME="control4">

23<OPTION

VALUE="ali">Alicante</OPTION>

24<OPTION

VALUE="val">Valencia</OPTION>

25<OPTION

VALUE="cas">Castellón</OPTION>26 </SELECT>27 <BR><BR>

28Area de texto: <TEXTAREANAME="control5"></TEXTAREA>

29 <BR><BR>

30<INPUT TYPE="SUBMIT"VALUE="Enviar">

31<INPUT TYPE="RESET"VALUE="Borrar">

32 </FORM>33 <HR>34 </BODY>35 </HTML>

Figura 3.20: Formulario con distintoscontroles

3.14.2. Campos de

verificación

Los campos de verificación (<INPUTTYPE="CHECKBOX">) poseen dosvalores: activado y desactivado. Si alenviarse un formulario un campo deverificación está activo, se envía alservidor el valor indicado por VALUE.Distintos campos de verificación puedentener el mismo nombre (NAME), aunqueno es lo usual ya que "complica" laprogramación de la aplicación web en elservidor.

Si se desea que por defecto uncampo de verificación aparezcaactivado, se tiene que incluir el atributo

CHECKED en la etiqueta <INPUTTYPE="CHECKBOX">.

3.14.3. Campos excluyentes

Los campos excluyentes o botonesde radio (<INPUT TYPE="RADIO">)tienen sentido cuando se emplean variosa la vez. Un grupo de botones de radioestá formado por varios botones deradio que tienen todos el mismo nombre(NAME). En un grupo de botones de radiosólo un botón de radio puede estarseleccionado en un instante. Unformulario puede contener distintos

grupos de botones de radio.Los botones de radio también poseen

el atributo CHECKED que permite indicarun botón de radio por defecto.

3.14.4. Campos de texto

En los campos de texto normal(<INPUT TYPE="TEXT">) y decontraseña (<INPUTTYPE="PASSWORD">) se puede escribiruna cadena de caracteres. Se puedeemplear el atributo SIZE paraespecificar el tamaño "visual" delcuadro de texto. Es decir, se puede

indicar cuantos caracteres se puedenvisualizar en un momento dado.

No confundir este atributo conMAXLENGTH, que especifica el númeromáximo de caracteres que se puedenintroducir. Si no se especifica nada, sepueden introducir tantos caracterescomo se desee.

3.14.5. Listas de selección

Las listas de selección se crean conla etiqueta <SELECT> ... </SELECT>.En las listas de selección se muestra unaserie de opciones de las que el usuario

puede elegir una. Si se añade el atributoMULTIPLE, el usuario puede elegirmúltiples opciones‹ 28 ›. El atributoSIZE permite indicar cuantas opcionesde la lista se visualizansimultáneamente.

Cada opción de una lista deselección se indica con la etiqueta<OPTION>. Cada opción puede tenerasociado un valor (VALUE), que es elvalor que se enviará al servidor. Si sedesea que una opción aparezca marcadapor defecto se tiene que añadir a laopción el atributo SELECTED.

El siguiente ejemplo muestra treslistas: una lista normal, una lista normal

que muestra tres opciones a la vez yposee una seleccionada por defecto yuna lista múltiple. En la Figura 3.21 sepuede observar como se visualiza estecódigo en un navegador.

Ejemplo 3.261 <HTML>2 <BODY>3 <FORM>

4Lista de selecciónnormal:

5 <SELECT NAME="provincia">

6<OPTION

VALUE="1">Alicante

7<OPTION

VALUE="2">Valencia

8<OPTION

VALUE="3">Castellón

9 </SELECT>10 <BR><BR><BR>

11Lista de selección normalde tamaño 3:

12<SELECTNAME="universidad"SIZE="3">

13<OPTION

VALUE="uv">Universidad deValencia

14<OPTION

VALUE="uji">UniversidadJaime I

15<OPTION VALUE="ua"

SELECTED>Universidad deAlicante

16<OPTION

VALUE="upv">UniversidadPolitécnica de Valencia

<OPTION

17 VALUE="umh">UniversidadMiguel Hernández

18 </SELECT>19 <BR><BR><BR>

20Lista de selecciónmúltiple:

21<SELECTNAME="departamento"MULTIPLE>

22

<OPTIONVALUE="dlsi">D. deLenguajes y SistemasInformáticos

23<OPTION

VALUE="damma">D. deAnálisis M. y M. Aplicada

24

<OPTIONVALUE="dfists">D. deFísica, Ingeniería deSistemas y ...

25

<OPTIONVALUE="dagr">D. deAnálisis GeográficoRegional

26<OPTION

VALUE="mmlab">LaboratorioMultimedia

27 </SELECT>28 </FORM>29 </BODY>30 </HTML>

Figura 3.21: Distintas listas de selección

3.14.6. Áreas de texto

La etiqueta <TEXTAREA> ...

</TEXTAREA> define un área de textodonde se pueden escribir varias líneasde texto. Esta etiqueta posee dosatributos que permiten modificar sutamaño. El atributo COLS indica elnúmero de caracteres por línea que sepueden mostrar sin tener que realizarscroll. El atributo ROWS define elnúmero de líneas que se pueden mostrarsin realizar scroll.

Si se quiere que el área de textomuestre un texto por defecto, se puedeincluir entre las etiquetas de inicio y fin.El siguiente ejemplo muestra dos áreasde texto de distinto tamaño, una de ellas

con un texto por defecto. En la Figura3.22 se puede ver esta páginavisualizada en un navegador. Se puedenobservar las barras de desplazamientovertical y horizontal.

Ejemplo 3.271 <HTML>2 <BODY>3 <FORM>4 Área 1:

5<TEXTAREA ROWS="2"COLS="40">Texto pordefecto...</TEXTAREA>

6 <BR>7 Área 2:

8<TEXTAREA ROWS="4"COLS="20"></TEXTAREA>

9

</FORM>10 </BODY>11 </HTML>

Figura 3.22: Áreas de texto de distintotamaño

3.15. Marcos

Un marco (frame) es una región de

una ventana que actúa como si fuera unaventana ella misma. La ventana principalpuede contener múltiples marcos, deforma que diferentes regiones de laventana muestren diferentes contenidos.A su vez, un marco puede contener otrosmarcos.

Normalmente, los marcos seemplean para dividir la ventana delnavegador en dos partes: en una deellas, la más pequeña, se muestra uníndice del sitio web (esta parte novaría); la otra, la más grande, modificasu contenido según los enlaces que sepulsen en el índice.

Para definir los marcos se emplean

las tres etiquetas siguientes:<FRAMESET> ... </FRAMESET>,<FRAME> y <NOFRAMES> ...

</NOFRAMES>.La etiqueta <FRAMESET> ...

</FRAMESET> define un conjunto demarcos que van a aparecer en laventana. Esta etiqueta contiene una omás etiquetas <FRAME> que definen cadauno de los marcos. Los principalesatributos de esta etiqueta son:

BORDER="anchura". Anchura delborde de cada marco.

FRAMEBORDER="YES" | "NO".Indica si el borde es en tres

dimensiones o plano.

COLS="listaAnchurasColumnas".Anchuras de cada uno de losmarcos, separadas por comas. Laanchura se puede indicar comonúmero de pixels o como unporcentaje sobre el total disponible(en este caso, el número se tieneque acompañar del signoporcentaje). Por ejemplo, si sequiere dividir la ventana delnavegador en dos columnas queocupan el 30 y 70 por ciento:

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

ROWS="listaAlturasFilas".Alturas de cada uno de los marcos,separadas por comas. La altura sepuede indicar como número depixels o como un porcentaje sobreel total disponible (en este caso, elnúmero se tiene que acompañar delsigno porcentaje). Por ejemplo, sise quiere dividir la ventana delnavegador en tres filas que ocupanel 10, 80 y 10 por ciento:

Ejemplo 3.291

<FRAMESETROWS="10%,80%,10%">

La etiqueta <FRAMESET> ...

</FRAMESET> define el número de filas

(ROWS) o columnas (COLS) en que se va adividir la ventana. Los dos atributos nose pueden emplear simultáneamente.Esta etiqueta se puede anidar, de formaque dentro de un <FRAMESET> se puedeincluir otro <FRAMESET>. De este modo,se pueden combinar filas con columnas.

La etiqueta <FRAME> define unmarco, que es una región de una ventanacon contenido propio y que se puedenavegar de forma independiente. Cadamarco tiene su propia URL que defineel contenido que se va a mostrar. Losatributos más importantes de estaetiqueta son:

SRC="URL". Indica la URL deldocumento que se quiere mostrar enel marco.

NAME="nombreMarco". Nombredel marco. Este nombre se empleaen la etiqueta <A> ... </A> paramostrar una página en un marcoconcreto.

FRAMEBORDER="YES" | "NO".Igual que el atributo de la etiqueta<FRAMESET> ... </FRAMESET>.

NORESIZE. Si aparece este atributo,no se puede modificar el tamañodel marco.

SCROLLING="YES" | "NO" |

"AUTO". Indica si pueden aparecerbarras de desplazamiento cuandono quepa toda la página en elmarco.

Por último, la etiqueta <NOFRAMES>... </NOFRAMES> se emplea paramostrar contenido en los navegadoresque no pueden mostrar marcos. Losnavegadores que sí que pueden mostrarmarcos ignoran todo el contenido de estaetiqueta.

Lo interesante de los marcos es quese puede variar el contenido de losmismos de forma independiente. Desdeun marco se puede modificar elcontenido de otro. Para ello, se tiene que

emplear un enlace (<A> ... </A>) conel atributo TARGET. Este atributo debe detomar el nombre del marco que se quieremodificar (el nombre se habrá indicadoen la etiqueta <FRAME> con el atributoNAME).

En el siguiente ejemplo, la páginaframe1.html crea una venta con dosmarcos (marcoIzq y marcoDer). En elmarco izquierdo se muestra la páginaframe1a.html; en el marco derecho semuestran las páginas frame1b.html yframe1c.html según se seleccione enlos enlaces que contiene marcoIzq. Enla Figura 3.23 vemos el resultado demostrar estas páginas en un navegador.

Página frame1.html:


3<TITLE>Ejemplo demarcos</TITLE>

4 </HEAD>

5<FRAMESET COLS="20%,80%"BORDER=10>

6<FRAME

SRC="frame1a.html"NAME="marcoIzq">

7<FRAME

SRC="frame1b.html"NAME="marcoDer">

8 <NOFRAMES>

9Su navegador de

Internet no permitemostrar marcos

10 </NOFRAMES>11 </FRAMESET>12 </HTML>

Página frame1a.html:



4 </HEAD>5 <BODY>

6Esta página tiene queaparecer a la izquierda.

7 <BR><BR>

8Si pincha <AHREF="frame1b.html"TARGET="marcoDer">aquí</A>,

9 a la derecha tiene queaparecer la página 1.

10 <BR><BR>

11Si pincha <AHREF="frame1c.html"TARGET="marcoDer">aquí</A>,

12a la derecha tiene queaparecer la página 2.


Página frame1b.html:



4 </HEAD>5 <BODY>

6Esta es la página<B>1</B>.

7 </BODY>8 </HTML>

Página frame1c.html:



4 </HEAD>5 <BODY>

6Esta es la página<B>2</B>.

7 </BODY>8 </HTML>

Figura 3.23: Página con dos marcosverticales

3.16. Guía de estilo

A continuación hemos incluido unaserie de indicaciones que pueden ayudara la hora de crear páginas web.

3.16.1. Organizar el códigoHTML

Si se crea una página webdirectamente con el código HTML, esrecomendable hacerlo como si seestuviese programando. Es decir,organizar el código para que sea másfácil su lectura, poner comentarios, etc.Todo ello supone un trabajo extra, perofacilita el mantenimiento de las páginas.

3.16.2. Cuidado con loscolores

Hay que llevar mucho cuidado conlas combinaciones de colores que seemplean, ya que algunas cuestan muchode leer.

Si tenemos páginas con mucho texto,es conveniente usar una combinación decolores de alto contraste, que facilite lalectura: un color oscuro sobre un fondoclaro (negro o azul sobre blanco o uncolor crema) o al revés (un color claropara el texto sobre un fondo oscuro).

3.16.3. Cuidado con los tiposde letra

El uso de distintos tipos de letrapuede originar bastantes problemas. Sesuele recomendar un tipo de letra sans-serif (como Arial, Helvetica, Tahomao Verdana) para la lectura de texto enpantalla.

A menudo, se elige un tipo de letrapara un sitio web y aparece en algunaspartes de los documentos texto en otrotipo de letra. No causa un buen efecto enel visitante "sufrir" este problema.

Por último, hay que intentar elegirtipos de letra "estándar". Si empleamosun tipo poco usual, seguramente lamayoría de la gente no lo tendráinstalado en sus ordenadores y laspáginas no se visualizaráncorrectamente.

3.16.4. Sacar partido alhipertexto

Las referencias cruzadas permitenabordar un mismo tema en distintosniveles de profundidad. Se puedepermitir al usuario pasar de largo

información técnica o conceptosavanzados de un tema, estableciendoenlaces a textos más extensos. Engeneral, podemos disponer de unapágina corta, con una presentación de lainformación escueta, que lleve a páginasque contengan detalles acerca de lostemas tratados.

3.16.5. Usar las capacidadesmultimedia

Como se suele decir, una imagenvale más que mil palabras. Pero hay quetener cuidado: el uso de muchas

imágenes puede confundir al usuario.Además, hay que tener en cuenta lavelocidad de transferencia: las imágenesemplean muchos kilobytes, lo queaumenta el tiempo que tarda en cargarseuna página. Hay que ponerse comolímite de 20 a 30 Kb de imágenes porpágina.

Un truco muy importante: una vezcargada una imagen, el navegador laalmacena en la cache; cuando volvamosa emplear esa misma imagen en otrapágina, no necesitará descargarla otravez. Para que nuestras páginas secarguen más rápidamente, esaconsejable combinar los mismos

elementos gráficos (iconos, líneas,imágenes de fondo, etc.) en todasnuestras páginas.

Por último, mucho cuidado con lasimágenes de fondo: si tienen muchoscolores y detalles pueden ocultar otrosdetalles de la página e impedir la lecturacorrecta del texto.

3.16.6. Identidadcorporativa

Hay que intentar conseguir una"identidad corporativa" en todas laspáginas: emplear los mismos tipos de

letra, colores, imágenes de fondo,iconos, etc., para dotar a las páginas deun estilo homogéneo. De esta forma, elusuario se sentirá "inmerso" en laspáginas.

3.16.7. Permitir que losusuarios se comuniquen

En las páginas hay que incluir unadirección de contacto para que losusuarios se puedan comunicar. De estemodo, se podrán recibir sugerencias,indicaciones de cómo mejorar laspáginas o errores localizados.

3.16.8. Facilitar lasbúsquedas

Una adecuada clasificación yexposición de la información quecontienen nuestras páginas facilitará lanavegación de los usuarios. En general,la página principal (homepage) deberíapresentar en una sola página toda lainformación disponible en nuestroservidor.

3.16.9. Revisar las páginas

periódicamente

No hay nada peor que encontrarenlaces rotos: enlaces que apuntan apáginas que no existen, porque se hayanborrado, movido de sitio o falle la rutade acceso. Una revisión periódicaahorra al usuario muchos problemas.Además, es importante indicar la fechade la última modificación y lasnovedades añadidas. Esto permite, entreotras cosas, que el usuario se cerciorede la seriedad del autor de las páginas yfacilita la navegación a los usuariosasiduos.

Si una página aparece con un signo

"en construcción" y su última revisión esdel año anterior, el usuario pensará quees mejor buscar lo que quiere en otraparte.

3.16.10. Los enlaces

La elección del lugar apropiado paraponer los enlaces es crucial para unacorrecta presentación del hipertexto. Porejemplo, compárense los dos siguientestrozos de código HTML. Es evidenteque la primera opción es mucho mejorque la segunda.

Ejemplo 3.34

Ejemplo 3.34

1La <AHREF="/concejalias/turismo">Concejalíade Turismo</A> se

2encarga de gestionar el turismo ruraly de playa ...

Ejemplo 3.35

1La Concejalía de Turismo seencarga de gestionar el turismorural

2y de playa ... (<AHREF="/concejalias/turismo">hagaclick aquí

3para ver más información acercade la Concejalía deTurismo</A>).

En los primeros años de la web

había que poner haga click porque lagente no estaba acostumbrada a losenlaces, pero eso ya es historia.

Capítulo 4

Lenguajes de script

Los lenguajes de script permitenincluir "programación" en laspáginas web. En este capítulo seexplican las tres formas que existende incluir y ejecutar código en unapágina web.

Índice General

4.1. Introducción

4.2. Diferencias entreVBScript y JavaScript

4.3. Para qué sirven4.4. Como se usa un lenguaje

de script en un navegador

4.1. Introducción

Un lenguaje de script (o lenguaje deguiones) es similar a un lenguaje demacros o a un fichero por lotes (batch):una lista de comandos que se puedenejecutar sin o con la participación delusuario. Se trata en definitiva de un

lenguaje de programación, que sueleemplearse dentro de un contexto (dentrode una aplicación) y que no permiteprogramar aplicaciones independientes(no permite crear ficheros ejecutablesindependientes, ya que los lenguajes descript normalmente son interpretados).

Existen multitud de lenguajes descript que se pueden emplear en páginasw e b : JavaScript, VBScript, Perl,Rexx, etc. Sin embargo, algunos sólo sepueden emplear en navegadores muyconcretos y poco extendidos. Loslenguajes de script más empleados enInternet son JavaScript y en menormedida VBScript.

4.2. Diferencias entreVBScript y JavaScript

La diferencia más obvia entreVBScript y JavaScript (MICROSOFT lodenomina JScript) se encuentra en sus i ntaxi s . JavaScript y VBScriptnacieron con un mismo fin: dotar de unlenguaje de script rápido y sencillo a laspáginas web. Cada uno de estoslenguajes posee una serie decaracterísticas que no posee el otro,pero ninguna de las diferenciasexistentes entre ambos permite descartar

un lenguaje por el otro.VBScript es un subconjunto de

Visual Basic el lenguaje deprogramación "estrella" de MICROSOFT.C o m o VBScript se diseñóespecíficamente para trabajar connavegadores, no incluye característicasque se escapan del ámbito de loslenguajes de script, como el acceso aficheros y la impresión.

JavaScript, por otro lado, derivade la familia de lenguajes formada porC, C++ y Java. Es conveniente aclarardesde un principio que JavaScript yJava son lenguajes totalmente distintos,desarrollados por distintas compañías

(NETSCAPE y SUN MICROSYSTEMS

respectivamente) y que, en principio,sólo comparten parte de la sintaxis y delnombre y poco más.

¿Qué lenguaje elegir? La principalrazón para elegir uno u otro reside en lasiguiente sencilla pregunta: ¿laplataforma que yo uso soporta eselenguaje? Mientras que los dosnavegadores más extendidos, MicrosoftInternet Explorer y NetscapeCommunicator, admiten JavaScript,sólo el primero admite VBScript. Portanto, si elegimos este lenguaje descript, estaremos limitando el acceso alas páginas web que desarrollemos.

4.3. Para qué sirven

Las aplicaciones más habituales delos lenguajes de script en las páginasHTML son:

Validar datos en el cliente ycomprobar la consistencia de losvalores antes de mandar unformulario (como, por ejemplo,comprobar que una fecha tiene unvalor adecuado y un formatocorrecto).

Actualizar campos relacionados enformularios (por ejemplo,

establecer las opciones de una listadesplegable en función del valorseleccionado en unos botones deradio).

Realizar procesamientos que norequieran la utilización deinformación centralizada (porejemplo, convertir pesetas eneuros, visualizar el calendario delmes actual, etc.).

Servir de base para la utilizaciónde otras tecnologías (DHTML,Java, ActiveX, etc.).

Los lenguajes de script tambiénpueden actuar sobre el navegador a

través de objetos integrados querepresentan al documento, la ventanaactiva, cada uno de los controles de unformulario, etc. Para ello se emplea unmodelo de objetos denominadoDocument Object Model (DOM), queveremos en el Capítulo 6.

Los lenguajes de script presentanfuertes restricciones de acceso a losrecursos de la máquina en la que seejecutan. Estas restricciones no se debena limitaciones tecnológicas, sino anormas impuestas por los diseñadoresde los lenguajes de script para evitarque la ejecución del código de unapágina web pueda dañar la integridad

del sistema del usuario.

4.4. Como se usa unlenguaje de script en unnavegador

Existen tres formas de incluir einvocar scripts dentro de una páginaHTML:

1. Usando la etiqueta <SCRIPT> ...</SCRIPT>. Esta etiqueta permiteincluir código de scriptdirectamente en la página o queapunte a un fichero externo usando

el atributo SRC. Esta etiqueta sepuede incluir tanto en la secciónHEAD como en BODY. Esta etiquetaposee el atributo LANGUAGE quepermite indicar en que lenguaje (yque versión, si el lenguaje poseevarias‹ 29 ›) se ha escrito el script.Si se omite este atributo, cadanavegador tiene definido pordefecto un lenguaje‹ 30 ›. Elsiguiente ejemplo muestra comocombinar múltiples lenguajes descript en la misma página‹ 31 ›.


3<SCRIPTLANGUAGE="VBScript">

4document.write "Esto

lo ha escritoVBScript<BR>"

5 </SCRIPT>

6<SCRIPTLANGUAGE="JavaScript">

7document.write("Esto

lo ha escritoJavaScript<BR>");

8 </SCRIPT>9 </BODY>10 </HTML>

Mediante el atributo SRC se puedeocultar y proteger el código scriptde una página, aunque no es unsistema seguro, ya que cualquierusuario con unos conocimientosmínimos puede acceder al fichero

que contiene el código. La ventajaprincipal de este sistema es quepermite compartir el mismo códigoentre distintas páginas web. De estemodo, se pueden crear librerías decódigo.

2. Usando los atributos de etiquetasHTML que soportan scripts.Existen una serie de elementos(<FORM>, <INPUT>, <SELECT>,<TEXTAREA>, <BODY> y <A>)pertenecientes al lenguaje HTMLque permiten incluir código scripten una serie de atributos querepresentan eventos. Cuando estoseventos se producen (por ejemplo,al pulsar sobre un botón o al cargar

una página), el códigocorrespondiente se ejecuta. Estasetiquetas poseen el atributoLANGUAGE, que al igual que en laetiqueta SCRIPT, permite indicar enque lenguaje se ha escrito elcódigo. El siguiente ejemplomuestra como gestionar los eventosde pulsación sobre botones(<INPUT TYPE="BUTTON">)mediante el atributo ONCLICK.


3<SCRIPTLANGUAGE="VBScript">

4 Sub PulsadoVBSalert "Pulsado

5 el botón VBScript"6 End Sub7 </SCRIPT>


9function

PulsadoJS()10 {

11alert("Pulsado

el botón JavaScript");12 }13 </SCRIPT>14 </HEAD>15 <BODY>16 <FORM NAME="Formulario">

17<INPUT TYPE="BUTTON"VALUE="VBScript"ONCLICK="PulsadoVBS"

18 LANGUAGE="VBScript">19 <BR>

20<INPUT TYPE="BUTTON"VALUE="JavaScript"ONCLICK="PulsadoJS()"

21 LANGUAGE="JavaScript">22 </FORM>23 </BODY>24 </HTML>

3. Incluyendo código de script en unaURL. Los scripts también sepueden invocar desde el elemento<A> ... </A> (anchor, ancla)mediante una URL. Esto permiteque el script se ejecute cuando elusuario pulsa sobre un enlace. Elsiguiente ejemplo muestra unapágina con dos enlaces. Al pulsarsobre uno de ellos se abre una

ventana nueva que muestra unmensaje.

Ejemplo 4.31 <HTML>2 <HEAD>3 <SCRIPT LANGUAGE="VBScript">4 Sub PulsadoVBS5 alert "Pulsado el enlace VBScript"6 End Sub7 </SCRIPT>8 <SCRIPT LANGUAGE="JavaScript">9 function PulsadoJS()10 {

11alert("Pulsado el enlace

JavaScript");12 }13 </SCRIPT>14 </HEAD>

15 <BODY>16

<AHREF="javascript:PulsadoJS()">JavaScript</A>

17 <BR>

18<AHREF="javascript:PulsadoVBS()">VBScript</A>


Como podemos observar en la URLdel enlace, con la palabra javascript:indicamos el lenguaje que estamosempleando, y a continuación figura elcódigo a ejecutar. Como vemos en elejemplo, desde JavaScript se puedellamar a funciones escritas en VBScripty viceversa, pero como se ha comentadopreviamente, no se recomienda mezclar

distintos lenguajes de script en unamisma página.

Figura 4.1: Código JavaScript en unenlace

Capítulo 5

JavaScript

En el capítulo anterior hemosvisto los lenguajes de script engeneral. En este capítulo vamos aestudiar un lenguaje concreto:JavaScript. Este lenguaje es el másempleado en Internet y se puedeconsiderar el lenguaje estándar.Veremos sus características básicas,sus diferentes sentencias, lasfunciones que incorpora y, por

último, como validar formularios.

Índice General

5.1. Introducción5.1.1. Aplicaciones5.1.2. Qué necesito para

programar en JavaScript5.1.3. JavaScript y Java5.1.4. Versiones5.1.5. JavaScript y

ECMA5.1.5. JavaScript y ECMA5.1.6. JScript5.1.7. Diferencias entre

JavaScript y JScript5.2. El lenguaje

5.2.1. Característicasbásicas

5.2.2. Comentarios5.2.3. Declaración de

variables5.2.4. Ámbito de las

variables5.2.5. Caracteres especiales5.2.6. Operadores5.2.7. Palabras reservadas

5.3. Sentencias5.3.1. Condicionales5.3.2. De repetición5.3.3. De manipulación de

objetos5.4. Funciones

5.4.1. Declaración defunciones


5.5. Objetos5.5.1. Creación de objetos5.5.2. Métodos de un objeto5.5.3. Eliminación de

objetos5.6. Tratamiento de cadenas5.7. Operaciones matemáticas5.8. Validación de formularios

5.8.1. Validación camponulo

5.8.2. Validación alfabética5.8.3. Validación numérica

5.1. Introducción

JavaScript es un lenguajeinterpretado, basado en objetos (no esun lenguaje orientado a objetos "puro")y multiplataforma, inventado porNETSCAPE COMMUNICATIONS

CORPORATION. Los navegadores deNETSCAPE fueron los primeros queusaron JavaScript. El primer nombreoficial de este lenguaje fue LiveScripty apareció por primera vez en la versiónbeta de Netscape Navigator 2.0 enseptiembre de 1995, pero poco después

fue rebautizado JavaScript en uncomunicado conjunto con SUN

MICROSYSTEMS el 4 de diciembre de1995‹ 32 ›.

El núcleo de JavaScript (CoreJavaScript) contiene una serie deobjetos, como Array, Date, Math,Number y String, y un conjunto deelementos del lenguaje comooperadores, estructuras de control ysentencias (%, ++, if, for, break, etc.).El núcleo de JavaScript se puedeampliar añadiendo objetos adicionales,como por ejemplo:

JavaScript en el cliente (Client-

side JavaScript) amplia ellenguaje añadiendo objetos quepermiten controlar un navegador ysu DOM.

JavaScript en el servidor(Server-side JavaScript)amplia el lenguaje añadiendoobjetos que son útiles cuandoJavaScript se ejecuta en unservidor (lectura de ficheros,acceso a bases de datos, etc.).

JavaScript permite crearaplicaciones que se ejecuten a través deInternet, basadas en el paradigmacliente/servidor. La parte del cliente seejecuta en un navegador, como

Netscape Communicator o MicrosoftInternet Explorer, mientras que laparte del servidor se ejecuta en unservidor, como Netscape EnterpriseServer.

Mediante la característicaJavaScript's LiveConnect, sepueden intercomunicar el códigoJavaScript con Java. DesdeJavaScript, se pueden instanciaro b j e t o s Java y acceder a suspropiedades y métodos públicos. A suvez, desde Java se puede acceder a losobjetos de JavaScript, a suspropiedades y a sus métodos.

5.1.1. Aplicaciones

Una de las aplicaciones principalesd e JavaScript consiste en validar laentrada introducida por el usuario através de un formulario, que luegorecibirán aplicaciones que se ejecutanen el servidor (hechas en ASP, CGI,JSP o cualquier otra tecnología). Lautilidad de esto reside en:

Reduce la carga en el servidor. Losdatos incorrectos se filtran en elcliente y no se envían al servidor.

Reduce los retrasos producidos por

errores cometidos por el usuario.De otro modo la validación setendría que realizar en el servidor,y los datos deberían viajar delcliente al servidor, ser procesadosy entonces devueltos al cliente paraque los corrigiese.

Simplifica los programas que seejecutan en el servidor al dividir eltrabajo entre el cliente y elservidor.

Normalmente, la validación de losdatos se puede realizar como mínimo entres ocasiones:

Cuando el usuario introduce los

datos, con un manejador del eventoonChange en cada control que sequiere validar del formulario.

Cuando el usuario envía (submit)el formulario, con un manejador delevento onClick en el botón queenvía el formulario.

Cuando el usuario envía (submit)el formulario, con un manejador delevento onSubmit en el formulario.

Otra de las aplicaciones deJavaScript consiste en proporcionardinamismo a las páginas HTML. Si seemplea junto con DHTML se puedenconseguir efectos sorprendentes.

5.1.2. Qué necesito paraprogramar en JavaScript

Para poder programar enJavaScript no hace falta ningún equipoespecial ni comprar un entorno dedesarrollo. Sólo es necesario un editorde textos como Bloc de notas deMicrosoft Windows o joe de Linux yun navegador como NetscapeCommunicator o Microsoft InternetExplorer que soporte JavaScript parapoder comprobar el código.

No es necesario disponer de una

conexión a Internet, ya que se puedecomprobar localmente el código creado.

Lo que sí es recomendable esutilizar un buen editor de textos, que seacómodo, configurable, soporte macros,etc. y que sea syntax highlight. Estaúltima característica significa que eleditor es capaz de comprender ellenguaje en el que se programa, ycolorea las palabras diferenciándolassegún sean variables, palabrasreservadas, comentarios, etc.

5.1.3. JavaScript y Java

JavaScript y Java se confunden aveces entre sí. Son dos lenguajessimilares en algunos aspectos, perodiferentes entre sí. JavaScript no tienela estricta comprobación de tipos quep o s e e Java, pero ambos si quecomparten la sintaxis de las expresiones,de los operadores y de las estructuras decontrol.

JavaScript es un lenguajeinterpretado, mientras que Java poseeuna fase de compilación (aunque no segenera código máquina, sino losl l amados bytecodes que luego soninterpretados por la máquina virtualJava) . JavaScript tiene un pequeño

número de tipos de datos: números(enteros y en coma flotante), booleanosy cadenas. JavaScript posee unmodelo de objetos basado en prototiposmientras que el de Java se basa enclases.

JavaScript es un lenguaje conmucha libertad si se compara con Java.No es necesario declarar las variables,clases y métodos. No hay quepreocuparse con métodos públicos,privados o protegidos, y no hay queimplementar interfaces. En el Cuadro5.1 se resumen las diferencias existentesentre JavaScript y Java.

JavaScript Java

Interpretado(nocompilado)por el cliente

Compilado abytecodes quese descargandesde elservidor y seejecutan en elcliente.

Basado enobjetos. Nodistingue entretipos deobjetos. Laherencia serealiza através delmecanismo deprototipado, y

Basado enclases.Distinciónentre clases einstancias, laherencia serealiza através de lajerarquía de

laspropiedades ylos métodos sepueden añadira cualquierobjeto deformadinámica.

clases. No sepueden añadira las clases nia las instanciaspropiedades ométodos deformadinámica.

Códigointegrado yembebido conel códigoHTML.

Los applets sedistinguen delcódigo HTML(aunque seacceden através deHTML).

El tipo de datode lasvariables no se

El tipo de datode lasvariables se

Cuadro 5.1: JavaScript frente a Java

declara (tiposdinámicos).

tiene quedeclarar (tiposestáticos).

5.1.4. Versiones

Cada versión de los navegadoressoporta una versión diferente deJavaScript. Cada nueva versión deJavaScript añade nuevascaracterísticas al lenguaje (y corrigefallos de las anteriores). El Cuadro 5.2

muestra las distintas versiones deJavaScript soportadas por lasdiferentes versiones de NetscapeNavigator. Las versiones anteriores a la2.0 no soportaban JavaScript.Actualmente se encuentra en desarrolloJavaScript 2.0.

Versión deJavaScript

Versión deNavigator

JavaScript1.0 Navigator 2.0

JavaScript1.1 Navigator 3.0

JavaScript1.2

Navigator 4.0 -4.05

JavaScript Navigator 4.06 -

Cuadro 5.2: Relación entre lasversiones de JavaScript y de Netscape

Navigator

1.3 4.78

JavaScript1.4

Ningún navegador(sólo en losproductos deservidor deNetscape)

JavaScript1.5

Navigator 6.0 yMozilla

Si queremos detectar que versión deJavaScript admite nuestro navegadorpodemos emplear el siguiente código:

3<TITLE>Ejemplo versionJavaScript</TITLE>

4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">


7 10 </SCRIPT>

11<SCRIPTLANGUAGE="JavaScript1.1">

12 <!--

13version = "JavaScript

1.1"14

// -->15 </SCRIPT>


17 20 </SCRIPT>


22 25 </SCRIPT>


27 <!--


1.4"

29 // -->30 </SCRIPT>


32 35 </SCRIPT>


37 40 </SCRIPT>41 </BODY>42 </HTML>

Este código funciona de la siguienteforma: mediante el atributo LANGUAGE dela etiqueta <SCRIPT> ... </SCRIPT>se indica la versión de JavaScript quese emplea. Como las versiones aparecende menor a mayor, cuando se llegue auna versión que no se admita, lavariable version almacenará la últimaversión admitida, que será la mayor detodas las que se admiten.

En el ejemplo anterior se puede verque las instrucciones de JavaScriptaparecen entre comentarios de HTML(<!== Comentario ==>). Este sistemaimpide que el código de script sevisualice en aquellos navegadores que

no entienden la etiqueta <SCRIPT> ...</SCRIPT>. En el resto de ejemplos deeste libro no se incluye, pero es una"buena práctica" hacerlo siempre.

5.1.5. JavaScript y ECMA

Aunque NETSCAPE inventóJavaScript y sus navegadores fueronlos primeros que lo soportaron,NETSCAPE trabaja estrechamente conEuropean Computer ManufacturersAssociation (ECMA) para obtener unlenguaje de programación estándarbasado en JavaScript.

La versión estandarizada deJavaScript, llamada ECMAScript se"debe de" comportar de forma idénticaen todas las aplicaciones que soportanel estándar. La primera versión deECMAScript se detalla en laespecificación ECMA-262 Edition 1.Este estándar también ha sido aprobadop o r International Organization forStandards (ISO) bajo la denominaciónISO-16262.

Versión deJavaScript

Versión deECMA

JavaScript1.1

ECMA-262Edition 1 se basaen JavaScript 1.1

JavaScript1.2

ECMA-262Edition 1 no sehabía completadocuando aparecióJavaScript 1.2 (lacompatibilidadentre ambos no estotal).

JavaScript1.3

JavaScript 1.3 escompletamentecompatible conECMA-262Edition 1, peroposeecaracterísticasadicionales que noforman parte deECMA-262

Edition 1.

JavaScript1.4

JavaScript 1.4 escompletamentecompatible conECMA-262Edition 1, perocon característicasadicionales.Cuando apareció,aún no se hab íacompletadoECMA-262Edition 3.

JavaScript1.5

JavaScript 1.5 escompletamentecompatible conECMA-262Edition 3.

Cuadro 5.3: Relación entre lasversiones de JavaScript y de ECMA

JavaScript siempre incluirácaracterísticas que no formen parte de laespecificación de ECMA. Pero estascaracterísticas no impiden queJavaScript sea compatible conECMA.

5.1.6. JScript

JScript es otro lenguaje de script

que puede emplearse tanto en el cliente(dentro de páginas HTML) como en elservidor (en páginas ASP) . JScript esla implementación realizada porMICROSOFT del lenguaje de scriptestándar ECMA-262.

Un aspecto importante a tener encuenta es que la versión del lenguaje descript es independiente de la versión delnavegador. Por ejemplo, se puedeinstalar el motor de JScript v5 enMicrosoft Internet Explorer 3 y usartodas las características del lenguaje(por seguridad, no se puede hacer locontrario, instalar JScript v1 enMicrosoft Internet Explorer 5).

Cuadro 5.4: Relación entre lasversiones de JScript y los productos de

Microsoft

VersióndeJScript

Productos deMicrosoft

JScriptv1 Internet Explorer 3

JScriptv2

Internet InformationServer 3.0

JScriptv3 Internet Explorer 4

JScriptv4 Visual Interdev 6.0

JScriptv5

Windows 2000,Office 2000 e InternetExplorer 5

5.1.7. Diferencias entreJavaScript y JScript

En las primeras versiones,JavaScript y JScript poseían muchasdiferencias entre ellos. Sin embargo, enlas últimas versiones las diferenciasprácticamente han desaparecido, ya queambos aseguran que cumplen el estándarECMA-262. Pero aún quedan pequeñasdiferencias que pueden hacer "perder eltiempo" al programador. Por ejemplo, el

siguiente código produce distintosresultados al ejecutarse en NetscapeCommunicator o Microsoft InternetExplorer. La diferencia se encuentra enque el primero convierteautomáticamente a entero el valor de lavariable a, que almacena una cadena,mientras que el segundo navegador no lohace.

Ejemplo 5.21 <HTML>2 <BODY>3 <SCRIPT LANGUAGE="JavaScript">4 a = "1";5

6 switch(a)7

{8 case 0:9 document.write("0");10 break;11

12 case 1:13 document.write("1");14 break;15

16 case 2:17 document.write("2");18 break;19

20 default:21 document.write("Ninguno");22 break;23 }24 </SCRIPT>25 </BODY>26 </HTML>

La salida que produce NetscapeCommunicator 4.7 es: 1.

La salida que produce MicrosoftInternet Explorer 5.0 es: Ninguno.

5.2. El lenguaje

5.2.1. Características básicas

La sintaxis de JavaScript esprácticamente idéntica a la de C, C++ yJava‹ 33 ›. Si se conoce alguno de estos

lenguajes, aprender JavaScript resultamuy sencillo y requiere poco esfuerzo.Los comentarios, las funciones, lassentencias de control, etc., poseen lamisma sintaxis que en C. JavaScript esun lenguaje basado en objetos, pero noorientado a objetos como Java y C++. Elobjetivo de JavaScript es conseguircódigo sencillo y reducido, no crearprogramas grandes y complejos.

JavaScript es un lenguaje casesensitive (sensible aminúsculas/mayúsculas). Esto quieredecir que todas las palabras que usemospara referirnos a los distintosidentificadores del lenguaje tendrán que

ser escritas correctamente para que seancomprendidas por el intérprete deJavaScript. Por ejemplo, en elsiguiente código se declaran tresvariables que son distintas:

Ejemplo 5.31

var nombre, Nombre,NOMBRE;

E n JavaScript no es necesarioacabar las sentencias con un punto ycoma (sí que es obligatorio en C),excepto para separar código que seencuentra en la misma línea. Pero es unabuena recomendación acabar siemprelas sentencias con punto y coma. Por

ejemplo, las tres líneas siguientes decódigo son correctas:

Ejemplo 5.41 var nombre; var apellido12 var apellido23 var ciudad;

Al igual que en C, el código seestructura por bloques (block-structuredcomputer language). Un bloque decódigo se indica delimitando lassentencias que lo componen mediantelas llaves ({ y }). Por ejemplo, lassiguientes sentencias forman un bloquede código:

Ejemplo 5.5

Ejemplo 5.51 {

2document.write("Una

sentencia ");

3document.write("en un

");

4document.write("bloque

de código");5 }

Los espacios en blanco, tabuladoresy saltos de línea no poseen valor enJavaScript, por lo que el códigoanterior se podría escribir de otraforma, tal como se ve en el siguienteejemplo, y sería totalmente equivalente.El "aspecto visual" del código dependedel estilo que cada uno quiera emplear.

Ejemplo 5.61 {

2document.write("Una sentencia

"); document.write("en un ");

3document.write("bloque

de código");}

5.2.2. Comentarios

Los comentarios son totalmentetransparentes al código, y no afectan almismo ni en el modo de ejecutarse ni enla velocidad de ejecución. Loscomentarios se implementan de dosmaneras diferentes.

La primera es utilizando dos barrasinclinadas (//). Desde que el intérpretede JavaScript encuentra las dos barrashasta que llega al final de la línea, todoel texto que haya entremedias seráignorado.

La segunda manera de comentarfragmentos de código es usando lossímbolos barra inclinada y asterisco(/*) y viceversa (*/). Estos símbolosdefinen zonas de comentario que puedenextenderse a través de varias líneas.

Ejemplo 5.71

// Esta linea estacomentadavar a; // El comentario no

2 afecta al codigo3

4/* Todo este codigo estacomentado

5 var b = 0;6 alert("Hola a todos");7 */

5.2.3. Declaración devariables

Para definir variables enJavaScript usaremos la palabrareservada var. Al contrario que en otroslenguajes, no es necesario declarar las

variables que se emplean, pero es unabuena costumbre.

No todas las palabras sirven paradefinir variables. Existen tres normasque hay que cumplir:

Un nombre de variable válido secompone únicamente de unapalabra (sin espacios), pudiendoestar formada por letras, números oel guión de subrayado (_).

La primera letra del nombre de lavariable deberá ser siempre unaletra o el carácter de guión desubrayado. No podrá ser unnúmero.

El nombre de la variable no debecoincidir con ninguna de laspalabras reservadas.

Al declarar una variable es posibleasignarle un valor inicial. Si no se leasigna un valor inicial, posee un valornulo representado por la palabra clavenull. El empleo de variables sin valorpuede producir errores.

Ejemplo 5.81 // Declaraciones correctas

2var _nombre, _apellido1,_apellido2;

3var Provincia ="Alicante";

4 var ciudad1, ciudad2;

5var codigo_postal ="03001";

6

7// Declaracionesincorrectas

8 var 12edad;9 var var;

JavaScript es un lenguaje sin tipos,es decir, no necesita una declaración deltipo de las variables para trabajar conellas, porque él mismo se encarga dereconocer que es lo que se quierealmacenar. Los distintos tipos de datosque puede almacenar una variable enJavaScript son:

Cadenas. Las cadenas de texto sedelimitan por comillas dobles (") ocomillas simples (') y puedencontener cualquier tipo decombinación de números, letras,espacios y símbolos. El uso de losdos tipos de comillas tiene susentido, ya que debido a queJavaScript se usa conjuntamentecon el lenguaje HTML, y comoéste usa las comillas dobles en susintaxis, tiene que haber algúnmétodo de distinguir las cadenas deJavaScript de las cadenas deHTML. Por ejemplo: var ciudad= "Elche", provincia ="Alicante";.

Números enteros. Un númeroentero se representa comocualquier sucesión de dígitos (0 a9), precedidos por el signo menos(-) si es un número negativo. Porejemplo: var a = 1, b =100000, c = -123456789;.

Números en coma flotante. Serepresentan de igual forma que losnúmeros enteros, pero añaden unaparte decimal que se representa conun punto (.) seguido de tantas cifrascomo compongan la parte decimaldel número. Por ejemplo: var a =9.12, b = -3.141592, c =10000000000000.1;.

Booleanos. Representa únicamentedos valores, verdadero (true) ofalso (false) y se suele utilizar ensentencias condicionales. Porejemplo: var rojo = true,verde = false;.

Nulo. Se utiliza únicamente paracomprobar si una variable que seha definido tiene un valor asignadoo no. Por ejemplo:

Ejemplo 5.91 var nombre;2 if(nombre == null)3 {

4alert("Introduzca su

nombre, por favor");5 }

5.2.4. Ámbito de lasvariables

Ya se ha comentado antes que no esnecesario declarar las variables antes deusarlas. Sin embargo, el hecho dedeclarar una variable sí que influye en elámbito de existencia (dónde existe ycuánto tiempo existe una variable).Siempre que se declare una variablelocal a un ámbito (a una función, porejemplo), dominará sobre cualquier otravariable que se hubiese declarado fuerade ese ámbito. Además, una variable

declarada en una función no puede seraccedida desde otra función.

Por ejemplo, en el siguiente códigose declaran tres variables globales a, by c. Aunque la variable b no haya sidodeclarada con var, el solo hecho deasignarle un valor ya supone declararla.En la función fun(), se declara unavariable c local ("Maria"), por lo queno se puede acceder a la variable cglobal ("Ana"). Desde esta función sellama a la función fun2(); desde estafunción sí que se puede acceder a lavariable global c.

Ejemplo 5.10

1 <HTML>2 <BODY>


4 var a = "Juan";5 b = "Jose";6 var c = "Ana";7

8 function fun2()9 {

10document.write("fun2-

c- " + c + "<BR>");11 }12

13 function fun()14 {15 var c = "Maria";16


a- " + a + "<BR>");document.write("fun1-

18 b- " + b + "<BR>");19 fun2();


c- " + c + "<BR>");21 }22

23 fun();24

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


El código anterior produce lasiguiente salida en un navegador:

Ejemplo 5.111 fun1-a- Juan

2 fun1-b- Jose3 fun2-c- Ana4 fun1-c- Maria5 -c- Ana

5.2.5. Caracteres especiales

Además de los caracteres normales,en una cadena también se pueden incluircaracteres especiales que permitengenerar saltos de líneas o caracteres apartir de su código ASCII. El Cuadro5.5 muestra los caracteres especialesque se pueden emplear dentro de una

cadena.

Carácter Significado

\b Retroceso(backspace)

\f Salto de página(form feed)

\n Salto de línea (newline)

\r Retorno de carro(carriage return)

\t Tabulador

\' Apóstrofe o comillasimple

\" Comilla doble

\\ Barra invertida(backslash)El carácter de la

Cuadro 5.5: Caracteres especiales

\XXXcodificación Latin-1especificado por lostres dígitos octalesentre 0 y 377.

\xXX

El carácter de lacodificación Latin-1especificado por losdos dígitoshexadecimales entre00 y FF.

\uXXXX

El carácter Unicodeespecificado por loscuatro dígitoshexadecimales entre0000 y FFFF.

Por ejemplo, el siguiente códigoproduce el resultado que se muestra enla Figura 5.1.



4document.write("\\251produce: \251<BR>");

5document.write("\\xAAproduce: \xAA<BR>");

6document.write("\\u00FAproduce: \u00FA<BR>");


Figura 5.1: Ejemplo de caracteresespeciales

5.2.6. Operadores

Los operadores son los signos quese usan para referirse a distintas

operaciones que se pueden realizar conlas variables y con las constantes, talescomo suma, resta, incremento, etc.

La precedencia de los operadoresdetermina el orden en que se aplicancuando se evalúa una expresión. Sepuede anular la precedencia usandoparéntesis. El Cuadro 5.6 muestra laprecedencia de los operadores, demenos a más. Los operadores que seencuentran en un mismo nivel poseen lamisma precedencia.

Tipo deoperador Operadores

Coma ,= += -= *=

Asignación /= %= <<=>>= >>>= &=^= |=

Condicional ?:O lógico (OR) ||Y lógico(AND) &&

O bit a bit (OR) |O exclusiva bita bit (XOR) ^

Y bit a bit(AND) &

Igualdad == != ===!==

Relacional < <= > >=Desplazamientobit a bit << >> >>>

Suma y resta + -

Cuadro 5.6: Precedencia de losoperadores de JavaScript

Multiplicacióny división

* / %

Negación eincremento

! ~ - + ++ -- typeofvoid delete

Llamada afunción ()

Creación deinstancias new

Miembro . []

5.2.7. Palabras reservadas

Las palabras reservadas (reservedwords) no se pueden usar como nombresde variables, funciones, métodos uobjetos. Algunas de las palabrasreservadas son palabras clave(keywords) de span JavaScript,mientras que otras se han reservado parafuturos usos.

En el Cuadro 5.7 se muestran laspalabras reservadas de spanJavaScript 1.3.

abstract boolean breakcase catch charconst continue debuggerdelete do double

Cuadro 5.7: Palabras reservadas de JavaScript

enum export extendsfinal finally floatfunction goto ifimport in instanceof

interface long nativenull package private

public return shortsuper switch synchronizedthrow throws transient

try typeof varvolatile while with

5.3. Sentencias

Vamos a detallar las sentencias queincluye el lenguaje JavaScript. Todasestas sentencias son anidables: sepueden incluir unas dentro de otrastantas veces como se quiera.

5.3.1. Condicionales

Una sentencia condicional es unconjunto de comandos que se ejecutan siuna condición es cierta (true).JavaScript proporciona dos sentenciascondicionales: if ... else y switch.

if . . . else

La sentencia de selección simpleposee la siguiente sintaxis (la parte entrecorchetes es opcional):

Ejemplo 5.131 if(condicion)2 {3 sen14 }5 [else6 {7 sen28 }]

El conjunto de sentencias sen1 se

ejecuta si condicion es cierta; en casocontrario se ejecuta sen2.

Como ejemplo tenemos el siguientecódigo:



4 var a;5

6a = prompt("Escriba unnúmero, por favor", "");

7 if(a <= 1)8 {

9alert("Es menor o

igual que 1");10 }

11 else if(a <= 5)12 {

13alert("Es mayor que

1, pero menor o igual que5");

14 }15 else16 {

17alert("Es mayor que

1");18 }19 </SCRIPT>

20 <TITLE>Ejemplo if</TITLE>21 </HEAD>22 <BODY BGCOLOR="#FFFFFF">23 </BODY>24 </HTML>

switch

La sentencia de selección múltipleposee la siguiente sintaxis:

Ejemplo 5.151 switch(expresion)2 {3 case et1 :4 sen1;5 [break;]

6 case et2 :7 sen2;8 [break;]9 ...10 [default :11 sen;]

12 }

La sentencia switch evalúa unaexpresión e intenta encontrar unaetiqueta (valor) que case con elresultado de la evaluación. Si se logracasar, se ejecutan las sentenciasasociadas con esa etiqueta. Si no selogra ningún emparejamiento, se buscala etiqueta opcional default y seejecutan sus sentencias asociadas.

La sentencia break opcional en cadaetiqueta asegura que el programa salgadel switch una vez que se han ejecutadolas sentencias correspondientes ycontinúa la ejecución por la línea

siguiente a la sentencia switch. Si no seincluye un break, el flujo de ejecuciónpasará de una opción case a otra hastaque encuentre un break o finalice lasentencia switch.




4 var a;5

6a = prompt("¾Cuántoshijos tiene?", "");

7 switch(a)

8 {

9case 0:

alert("Anímese un día deestos");

10 break;

11case 1: alert("Puede

tener más");12 break;

13case 2: alert("Ya

tiene la parejita, ahoraa por el trío");

14 break;

15

default: alert("Unafamilia como las deantes: muchos hijos");

16 break;17 }18 </SCRIPT>

19<TITLE>Ejemploswitch</TITLE>

20 </HEAD>21 <BODY BGCOLOR="#FFFFFF">22 </BODY>23 </HTML>

5.3.2. De repetición

Un bucle es un conjunto decomandos que se ejecutan repetidamentehasta que una condición especificadadeja de cumplirse. JavaScript ofrecetres tipos de sentencias de repetición:for, do ... while y while.

for

La sintaxis de la repetición concontador es la siguiente:

Ejemplo 5.17

1for ([expInicial];[condicion];[expIncremento])

2 {3 sentencias4 }

Cuando un bucle for se ejecuta,ocurre lo siguiente:

1. Si existe la expresión deinicialización expInicial, seejecuta. La expresión inicial suele

inicializar uno o más contadores,pero se pueden emplearexpresiones de cualquier grado decomplejidad.

2. Se evalúa la expresión condicion.

3. Si el valor de condicion es cierto(true), las sentencias del buclese ejecutan. Si el valor decondicion es falso (false), elbucle termina.

4. La expresión de actualizaciónexpIncremento se ejecuta y elflujo de ejecución vuelve al paso 2.


Ejemplo 5.181 <HTML>2 <HEAD>3 <TITLE>Ejemplo for</TITLE>4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">


7 var a;8

9 for(a = 0; a <= 10; a++)10 {

11document.write("Vamos

por el número " + a + "<BR>\n");

12 }13 </SCRIPT>14 </BODY>15 </HTML>

do . . . while

La sentencia de repetición concondición final posee la siguientesintaxis:

Ejemplo 5.191 do2 {3 sentencias4 } while(condicion)

Las sentencias se ejecutan siempreal menos una vez antes de quecondicion se evalúe. Si se evalúa a

cierto, se repite el proceso: lassentencias se ejecutan una vez más ycondicion se vuelve a evaluar.



3<TITLE>Ejemplo dowhile</TITLE>

4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">6 <PRE>


8 var a, b;9

10 a = 1;

11 do12 {13 b = a;14 do15 {

16document.write("

");17 b--;18 }19 while(b > 0);

20document.write(a + "

<BR>\n");21 a++;22 }23 while(a < 10);24 </SCRIPT>25 </PRE>26 </BODY>27 </HTML>

while

La sintaxis de la sentencia derepetición con condición inicial es lasiguiente:

Ejemplo 5.211 while(condicion)2 {3 sentencias4 }

S i condicion es falsa, lassentencias del bucle dejan deejecutarse y el control pasa a lasiguiente sentencia después del bucle.

La evaluación de condicion ocurreantes de que se ejecuten sentencias.Por tanto, puede ocurrir que lassentencias no se ejecuten nunca.


Ejemplo 5.221 <HTML>2 <HEAD>3 <TITLE>Ejemplo while</TITLE>4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">6 <PRE>7 <SCRIPT LANGUAGE="JavaScript">8 var a, b;9

10 a = 1;

11 while(a <= 10)12 {

13document.write("Tabla del " + a +

"\n");14 document.write("============\n");15 b = 1;16 while(b <= 10)17 {

18document.write(a + " x " + b

+ " = " + (a * b) + "\n");19 b++;20 }21 document.write("\n");22 a++;23 }24 </SCRIPT>25 </PRE>26 </BODY>27 </HTML>

break

La sintaxis de esta sentencia es:

Ejemplo 5.231 break2 o3 break etiqueta

La sentencia break se usa parafinalizar un bucle (for, do..while,while) o una sentencia de selecciónmúltiple (switch).

continue


Ejemplo 5.241 continue2 o3 continue etiqueta

La sentencia continue se usa parapasar a la siguiente iteración en un bucle(for, do ... while, while).

5.3.3. De manipulación deobjetos

Existen dos sentencias de

manipulación de objetos: for(... in...) y with.

for(. . . in . . . )


Ejemplo 5.251 for(variable in objeto)2 {3 sentencias4 }

Esta sentencia permite que unavariable recorra todas las propiedadesde un objeto. Para cada propiedad delobjeto, se ejecutan las sentencias.

Para acceder a las propiedades de unobjeto se emplea el operador punto (.).


Ejemplo 5.261 <HTML>2 <HEAD>3 <SCRIPT LANGUAGE="JavaScript">

4function Propiedades(obj,obj_nombre)

5 {6 var resultado = "";7

8 for (var i in obj)9 {

10resultado += obj_nombre

+ "." + i + " = " + obj[i] + "<BR>"

11 }12

13 return resultado;14 }15 </SCRIPT>16 <TITLE>Ejemplo for_in</TITLE>17 </HEAD>18 <BODY BGCOLOR="#FFFFFF">19 <PRE>20 <SCRIPT LANGUAGE="JavaScript">

21document.write(Propiedades(window,"window"));

22 </SCRIPT>23 </PRE>24 </BODY>25 </HTML>

with


Ejemplo 5.271 with(objeto)2 {3 sentencias4 }

La sentencia with establece elobjeto por defecto sobre el que seejecutan un conjunto de sentencias quepueden acceder a las propiedades ométodos del objeto. De este modo, seevita tener que escribir el nombre delobjeto cada vez.


Ejemplo 5.281 <HTML>2 <HEAD>3 <TITLE>Ejemplo with</TITLE>4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">6 <PRE>


8 with(Math)9 {

10document.write("E: " + E

+ "\n");

11document.write("LN10: "

+ LN10 + "\n");

12document.write("LN2: " +

LN2 + "\n");

13document.write("LOG10E:

" + LOG10E + "\n");14

document.write("LOG2E: "+ LOG2E + "\n");

15document.write("Pi: " +

PI + "\n");

16document.write("SQRT1_2:

" + SQRT1_2 + "\n");

17document.write("SQRT2: "

+ SQRT2 + "\n");18 }19 </SCRIPT>20 </PRE>21 </BODY>22 </HTML>

5.4. Funciones

Una función es un fragmento decódigo al que suministramos unos datosdeterminados (parámetros oargumentos), ejecuta un conjunto desentencias y puede devolver unresultado.

5.4.1. Declaración defunciones

La definición de una función secompone de las siguientes partes:

La palabra clave function.

El nombre de la función.

Una lista de argumentos,encerrados entre paréntesis yseparados por comas. Una funciónpuede tener cero o más argumentos.

Las sentencias que definen lafunción, encerradas entre llaves.Las sentencias dentro de unafunción pueden llamar a su vez aotras funciones o a la mismafunción (recursividad).

Por tanto, la sintaxis de una funciónes:

Ejemplo 5.29function nombre([arg1 [,

1 arg2 [, ...]]])2 {3 sentencias4 }

En general, todas las funciones sedeberían de definir en la sección<HEAD> ... </HEAD> de la página.Así, cuando el usuario carga la página,las funciones es lo primero que se carga.De otro modo, el usuario podría realizaralguna acción (por ejemplo, lanzar unevento) que llamase a una función queno ha sido definida aún, lo queproduciría un error.

Por ejemplo, el siguiente códigodefine dos funciones llamadas cuadrado

y cubo que calculan el cuadrado y elcubo del número que reciben comoargumento respectivamente:


3<TITLE>Ejemplofunction</TITLE>

4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">6 <PRE>


8 var a;910 function cuadrado(numero)11 {

return numero *

12 numero;13 }14

15 function cubo(numero)16 {

17return numero *

numero * numero;18 }19

20a = prompt("Escribe unnúmero entero:", "");

21alert("El cuadrado de " +a + " es " +cuadrado(a));

22a = prompt("Escribe unnúmero entero:", "");

23alert("El cubo de " + a +" es " + cubo(a));

24 </SCRIPT>25 </PRE>


La instrucción return se empleapara finalizar la ejecución de unafunción y también para devolver unvalor.


JavaScript posee un conjunto defunciones predefinidas: eval,isFinite, isNaN, parseInt,parseFloat, Number, String, escape

y unescape.

eval

Evalúa una expresión que contienecódigo de JavaScript. La sintaxis eseval(expr), donde expr es laexpresión que va a ser evaluada.

Si la cadena representa unaexpresión, se evalúa; si representa una omás sentencias, se ejecutan. No hacefalta llama a eval para evaluarexpresiones aritméticas, ya queJavaScript evalúa las expresionesaritméticas automáticamente. Elsiguiente ejemplo muestra el

funcionamiento de esta función:


3<TITLE>Ejemploeval</TITLE>



7var a = 1, b = 2, c = 3,d = 4, e = 5, v;

8

9v = prompt("Escriba unaletra de la 'a' a la'e'", "");

10alert("El valor de '" + v+ "' es " + eval(v));


isFinite

Determina si el argumentorepresenta un número finito. La sintaxise s isFinite(num) donde num es elnumero que se quiere evaluar.

Si el argumento es "NaN" (not anumber, no un número), devuelvefalse, en caso contrario devuelve true.Por ejemplo, el siguiente código permitefiltrar la entrada del usuario y averiguarsi ha introducido un número correcto o

cualquier otra cosa:


3<TITLE>EjemploisFinite</TITLE>



7v = prompt("Escriba unnúmero", "");

8 if(isFinite(v))

9alert("Correcto, es

un número");10 else

11alert("Te has

equivocado");


isNaN

Determina si el argumento es "NaN"(not a number, no un número). Lasintaxis es isNaN(num) donde num es elnumero que se quiere evaluar.

Las funciones parseFloat yparseInt devuelven "NaN" cuandoevaluan un valor que no es un número.La función isNaN devuelve true si elargumento es "NaN" y false en casocontrario.

parseInt y parseFloat

Las dos funciones de conversiónparseInt y parseFloat devuelven unvalor numérico a partir de una cadena.

La sintaxis de parseFloat esparseFloat(cad), donde cad es lacadena que se quiere convertir a unnúmero en coma flotante. Si encuentra uncarácter devuelve el valor hallado hastaese punto e ignora ese carácter y elresto. Si el primer carácter no puedeconvertirse a un número, devuelve "NaN"(not a number, no un número).

La sintaxis de parseInt esparseInt(cad [, base]), donde cad

es la cadena que se quiere convertir a labase indicada en el segundo argumentoopcional. Por ejemplo, 10 indica que seconvierta a decimal, 8 a octal, 16 ahexadecimal. Para bases mayores quediez, las letras del alfabeto indicannumerales mayores que nueve. Porejemplo, para los númeroshexadecimales (base 16), las letras de laA a la F se usan. Si encuentra uncarácter que no es un numeral válido enla base especificada, ese carácter ytodos los caracteres que le siguen seignoran y devuelve el valor convertidohasta ese punto. Si el primer carácter nopuede convertirse a un número en la

base especificada, devuelve "NaN" (nota number, no un número).

Number y String

Las funciones Number y Stringconvierten un objeto a un número o a unacadena, respectivamente. La sintaxis deestas funciones es Number(objRef) yString(objRef), donde objRef es unareferencia a un objeto. Por ejemplo, elsiguiente código convierte un objetoDate a un número y a una cadena:


3 <TITLE>Ejemplo Number-String</TITLE>



7// Obtiene la fechaactual

8 var d = new Date();9

10// Milisegundostranscurridos desde el 1de enero de 1970

11alert("Milisegundostranscurridos: " +Number(d));

12

13 // Formato mas adecuado

14alert("Fecha: " +String(d));


escape y unescape

Las funciones escape y unescapepermiten codificar y decodificarcadenas. La función escape devuelve lacodificación hexadecimal de suargumento codificado en ISO Latin-1.La función unescape devuelve lacadena correspondiente a lacodificación hexadecimal pasada comoargumento. La sintaxis de estasfunciones es escape(string) y

unescape(string). Por ejemplo, elsiguiente código genera una página conun formulario con dos botones. Un botónaplica la función escape a la cadenaque introduce el usuario y el otro aplicala función unescape.


3<TITLE>Función predefinidaescape()</TITLE>

4<SCRIPTLANGUAGE="JavaScript">function hazEscape()

5 {6 var cadena;7

8 cadena = prompt("Escribauna cadena", "");9 alert(escape(cadena));

10 }11

12 function hazUnescape() {13 var cadena;14

15cadena = prompt("Escriba

una cadena", "");16 alert(unescape(cadena));17 }18 </SCRIPT>19 </HEAD>20 <BODY>21 <CENTER>22 <FORM NAME="formulario">

23<INPUT TYPE="BUTTON"VALUE="escape"ONCLICK="hazEscape()"><INPUT TYPE="BUTTON"

24 VALUE="unescape"ONCLICK="hazUnescape()">

25 </FORM>26 </CENTER>27 </BODY>28 </HTML>

5.5. Objetos

JavaScript es un lenguaje basadoen objetos. Pero no se puede considerarque sea "orientado a objetos", ya que noposee características básicas como laherencia simple o múltiple, la jerarquíade clases, el polimorfismo, la ocultación

de datos, etc.E n JavaScript un objeto es un

constructor con propiedades (quepueden ser variables u otros objetos) ymétodos (funciones asociadas aobjetos).

En la Sección 5.3.3 se vieron lassentencias for(... in ...) y withque permiten manipular objetos. Paraacceder a las propiedades o métodos deun objeto se emplea el operador punto(.). Por ejemplo, en el siguiente códigose accede a la propiedad status y almétodo alert del objeto window:

Ejemplo 5.35

1 window.status ="Bienvenido a JavaScript";

2window.alert("2 + 2 = " +(2 + 2));

También se puede acceder a laspropiedades y métodos de un objetomediante la notación de arraysasociativos. Se puede acceder al objetocomo si fuera un array. Cada índice deacceso es una cadena que representa unapropiedad o un método.

El código del ejemplo anterior seexpresa mediante arrays asociativos dela siguiente forma:

Ejemplo 5.361

window.["status"] =

"Bienvenido a JavaScript";2

window.["alert"]("2 + 2 =" + (2 + 2));

5.5.1. Creación de objetos

Existen dos formas de crear unobjeto nuevo: inicializadores de objetosy funciones constructoras.

Inicializadores de objetos

La sintaxis de este método es:

Ejemplo 5.37nombreObjeto =

1 {prop1:val1, prop2:val2,..., propN:valN}

donde nombreObjeto es el nombredel nuevo objeto, propI es el nombre deuna propiedad y valI el valor asociadoa la propiedad. Un objeto puede tenercomo propiedad otro objeto.

Por ejemplo, el siguiente códigodefine dos objetos llamados profesor yasignatura. El objeto profesor formaparte del objeto asignatura.

Ejemplo 5.38

1profesor ={nombre:"Sergio",apellidos:"Luján Mora"}

2 asignatura = {cod:"PI",cred:6, prof:profesor};

3document.write("Código: " +asignatura.cod);

4 document.write("<BR>");

5document.write("Créditos: "+ asignatura["cred"]);


7document.write("Profesor: "+ asignatura.prof.nombre

8+ " " +asignatura.prof.apellidos);


Funciones constructoras

En este sistema se emplea unafunción que realiza el papel de

"constructor". Cuando se crea el objeto,se emplea el operador new y el nombrede la función constructora. Este métodoes mejor que el anterior, ya que permitecrear un "tipo" para distintos objetos.

En la función constructora se indicanlas propiedades y métodos del objeto.Una característica especial deJavaScript es que en cualquiermomento se pueden añadir nuevaspropiedades o métodos a un objetoconcreto (no se añaden a todos losobjetos del mismo tipo). Dentro de lafunción constructora se emplea lapalabra reservada this para hacerreferencia al objeto.

Por ejemplo, el siguiente códigodefine un objeto de tipo Persona y dosobjetos de tipo Pagina. Estos últimosposeen una propiedad que es un objetode tipo Persona.

Ejemplo 5.391

function Persona(nombre,apellidos)

2 {

3this.nombre =

nombre;

4this.apellidos =

apellidos;

5 }6

7function Pagina(autor,url, fecha)

8 {9 this.autor = autor;10 this.url = url;11 this.fecha = fecha;12 }13

14slm = newPersona("Sergio", "LujánMora");

15p1 = new Pagina(slm,"index.html","18/04/2001");

16p2 = new Pagina(slm,"home.html","23/03/2001");

17

18document.write(p1.url +": " + p1.fecha);

19 document.write("<BR>");document.write(p2.url +

20 ": " + p2.fecha);

5.5.2. Métodos de un objeto

Para definir un método de un objeto,simplemente hay que asignar a unapropiedad del objeto el nombre de unafunción. En la función, si se quiereacceder a las propiedades del objeto, setiene que emplear la palabra reservadathis.

Por ejemplo, el siguiente códigocrea dos objetos de tipo Ordenador.Estos objetos poseen un método llamado

ver que muestra las propiedades delobjeto.

Ejemplo 5.401 function ver()2 {

3document.write("CPU: " +

this.cpu + "<BR>");

4document.write("Velocidad:

" + this.vel + " MHz<BR>");

5document.write("Memoria: "

+ this.mem + " Mb<BR>");

6document.write("Disco

duro: " + this.dd + " Gb<BR>");7 }8

9function Ordenador(cpu, vel,mem, dd)

10 {11

this.cpu = cpu;12 this.vel = vel;13 this.mem = mem;14 this.dd = dd;15 this.ver = ver;16 }17

18o1 = new Ordenador("Pentium",200, 32, 3);

19o2 = new Ordenador("PentiumII", 500, 128, 15);

20 o1.ver();21 o2.ver();

5.5.3. Eliminación deobjetos

Para eliminar un objeto se emplea elo p e r a d o r delete. Este operadordevuelve true si el borrado es correctoy false en caso contrario.

5.6. Tratamiento de cadenas

Las cadenas en JavaScript sepueden representar de dos formas:

Directamente como literales:caracteres encerrados entrecomillas simples o dobles.

Como un objeto String: esteobjeto "envuelve" al tipo de dato

cadena.

No se debe confundir una cadenaliteral con un objeto String. Porejemplo, el siguiente código crea lacadena literal s1 y el objeto de tipoString s2:

Ejemplo 5.411 // crea una cadena literal2 s1 = "algo"3

4 // crea un objeto String

5 s2 = new String("algo")

Todos los métodos del objetoString se pueden emplear directamente

en una cadena literal: JavaScriptconvierte automáticamente la cadenaliteral a un objeto String temporal,ejecuta el método sobre ese objeto yfinaliza eliminando el objeto Stringtemporal. También se puede emplear lapropiedad String.length con unacadena literal: devuelve el número decaracteres (longitud) que posee lacadena.

A continuación mostramos losprincipales métodos que posee el objetoString: charAt, concat, indexOf,lastIndexOf, replace, slice ysplit.

charAt(indice)

Devuelve el carácter especificadop o r indice en la cadena. El indicetoma valores entre 0 y la longitud de lacadena menos 1. Ejemplo:

Ejemplo 5.421 var cadena = "Hola";2

3

document.writeln("Carácteren 0 es " +cadena.charAt(0) + "<BR>");

4


5


El ejemplo anterior produce lasiguiente salida:

Ejemplo 5.431 Carácter en 0 es H2 Carácter en 1 es o3 Carácter en 2 es l

concat(cadena1, cadena2, .. . , cadenaN)

Concatena varias cadenas en una

sola. Ejemplo:

Ejemplo 5.441 var cad1 = "Hola";2 var cad2 = " a";3 var cad3 = " todo";4 var cad4 = " el mundo";5

6cad5 = cad1.concat(cad2,cad3, cad4);

7 document.writeln(cad5);

El código anterior produce elsiguiente resultado:

Ejemplo 5.451 Hola a todo el mundo

indexOf(valorBuscado [,inicio])

Devuelve la primera posición devalorBuscado dentro de la cadena apartir del principio de la cadena (o deinicio que es opcional) o -1 si no seencuentra. Ejemplo:

Ejemplo 5.461 var cuenta = 0;

2var pos;

3var cad = "Cadena conunas letras"

4

5 pos = cad.indexOf("a");6 while(pos != -1)

7 {8 cuenta++;

9pos =

cad.indexOf("a", pos +1);

10 }

11document.write("La cadenacontiene " + cuenta + "aes");

El ejemplo anterior produce lasiguiente salida:

Ejemplo 5.471 La cadena contiene 4 aes

lastIndexOf(valorBuscado

[, inicio])

Similar a la función indexOf, perobusca desde el final de la cadena o elinicio que se indique hacia elprincipio. Ejemplo:

Ejemplo 5.481 var pos;

2var cad = "Cadena con unasletras"

3

4pos =cad.lastIndexOf("a");

5document.write("La últimaa está en " + pos + "<BR>");

6pos = cad.lastIndexOf("a",pos - 1);

7document.write("Lapenúltima a está en " +pos + "<BR>");

Este ejemplo genera el siguienteresultado:

Ejemplo 5.491 La última a está en 202 La penúltima a está en 13

replace(exRegular,nuevaCadena)

Busca una expresión regular(exRegular) en una cadena y cada vezque se encuentra se sustituye por

nuevaCadena. Si se quiere buscarvarias veces, hay que incluir elmodificador g en la expresión regularpara realizar una búsqueda global. Si nose quiere distinguir minúsculas ymayúsculas, hay que incluir elmodificador i. Ejemplo:

Ejemplo 5.501

var cad = "Juan es hermanode Juan Luis";

2 var aux;3

4aux =cad.replace(/Juan/gi,"Jose");

5document.write(cad + "<BR>");

6 document.write(aux + "<BR>");

El código anterior muestra elsiguiente resultado:

Ejemplo 5.511

Juan es hermano de JuanLuis

2Jose es hermano de JoseLuis

slice(inicio [, fin])

Extrae un trozo de una cadena desdeinicio hasta fin - 1. Si no se indicafin, se extrae hasta el final de la

cadena. Ejemplo:

Ejemplo 5.521


2 var aux;3

4 aux = cad.slice(8);

5document.write(aux + "<BR>");

6 aux = cad.slice(8, 15);

7document.write(aux + "<BR>");

Este ejemplo produce el siguienteresultado:

Ejemplo 5.531 hermano de Juan Luis

2 hermano

split(separador [,limite])

Divide una cadena en función delseparador. El resultado de la divisiónse almacena en un array. El valor delimite indica el número máximo dedivisiones que se pueden hacer.Ejemplo:

Ejemplo 5.541


2 var aux, i;3

4 aux = cad.split(" ");

5for(i = 0; i < aux.length;i++)

6document.write("Posicion "+ i + ": " + aux[i] + "<BR>");

El ejemplo anterior genera elsiguiente resultado:

Ejemplo 5.551 Posicion 0: Juan2 Posicion 1: es3 Posicion 2: hermano4 Posicion 3: de5 Posicion 4: Juan6 Posicion 5: Luis

5.7. Operacionesmatemáticas

JavaScript dispone del objetoMath que posee una serie depropiedades y métodos que permitentrabajar con constantes y funcionesmatemáticas. Todos los métodos ypropiedades son estáticos, por lo que nohace falta crear un objeto de tipo Mathpara usarlos. En el Cuadro 5.8 semuestran las principales propiedadesdel objeto Math.

Propiedad Descripción

E

Constante de Euler,la base de loslogaritmosnaturales(neperianos).Aproximadamente2.718

LN10

El logaritmonatural de 10.Aproximadamente2.302

LN2

El logaritmonatural de 2.Aproximadamente0.693

LOG10E

El logaritmodecimal (base 10)de E.

Aproximadamente0.434

LOG2E

El logaritmo enbase 2 de E.Aproximadamente1.442

PI

Razón de lacircunferencia deun círculo a sudiámetro.Aproximadamente3.141

SQRT1_2

Raíz cuadrada de 1/ 2.Aproximadamente0.707

Raíz cuadrada de

Cuadro 5.8: Propiedades del objetoMath

SQRT2 2.Aproximadamente1.414

Los principales métodos del objetoMath 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 unnúmero.

Ejemplo 5.56

Ejemplo 5.561document.write(Math.abs(3.5)+ "<BR>");

2document.write(Math.abs(2) +"<BR>");

3document.write(Math.abs(-0.5) + "<BR>");

4document.write(Math.abs(-4)+ "<BR>");

El código anterior produce lasiguiente salida:

Ejemplo 5.571 3.52 23 .54 4

acos, asin, atan

Devuelve el arcocoseno, arcoseno yarcotangente en radianes de un número.

ceil

Devuelve el entero menor mayor oigual que un número. Ejemplo:

Ejemplo 5.581document.write("ceil(2): "+ Math.ceil(2) + "<BR>");

2document.write("ceil(2.0):" + Math.ceil(2.0) + "<BR>");

3document.write("ceil(2.05):" + Math.ceil(2.05) + "

<BR>");

El código anterior genera lasiguiente salida:

Ejemplo 5.591 ceil(2): 22 ceil(2.0): 23 ceil(2.05): 3

cos, sin, tan

Devuelve el coseno, seno y tangentede un ángulo expresado en radianes.

exp

Devuelve E elevado a un número.

floor

Devuelve el mayor entero menor oigual que un número. Ejemplo:

Ejemplo 5.601document.write("floor(2): "+ Math.floor(2) + "<BR>");

2document.write("floor(2.0):" + Math.floor(2.0) + "<BR>");



Este ejemplo muestra el siguienteresultado:

Ejemplo 5.611 floor(2): 22 floor(2.0): 23 floor(2.05): 24 floor(2.99): 2

Devuelve el logaritmo natural (enbase E) de un número.

max, min

Devuelve el mayor (mínimo) de dosnúmeros. Ejemplo:

Ejemplo 5.62

1document.write("max(3, 5):" + Math.max(3, 5) + "<BR>");

2document.write("min(3, 5):" + Math.min(3, 5) + "<BR>");

El código anterior genera lasiguiente salida:

Ejemplo 5.631 max(3, 5): 52 min(3, 5): 3

pow

Devuelve la base elevada al

exponente. Ejemplo:

Ejemplo 5.64

1document.write("pow(2, 3):" + Math.pow(2, 3) + "<BR>");



El ejemplo anterior genera elsiguiente resultado:

Ejemplo 5.651 pow(2, 3): 82 pow(3, 4): 81

3 pow(5, 0): 1

random

Produce un número pseudoaleatorioentre 0 y 1. Ejemplo:

Ejemplo 5.66

1document.write("random():" + Math.random() + "<BR>");

2

document.write("random():" + Math.random() + "<BR>");

Este ejemplo produce la siguientesalida:

Ejemplo 5.671

random():.32779162476197754

2random():.8945828404144374

round

Devuelve el entero más cercano a unnúmero. Si la parte decimal es menorque 0.5, lo redondea al entero mayormenor o igual que el número; si la partedecimal es igual o mayor que 0.5, loredondea al entero menor mayor o igualque el número. Ejemplo:

Ejemplo 5.68

1document.write("round(3.49):" + Math.round(3.49) + "<BR>");



Produce la siguiente salida:

Ejemplo 5.691 round(3.49): 32 round(3.5): 43 round(3.51): 4

sqrt

Devuelve la raíz cuadrada de unnúmero.

5.8. Validación deformularios

Una de las utilidades másimportantes que ofrece JavaScript esla posibilidad de realizar validacionesinmediatas de la informaciónintroducida por un usuario en unformulario. Aunque existe la alternativade utilizar un programa CGI o un ASPque realice la misma función en el

servidor, poder llevar a cabo esteproceso en el cliente, ahorra tiempo deespera a los usuarios, disminuye elnúmero de conexiones al servidor ylimita la carga del servidor.

Antes de estudiar la validación deformularios, conviene leer el Capítulo 6,ya que en él se explica DOM, unarepresentación de los distintoselementos que componen una páginaweb. Mediante DOM se accede a losformularios y sus controles.

5.8.1. Validación camponulo

Muchas veces interesa comprobar sise ha introducido información en uncampo: que no se deje en blanco algúndato. En el siguiente ejemplo, la funcióncompruebaVacio determina si en uncampo se ha introducido información,teniendo en cuenta que se considerainformación todo lo que sea distinto devacío, espacios en blanco o tabuladores.En la Figura 5.2 vemos como sevisualiza el siguiente código en unnavegador.


3 <TITLE>Validación de un campo vacío</TITLE>4 <SCRIPT LANGUAGE="JavaScript">5 error = new creaError();6 errores = new Array();7 errores[0] = "Campo vacío";

8errores[1] = "Campo sólo contiene blancos otabuladores";

9

10 function creaError()11 {12 this.valor = 0;13 return this;14 }15

16 function compruebaVacio(contenido, error)17 {18 if(contenido.length == 0)19 {20 error.valor = 0;21 error.posicion = 0;

22 return true;23 }24 for(var i = 0; i < contenido.length; i++)25 if(contenido.charAt(i) != ' ' &&26 contenido.charAt(i) != '\t')27 return false;28

29 error.valor = 1;30 return true;31 }32

33 function valida()34 {

35if(compruebaVacio(document.formulario.campo.value,

error))

36alert("El campo no es correcto: " +

errores[error.valor]);37 else

38alert("El campo es correcto: Campo no

vacío");

39 }40 </SCRIPT>41 </HEAD>42 <BODY>43 <FORM NAME="formulario">44 <B><CENTER>Validación de un campo vacío</CENTER></B>45 <BR>46 Campo: <INPUT TYPE="TEXT" NAME="campo">47 <INPUT TYPE="BUTTON" VALUE="Valida" ONCLICK="valida()">48 </FORM>49 </BODY>50 </HTML>

Figura 5.2: Validación campo nulo

5.8.2. Validación alfabética

Un tipo elemental de informaciónque aparece en muchos formularios es eltipo alfabético compuesto por los

caracteres alfabéticos del idioma enparticular con el que se trabaje. En elsiguiente ejemplo, las funcionescompruebaAlfa, compruebaAlfaMin ycompruebaAlfaMay validan que unvalor sea una palabra, una palabra enminúsculas y una palabra en mayúsculas,incluyendo la posibilidad de que existanletras acentuadas o con diéresis. En laFigura 5.3 vemos el aspecto de la páginavisualizada en un navegador.


3<TITLE>Validación alfabética de uncampo</TITLE>

4 <SCRIPT LANGUAGE="JavaScript">5

mayusculas ="ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚÜ";

6minusculas ="abcdefghijklmnñopqrstuvwxyzáéíóúü";

7

8 error = new creaError();9 errores = new Array();10 errores[1] = "Falta carácter alfabético";

11errores[2] = "Falta carácter alfabético enminúsculas";

12errores[3] = "Falta carácter alfabético enmayúsculas";

13

14 function creaError()15 {16 this.valor = 0;17 this.posicion = 0;18 return this;19 }20

21 function esMinuscula(c)22 {23 return minusculas.indexOf(c) >= 0;24 }2526

27 function esMayuscula(c)28 {29 return mayusculas.indexOf(c) >= 0;30 }31

32 function esLetra(c)33 {34 return esMinuscula(c) || esMayuscula(c);35 }36

37 function compruebaAlfa(contenido, error)38 {39 for(var i = 0; i < contenido.length; i++)40 if(!esLetra(contenido.charAt(i)))

41 {42 error.valor = 1;43 error.posicion = i + 1;44 return false;45 }46

47 return true;48 }49

50 function compruebaAlfaMin(contenido, error)51 {52 for(var i = 0; i < contenido.length; i++)53 if(!esMinuscula(contenido.charAt(i)))54 {55 error.valor = 2;56 error.posicion = i + 1;57 return false;58 }59

60 return true;

61 }62

63 function compruebaAlfaMay(contenido, error)64 {65 for(var i = 0; i < contenido.length; i++)66 if(!esMayuscula(contenido.charAt(i)))67 {68 error.valor = 3;69 error.posicion = i + 1;70 return false;71 }72


76 function valida(valor)77 {78 var correcto;

79var contenido =

document.formulario.campo.value;

8081 switch(valor)82 {83 case 1:

84correcto =

compruebaAlfa(contenido, error);85 break;86

87 case 2:

88correcto =

compruebaAlfaMin(contenido, error);89 break;90

91 case 3:

92correcto =

compruebaAlfaMay(contenido, error);93 break;94

95 default:96 break;97 }

9899 if(correcto)100 alert("El campo es válido");101 else

102alert("El campo no es válido: " +

errores[error.valor] +

103" en la posición " +

error.posicion);104 }105 </SCRIPT>106 <BODY>107 <FORM NAME="formulario">

108<B><CENTER>Validación alfabética de uncampo</CENTER></B>

109 <BR>110 Campo: <INPUT TYPE="TEXT" NAME="campo">

111<INPUT TYPE="BUTTON" VALUE="Palabra"ONCLICK="valida(1)">

112<INPUT TYPE="BUTTON" VALUE="Minúsculas"ONCLICK="valida(2)">

113 <INPUT TYPE="BUTTON" VALUE="Mayúsculas"ONCLICK="valida(3)">

114 </FORM>115 </BODY>116 </HTML>

Figura 5.3: Validación alfabética

5.8.3. Validación numérica

Se pueden distinguir tres tipos deformatos numéricos básicos:

Número natural: formado por loscaracteres numéricos.

Número entero: formado por unsigno inicial opcional (+, -),seguido de un número natural.

Número real: formado por un signoinicial opcional (+, -), seguido decaracteres numéricos y,opcionalmente, seguido de la comadecimal y otra serie de caracteresnuméricos.

En el siguiente ejemplo, las

f u n c i o n e s compruebaNatural,compruebaEntero y compruebaRealvalidan que un valor sea un númeronatural, un número entero y un númeroreal‹ 34 › respectivamente. En la Figura5.4 vemos el aspecto de la páginavisualizada en un navegador.

Ejemplo 5.721 <HTML>2 <HEAD>3 <TITLE>Validación numérica de un campo</TITLE>4 <SCRIPT LANGUAGE="JavaScript">5 numeros = "0123456789";6 puntoDecimal = ".,";7 signos = "+-";8

9 error = new creaError();

10 errores = new Array();11 errores[1] = "Campo vacío no contiene ningún valor";12 errores[2] = "Carácter ilegal en un número";13 errores[3] = "Carácter ilegal";14 errores[4] = "Sólo ha insertado un signo";15 errores[5] = "Parte decimal vacía";16

17 function creaError()18 {19 this.valor = 0;20 this.posicion = 0;21 return this;22 }23

24 function numero(c)25 {26 return numeros.indexOf(c) >= 0;27 }28

29 function signo(c)

30 {31 return signos.indexOf(c) >= 0;32 }33

34 function compruebaNatural(contenido, error)35 {36 if(contenido.length == 0)37 {38 error.valor = 1;39 error.posicion = 1;40 return false;41 }42

43 for(var i = 0; i < contenido.length; i++)44 if(!numero(contenido.charAt(i)))45 {46 error.valor = 2;47 error.posicion = i + 1;48 return false;49 }


54 function signoCorrecto(contenido, error)55 {56 if(contenido.length == 0)57 {58 error.valor = 1;59 error.posicion = 1;60 return false;61 }62

63 if(!numero(contenido.charAt(0)) &&64 !signo(contenido.charAt(0)))65 {66 error.valor = 3;67 error.posicion = 1;68 return false;69 }


74 function compruebaEntero(contenido, error)75 {76 if(!signoCorrecto(contenido, error))77 return false;78

79 if(numero(contenido.charAt(0)))80 var aux = compruebaNatural(contenido, error);81 else82 {83 var aux = compruebaNatural(contenido.substring(1,84 contenido.length), error);85 if(!aux)86 error.posicion++;87 if(error.valor == 1)88 {89 error.valor = 4;

90 error.posicion = 1;91 }92 }93

94 return aux;95 }96

97 function compruebaReal(contenido, error)98 {99 var aux = compruebaEntero(contenido, error);100 var posicion = error.posicion - 1;101

102 if(!aux && error.valor == 2 &

103puntoDecimal.indexOf(contenido.charAt(posicion))

>= 0)104 {105 var aux = compruebaNatural(contenido.substring(106 error.posicion, contenido.length), error);107 if(!aux && error.valor == 1)108 {

109 error.valor = 5;110 }111 if(!aux)112 error.posicion += posicion + 1;113 }114

115 return aux;116 }117

118 function valida(valor)119 {120 var correcto;121 var contenido = document.formulario.campo.value;122

123 switch(valor)124 {125 case 1:126 correcto = compruebaNatural(contenido, error);127 break;128

129 case 2:

130 correcto = compruebaEntero(contenido, error);131 break;132

133 case 3:134 correcto = compruebaReal(contenido, error);135 break;136

137 default:138 break;139 }140

141 if(correcto)142 alert("El campo es válido");143 else

144alert("El campo no es válido: " +

errores[error.valor] +145 " en la posición " + error.posicion);146 }147 </SCRIPT>148 <BODY>

149 <FORM NAME="formulario">150 <B><CENTER>Validación numérica de un campo</CENTER></B>151 <BR>152 Campo: <INPUT TYPE="TEXT" NAME="campo">153 <INPUT TYPE="BUTTON" VALUE="Natural" ONCLICK="valida(1)">154 <INPUT TYPE="BUTTON" VALUE="Entero" ONCLICK="valida(2)">155 <INPUT TYPE="BUTTON" VALUE="Real" ONCLICK="valida(3)">156 </FORM>157 </BODY>158 </HTML>

Figura 5.4: Validación numérica

Capítulo 6

Modelo de objetos dedocumento

El Modelo de Objetos deDocumento es un interfaz quepermite acceder y modificar laestructura y contenido de unapágina web. Especifica como sepuede acceder a los distintoselementos (enlaces, imágenes,formularios, etc.) de una página ycomo se pueden modificar. En este

capítulo vamos a describir losobjetos que componen estemodelo, sus propiedades, métodosy eventos.

Índice General

6.1. Introducción6.2. Modelo de objetos en

Netscape Communicator6.2.1. Objeto document6.2.2. Cómo acceder a los

controles de un formulario6.2.3. Objeto history6.2.4. Objeto location6.2.5. Objeto navigator

6.2.6. Objeto window6.3. Modelo de objetos en

Microsoft Internet Explorer

6.1. Introducción

El Modelo de Objetos deDocumento DOM se suele confundir conlos lenguajes de script: se piensa queforma parte de ellos, cuando en realidadson independientes uno del otro.

El modelo de objetos permiteacceder a los elementos HTML de undocumento desde los lenguajes de

script. Para lograrlo, se crean una seriede objetos que representan (exponen)dichos elementos. Estos objetos guardanentre ellos unas relaciones deparentesco (se establece una jerarquía)que refleja la lógica de una páginaHTML: una página se presenta en unaventana, que posee un documento, elcual a su vez puede tener una serie deformularios, que pueden contenerelementos como botones, cuadros detexto, etc., los cuales tienen a su vez unaserie de propiedades, etc.

El modelo de objetos se modifica deuna versión de navegador a otra,añadiéndose nuevos objetos y

modificándose la jerarquía existenteentre ellos. Al igual que ocurre con loslenguajes de script, cada navegadorposee su propio modelo de objetos, quecoinciden entre ellos en algunos objetos,propiedades y métodos. Existe un intentode estandarización por parte de W3Cdel modelo de objetos de documento.

6.2. Modelo de objetos enNetscape Communicator

Cuando se carga un objeto en elnavegador, se crean una serie de objetosJavaScript llamados objetos del

navegador (Navigator objects) conpropiedades basadas en el documentoHTML que se está mostrando. Estosobjetos poseen una jerarquía que reflejala estructura de la página HTML. En laFigura 6.1 vemos la jerarquía delmodelo de objetos en NetscapeCommunicator 4.0 y superiores (enversiones superiores puede ser que sevea ampliado).

Figura 6.1: Modelo de objetos enNetscape Communicator

En esta jerarquía, los descendientede un objeto se consideran propiedadesde dicho objeto, aunque por sí mismostambién son objetos. Por ejemplo, unformulario llamado form1 es un objeto ytambién una propiedad del objetodocument y se accede comodocument.form1.

Como todos los objetos cuelgan delobjeto window, éste se pude obviar y noescribir cuando se accede a un objeto dela ventana actual‹ 35 ›. Así,window.navigator.appName ynavigator.appName representan lamisma propiedad y las sentenciaswindow.document.writeln() y

document.writeln() llaman al mismométodo.

Cualquier página posee lossiguientes objetos:

document: contiene una serie depropiedades basadas en elcontenido del documento, como sutítulo, su color de fondo, susenlaces y formularios.

history: contiene una serie depropiedades que representan lasURLs que el cliente ha visitadopreviamente (contiene el historialde navegación).

location: posee propiedades

basadas en la URL actual.

navigator: posee propiedades querepresentan el nombre y la versiónde navegador que se está usando,propiedades para los tiposMultipurpose Internet MailExtensions (MIME) que acepta elcliente y para los plug-ins queestán instalados en el cliente.

window: se trata del objeto de másalto nivel; tiene propiedades que seaplican a la ventana completa.Cada ventana hija en un documentodividido en marcos (frames) poseesu propio objeto window.

Dependiendo del contenido de lapágina, el documento puede poseer otraserie de objetos. Por ejemplo, unformulario (definido mediante laetiqueta <FORM> ... </FORM>) en eldocumento tiene su correspondienteobjeto form en la jerarquía de objetos.

6.2.1. Objeto document

Posee información sobre eldocumento actual y posee métodos quepermiten mostrar una salida en formatoHTML al usuario. Se crea un objetodocument por cada etiqueta <BODY>

... </BODY>.

Propiedades

alinkColor Atributo ALINK de laetiqueta BODY.

anchors Array que contiene una entradapara cada ancla del documento.

applets Array que contiene una entradapor cada applet en el documento.

bgColor Atributo BGCOLOR de laetiqueta BODY.

classes Crea un objeto Style que se usa

para especificar el estilo de lasetiquetas HTML.

cookie Especifica una cookie.

domain Nombre de dominio delservidor que sirvió el documento.

embeds Array que contiene una entradapor cada plug-in del documento.

fgColor Atributo TEXT de la etiquetaBODY.

formName Una propiedad por cadaformulario con nombre en el documento.

forms Array que contiene una entrada

por cada formulario en el documento.

height Altura del documento en pixels.

ids Crea un objeto Style que permiteespecificar el estilo de cada etiquetaHTML.

images Array que contiene una entradapara cada imagen del documento.

lastModified Fecha en la que eldocumento se modificó por última vez.

layers Array que contiene un entradapor cada capa (layer) en el documento.

linkColor Atributo LINK de la etiquetaBODY.

links Array que contiene una entrada porcada enlace en el documento.

plug-ins Array que contiene una entradapor cada plug-in en el documento.

referrer Especifica la URL deldocumento que llamó al actual.

tags Crea un objeto Style que permiteespecificar los estilos de las etiquetasHTML.

title Contenido de la etiqueta TITLE de

la sección HEAD.

URL URL completa del documento.

vlinkColor Atributo VLINK de laetiqueta BODY.

width Anchura del documento en pixels.

Métodos

captureEvents Establece que eldocumento capture todos los eventos deltipo especificado.

close Cierra un flujo de salida y fuerzaque la información se muestre.

contextual Especifica un objeto Styleque puede fijar el estilo de las etiquetasHTML.

getSelection Devuelve una cadena quecontiene el texto seleccionado.

handleEvent Invoca el manejador delevento especificado.

open Abre un flujo que recibirá lasalida de los métodos write y writeln.

releaseEvents Establece que eldocumento no capture los eventos deltipo especificado.

routeEvent Pasa un evento a lo largo dela jerarquía de eventos.

write Escribe una o más expresionesHTML en el documento.

writeln Escribe una o más expresionesHTML en el documento y finaliza conun salto de línea.

Eventos

onClick Se produce cuando un objeto deun formulario o un enlace es pulsado conel botón del ratón.

onDblClick Se produce cuando un

objeto de un formulario o un enlace espulsado dos veces con el botón delratón.

onKeyDown Se produce cuando elusuario pulsa una tecla.

onKeyPress Se produce cuando elusuario presiona o mantiene pulsada unatecla.

onKeyUp Se produce cuando el usuariodeja de pulsar una tecla.

onMouseDown Se produce cuando elusuario pulsa un botón del ratón.

onMouseUp Se produce cuando elusuario deja de pulsar un botón delratón.

El siguiente código de ejemplomuestra los enlaces que posee undocumento.


3<TITLE>Ejemplo de uso del objetodocument</TITLE>

4 </HEAD>5 <BODY>

6<A HREF="pag1.html">Enlace a la pagina5</A>

7 <BR>

8 <A HREF="pag2.html">Enlace a la pagina2</A>9 <BR>

10<A HREF="pag3.html">Enlace a la pagina3</A>

11 <BR><BR>12 <SCRIPT LANGUAGE="JavaScript">

13document.write("Hay " +document.links.length + "enlaces<BR>\n");

14

15for(i = 0; i < document.links.length;i++)

16 {17 document.write(document.links[i]);18 document.write("<BR>\n");19 }20 </SCRIPT>21 </BODY>22 </HTML>

El siguiente ejemplo muestra elvalor de los atributos BGCOLOR, TEXT,LINK, ALINK y VLINK. Además, tambiénaparece la fecha de la últimamodificación (lastModified). En laFigura 6.2 vemos como se visualiza estapágina en un navegador.


3<TITLE>Ejemplo de uso delobjeto document</TITLE>

4 </HEAD>

5<BODY BGCOLOR="WHITE"TEXT="BLACK" LINK="NAVY"

6ALINK="BLUE"

VLINK="RED">

7 <SCRIPTLANGUAGE="JavaScript">

8document.write("BGCOLOR = "+ document.bgColor + "<BR>\n");

9document.write("TEXT = " +document.fgColor + "<BR>\n");

10document.write("LINK = " +document.linkColor + "<BR>\n");

11document.write("ALINK = " +document.alinkColor + "<BR>\n");

12document.write("VLINK = " +document.vlinkColor + "<BR>\n");

13 document.write("<BR>\n");

14document.write("lastModified= " + document.lastModified+ "<BR>\n");

Figura 6.2: Propiedades del objetodocument

6.2.2. Cómo acceder a loscontroles de un formulario

Un documento (document) puedeposeer varios formularios, cada uno consus correspondientes controles. Paraacceder a los controles de un formulariose tiene que recorrer la jerarquía que sepuede ver en la Figura 6.1: objetowindow‹ 36 ›, objeto document, nombredel formulario‹ 37 ›, nombre del controly propiedad del control.

Por ejemplo, si tenemos el siguienteformulario:

Ejemplo 6.31 <FORM NAME="miForm">

2Nombre: <INPUT TYPE="TEXT"NAME="nombre">

3 </FORM>

para acceder al valor (propiedadvalue) que contiene el campo de textonombre se tiene que escribir:

Ejemplo 6.41 document.miForm.nombre.value

Hay que prestar mucha atención a lasmayúsculas y minúsculas, ya que comose explicó en el Capítulo 5, JavaScriptes un lenguaje sensible a minúsculas/-mayúsculas.

Cada uno de los controles de unformulario tiene una serie depropiedades, métodos y eventos. Todoslos controles poseen el método focus()

que permite fijar el foco sobre el objeto.A continuación mostramos las

propiedades más importantes de loscontroles más usados.

Campos de verificación

Los campos de verificación poseenlas siguiente propiedades:

checked Valor booleano que indica sise encuentra seleccionado.

defaultChecked Valor booleano queindica si por defecto se encuentraseleccionado.

value Valor asociado con el control.

Por ejemplo, el siguiente códigomuestra en una ventana el estado de loscampos de verificación de unformulario.

Ejemplo 6.51 <HTML>2 <HEAD>3 <SCRIPT LANGUAGE="JavaScript">4 function valida()5 {6 if(document.miForm.ingles.checked)7 alert("Inglés: SÍ");8 else9 alert("Inglés: NO");10 if(document.miForm.aleman.checked)

11 alert("Alemán: SÍ");12 else13 alert("Alemán: NO");14 if(document.miForm.frances.checked)15 alert("Francés: SÍ");16 else17 alert("Francés: NO");18 }19 </SCRIPT>20 </HEAD>21 <BODY>22 <FORM NAME="miForm">23 Idiomas:24 <BR>

25Inglés <INPUT TYPE="CHECKBOX"NAME="ingles" VALUE="ing" CHECKED>

26Alemán <INPUT TYPE="CHECKBOX"NAME="aleman" VALUE="ale">

27Francés <INPUT TYPE="CHECKBOX"NAME="frances" VALUE="fra">

28 <BR>29

<INPUT TYPE="BUTTON" VALUE="Comprobar"ONCLICK="valida()">

30 </FORM>31 </BODY>32 </HTML>

Campos excluyentes

Posee las mismas propiedades quelos campos de verificación:

defaultChecked Valor booleano queindica si por defecto se encuentraseleccionado.

value Valor asociado con el control, que

se devuelve al servidor cuando elformulario se envía.

Campos de texto y áreas de texto

Ambos controles poseen estas dospropiedades:

defaultValue Valor por defecto delcontrol.

value Valor actual de control, que sedevuelve al servidor cuando elformulario se envía.

Al final del Capítulo 5, cuando se

explica la validación de formularios, sepueden ver varios ejemplos donde sehace uso de la propiedad value.

Listas de selección

Las listas de selección poseen lassiguientes propiedades:

length Número de opciones en la lista.

options Array donde cada posiciónrepresenta una opción (objeto option)de la lista.

selectedIndex Índice de la primeraopción seleccionada, empezando desde

0. Si ninguna opción está seleccionada,vale -1.

Además, si se quiere obtener el textoy el valor asociado a una opción, setienen que emplear las propiedades delobjeto option:

selected Valor booleano que indica si laopción se encuentra seleccionada.

text Texto de la opción que se muestraen la lista.

value Valor asociado con la opción, quese devuelve al servidor cuando laopción está seleccionada.

6.2.3. Objeto history

Contiene un array que almacena lasURLs que el usuario ha visitado en laventana actual. Mediante los métodosque posee este objeto se puede navegaradelante o atrás en el historial.

Propiedades

current Especifica la URL actual delhistorial.

length Indica el número de entradas que

almacena el historial.

next Especifica la URL de la siguienteentrada en el historial.

previous Especifica la URL de laentrada previa en el historial.

Métodos

back Carga la URL previa del historial.

forward Carga la siguiente URL delhistorial.

go Carga la URL indicada en elhistorial.

6.2.4. Objeto location

Representa la URL completaasociada a un objeto window. Cada unade las propiedades de este objetorepresenta una porción de la URL. Seaccede mediante la propiedad locationde un objeto window.

U n a URL se compone de lassiguientes partes:

Ejemplo 6.61protocol://host:port/pathname#hash?search

Propiedades

hash Especifica el valor de un ancla enuna URL.

host Especifica el nombre de dominio odirección IP de la URL.

hostname Especifica la partehost:port de la URL.

href Especifica la URL entera.

pathname Especifica la ruta de la URL.

port Especifica el puerto decomunicaciones que usa el servidor.

protocol Especifica el protocolo de laURL.

search Especifica la consulta incluidaen la URL.

Métodos

reload Recarga el documento actual dela ventana.

replace Carga la URL especificadasobre la entrada actual del historial denavegación.

El siguiente ejemplo muestra todas

las propiedades del objeto location.En la Figura 6.3 vemos el resultado devisualizar la siguiente página en unnavegador.


3<TILLE>Ejemplo de uso del objetolocation</TITLE>

4 </HEAD>5 <BODY>6 <SCRIPT LANGUAGE="JavaScript">

7document.writeln("location.hash = "+ location.hash + "<BR>");

8document.writeln("location.host = "+ location.host + "<BR>");

9document.writeln("location.hostname= " + location.hostname + "<BR>");

10 document.writeln("location.href = "+ location.href + "<BR>");

11document.writeln("location.pathname= " + location.pathname + "<BR>");

12document.writeln("location.port = "+ location.port + "<BR>");

13document.writeln("location.protocol= " + location.protocol + "<BR>");

14document.writeln("location.search =" + location.search + "<BR>");


Figura 6.3: Propiedades del objetolocation

6.2.5. Objeto navigator

Contiene información sobre laversión del navegador que se estáempleando. Todas las propiedades deeste objeto son de solo lectura.

Propiedades

appCodeName Nombre en clave delnavegador.

appName Nombre del navegador.

appVersion Versión del navegador.

language Idioma que emplea elnavegador.

mimeTypes Array que contiene todos

los tipos MIME que soporta elnavegador.

platform Indica el tipo de máquina parala que se compiló el navegador.

plug-ins Array que contiene todos losplug-ins instalados.

userAgent Especifica la cabeceraHTTP user-agent.

Métodos

javaEnabled Chequea si la opción Javaestá activada.

plug-ins.refresh Recarga losdocumentos que contienen plug-ins.

preference Permite a un script firmadoacceder (lectura y escritura) a ciertaspreferencias del navegador.

savePreferences Guarda laspreferencias del navegador en prefs.js(fichero de preferencias que posee cadausuario).

taintEnabled Especifica si datatainting está activo.

El siguiente ejemplo muestra todaslas propiedades del objeto navigator.

En la Figura 6.4 vemos el resultado deeste ejemplo.


3<TITLE>Ejemplo de uso del objetolocation</TITLE>

4 </HEAD>5 <BODY>6 <SCRIPT LANGUAGE="JavaScript">

7document.writeln("navigator.appCodeName= " + navigator.appCodeName);

8 document.writeln("<BR>");

9document.writeln("navigator.appName = "+ navigator.appName);


11document.writeln("navigator.appVersion= " + navigator.appVersion);

12 document.writeln("<BR>");13

document.writeln("navigator.language =" + navigator.language);


15document.writeln("navigator.mimeTypes =" + navigator.mimeTypes);


17document.writeln("navigator.platform =" + navigator.platform);


19document.writeln("navigator.plug-ins =" + navigator.plug-ins);


21document.writeln("navigator.userAgent =" + navigator.userAgent);

22 document.writeln("<BR>");23 </SCRIPT>24 </BODY>25 </HTML>

Figura 6.4: Propiedades del objetonavigator

6.2.6. Objeto window

Representa una ventana o un marco

del navegador. Es el objeto en laposición superior en la jerarquía deobjetos, por encima de todos los demás.Se crea un objeto window por cadae ti que ta <BODY> ... </BODY> o<FRAMESET> ... <FRAMESET>.También se crea un objeto window pararepresentar cada marco definido con unaetiqueta <FRAME>. Además, también sepueden crear otras ventanas llamando almétodo window.open.

Propiedades

closed Especifica si una ventana ha sidocerrada.

crypto Permite acceder a lascaracterísticas de encriptación deNetscape Navigator.

defaultStatus Mensaje mostrado pordefecto en la barra de estado.

document Contiene información sobreel documento actual y métodos quepermiten mostrar contenido HTML alusuario.

frames Array que permite acceder a losmarcos que posee una ventana.

history Posee información sobre lasURLs que el cliente ha visitado dentro

de la ventana.

innerHeight Dimensión vertical, enpixels, del área de contenido de laventana.

innerWidth Dimensión horizontal, enpixels, del área de contenido de laventana.

length Número de marcos (frames) dela ventana.

location Información sobre la URLactual.

locationbar Representa la barra de

localización de la ventana delnavegador.

menubar Representa la barra de menúsde la ventana del navegador.

name Nombre único usado paraidentificar a la ventana.

offscreenBuffering Especifica si lasactualizaciones de la ventana se realizanen un buffer.

opener Nombre de la ventana que haabierto esta ventana usando el métodoopen.

outerHeight Dimensión vertical, enpixels, del límite exterior de la ventana.

outerWidth Dimensión horizontal, enpixels, del límite exterior de la ventana.

pageXOffset Posición actual sobre eleje X, en pixels, de una página vista enla ventana.

pageYOffset Posición actual sobre eleje Y, en pixels, de una página vista enla ventana.

parent Ventana o marco que contiene almarco actual.

personalbar Representa la barrapersonal (también llamada barra dedirectorios) de la ventana delnavegador.

screenX Posición sobre el eje X delextremo izquierdo de la ventana.

screenY Posición sobre el eje Y delextremo superior de la ventana.

scrollbars Representa las barras dedesplazamiento de la ventana.

self Sinónimo de la ventana actual.

status Especifica un mensaje en la barra

de estado de la ventana.

statusbar Representa la barra de estadode la ventana.

toolbar Representa la barra deherramientas de la ventana delnavegador.

top Sinónimo de la ventana más superioren la jerarquía de ventanas.

window Sinónimo de la ventana actual.

Métodos

alert Muestra un cuadro de diálogo de

alerta con un mensaje y un botón OK.

atob Decodifica una cadena deinformación que ha sido codificadausando la codificación base-64.

back Deshace la última navegación enla ventana de nivel superior.

blur Elimina el foco del objetoespecificado.

btoa Crea una cadena codificada enbase-64.

captureEvents Configura la ventana odocumento para que capture todos los

eventos del tipo especificado.

clearInterval Cancela un temporizador(timeout) que se había fijado con elmétodo setInterval.

clearTimeout Cancela un temporizador(timeout) que se había fijado con elmétodo setTimeout.

close Cierra la ventana.

confirm Muestra un cuadro de diálogode confirmación con un mensaje y losbotones OK y Cancel.

crypto.random Devuelve una cadena

pseudoaleatoria cuya longitud es elnúmero de bytes especificados.

crypto.signText Devuelve una cadenade información codificada querepresenta un objeto firmado.

disableExternalCapture Desactiva lacaptura de eventos externos fijado por elmétodo enableExternalCapture.

enableExternalCapture Permite queuna ventana con marcos capture loseventos en las páginas cargadas desdedistintos sitios (servidores).

find Busca la cadena de texto

especificada en el contenido de laventana especificada.

focus Otorga el foco al objetoespecificado.

forward Carga la siguiente URL en lalista del historial.

handleEvent Invoca el manejador delmétodo especificado.

home Navega a la URL especificada enlas preferencias del navegador como lapágina inicial (home).

moveBy Mueve la ventana según el

desplazamiento indicado.

moveTo Mueve la esquina superiorizquierda de la ventana a la posición dela pantalla indicada.

open Abre una nueva ventana delnavegador.

print Imprime el contenido de la ventanao marco.

prompt Muestra un cuadro de diálogode petición de datos con un mensaje y uncampo de entrada.

releaseEvents Configura la ventana

para que libere todos los eventoscapturados del tipo indicado, enviandoel evento a los siguientes objetos en lajerarquía de eventos.

resizeBy Redimensiona la ventanamoviendo la esquina inferior derecha lacantidad indicada.

resizeTo Redimensiona la ventanasegún la altura y anchura indicada.

routeEvent Pasa un evento capturado através de la jerarquía de eventos normal.

scroll Realiza un scroll a lascoordenadas indicadas.

scrollBy Realiza un scroll en el área devisión según la cantidad especificada.

scrollTo Realiza un scroll en el área devisión a las coordenadas especificadas.

setHotKeys Activa o desactiva las hotkeys en una ventana que no posee menú.

setInterval Evalúa una expresión ollama a una función cada vez quetranscurre el número de milisegundosindicado.

setResizable Especifica si el usuariopuede redimensionar una ventana.

setTimeout Evalúa una expresión ollama a una función una vez que hatranscurrido el número de milisegundosindicado.

setZOptions Especifica el orden sobreel eje Z.

stop Detiene la carga actual de lapágina.

Eventos

onBlur Se produce cuando un elementopierde el foco.

onDragDrop Se produce cuando el

usuario deja un objeto sobre la ventanadel navegador.

onError Se produce cuando la carga deun documento o una imagen produce unerror.

onFocus Se produce cuando un elementorecibe el foco.

onLoad Se produce cuando elnavegador termina de cargar unaventana.

onMove Se produce cuando se mueveuna ventana o marco.

onResize Se produce cuando seredimensiona una ventana o marco.

onUnload Se produce cuando un usuariocierra un documento.

El siguiente ejemplo muestra comose puede establecer una comunicaciónentre varias ventanas. A partir de undocumento, se puede abrir una ventananueva en la que se puede escribir textointroducido en la primera ventana. En laFigura 6.5 se muestra la ventanaprincipal y la ventana que se creamediante el método open.

Ejemplo 6.9

1 <HTML>2 <HEAD>3 <TITLE>Ejemplo de uso del objeto window</TITLE>4 <SCRIPT LANGUAGE="JavaScript">5 var win = null;6

7 function abre() {8 win = window.open("", "Ventana",9 "scrollbars=yes,width=175,height=300");10 }11

12 function escri() {13 if(win != null)14 {

15win.document.write(document.formulario.algo.value

+ "<BR>\n");16 win.focus();17 }18 }19

20 function cierra() {21 if(win != null)22 {23 win.close();24 win = null;25 }26 }27 </SCRIPT>28 </HEAD>29 <BODY>30 <FORM NAME="formulario">31 <P>

32<INPUT TYPE="BUTTON" VALUE="Abre una ventana"ONCLICK="abre()">

33 <P>

34<INPUT TYPE="BUTTON" VALUE="Escribe en la ventana"ONCLICK="escri()">

35 <INPUT TYPE="TEXT" NAME="algo">36 <P>

<INPUT TYPE="BUTTON" VALUE="Cierra la ventana"

37 ONCLICK="cierra()">38 </FORM>39 </BODY>40 </HTML>

Figura 6.5: Interacción entre variasventanas a través del objeto window

6.3. Modelo de objetos enMicrosoft Internet Explorer

Incluimos en la Figura 6.6 unarepresentación gráfica del modelo deobjetos implementado en el navegadorde MICROSOFT. Si se compara con elmodelo de NETSCAPE (Figura 6.1), sepueden apreciar varias diferencias.

Figura 6.6: Modelo de objetos enMicrosoft Internet Explorer

Apéndice A

Resumen etiquetasHTML

En este apéndice se incluye unresumen de la sintaxis de lasetiquetas HTML. El objetivo de esteapéndice es que sirva como unaguía rápida de búsqueda en caso deduda.

Índice General

A.1. IntroducciónA.2. Etiquetas que definen la

estructura del documentoA.3. Etiquetas que pueden ir

en la cabeceraA.4. Etiquetas que definen

bloques de textoA.5. Etiquetas de listasA.6. Etiquetas de

características del textoA.7. Etiquetas de anclas y

enlacesA.8. Etiquetas de imágenes y

mapas de imágenesA.9. Etiquetas de tablasA.10. Etiquetas de formularios

A.11. Etiquetas de marcosA.12. Etiquetas de situación de

contenidosA.13. Etiquetas de scriptA.14. Etiquetas de applets y

plug-insA.15. Etiquetas de ajuste del

textoA.16. Atributos universales

A.1. Introducción

Este resumen contiene todas lase t i q ue t a s HTML aceptadas por

Netscape Navigator 4.0 y posteriores.Este resumen sólo contiene la sintaxis delas etiquetas. Conforme evolucionaHTML aparecen nuevas etiquetas, seañaden atributos nuevos a algunasetiquetas y otras quedan obsoletas(deprecated) y se desaconseja su uso.

Cuando una etiqueta se emplea porparejas (inicio y fin), se representa conunos puntos suspensivos, como <HTML>... </HTML>, mientras que cuando laetiqueta es individual aparece como<IMG>. Cuando un atributo de unaetiqueta puede tomar una serie deposibles valores, estos se han separadocon una barra vertical, como por

ejemplo ALIGN="LEFT" | "RIGHT" |"CENTER". Otros atributos no recibenningún valor, como el atributo MULTIPLEde la etiqueta <SELECT> ...

</SELECT>.Las etiquetas se han clasificado en

los siguientes grupos:

Etiquetas que definen la estructuradel documento.

Etiquetas que pueden ir en lacabecera <HEAD>.

Etiquetas que definen bloques detexto.

Etiquetas de listas.

Etiquetas de características deltexto.

Etiquetas de anclas y enlaces.

Etiquetas de imágenes y mapas deimágenes.

Etiquetas de tablas.

Etiquetas de formularios.

Etiquetas de marcos.

Etiquetas de situación decontenidos.

Etiquetas de script.

Etiquetas de applets y plug-ins.

Etiquetas de ajuste del texto.

Atributos universales.

Para incluir un comentario en unapágina HTML se utiliza la etiqueta . Se puede emplearpara anular una sección de una página,de forma que no se visualice en elnavegador, pero sin tener que eliminardicha sección de la página.

A.2. Etiquetas que definenla estructura del documento

En este grupo se incluyen lasetiquetas que definen la estructurabásica de un documento HTML.

Etiqueta más externa: <HTML> ...</HTML>.

Encabezado del documento:<HEAD> ... </HEAD>.

Contenido principal del documento(cuerpo): <BODY> ... </BODY>.Atributos:

BACKGROUND="URL".

BGCOLOR="color".

TEXT="color".

LINK="color".

ALINK="color".

VLINK="color".

ONLOAD="códigoScript".

ONUNLOAD="códigoScript".

ONBLUR="códigoScript".

ONFOCUS="códigoScript".

A.3. Etiquetas que pueden iren la cabecera

En este grupo se clasifican lasetiquetas que pueden usarse en lacabecera de un documento, entre lasetiquetas <HEAD> y </HEAD>.

Título del documento: <TITLE>... </TITLE>.

Dirección URL base: <BASE>.Atributos:

HREF="URL".

TARGET="nombreVentana".

Información metadocumental:<META>. Atributos:

NAME="nombre".

HTTP-EQUIV="nombreCampo".

CONTENT="valor".

Definición de estilo: <STYLE> ...</STYLE>. Atributo:

TYPE="tipoEstilo".

Enlace a ficheros externos:<LINK>. Atributos:

REL="tipoFichero".

TYPE="tipo".

SRC="URL".

Elemento de búsqueda‹ 38 ›:<ISINDEX>. Atributo:

PROMPT="texto".

Código JavaScript en el cliente‹39 ›: <SCRIPT> ... </SCRIPT>.Atributos:

LANGUAGE="nombreLenguajeScript".

SRC="URL".

A.4. Etiquetas que definenbloques de texto

En esta sección se incluyen lasetiquetas que definen bloques de texto,como encabezados, párrafos, citas, etc.

Formato dirección: <ADDRESS>... </ADDRESS>.

Bloque de texto con sangría:<BLOCKQUOTE> ...</BLOCKQUOTE>.

Sección de un documento: <DIV>... </DIV>. Atributo:

ALIGN="LEFT" | "CENTER"| "RIGHT" | "JUSTIFY"‹ 40›.

Encabezamientos predefinidos:<H1> ... </H1>, <H2> ...</H2>, <H3> ... </H3>, <H4>... </H4>, <H5> ... </H5> y<H6> ... </H6>. Atributo:

A.5. Etiquetas de listas

En este grupo se encuentranclasificadas las distintas etiquetas quepermiten crear listas.

Lista de directorio: <DIR> ...</DIR>.

Lista de definición: <DL> ...</DL>. Atributo:

COMPACT.

Término de definición: <DT>.

Descripción de definición: <DD>.

Lista de elementos individuales:<MENU> ... </MENU>.

Lista ordenada: <OL> ... </OL>.Atributos:

START="valor".

TYPE="A" | "a" | "I" |"i" | "1".

Lista no ordenada: <UL> ...</UL>. Atributo:

TYPE="CIRCLE" | "DISC" |"SQUARE".

Elemento de una lista: <LI> ...</LI>. Atributos:

TYPE="CIRCLE" | "DISC" |"SQUARE" | "A" | "a" |"I" | "i" | "1".

VALUE="número".

A.6. Etiquetas decaracterísticas del texto

En esta sección se muestran lasetiquetas que definen las característicasdel texto a nivel de carácter.

Negrita: <B> ... </B>.

Tamaño del tipo de letra por

defecto: <BASEFONT> ...</BASEFONT>. Atributo:

SIZE="número".

Tamaño de letra mayor: <BIG>... </BIG>.

Parpadeante: <BLINK> ...</BLINK>.

Cita: <CITE> ... </CITE>.

Código: <CODE> ... </CODE>.

Enfatizado: <EM> ... </EM>.

Características del tipo de letra:<FONT> ... </FONT>. Atributos:

COLOR="color".

FACE="listaTiposDeLetra".

POINT-SIZE="tamañoPunto".

SIZE="número".

WEIGHT="gradoNegrita".

Cursiva: <I> ... </I>.

Texto de teclado: <KBD> ...</KBD>.

Muestra el resto del documento talcual: <PLAINTEXT>.

Tipo de letra menor: <SMALL> ...</SMALL>.

Tachado: <STRIKE> ...</STRIKE> o <S> ... </S>.

Énfasis fuerte: <STRONG> ...</STRONG>.

Subíndice: <SUB> ... </SUB>.

Superíndice: <SUP> ... </SUP>.

Mecanografiado: <TT> ...</TT>.

Subrayado: <U> ... </U>.

Variable: <VAR> ... </VAR>.

A.7. Etiquetas de anclas yenlaces

En esta sección se muestra laetiqueta <A> ... </A>, que se usa tantopara definir las anclas (lugares a dondese puede crear un enlace) como losenlaces.

Ancla: <A NAME> ... </A>.Atributo:

NAME="nombreAncla".

Enlace: <A HREF> ... </A>.Atributos:

HREF="URL".

ONCLICK="códigoScript".

ONMOUSEOUT="códigoScript".

ONMOUSEOVER="códigoScript".

TARGET="_blank" |"_parent" | "_self" |"_top" |"nombreVentana".

A.8. Etiquetas de imágenesy mapas de imágenes

En esta sección se muestran las

HEIGHT="altura".

WIDTH="anchura".

HSPACE="margenHorizontal".

VSPACE="margenVertical".

ISMAP.

USEMAP="#nombreMapa".

NAME="nombreImagen".

ONABORT="códigoScript".

ONERROR="códigoScript".


SUPPRESS="TRUE" |"FALSE".

Área de un mapa de imagen:<AREA>. Atributos:

COORDS="coordenadas".

SHAPE="CIRCLE" | "RECT"| "POLY".

HREF="URL".

NOHREF.




NAME="nombreArea".

Mapa de imagen: <MAP> ...</MAP>. Atributo:

NAME="nombreMapa".

A.9. Etiquetas de tablas

Esta sección muestra las etiquetasque se emplean para crear tablas.

Tabla: <TABLE> ... </TABLE>.Atributos:

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

BGCOLOR="color".

BORDER="anchuraBorde".

CELLPADDING="valor".

CELLSPACING="valor".

HEIGHT="altura".

WIDTH="anchura".

COLS="numeroDeColumnas".



Título de la tabla: <CAPTION >... </CAPTION>. Atributo:

ALIGN="BOTTOM" | "TOP".

Fila de la tabla: <TR> ... </TR>.Atributos:


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

BGCOLOR="color".

Celda de una tabla: <TD> ...</TD>. Atributos:



BGCOLOR="color".

COLSPAN="valor".

ROWSPAN="valor".

HEIGHT="altura".

WIDTH="anchura".

NOWRAP.

Encabezamiento de una columna ofila: <TH> ... </TH>. Atributos:



BGCOLOR="color".

COLSPAN="valor".

ROWSPAN="valor".

HEIGHT="altura".

WIDTH="anchura".

NOWRAP.

A.10. Etiquetas deformularios

En este grupo se encuentran lasetiquetas que definen los formularios ysus posibles controles.

Formulario: <FORM> ...

</FORM>. Atributos:

NAME="nombreFormulario".

ACTION="URL".

ENCTYPE="tipoCodificación".

METHOD="GET" | "POST".


ONRESET="códigoScript".

ONSUBMIT="códigoScript".

Botón: <INPUT TYPE="BUTTON">.Atributos:

NAME="nombreBotón".

VALUE="etiqueta".


Casilla de verificación: <INPUTTYPE="CHECKBOX">. Atributos:

NAME="nombre".

VALUE="valor".

CHECKED.


Envío de fichero: <INPUTTYPE="FILE">. Atributos:

NAME="nombre".

VALUE="nombreFichero".

Elemento oculto: <INPUT

TYPE="HIDDEN">. Atributos:

NAME="nombre".

VALUE="valor".

Imagen como botón: <INPUTTYPE="IMAGE">. Atributos:

NAME="nombre".


SRC="URL".

Contraseña: <INPUTTYPE="PASSWORD">. Atributos:

NAME="nombre".

VALUE="texto".

MAXLENGTH="máximoNúmeroCaracteres".

SIZE="longitudCampo".

ONSELECT="códigoScript".

Botón de radio: <INPUTTYPE="RADIO">. Atributos:

NAME="nombre".

VALUE="valor".

CHECKED.


Restaurar (borrar): <INPUT

TYPE="RESET">. Atributos:

NAME="nombre".

VALUE="etiqueta".


Botón de envío: <INPUTTYPE="SUBMIT">. Atributos:

NAME="nombre".

VALUE="etiqueta".

Línea de texto: <INPUTTYPE="TEXT">. Atributos:

NAME="nombre".

VALUE="texto".

MAXLENGTH="máximoNúmeroCaracteres".



ONCHANGE="códigoScript".



Lista de selección: <SELECT> ...</SELECT>. Atributos:

NAME="nombre".

MULTIPLE.






Opción en una lista de selección:<OPTION> ... </OPTION>.Atributos:

VALUE="valor".

SELECTED.

Área de texto: <TEXTAREA> ...</TEXTAREA>. Atributos:

NAME="nombre".

COLS="columnas".

ROWS="filas".

WRAP="OFF" | "HARD" |"SOFT".





Generador de clave: <KEYGEN>.Atributos:

NAME="nombre".

CHALLENGE="desafío".

Elemento de búsqueda‹ 41 ›:<ISINDEX>. Atributo:

PROMPT="texto".

A.11. Etiquetas de marcos

En esta sección se muestran lasetiquetas que permiten crear marcos yconjuntos de marcos. Un marco es unaregión de una ventana que actúa comouna ventana ella misma.

Región de una ventana (marco):<FRAME>. Atributos:

BORDERCOLOR="color".

FRAMEBORDER="YES" |

"NO".

MARGINHEIGHT="alturaMargen".

MARGINWIDTH="anchuraMargen".

NAME="nombreMarco".

NORESIZE.

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

SRC="URL".

Conjunto de marcos: <FRAMESET>... </FRAMESET>. Atributos:

COLS="listaAnchurasColumnas".

ROWS="listaAlturasFilas".

BORDER="anchura".

BORDERCOLOR="color".

FRAMEBORDER="YES" |"NO".




ONUNLOAD="códigoScript".

Texto alternativo a los marcos:<NOFRAMES> ... </NOFRAMES>.

A.12. Etiquetas de situación

de contenidos

En esta sección se encuentran lasetiquetas que permiten definir laposición de los distintos elementos enuna página. Estas etiquetas se empleanen DHTML.

Definición de una capa: <LAYER>... </LAYER>. Atributos:

ID="nombreCapa".

LEFT="posición".

TOP="posición".

PAGEX="páginaX".

PAGEY="páginaY".

SRC="URL".

Z-INDEX="número".

ABOVE="nombreCapa".

BELOW="nombreCapa".

WIDTH="anchura".

HEIGHT="altura".

CLIP="número,número,número,número".

VISIBILITY="visibilidad".

BGCOLOR="color".

BACKGROUND="URL".






Capa posicionada de formarelativa: <ILAYER> ...</ILAYER>. Atributos:

ID="nombreCapa".

LEFT="posición".

TOP="posición".

PAGEX="páginaX".

PAGEY="páginaY".

SRC="URL".

Z-INDEX="número".

ABOVE="nombreCapa".

BELOW="nombreCapa".

WIDTH="anchura".

HEIGHT="altura".

CLIP="número,número,número,número".

VISIBILITY="visibilidad".

BGCOLOR="color".

BACKGROUND="URL".






Texto alternativo a las capas:<NOLAYER> ... </NOLAYER>.

A.13. Etiquetas de script

En esta sección se encuentran lasetiquetas que permiten incluir códigoscript en una página HTML.

Código JavaScript en el cliente‹42 ›: <SCRIPT> ... </SCRIPT>.

Atributos:

LANGUAGE="nombreLenguajeScript".

SRC="localizacionURL".

Texto alternativo al códigoJavaScript: <NOSCRIPT> ...</NOSCRIPT>.

Código en el servidor: <SERVER>... </SERVER>.

A.14. Etiquetas de applets yplug-ins

Esta sección muestra las etiquetasque se emplean para incluir applets yobjetos que emplean plug-ins.

Applet Java: <APPLET> ...</APPLET>. Atributos:

NAME="nombre".

CODE="nombreFicheroClass".

CODEBASE="directorioFicheroClass".

ARCHIVE="archivo".

ALT="textoAlternativo".

ALIGN="LEFT" | "RIGHT" |"TOP" | "ABSMIDDLE" |"ABSBOTTOM" | "TEXTTOP"| "MIDDLE" | "BASELINE"

| "BOTTOM".

HEIGHT="altura".

WIDTH="anchura".



MAYSCRIPT.

Parámetro para un applet:<PARAM>. Atributos:

NAME="nombre".

VALUE="valor".

Plug-in incrustado: <EMBED> ...</EMBED>. Atributos:

NAME="nombre".

SRC="URL".

TYPE="tipoMIME".

PLUGINSPAGE="URLinstrucciones".

PLUGINURL="URLplugin".

ALIGN="LEFT" | "RIGHT" |"TOP" | "BOTTOM".

BORDER="anchura".

FRAMEBORDER="YES" |"NO".

HEIGHT="altura".

WIDTH="anchura".

UNITS="unidades".

HIDDEN="TRUE" | "FALSE".



PALETTE="FOREGROUND" |"BACKGROUND".

Texto alternativo para objetosincrustados: <NOEMBED> ...</NOEMBED>.

Objeto incrustado: <OBJECT>.Atributos:

CLASSID="ficheroClase".

DATA="URL".

CODEBASE="directorioFicheroClase".

TYPE="tipoMIME".


HEIGHT="altura".

WIDTH="anchura".

ID="nombre".

A.15. Etiquetas de ajuste deltexto

Las etiquetas de esta secciónpermiten ajustar la posición del texto.

Salto de línea: <BR>. Atributo:

CLEAR="ALL" | "LEFT" |"RIGHT".

Centrado: <CENTER> ...</CENTER>.

Línea horizontal: <HR>. Atributos:

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

NOSHADE.

SIZE="grosor.

WIDTH="anchura".

Múltiples columnas: <MULTICOL>... </MULTICOL>. Atributos:

COLS="númeroColumnas".

GUTTER="separaciónColumnas".

WIDTH="anchuraColumnas".

No salto de línea: <NOBR> ...</NOBR>.

Espacio extra: <SPACER>.Atributos:

TYPE="HORIZONTAL" |"VERTICAL" | "BLOCK".

ALIGN="LEFT" | "RIGHT" |"TOP" | "ABSMIDDLE" |

"ABSBOTTOM" | "TEXTTOP"| "MIDDLE" | "BASELINE"| "BOTTOM".

HEIGHT="altura".

WIDTH="anchura".

SIZE="tamaño".

Intervalo de contenido: <SPAN>... </SPAN>.

Posible salto de línea: <WBR>.

A.16. Atributos universales

Los siguientes atributos se pueden

emplear con prácticamente todas lasetiquetas situadas en el cuerpo de unapágina <BODY> ... </BODY>.

Estilo de la clase:CLASS="claseEstilo".

Idioma: LANG="ISO".

Nombre de lugar o de estilo:ID="nombreLugarOEstilo".

Estilo: STYLE="estilo".

Apéndice B

Colores en HTML

El lenguaje HTML posee variasetiquetas con atributos que indicanun color. Por ejemplo, la etiqueta<BODY> tiene el atributoBGCOLOR que permite indicar elcolor de fondo de una página y laetiqueta <FONT> posee el atributoCOLOR para cambiar el color deltexto. En este apéndice se explicacomo trabajar con los colores en

HTML.

Índice General

B.1. Como trabajar con lascomponentes RGB

B.1.1. Obtener lascomponentes del color deseado endecimal

B.1.2. Transformar lascomponentes de decimal ahexadecimal


B.1. Como trabajar con lascomponentes RGB

Las componentes RGB permitenexpresar cualquier color mediante lacombinación de los tres colores básicos(primarios) rojo, verde y azul. Cadacomponente expresa la intensidad delcolor básico en la combinación. Así, porejemplo, el color negro es el resultadode combinar los tres colores básicos conuna intensidad nula (0), mientras que elblanco es el resultado de combinar lostres colores con una intensidad máxima

(255 cada componente). Este sistema decodificación de los colores permite16.777.216 colores (256 x 256 x 256combinaciones posibles).

Cuando se trabaja con los colores enHTML, las tres componentes se tienenque expresar en hexadecimal. Como estesistema de numeración es un poco"engorroso", a continuación mostramoscomo se pueden convertir lascomponentes RGB de decimal ahexadecimal mediante las herramientasque posee Microsoft Windows.

B.1.1. Obtener las

componentes del colordeseado en decimal

Mediante cualquier programa quepermita seleccionar colores, podemoselegir el color que queremos emplear enuna página HTML. Por ejemplo, en elprograma Microsoft Paint‹ 43 ›, queviene con los sistemas operativos deMicrosoft y que se puede encontrar através de Inicio → Programas →Accesorios, si seleccionamos en elme n ú Colores la opción Modificarcolores. . . aparece la ventana de laFigura B.1. Si en esta ventana se pulsael botón Definir colores personalizados

>>, la ventana anterior se amplia yaparece la ventana de la Figura B.2.

Figura B.1: Ventana para modificar

colores en Microsoft Paint

En esta ventana se puede elegir de lapaleta de colores un color y para elcolor elegido se puede seleccionar subrillo. En las casillas Rojo, Verde yAzul aparecen las correspondientescomponentes en decimal (los valores decada casilla varían desde 0 hasta 255).Una vez que se tienen las componentesdel color deseado, el siguiente paso esconvertirlas a hexadecimal.

Figura B.2: Ventana para definir colorespersonalizados en Microsoft Paint

B.1.2. Transformar lascomponentes de decimal a

hexadecimal

Para pasar un número del sistemadecimal al hexadecimal, se tiene quedividir el número entre 16. Si elcociente es mayor que 15, se divide elcociente entre 16 y así sucesivamentehasta lograr un cociente menor que 16.El número en hexadecimal escrito deizquierda a derecha se compone delúltimo cociente y los sucesivos restosobtenidos, desde el último hasta elprimero, pero si el último cociente o losrestos tienen dos cifras, se tienen quetransformar según las equivalencias delCuadro B.1.

Cuadro B.1: Equivalencias para pasardel sistema decimal al hexadecimal

Cociente oresto

Cifrahexadecimal

10 A11 B12 C13 D14 E15 F

Por ejemplo, el número 241 endecimal equivale a F1 en hexadecimal,ya que el primer (y único) resto que seobtiene es 1 y el último (y único)

cociente 15, que equivale a F.Como el método anterior es tedioso

y propenso a errores, se puede realizarla conversión automáticamente medianteel ordenador. Para ello, se puedeemplear el programa Calculadora quese incluye en los sistemas operativos deMICROSOFT y que se encuentra otra vezen Inicio → Programas → Accesorios.El programa Calculadora posee dosmodos de visualización: estándar ycientífica. Para realizar la conversión,tiene que estar en el modo calculadoracientífica, que se selecciona a través delmenú Ver.

Tal como se ve en la Figura B.3, el

programa Calculadora tiene cuatrobotones de radio marcados con lase ti que tas Hex (hexadecimal), Dec(decimal), Oct (octal) y Bin (binario),que permiten convertir un número a losdistintos sistemas de numeración. Parapasar de decimal a hexadecimal,simplemente hay que escribir el númerocuando la calculadora se encuentra en elsistema Dec y pulsar el botón Hex paraque aparezca en pantalla el númeroconvertido a hexadecimal.

Figura B.3: Calculadora en modocientífico


E n HTML existe una serie decolores predefinidos a los que se les haasignado un nombre en inglés. La listade nombres contiene cientos de colores,por lo que aquí solo incluimos elCuadro B.2 con algunos de ellos, juntocon su valor en RGB.

Nombre color Valor RGBaqua #00FFFFblack #000000blue #0000FF

fuchsia #FF00FFgray #808080green #008000lime #00FF00

maroon #800000

Cuadro B.2: Nombres de algunoscolores en HTML

navy #000080olive #808000purple #800080

red #FF0000silver #C0C0C0teal #008080

yellow #FFFF00white #FFFFFF

Apéndice C

Depuración de erroresde JavaScript

Como los lenguajes de scriptque se emplean en las páginas webson interpretados, la depuración deerrores es difícil (al no existir lafase de compilación, no se detectanlos errores sintácticos osemánticos). En este apéndice seexplica como se puede depurar elcódigo en cualquier navegador.

Además, se comentan algunasherramientas específicas queposeen los navegadores MicrosoftInternet Explorer y NetscapeCommunicator.

Índice General

C.1. IntroducciónC.2. Depuración en cualquier

navegadorC.3. Netscape Communicator

C.3.1. Modificar laspreferencias

C.3.2. Evaluación deexpresiones con la consola

C.3.3. Netscape JavaScriptDebugger

C.4. Microsoft InternetExplorer

C.1. Introducción

La depuración de errores deJavaScript suele estar desactivada enlos navegadores, ya que sólo es útil paraaquellos programadores que quieranverificar su código. Vamos a ver comopodemos depurar código JavaScriptde forma general en cualquier navegador

y de forma específica mediante lascaracterísticas que nos ofrecenNetscape Communicator y MicrosoftInternet Explorer.

C.2. Depuración encualquier navegador

Se pueden emplear las ventanas dealerta de JavaScript para mostrar lainformación que deseemos durante laejecución del código: valor de unavariable, situación del punto deejecución del código, etc. Este métodotambién permite detener

momentáneamente la ejecución delcódigo. Las ventajas que ofrece estesistema son:

1. La información que se muestrapuede ser tan detallada comonosotros queramos.

2. Su uso no tiene efecto sobre elresto del código.

3. Se pueden emplear tantas ventanasde alerta como se quiera.

4. Se pueden colocar prácticamenteen cualquier lugar del código.

5. Funciona con todos los

navegadores que soporten códigoJavaScript.

Por ejemplo, si queremos comprobaren un punto del código el valor de unavariable, sólo hay que incorporar unalínea de código similar a la siguiente:

Ejemplo C.11

alert("El valor de lavariable v es " + v);

C.3. NetscapeCommunicator

En versiones anteriores a la 4.06,cada vez que se producía un error deJavaScript, se mostraba una ventanade alerta con el error que se habíaproducido. Este sistema era bastanteengorroso, ya que si una página conteníamúltiples errores, se mostrabanmúltiples ventanas que el usuario teníaque cerrar una a una.

A partir de la versión 4.06, queincluye JavaScript 1.3, se emplea laconsola de JavaScript (Figura C.1). Laconsola sustituye a todas las ventanas dealerta: cada vez que se encuentra unerror, se escribe un mensaje en laconsola. La consola almacena todos los

mensajes de error que se producen(Figura C.2). Además, la consola sepuede dejar abierta o cerrar y abrirtantas veces como se quiera.

Figura C.1: Consola JavaScript deNetscape Communicator

Figura C.2: Consola JavaScript conmensajes de error

Por defecto, la consola no semuestra: se encuentra oculta y no hayninguna opción en los menús delnavegador que permita mostrarla. Si se

desea mostrar la consola, existen cuatroposibilidades:

1. Escribir javascript: en la barrade direcciones del navegador ypulsar la tecla Enter (Return).

2. Seleccionar en el menú File laopción Open Page. . . y escribir enel campo URL javascript:.

3. Incorporar en el código HTML dela página el siguiente enlace:

Ejemplo C.2

1<AHREF="javascript:">Abrirconsola JavaScript</A>}.

4. Modificar las preferencias delnavegador para que se muestreautomáticamente cada vez que seproduzca un error. Esta opción esla mejor para los usuarios queestén desarrollando códigoJavaScript.

La consola JavaScript dispone dedos botones, tal como se ve en la FiguraC.1:

El botón Clear Console permiteborrar todo los mensajes de errormostrados hasta el momento.

El botón Close cierra la ventana de

la consola.

Para cada error que se encuentra, enla consola JavaScript se muestra unmensaje con la URL del fichero quecontiene el error, el número de línea yun comentario que describe el tipo deerror. En algunos casos, se incluyetambién una parte de la línea quecontiene el error y se marca el puntoexacto donde se encuentra.

C.3.1. Modificar laspreferencias

Para algunos propósitos, el tener queabrir de forma manual la consolaJavaScript puede ser molesto. Porejemplo, si estamos desarrollando unapágina, el tener que teclearjavascript: cada vez que hay un errorpara abrir la consola y ver el mensaje deerror puede ser tedioso.

Se puede especificar queautomáticamente se abra la consolacuando se produzca un error deJavaScript. Para ello, hay quemodificar el fichero de preferenciasprefs.js, que se encuentra en eldirectorio personal de cada usuario deNetscape Communicator. Por defecto,

suele ser C:\Archivos de

programa\Netscape\Users\nombreUsuario

Para modificar este fichero hay queseguir los siguientes pasos:

1. Asegurarse de que el navegador noestá ejecutándose. El navegadorpuede sobrescribir los cambios querealicemos si se está ejecutandocuando editemos el fichero depreferencias.

2. Abrir el fichero de preferenciasprefs.js. El contenido del ficheroes similar a (sólo se muestran lasprimeras líneas):

Ejemplo C.3

1 // Netscape User Preferences2 // This is a generated file! Do not edit.3

4 user_pref("autoupdate.enabled", false);

5user_pref("browser.bookmark_window_showwindow",3);

6user_pref("browser.cache.disk_cache_size",20480);

7user_pref("browser.cache.memory_cache_size",2048);

8user_pref("browser.download_directory","D:\\TV\\");

3. Añadir una de las siguientes líneasal final del fichero:

Si se quiere que se abraautomáticamente la consolacada vez que se produce unerror de JavaScript:

Ejemplo C.41user_pref("javascript.console.open_on_error",true);

Si se quiere que se abra unaventana de alerta cada vez quese produce un error deJavaScript (como el sistemaempleado en las versionesanteriores):

Ejemplo C.51user_pref("javascript.classic.error_alerts",true);

Nota: aunque este sistemafigura en la documentación de

Netscape Communicator,se ha probado en la versión4.7 y no funciona.

4. Grabar y cerrar el ficheroprefs.js.

C.3.2. Evaluación deexpresiones con la consola

La consola de JavaScript es unventana compuesta de dos marcos(Figura C.1). El marco inferior contieneun cuadro de texto etiquetadojavascript typein en el que se

pueden escribir expresiones de una solalínea. Se puede emplear este cuadro detexto para asignar valores a variables,realizar operaciones matemáticas overificar el resultado devuelto por losoperadores de comparación.

Para evaluar una expresiónsimplemente hay que escribirla en elcuadro de texto y pulsar la tecla Enter(Return). El resultado se muestra en elmarco superior. Por ejemplo, al evaluarlas siguiente expresiones se obtienen losresultados citados en los comentarios ymostrados en la Figura C.3:

Ejemplo C.6

1 alert("Hola a todos"); //Muestra una ventana dealerta2 5-2; // Muestra 3

3Math.sqrt(49); // Muestra7

4var a=100; var b=45; //Crea dos variables

5 a-b; // Muestra 55

Figura C.3: Evaluación de expresiones

C.3.3. Netscape JavaScriptDebugger

Existe una posibilidad más con elnavegador de NETSCAPE: NetscapeJavaScript Debugger (Figura C.4). Setrata de un applet (hecho en Java) quepermite realizar una depuraciónavanzada del código JavaScript: visorde objetos (object inspector), puntos deparada (breakpoints), visores devariables (watches), ejecución paso apaso (step running), visor de la pila deejecución (call stack window), etc.

Esta herramienta se puede descargaren las siguientes direcciones:

http://developer.netscape.com/software/jsdebug.html

http://home.netscape.com/eng/Tools/JSDebugger/relnotes/relnotes11.html

Para poderlo descargar e instalar, esnecesario tener activada la opciónSmartUpdate. Se accede a ella a travésdel menú Edit → Preferences →Advanced → SmartUpdate y activar lacasi l la Enable SmartUpdate (FiguraC.5). El sistema de descarga einstalación es automático.

Figura C.4: Netscape JavaScriptDebugger

Figura C.5: SmartUpdate en NetscapeCommunicator

C.4. Microsoft Internet

Explorer

En las versiones 5.0 o superiores deeste navegador, se muestraautomáticamente una ventana de alerta(Figura C.6) por cada uno de los erroresde JavaScript que se encuentren en unapágina. Estas ventanas de alerta sepueden desactivar de dos formas:

Figura C.6: Mensaje de alerta deMicrosoft Internet Explorer

1. Desactivando la casilla Mostrarsiempre este mensaje cuando unapágina contenga errores en lapropia ventana de alerta. Lapróxima vez que se localice un

error de JavaScript, no semostrará la ventana de alerta.

2. Desactivando la opción Mostraruna notificación sobre cada errorde secuencia de comandos en elmenú Herramientas → Opcionesde Internet. . . → Avanzadas(Figura C.8). A través de estaopción se puede volver a activar.

En cualquier caso (esté activado odesactivado), si se encuentra un error,en la barra de estado del navegador semuestra un mensaje (Figura C.7) cuandose localiza un error. Pulsando sobre elicono (triángulo amarillo), se abre la

ventana de alerta.

Figura C.7: Mensaje de alerta en labarra de estado de Microsoft Internet

Explorer

Figura C.8: Opciones de MicrosoftInternet Explorer

En la ventana de alerta se muestra unmensaje con información sobre el error:línea, carácter, error, código y URL(fichero que contiene el error). Estosmensajes suelen ayudar bastante poco alocalizar el error, ya que a veces noseñalan el sitio exacto del error.

Si se tiene instalado algún entornode programación de MICROSOFT, comoVisual Basic o Visual C++, aMicrosoft Internet Explorer seincorpora una opción de depuración desecuencia de comandos (código descript), tal como se ve en la Figura C.8y Figura C.11. Esta opción permitedepurar el código de JavaScript

mediante el depurador empleado en losentornos de programación deMICROSOFT. El depurador (Figura C.12)permite realizar un depuración delcódigo mucho más precisa, ya queincorpora inspección de variables,ejecución paso a paso, puntos deinterrupción, visor de objetos, etc.

Para que funcione el depurador,tiene que estar desactivada la opciónDeshabilitar depuración de secuenciasde comandos en el menú Herramientas→ Opciones de Internet. . . →Avanzadas (Figura C.8).

Cuando se tiene activada la opciónde depurador de secuencias, las

ventanas de alerta cambian a otras quemuestran la línea donde se produce elerror, el error producido y laposibilidad de abrir el depurador desecuencias para depurar el código deJavaScript (Figura C.9 y Figura C.10).

Figura C.9: Mensaje de error enMicrosoft Internet Explorer

Figura C.10: Mensaje de error enMicrosoft Internet Explorer

Figura C.11: Nuevas opciones deMicrosoft Internet Explorer

Figura C.12: Depurador de Microsoft

Bibliografía

[1]Danny Goodman. Programaciónen JavaScript. Vía@Internet,Anaya Multimedia, Madrid.

[2]

Eduardo Parra Murga.Diccionario de Internet. PCWorld, IDG Communications,Madrid.

[3]

H. M. Deitel, P. J. Deitel, T. R.Nieto. Internet and World WideWeb. How to program. PrenticeHall, New Jersey, 2000.

[4]Jesús Bobadilla Sancho.Superutilidades paraWebmasters. Osborne McGraw-Hill, Madrid, 1999.

[5]

José Manuel Alarcón.Programación en JavaScript(actualizada hasta JavaScript1.3 y JScript 5). GuíasPrácticas, Anaya Multimedia,Madrid.

[6]

Oscar González Moreno.Programación en JavaScript.Guías Prácticas, AnayaMultimedia, Madrid, 1998.

[7]

Sergio Ríos Aguilar. LenguajesHTML, Java y CGI. El diseñode páginas Web para Internet asu alcance. Abeto Editorial,Madrid, 1996.

NOTAS

‹ 1 › Otro tipo de arquitectura de redes peer-to-peer (entre pares o de igual aigual), en la que cada ordenador de lared posee responsabilidadesequivalentes.

‹ 2 › Application ProgramInterface, interfaz de programación deaplicaciones.

‹ 3 › Remote Procedure Call ,llamada a procedimiento remoto.

‹ 4 › Open Database Connectivity,

conectividad de bases de datos abierta.

‹ 5 › En inglés se le suele denominarbrowser.

‹ 6 › Los clientes web tambiénsuelen actuar como clientes detransferencia de archivos (FTP),lectores de correo (SMTP y POP) ygrupos de noticias (NNTP), etc.

‹ 7 › Un plug-in es un módulo desoftware que se instala como un añadidoa un programa o sistema y queproporciona nuevas características oservicios al programa o sistema. En losnavegadores, suelen permitir la

reproducción de diferentes tipos derecursos de audio o vídeo.

‹ 8 › Tecnología de animaciónvectorial independiente de laplataforma, creada por MACROMEDIA

INC.

‹ 9 › Pensemos, por ejemplo, en losejecutivos que tienen que desplazarseentre distintos países, pero que necesitanacceder a las aplicaciones de suempresa.

‹ 10 › Conseil Europeen pour leRecherche Nucleaire.

‹ 11 › Tim Berners-Lee, RobertCailliau, Jean-François Groff, BerndPollermann. World-Wide Web: TheInformation Universe. ElectronicNetworking: Research, Applicationsand Policy, Vol. 1, No. 2, Meckler,Westport CT, primavera 1992.

‹ 12 › Defense Advanced ResearchProjects Agency.

‹ 13 › Institut National deRecherche en Informatique etAutomatique.

‹ 14 › Algunas versiones, comoHTML+ o HTML 3.0 nunca llegaron a

estándar.

‹ 15 › Las páginas estáticas tambiénpueden mostrar datos procedentes deuna base de datos mediante la técnicasnap shot. La información de la base dedatos se convierte en HTML de formamanual, automáticamente cuando ocurreun suceso o a una fecha y hora dadas(por ejemplo, todos los días a las tres dela mañana). Esta técnica es adecuadapara catálogos, listas de precios,directorios telefónicos, etc., que no semodifican muy a menudo.

‹ 16 › Esta extensión existe debido aque en DOS y Microsoft Windows 3.x

los ficheros sólo pueden tener unaextensión de tres caracteres.

‹ 17 › Aunque los nombres de losarchivos pueden tener mayúsculas yminúsculas, para acceder a un archivono se tienen en cuenta. Por ello, en unmismo directorio no pueden existir dosarchivos que sólo se diferencian porquealgunos caracteres aparecen enmayúsculas en uno y en minúsculas en elotro.

‹ 18 › Los navegadores actuales sonmuy flexibles: si falta alguna etiqueta defin no producen un error y muestran lapágina lo mejor posible. De todas

formas, es recomendable ajustarsesiempre a la sintaxis y no cometererrores.

‹ 19 › Información sobre lainformación. Los metadatos, porejemplo, permiten indicar cómo, cuándoy quién ha recogido una información ycomo le ha dado formato.

‹ 20 › Standard for ARPA InternetText Messages.

‹ 21 › En la documentación deNetscape Communicator no figura elvalor JUSTIFY.

‹ 22 › Se puede cambiar con laetiqueta <BASEFONT SIZE="numero">.

‹ 23 › Las razones pueden ser varias:los ordenadores no tenían la suficientepotencia para manejar varias imágenes ala vez, el ancho de banda en lacomunicaciones era menor o a nadie sele había ocurrido la idea de hacer un uso"intensivo y extensivo" de las imágenes.

‹ 24 › Compresión de la informaciónen la que todos los datos iniciales sealmacenan, por lo que la calidad de lasimágenes no se ve afectada al recuperarlas imágenes una vez comprimidas.

‹ 25 › El navegador conoce eltamaño de las imágenes antes decargarlas, por lo que ya puede reservarel correspondiente espacio en el diseñode la página.

‹ 26 › Normalmente se utiliza POST,que indica que los datos se envíen por laentrada estándar. Si se utiliza GET, losdatos se envían unidos a la URL.

‹ 27 › Un campo de contraseña esidéntico a un campo de texto, pero loscaracteres se ocultan medianteasteriscos.

‹ 28 › Para seleccionar varias

opciones se emplean la tecla Controlpara seleccionar de una en una y la teclaMays para seleccionar un conjuntocontiguo de opciones (se marca laprimera y la última).

‹ 29 › Por ejemplo, para el lenguajeJavaScript podemos usar losi d e n t i f i c a d o r e s JavaScript,JavaScript1.1, JavaScript1.2 yJavaScript1.3.

‹ 30 › Tanto NetscapeCommunicator como MicrosoftInternet Explorer, si no se indica unlenguaje con la etiqueta LANGUAGE,

suponen que se trata de JavaScript.

‹ 31 › 3No se recomienda mezclar enuna misma página distintos lenguajes descript: su mantenimiento es más difícil ysu ejecución es más lenta, ya que setiene que activar un intérprete distintopara cada lenguaje.

‹ 32 › "Netscape and Sun announceJavascript, the open, cross-platformobject scripting language forenterprise networks and the Internet",nota de prensa disponible enhttp://home.netscape.com/newsref/pr/newsrelease67.html

‹ 33 › A partir de ahora, cuando

hagamos referencia a C, se entiende quetambién se incluyen C++ y Java.

‹ 34 › Se permite el punto y la comacomo separadores decimales.

‹ 35 › Cuando se quiera acceder a unobjeto de otra ventana, habrá que indicarla ventana.

‹ 36 › Recordemos que se puedeobviar.

‹ 37 › También se puede acceder através de forms, un array donde cadaposición representa un formulario.

‹ 38 › También puede emplearse enel cuerpo.

‹ 39 › También puede emplearse enel cuerpo.

‹ 40 › En la documentación deNetscape Communicator no figura elvalor JUSTIFY.

‹ 41 › También puede emplearse enla cabecera.

‹ 42 › También puede emplearse enla cabecera.

‹ 43 › Se ha elegido este programa

porque se encuentra en la mayoría de losordenadores con sistema operativoMicrosoft Windows. Existen programade dibujo o retoque fotográfico, comoJasc Paint Shop Pro, que facilitan latarea, ya que directamente muestran enhexadecimal las componentes RGB deun color.

programacion en internet clientes web sergio lujan

Education