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 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
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)
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.
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
Í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
Í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
Í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
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 <!-- Comentario -->. 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>
5<H2>Encabezado nivel2</H2>
6<H3>Encabezado nivel3</H3>
7<H4>Encabezado nivel4</H4>
8<H5>Encabezado nivel5</H5>
9<H6>Encabezado nivel6</H6>
10 Texto normal11 </BODY>12 </HTML>
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>
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>
14 </BODY>15 </HTML>
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.
Ejemplo 3.91 <HTML>2 <BODY>
3Distintos tamaños deletra:<BR>
4<FONT SIZE="1">Texto en1</FONT><BR>
5<FONT SIZE="2">Texto en2</FONT><BR>
6<FONT SIZE="3">Texto en
3</FONT><BR>7
<FONT SIZE="4">Texto en4</FONT><BR>
8<FONT SIZE="5">Texto en5</FONT><BR>
9<FONT SIZE="6">Texto en6</FONT><BR>
10<FONT SIZE="7">Texto en7</FONT><BR>
11 </BODY>12 </HTML>
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
Los enlaces ohiperenlaces permitenrelacionar distintaspáginas
12entre sí (hipertexto).Esta característica da laposibilidad de
13organizar la informaciónen distintas páginas HTMLenlazadas, de
14forma que el usuariopueda seleccionar la quemás le interese en
15 cada momento.16 </P>17 <P ALIGN="CENTER">
18
Los enlaces ohiperenlaces permitenrelacionar distintaspáginas
19 entre sí (hipertexto).Esta característica da laposibilidad de
20organizar la informaciónen distintas páginas HTMLenlazadas, de
21forma que el usuariopueda seleccionar la quemás le interese en
22 cada momento.23 </P>24 <P ALIGN="JUSTIFY">
25
Los enlaces ohiperenlaces permitenrelacionar distintaspáginas
26
entre sí (hipertexto).Esta característica da laposibilidad de
organizar la información
27 en distintas páginas HTMLenlazadas, de
28forma que el usuariopueda seleccionar la quemás le interese en
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.
Ejemplo 3.111 <HTML>2 <BODY>
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>
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>
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.
Ejemplo 3.131 <HTML>2 <BODY>
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>
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>
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.
Ejemplo 3.161 <HTML>2 <HEAD>
3<TITLE>Esto es una páginaHTML</TITLE>
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):
Ejemplo 3.171 <HTML>2 <HEAD>
3<TITLE>Esto es una páginaHTML</TITLE>
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):
Ejemplo 3.201 <HTML>2 <HEAD>
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>
12<TD>Elemento (1, 3)
</TD>13 </TR>14 <TR>
15<TD>Elemento (2, 1)
</TD>
16<TD>Elemento (2, 2)
</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>
10<IMG SRC="foto.jpg"
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>
20<IMG SRC="foto.jpg"
WIDTH="134" HEIGHT="191"BORDER="10">
21El manitas de la
casa22 </TD>23 </TR>24 </TABLE>25 </BODY>26 </HTML>
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.
Ejemplo 3.251 <HTML>2 <HEAD>
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>
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>
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
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:
Ejemplo 3.301 <HTML>2 <HEAD>
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:
Ejemplo 3.311 <HTML>2 <HEAD>
3<TITLE>Ejemplo demarcos</TITLE>
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.
13 </BODY>14 </HTML>
Página frame1b.html:
Ejemplo 3.321 <HTML>2 <HEAD>
3<TITLE>Ejemplo demarcos</TITLE>
4 </HEAD>5 <BODY>
6Esta es la página<B>1</B>.
7 </BODY>8 </HTML>
Página frame1c.html:
Ejemplo 3.331 <HTML>2 <HEAD>
3<TITLE>Ejemplo demarcos</TITLE>
4 </HEAD>5 <BODY>
6Esta es la página<B>2</B>.
7 </BODY>8 </HTML>
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 ›.
Ejemplo 4.11 <HTML>2 <BODY>
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.
Ejemplo 4.21 <HTML>2 <HEAD>
3<SCRIPTLANGUAGE="VBScript">
4 Sub PulsadoVBSalert "Pulsado
5 el botón VBScript"6 End Sub7 </SCRIPT>
8<SCRIPTLANGUAGE="JavaScript">
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>
19 </BODY>20 </HTML>
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
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.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á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:
Ejemplo 5.11 <HTML>2 <HEAD>
3<TITLE>Ejemplo versionJavaScript</TITLE>
4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">
6<SCRIPTLANGUAGE="JavaScript">
7 <!--
8var version =
"JavaScript"9 // -->10 </SCRIPT>
11<SCRIPTLANGUAGE="JavaScript1.1">
12 <!--
13version = "JavaScript
1.1"14
// -->15 </SCRIPT>
16<SCRIPTLANGUAGE="JavaScript1.2">
17 <!--
18version = "JavaScript
1.2"19 // -->20 </SCRIPT>
21<SCRIPTLANGUAGE="JavaScript1.3">
22 <!--
23version = "JavaScript
1.3"24 // -->25 </SCRIPT>
26<SCRIPTLANGUAGE="JavaScript1.4">
27 <!--
28version = "JavaScript
1.4"
29 // -->30 </SCRIPT>
31<SCRIPTLANGUAGE="JavaScript1.5">
32 <!--
33version = "JavaScript
1.5"34 // -->35 </SCRIPT>
36<SCRIPTLANGUAGE="JavaScript">
37 <!--
38document.write("Soporta
" + version);39 // -->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>
3<SCRIPTLANGUAGE="JavaScript">
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
17document.write("fun1-
a- " + a + "<BR>");document.write("fun1-
18 b- " + b + "<BR>");19 fun2();
20document.write("fun1-
c- " + c + "<BR>");21 }22
23 fun();24
25document.write("-c-" + c +"<BR>");
26 </SCRIPT>27 </BODY>28 </HTML>
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.
Ejemplo 5.121 <HTML>2 <BODY>
3<SCRIPTLANGUAGE="JavaScript">
4document.write("\\251produce: \251<BR>");
5document.write("\\xAAproduce: \xAA<BR>");
6document.write("\\u00FAproduce: \u00FA<BR>");
7 </SCRIPT>8 </BODY>9 </HTML>
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:
Ejemplo 5.141 <HTML>2 <HEAD>
3<SCRIPTLANGUAGE="JavaScript">
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.
Como ejemplo tenemos el siguientecódigo:
Ejemplo 5.161 <HTML>2 <HEAD>
3<SCRIPTLANGUAGE="JavaScript">
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.
Como ejemplo tenemos el siguientecódigo:
Ejemplo 5.181 <HTML>2 <HEAD>3 <TITLE>Ejemplo for</TITLE>4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">
6<SCRIPTLANGUAGE="JavaScript">
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.
Como ejemplo tenemos el siguientecódigo:
Ejemplo 5.201 <HTML>2 <HEAD>
3<TITLE>Ejemplo dowhile</TITLE>
4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">6 <PRE>
7<SCRIPTLANGUAGE="JavaScript">
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.
Como ejemplo tenemos el siguientecódigo:
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
La sintaxis de esta sentencia es:
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 . . . )
La sintaxis de esta sentencia es:
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 (.).
Como ejemplo tenemos el siguientecódigo:
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
La sintaxis de esta sentencia es:
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.
Como ejemplo tenemos el siguientecódigo:
Ejemplo 5.281 <HTML>2 <HEAD>3 <TITLE>Ejemplo with</TITLE>4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">6 <PRE>
7<SCRIPTLANGUAGE="JavaScript">
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:
Ejemplo 5.301 <HTML>2 <HEAD>
3<TITLE>Ejemplofunction</TITLE>
4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">6 <PRE>
7<SCRIPTLANGUAGE="JavaScript">
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>
26 </BODY>27 </HTML>
La instrucción return se empleapara finalizar la ejecución de unafunción y también para devolver unvalor.
5.4.2. Funcionespredefinidas
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:
Ejemplo 5.311 <HTML>2 <HEAD>
3<TITLE>Ejemploeval</TITLE>
4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">
6<SCRIPTLANGUAGE="JavaScript">
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));
11 </SCRIPT>12 </BODY>13 </HTML>
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:
Ejemplo 5.321 <HTML>2 <HEAD>
3<TITLE>EjemploisFinite</TITLE>
4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">
6<SCRIPTLANGUAGE="JavaScript">
7v = prompt("Escriba unnúmero", "");
8 if(isFinite(v))
9alert("Correcto, es
un número");10 else
11alert("Te has
equivocado");
12 </SCRIPT>13 </BODY>14 </HTML>
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:
Ejemplo 5.331 <HTML>2 <HEAD>
3 <TITLE>Ejemplo Number-String</TITLE>
4 </HEAD>5 <BODY BGCOLOR="#FFFFFF">
6<SCRIPTLANGUAGE="JavaScript">
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));
15 </SCRIPT>16 </BODY>17 </HTML>
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.
Ejemplo 5.341 <HTML>2 <HEAD>
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"]);
6 document.write("<BR>");
7document.write("Profesor: "+ asignatura.prof.nombre
8+ " " +asignatura.prof.apellidos);
9 document.write("<BR>");
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
document.writeln("Carácteren 1 es " +cadena.charAt(1) + "<BR>");
5
document.writeln("Carácteren 2 es " +cadena.charAt(2) + "<BR>");
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
var cad = "Juan es hermanode Juan Luis";
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
var cad = "Juan es hermanode Juan Luis";
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>");
3document.write("floor(2.05):" + Math.floor(2.05) + "<BR>");
4document.write("floor(2.99):" + Math.floor(2.99) + "<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>");
2document.write("pow(3, 4):" + Math.pow(3, 4) + "<BR>");
3document.write("pow(5, 0):" + Math.pow(5, 0) + "<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>");
2document.write("round(3.5):" + Math.round(3.5) + "<BR>");
3document.write("round(3.51):" + Math.round(3.51) + "<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.
Ejemplo 5.701 <HTML>2 <HEAD>
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.
Ejemplo 5.711 <HTML>2 <HEAD>
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
73 return true;74 }75
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 }
5051 return true;52 }53
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 }
7071 return true;72 }73
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>
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).
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.
Ejemplo 6.11 <HTML>2 <HEAD>
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.
Ejemplo 6.21 <HTML>2 <HEAD>
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");
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.
Ejemplo 6.71 <HTML>2 <HEAD>
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>");
15 </SCRIPT>16 </BODY>17 </HTML>
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.
Ejemplo 6.81 <HTML>2 <HEAD>
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);
10 document.writeln("<BR>");
11document.writeln("navigator.appVersion= " + navigator.appVersion);
12 document.writeln("<BR>");13
document.writeln("navigator.language =" + navigator.language);
14 document.writeln("<BR>");
15document.writeln("navigator.mimeTypes =" + navigator.mimeTypes);
16 document.writeln("<BR>");
17document.writeln("navigator.platform =" + navigator.platform);
18 document.writeln("<BR>");
19document.writeln("navigator.plug-ins =" + navigator.plug-ins);
20 document.writeln("<BR>");
21document.writeln("navigator.userAgent =" + navigator.userAgent);
22 document.writeln("<BR>");23 </SCRIPT>24 </BODY>25 </HTML>
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"
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.
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 <!-- Comentario -->. 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:
ALIGN="LEFT" | "CENTER"| "RIGHT" | "JUSTIFY".
Párrafo: <P> ... </P>. Atributo:
ALIGN="LEFT" | "CENTER"| "RIGHT" | "JUSTIFY".
Texto preformateado (tipo de letrafija): <PRE> ... </PRE>.Atributos:
COLS="columnas".
WRAP.
Secuencia literal de caracteres(desactiva intérprete): <XMP> ...</XMP>.
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
etiquetas que permiten insertar unaimagen en un documento HTML y crearmapas de imágenes (también llamadosmapas o imágenes sensibles).
Imagen: <IMG>. Atributos:
SRC="URL".
LOWSRC="URL".
ALT="textoAlternativo".
ALIGN="LEFT" | "RIGHT" |"TOP" | "ABSMIDDLE" |"ABSBOTTOM" | "TEXTTOP"| "MIDDLE" | "BASELINE"| "BOTTOM".
BORDER="anchuraBorde".
HEIGHT="altura".
WIDTH="anchura".
HSPACE="margenHorizontal".
VSPACE="margenVertical".
ISMAP.
USEMAP="#nombreMapa".
NAME="nombreImagen".
ONABORT="códigoScript".
ONERROR="códigoScript".
ONLOAD="códigoScript".
SUPPRESS="TRUE" |"FALSE".
Área de un mapa de imagen:<AREA>. Atributos:
COORDS="coordenadas".
SHAPE="CIRCLE" | "RECT"| "POLY".
HREF="URL".
NOHREF.
TARGET="nombreVentana".
ONMOUSEOUT="códigoScript".
ONMOUSEOVER="códigoScript".
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".
HSPACE="margenHorizontal".
VSPACE="margenVertical".
Título de la tabla: <CAPTION >... </CAPTION>. Atributo:
ALIGN="BOTTOM" | "TOP".
Fila de la tabla: <TR> ... </TR>.Atributos:
ALIGN="LEFT" | "CENTER"| "RIGHT".
VALIGN="BASELINE" |"BOTTOM" | "MIDDLE" |"TOP".
BGCOLOR="color".
Celda de una tabla: <TD> ...</TD>. Atributos:
ALIGN="LEFT" | "CENTER"| "RIGHT".
VALIGN="BASELINE" |"BOTTOM" | "MIDDLE" |"TOP".
BGCOLOR="color".
COLSPAN="valor".
ROWSPAN="valor".
HEIGHT="altura".
WIDTH="anchura".
NOWRAP.
Encabezamiento de una columna ofila: <TH> ... </TH>. Atributos:
ALIGN="LEFT" | "CENTER"| "RIGHT".
VALIGN="BASELINE" |"BOTTOM" | "MIDDLE" |"TOP".
BGCOLOR="color".
COLSPAN="valor".
ROWSPAN="valor".
HEIGHT="altura".
WIDTH="anchura".
NOWRAP.
A.10. Etiquetas 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".
TARGET="nombreVentana".
ONRESET="códigoScript".
ONSUBMIT="códigoScript".
Botón: <INPUT TYPE="BUTTON">.Atributos:
NAME="nombreBotón".
VALUE="etiqueta".
ONCLICK="códigoScript".
Casilla de verificación: <INPUTTYPE="CHECKBOX">. Atributos:
NAME="nombre".
VALUE="valor".
CHECKED.
ONCLICK="códigoScript".
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".
ALIGN="LEFT" | "RIGHT" |"TOP" | "ABSMIDDLE" |"ABSBOTTOM" | "TEXTTOP"| "MIDDLE" | "BASELINE"| "BOTTOM".
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.
ONCLICK="códigoScript".
Restaurar (borrar): <INPUT
TYPE="RESET">. Atributos:
NAME="nombre".
VALUE="etiqueta".
ONCLICK="códigoScript".
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".
SIZE="longitudCampo".
ONBLUR="códigoScript".
ONCHANGE="códigoScript".
ONFOCUS="códigoScript".
ONSELECT="códigoScript".
Lista de selección: <SELECT> ...</SELECT>. Atributos:
NAME="nombre".
MULTIPLE.
SIZE="longitudCampo".
ONBLUR="códigoScript".
ONCHANGE="códigoScript".
ONCLICK="códigoScript".
ONFOCUS="códigoScript".
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".
ONBLUR="códigoScript".
ONCHANGE="códigoScript".
ONFOCUS="códigoScript".
ONSELECT="códigoScript".
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".
ONBLUR="códigoScript".
ONFOCUS="códigoScript".
ONLOAD="códigoScript".
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".
ONBLUR="códigoScript".
ONFOCUS="códigoScript".
ONLOAD="códigoScript".
ONMOUSEOVER="códigoScript".
ONMOUSEOUT="códigoScript".
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".
ONBLUR="códigoScript".
ONFOCUS="códigoScript".
ONLOAD="códigoScript".
ONMOUSEOVER="códigoScript".
ONMOUSEOUT="códigoScript".
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".
HSPACE="margenHorizontal".
VSPACE="margenVertical".
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".
HSPACE="margenHorizontal".
VSPACE="margenVertical".
PALETTE="FOREGROUND" |"BACKGROUND".
Texto alternativo para objetosincrustados: <NOEMBED> ...</NOEMBED>.
Objeto incrustado: <OBJECT>.Atributos:
CLASSID="ficheroClase".
DATA="URL".
CODEBASE="directorioFicheroClase".
TYPE="tipoMIME".
ALIGN="LEFT" | "RIGHT" |"TOP" | "ABSMIDDLE" |"ABSBOTTOM" | "TEXTTOP"| "MIDDLE" | "BASELINE"| "BOTTOM".
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.2. Tabla de colores
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.
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.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
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.
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
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
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